/* =====================================================================
   Angom admin · Ledger shell and signature views
   Port of the Ledger demo shell (D:\Angom\demos\ledger-admin\src\ledger.html
   <style>, docs/design-tokens.md §4.8–4.9, docs/design/screens-admin.md §2–3).
   Dark side nav in both themes, annual-report type, odometer, split panel.
   Upgrade-only views (receipt, invoices, club card) are not ported.
   ===================================================================== */
.d4{display:grid;grid-template-columns:var(--shell-side-w) minmax(0,1fr);min-height:100vh}
.d4 > .col{min-width:0}
.side{position:sticky;top:0;height:100vh;overflow:auto;background:var(--side);color:var(--side-ink);padding:var(--sp-10) var(--sp-6);display:flex;flex-direction:column;gap:1px;border-inline-end:1px solid var(--line)}
.side .logo{margin:0 var(--sp-5) var(--logo-gap)}
.side h5{margin:var(--sp-8) var(--sp-5) var(--sp-2);font-size:var(--fs-label);font-weight:600;color:var(--side-mut);letter-spacing:var(--ls-caps);text-transform:uppercase}
:lang(ar) .side h5{letter-spacing:0}
.ni{display:flex;align-items:center;gap:var(--sp-5);min-height:var(--nav-item-h);padding:0 var(--sp-5);border-radius:var(--r-9);color:var(--side-mut);text-decoration:none;font-size:var(--fs-ui);font-weight:500;position:relative}
.ni:hover{background:var(--side-hover);color:var(--side-ink)}
.ni[aria-current="page"]{background:var(--side-cur);color:var(--side-ink);font-weight:600}
.ni .nl{flex:1;display:flex;align-items:center;gap:var(--sp-3)}
.nb{font-size:var(--fs-tick);font-weight:700;background:var(--side-badge);color:var(--side-ink);border-radius:var(--r-pill);padding:var(--nb-pad)}
.side :focus-visible{outline-color:var(--side-focus)}
/* collapse toggle (D-63): sticky at the foot of the nav, so it stays in view while the nav scrolls on its own */
.navfoot{margin-top:auto;position:sticky;bottom:calc(-1 * var(--sp-10));margin-bottom:calc(-1 * var(--sp-10));padding-block:var(--sp-3) var(--sp-10);background:var(--side);border-top:1px solid var(--side-cur);display:flex} /* covers the nav bottom padding too */
.navtoggle{border:none;background:transparent;color:var(--side-mut);border-radius:var(--r-9);min-height:var(--nav-item-h);width:var(--nav-item-h);display:grid;place-items:center}
.navtoggle:hover{background:var(--side-hover);color:var(--side-ink)}

/* collapsed rail (D-63, DQ-16): icons only, label as tooltip, badges become a dot */
@media (min-width:901px){
  .d4.rail{grid-template-columns:var(--shell-side-w-collapsed) minmax(0,1fr)}
  .d4.rail .side .logo{margin-inline:auto}
  .d4.rail .side h5{font-size:0;height:1px;background:var(--side-cur);margin:var(--sp-4) var(--sp-5)}
  .d4.rail .ni{justify-content:center;padding:0}
  .d4.rail .ni .nl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .d4.rail .nb{position:absolute;top:var(--sp-2);inset-inline-end:var(--sp-4);width:var(--sp-4);height:var(--sp-4);padding:0;font-size:0;background:var(--side-ink)}
  .d4.rail .navfoot{justify-content:center}
}

