/* ── Dark theme variables ──────────────────────────────────────────────────── */
:root {
  --bg-app:       #0d1117;
  --bg-nav:       #010409;
  --bg-card:      #161b22;
  --bg-card-2:    #21262d;
  --bg-hover:     #2d333b;
  --bg-input:     #0d1117;
  --border:       #30363d;
  --border-sub:   #21262d;
  --text-1:       #e6edf3;
  --text-2:       #8b949e;
  --text-3:       #6e7681;
  --green:        #3fb950;
  --green-bg:     #0d1f17;
  --red:          #f85149;
  --red-bg:       #1f0d0d;
  --orange:       #d29922;
  --orange-bg:    #1f1800;
  --blue:         #58a6ff;
  --blue-bg:      #0d1929;
  --purple:       #bc8cff;
  --purple-bg:    #1a0d29;
  --accent:       #1f6feb;
  --font:         'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --radius:       10px;
  --radius-sm:    6px;
  --shadow:       0 4px 16px rgba(0,0,0,0.4);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.3);
  --nav-h:        56px;      /* bottom nav height */
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
}

/* ── Base reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-app) !important;
  color: var(--text-1);
  font-family: var(--font);
  /* Reserve space for fixed bottom nav on mobile */
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom));
}

/* ── App wrapper ───────────────────────────────────────────────────────────── */
#app-container {
  background: var(--bg-app) !important;
  min-height: 100vh;
}

/* ── Top navbar ────────────────────────────────────────────────────────────── */
#navbar {
  background: linear-gradient(90deg, var(--bg-nav) 0%, #0d1117 100%) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none !important;
}
#navbar span, #navbar p { color: var(--text-1) !important; }
#last-updated { color: var(--text-2) !important; }

/* ── Shared card dark overrides ────────────────────────────────────────────── */
#portfolio-controls,
#section-daily,
#section-historical,
#section-projections,
#section-opportunities,
#section-strategy,
#section-ipo,
#tab-nav {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--text-1) !important;
}

/* All headings within sections */
#portfolio-controls h2,
#section-daily h2,
#section-historical h2,
#section-projections h2,
#section-opportunities h2,
#section-strategy h2,
#section-ipo h2 {
  color: var(--text-2) !important;
}

/* ── Dark card rendered by callbacks (_CARD_STYLE) ──────────────────────────── */
.dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px 28px;
  margin-bottom: 24px;
  color: var(--text-1);
}
.dash-card h2 {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin-top: 0;
  margin-bottom: 16px;
}

/* All callback-rendered divs that carry light backgrounds — override globally */
/* This targets the most common patterns without breaking semantic colors */
#overnight-alerts-section,
#pre-earnings-conviction-section,
#upcoming-earnings-section,
#post-earnings-alerts-section {
  color: var(--text-1);
}

/* Sub-cards inside callback sections */
#overnight-alerts-section > div,
#pre-earnings-conviction-section > div,
#upcoming-earnings-section > div,
#post-earnings-alerts-section > div {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Inner divs with white backgrounds in cards */
#overnight-alerts-section > div > div,
#pre-earnings-conviction-section > div > div,
#upcoming-earnings-section > div > div,
#post-earnings-alerts-section > div > div,
#section-strategy > div:last-child > div {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
}

/* Light text to readable text override */
#portfolio-controls *:not(button):not(input):not([style*="color: #2ca44e"]):not([style*="color: #d9534f"]):not([style*="color: #3fb950"]):not([style*="color: #f85149"]):not([style*="color: #e67e22"]):not([style*="color: #1a73e8"]):not([style*="color: #7b2ff7"]),
#section-daily *:not([style*="color: #2ca44e"]):not([style*="color: #d9534f"]):not([style*="color: #3fb950"]):not([style*="color: #f85149"]):not([style*="color: #e67e22"]):not([style*="color: #1a73e8"]),
#section-historical *:not([style*="color: #2ca44e"]):not([style*="color: #d9534f"]):not([style*="color: #3fb950"]):not([style*="color: #f85149"]):not([style*="color: #e67e22"]):not([style*="color: #1a73e8"]),
#section-projections *:not([style*="color: #2ca44e"]):not([style*="color: #d9534f"]):not([style*="color: #3fb950"]):not([style*="color: #f85149"]):not([style*="color: #e67e22"]):not([style*="color: #1a73e8"]),
#section-opportunities *:not([style*="color: #2ca44e"]):not([style*="color: #d9534f"]):not([style*="color: #3fb950"]):not([style*="color: #f85149"]):not([style*="color: #e67e22"]):not([style*="color: #1a73e8"]) {
  color: var(--text-1);
}

