/* ==========================================================================
   Trinity Scan — Apple-dark design system
   Loaded automatically by Dash from app/frontend_dash/assets/.
   ========================================================================== */

:root {
  --canvas: #000000;
  --surface: rgba(28, 28, 30, 0.65);
  --surface-solid: #1c1c1e;
  --hairline: rgba(255, 255, 255, 0.1);
  --text-primary: #f5f5f7;
  --text-secondary: #86868b;
  --accent: #0a84ff;
  --up: #30d158;
  --down: #ff453a;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas,
    monospace;
  --ticker-height: 46px;
}

html,
body {
  background-color: var(--canvas) !important;
  color: var(--text-primary);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}

/* Soft top glow, like an Apple keynote stage. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    900px 420px at 55% -140px,
    rgba(10, 132, 255, 0.14),
    transparent 70%
  );
  z-index: 0;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-text);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-weight: 600;
}

hr {
  border-color: var(--hairline) !important;
  opacity: 1;
  margin: 1.75rem 0;
}

p { color: var(--text-primary); }

a { color: var(--accent); text-decoration: none; }

::selection { background: rgba(10, 132, 255, 0.35); }

/* --------------------------------------------------------------------------
   Live ticker bar — the signature element.
   -------------------------------------------------------------------------- */
.ticker-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ticker-height);
  z-index: 1000;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgba(10, 10, 12, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}

.ticker-viewport {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  animation: ticker-scroll 36s linear infinite;
  will-change: transform;
}

.ticker-bar:hover .ticker-track { animation-play-state: paused; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

.ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 34px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.ticker-name {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
}

.ticker-price {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ticker-change {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
}

.ticker-up { color: var(--up); }
.ticker-down { color: var(--down); }
.ticker-flat { color: var(--text-secondary); }

.ticker-offline {
  padding: 0 24px;
  color: var(--text-secondary);
  font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.app-sidebar {
  position: fixed;
  top: var(--ticker-height);
  left: 0;
  bottom: 0;
  width: 15.5rem;
  padding: 1.75rem 1rem 1.5rem;
  background: rgba(15, 15, 17, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--hairline);
  z-index: 900;
}

.brand-mark {
  padding: 0 0.75rem 1.1rem;
}

.brand-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
  margin-bottom: 0.5rem;
}

.brand-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--up);
  margin: 0;
}

.brand-sub {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 2px 0 0;
}

.app-sidebar .nav-link {
  color: var(--text-secondary) !important;
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 2px;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.app-sidebar .nav-link:hover {
  color: var(--text-primary) !important;
  background: rgba(255, 255, 255, 0.06);
}

.app-sidebar .nav-link.active {
  background: rgba(10, 132, 255, 0.16) !important;
  color: var(--accent) !important;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Content column
   -------------------------------------------------------------------------- */
.app-content {
  margin-left: 16.5rem;
  padding: calc(var(--ticker-height) + 2.2rem) 2.5rem 4rem;
  max-width: 1320px;
  position: relative;
  z-index: 1;
}

.page-header { margin-bottom: 2rem; }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.page-title {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 0.4rem;
}

.page-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  max-width: 60ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Cards & metrics
   -------------------------------------------------------------------------- */
.glass-card {
  background: var(--surface);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.4rem;
}

.card-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 1rem;
}

.metric-block { min-width: 130px; margin: 0 2rem 1rem 0; }

.metric-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 0.15rem;
}

.metric-value {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.metric-row { display: flex; flex-wrap: wrap; }

/* Split layout for the OI page — never overlaps, wraps below 1100px. */
.split-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: flex-start;
}

.split-col {
  flex: 1 1 460px;
  min-width: 0; /* lets tables shrink instead of overflowing on top of each other */
}

.split-col .glass-card { height: 100%; }

/* Signal badge chips (stock detail, OI headers). */
.badge-chip {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  margin-right: 10px;
}

/* Sector navigation cards on the Dashboard. */
.sector-card {
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  border: 1px solid var(--hairline);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  height: 100%;
}

