/* InvestorAI v4 — Premium dark theme */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: #000000;
  color: #f0f0f0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  height: 100%;
  overflow: hidden;
}

#react-entry-point, #_dash-app-content { height: 100%; }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #333; }
* { scrollbar-width: thin; scrollbar-color: #222 transparent; }

/* ── Inputs ── */
input, textarea, select {
  background-color: #0d0d0d !important;
  color: #f0f0f0 !important;
  border-color: #222 !important;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px !important;
  -webkit-text-fill-color: #f0f0f0 !important;
  caret-color: #f0f0f0;
  line-height: normal !important;
  vertical-align: middle;
  transition: border-color 0.12s;
}
input:focus, textarea:focus {
  border-color: #333 !important;
  outline: none !important;
  box-shadow: none !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0d0d0d inset !important;
  -webkit-text-fill-color: #f0f0f0 !important;
  transition: background-color 9999s;
}
.dash-input { background-color: #0d0d0d !important; color: #f0f0f0 !important; }
textarea.dash-input { resize: none; line-height: 1.55; min-height: 44px; overflow-y: hidden; }

/* ── Placeholder text — very subtle ── */
::placeholder { color: #555555 !important; font-size: 12px !important; }
::-webkit-input-placeholder { color: #555555 !important; font-size: 12px !important; }
::-moz-placeholder           { color: #555555 !important; font-size: 12px !important; }

/* ── Number spin buttons ── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { filter: invert(1); opacity: 0.3; }

/* ── Dropdowns (React-Select) — comprehensive dark override ── */
.Select,
.Select-control,
.Select.is-focused > .Select-control,
.Select.is-open > .Select-control {
  background-color: #0d0d0d !important;
  border: 1px solid #222 !important;
  border-radius: 6px !important;
  color: #f0f0f0 !important;
  box-shadow: none !important;
  min-height: 34px !important;
}
.Select-value-label,
.Select-placeholder,
.Select-input,
.Select-input input,
.Select input {
  color: #f0f0f0 !important;
  -webkit-text-fill-color: #f0f0f0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  background: transparent !important;
  line-height: 32px !important;
}
.Select-placeholder { color: #555555 !important; }
.Select--single > .Select-control .Select-value { color: #f0f0f0 !important; line-height: 32px !important; }
.Select-menu-outer {
  background-color: #0d0d0d !important;
  border: 1px solid #222 !important;
  border-radius: 8px !important;
  z-index: 99999 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.9) !important;
  margin-top: 2px !important;
}
.Select-menu { background-color: #0d0d0d !important; }
.VirtualizedSelectOption, .Select-option {
  background-color: #0d0d0d !important;
  color: #f0f0f0 !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
}
.VirtualizedSelectFocusedOption, .Select-option.is-focused, .Select-option:hover {
  background-color: #161616 !important; color: #f0f0f0 !important;
}
.Select-option.is-selected { background-color: #0d1f18 !important; color: #16c784 !important; }
.Select-arrow-zone { background: transparent !important; padding-top: 2px !important; }
.Select-arrow { border-top-color: #444 !important; }
.Select.is-open .Select-arrow { border-bottom-color: #444 !important; }

/* ── DataTable ── */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
  background-color: #080808 !important;
  color: #f0f0f0 !important;
  border-color: #141414 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
  background-color: #050505 !important;
  color: #444444 !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input {
  background-color: #0d0d0d !important;
  color: #f0f0f0 !important;
  -webkit-text-fill-color: #f0f0f0 !important;
}

/* ── Plotly ── */
.js-plotly-plot .plotly { background: transparent !important; }
.modebar { display: none !important; }
._dash-loading { background: #000 !important; }
.dash-spinner { border-top-color: #16c784 !important; }

/* ── Interactions ── */
button { cursor: pointer; font-family: 'Inter', sans-serif; }
button:hover { opacity: 0.82; transition: opacity 0.1s; }
a { text-decoration: none; }
a:hover { opacity: 0.8; }

/* ── Section padding ── */
#section-dashboard, #section-portfolio, #section-watchlist,
#section-markets, #section-ai {
  padding: 24px 28px !important;
}

/* ── Radio buttons ── */
input[type=radio] { accent-color: #16c784 !important; }

/* ── Animations ── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.15s ease; }

/* ── Sparkline strip ── */
.sparkline-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.sparkline-card {
  background: #080808;
  border: 1px solid #141414;
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 130px;
  flex: 1;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  #section-dashboard, #section-portfolio, #section-watchlist,
  #section-markets, #section-ai { padding: 12px 14px !important; }
  #sidebar { display: none !important; }
  .dash-table-container { overflow-x: auto !important; }
}