/* Dark text (like #1a1a2e) used as primary in light theme — override to light */
[style*="color: #1a1a2e"],
[style*="color: #1a1d2e"] {
  color: var(--text-1) !important;
}
[style*="color: #333"],
[style*="color: #444"] {
  color: var(--text-1) !important;
}
[style*="color: #555"] {
  color: var(--text-2) !important;
}
[style*="color: #888"],
[style*="color: #aaa"] {
  color: var(--text-3) !important;
}

/* Light background overrides — common patterns */
[style*="background: #fff"],
[style*="background: white"],
[style*="background:#fff"],
[style*='background: "#fff"'],
[style*="background-color: #fff"],
[style*="background-color: white"] {
  background: var(--bg-card) !important;
}
[style*="background: #f5f5f5"],
[style*="background: #f8f8f8"],
[style*="background: #f8faff"],
[style*="background: #f0f6ff"],
[style*="background: #f1f3f4"] {
  background: var(--bg-card-2) !important;
}

/* Semantic tinted backgrounds — darken appropriately */
[style*="background: #f0fff4"],
[style*="background: #f0fff5"] { background: var(--green-bg) !important; }
[style*="background: #fff5f5"] { background: var(--red-bg) !important; }
[style*="background: #fff8f0"],
[style*="background: #fffaf4"] { background: var(--orange-bg) !important; }
[style*="background: #f8f4ff"],
[style*="background: #f3e8ff"] { background: var(--purple-bg) !important; }
[style*="background: #e8f0fe"],
[style*="background: #f0f6ff"] { background: var(--blue-bg) !important; }

/* Border overrides */
[style*="border-bottom: 1px solid #eee"],
[style*="borderBottom: 1px solid #eee"],
[style*="border: 1px solid #eee"],
[style*="border: 1px solid #ddd"],
[style*="border-bottom: 2px solid #ddd"] {
  border-color: var(--border) !important;
}

/* ── Inputs & buttons ──────────────────────────────────────────────────────── */
input[type="text"],
input[type="number"],
.Select-control {
  background: var(--bg-input) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--border) !important;
  min-height: 44px;
  font-size: 16px; /* prevent iOS zoom */
  border-radius: var(--radius-sm) !important;
}
input[type="text"]:focus,
input[type="number"]:focus {
  outline: none;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(88,166,255,0.15) !important;
}
input::placeholder { color: var(--text-3) !important; }

/* Dropdown (dcc.Dropdown) */
.Select-control,
.Select-menu-outer,
.Select-option,
.VirtualizedSelectFocusedOption {
  background: var(--bg-card-2) !important;
  color: var(--text-1) !important;
  border-color: var(--border) !important;
}
.Select-value-label,
.Select-placeholder,
.Select-arrow-zone { color: var(--text-2) !important; }
.Select-option:hover,
.VirtualizedSelectFocusedOption { background: var(--bg-hover) !important; }

/* All buttons ≥ 44px tap target */
button {
  min-height: 44px;
  font-family: var(--font) !important;
  cursor: pointer;
}

/* Primary button override */
#add-ticker-btn {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
#remove-ticker-btn {
  background: var(--bg-card-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
button:not([id]):not([style]) {
  min-height: 44px;
}

/* ── Tables → dark theme ───────────────────────────────────────────────────── */
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  background: var(--bg-card-2) !important;
  color: var(--text-2) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px !important;
  white-space: nowrap;
}
td {
  border-bottom: 1px solid var(--border-sub) !important;
  padding: 10px 12px !important;
  color: var(--text-1) !important;
  font-size: 13px;
}
tr:last-child td { border-bottom: none !important; }
tr:hover td { background: var(--bg-hover) !important; }