.sector-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* Empty states */
.empty-state { text-align: left; }
.empty-line { color: var(--text-secondary); margin: 0.3rem 0; }
.empty-code {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.7rem 1rem;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */
.hero { padding: 2.5rem 0 1.5rem; }

.hero-title {
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 0.8rem;
  background: linear-gradient(180deg, #ffffff 0%, #a5a5ad 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  color: var(--text-secondary);
  font-size: 1.15rem;
  max-width: 56ch;
  margin: 0 0 2rem;
}

/* --------------------------------------------------------------------------
   Dash component overrides (dropdown, table controls)
   -------------------------------------------------------------------------- */

/* The card that holds a dropdown must sit ABOVE the cards after it, and
   must not clip the open menu — otherwise the option list renders
   underneath the next card (the overlap bug on the Charts page). */
.controls-card {
  position: relative;
  z-index: 100;
  overflow: visible;
}

.dash-dropdown .Select-menu-outer,
.Select-menu-outer {
  z-index: 9999 !important;
}

/* Old react-select (dcc.Dropdown) — every class variant, forced dark. */
.dash-dropdown .Select,
.dash-dropdown .Select-control,
.dash-dropdown .Select.is-focused > .Select-control,
.dash-dropdown .Select.is-open > .Select-control,
.Select-control,
.Select-menu-outer,
.Select-menu,
.VirtualizedSelectOption {
  background-color: var(--surface-solid) !important;
  border-color: var(--hairline) !important;
  border-radius: 10px !important;
  color: var(--text-primary) !important;
}

.Select-value-label,
.Select-option,
.Select-placeholder,
.dash-dropdown .Select-value .Select-value-label,
.Select-input > input {
  color: var(--text-primary) !important;
  font-family: var(--font-text);
}

.Select-option.is-focused,
.VirtualizedSelectFocusedOption {
  background-color: rgba(10, 132, 255, 0.18) !important;
}
.Select-arrow { border-top-color: var(--text-secondary) !important; }

/* Newer react-select builds (emotion classnames) — same dark treatment.
   Also unscoped (no .dash-dropdown requirement) because dcc.Dropdown
   doesn't always get that class set explicitly -- e.g. the Charts page
   symbol picker was rendering with the browser's default WHITE menu
   background, making the option text unreadable against it. */
.dash-dropdown [class$="-control"],
.dash-dropdown [class$="-menu"],
[class$="-control"],
[class$="-menu"],
[class$="-menuList"],
[class$="-MenuList"] {
  background-color: var(--surface-solid) !important;
  border-color: var(--hairline) !important;
  border-radius: 10px !important;
  color: var(--text-primary) !important;
}
.dash-dropdown [class$="-singleValue"],
.dash-dropdown [class$="-placeholder"],
.dash-dropdown [class$="-input"],
.dash-dropdown [class$="-option"],
[class$="-singleValue"],
[class$="-placeholder"],
[class$="-input"],
[class$="-option"] {
  color: var(--text-primary) !important;
  background-color: transparent !important;
}
[class$="-option"]:hover,
[class*="-option"][class*="isFocused"] {
  background-color: rgba(10, 132, 255, 0.18) !important;
}

/* Catch-all: the dropdown's search box and its options list (rendered in a
   detached popup) don't reliably match the class-name patterns above across
   every Dash version -- this is what was still showing up white/unreadable.
   ARIA roles and element type are stable regardless of the exact widget
   version, so force dark styling on those directly instead. */
input[type="text"],
input:not([type]) {
  background-color: var(--surface-solid) !important;
  color: var(--text-primary) !important;
  border-color: var(--hairline) !important;
}
[role="listbox"],
[role="option"],
[role="combobox"] {
  background-color: var(--surface-solid) !important;
  color: var(--text-primary) !important;
}
[role="option"]:hover,
[role="option"][aria-selected="true"] {
  background-color: rgba(10, 132, 255, 0.18) !important;
}

/* AI Analyst (Gemini) — question box and answer rendering */
.ai-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: 0.88rem;
  padding: 8px 16px;
  outline: none;
  min-width: 200px;
}

.ai-input:focus {
  border-color: rgba(10, 132, 255, 0.5);
  background: rgba(255, 255, 255, 0.07);
}

.ai-input::placeholder { color: var(--text-secondary); }

.ai-answer {
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.55;
}

.ai-answer strong { color: var(--accent); }
.ai-answer em { color: var(--text-secondary); font-size: 0.8rem; }
.ai-answer ul { padding-left: 1.2rem; margin: 0.3rem 0; }
.ai-answer li { margin-bottom: 0.2rem; }
.ai-answer p { margin: 0.4rem 0; }

/* Pill buttons (watchlist add, etc.) */
.pill-button {
  background: rgba(10, 132, 255, 0.16);
  color: var(--accent);
  border: 1px solid rgba(10, 132, 255, 0.35);
  border-radius: 999px;
  padding: 6px 16px;
  font-family: var(--font-text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.pill-button:hover:not(:disabled) {
  background: rgba(10, 132, 255, 0.28);
  color: var(--accent);
}

.pill-button:disabled {
  background: rgba(48, 209, 88, 0.14);
  color: var(--up);
  border-color: rgba(48, 209, 88, 0.3);
  cursor: default;
}

/* Charts page pickers (timeframe radio + indicator checklist) */
.timeframe-picker label,
.indicator-picker label {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}

.timeframe-picker input,
.indicator-picker input {
  accent-color: var(--accent);
  cursor: pointer;
}

/* DataTable filter/pagination chrome */
.dash-spreadsheet-container .dash-filter input {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 6px;
}

.dash-table-container .previous-next-container .page-number,
.dash-table-container .previous-next-container button {
  color: var(--text-secondary) !important;
  background: transparent !important;
  border: none !important;
}

.dash-table-container .previous-next-container button:hover {
  color: var(--text-primary) !important;
}

/* Row hover across all DataTables */
.dash-spreadsheet-container tr:hover td {
  background-color: rgba(255, 255, 255, 0.04) !important;
  cursor: pointer;
}

/* THE "everything turns white" fix: when a table cell is clicked/focused,
   Dash renders it as a text input with a default WHITE background, which
   swallows the (light) text. Force the cell and its inner input to stay
   dark with a subtle blue selection tint instead. */
.dash-spreadsheet-container td.focused,
.dash-spreadsheet-container td.cell--selected,
.dash-cell.focused,
.dash-cell.cell--selected {
  background-color: rgba(10, 132, 255, 0.18) !important;
  color: var(--text-primary) !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner input.dash-cell-value,
.dash-spreadsheet-container input.dash-cell-value:focus,
.dash-cell-value.unfocused,
.dash-cell div.dash-cell-value {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  caret-color: transparent;
}

/* Sortable header arrows + icons keep muted color, never white boxes */
.dash-spreadsheet-container th:hover,
.dash-spreadsheet-container th .column-header--sort:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-primary) !important;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .app-sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
    padding-top: calc(var(--ticker-height) + 1rem);
  }
  .app-content {
    margin-left: 0;
    padding: 1.5rem 1.2rem 3rem;
  }
  .hero-title { font-size: 2.3rem; }
  .page-title { font-size: 1.8rem; }
}

/* ==========================================================================
   MOBILE-RESPONSIVE LAYOUT  (screens ≤ 768 px)
   ========================================================================== */

/* Hamburger button — hidden on desktop, shown on mobile */
.hamburger-btn {
  display: none;
  background: transparent;
  border: none;
  color: #F5F5F7;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 14px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Sidebar close button — hidden on desktop */
.sidebar-close-btn {
  display: none;
  background: transparent;
  border: none;
  color: #8E8E93;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  position: absolute;
  top: 10px;
  right: 10px;
}

/* Backdrop overlay — hidden by default */
.sidebar-backdrop {
  display: none;
}

@media (max-width: 768px) {

  /* Candlestick chart on the Charts page: instead of squeezing every
     candle into the narrow screen (where they start overlapping and
     become unreadable), the chart keeps its natural width and the
     surrounding box scrolls horizontally instead. Desktop is untouched --
     this block only exists inside the 768px media query. */
  .chart-scroll-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chart-graph-wrapper {
    min-width: var(--chart-min-width, 900px);
    display: block;
  }

  /* ── Ticker bar ─────────────────────────────────────────────────────── */
  .ticker-bar {
    padding: 0;
    height: var(--ticker-height);
    display: flex;
    align-items: center;
  }

  .hamburger-btn {
    display: flex;
  }

  /* ── Sidebar: off-canvas by default ────────────────────────────────── */
  .app-sidebar {
    position: fixed;
    top: 0;
    left: -260px;          /* slide off-screen */
    width: 240px !important;
    height: 100vh;
    z-index: 1000;
    transition: left 0.25s ease;
    padding-top: 3rem;
    border-right: 1px solid var(--hairline);
  }

  .app-sidebar.sidebar-open {
    left: 0;               /* slide in */
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }

  .sidebar-close-btn {
    display: flex;
  }

  /* Backdrop: dark overlay behind open sidebar */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 999;
    pointer-events: none;
    transition: background 0.25s ease;
  }

  .sidebar-backdrop.backdrop-visible {
    background: rgba(0,0,0,0.55);
    pointer-events: all;
  }

  /* ── Content area: full-width when sidebar hidden ───────────────────── */
  .app-content {
    margin-left: 0 !important;
    /* Top padding must clear the fixed ticker bar (46px) plus a little
       breathing room -- it was previously just 1.2rem, which let the
       fixed ticker bar overlap the top of every page heading. */
    padding: calc(var(--ticker-height) + 1rem) 0.9rem 4rem !important;
    min-width: 0;
  }

  /* ── Split rows stack vertically ────────────────────────────────────── */
  .split-row {
    flex-direction: column !important;
  }

  .split-col {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ── Cards ───────────────────────────────────────────────────────────── */
  .card {
    padding: 1rem !important;
    border-radius: 12px !important;
  }

  /* ── Page header ────────────────────────────────────────────────────── */
  .page-header-title,
  .page-title {
    font-size: 1.55rem !important;
    line-height: 1.2 !important;
  }

  .hero-title {
    font-size: 1.8rem !important;
  }

  /* ── DataTable: horizontal scroll, sticky first column ─────────────── */
  .dash-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Shrink table font on mobile so more columns fit */
  .dash-spreadsheet-container .dash-spreadsheet td,
  .dash-spreadsheet-container .dash-spreadsheet th {
    font-size: 0.75rem !important;
    padding: 6px 8px !important;
    white-space: nowrap;
  }

  /* ── Inputs, buttons: 44 px minimum tap target ───────────────────────── */
  .dcc-input, input[type="text"], input[type="password"] {
    min-height: 44px !important;
    font-size: 1rem !important;
  }

  button, .btn, .nav-link {
    min-height: 44px !important;
  }

  /* ── Indicator picker (checklist row) wraps on mobile ───────────────── */
  .indicator-picker {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }

  /* ── Sector grid: 2 columns on mobile ───────────────────────────────── */
  [style*="repeat(auto-fill, minmax(180px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Charts: full-width ─────────────────────────────────────────────── */
  .js-plotly-plot {
    max-width: 100% !important;
  }

  /* ── Telegram card inputs full-width ────────────────────────────────── */
  #tg-token, #tg-chatid {
    width: 100% !important;
  }
}

/* Extra-small screens (phones in portrait, ≤ 420 px) */
@media (max-width: 420px) {
  .page-title { font-size: 1.3rem !important; }
  .app-content { padding: calc(var(--ticker-height) + 0.6rem) 0.6rem 4rem !important; }
  [style*="repeat(auto-fill, minmax(180px"] {
    grid-template-columns: 1fr !important;   /* single column */
  }
}