/* =============================================
   MOBILE RESPONSIVE OVERRIDES
   Tacqueria Dashboard — phones & tablets
   ============================================= */

/* ===== BREAKPOINT: TABLET & BELOW (768px) ===== */
@media (max-width: 768px) {

  /* ————— HEADER ————— */
  .dash-header {
    padding: 8px 12px !important;
    gap: 6px !important;
    flex-wrap: wrap;
  }
  .dash-header .logo-mark { width: 26px; height: 26px; }
  .dash-header h1 { font-size: 0.95rem !important; }
  .dash-header .subtitle { font-size: 0.58rem !important; }
  .threat-badge { font-size: 0.58rem !important; padding: 3px 8px !important; }
  .header-right { gap: 4px !important; }
  .header-right .report-time { font-size: 0.52rem !important; }
  .header-right .day-counter { font-size: 0.62rem !important; padding: 2px 7px !important; }

  /* ————— NAV: Two-tier group + sub-tabs ————— */
  .nav-group-row {
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-group-row::-webkit-scrollbar { display: none; }

  .nav-group-btn {
    font-size: 0.6rem !important;
    padding: 8px 12px !important;
    gap: 5px !important;
    flex-shrink: 0;
  }
  .nav-group-btn svg { width: 12px; height: 12px; }
  .nav-group-count { font-size: 0.48rem; padding: 1px 4px; }

  .nav-sub-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 6px 0 4px 0 !important;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  .nav-sub-row::-webkit-scrollbar { display: none; }

  .nav-sub-row .tab-btn {
    flex-shrink: 0;
    padding: 5px 10px !important;
    font-size: 0.62rem !important;
    scroll-snap-align: start;
  }

  /* ————— MAIN CONTENT ————— */
  .dash-main {
    padding: 8px !important;
  }

  /* ————— SECTION CARDS ————— */
  .section-card, .card {
    padding: 12px !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .card-header {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ————— KPI ROW — 2 columns on phones ————— */
  .kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .kpi-card {
    padding: 10px !important;
  }
  .kpi-label { font-size: 0.55rem !important; }
  .kpi-value { font-size: 0.85rem !important; }
  .kpi-delta { font-size: 0.6rem !important; }
  .kpi-note {
    font-size: 0.62rem !important;
    line-height: 1.4 !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ————— TABLES: scrollable containers on mobile ————— */
  .table-wrap,
  .predmkt-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
    position: relative;
  }
  table, .data-table, .predmkt-table {
    font-size: 0.62rem !important;
    min-width: 560px;
  }
  table th, table td {
    padding: 6px 6px !important;
    line-height: 1.35 !important;
  }
  /* Scroll hint before table */
  .table-wrap::before,
  .predmkt-table-wrap::before {
    content: "Swipe to scroll table →";
    display: block;
    text-align: center;
    font-size: 0.55rem;
    color: var(--color-text-faint);
    padding: 0 0 6px 0;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  /* ————— MASTER GRID OVERRIDE: force ALL multi-column grids to 1 col ————— */
  /* Catches every inline grid pattern used in the HTML */
  .tab-panel [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ————— NAMED GRID OVERRIDES ————— */
  .predmkt-2col,
  .vol-intel-grid,
  .overview-2col,
  .scenario-nodes,
  .predmkt-signal-grid,
  .predmkt-charts-row,
  .overview-grid.cols-2,
  .signal-change-grid,
  .bibi-grid,
  .taco-top-row,
  .taco-bottom-row,
  .intel-grid,
  .ops-grid,
  .taco-model-grid,
  .whale-volume-grid,
  .whale-summary-cards,
  .whale-flow-grid,
  .trigger-grid,
  .watch-grid,
  .watchlist-items {
    grid-template-columns: 1fr !important;
  }

  .scenario-path-inner {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .scenario-path-inner > div[style*="text-align:right"] {
    text-align: left !important;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .watch-outcomes {
    grid-template-columns: 1fr !important;
  }

  .taco-overview-row {
    flex-direction: column !important;
  }

  /* ETF cards: 3-col on tablet */
  .kpi-row-etf {
    grid-template-columns: repeat(3, 1fr);
  }

  .maturity-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ————— BRIEFING TAB ————— */
  .signal-tags, .overview-tags {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding-bottom: 4px;
  }

  /* ————— CHART CONTAINERS ————— */
  canvas {
    max-width: 100% !important;
  }
  [style*="height:260px"],
  [style*="height: 260px"] {
    height: 200px !important;
  }
  [style*="height:210px"],
  [style*="height: 210px"] {
    height: 180px !important;
  }

  /* ————— PREDICTION MARKETS: badges layout ————— */
  .predmkt-header {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ————— WHALE WATCH ————— */
  .whale-trade-feed {
    max-height: 400px;
    overflow-y: auto;
  }

  /* ————— FONT SCALING ————— */
  h2 { font-size: 0.88rem !important; }
  h3 { font-size: 0.78rem !important; }
  h4 { font-size: 0.72rem !important; }
  p, li, span { word-break: break-word; }
  .predmkt-section-title { font-size: 0.78rem !important; }
  .predmkt-section-desc { font-size: 0.68rem !important; }
  .predmkt-subtitle { font-size: 0.65rem !important; }

  /* ————— SOURCES ROWS ————— */
  .sources {
    font-size: 0.58rem !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
  }
  .sources a {
    word-break: break-all;
  }

  /* ————— FOOTER ————— */
  footer, .dash-footer {
    font-size: 0.58rem !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    text-align: center;
  }

  /* ————— BADGES & PILLS ————— */
  .badge, .status-pill {
    font-size: 0.55rem !important;
    padding: 2px 6px !important;
    white-space: nowrap;
  }

  /* ————— FULLSCREEN BUTTON — smaller on mobile ————— */
  .fullscreen-btn, [class*="fullscreen"] button {
    font-size: 0.6rem !important;
    padding: 3px 8px !important;
  }

  /* ————— TRIGGER SUMMARY LISTS ————— */
  .trigger-summary-list {
    font-size: 0.7rem !important;
  }
  .trigger-row {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* ————— PREDICTION MARKET SIGNAL CARDS ————— */
  .predmkt-signal-card {
    padding: 10px !important;
  }

  /* ————— BIBI WATCH / RHETORIC ————— */
  .bibi-grid,
  .bibi-col {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .rhetoric-timeline {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .rhetoric-quote {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
  .rhetoric-entry {
    overflow: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .rhetoric-day {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .rhetoric-meta {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .rhetoric-agg-badge {
    flex-shrink: 0;
  }
  .rhetoric-response {
    word-break: break-word !important;
  }

  /* ————— JIANG WATCH ————— */
  .prediction-card {
    padding: 10px !important;
  }
  .prediction-card details summary {
    font-size: 0.75rem !important;
  }

  /* ————— GLOBAL OVERFLOW SAFETY ————— */
  .tab-panel {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  /* Prevent grid/flex blowout — targeted, not universal */
  .tab-panel > *,
  .tab-panel .bibi-grid > *,
  .tab-panel .predmkt-2col > *,
  .tab-panel .vol-intel-grid > *,
  .tab-panel [style*="display:grid"] > *,
  .tab-panel [style*="display: grid"] > * {
    min-width: 0;
  }
  img, svg, canvas, video, iframe {
    max-width: 100% !important;
    height: auto;
  }
}


/* ===== BREAKPOINT: SMALL PHONES (480px) ===== */
@media (max-width: 480px) {

  /* KPI: full-width single column */
  .kpi-row {
    grid-template-columns: 1fr !important;
  }

  /* ETF cards: 2-col on small phone */
  .kpi-row-etf {
    grid-template-columns: repeat(2, 1fr);
  }

  .maturity-grid {
    grid-template-columns: 1fr !important;
  }

  /* Even smaller fonts for tiny screens */
  .nav-group-btn {
    font-size: 0.55rem !important;
    padding: 6px 8px !important;
  }
  .nav-sub-row .tab-btn {
    font-size: 0.56rem !important;
    padding: 4px 7px !important;
  }

  .dash-header h1 { font-size: 0.85rem !important; }
}


/* ===== BREAKPOINT: VERY SMALL (360px) ===== */
@media (max-width: 360px) {
  .dash-header {
    padding: 6px 8px !important;
  }
  .dash-main {
    padding: 6px !important;
  }
  .section-card, .card {
    padding: 8px !important;
  }
}