/* ===== SecureFirewall NOC — Universal Responsive CSS ===== */
/* Injected via <link> into all views. Overrides inline <style> by source order. */

/* Hamburger toggle — hidden on desktop */
.nav-toggle-chk{position:absolute;opacity:0;pointer-events:none}
.nav-toggle-btn{display:none;align-items:center;justify-content:center;
  width:36px;height:36px;background:transparent;border:1px solid var(--border);
  border-radius:4px;color:var(--text);font-size:20px;cursor:pointer;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;transition:border-color .2s,color .2s}
.nav-toggle-btn:hover{border-color:var(--purple);color:var(--purple)}

/* ===== Breakpoint: 900px — Grid collapse (supplement existing rules) ===== */
@media(max-width:900px){
  #main{grid-template-columns:1fr !important}
  .panel.span2,.panel.span3{grid-column:span 1 !important}
  .grid2,.grid3{grid-template-columns:1fr !important}
  .api-warning{grid-column:span 1 !important}
  /* Sidebar in log views */
  #sidebar{display:none}
}

/* ===== Breakpoint: 768px — Mobile layout ===== */
@media(max-width:768px){
  /* --- HUD / Header --- */
  #hud{height:auto !important;min-height:48px;flex-wrap:wrap;padding:8px 12px;gap:6px}

  /* Hamburger visible */
  .nav-toggle-btn{display:flex}

  /* Nav links: hidden by default, vertical dropdown on toggle */
  .nav-links{display:none !important;width:100%;flex-direction:column;
    order:100;gap:2px;padding-top:8px;border-top:1px solid var(--border);margin-top:4px}
  .nav-toggle-chk:checked ~ .nav-links{display:flex !important}
  .nav-link{padding:8px 12px;border-radius:4px;font-size:12px;text-align:left}

  /* Period buttons: collapse under nav */
  .period-btns{display:none !important;width:100%;order:101;flex-wrap:wrap;
    padding-top:6px;border-top:1px solid var(--border)}
  .nav-toggle-chk:checked ~ .period-btns{display:flex !important}

  /* HUD-R nav buttons: hide on mobile, show on toggle (firmware admin views) */
  .hud-r .hbtn{display:none}
  .nav-toggle-chk:checked ~ .hud-r .hbtn{display:inline-block}
  .hud-r{flex-wrap:wrap}

  /* Separators */
  .sep{display:none}

  /* Right-side controls */
  .hud-r{gap:6px;flex-wrap:wrap}
  .hud-clock{font-size:14px;letter-spacing:1px}
  .hud-date{font-size:8px}

  /* --- Main Content --- */
  #main{padding:56px 8px 8px !important}

  /* Panel */
  .panel{padding:10px}

  /* Tables: horizontal scroll */
  .tbl-wrap,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl{min-width:500px}

  /* Toolbar buttons */
  .toolbar,.btn-group-toolbar{flex-wrap:wrap;gap:4px}

  /* Stats grid (firmware, compliance) */
  .stats-grid,.stats-row{grid-template-columns:1fr 1fr !important}

  /* Kanban (incidents) */
  .kanban{flex-direction:column !important}
  .kanban-col{width:100% !important;min-width:0 !important}

  /* Detail panels */
  .detail-grid{grid-template-columns:1fr !important}

  /* Summary rows */
  .summary-row,.summary-cards{grid-template-columns:1fr 1fr !important}

  /* Charts */
  .chart-container{height:200px !important;min-height:180px}

  /* Config diff panels */
  .diff-container{flex-direction:column !important}
  .diff-panel{width:100% !important}

  /* Map container */
  #map{height:50vh !important;min-height:300px}

  /* Login page */
  .login-wrap{width:calc(100vw - 32px) !important;max-width:380px;padding:24px !important}
}

/* ===== Breakpoint: 480px — Small phone ===== */
@media(max-width:480px){
  html,body{font-size:12px}
  .panel-title{font-size:10px;letter-spacing:1px}
  .tbl{font-size:10px}
  .tbl th,.tbl td{padding:4px 6px}
  .hud-clock{display:none}
  .hud-date{display:none}
  .hbtn{font-size:9px;padding:3px 6px;letter-spacing:.5px}
  .nav-link{font-size:11px;padding:6px 10px}
  #main{padding:52px 6px 6px !important}
  .panel{padding:8px}
  .badge{font-size:9px;padding:1px 6px}
  .stats-grid,.stats-row,.summary-row,.summary-cards{grid-template-columns:1fr !important}
  .logo span{display:none}
  .logo svg{width:20px;height:20px}
  #map{height:40vh !important;min-height:250px}
}

/* ===== Print ===== */
@media print{
  #hud,.nav-toggle-btn,.nav-toggle-chk{display:none !important}
  #main{padding:0 !important}
  .panel{break-inside:avoid;border:1px solid #ccc}
  body{background:#fff;color:#000;font-size:11px}
}