/* ── Period selector radio (dcc.RadioItems) ─────────────────────────────────── */
#period-selector label {
  color: var(--text-2) !important;
  font-size: 14px !important;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 20px;
  transition: background 0.15s;
}
#period-selector label:has(input:checked) {
  background: var(--accent) !important;
  color: #fff !important;
}
#period-selector input[type="radio"] { accent-color: var(--accent); }

/* ── Strategy Generator inputs ──────────────────────────────────────────────── */
#strategy-amount, #strategy-st-rate, #strategy-lt-rate {
  background: var(--bg-input) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--border) !important;
}
#strategy-generate-btn {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  min-height: 44px;
  padding: 0 28px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ── Glossary button ────────────────────────────────────────────────────────── */
#glossary-open-btn {
  background: var(--bg-card-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
  min-height: 44px !important;
}

/* ── Bottom navigation ──────────────────────────────────────────────────────── */
#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  padding-bottom: var(--safe-bottom);
  background: var(--bg-nav);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1000;
}
.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.15s;
  border-radius: var(--radius-sm);
  flex: 1;
}
.nav-btn .nav-icon {
  font-size: 18px;
  line-height: 1;
}
.nav-btn:hover,
.nav-btn.active { color: var(--blue) !important; }
.nav-btn.active { color: var(--blue) !important; }

/* ── Loading spinner dark ───────────────────────────────────────────────────── */
._dash-loading,
._dash-loading-callback {
  color: var(--blue) !important;
}

/* ── Ticker chips ───────────────────────────────────────────────────────────── */
#ticker-list { color: var(--text-1) !important; }
#ticker-list span,
#ticker-list div {
  color: var(--text-1) !important;
  border-color: var(--border) !important;
}

/* ── dcc.Loading dark overlay ───────────────────────────────────────────────── */
.dash-loading-container { color: var(--blue) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE-FIRST RESPONSIVE LAYOUT
   ══════════════════════════════════════════════════════════════════════════════ */

/* Base (mobile): all sections full-width */
#portfolio-controls,
#section-daily,
#section-historical,
#section-projections,
#section-opportunities,
#section-strategy,
#section-ipo,
#overnight-alerts-section,
#pre-earnings-conviction-section {
  padding: 20px !important;
  margin-bottom: 16px !important;
  border-radius: 8px !important;
  /* Clip content that would otherwise escape the card edge on narrow viewports */
  overflow-x: hidden;
  /* Ensure the card never grows wider than its container */
  max-width: 100%;
  box-sizing: border-box;
}

/* Body text sizes readable at arm's length */
#section-daily p,
#section-historical p,
#section-projections p { font-size: 15px; }

/* H2 section labels */
h2 { font-size: 13px; }

/* Ticker input — prevent iOS auto-zoom (must be ≥ 16px) */
#ticker-input { font-size: 16px !important; }

/* Tab-nav hidden on mobile (bottom nav replaces it) */
#tab-nav { display: none !important; }

/* Earnings panels — stack vertically on mobile */
#upcoming-earnings-section,
#post-earnings-alerts-section {
  flex: 1 1 100% !important;
  min-width: 100% !important;
}

/* ── Finviz-style dense mobile rows — hidden on desktop/tablet ──────────────── */
.mobile-compact    { display: none  !important; }
.desktop-full      { display: block !important; }
/* Opportunities: default state — mobile list hidden, desktop table visible */
.opp-mobile-cards  { display: none  !important; }
.opp-desktop-table { display: block !important; }

