/* ==========================================================================
   KamiVerify - dashboard (monochrome)
   Loaded by main_system/client_php/dashboard.php
   ========================================================================== */
:root{
  color-scheme:light;
  --bg:#ffffff; --fg:#0a0a0a;
  --card:#ffffff; --muted:#f5f5f5; --muted-fg:#737373;
  --primary:#171717; --primary-fg:#fafafa;
  --border:#e5e5e5; --ring:#a1a1a1;
  --rail:#fafafa;
  --invert:#0a0a0a; --invert-fg:#fafafa;
  --ok:#0a7d55; --ok-soft:#e8f5ef;
  --wait:#8a6100; --wait-soft:#fdf3e0;
  --bad:#e40014; --bad-soft:#fdecec;
  --radius:.625rem;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace;
  --scrim:rgba(10,10,10,.45);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0a0a0a; --fg:#fafafa; --card:#141414; --muted:#1e1e1e; --muted-fg:#a1a1a1;
    --primary:#e5e5e5; --primary-fg:#171717;
    --border:rgba(255,255,255,.10); --ring:#737373; --rail:#0f0f0f;
    --invert:#fafafa; --invert-fg:#0a0a0a;
    --ok:#3ddc9a; --ok-soft:rgba(61,220,154,.13);
    --wait:#f9c04a; --wait-soft:rgba(249,192,74,.13);
    --bad:#ff6568; --bad-soft:rgba(255,101,104,.13);
    --scrim:rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a0a0a; --fg:#fafafa; --card:#141414; --muted:#1e1e1e; --muted-fg:#a1a1a1;
  --primary:#e5e5e5; --primary-fg:#171717;
  --border:rgba(255,255,255,.10); --ring:#737373; --rail:#0f0f0f;
    --invert:#fafafa; --invert-fg:#0a0a0a;
  --ok:#3ddc9a; --ok-soft:rgba(61,220,154,.13);
  --wait:#f9c04a; --wait-soft:rgba(249,192,74,.13);
  --bad:#ff6568; --bad-soft:rgba(255,101,104,.13);
  --scrim:rgba(0,0,0,.65);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.022em}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.m{font-family:var(--mono);font-variant-numeric:tabular-nums}
.kicker{font-size:.625rem;text-transform:uppercase;letter-spacing:.11em;font-weight:700;color:var(--muted-fg);font-family:var(--mono)}

/* ─────────── brand ─────────── */
.brand{display:flex;align-items:center;gap:.5rem;min-width:0}
.mark{width:30px;height:30px;flex:none;border-radius:8px;background:var(--primary);color:var(--primary-fg);display:grid;place-items:center;font-size:.75rem;font-weight:800;letter-spacing:-.06em}
.brand .wm{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand .wm b{font-size:.9375rem;letter-spacing:-.03em;font-weight:700}
.brand .wm small{font-size:.5625rem;color:var(--muted-fg);letter-spacing:.055em;text-transform:uppercase;margin-top:2px;white-space:nowrap}

/* ─────────── shell ─────────── */
.shell{display:grid;grid-template-columns:244px minmax(0,1fr)}
.rail{
  background:var(--rail);border-right:1px solid var(--border);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
}
.rail-top{padding:.875rem 1rem;border-bottom:1px solid var(--border)}
.rail-nav{flex:1;overflow-y:auto;padding:.75rem .625rem 1rem}
.navsec{margin:.875rem .5rem .3125rem}
.navsec:first-child{margin-top:.25rem}
.navlink{display:flex;align-items:center;gap:.6875rem;padding:.4375rem .625rem;border-radius:8px;font-size:.8125rem;font-weight:500;color:var(--muted-fg)}
.navlink svg{width:16px;height:16px;flex:none;opacity:.9}
.navlink:hover{background:var(--muted);color:var(--fg)}
.navlink.on{background:var(--primary);color:var(--primary-fg);font-weight:650}
.navlink.danger{color:var(--bad)}
.navlink.danger:hover{background:var(--bad-soft)}
.rail-foot{padding:.75rem;border-top:1px solid var(--border)}
.miniBal{border:1px solid var(--border);border-radius:9px;background:var(--card);padding:.625rem .75rem;display:flex;flex-direction:column;gap:.125rem}
.miniBal .v{font-family:var(--mono);font-size:1.1875rem;font-weight:700;letter-spacing:-.035em}

.main{min-width:0;display:flex;flex-direction:column}

/* ─────────── top bar ─────────── */
.bar{
  position:sticky;top:0;z-index:30;background:var(--bg);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.625rem;
  padding:.625rem clamp(.875rem,2.5vw,1.75rem);
}
.burger{display:none;width:36px;height:36px;flex:none;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--card);cursor:pointer}
.burger svg{width:18px;height:18px}
.bar .brand{margin-right:.375rem}
.bar-div{width:1px;height:26px;background:var(--border);flex:none;margin-inline:.25rem}
.crumb{font-size:.8125rem;color:var(--muted-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb b{color:var(--fg);font-weight:600}
.grow{flex:1}
.icbtn{width:34px;height:34px;flex:none;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--fg);cursor:pointer;position:relative}
.icbtn svg{width:16px;height:16px}
.icbtn .dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--bad);border:1.5px solid var(--bg)}
.who{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem .25rem .25rem;border:1px solid var(--border);border-radius:999px;background:var(--card)}
.who .av{width:26px;height:26px;border-radius:50%;background:var(--primary);color:var(--primary-fg);display:grid;place-items:center;font-size:.625rem;font-weight:800}
.who span{font-size:.8125rem;font-weight:600;white-space:nowrap}

