/* TendaRadar admin — shared shell: fonts, palette, sidebar, page frame.
   Loaded by EVERY admin page (the console pages and the sqladmin data tables)
   so the whole console reads as one product, and as the same product as the
   customer site (same tokens + type as web/static/app.css). Safe next to Tabler:
   only namespaced classes here (.shell/.side*/.main/.navdrop). */

@font-face { font-family:"Atkinson Hyperlegible"; font-weight:400; font-display:swap; src:url(/admin/static/atkinson-400.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Atkinson Hyperlegible"; font-weight:400; font-display:swap; src:url(/admin/static/atkinson-400-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113; }
@font-face { font-family:"Atkinson Hyperlegible"; font-weight:700; font-display:swap; src:url(/admin/static/atkinson-700.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Atkinson Hyperlegible"; font-weight:700; font-display:swap; src:url(/admin/static/atkinson-700-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113; }
@font-face { font-family:"Big Shoulders Display"; font-weight:800; font-display:swap; src:url(/admin/static/bigshoulders-800.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Big Shoulders Display"; font-weight:800; font-display:swap; src:url(/admin/static/bigshoulders-800-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113; }

:root{
  --paper:#F5F7F2; --surface:#FFFFFF; --surface-2:#ECF0E8;
  --ink:#11241A; --ink-soft:#4A5C51; --ink-faint:#74847A;
  --line:#D8DFD5; --line-strong:#B9C4B6;
  --go:#0A7A44; --go-deep:#075C33; --go-soft:#E1EFE5;
  --board:#0C3A25; --board-ink:#EAF3EC; --board-soft:#9FC2AC; --board-line:#245A40; --board-hi:#7FD9A5;
  --ok:#0A7A44; --ok-bg:#E1EFE5;
  --warn:#A86F00; --warn-bg:#FBF0D6;
  --crit:#C93A1F; --crit-bg:#FBE6E0;
  --idle:#6E7C73; --idle-bg:#E9EDE7;
  --r:6px; --r-lg:10px;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --sans:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; font-family:var(--sans); font-size:16px; line-height:1.5; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; }
a{ color:var(--go); }
:focus-visible{ outline:3px solid var(--go); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } }

.shell{ display:flex; min-height:100vh; }

/* ---- sidebar ---- */
.side{ width:224px; flex:0 0 224px; background:var(--board); color:var(--board-ink);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.side-brand{ display:flex; align-items:center; gap:.55rem; padding:1.1rem 1.15rem 1rem; color:var(--board-ink); text-decoration:none;
  font-family:var(--display); font-weight:800; font-size:1.45rem; line-height:1; letter-spacing:.01em; }
.side-brand:hover{ color:#fff; }
.side-brand svg{ width:24px; height:24px; color:var(--board-hi); flex:none; }
.side-brand small{ font-family:var(--sans); font-weight:400; font-size:.8rem; color:var(--board-soft); letter-spacing:0; align-self:flex-end; }
.side nav{ flex:1; overflow-y:auto; padding:.4rem .6rem 1rem; }
.side nav a, .navdrop > summary{ display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  color:var(--board-ink); opacity:.82; text-decoration:none; font-size:.95rem;
  padding:.5rem .7rem; border-radius:var(--r); margin:1px 0; border-left:3px solid transparent; }
.side nav a:hover, .navdrop > summary:hover{ opacity:1; background:rgba(255,255,255,.06); }
.side nav a.on{ opacity:1; font-weight:700; background:rgba(255,255,255,.09); border-left-color:var(--board-hi); border-radius:0 var(--r) var(--r) 0; }
.side-sep{ height:1px; background:var(--board-line); margin:.6rem .7rem; }
.navdrop > summary{ list-style:none; cursor:pointer; }
.navdrop > summary::-webkit-details-marker{ display:none; }
.navdrop > summary::after{ content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .15s; margin-right:.2rem; }
.navdrop[open] > summary::after{ transform:rotate(-135deg); }
.navdrop > summary.on{ opacity:1; font-weight:700; }
.navdrop-items{ margin:.1rem 0 .4rem .9rem; padding-left:.3rem; border-left:1px solid var(--board-line); }
.side .navdrop-items a{ font-size:.88rem; padding:.35rem .6rem; }
.side-foot{ padding:.85rem 1.15rem; border-top:1px solid var(--board-line); font-size:.88rem; }
.side-foot a{ color:var(--board-soft); text-decoration:none; }
.side-foot a:hover{ color:#fff; text-decoration:underline; }

/* ---- main ---- */
.main{ flex:1; min-width:0; padding:1.75rem 2.25rem 3rem; max-width:1200px; }

@media (max-width:860px){
  .shell{ flex-direction:column; }
  .side{ position:sticky; top:0; z-index:20; width:auto; flex:none; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; }
  .side-brand{ padding:.8rem 1rem; font-size:1.25rem; }
  .side-foot{ border:0; margin-left:auto; padding:.8rem 1rem; }
  .side nav{ order:3; flex:0 0 100%; scrollbar-width:none; display:flex; gap:.2rem; overflow-x:auto; padding:0 .6rem .5rem; white-space:nowrap; }
  .side nav a{ border-left:0; border-bottom:3px solid transparent; border-radius:var(--r) var(--r) 0 0; }
  .side nav a.on{ border-bottom-color:var(--board-hi); border-radius:var(--r) var(--r) 0 0; }
  .side-sep{ display:none; }
  /* open tables run on inline in the scrolling strip (a popover would be clipped by it) */
  .navdrop[open]{ display:flex; align-items:center; }
  .navdrop-items{ display:flex; gap:.2rem; margin:0 0 0 .2rem; padding-left:.3rem; }
  .main{ padding:1.25rem 1rem 2.5rem; }
}