.hdr{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-9) var(--sp-12) 0;flex-wrap:wrap}
.hdr .sp{flex:1}
main{padding:var(--sp-10) var(--sp-12) var(--sp-14);max-width:var(--main-max)}
.eyebrow{font-size:var(--fs-xs);font-weight:600;color:var(--muted);letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
:lang(ar) .eyebrow{letter-spacing:0}

/* ---------- Overview (ADM-01) ---------- */
.hero{display:grid;grid-template-columns:minmax(0,var(--hero-l)) minmax(0,var(--hero-r));gap:var(--sp-8);margin-bottom:var(--sp-8)}
.hero > .side-col{display:grid;gap:var(--sp-6);align-content:start}
.tot{padding:var(--sp-11);display:grid;gap:var(--sp-8);align-content:start}
.drum{display:inline-flex;align-items:flex-end;gap:var(--odo-gap);direction:ltr;font:500 var(--fs-odo)/1 var(--f-disp);letter-spacing:var(--ls-odo);font-variant-numeric:tabular-nums}
.drum .d{display:inline-block;height:1em;overflow:hidden;position:relative;width:var(--odo-digit-w)}
.drum .d > span{display:flex;flex-direction:column;transform:translateY(calc(var(--to) * -1em))}
.drum.roll .d > span{animation:odo-roll var(--dur-odo) var(--ease-odo) both;animation-delay:calc(var(--i) * var(--odo-stagger))}
:root.paused .drum.roll .d > span{animation:none}
@keyframes odo-roll{from{transform:translateY(0)}}
/* prerender: strips wait at 0 for the roll, so the first paint never shows the total and then resets it */
@media (prefers-reduced-motion:no-preference){:root:not(.paused) .drum.pre .d > span{transform:translateY(0)}}
.drum .d > span > i{font-style:normal;height:1em;display:block;text-align:center}
.drum .c{width:var(--odo-comma-w);text-align:center;color:var(--muted)}
.drum .cur{font-size:var(--fs-odo-cur);font-weight:500;color:var(--muted);margin-inline-start:var(--sp-5);align-self:center;letter-spacing:0}
:lang(ar) .drum .cur{font-family:var(--f-ar)} /* «ر.س»: Sora has no Arabic glyphs; digits stay Sora (§0.3) */
.split3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-12);overflow:hidden}
.split3 > div{background:var(--surface);padding:var(--sp-6) var(--sp-7)}
.split3 small{display:block;font-size:var(--fs-xs);color:var(--muted)}
.split3 b{font-size:var(--fs-section);font-variant-numeric:tabular-nums}
.bk{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.bk .card{padding:var(--sp-8)}
.bk a.card{color:inherit;text-decoration:none;transition:border-color var(--dur-hover)}
.bk a.card:hover{border-color:var(--line-2)}
.bk .v{font:500 var(--fs-kpi)/var(--lh-kpi) var(--f-disp);margin-top:var(--sp-3)}
.bk small{color:var(--muted);font-size:var(--fs-sm)}
.row2{display:grid;grid-template-columns:minmax(0,var(--row2-l)) minmax(0,var(--row2-r));gap:var(--sp-8);margin-bottom:var(--sp-8)}
.activity{display:grid;gap:0}
.activity div{display:flex;gap:var(--sp-5);padding:var(--activity-pad);border-top:1px solid var(--line);font-size:var(--fs-row)}
.activity time{color:var(--muted);font-variant-numeric:tabular-nums;min-width:var(--activity-time-w)}
.ph-body{display:grid;gap:var(--sp-8)}

@media (max-width:1100px){
  .hero,.row2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .d4,.d4.rail{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:nowrap;overflow:auto;padding:var(--sp-5);gap:var(--sp-2);align-items:center}
  .side h5,.navfoot{display:none}
  .side .logo{margin:0;margin-inline-end:var(--sp-3);--logo-h:var(--logo-h-sm)}
  .ni{white-space:nowrap;flex:none}
  .hdr{padding:var(--sp-7) var(--sp-7) 0}
  main{padding:var(--sp-7) var(--sp-7) var(--main-pb-mobile)}
  .bk{grid-template-columns:1fr 1fr 1fr;gap:var(--sp-4)}
  .bk .v{font-size:var(--fs-kpi-sm)}
  .hdr .gsearch{order:3;flex-basis:100%}
}
@media (max-width:560px){
  .split3{grid-template-columns:1fr}
  .bk .card{padding:var(--sp-6)}
}

/* ---------- sign-in pages (Phase 4): the Ledger's dark spine with the logo, the form card on the paper ground ---------- */
.acct{display:grid;grid-template-columns:var(--acct-spine-w) minmax(0,1fr);min-height:100vh}
.acct-spine{background:var(--side);color:var(--side-mut);padding:var(--sp-13) var(--sp-12);display:flex;flex-direction:column;gap:var(--sp-8)}
.acct-logo{height:var(--logo-h);width:auto;align-self:flex-start}
.acct-line{margin:0;font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
:lang(ar) .acct-line{letter-spacing:0}
.acct-main{display:flex;flex-direction:column;align-items:center;padding:var(--sp-9) var(--sp-12) var(--sp-14);max-width:none}
.acct-top{align-self:stretch;display:flex;justify-content:flex-end;margin-bottom:var(--sp-14)}
.acct-card{width:min(100%,var(--acct-card-w));padding:var(--sp-11);display:grid;gap:var(--sp-7)}
.acct-card h1{margin:0;font:600 var(--fs-h1)/var(--lh-h1) var(--f-disp);letter-spacing:var(--ls-h1)}
:lang(ar) .acct-card h1{font-family:var(--f-ar);font-weight:700;letter-spacing:0}
.acct-card > p{margin:0}
.acct-form{display:grid;gap:var(--sp-7)}
.acct-back{justify-self:center;font-size:var(--fs-sm)}
.acct-qr{display:flex;gap:var(--sp-8);align-items:center;flex-wrap:wrap}
.acct-key{display:grid;gap:var(--sp-2);min-width:0}
.acct-key code{font-size:var(--fs-section);font-weight:600;word-break:break-all}
.otp{letter-spacing:var(--otp-ls);font-size:var(--fs-section)}
svg.qr{width:var(--qr-size);height:var(--qr-size);flex:none;border-radius:var(--r-8)}
svg.qr .qrg{fill:var(--qr-ground)}
svg.qr .qri{fill:var(--qr-ink)}
@media (max-width:900px){
  .acct{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .acct-spine{padding:var(--sp-7);flex-direction:row;align-items:center;justify-content:space-between}
  .acct-logo{height:var(--logo-h-sm)}
  .acct-main{padding:var(--sp-7) var(--sp-7) var(--sp-14)}
  .acct-top{margin-bottom:var(--sp-9)}
  .acct-card{padding:var(--sp-9)}
}