/* pref dropdown */
.menu{position:relative;flex:none}
.prefbtn{display:inline-flex;align-items:center;gap:.3125rem;padding:.4375rem .5rem .4375rem .5625rem;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--fg);cursor:pointer;font-family:var(--mono);font-size:.6875rem;font-weight:800;letter-spacing:.04em}
.prefbtn:hover{background:var(--muted)}
.prefbtn .glyph{width:15px;height:15px}
.prefbtn .caret{width:9px;height:9px;opacity:.5}
.pop{position:absolute;right:0;top:calc(100% + .5rem);min-width:190px;z-index:60;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.375rem;box-shadow:0 14px 38px rgba(0,0,0,.18)}
.pop[hidden]{display:none}
.popgrp{display:flex;flex-direction:column}
.popgrp+.popgrp{margin-top:.25rem;padding-top:.3125rem;border-top:1px solid var(--border)}
.poplabel{font-size:.625rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--muted-fg);font-family:var(--mono);padding:.375rem .625rem .25rem}
.popitem{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4375rem .625rem;border:0;border-radius:7px;background:transparent;color:var(--fg);cursor:pointer;font-size:.8125rem;text-align:left}
.popitem:hover{background:var(--muted)}
.popitem .ic{width:15px;height:15px;flex:none;color:var(--muted-fg)}
.popitem .ck{margin-left:auto;width:15px;height:15px;flex:none;opacity:0}
.popitem[aria-checked="true"]{font-weight:650}
.popitem[aria-checked="true"] .ck{opacity:1}

