/* ============================================================
   cc-mobile.css -- Mobile responsive layout for CC + Scalping + Review
   ============================================================
   Loaded on: command-center-original.html, scalping-command.html,
              command-center-review.html
   Breakpoints: <=768px tablet, <=480px phone
   Goal: at 9:28 AM on a phone the user sees the sticky top strip
         (TRADE/OBSERVE/SIT OUT + top 3 tickers) without horizontal
         scroll, and can scroll vertically through the Stocks In Play
         buckets. All other panels collapse to vertical stacking.
   ============================================================ */

@media (max-width: 768px) {

  /* ----- Top strip ----- */
  .cc-top-strip {
    padding: 6px 10px !important;
    gap: 8px !important;
    font-size: 10px !important;
  }
  .cc-top-strip .cts-decision {
    font-size: 11px !important;
    padding: 4px 9px !important;
    min-width: 70px !important;
  }
  .cc-top-strip .cts-regime {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
  .cc-top-strip .cts-tickers {
    gap: 5px !important;
    flex: 1 1 100% !important;     /* wrap to its own row */
    min-width: 0 !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cc-top-strip .cts-tickers::-webkit-scrollbar { display: none; }
  .cc-top-strip .cts-ticker {
    font-size: 10px !important;
    padding: 2px 6px !important;
    flex-shrink: 0;
  }
  .cc-top-strip .cts-ticker .meta { display: none; }   /* trim noise */
  .cc-top-strip .cts-meta { display: none !important; } /* trim noise */
  .cc-top-strip .cts-refresh {
    font-size: 10px !important;
    padding: 3px 7px !important;
  }

  /* ----- Sit-out banner ----- */
  .cts-sitout-banner {
    padding: 6px 10px !important;
    font-size: 11px !important;
    top: 70px !important;
  }
  .cts-sitout-banner button {
    padding: 3px 8px !important;
    font-size: 10px !important;
    margin-left: 6px !important;
    display: block;
    margin-top: 4px !important;
  }

  /* ----- Generic CC layout (Stocks tab) ----- */
  /* Asset tab bar -- prevent horizontal overflow */
  .asset-tab-bar { padding: 0 2px; height: 32px; }
  .asset-tab { padding: 0 10px; font-size: 9px; }
  .asset-tab svg { width: 12px; height: 12px; }

  /* Main panel grids reflow to single column */
  .grid-shell { grid-template-columns: 1fr !important; }
  .main-panels {
    grid-template-columns: 1fr !important;
    gap: 4px;
    padding: 4px;
  }
  .market-intel-section .main-panels {
    grid-template-columns: 1fr !important;
  }

  /* Sections (Pivots, Strike Selector, Verdicts, etc.) */
  section, .review-section, .mi-section, .tv-cal-section, .stock-watch-section {
    padding: 10px !important;
    margin: 8px auto !important;
    max-width: 100% !important;
  }

  /* Headers/titles shrink */
  .mi-title, .tv-cal-title, .sw-title { font-size: 13px !important; }
  .mi-sub, .tv-cal-sub, .sw-sub { display: none; }   /* drop subtitles on mobile */

  /* Tables -- allow horizontal scroll instead of overflow */
  .review-section table,
  section table,
  .market-intel-section table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Buttons grow finger-friendly */
  button, select, input[type="text"], input[type="number"] {
    min-height: 32px !important;
    font-size: 12px !important;
  }

  /* ----- Stocks In Play panel specifics ----- */
  #sipSection { margin: 8px 0 !important; padding: 10px !important; }
  #sipSection .sip-controls { flex-direction: column; align-items: stretch; gap: 6px; }

  /* ----- Strike Selector ----- */
  #strike-selector-panel { padding: 0 8px !important; }
  #strike-selector-panel table { font-size: 10px; }
  #strike-selector-panel th, #strike-selector-panel td { padding: 3px 4px !important; }

  /* ----- Pivots ----- */
  #pivots-sr-panel { padding: 0 8px !important; }

  /* ----- Premarket Calendar Strip ----- */
  .tv-cal-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .tv-cal-card { padding: 10px !important; }
  .tv-cal-card-title { font-size: 12px !important; }
  .tv-cal-card-sub { font-size: 9px !important; }

  /* ----- Watchlist grid on scalping page ----- */
  .watchlist-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 4px !important;
  }
  .ticker-card { padding: 10px !important; }

  /* ----- Reference cards (when expanded via [+]) ----- */
  #iv-rank, #atr-table, #heatmap, #key-links {
    padding: 10px !important;
  }
  #iv-rank table, #atr-table table, #heatmap table {
    font-size: 10px;
  }

  /* ----- TradingView widgets get a min-height so they aren't squashed ----- */
  iframe[src*="tradingview.com"],
  .tradingview-widget-container { min-height: 240px; }

  /* ----- Top-of-page hero shrinks ----- */
  .pmf-bar { font-size: 11px !important; padding: 6px 10px !important; }

  /* ----- Scalping page section gaps ----- */
  section[id$="-panel"] { margin: 8px auto !important; }
}

@media (max-width: 480px) {
  /* Phone-only tightening */
  .cc-top-strip {
    flex-wrap: wrap;
    padding: 5px 8px !important;
  }
  .cc-top-strip .cts-decision {
    flex: 0 0 auto;
    font-size: 10px !important;
    padding: 3px 7px !important;
    min-width: 60px !important;
  }
  .cc-top-strip .cts-regime { font-size: 9px !important; }
  .cc-top-strip .cts-tickers { padding-bottom: 2px; }
  .cc-top-strip .cts-ticker { font-size: 9px !important; }
  .cc-top-strip .cts-ticker .sym { font-size: 10px; }

  /* Hide refresh + expand buttons on very small screens -- not critical actions */
  .cc-top-strip a.cts-refresh { font-size: 9px !important; padding: 3px 6px !important; }

  /* Drop sub-titles + meta from sections */
  .mi-meta, .tv-cal-meta { display: none; }

  /* Stocks In Play bucket rows -- denser */
  #sipSection .sip-ticker-row {
    padding: 6px 8px !important;
    font-size: 10px !important;
  }

  /* Review page tabs -- pill style */
  .review-tab {
    padding: 6px 10px !important;
    font-size: 10px !important;
  }
}

/* ----- Touch-friendly scrollbars on mobile ----- */
@media (pointer: coarse) {
  ::-webkit-scrollbar { width: 6px; height: 6px; }
}