/* ── Mobile card-table: convert tables to card-like stacks ─────────────────── */
@media (max-width: 639px) {
  /* Tables become block-level stacked cards */
  #daily-table table,
  #projections-table table,
  #historical-table table { display: block !important; }

  #daily-table thead,
  #projections-table thead,
  #historical-table thead { display: none !important; }

  #daily-table tbody,
  #projections-table tbody,
  #historical-table tbody { display: block !important; }

  #daily-table tr,
  #projections-table tr,
  #historical-table tr {
    display: block !important;
    background: var(--bg-card-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    padding: 12px 14px !important;
  }
  #daily-table tr:hover,
  #projections-table tr:hover,
  #historical-table tr:hover {
    background: var(--bg-hover) !important;
  }

  #daily-table td,
  #projections-table td,
  #historical-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 5px 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border-sub) !important;
    font-size: 13px !important;
    white-space: normal !important;
  }
  #daily-table tr td:first-child,
  #projections-table tr td:first-child,
  #historical-table tr td:first-child {
    font-size: 16px !important;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
  }
  #daily-table tr td:last-child,
  #projections-table tr td:last-child,
  #historical-table tr td:last-child {
    border-bottom: none !important;
  }

  /* Stacked-card row labels — mirror the desktop column header (data-label) */
  #daily-table td[data-label]::before,
  #historical-table td[data-label]::before {
    content: attr(data-label);
    color: var(--text-2);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 12px;
    white-space: nowrap;
  }

  /* Opportunities: compact list only — desktop table fully hidden */
  .opp-desktop-table { display: none !important; }
  .opp-mobile-cards  { display: block !important; }

  /* ── Finviz-style compact mobile rows ──────────────────────────────────── */
  .mobile-compact { display: block !important; }
  .desktop-full   { display: none !important; }

  /* Compact card padding */
  #section-opportunities {
    padding: 10px 12px !important;
  }
  #section-opportunities > p,
  #section-opportunities > details { display: none !important; }
  #opportunities-timestamp { display: none !important; }

  /* Section header: tight */
  #section-opportunities h2,
  #pre-earnings-conviction-section h2 {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* Pre-earnings compact card padding */
  #pre-earnings-conviction-section > div {
    padding: 10px 12px !important;
  }
  #pre-earnings-conviction-section > div > p { display: none !important; }

  /* Post-earnings compact card padding */
  #post-earnings-alerts-section > div {
    padding: 10px 12px !important;
  }
  #post-earnings-alerts-section h2 {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* Earnings compact sections — small fixed scroll window */
  .mobile-compact {
    max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Opportunities list — scroll when list is long */
  .opp-mobile-cards {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .fviz-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-bottom: 1px solid var(--border-sub);
    height: 26px;
    max-height: 26px;
    font-size: 11px;
    line-height: 1.1;
    overflow: hidden;
  }
  .fviz-rank { width: 16px; color: var(--text-3); font-size: 10px; flex-shrink: 0; }
  .fviz-ticker { font-weight: 700; font-size: 12px; width: 42px; flex-shrink: 0; }
  .fviz-score { display: flex; align-items: center; gap: 4px; width: 50px; flex-shrink: 0; }
  .fviz-bar-track { width: 24px; height: 4px; border-radius: 2px; background: var(--bg-hover); flex-shrink: 0; }
  .fviz-bar-fill { height: 4px; border-radius: 2px; }
  .fviz-score-num { font-size: 11px; font-weight: 700; width: 18px; }
  .fviz-price { font-size: 11px; font-weight: 600; width: 55px; text-align: right; flex-shrink: 0; }
  .fviz-reason { display: none; }
  .fviz-days { font-size: 11px; color: var(--text-2); width: 28px; text-align: center; flex-shrink: 0; }
  .fviz-beat { font-size: 9px; font-weight: 700; width: 32px; text-align: center; padding: 1px 4px; border-radius: 2px; letter-spacing: 0.04em; flex-shrink: 0; }
  .fviz-move { font-size: 11px; font-weight: 700; min-width: 44px; text-align: right; flex-shrink: 0; }
  .fviz-row:last-child { border-bottom: none; }

  /* Score bar stays on one line — bar track never collapses, number doesn't wrap */
  #opportunities-table td > div[style*="flex"] {
    flex-wrap: nowrap;
    min-width: 0;
  }
  #opportunities-table td > div[style*="flex"] > div:first-child {
    flex-shrink: 0;
  }
  /* Price and score number stay on one line */
  #opportunities-table td > div[style*="flex"] > span,
  #opportunities-table td:nth-child(4) {
    white-space: nowrap;
  }

  /* Strategy / form inputs stack */
  #section-strategy .strategy-row {
    flex-direction: column !important;
  }
  #section-strategy input,
  #section-strategy .Select-control {
    width: 100% !important;
  }

  /* Pre-earnings conviction cards — full width, no horizontal overflow */
  #pre-earnings-conviction-section > div > div { width: 100% !important; }
  #pre-earnings-conviction-section > div > div > div {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ticker input full width */
  #ticker-input { width: 100% !important; box-sizing: border-box !important; }
  .flex-row { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  #add-ticker-btn, #remove-ticker-btn { width: 100% !important; }

  /* Nav bar shown on mobile */
  #bottom-nav { display: flex !important; }
}

