/* v82 Admin shell - calm and clear: deep blue menu that can fold to icons, light grey canvas, the house blue accent
   (the same colours as the dealer and rep apps). No gold, no serif. Admin only (body.adm). */
body.adm{
  --sbw:252px; --sbw-mini:72px;
  --navy:#0A2A66; --side:#0C1E44; --side-2:#081631; --side-ink:#C3CEE3; --side-dim:#8193B5; --side-hl:rgba(255,255,255,.08);
  --hl:#38B2EC;
  background:var(--bg);
}
/* ---------- layout ---------- */
body.adm #app{padding-left:var(--sbw);min-height:100vh;transition:padding-left .2s ease}
body.adm #app .wrap{max-width:1360px;padding:24px 32px 48px}
/* ---------- left menu ---------- */
.sb{position:fixed;inset:0 auto 0 0;width:var(--sbw);z-index:40;display:flex;flex-direction:column;color:var(--side-ink);
  background:linear-gradient(180deg,var(--side) 0%,var(--side-2) 100%);transition:width .2s ease}
.sb-brand{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:18px 20px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.sb-logo{display:inline-flex;background:#fff;border-radius:10px;padding:5px 11px}
.sb-logo img{height:32px;width:auto;display:block}
.sb-mark{display:none;width:40px;height:40px;border-radius:11px;background:#fff;color:var(--navy);font-weight:900;font-size:21px;align-items:center;justify-content:center;text-decoration:none!important;letter-spacing:-.02em}
.sb-co{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--side-dim);white-space:nowrap}
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 12px 16px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.sb-g{margin-top:12px}
.sb-gl{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--side-dim);padding:0 10px 5px;white-space:nowrap;overflow:hidden}
.sb-i{position:relative;display:flex;align-items:center;gap:11px;padding:9px 10px;margin:1px 0;border-radius:9px;color:var(--side-ink);font-size:14px;font-weight:500;text-decoration:none!important;transition:background .15s,color .15s}
.sb-i svg{width:19px;height:19px;flex:none;opacity:.85}
.sb-i .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-i:hover{background:rgba(255,255,255,.05);color:#fff}
.sb-i.active{background:var(--side-hl);color:#fff;font-weight:600}
.sb-i.active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--hl)}
.sb-i.active svg{opacity:1;color:var(--hl)}
.sb-b{font-size:11px;font-weight:700;min-width:20px;text-align:center;padding:1px 7px;border-radius:10px;background:#E5484D;color:#fff;font-variant-numeric:tabular-nums}
.sb-b:empty{display:none}
.sb-sub{display:none!important}
.sb-foot{display:flex;gap:10px;align-items:center;padding:12px 14px 12px 16px;border-top:1px solid rgba(255,255,255,.07)}
.sb-av{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;background:#1A4FB0}
.sb-who{min-width:0;flex:1;line-height:1.25} .sb-who b{display:block;color:#fff;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:0;border:0;padding:0;background:none}
.sb-who span{font-size:11px;color:var(--side-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sb-min{flex:none;width:30px;height:30px;padding:0;border-radius:8px;background:rgba(255,255,255,.06);color:var(--side-ink);border:1px solid rgba(255,255,255,.08);box-shadow:none;line-height:0}
.sb-min:hover{background:rgba(255,255,255,.12);color:#fff}
.sb-min svg{width:16px;height:16px;transition:transform .2s}
.sb-scrim{display:none}
.sb-tip{position:fixed;z-index:60;pointer-events:none;background:#101828;color:#fff;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:7px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.25);transform:translateY(-50%)}
.sb-tip .c{display:inline-block;margin-left:6px;background:#E5484D;border-radius:8px;padding:0 6px;font-size:11px}
/* ---------- folded menu (icons only), wide screens ---------- */
@media (min-width:1025px){
  body.sb-mini{--sbw:var(--sbw-mini)}
  body.sb-mini .sb-logo,body.sb-mini .sb-co,body.sb-mini .sb-who,body.sb-mini .sb-av{display:none}
  body.sb-mini .sb-brand{align-items:center;padding:18px 0 14px}
  body.sb-mini .sb-mark{display:inline-flex}
  body.sb-mini .sb-nav{padding:6px 10px 16px}
  body.sb-mini .sb-g{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.07)} body.sb-mini .sb-g:first-child{border-top:0}
  body.sb-mini .sb-gl{display:none}
  body.sb-mini .sb-i{justify-content:center;padding:11px 0}
  body.sb-mini .sb-i .t{display:none}
  body.sb-mini .sb-i.active::before{left:-10px}
  body.sb-mini .sb-b{position:absolute;top:3px;right:5px;min-width:16px;padding:0 4px;font-size:10px;line-height:15px}
  body.sb-mini .sb-foot{justify-content:center;padding:12px 0}
  body.sb-mini .sb-min svg{transform:rotate(180deg)}
}
/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 32px 10px 20px;background:rgba(255,255,255,.95);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.tb-title{min-width:0}
.tb-crumb{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-title h1{font-weight:700;font-size:20px;letter-spacing:-.015em;color:var(--ink);line-height:1.2;margin-top:1px}
.tb-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.tb-acts .btn,.tb-acts button{padding:8px 13px;font-size:13px;border-radius:8px}
.tb-acts button.ghost{background:#fff;color:var(--ink-2);border:1px solid var(--line-2)} .tb-acts button.ghost:hover{background:var(--surface-2);border-color:var(--muted-2)}
.sb-toggle{display:inline-flex;background:#fff;color:var(--ink-2);border:1px solid var(--line);padding:8px;border-radius:9px;line-height:0;box-shadow:none}
.sb-toggle svg{width:20px;height:20px} .sb-toggle:hover{background:var(--surface-2);color:var(--ink)}
/* ---------- surfaces: the house look, a little softer ---------- */
body.adm .panel,body.adm .kpi,body.adm .health .h{border-color:var(--line);box-shadow:0 1px 2px rgba(16,24,40,.04);border-radius:14px}
body.adm .kpi .n{overflow-wrap:anywhere}
/* each screen's own tabs sit on the page, under the title, as a clear tab strip */
body.adm .wrap #inv-tabs,body.adm .wrap #nav-subtabs,body.adm .wrap #tly-subtabs,body.adm .wrap #web-tabs{margin-bottom:14px}
/* ---------- tablet / phone: menu slides in ---------- */
@media (max-width:1024px){
  body.adm #app{padding-left:0}
  .sb{width:264px;transform:translateX(-102%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.35)}
  body.sb-open .sb{transform:none}
  body.sb-open .sb-scrim{display:block;position:fixed;inset:0;z-index:35;background:rgba(8,22,49,.45)}
  .sb-min{display:none}
  .topbar{padding:10px 16px;min-height:60px}
  .tb-title h1{font-size:18px}
  body.adm #app .wrap{padding:18px 16px 40px}
}
@media (max-width:640px){
  .tb-acts .btn,.tb-acts #chpass{display:none!important}
  .tb-acts{gap:6px;flex-wrap:nowrap} .tb-acts button{padding:7px 10px;font-size:12.5px;white-space:nowrap}
  .tb-acts #pushbtn{font-size:0;padding:7px 10px} .tb-acts #pushbtn::before{content:"\1F514";font-size:15px}
  .topbar{gap:10px} .tb-title h1{font-size:17px}
}
@media print{ .sb,.topbar,.sb-tip{display:none!important} body.adm #app{padding-left:0} body.adm #app .wrap{padding:0;max-width:none} }
body.adm #pur-sup.on{background:var(--navy);color:#fff;border-color:var(--navy)}
