/* ============================================================
   MOBILE TACTICAL — phone + tablet layout pass for all pages.
   Loads LAST so it wins. Additive: no existing file edited.
   Breakpoints: <=820px phone, 821-1024px small tablet.
   ============================================================ */

/* ---------- shared: no sideways scroll, safe-area, touch targets ---------- */
@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  * { -webkit-tap-highlight-color: rgba(70,224,107,.2); }
}

/* DESKTOP toolbox dock position — the bundle no longer sets this inline,
   so own it here (bottom-right, left of the 200px contacts rail). The
   mobile @media block below overrides it on phones (later source wins). */
#npn-panel-dock.npn-panel-dock {
  position: fixed !important;
  right: 224px !important;
  bottom: 80px !important;
  left: auto !important;
  top: auto !important;
}

/* ============================================================
   HOME / MAP  (index.html)
   npn-mobile-layout.js/.css already provide the mobile system
   (fixed header, scrollable actions, fullscreen map, filters
   bottom-sheet, panel sheets, bottom nav). We only PATCH its gaps
   and retheme its chrome to NIGHTWATCH. Same 900px breakpoint.
   ============================================================ */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1180px) {
  /* class bar sits under the fixed topbar on mobile — hide to reclaim space */
  .tac-class-bar { display: none !important; }

  /* GAP 1: contacts rail is .sidebar.right — mobile-layout's hide-list
     (.priority-nodes/#priorityNodes/.right-sidebar) never matches it,
     and sidebar-lock pins it fixed. Force it hidden on mobile. */
  aside.sidebar.right, .sidebar.right { display: none !important; }

  /* GAP 2: toolbox dock has no mobile rule → keeps its desktop position
     off-screen. Pin it bottom-left, above the 58px bottom nav. */
  #npn-panel-dock.npn-panel-dock {
    left: 8px !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    width: min(74vw, 250px) !important;
    min-width: 0 !important;
    max-width: 74vw !important;
    max-height: 44vh !important;
    overflow-y: auto !important;
    z-index: 16400 !important;
  }
  /* hide the toolbox while a filters/panel drawer is open so it doesn't
     sit on top of the sheet */
  body.npn-mobile-filters-open #npn-panel-dock.npn-panel-dock,
  body.npn-mobile-panel-open #npn-panel-dock.npn-panel-dock { display: none !important; }

  /* keep the fixed header to one tidy row: brand left, Zulu + MESHCON right.
     Solar Center, Data, Nodes drop off (Solar is on the bottom nav). */
  .tac-readouts {
    gap: 8px !important;
    flex-wrap: nowrap !important;
    margin-left: auto !important;
    align-items: center !important;
  }
  .tac-cell-data, .tac-cell-nodes, .oki-badge, .tac-strip-solar { display: none !important; }
  .tac-cell-zulu { text-align: right; }
  .tac-cell-zulu .cap { font-size: 8px !important; }
  .tac-cell-zulu .val { font-size: 11px !important; white-space: nowrap; }
  .tac-meshcon { height: 30px !important; padding: 0 8px !important; flex: 0 0 auto; }
  .tac-meshcon #tacMeshconText { font-size: 12px !important; }
  .topbar .brand { flex: 0 1 auto !important; min-width: 0; }
  .topbar .title { font-size: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .subtitle { display: none !important; }

  /* ---- retheme mobile-layout's cyan chrome to NIGHTWATCH ---- */
  .topbar, header.topbar {
    background: var(--tac-surface-1s) !important;
    border-bottom: 1px solid var(--tac-line-strong) !important;
  }
  .topbar .actions, nav.actions {
    background: var(--tac-surface-1s) !important;
    border-bottom: 1px solid var(--tac-line-strong) !important;
  }
  .npn-mobile-bottom-nav {
    background: rgba(10,12,11,.98) !important;
    border-top: 1px solid var(--tac-line-strong) !important;
  }
  .npn-mobile-bottom-nav button {
    background: var(--tac-surface-2) !important;
    border: 1px solid var(--tac-line-strong) !important;
    color: var(--tac-text) !important;
    font-family: var(--tac-font-display) !important;
    letter-spacing: .06em !important;
    text-transform: uppercase;
    border-radius: 1px !important;
  }
  .npn-mobile-bottom-nav button.active {
    background: #0F1F14 !important;
    border-color: var(--tac-green) !important;
    color: var(--tac-green) !important;
  }
  /* filters bottom-sheet + panel sheets → tactical surface */
  .sidebar, .npn-map-layer-control, .npn-solar-control,
  .npn-solar-forecast-control, .npn-range-control, .npn-rf-control {
    background: var(--tac-surface-1s) !important;
    border-top: 1px solid var(--tac-green-dim) !important;
    color: var(--tac-text) !important;
  }
  .npn-mobile-panel-close {
    border: 1px solid var(--tac-line-strong) !important;
    background: var(--tac-surface-2) !important;
    color: var(--tac-text) !important;
  }
  .npn-mobile-backdrop { background: rgba(0,0,0,.5) !important; }
  .npn-mobile-toast {
    background: var(--tac-surface-1s) !important;
    border: 1px solid var(--tac-green-dim) !important;
    color: var(--tac-text) !important;
  }
  .tac-map-frame { display: none !important; }
}