/* ── Tablet: 2-column card grid ─────────────────────────────────────────────── */
@media (min-width: 640px) {
  /* Opportunities: switch back to scrolling table on tablet+ */
  .opp-desktop-table { display: block !important; }
  .opp-mobile-cards  { display: none !important; }

  body { padding-bottom: 0; }   /* no bottom nav needed */
  #bottom-nav { display: none !important; }

  /* Earnings panels side by side */
  #upcoming-earnings-section,
  #post-earnings-alerts-section {
    flex: 1 1 calc(50% - 12px) !important;
    min-width: 280px !important;
  }

  /* Cards breathe more */
  #portfolio-controls,
  #section-daily,
  #section-historical,
  #section-projections,
  #section-opportunities,
  #section-strategy,
  #section-ipo {
    padding: 20px 24px !important;
    margin-bottom: 20px !important;
  }

  /* Tab nav visible again on tablet */
  #tab-nav { display: flex !important; }

  h2 { font-size: 14px; }
}

/* ── Desktop: comfortable spacing ───────────────────────────────────────────── */
@media (min-width: 1024px) {
  #portfolio-controls,
  #section-daily,
  #section-historical,
  #section-projections,
  #section-opportunities,
  #section-strategy,
  #section-ipo {
    padding: 24px 28px !important;
    margin-bottom: 24px !important;
  }

  h2 { font-size: 15px; }
}

/* ── IPO Watch tables — mobile card stacking (same pattern as other tables) ──── */
@media (max-width: 639px) {
  #ipo-watchlist-table table,
  #ipo-upcoming-table table,
  #ipo-recent-table table { display: block !important; }

  #ipo-watchlist-table thead,
  #ipo-upcoming-table thead,
  #ipo-recent-table thead { display: none !important; }

  #ipo-watchlist-table tbody,
  #ipo-upcoming-table tbody,
  #ipo-recent-table tbody { display: block !important; }

  #ipo-watchlist-table tr,
  #ipo-upcoming-table tr,
  #ipo-recent-table tr {
    display: block !important;
    background: var(--bg-card-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    padding: 12px 14px !important;
  }

  #ipo-watchlist-table td,
  #ipo-upcoming-table td,
  #ipo-recent-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 5px 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border-sub) !important;
    font-size: 13px !important;
    white-space: normal !important;
  }

  #ipo-watchlist-table tr td:first-child,
  #ipo-upcoming-table tr td:first-child,
  #ipo-recent-table tr td:first-child {
    font-size: 16px !important;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
  }

  #ipo-watchlist-table tr td:last-child,
  #ipo-upcoming-table tr td:last-child,
  #ipo-recent-table tr td:last-child { border-bottom: none !important; }
}

/* ── iPhone landscape: compact list (single-column, same as portrait) ────────── */
/* max-height:500px targets only phones in landscape (not tablets or desktops).  */
/* Must come after the 640px tablet block so it wins the cascade.                */
@media (orientation: landscape) and (max-height: 500px) {
  /* Re-show compact list, hide desktop table (overrides the tablet min-width rule) */
  .opp-mobile-cards  { display: block !important; }
  .opp-desktop-table { display: none !important; }
}

/* ── Fluid charts ───────────────────────────────────────────────────────────── */
.js-plotly-plot,
.plotly,
.plot-container {
  width: 100% !important;
  max-width: 100% !important;
}
.js-plotly-plot .svg-container {
  width: 100% !important;
}

/* ── Scrollbar — dark ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-app); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }