/* ═══════════════════════════════════════════════════════════════════════════
   responsive.css — Media queries for mobile, tablet, and safe-area insets
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overflow containment (global) ───────────────────────────────── */
.main{overflow-x:hidden}
.ep-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ep-row{min-width:380px}
.outage-log{overflow-x:auto;-webkit-overflow-scrolling:touch}
.outage-log-row{min-width:320px}
.svc-matrix{overflow-x:auto;-webkit-overflow-scrolling:touch}
.stats-wrap,#filter-bar,#view-toggle-bar,#attention-bar,#client-list,
#outages-view,#networks-view,#endpoints-view,#reports-view,#projects-view{
  max-width:100vw;overflow-x:hidden;
}

/* ── Mobile — max 768px ──────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Header */
  .hdr        { padding:0 12px; height:50px; }
  .hdr-title  { font-size:12px; }
  .hdr-sub    { display:none !important; }
  .hg-badge   { display:none; }
  #hdr-xp     { display:none; }
  .hdr-right  { gap:6px; }
  .health-btn,.hdr-right button { width:30px; height:30px; font-size:12px; padding:0; }
  .user-btn   { width:28px; height:28px; font-size:11px; }

  /* Tab bar */
  .tabs { padding:0 8px; overflow-x:auto; flex-wrap:nowrap;
          scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .tabs::-webkit-scrollbar { display:none; }
  .tab  { padding:8px 10px; font-size:11px; gap:4px; white-space:nowrap; flex-shrink:0; }
  .tab svg { display:none; }
  .tab-badge { font-size:9px; padding:1px 5px; }

  /* Page header */
  .page-hdr  { padding:12px 12px 0; flex-wrap:wrap; gap:6px; }
  .page-title{ font-size:15px; }
  .page-sub  { font-size:11px; display:none; }
  .page-hdr-right { padding-left:0; }
  .btn-refresh{ padding:6px 10px; font-size:12px; }
  #last-updated { display:none; }

  /* Stats — 2×2 grid */
  .stats-wrap { margin:10px 12px; }
  .stats-grid { grid-template-columns:repeat(2,1fr) !important; }
  .stat-val   { font-size:22px; }
  .stat-label { font-size:10px; }

  /* Filter bar */
  #filter-bar { padding:0 12px 8px; gap:4px; }
  .fchip      { padding:3px 8px; font-size:11px; }
  .search-input { width:100%; margin-left:0; margin-top:4px; }

  /* View toggle */
  #view-toggle-bar { padding:0 12px 6px; }

  /* Client table header — hide on mobile */
  .tbl-hdr-wrap { display:none !important; }

  /* Client rows — 3-column card layout */
  .client-row {
    grid-template-columns: 40px 1fr auto !important;
    gap:8px !important;
    padding:10px 12px !important;
  }
  .client-row > div:nth-child(3),
  .client-row > .status-txt { display:none; }
  .client-name   { font-size:13px; }
  .client-domain { font-size:11px; }
  .client-avatar { width:36px; height:36px; }
  .dots-wrap { gap:4px; justify-content:flex-end; }
  .dot { width:10px; height:10px; }

  /* Attention bar */
  .attention-bar { margin:0 12px 8px; padding:8px 10px; font-size:11px; }

  /* Network grid */
  .net-grid { grid-template-columns:1fr !important; padding:0 12px 16px; gap:10px; }
  .net-cfg-panel,.net-setup-banner { margin:8px 12px 0; }
  .net-wan-row { grid-template-columns:1fr 1fr; }

  /* Outages */
  .outage-cards { grid-template-columns:1fr !important; }
  .outage-section { padding:10px 12px 0; }
  .outage-log-row { grid-template-columns:70px 90px 60px 1fr; gap:6px; font-size:11px; }
  .outage-map-section { margin:0 12px 12px; }

  /* Reports */
  .rpt-wrap    { padding:0 12px 20px; }
  .rpt-summary { gap:8px; }
  .rpt-stat    { min-width:80px; padding:8px 10px; }
  .rpt-stat-num{ font-size:18px; }
  .rpt-table-wrap,.rpt-wrap > div:last-child { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .rpt-table   { min-width:520px; }

  /* Endpoints */
  .ep-summary { padding:12px 12px 6px; gap:8px; }
  .ep-stat    { min-width:80px; }

  /* Projects */
  .proj-wrap  { padding:0 12px 16px; }
  .proj-grid  { grid-template-columns:1fr !important; }

  /* Modals — full width */
  .modal-sm,.modal-md,.modal-lg { width:calc(100vw - 24px) !important; max-width:100%; }
  .modal-body   { padding:14px 16px; }
  .modal-hdr    { padding:14px 16px 12px; }
  .modal-footer { padding:12px 16px; }
  .cm-services  { grid-template-columns:repeat(2,1fr) !important; }
  .cm-vars      { grid-template-columns:1fr !important; }

  /* User menu & panels */
  .user-menu  { width:calc(100vw - 16px); right:8px; }
  .theme-panel{ width:calc(100vw - 16px); right:8px; }

  /* Game HUD — compact */
  #game-bottom-hud  { height:60px; }
  .ghud-left-orb    { width:120px; padding:4px 8px; gap:6px; }
  .ghud-orb-ring    { width:38px; height:38px; }
  .ghud-level-num   { font-size:14px; }
  .ghud-center      { padding:4px 10px; }
  .ghud-mode-name   { font-size:9px; letter-spacing:.08em; }
  .ghud-xp-track    { height:6px; }
  .ghud-boss-panel  { width:72px; }

  /* Toast */
  #toast { bottom:12px; left:12px; right:12px; font-size:12px; }

  /* Matrix view */
  .svc-matrix { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Networks config — inputs stack */
  .net-cfg-row   { flex-wrap:wrap; }
  .net-cfg-label { min-width:100%; }
  .net-cfg-input { flex:1 1 100%; }
}

/* ── Small mobile — max 480px ────────────────────────────────────── */
@media (max-width:480px) {
  .tab          { padding:7px 8px; font-size:10px; }
  .ghud-left-orb{ width:80px; }
  .ghud-orb-info{ display:none; }
  .page-title   { font-size:13px; }
}

/* ── Tablet mid-size — 769px to 1024px ───────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .tabs       { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .tab        { padding:9px 12px; font-size:12px; white-space:nowrap; flex-shrink:0; }
  .stats-grid { grid-template-columns:repeat(2,1fr) !important; }
  .net-grid   { grid-template-columns:1fr !important; padding:0 16px 16px; }
  .client-row { grid-template-columns:44px 1fr 140px 70px 100px; gap:8px; padding:12px 16px; }
  .outage-cards { grid-template-columns:repeat(2,1fr) !important; }
  .proj-grid  { grid-template-columns:1fr !important; }
  .modal-lg   { width:calc(100vw - 32px) !important; }
}

/* ── Safe area insets (notch/home-bar devices) ───────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  #nrt-app         { padding-bottom: env(safe-area-inset-bottom); }
  #game-bottom-hud { padding-bottom: env(safe-area-inset-bottom);
                     height: calc(72px + env(safe-area-inset-bottom)); }
}