/* Friday mobile layer — one shared sheet injected into every template.
   Desktop is untouched (everything lives behind the 760px media query).
   Strategy: collapse multi-column grids to a single column, make every
   table finger-scrollable, turn the nav into a swipeable pill bar, and
   use 16px inputs so iOS stops auto-zooming on focus. */

/* ── Nav header: wrap into rows (no scrolling) — phones AND tablets.
   Wider breakpoint than the rest of the mobile layer so iPads that are
   too narrow for the full desktop nav get two tidy rows instead of a
   cut-off bar. Desktop (>1024px) untouched. ── */
@media (max-width: 1024px) {
  header {
    padding: 8px 12px !important;
    height: auto !important;
    min-height: 52px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .nav-toggle {
    flex-wrap: wrap;
    overflow-x: visible;
    max-width: 100%;
    flex: 1 1 100%;
    order: 9;
    justify-content: flex-start;
    row-gap: 4px;
  }
  .nav-btn { padding: 8px 12px !important; font-size: 12px !important; }
}

@media (max-width: 760px) {

  /* Keep the layout viewport pinned to the device width — without this,
     any element with a large intrinsic width (wide tables, long flex rows)
     silently stretches the page canvas and everything renders zoomed-out
     with controls pushed off-screen. */
  html, body { overflow-x: hidden; }

  body { -webkit-text-size-adjust: 100%; }

  /* ── page chrome ── */
  .content { padding: 14px 10px 56px !important; }
  .page-head { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
  /* Header-area control rows: cap at viewport width so their own flex-wrap
     can actually engage (flex-shrink:0 rows otherwise overflow off-screen) */
  .page-head > *, .page-header > *, .battle-head > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .page-header-right { flex-basis: 100% !important; flex-shrink: 1 !important;
                       justify-content: flex-start; }
  .page-title { font-size: 19px !important; }
  .scan-zone { justify-content: flex-start; }
  .subtabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtab { white-space: nowrap; }

  /* ── grids → single column (KPIs stay 2-up) ── */
  div[class*="grid"], div[class*="-row"], .layout, .cards, .charts,
  .controls, .kv-grid, .two-col, .columns, .panel-row, .split {
    grid-template-columns: 1fr !important;
  }
  .kpis, .kpi-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .kpi { padding: 10px 12px !important; }
  .kpi-value { font-size: 17px !important; }

  /* ── tables: horizontal scroll instead of squish ──
     width:100% (not just max-width) stops the block-table from
     shrink-wrapping to its content and inflating the page canvas. */
  table { display: block; width: 100% !important; max-width: 100%;
          overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { padding: 8px 8px !important; }

  /* ── forms & touch targets ── */
  input, select, textarea { font-size: 16px !important; }   /* kills iOS zoom-on-focus */
  .btn, button { min-height: 38px; }
  .controls input[type="text"] { min-width: 0 !important; width: 100%; }

  /* ── war room specifics ── */
  .battle-head { flex-direction: column; align-items: stretch !important; }
  .battle-grid, .dossier-grid, .faction-grid, .prod-grid { grid-template-columns: 1fr !important; }
  .radar { width: 44px; height: 44px; }
  .scan-progress { width: 100%; }
  .h-title { max-width: 230px !important; }
  .chips { gap: 8px; }
  .chip { padding: 6px 12px; }
  .classify-row { gap: 8px; }
  .classify-row select, .classify-row input { font-size: 16px !important; }

  /* ── catalog browser two-pane → stacked ── */
  .layout { display: block !important; }
  .products-panel { max-height: 45vh !important; margin-bottom: 14px; }

  /* ── modals ── */
  .modal { width: 94vw !important; padding: 16px !important; }

  /* ── charts ── */
  canvas { max-width: 100% !important; height: auto !important; }
}

/* Tiny phones */
@media (max-width: 390px) {
  .kpis, .kpi-row { grid-template-columns: 1fr 1fr !important; }
  .page-title { font-size: 17px !important; }
}