/* ══════════════════════════════════════════════════════════════════════════
   finance-responsive.css — mobile/responsive overrides for the three finance
   tabs: Markets & Trading (#tab-trading), Strategy Engine (#tab-strategy),
   Sentiment & News (#tab-sentiment).

   WHY THIS FILE EXISTS
   The finance dashboards render most of their layout with INLINE
   `style="grid-template-columns:..."` (45 in trading.js alone), plus fixed
   `minmax(NNNpx,1fr)` tracks up to 420px wide. Inline styles beat normal CSS,
   and a fixed 420px min-track forces horizontal overflow on a ~390px phone.
   Media-query rules with matching specificity + !important DO override inline
   styles, so we collapse every multi-column grid to a phone-friendly layout
   here without editing 54 inline call sites.

   Owner mandate (2026-04-02): all UI must work on phone. This is the finance
   half of that. Loaded LAST so it wins the cascade.
   ══════════════════════════════════════════════════════════════════════════ */

/* Loaded after the tab CSS; scope everything to the 3 finance tab roots so we
   never touch unrelated departments. */

/* ── TABLET / SMALL LAPTOP (≤900px): relax the widest fixed tracks ───────── */
@media (max-width: 900px) {
  #tab-trading [style*="grid-template-columns"],
  #tab-strategy [style*="grid-template-columns"],
  #tab-sentiment [style*="grid-template-columns"] {
    /* any auto-fill/auto-fit track wider than the viewport gets clamped */
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)) !important;
  }
  /* KPI strips: 3 across is fine on tablet */
  #tab-trading .dept-kpi-row,
  #tab-strategy .dept-kpi-row,
  #tab-sentiment .dept-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ── PHONE (≤768px): collapse to a single column everywhere ──────────────── */
@media (max-width: 768px) {
  /* Every explicit multi-column inline grid in the three tabs → 1 column.
     min() keeps auto-fill grids from ever exceeding the viewport. */
  #tab-trading [style*="grid-template-columns"],
  #tab-strategy [style*="grid-template-columns"],
  #tab-sentiment [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* KPI rows read best as 2-up on a phone (compact, still scannable). */
  #tab-trading .dept-kpi-row,
  #tab-strategy .dept-kpi-row,
  #tab-sentiment .dept-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #tab-trading .dept-kpi,
  #tab-strategy .dept-kpi,
  #tab-sentiment .dept-kpi { padding: 12px 10px !important; }
  #tab-trading .kpi-value,
  #tab-strategy .kpi-value,
  #tab-sentiment .kpi-value { font-size: 18px !important; }

  /* Header + view selector: stack and go full-width so the long <select>
     (28 options in trading) is tappable, not clipped. */
  #tab-trading .dept-header,
  #tab-strategy .dept-header,
  #tab-sentiment .dept-header { flex-direction: column; align-items: stretch; }
  #tab-trading .dept-actions,
  #tab-strategy .dept-actions,
  #tab-sentiment .dept-actions { width: 100%; }
  #tab-trading .dept-actions select,
  #tab-strategy .dept-actions select,
  #tab-sentiment .dept-actions select { flex: 1 1 100%; min-width: 0; font-size: 14px; }

  /* Any wide table inside the finance tabs scrolls horizontally inside its
     own panel instead of blowing out the page width. */
  #tab-trading table,
  #tab-strategy table,
  #tab-sentiment table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* Charts/canvases must never exceed viewport width. */
  #tab-trading canvas,
  #tab-strategy canvas,
  #tab-sentiment canvas { max-width: 100% !important; }

  /* Fixed-height chart panels: give them a sane phone height. */
  #tab-trading #tradingChart { height: 240px !important; }

  /* Trim the big band paddings so content isn't pushed off-screen. */
  #tab-trading .glass-panel,
  #tab-strategy .glass-panel,
  #tab-sentiment .glass-panel { padding: 12px !important; }

  /* Horizontal flex strips (detector health, chips) wrap instead of overflow. */
  #tab-trading [style*="display:flex"][style*="nowrap"],
  #tab-strategy [style*="display:flex"][style*="nowrap"],
  #tab-sentiment [style*="display:flex"][style*="nowrap"] { flex-wrap: wrap !important; }
}

/* ── NARROW PHONE (≤480px): even KPI rows go single-column for legibility ── */
@media (max-width: 480px) {
  #tab-trading .dept-kpi-row,
  #tab-strategy .dept-kpi-row,
  #tab-sentiment .dept-kpi-row {
    grid-template-columns: 1fr 1fr !important;
  }
  #tab-trading .dept-title,
  #tab-strategy .dept-title,
  #tab-sentiment .dept-title { font-size: 15px; }
  /* Reduce oversized inline font-sizes on big number readouts. */
  #tab-trading [style*="font-size:22px"],
  #tab-trading [style*="font-size:28px"],
  #tab-trading [style*="font-size:32px"] { font-size: 20px !important; }
}

/* ── Touch devices: bigger tap targets on the finance controls ──────────── */
@media (hover: none) and (pointer: coarse) {
  #tab-trading .btn-neumorphic,
  #tab-strategy .btn-neumorphic,
  #tab-sentiment .btn-neumorphic { min-height: 40px; }
  #tab-trading .dept-actions select,
  #tab-strategy .dept-actions select,
  #tab-sentiment .dept-actions select { min-height: 40px; }
}

/* ── Mobile hero strip: phone-only sticky vitals (JS renders hidden) ─────── */
@media (max-width: 768px) {
  #tab-trading #mobileHeroStrip { display: grid !important; }
}