/* admin-shell.css — CODASMS admin layout, ONE source of truth.
 *
 * Owns: shell grid, sidebar, grouped nav, page header, gate, table density,
 * and the ENTIRE mobile experience (top bar + slide-in drawer + overlay).
 * Pages keep only their page-specific component styles inline.
 * Nav markup is injected by /admin-nav.js — never hardcode links in pages.
 */

/* ---------- Desktop shell ---------- */
.shell{display:grid;grid-template-columns:228px 1fr;min-height:100vh}
.side{
  border-right:1px solid var(--hair);
  padding:20px 12px 16px;
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:2px;
  overflow-y:auto;background:var(--bg,inherit);
}
.side .brand{padding:4px 10px 2px;font-family:'Orbitron';font-weight:700;font-size:18px;text-decoration:none;color:var(--ink)}
.side .badge{margin:0 10px 14px;font-size:10px;letter-spacing:2px;color:var(--amber);font-weight:700;font-family:'Orbitron'}
.side .navgroup{margin:12px 10px 4px;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint);font-weight:700}
.side .spacer{flex:1}

.navlink{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);
  color:var(--muted);font-weight:500;font-size:13.5px;cursor:pointer;transition:all .12s;text-decoration:none}
.navlink:hover{background:var(--panel);color:var(--ink)}
.navlink.active{background:rgba(242,169,59,.09);color:var(--amber);font-weight:600}
.navlink .ni{width:16px;height:16px;flex:none;opacity:.85}

/* ---------- Main column ---------- */
.main{padding:26px 30px 60px;max-width:1180px;min-width:0}
.main h1{font-size:23px;margin-bottom:4px}
.main .sub{color:var(--muted);margin-bottom:22px;font-size:14px}
.gate{padding:60px 20px;text-align:center;color:var(--muted)}

/* ---------- Density pass (scoped to .main to win over page styles) ---------- */
.main .card{margin-bottom:18px}
.main .tbl th{padding:8px 10px;font-size:10.5px}
.main .tbl td{padding:8px 10px;font-size:13px}
.main .tbl thead th{position:sticky;top:0;background:var(--panel);z-index:1}

/* ---------- Mobile top bar + drawer (hidden on desktop) ---------- */
.adm-topbar{display:none}
.adm-overlay{display:none}

@media (max-width: 900px){
  .shell{display:block}
  .adm-topbar{
    display:flex;align-items:center;gap:12px;
    position:sticky;top:0;z-index:60;
    padding:12px 14px;border-bottom:1px solid var(--hair);
    background:var(--bg,#0a0a0d);
  }
  .adm-topbar .brand{font-family:'Orbitron';font-weight:700;font-size:16px;color:var(--ink);text-decoration:none}
  .adm-topbar .badge{font-size:9px;letter-spacing:2px;color:var(--amber);font-weight:700;font-family:'Orbitron'}
  .adm-burger{
    margin-left:auto;width:40px;height:40px;border:1px solid var(--hair);border-radius:var(--r-sm);
    background:var(--panel);color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:18px;
  }
  .side{
    position:fixed;top:0;left:0;height:100vh;width:min(78vw,280px);z-index:80;
    transform:translateX(-102%);transition:transform .22s ease;
    background:var(--bg,#0a0a0d);box-shadow:8px 0 32px rgba(0,0,0,.45);
    border-right:1px solid var(--hair);
  }
  .side.open{transform:translateX(0)}
  .adm-overlay{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.5);}
  .adm-overlay.show{display:block}
  .main{padding:18px 14px 70px;max-width:100%}
  .main h1{font-size:20px}
  /* wide tables scroll inside their card instead of crushing the layout */
  .main .card{overflow-x:auto}
  .main .tbl{min-width:560px}
  /* toolbars / field rows stack */
  .main .toolbar, .main .field{flex-direction:column;align-items:stretch}
  .main .toolbar input{min-width:0;width:100%}
  .main .count{margin-left:0}
  /* touch targets */
  .navlink{padding:12px 14px;font-size:15px}
  .btn{padding:12px 16px}
  .btn.mini{padding:7px 12px}
}

/* very small phones: tighter still */
@media (max-width: 380px){
  .main{padding:14px 10px 70px}
}

/* keep the floating theme toggle clear of the mobile top bar */
@media (max-width: 900px){
  #themeToggle{top:68px !important}
}