/* ─────────── drawer ─────────── */
.scrim{position:fixed;inset:0;z-index:80;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .2s}
.drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:81;width:min(330px,86vw);
  background:var(--bg);border-right:1px solid var(--border);
  display:flex;flex-direction:column;transform:translateX(-102%);transition:transform .24s ease;
}
body.nav-open .scrim{opacity:1;pointer-events:auto}
body.nav-open .drawer{transform:none}
.dr-top{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;border-bottom:1px solid var(--border)}
.dr-close{width:32px;height:32px;flex:none;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;background:var(--card);cursor:pointer}
.dr-close svg{width:16px;height:16px}
.dr-profile{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;border-bottom:1px solid var(--border)}
.dr-profile .av{width:38px;height:38px;flex:none;border-radius:10px;background:var(--primary);color:var(--primary-fg);display:grid;place-items:center;font-size:.8125rem;font-weight:800}
.dr-profile .b{flex:1;min-width:0;display:flex;flex-direction:column}
.dr-profile .b strong{font-size:.875rem}
.dr-profile .b small{font-size:.75rem;color:var(--muted-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-bal{padding:.875rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.75rem}
.dr-bal .b{flex:1;display:flex;flex-direction:column}
.dr-bal .v{font-family:var(--mono);font-size:1.375rem;font-weight:700;letter-spacing:-.035em}
.dr-nav{flex:1;overflow-y:auto;padding:.5rem .625rem 1.5rem}

/* ─────────── content ─────────── */
.page{padding:clamp(1rem,2.5vw,1.75rem);display:flex;flex-direction:column;gap:1.5rem;flex:1}
.page-head{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.page-head h1{font-size:clamp(1.25rem,2.4vw,1.625rem);letter-spacing:-.03em}
.page-head p{color:var(--muted-fg);font-size:.8125rem;margin-top:.1875rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4375rem;padding:.5rem .875rem;border-radius:8px;border:1px solid transparent;background:var(--primary);color:var(--primary-fg);font-size:.8125rem;font-weight:650;cursor:pointer;white-space:nowrap}
.btn:hover{opacity:.88}
.btn.ghost{background:var(--card);color:var(--fg);border-color:var(--border)}
.btn.ghost:hover{background:var(--muted)}
.btn svg{width:14px;height:14px}
.btn.sm{padding:.375rem .625rem;font-size:.75rem}

/* metrics + cards */
.grid{display:grid;gap:.875rem}
.g3{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.card{border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.card.pad{padding:1rem}
/* The balance card runs inverted against the page — black on white, white on
   black — so it reads as the anchor. Everything inside it therefore has to
   take its colour from --invert-fg, not the page tokens. */
.bal{background:var(--invert);color:var(--invert-fg);border-color:var(--invert)}
.bal .kicker{color:var(--invert-fg);opacity:.62}
.bal .v{font-family:var(--mono);font-size:2rem;font-weight:700;letter-spacing:-.045em;line-height:1.1;margin-top:.3125rem}
.bal .meta{display:flex;gap:1.25rem;margin-top:.8125rem;padding-top:.75rem;border-top:1px solid currentColor;border-color:color-mix(in srgb,var(--invert-fg) 22%,transparent)}
.bal .meta div{display:flex;flex-direction:column}
.bal .meta span:first-child{font-size:.5625rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--invert-fg);opacity:.62}
.bal .meta span:last-child{font-family:var(--mono);font-size:.875rem;font-weight:650;margin-top:.0625rem;color:var(--invert-fg)}
.bal .cta{display:flex;gap:.4375rem;margin-top:.875rem}
/* buttons flip too, or a black button disappears on a black card */
.bal .cta .btn{background:var(--invert-fg);color:var(--invert);border-color:var(--invert-fg)}
.bal .cta .btn.ghost{background:transparent;color:var(--invert-fg);border-color:color-mix(in srgb,var(--invert-fg) 38%,transparent)}
.bal .cta .btn.ghost:hover{background:color-mix(in srgb,var(--invert-fg) 12%,transparent);opacity:1}

.prod{display:flex;flex-direction:column;gap:.75rem;padding:1rem}
.prod .h{display:flex;align-items:center;gap:.5rem}
.prod .h svg{width:16px;height:16px}
.prod .h b{font-size:.875rem;font-weight:650;letter-spacing:-.015em}
.prod .h .badge{margin-left:auto}
.counts{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.counts div{padding:.5rem .375rem;text-align:center;border-right:1px solid var(--border)}
.counts div:last-child{border-right:0}
.counts .n{font-family:var(--mono);font-size:1.125rem;font-weight:700;letter-spacing:-.03em}
.counts .k{font-size:.5625rem;text-transform:uppercase;letter-spacing:.075em;color:var(--muted-fg);font-weight:700;margin-top:.0625rem}
.counts div.hot .n{color:var(--wait)}

.pill{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:999px;font-size:.625rem;font-weight:700;letter-spacing:.035em;text-transform:uppercase;white-space:nowrap}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{color:var(--ok);background:var(--ok-soft)}
.pill.wait{color:var(--wait);background:var(--wait-soft)}
.pill.bad{color:var(--bad);background:var(--bad-soft)}
.pill.idle{color:var(--muted-fg);background:var(--muted)}

.sec{display:flex;align-items:center;gap:.75rem;margin-bottom:.625rem}
.sec a{font-size:.75rem;color:var(--muted-fg)}
.sec a:hover{color:var(--fg)}

.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.8125rem}
th,td{text-align:left;padding:.625rem .875rem;border-bottom:1px solid var(--border)}
th{font-size:.5625rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-fg);font-weight:700;font-family:var(--mono)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--muted)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-weight:650}
.svc{display:flex;align-items:center;gap:.625rem}
.av2{width:26px;height:26px;flex:none;border-radius:7px;background:var(--muted);border:1px solid var(--border);display:grid;place-items:center;font-size:.5625rem;font-weight:800;color:var(--muted-fg)}
.svc .b{display:flex;flex-direction:column;min-width:0}
.svc .n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svc .s{font-size:.6875rem;color:var(--muted-fg);font-family:var(--mono)}

/* ─────────── footer (same structure as the home page) ─────────── */
.foot{border-top:1px solid var(--border);padding:2rem clamp(.875rem,2.5vw,1.75rem) 1.5rem;font-size:.8125rem}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2rem}
.fgrid h4{font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-fg);font-family:var(--mono);margin:0 0 .75rem;font-weight:700}
.fgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.fgrid a{color:var(--muted-fg)}
.fgrid a:hover{color:var(--fg)}
.fgrid .blurb{color:var(--muted-fg);max-width:38ch;margin-top:.75rem;font-size:.8125rem}
.fbottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.125rem;border-top:1px solid var(--border);color:var(--muted-fg);font-size:.75rem}

.tabbar{display:none}

@media (max-width:1000px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .burger{display:grid}
  .fgrid{grid-template-columns:1fr 1fr;gap:1.75rem}
  /* clearance goes on the footer, not .page — the footer is what sits
     under the fixed tab bar */
  .foot{padding-bottom:5.5rem}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);z-index:40}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:.5rem 0 .625rem;color:var(--muted-fg);font-size:.5625rem;font-weight:700;letter-spacing:.02em}
  .tabbar a.on{color:var(--fg)}
  .tabbar svg{width:18px;height:18px}
}
@media (max-width:720px){
  .crumb,.bar-div{display:none}
  /* the drawer already carries the profile, so the header chip is redundant
     here — dropping it buys the width the strapline needs */
  .who{display:none}
}
@media (max-width:560px){
  .fgrid{grid-template-columns:1fr;gap:1.5rem}
}
@media (max-width:480px){
  .att{flex-wrap:wrap}
  .att .b{flex-basis:100%;order:3}
  .code{font-size:1.25rem}
}