/* ============================================================
   SOLAR (solar.html)
   ============================================================ */
@media (max-width: 820px) {
  .solar-hero { flex-wrap: wrap !important; height: auto !important; padding: 8px 12px !important; position: static !important; }
  .solar-hero .title { font-size: 17px !important; }
  .hero-actions { flex-wrap: wrap; gap: 6px; }
  main { padding: 14px 12px !important; }
  .status-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .site-grid { grid-template-columns: 1fr !important; }
  .section.split { grid-template-columns: 1fr !important; }
  .solar-map-body { grid-template-columns: 1fr !important; }
  .solar-map-top { flex-wrap: wrap; }
  .npn-ops-two-col { grid-template-columns: 1fr !important; }
  .npn-graphs { grid-template-columns: 1fr !important; }
  .npn-ops-body, .npn-impact-grid { grid-template-columns: 1fr !important; }
  #solarMapImage { max-width: 100% !important; height: auto !important; }
}

/* ============================================================
   SCOREBOARD + DIAGNOSTICS (shared vocabulary)
   ============================================================ */
@media (max-width: 820px) {
  .score-page, .diag-page, main.diag-page { padding: 10px !important; }
  .diag-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .summary-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .two-col { grid-template-columns: 1fr !important; }
  .stadium-head { flex-wrap: wrap; gap: 8px; }

  /* wide tables scroll horizontally instead of blowing out the page */
  .scoreboard-table-wrap, .panel-body { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .panel-body table { min-width: 560px; }
  .linescore { min-width: 640px !important; }

  /* header wraps */
  .topbar { flex-wrap: wrap !important; height: auto !important; gap: 6px !important; padding: 6px 8px !important; }
  .topbar .subtitle { display: none !important; }
  .topbar .actions { flex: 1 1 100%; overflow-x: auto; flex-wrap: nowrap; gap: 6px; }
  .topbar .actions button, .topbar .actions a.btn { flex: 0 0 auto; height: 40px; }
}

/* ============================================================
   WOPR big board (scoreboard-diagnostics.html extras)
   ============================================================ */
@media (max-width: 820px) {
  .wopr-board { padding: 6px 6px !important; }
  .wopr-board-row { flex-wrap: wrap; }
  .wopr-led { width: 10px !important; height: 6px !important; }
  .wopr-banner { font-size: clamp(13px, 4.4vw, 20px) !important; letter-spacing: .12em !important; padding: 10px 8px !important; }
  .wopr-defcon { overflow-x: auto; justify-content: flex-start; }
  .wopr-defcon-cell { min-width: 66px !important; padding: 5px 6px !important; }
  .wopr-defcon-cell .n { font-size: 16px !important; }
}

/* ============================================================
   SMALL TABLET (821-1024): 2-up grids, keep rails but slimmer
   ============================================================ */
@media (min-width: 821px) and (max-width: 1024px) {
  .status-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .section.split { grid-template-columns: 1fr !important; }
  .solar-map-body { grid-template-columns: 1fr !important; }
  .diag-grid, .summary-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .topbar .subtitle { font-size: 8px !important; }
}