@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700&family=Inter:wght@400..700&family=JetBrains+Mono:wght@500;600;700&display=swap');

/* ==========================================================================
   Vishwodyog app — "Khata" design system
   One idea: every screen is a page of the ledger. Ruled rows, a gold margin line, figures right-aligned in
   tabular mono, subtotals single-ruled and grand totals double-ruled, status as stamps.
   Restrained colour: cool paper + navy ink + one gold accent. State colours mean state and nothing else.
   The legacy class names (.btn-gold, .panel, table.data, .badge-paid, .field ...) are kept and restyled here, so
   every existing page picks up the new look; pages are then cleaned up one by one.
   ========================================================================== */

:root{
  /* ---- Khata tokens ---- */
  --paper:#f1f4f9;          /* page */
  --leaf:#ffffff;           /* the ledger sheet / panels */
  --leaf-2:#f7f9fc;         /* header rows, hover */
  --leaf-3:#edf0f6;         /* wells, tracks, group rows */
  --rail:#0a1230;           /* sidebar: the second neutral layer */
  --rail-hi:rgba(190,204,240,.09);
  --rail-line:rgba(190,204,240,.12);
  --rail-text:#b9c3e3;
  --rail-dim:#7f8bb3;

  --ink:#0b1230;
  --ink-2:#434f78;
  --ink-3:#5c678f;
  --rule:rgba(11,18,48,.09);
  --rule-2:rgba(11,18,48,.17);

  --gold:#d4af37;
  --gold-hi:#e2c15a;
  --gold-lo:#bd9a2b;
  --gold-tint:rgba(212,175,55,.16);
  --gold-ink:#7d620c;       /* gold as text on light surfaces */
  --margin:rgba(212,175,55,.6);
  --credit:#3556c4;         /* the credit side of the ledger, nothing else */

  --ok:#14753a;   --ok-bg:#e5f4ea;
  --warn:#8f5200; --warn-bg:#fdf0d5;
  --bad:#b0281f;  --bad-bg:#fcebe9;
  --info:#2749ad; --info-bg:#e8edfb;
  --mute:#4a5578; --mute-bg:#eceff6;
  --ok-solid:var(--ok); --warn-solid:var(--warn); --bad-solid:var(--bad); --info-solid:var(--info);   /* fills that carry white text: same as the state colour in light, darker in the dark theme */

  --shadow-1:0 1px 2px rgba(11,18,48,.05), 0 10px 28px -16px rgba(11,18,48,.16);
  --shadow-pop:0 18px 44px -14px rgba(11,18,48,.32), 0 2px 6px rgba(11,18,48,.08);

  --f-body:'Inter',system-ui,'Segoe UI',Roboto,sans-serif;
  --f-display:'Bricolage Grotesque','Inter',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);

  /* ---- legacy names that 160 views still use inside inline styles ---- */
  --bg:var(--paper);
  --panel:var(--leaf);
  --line:#dfe3ec;
  --navy:var(--rail);
  --navy-2:#111b43;
  --navy-light:#1b2d5c;
  --gold-light:#f3d98a;
  --gold-deep:#8a6d12;
  --gold-dark:var(--gold-deep);
  --text:var(--ink-2);
  --text-soft:var(--ink-3);
  --green:var(--ok);
  --red:var(--bad);
  --amber:var(--warn);
  --radius:10px;
  --card-bg:var(--leaf);
  --muted:var(--ink-3);
  --primary:var(--gold-deep);
  /* ... and names views use that the old stylesheet never defined */
  --text-muted:var(--ink-3);
  --text-2:var(--ink-2);
  --text-3:var(--ink-3);
  --text-main:var(--ink);
  --border:var(--line);
  --line-2:var(--rule-2);
  --gold-2:var(--gold-hi);
  --gold-hover:var(--gold-hi);
  --success:var(--ok);
  --warning:var(--warn);
  --danger:var(--bad);
  --shadow-sm:0 1px 2px rgba(11,18,48,.06);
  --shadow-md:0 8px 24px -12px rgba(11,18,48,.22);
  --nav-h:56px;
  --sidenav-w:248px;
}

/* ============ base ============ */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{max-width:100%; -webkit-text-size-adjust:100%;}
body{
  font-family:var(--f-body); font-size:.875rem; line-height:1.5; background:var(--paper); color:var(--ink);
  min-height:100vh; display:flex; flex-direction:column; max-width:100%; overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit;}
input,select,textarea,optgroup{font-family:inherit;}   /* bare form controls used the browser font (Arial) on about half the pages */
code,kbd,samp,pre{font-family:var(--f-mono);}
h1,h2,h3,h4{font-family:var(--f-body); font-weight:650; letter-spacing:-.01em; color:var(--ink);}
svg{max-width:100%;}
[hidden]{display:none !important;}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:6px;}
::selection{background:var(--gold-tint);}
.fig{font-family:var(--f-mono); font-size:.8125rem; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.01em; white-space:nowrap;}
td.num,th.num{white-space:nowrap;}
svg.i{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:-3px;}
.skip-link{position:absolute; left:12px; top:-48px; z-index:2000; padding:10px 16px; border-radius:8px; background:var(--gold); color:#0b1230; font-weight:700; box-shadow:var(--shadow-pop); transition:top .15s ease;}
.skip-link:focus{top:12px;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important;}}

/* ============ scrollbars ============ */
html{scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent;}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--rule-2); border-radius:999px; border:2px solid var(--paper); background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3);}
::-webkit-scrollbar-corner{background:transparent;}

/* ============ app shell ============ */
.app{flex:1; display:grid; grid-template-columns:var(--sidenav-w) minmax(0,1fr); width:100%; transition:grid-template-columns .2s ease;}
.app.is-collapsed{--sidenav-w:68px;}
.col{min-width:0; display:flex; flex-direction:column;}

.rail{position:sticky; top:0; height:100vh; z-index:30; display:flex; flex-direction:column; background:var(--rail); color:var(--rail-text); border-right:1px solid var(--rail-line);}
.rail-brand{display:flex; align-items:center; gap:10px; min-height:56px; padding:8px 14px; border-bottom:1px solid var(--rail-line); flex:none; color:#fff; font:650 .9375rem/1.25 var(--f-body); letter-spacing:-.01em;}
.rail-brand span.name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1;}
.rail-brand.has-logo{padding:8px 14px;}
.rail-brand .logo-card{background:#121d45; border:1px solid rgba(212,175,55,.45); border-radius:9px; padding:3px 5px; display:flex; align-items:center; justify-content:center; height:38px; min-width:38px; max-width:54px; flex:none;}
.rail-brand .logo-card img{max-height:32px; max-width:44px; width:auto; height:auto; object-fit:contain; display:block;}
.rail-brand .only-collapsed{display:none;}
.is-collapsed .rail-brand .only-collapsed{display:grid;}
.mark{display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:9px; background:#121d45; border:1px solid rgba(212,175,55,.7); color:#f3e2a6; font:700 .8125rem/1 var(--f-display); letter-spacing:.02em;}
.rail-nav{flex:1; overflow-y:auto; min-height:0; padding:10px 10px 16px; scrollbar-width:thin; scrollbar-color:var(--rail-line) transparent;}
.rail-nav::-webkit-scrollbar-thumb{background:var(--rail-line); border-color:var(--rail);}
.nav-group{margin-bottom:2px;}
.nav-label{display:flex; align-items:center; justify-content:space-between; width:100%; height:28px; margin-top:12px; padding:0 10px; border-radius:6px; background:none; border:0; cursor:pointer; font:600 .6875rem/1 var(--f-body); letter-spacing:.07em; text-transform:uppercase; color:var(--rail-dim);}
.nav-label:hover{color:var(--rail-text);}
.nav-label .i{width:14px; height:14px; transition:transform .18s ease;}
.nav-group.is-shut .nav-label .i{transform:rotate(-90deg);}
.nav-group.is-shut .nav-item{display:none;}
.nav-item{display:flex; align-items:center; gap:11px; height:36px; padding:0 10px; border-radius:8px; color:var(--rail-text); font-weight:500; white-space:nowrap; transition:background .15s ease,color .15s ease;}
.nav-item:hover{background:var(--rail-hi); color:#fff;}
.nav-item[aria-current="page"]{background:rgba(212,175,55,.16); color:#fff; font-weight:600;}
.nav-item[aria-current="page"] .i{color:var(--gold);}
.nav-item:focus-visible{outline-offset:-2px;}
.nav-badge{margin-left:auto; min-width:20px; height:20px; padding:0 6px; display:grid; place-items:center; border-radius:10px; background:var(--gold); color:#0b1230; font:700 .6875rem/1 var(--f-body);}
.nav-badge.is-red{background:#ef4444; color:#fff;}
.rail-foot{flex:none; position:relative; padding:10px; border-top:1px solid var(--rail-line);}
.userbtn{display:flex; align-items:center; gap:10px; width:100%; padding:8px; border-radius:10px; text-align:left; background:none; border:0; cursor:pointer;}
.userbtn:hover,.userbtn[aria-expanded="true"]{background:var(--rail-hi);}
.avatar{display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%; background:#1b2d5c; color:#f3e2a6; font:650 .75rem/1 var(--f-body);}
.userbtn .who{min-width:0; flex:1;}
.userbtn b{display:block; color:#fff; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.userbtn small{color:var(--rail-dim); font-size:.75rem;}
.userbtn .i{color:var(--rail-dim); width:16px; height:16px; transition:transform .2s var(--ease);}
.userbtn[aria-expanded="true"] .i{transform:rotate(180deg);}
.is-collapsed .rail-brand .name,.is-collapsed .nav-label span,.is-collapsed .nav-item span,.is-collapsed .nav-badge,.is-collapsed .userbtn .who,.is-collapsed .userbtn .i{display:none;}
.is-collapsed .rail-brand{justify-content:center; padding:8px 0;}
.is-collapsed .rail-brand .logo-card{max-width:44px; padding:3px;}
.is-collapsed .rail-brand .logo-card img{max-width:36px;}
.is-collapsed .nav-label{justify-content:center; height:12px;}
.is-collapsed .nav-label .i{display:none;}
.is-collapsed .nav-item,.is-collapsed .userbtn{justify-content:center; padding:0;}

.rail-menu{display:none; position:absolute; left:10px; right:10px; bottom:calc(100% - 2px); z-index:40; padding:6px; border:1px solid var(--rail-line); border-radius:12px; background:#111b43; box-shadow:0 18px 38px rgba(0,0,0,.5); max-height:70vh; overflow-y:auto;}
.rail-menu.open{display:block; animation:menuUp .15s var(--ease);}
@keyframes menuUp{from{opacity:0; transform:translateY(6px);}to{opacity:1; transform:none;}}
.rail-menu .who-card{display:flex; align-items:center; gap:10px; padding:8px 10px 10px; border-bottom:1px solid var(--rail-line); margin-bottom:6px;}
.rail-menu .who-card b{display:block; color:#fff; font-weight:600; line-height:1.2;}
.rail-menu .who-card small{color:var(--gold-light); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;}
.rail-menu .menu-label{padding:8px 10px 4px; font:600 .625rem/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--rail-dim);}
.rail-menu a,.rail-menu button.menu-btn{display:flex; align-items:center; gap:10px; width:100%; height:34px; padding:0 10px; border-radius:7px; color:var(--rail-text); font-weight:500; font-size:.8125rem; background:none; border:0; cursor:pointer; text-align:left;}
.rail-menu a:hover,.rail-menu button.menu-btn:hover{background:var(--rail-hi); color:#fff;}
.rail-menu a[aria-current="page"]{background:rgba(212,175,55,.16); color:#fff;}
.rail-menu .danger{color:#fca5a5;}
.rail-menu hr{border:0; border-top:1px solid var(--rail-line); margin:6px 4px;}

.strip{display:flex; align-items:center; justify-content:center; gap:12px; min-height:32px; padding:6px 16px; flex-wrap:nowrap; white-space:nowrap; background:var(--warn-bg); color:var(--warn); font-size:.8125rem; font-weight:500; border-bottom:1px solid var(--rule);}
.strip.is-bad{background:var(--bad-bg); color:var(--bad);}
/* the platform support banner: longer than the one-line notices, so it wraps, and its button is a labelled button, not an icon square */
.strip.is-support, :root[data-theme="dark"] .strip.is-support{background:var(--bad-bg); color:var(--bad); flex-wrap:wrap; white-space:normal; text-align:center;}
.strip.is-support > span{overflow:visible; text-overflow:clip;}
.strip.is-support form{margin:0; flex:none;}
.strip.is-support button{display:inline-block; width:auto; height:auto; padding:3px 12px; border:1px solid currentColor; border-radius:6px; font:600 .75rem/1.4 var(--f-body); color:inherit;}
.strip.is-support button:hover{background:rgba(0,0,0,.08);}
.strip > span{min-width:0; overflow:hidden; text-overflow:ellipsis;}
.strip a{flex:none; text-decoration:underline; text-underline-offset:2px; font-weight:600;}
.strip button{display:grid; place-items:center; width:22px; height:22px; border-radius:6px; background:none; border:0; cursor:pointer;}
.strip button:hover{background:rgba(0,0,0,.07);}

.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px; min-height:56px; padding:0 24px; background:var(--paper); border-bottom:1px solid var(--rule);}
.topbar .burger{display:none;}
.crumbs{display:flex; align-items:center; gap:6px; color:var(--ink-3); font-size:.8125rem; min-width:0; overflow:hidden; white-space:nowrap;}
.crumbs b{color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis;}
.crumbs .i{width:14px; height:14px;}
.topbar-spacer{flex:1 1 0; min-width:0;}
.cmd{display:flex; align-items:center; gap:9px; width:min(340px,34vw); height:36px; padding:0 10px 0 12px; border:1px solid var(--rule-2); border-radius:9px; background:var(--leaf); color:var(--ink-3); cursor:pointer; transition:border-color .15s ease;}
.cmd:hover{border-color:var(--ink-3);}
.cmd span:not(.kbd){flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kbd{font:500 .6875rem/1 var(--f-mono); padding:3px 6px; border:1px solid var(--rule-2); border-radius:5px; color:var(--ink-3); background:var(--leaf-2);}
.chip{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 11px; border:1px solid var(--rule-2); border-radius:9px; background:var(--leaf); color:var(--ink-2); font-weight:500; white-space:nowrap; cursor:pointer;}
.chip:hover{border-color:var(--ink-3); color:var(--ink);}
.chip b{color:var(--ink); font-weight:600;}
.facility-form{margin:0; display:inline-flex;}
.facility-form .chip{position:relative; padding-right:8px;}
.facility-form select{appearance:none; border:0; background:transparent; color:var(--ink); font:600 .8125rem var(--f-body); max-width:150px; text-overflow:ellipsis; cursor:pointer; padding:0 18px 0 0; height:34px;}
.facility-form select:focus{outline:none;}
.facility-form .caret{position:absolute; right:9px; pointer-events:none; width:14px; height:14px;}
.icon-btn{position:relative; display:grid; place-items:center; width:36px; height:36px; border-radius:9px; color:var(--ink-2); background:none; border:0; cursor:pointer;}
.icon-btn:hover{background:var(--leaf-3); color:var(--ink);}
.bell-dot{position:absolute; top:3px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:var(--bad-solid); color:#fff; font:700 .64rem/16px var(--f-mono); text-align:center; box-shadow:0 0 0 2px var(--paper);}
.notif-list{list-style:none; margin:0; padding:0;}
.notif-item{display:flex; gap:12px; align-items:flex-start; padding:12px 16px; border-bottom:1px solid var(--rule);}
.notif-item:last-child{border-bottom:0;}
.notif-item.unread{background:var(--gold-tint);}
.notif-item .dot{margin-top:6px; flex:none;}
.notif-item a{color:var(--ink); font-weight:600; text-decoration:none;}
.notif-item a:hover{text-decoration:underline;}
.notif-item small{display:block; color:var(--ink-3); margin-top:2px;}
.flow-step{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-2);}
.flow-step .badge{white-space:nowrap;}
.i{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;}
.i-sm{width:16px; height:16px;}
.nav-icon{width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;}

.main{flex:1; width:100%; max-width:1560px; margin:0 auto; padding:24px 32px 72px; min-width:0;}
@media (max-width:960px){ .main{padding:18px 16px 56px; max-width:100%; overflow-x:clip;} }
@media (max-width:480px){ .main{padding:14px 12px 48px;} }
/* pages that render outside the shell (error pages for visitors) keep a simple centred column */
body:not(.has-sidenav) > .main{max-width:1180px;}

.menu{position:fixed; z-index:60; min-width:220px; padding:6px; border:1px solid var(--rule-2); border-radius:12px; background:var(--leaf); box-shadow:var(--shadow-pop);}
.menu[hidden]{display:none;}
.menu a{display:flex; align-items:center; gap:10px; width:100%; height:36px; padding:0 10px; border-radius:8px; color:var(--ink); font-weight:500; text-align:left;}
.menu a:hover{background:var(--leaf-3);}
.menu hr{border:0; border-top:1px solid var(--rule); margin:6px 0;}
.menu .i{color:var(--ink-3);}
dialog.cmdk{width:min(560px,calc(100vw - 32px)); margin:12vh auto 0; padding:0; border:1px solid var(--rule-2); border-radius:14px; background:var(--leaf); color:var(--ink); box-shadow:var(--shadow-pop); overflow:hidden;}
dialog.cmdk::backdrop{background:rgba(6,11,26,.5);}
.cmdk-in{display:flex; align-items:center; gap:10px; padding:0 16px; height:52px; border-bottom:1px solid var(--rule);}
.cmdk-in input{flex:1; height:100%; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:1rem;}
.cmdk-list{max-height:340px; overflow-y:auto; padding:6px;}
.cmdk-list button{display:flex; align-items:center; gap:12px; width:100%; height:40px; padding:0 10px; border-radius:8px; text-align:left; background:none; border:0; cursor:pointer;}
.cmdk-list button:hover,.cmdk-list button[aria-selected="true"]{background:var(--leaf-3);}
.cmdk-list .i{color:var(--ink-3);}
.cmdk-list em{margin-left:auto; font-style:normal; color:var(--ink-3); font-size:.75rem;}
.cmdk-empty{padding:28px; text-align:center; color:var(--ink-3);}
.cmdk-foot{display:flex; gap:14px; padding:9px 16px; border-top:1px solid var(--rule); color:var(--ink-3); font-size:.75rem;}

@media (max-width:1180px){
  .cmd{width:44px; padding:0; justify-content:center;}
  .cmd span{display:none;}
}
@media (max-width:960px){
  .app{grid-template-columns:minmax(0,1fr);}
  .rail{position:fixed; inset:0 auto 0 0; width:280px; transform:translateX(-102%); transition:transform .22s ease; box-shadow:var(--shadow-pop);}
  .app.is-open .rail{transform:none;}
  .app.is-open::after{content:""; position:fixed; inset:0; z-index:25; background:rgba(6,11,26,.5);}
  .topbar .burger{display:grid;}
  .topbar .collapse-btn{display:none;}
  .topbar{padding:0 14px;}
  .is-collapsed .rail-brand .name,.is-collapsed .rail-brand .logo-card,.is-collapsed .nav-label span,.is-collapsed .nav-item span,.is-collapsed .userbtn .who,.is-collapsed .userbtn .i{display:revert;}
  .is-collapsed .rail-brand .only-collapsed{display:none;}
  .is-collapsed .rail-brand{justify-content:flex-start; padding:0 16px;}
  .is-collapsed .nav-label{justify-content:space-between; height:28px;}
  .is-collapsed .nav-label .i{display:revert;}
  .is-collapsed .nav-item,.is-collapsed .userbtn{justify-content:flex-start; padding:0 10px;}
}
@media (max-width:640px){
  .topbar .chip.facility-chip,.topbar .facility-form{display:none;}
  .topbar #newBtn span{display:none;}
  .topbar #newBtn{width:36px; padding:0;}
  .crumbs .hide-s{display:none;}
}
.rail .rail-facility{display:none;}
@media (max-width:640px){
  .rail .rail-facility{display:flex; margin:10px 10px 0; position:relative; background:var(--rail-hi); border:1px solid var(--rail-line); border-radius:9px; color:var(--rail-text); height:38px; align-items:center;}
  .rail .rail-facility select{appearance:none; border:0; background:transparent; color:#fff; font:600 .8125rem var(--f-body); width:100%; height:100%; padding:0 30px 0 12px; cursor:pointer; text-overflow:ellipsis;}
  .rail .rail-facility select option{color:#0b1230;}
  .rail .rail-facility .caret{position:absolute; right:10px; pointer-events:none; color:var(--rail-dim); width:14px; height:14px;}
}

/* ============ page head ============ */
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
.page-head h1{font:650 1.75rem/1.15 var(--f-display); letter-spacing:-.022em;}
.page-head .sub{color:var(--ink-3); font-size:.875rem; margin-top:4px;}
@media (max-width:640px){
  .page-head{flex-direction:column; align-items:stretch; gap:12px; margin-bottom:16px;}
  .page-head h1{font-size:1.5rem;}
  .page-head .btn, .page-head .btn-gold, .page-head .btn-ghost, .page-head .btn-primary{width:100%; justify-content:center;}
}

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:36px; padding:7px 14px; border-radius:9px; border:1px solid transparent;
  font-family:var(--f-body); font-weight:600; font-size:.8125rem; line-height:1.2; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed;}
.page-head .btn,.btn-block,.search-bar .btn{white-space:nowrap;}
.btn-svg, .btn .btn-icon, .btn svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}
.btn-gold, .btn-primary{background:var(--gold); color:#0b1230; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(11,18,48,.18);}
.btn-gold:hover:not(:disabled), .btn-primary:hover:not(:disabled){background:var(--gold-hi);}
.btn-gold:active:not(:disabled), .btn-primary:active:not(:disabled){background:var(--gold-lo); transform:translateY(1px);}
.btn-navy{background:var(--rail); color:#fff; border-color:var(--rail);}
.btn-navy:hover:not(:disabled){background:var(--navy-2); color:#fff; border-color:var(--gold);}
.btn-ghost, .btn-outline{background:var(--leaf); color:var(--ink); border-color:var(--rule-2);}
.btn-ghost:hover:not(:disabled), .btn-outline:hover:not(:disabled){border-color:var(--ink-3); background:var(--leaf-2); color:var(--ink);}
.btn-danger{background:var(--bad-bg); color:var(--bad); border-color:color-mix(in srgb, var(--bad) 30%, transparent);}
.btn-danger:hover:not(:disabled){background:color-mix(in srgb, var(--bad) 16%, #fff);}
.btn-sm{min-height:30px; padding:5px 11px; font-size:.78rem; border-radius:8px;}
.btn.is-loading{position:relative; color:transparent; pointer-events:none;}
.btn.is-loading::after{content:""; position:absolute; width:16px; height:16px; border:2px solid rgba(11,18,48,.25); border-top-color:#0b1230; border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============ cards / panels ============ */
.panel, .card{background:var(--leaf); border:1px solid var(--rule); border-radius:12px; padding:24px; box-shadow:var(--shadow-1); min-width:0;}
.panel + .panel, .card + .card{margin-top:20px;}

/* ============ stat grid ============ */
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px;}
.stat-tile{background:var(--leaf); border:1px solid var(--rule); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow-1);}
.stat-tile .lbl{font:600 .6875rem/1.2 var(--f-body); letter-spacing:.065em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px;}
.stat-tile .num{font-family:var(--f-body); font-weight:650; font-size:1.5rem; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums;}
.stat-tile.warn .num{color:var(--bad);}
@media (max-width:760px){.stat-grid{grid-template-columns:1fr;}}

/* ============ tables: the ledger leaf ============ */
table.data{width:100%; border-collapse:separate; border-spacing:0; background:var(--leaf); border:1px solid var(--rule); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-1);}
table.data thead th{
  background:var(--leaf-2); text-align:left; min-height:38px; padding:8px 14px; vertical-align:middle;
  font:600 .6875rem/1 var(--f-body); letter-spacing:.065em; text-transform:uppercase;
  color:var(--ink-3); border-bottom:1px solid var(--rule-2);
}
table.data tbody td{padding:11px 14px; border-bottom:1px solid var(--rule); font-size:.875rem; vertical-align:middle;}
table.data tbody tr:last-child td{border-bottom:none;}
table.data tbody tr{transition:background .12s ease;}
table.data tbody tr:hover{background:var(--leaf-2);}
/* rows flagged by data (a pending payment, a stock shortage): a faint wash in light mode; in dark the row keeps the table's own colour, because amber or red over navy turns a muddy grey, and the badge or figure carries the state */
table.data tbody tr.row-pending{background:color-mix(in srgb, var(--warn) 7%, transparent);}
table.data tbody tr.row-short{background:color-mix(in srgb, var(--bad) 6%, transparent);}
:root[data-theme="dark"] table.data tbody tr.row-pending, :root[data-theme="dark"] table.data tbody tr.row-short{background:transparent;}
table.data tbody tr.row-pending:hover, table.data tbody tr.row-short:hover{background:var(--leaf-2);}
table.data tfoot td{padding:12px 14px; font-weight:700; border-top:4px double var(--ink); background:var(--leaf);}
table.data th:first-child, table.data td:first-child{padding-left:18px; box-shadow:inset -1px 0 0 var(--margin);}
table.data th[colspan]:first-child, table.data td[colspan]:first-child{box-shadow:none;}
table.data .num{text-align:right; font-variant-numeric:tabular-nums;}
table.data td.num{font-family:var(--f-mono); font-size:.8125rem; font-weight:500; letter-spacing:-.01em; white-space:nowrap;}
.empty-row td{text-align:center; color:var(--ink-3); padding:40px 16px !important;}

.table-wrap, .table-container, .table-responsive{width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}

@media (max-width:900px){
  table.data, table.line-items{display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  /* a table wider than the screen fades out on any side that still has columns to scroll to (data-more set in shell.js) */
  table.data[data-more="right"]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);}
  table.data[data-more="left"]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);}
  table.data[data-more="both"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);}
  table.data thead, table.data tbody, table.data tr, table.line-items thead, table.line-items tbody, table.line-items tr{min-width:100%;}
  table.data th, table.data td, table.line-items th, table.line-items td{white-space:nowrap;}
  table.line-items td input, table.line-items td select{min-width:80px;}
  table.line-items td:first-child input, table.line-items td:first-child select{min-width:180px;}
  .panel, .card{max-width:100%; overflow-x:clip; padding:16px 14px;}
}

/* a table wider than its panel scrolls inside it (class set by fit.js) instead of widening the whole page; the edge fade reuses data-more */
table.data.scroll-x{display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
table.data.scroll-x thead, table.data.scroll-x tbody, table.data.scroll-x tr{min-width:100%;}
table.data.scroll-x[data-more="right"]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);}
table.data.scroll-x[data-more="left"]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);}
table.data.scroll-x[data-more="both"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);}

/* ============ status stamps & code pills ============ */
.badge{display:inline-flex; align-items:center; min-height:22px; padding:2px 8px; border:1px solid transparent; border-radius:5px; font:650 .6875rem/1.2 var(--f-body); letter-spacing:.065em; text-transform:uppercase; white-space:nowrap;}
.badge-paid, .badge-success{background:var(--ok-bg); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 32%, transparent);}
.badge-partial, .badge-warning{background:var(--warn-bg); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 32%, transparent);}
.badge-unpaid, .badge-draft, .badge-neutral{background:var(--mute-bg); color:var(--mute); border-color:color-mix(in srgb, var(--mute) 28%, transparent);}
.badge-info{background:var(--info-bg); color:var(--info); border-color:color-mix(in srgb, var(--info) 32%, transparent);}
.badge-overdue, .badge-danger{background:var(--bad-bg); color:var(--bad); border-color:color-mix(in srgb, var(--bad) 32%, transparent);}
.badge-cancelled{background:var(--mute-bg); color:var(--mute); border-color:color-mix(in srgb, var(--mute) 28%, transparent);}
.badge-gold{background:var(--gold-tint); color:var(--gold-ink); border-color:color-mix(in srgb, var(--gold) 45%, transparent);}
.badge-ghost{background:transparent; color:var(--ink-2); border-color:var(--rule-2);}
.code-pill{display:inline-block; white-space:nowrap; font-family:var(--f-mono); font-size:.78rem; font-weight:600; color:var(--ink); background:var(--leaf-3); border:1px solid var(--rule); border-radius:6px; padding:3px 8px; letter-spacing:-.01em; white-space:nowrap; text-decoration:none;}
.code-pill:hover{border-color:var(--gold); background:var(--leaf-2);}

/* ============ forms ============ */
.field{margin-bottom:16px;}
.field label{display:block; font-size:.8125rem; font-weight:600; color:var(--ink-2); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; padding:8px 11px; border:1px solid var(--rule-2); border-radius:9px;
  font-family:var(--f-body); font-size:.875rem; background:var(--leaf); color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select{min-height:38px;}
.field textarea{min-height:76px; line-height:1.5;}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-3); opacity:.85;}
.field input:hover, .field select:hover, .field textarea:hover{border-color:var(--ink-3);}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--gold-tint);}
.field input:disabled, .field select:disabled{background:var(--leaf-3); color:var(--ink-3); cursor:not-allowed;}
.field select, .search-bar select, select.select{appearance:none; padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b98bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; background-size:16px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field-row-3{display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px;}
@media (max-width:640px){.field-row, .field-row-3{grid-template-columns:1fr;}}

.error-box, .alert-danger{background:var(--bad-bg); color:var(--bad); padding:11px 14px; border:1px solid color-mix(in srgb, var(--bad) 30%, transparent); border-radius:10px; font-size:.8125rem; font-weight:500; margin-bottom:18px;}
.success-box, .alert-success{background:var(--ok-bg); color:var(--ok); padding:11px 14px; border:1px solid color-mix(in srgb, var(--ok) 30%, transparent); border-radius:10px; font-size:.8125rem; font-weight:500; margin-bottom:18px;}

.checklist{display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; border:1px solid var(--rule-2); border-radius:10px; padding:12px;}
.checklist-item{display:flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:400; color:var(--ink); margin:0;}
.checklist-item input{width:auto;}
@media (max-width:480px){.checklist{grid-template-columns:1fr;}}

/* ============ line items editor ============ */
table.line-items{width:100%; border-collapse:collapse; margin-bottom:14px;}
table.line-items th{text-align:left; font:600 .6875rem/1 var(--f-body); text-transform:uppercase; letter-spacing:.065em; color:var(--ink-3); padding:0 8px 8px;}
table.line-items td{padding:4px 8px 4px 0; vertical-align:top;}
table.line-items input, table.line-items select{
  width:100%; padding:7px 10px; border:1px solid var(--rule-2); border-radius:9px;
  font-family:var(--f-body); font-size:.8125rem; background:var(--leaf); color:var(--ink); box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease;
}
table.line-items input:focus, table.line-items select:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--gold-tint);}
table.line-items .amt-cell{white-space:nowrap; padding-top:10px; font-family:var(--f-mono); font-size:.8125rem; font-variant-numeric:tabular-nums; text-align:right;}
table.line-items .rm-cell{padding-top:6px; text-align:center;}
.rm-btn{background:none; border:none; color:var(--bad); cursor:pointer; font-size:1rem;}

.totals-box{max-width:340px; margin-left:auto;}
.totals-box .row{display:flex; justify-content:space-between; padding:7px 0; font-size:.875rem; color:var(--ink-2); font-variant-numeric:tabular-nums;}
.totals-box .row.grand{border-top:4px double var(--ink); margin-top:6px; padding-top:12px; font-weight:700; font-size:1.0625rem; color:var(--ink);}
@media (max-width:640px){ .totals-box{max-width:100%; width:100%; margin:16px 0 0 0;} }

/* ============ detail layouts ============ */
.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:760px){
  .detail-grid{grid-template-columns:1fr;}
  .kv-row{flex-direction:column; gap:2px; padding:8px 0; border-bottom:1px solid var(--rule);}
  .kv-row .k{width:100%; font-size:.78rem;}
}
.detail-grid > .panel + .panel,
.kpi-grid > .panel,
.kpi-grid > .panel + .panel,
[style*="grid"] > .panel,
[style*="grid"] > .panel + .panel{margin-top:0 !important;}
.kv-row{display:flex; padding:6px 0; font-size:.875rem;}
.kv-row .k{width:130px; color:var(--ink-3);}
.kv-row .v{color:var(--ink); font-weight:600;}

.form-container, .settings-container{max-width:980px; margin:0 auto; width:100%;}
.form-container-wide{max-width:1080px; margin:0 auto; width:100%;}
.form-container-md{max-width:860px; margin:0 auto; width:100%;}
.form-container-sm{max-width:680px; margin:0 auto; width:100%;}

.search-bar{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.search-bar input, .search-bar select{min-height:36px; padding:7px 13px; border:1px solid var(--rule-2); border-radius:9px; font-family:var(--f-body); font-size:.8125rem; background-color:var(--leaf); color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease;}
.search-bar input:focus, .search-bar select:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--gold-tint);}
@media (max-width:640px){
  .search-bar{flex-direction:column !important; align-items:stretch !important; gap:8px;}
  .search-bar input:not([type="checkbox"]):not([type="radio"]), .search-bar select, .search-bar button, .search-bar .btn{width:100% !important; box-sizing:border-box;}
  .search-bar input[type="checkbox"], .search-bar input[type="radio"]{width:auto !important; flex-shrink:0;}
  .search-bar label{width:100%; display:flex; align-items:center; gap:8px; cursor:pointer;}
}

/* ============ searchable select (Tom Select) ============ */
/* !important is needed throughout this block: Tom Select's own default theme ships several internal state
   selectors (e.g. .ts-wrapper.single .ts-control) that are MORE specific than a plain override. */
.ts-wrapper{font-family:var(--f-body) !important; font-size:.8125rem !important;}
.ts-control, .ts-control input, .ts-dropdown{font-family:var(--f-body) !important; font-size:.8125rem !important; color:var(--ink) !important;}
.ts-wrapper .ts-control{border:1px solid var(--rule-2) !important; border-radius:9px !important; padding:8px 10px !important; background:var(--leaf) !important; box-shadow:none !important; min-height:auto !important;}
.ts-wrapper.single .ts-control{padding-right:24px !important;}
.ts-wrapper.focus .ts-control{outline:none; border-color:var(--ink) !important; box-shadow:0 0 0 3px var(--gold-tint) !important;}
.ts-dropdown{border:1px solid var(--rule-2) !important; border-radius:10px !important; box-shadow:var(--shadow-pop); margin-top:4px; overflow:hidden; background:var(--leaf) !important;}
.ts-dropdown .ts-dropdown-content{max-height:260px;}
.ts-dropdown .option{padding:9px 12px;}
.ts-dropdown .option.active{background:var(--gold-tint); color:var(--ink);}
.ts-dropdown .no-results{padding:9px 12px; color:var(--ink-3);}

/* ============ attendance responsive ============ */
.attendance-kpi-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:20px;}
.attendance-toolbar{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;}
@media (max-width:900px){ .attendance-kpi-grid{grid-template-columns:repeat(3,1fr); gap:10px;} }
@media (max-width:600px){
  .attendance-kpi-grid{grid-template-columns:repeat(2,1fr); gap:8px;}
  .attendance-toolbar{flex-direction:column !important; align-items:stretch !important; gap:10px !important;}
  .attendance-toolbar > div{flex-direction:column !important; align-items:stretch !important; width:100% !important; gap:8px !important;}
  .attendance-toolbar input, .attendance-toolbar select, .attendance-toolbar button, .attendance-toolbar .btn{width:100% !important; box-sizing:border-box;}
}

/* ============ sign-in (tenant, staff, platform, CA) ============ */
.auth{flex:1; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); min-height:100vh; width:100%;}
.auth-brand{position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:36px; padding:44px 56px; background:#0a1230; color:#eef2ff;}
.auth-brand::after{content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(to bottom, transparent 0 39px, rgba(190,204,240,.055) 39px 40px);}
.auth-brand > *{position:relative; z-index:1;}
.brand-lock{display:flex; align-items:center; gap:12px;}
.brand-lock b{font:650 1.0625rem/1.2 var(--f-display); letter-spacing:-.01em; color:#fff;}
.brand-lock small{display:block; color:#8a97bd; font-size:.8125rem; font-weight:400;}
.brand-lock img{max-height:40px; max-width:150px; object-fit:contain; background:#121d45; border:1px solid rgba(212,175,55,.45); border-radius:9px; padding:4px 7px;}
.auth-brand .hero{max-width:15ch; font:700 clamp(2rem,3.2vw,2.9rem)/1.06 var(--f-display); letter-spacing:-.026em; color:#fff;}
.auth-brand .hero span{color:#e9cd75;}
.auth-brand .lede{max-width:38ch; margin-top:14px; color:#b4bfdc; font-size:1rem; line-height:1.6;}
.sheet{width:min(480px,100%); margin-left:4%; border:1px solid rgba(190,204,240,.16); border-radius:14px; background:#0e1838; box-shadow:0 40px 60px -36px rgba(0,0,0,.9);}
.sheet-head{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid rgba(190,204,240,.12); color:#b4bfdc; font-size:.8125rem;}
.sheet-head b{color:#fff; font-weight:600;}
.sheet table{width:100%; border-collapse:collapse;}
.sheet th{height:32px; padding:0 16px; text-align:left; color:#8a97bd; font:600 .6875rem/1 var(--f-body); letter-spacing:.065em; text-transform:uppercase;}
.sheet th.num{text-align:right;}
.sheet td{height:38px; padding:0 16px; border-top:1px solid rgba(190,204,240,.09); color:#dbe3fb;}
.sheet td.num{text-align:right;}
.sheet td:first-child{box-shadow:inset -1px 0 0 rgba(212,175,55,.55);}
.sheet tfoot td{border-top:4px double #eef2ff; font-weight:700; color:#fff;}
.sheet .cr-ind{color:#9db4ff;}
.sheet .dr-ind{color:#e9cd75;}
.sheet-foot{display:flex; align-items:center; gap:9px; padding:12px 16px; border-top:1px solid rgba(190,204,240,.12); color:#46d28b; font-weight:600; font-size:.8125rem;}
.sheet-foot .lamp{width:8px; height:8px; border-radius:50%; background:#46d28b; box-shadow:0 2px 7px -2px #46d28b;}
.sheet-foot em{margin-left:auto; font-style:normal; color:#8a97bd; font-weight:500;}
.auth-panel{display:grid; place-items:center; padding:40px 32px; position:relative;}
.auth-form{width:min(400px,100%);}
.tenant{display:flex; align-items:center; gap:12px; margin-bottom:28px;}
.tenant .mark{width:44px; height:44px; border-radius:12px; font-size:1rem; background:#0a1230;}
.tenant img{max-height:44px; max-width:150px; object-fit:contain; background:#0a1230; border:1px solid rgba(212,175,55,.45); border-radius:10px; padding:5px 8px;}
.tenant b{font-weight:650;}
.auth-form h1{font:700 1.75rem/1.15 var(--f-display); letter-spacing:-.022em;}
.auth-form .sub{margin:6px 0 24px; color:var(--ink-3);}
.with-icon{position:relative;}
.with-icon > .i{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none;}
.with-icon > input{padding-left:36px !important;}
.with-icon > .trail{position:absolute; right:4px; top:4px; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:none; border:0; cursor:pointer; color:var(--ink-2);}
.with-icon > .trail:hover{background:var(--leaf-3);}
.btn-block{width:100%; min-height:42px; margin-top:6px;}
.demo{margin-top:24px; padding-top:18px; border-top:1px solid var(--rule);}
.demo p{margin-bottom:10px; font-size:.8125rem; color:var(--ink-3);}
.demo p code{padding:2px 6px; border-radius:5px; background:var(--leaf-3); color:var(--ink); font:500 .75rem var(--f-mono);}
.demo-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.demo-row button{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--rule-2); border-radius:10px; background:var(--leaf); text-align:left; cursor:pointer; transition:border-color .15s ease, background .15s ease;}
.demo-row button:hover{border-color:var(--ink-3);}
.demo-row button.is-picked{border-color:var(--ink); background:var(--leaf-2);}
.demo-row b{display:block; font-weight:600;}
.demo-row small{color:var(--ink-3); font:500 .75rem var(--f-mono);}
.auth-links{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; margin-top:18px; font-size:.8125rem;}
.auth-links a{color:var(--gold-ink); font-weight:600; white-space:nowrap;}
.auth-links a:hover{text-decoration:underline; text-underline-offset:3px;}
.powered{margin-top:32px; color:var(--ink-3); font-size:.75rem;}
.qrbox{display:grid; grid-template-columns:132px minmax(0,1fr); gap:16px; align-items:center; padding:14px; border:1px solid var(--rule-2); border-radius:12px; background:var(--leaf);}
.qrbox .qr{display:grid; place-items:center; width:132px; height:132px; border-radius:10px; background:#fff; border:1px solid var(--rule-2);}
.qrbox .qr img{width:112px; height:112px; display:block;}
.qrbox .lead{display:block; margin-bottom:4px;}
.qrbox .muted{color:var(--ink-3);}
.or{display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--ink-3); font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--rule);}
.digits{display:grid; grid-template-columns:repeat(6,1fr); gap:8px;}
.digits input{width:100%; height:52px; text-align:center; border:1px solid var(--rule-2); border-radius:10px; background:var(--leaf); color:var(--ink); font:600 1.375rem/1 var(--f-mono); transition:border-color .15s ease, box-shadow .15s ease;}
.digits input:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--gold-tint);}
.notice{display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border-radius:10px; border:1px solid color-mix(in srgb, var(--info) 28%, transparent); background:var(--info-bg); color:var(--info); font-size:.8125rem; margin-bottom:16px;}
@media (max-width:960px){
  .auth{grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr;}
  .auth-brand{padding:18px 20px; gap:0;}
  .auth-brand > div:not(.brand-lock), .auth-brand .sheet{display:none;}
  .auth-panel{align-items:start; padding:28px 20px 40px;}
}
@media (max-width:640px){ .qrbox{grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center;} }

/* ============ shared page components (Phase 2): reuse these before writing inline styles ============ */
.panel-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.panel-head h2,.panel-head h3{font:650 1rem/1.3 var(--f-body); letter-spacing:-.01em;}
.panel-head .sub{margin-top:2px; font-size:.8125rem; line-height:1.45; color:var(--ink-3);}
.hint{margin-top:4px; font-size:.8125rem; line-height:1.45; color:var(--ink-3);}
.link-more{font-size:.8125rem; font-weight:600; color:var(--gold-ink); white-space:nowrap;}
.link-more:hover{text-decoration:underline; text-underline-offset:3px;}
.panel-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--rule);}
.note-ok{display:flex; align-items:center; gap:8px; padding:14px 16px; border:1px solid color-mix(in srgb, var(--ok) 28%, transparent); background:var(--ok-bg); color:var(--ok); border-radius:10px; font-size:.875rem; font-weight:500;}
.note-empty{padding:22px 8px; text-align:center; color:var(--ink-3); font-size:.875rem;}
.tone-bad{color:var(--bad);} .tone-ok{color:var(--ok);} .tone-warn{color:var(--warn);} .tone-mute{color:var(--ink-3);} .tone-gold{color:var(--gold-ink);}
.quick{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.quick .btn{gap:8px;}
.quick .kbd{margin-left:2px;}
.rows{list-style:none;}
.row-item{display:block; padding:12px 0; border-bottom:1px solid var(--rule);}
.row-item:first-child{padding-top:0;}
.row-item:last-child{border-bottom:0; padding-bottom:0;}
a.row-item{transition:background .12s ease;}
a.row-item:hover{background:var(--leaf-2);}
.row-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.row-name{font-weight:600; font-size:.875rem; color:var(--ink);}
.row-sub{margin-top:2px; font-size:.75rem; color:var(--ink-3);}
.row-fig{font:600 .875rem/1.3 var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:-.01em;}
.row-meta{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; font-size:.78rem; color:var(--ink-3);}
.row-actions{display:flex; gap:6px; flex-wrap:wrap;}
.btn-xs{min-height:26px; padding:3px 9px; font-size:.75rem;}
.meter{height:6px; border-radius:3px; background:var(--leaf-3); overflow:hidden;}
.meter > i{display:block; height:100%; border-radius:3px; background:var(--gold);}
.meter.ink > i{background:var(--ink);}
.bar-row{margin-bottom:12px;}
.bar-row:last-child{margin-bottom:0;}
.bar-row .top{display:flex; justify-content:space-between; gap:10px; margin-bottom:5px; font-size:.84rem;}
.bar-row .top a{font-weight:500;}
.legend{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.8125rem; color:var(--ink-2);}
.legend i{display:inline-block; width:12px; height:12px; margin-right:6px; border-radius:3px; vertical-align:-1px;}
.legend i.dash{height:0; border-top:2px dashed var(--ink-3); border-radius:0; width:16px; vertical-align:3px;}
.mini-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:12px 20px; margin-top:16px; padding:14px 16px; background:var(--leaf-2); border:1px solid var(--rule); border-radius:10px;}
.mini-stats .k{font:600 .6875rem/1.2 var(--f-body); letter-spacing:.065em; text-transform:uppercase; color:var(--ink-3);}
.mini-stats .v{margin-top:4px; font:600 1rem/1.3 var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.subnav{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px;}
.subnav.ruled{padding-bottom:12px; border-bottom:1px solid var(--rule);}
.nw{white-space:nowrap;}
.only-sm{display:none;}
@media (max-width:640px){
  .subnav{flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
  .subnav > .btn,.subnav > a{flex:none;}
  .hide-sm{display:none !important;}
  .only-sm{display:inline-flex;}
}
.dot{display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:var(--mute); vertical-align:1px;}
.dot.ok{background:var(--ok);}
.dot.warn{background:var(--warn);}
.dot.bad{background:var(--bad);}
.side{font:600 .75rem/1 var(--f-mono); letter-spacing:.04em;}
.side.dr{color:var(--gold-ink);}
.side.cr{color:var(--credit);}
table.data td small{display:block; margin-top:2px; font-size:.75rem; font-weight:400; color:var(--ink-3);}
table.data tfoot td small{font-weight:400;}
.books{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; margin-bottom:20px; align-items:start;}
.books .panel + .panel{margin-top:0;}
.books table.data{box-shadow:none; border-radius:10px;}
.cols{display:grid; grid-template-columns:minmax(0, 1.8fr) minmax(0, 1.2fr); gap:20px; align-items:start;}
.cols > div{display:flex; flex-direction:column; gap:20px; min-width:0;}
.cols .panel,.cols .panel + .panel{margin-top:0;}
.cols .detail-grid{gap:20px;}
@media (max-width:1100px){ .cols{grid-template-columns:minmax(0, 1fr);} }
@media (max-width:1100px){ .books{grid-template-columns:minmax(0, 1fr);} }
/* the dashboard statements wrap their captions on phones (the generic phone rule keeps every cell on one line); amounts stay whole */
@media (max-width:900px){ .books table.data th,.books table.data td{white-space:normal;} .books table.data td.num{white-space:nowrap;} }

/* ============ dashboard: "the balance" ============
   The hero is a page of the ledger on the navy rail colour in both themes (like the POS header), so its white and gold are deliberate literals.
   The scale tilts toward whichever side is heavier (what you hold against what you owe); the swing plays once and is off for reduced motion. */
.dk-hero{position:relative; display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:20px 36px; align-items:center; margin-bottom:20px; padding:28px 32px 28px 52px; border-radius:16px; border:1px solid var(--rail-line); background-color:var(--rail); background-image:repeating-linear-gradient(to bottom, transparent 0 31px, rgba(190,204,240,.06) 31px 32px); color:#fff; box-shadow:var(--shadow-1); overflow:hidden;}
.dk-hero::before{content:''; position:absolute; top:0; bottom:0; left:28px; width:1px; background:var(--margin);}
.dk-hero-main{min-width:0;}
.dk-hero h1{font:650 1.5rem/1.15 var(--f-display); letter-spacing:-.022em; color:#fff;}
.dk-sub{margin-top:4px; font-size:.875rem; color:rgba(255,255,255,.68);}
.dk-sub b{color:#fff; font-weight:600;}
.dk-lbl{margin-top:20px; font:600 .6875rem/1.2 var(--f-body); letter-spacing:.065em; text-transform:uppercase; color:rgba(255,255,255,.62);}
.dk-fig{margin-top:6px; font:500 clamp(2rem, 3.4vw, 2.9rem)/1.05 var(--f-mono); letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:#fff;}
.dk-fig .cur{color:var(--gold); font-weight:400; margin-right:.05em;}
.dk-fig .dec{font-size:.5em; letter-spacing:0; color:rgba(255,255,255,.5);}
.dk-fig.neg{color:#ff9d96;}
.dk-stamps{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
.dk-rows{margin-top:16px; border-top:1px solid rgba(255,255,255,.14);}
.dk-row{display:grid; grid-template-columns:minmax(0, 1fr) 20px minmax(9rem, auto); gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.1); color:#fff;}
.dk-row:hover{background:rgba(255,255,255,.04);}
.dk-row .nm{min-width:0; font-size:.875rem; font-weight:600;}
.dk-row .nm small{display:block; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.75rem; font-weight:400; color:rgba(255,255,255,.58);}
.dk-row .sd{font:600 .75rem/1 var(--f-mono); letter-spacing:.04em; color:rgba(255,255,255,.5);}
.dk-row .amt{font:500 .9375rem/1 var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; text-align:right; white-space:nowrap;}
.dk-row .amt.neg{color:#ff9d96;}
.dk-note{margin-top:12px; font-size:.8125rem; color:rgba(255,255,255,.62);}
.dk-note a{color:var(--gold-hi); font-weight:600; white-space:nowrap;}
.dk-hero .quick{grid-column:1 / -1; margin:0; padding-top:18px; border-top:1px solid rgba(255,255,255,.14);}
.dk-hero .btn-ghost{background:transparent; border-color:rgba(255,255,255,.3); color:#fff;}
.dk-hero .btn-ghost:hover:not(:disabled){background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); color:#fff;}
.dk-hero .kbd{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.85);}
.dk-hero .btn-gold .kbd{background:rgba(11,18,48,.12); border-color:rgba(11,18,48,.22); color:#0b1230;}

.dk-scale{min-width:0; color:#fff;}
.dk-scale svg{display:block; width:100%; max-width:400px; height:auto; margin:0 auto; overflow:visible;}
.dk-scale .post, .dk-scale .foot{fill:rgba(255,255,255,.28);}
.dk-scale .beam{fill:rgba(255,255,255,.92);}
.dk-scale .pivot{fill:var(--gold); stroke:var(--rail); stroke-width:3;}
.dk-scale .cap{fill:var(--gold);}
.dk-scale .str{stroke:rgba(255,255,255,.4); stroke-width:1;}
.dk-scale .bowl{fill:rgba(255,255,255,.1); stroke:rgba(255,255,255,.6); stroke-width:1.5; stroke-linejoin:round;}
.dk-scale .blk.cash{fill:var(--gold);}
.dk-scale .blk.recv{fill:rgba(255,255,255,.9);}
.dk-scale .blk.owed{fill:rgba(190,204,240,.38); stroke:rgba(255,255,255,.75); stroke-width:1;}
.dk-scale .blk.over{fill:#ff9d96;}
.dk-beam{transform-origin:180px 56px; transform:rotate(var(--tilt));}
.dk-pan{transform:rotate(calc(var(--tilt) * -1));}
@media (prefers-reduced-motion:no-preference){
  .dk-beam{animation:dk-swing 1.3s cubic-bezier(.34, 1.56, .64, 1) .1s both;}
  .dk-pan{animation:dk-level 1.3s cubic-bezier(.34, 1.56, .64, 1) .1s both;}
  .dk-track .fill{animation:dk-grow .9s var(--ease) both;}
}
@keyframes dk-swing{from{transform:rotate(0deg);} to{transform:rotate(var(--tilt));}}
@keyframes dk-level{from{transform:rotate(0deg);} to{transform:rotate(calc(var(--tilt) * -1));}}
@keyframes dk-grow{from{transform:scaleX(0);} to{transform:scaleX(1);}}
.dk-caps{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px; text-align:center;}
.dk-caps .k{font:600 .6875rem/1.2 var(--f-body); letter-spacing:.065em; text-transform:uppercase; color:rgba(255,255,255,.62);}
.dk-caps .v{margin-top:4px; font:500 1.0625rem/1.2 var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; white-space:nowrap;}
.dk-caps .key{display:flex; flex-wrap:wrap; justify-content:center; gap:2px 12px; margin-top:4px; font-size:.75rem; color:rgba(255,255,255,.58);}
.sw{display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:2px;}
.sw.cash{background:var(--gold);}
.sw.recv{background:rgba(255,255,255,.9);}
.sw.owed{background:rgba(190, 204, 240, .38); box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);}
.sw.over{background:#ff9d96;}
@media (max-width:1100px){
  .dk-hero{grid-template-columns:minmax(0, 1fr);}
  .dk-scale{width:100%; max-width:420px; margin:0 auto;}
}
@media (max-width:640px){
  .dk-hero{padding:22px 16px 22px 34px;}
  .dk-hero::before{left:16px;}
  .dk-hero .quick{display:grid; grid-template-columns:1fr 1fr;}
  .dk-hero .quick .btn{justify-content:center; white-space:nowrap;}
  .dk-hero .quick .kbd{display:none;}
}
@media (max-width:380px){
  .dk-caps{grid-template-columns:1fr;}
  .dk-hero .quick{grid-template-columns:1fr;}
}
/* the month statement wraps its captions on phones (the generic phone rule keeps every cell on one line); amounts stay whole */
@media (max-width:900px){ .dk-ledger table.data th, .dk-ledger table.data td{white-space:normal;} .dk-ledger table.data td.num{white-space:nowrap;} }

/* the month: a line from day 1 to the last day with today and the filing dates on it */
.dk-month{margin-bottom:20px;}
.dk-track{position:relative; height:76px; margin:6px 10px 2px;}
.dk-track .line{position:absolute; left:0; right:0; top:34px; height:8px; border-radius:4px; background:var(--leaf-3); overflow:hidden;}
.dk-track .fill{display:block; height:100%; border-radius:4px; background:var(--gold); transform-origin:left center;}
.dk-track .now{position:absolute; top:0; z-index:1; display:flex; flex-direction:column; align-items:center; transform:translateX(-50%);}
.dk-track .now b{padding:2px 8px; border-radius:5px; background:var(--ink); color:var(--leaf); font:650 .6875rem/1.3 var(--f-body); letter-spacing:.06em; text-transform:uppercase;}
.dk-track .now::after{content:''; width:2px; height:26px; background:var(--ink);}
.dk-track .tick{position:absolute; top:30px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; transform:translateX(-50%);}
.dk-track .tick i{box-sizing:border-box; width:16px; height:16px; border:2px solid var(--ink-3); border-radius:50%; background:var(--leaf);}
.dk-track .tick em{font:600 .75rem/1 var(--f-mono); font-style:normal; color:var(--ink-2);}
.dk-track .tick.st-done i{background:var(--ink-3);}
.dk-track .tick.st-warn i{border-color:var(--warn); background:var(--warn-bg);}
.dk-track .tick.st-bad i{border-color:var(--bad); background:var(--bad-bg);}
.dk-track .end{position:absolute; top:52px; font:500 .6875rem/1 var(--f-mono); color:var(--ink-3);}
.dk-track .end.s{left:0;}
.dk-track .end.e{right:0;}
.dk-days{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:0 20px; margin:6px 0 4px; padding:0; list-style:none;}
.dk-days li{display:grid; grid-template-columns:30px minmax(0, 1fr); gap:1px 10px; align-items:center; padding:9px 0; border-top:1px solid var(--rule);}
.dk-days .d{grid-row:1 / span 2; padding:4px 0; border:1px solid var(--rule-2); border-radius:5px; font:600 .8125rem/1 var(--f-mono); text-align:center; color:var(--ink-2);}
.dk-days a, .dk-days .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8125rem; font-weight:600;}
.dk-days .t{font-size:.75rem; color:var(--ink-3);}
.dk-days .st-bad .t{color:var(--bad); font-weight:600;}
.dk-days .st-warn .t{color:var(--warn); font-weight:600;}
.dk-days .st-done{opacity:.75;}

/* momentum: sales above the line, outgo below it, the net as a marker */
.dk-chart{overflow-x:auto;}
.dk-chart svg{display:block; width:100%; min-width:600px; height:auto;}
.dk-chart .g{stroke:var(--rule); stroke-dasharray:3 3;}
.dk-chart .g0{stroke:var(--rule-2); stroke-width:1.5;}
.dk-chart .ax{font:500 10px var(--f-mono); fill:var(--ink-3);}
.dk-chart .sales{fill:var(--gold); fill-opacity:.6;}
.dk-chart .outgo{fill:var(--ink-3); fill-opacity:.5;}
.dk-chart .cur .sales{fill-opacity:1;}
.dk-chart .cur .outgo{fill-opacity:.85;}
.dk-chart .col:hover .sales{fill-opacity:1;}
.dk-chart .col:hover .outgo{fill-opacity:.85;}
.dk-chart .v{font:500 10px var(--f-mono); fill:var(--ink-2);}
.dk-chart .v.dim{fill:var(--ink-3);}
.dk-chart .mo{font:650 11px var(--f-body); fill:var(--ink);}
.dk-chart .mo-sub{font:500 9.5px var(--f-body); fill:var(--ink-3);}
.dk-chart .net{fill:var(--ink); stroke:var(--leaf); stroke-width:2; paint-order:stroke;}
.dk-chart .net.neg{fill:var(--bad);}
.legend i.dia{width:9px; height:9px; margin:0 8px 0 3px; border-radius:1px; background:var(--ink); transform:rotate(45deg); vertical-align:0;}

/* on your desk: one list, most urgent first */
.dk-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px;}
.dk-chip{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid var(--rule-2); border-radius:999px; background:var(--leaf); color:var(--ink-2); font:600 .75rem/1.2 var(--f-body); cursor:pointer; transition:background .12s ease, border-color .12s ease, color .12s ease;}
.dk-chip b{font:600 .6875rem/1 var(--f-mono); color:var(--ink-3);}
.dk-chip:hover{border-color:var(--ink-3);}
.dk-chip[aria-pressed="true"]{border-color:var(--ink); background:var(--ink); color:var(--leaf);}
.dk-chip[aria-pressed="true"] b{color:var(--leaf); opacity:.8;}
.dk-list{margin:0; padding:0; list-style:none;}
.dk-item{display:grid; grid-template-columns:34px minmax(0, 1fr) auto; gap:2px 12px; padding:13px 0; border-bottom:1px solid var(--rule);}
.dk-item[hidden], .dk-more[hidden]{display:none;}
.dk-ico{grid-row:1 / span 2; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; background:var(--leaf-3); color:var(--ink-2);}
.dk-ico.r0{background:var(--bad-bg); color:var(--bad);}
.dk-ico.r1{background:var(--warn-bg); color:var(--warn);}
.dk-item .body{min-width:0;}
.dk-item .ttl{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.875rem; font-weight:600;}
.dk-item .sub{margin-top:1px; font-size:.75rem; line-height:1.4; color:var(--ink-3);}
.dk-item .end{display:flex; flex-direction:column; align-items:flex-end; gap:4px;}
.dk-item .acts{grid-column:2 / 4; display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;}
.dk-item .acts:not(:has(*)){display:none;}
.dk-more{margin-top:10px;}
.dk-feed .panel-foot{flex-wrap:wrap; gap:6px 16px;}

/* ============ platform console top bar ============ */
.pbar{position:sticky; top:0; z-index:100; display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px; padding:10px 28px; background:var(--rail); color:#fff; box-shadow:inset 0 -1px 0 var(--margin);}
.pbar-brand{display:flex; align-items:center; gap:10px; color:var(--gold-hi); font:700 1rem/1 var(--f-display); letter-spacing:-.01em;}
.pbar-brand img{height:26px;}
.pbar-nav{display:flex; align-items:center; flex-wrap:wrap; gap:2px; margin-left:6px;}
.pbar-nav a{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; color:var(--rail-text); font-size:.8125rem; font-weight:600; white-space:nowrap;}
.pbar-nav a:hover{background:var(--rail-hi); color:#fff;}
.pbar-nav a.is-active{background:var(--rail-hi); color:#fff; box-shadow:inset 0 -2px 0 var(--gold);}
.pbar-count{min-width:20px; padding:1px 6px; border-radius:10px; background:var(--bad-solid); color:#fff; font:700 .6875rem/1.4 var(--f-body); text-align:center;}
.pbar-count.warn{background:var(--warn-solid);}
.pbar-right{display:flex; align-items:center; gap:14px; margin-left:auto;}
.pbar-env{padding:3px 10px; border:1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius:6px; background:var(--gold-tint); color:var(--gold-hi); font:600 .6875rem/1.3 var(--f-mono); letter-spacing:.04em; text-transform:uppercase;}
.pbar-user{display:inline-flex; align-items:center; gap:6px; color:var(--rail-text); font-size:.8125rem;}
.pbar .btn{background:var(--rail-hi); color:#fff; border-color:var(--rail-line);}
.pbar .btn:hover{background:rgba(190,204,240,.18);}
@media (max-width:900px){
  .pbar{padding:10px 16px;}
  .pbar-nav{order:3; width:100%; margin-left:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin;}
  .pbar-env{display:none;}
}

/* ============ dark theme: opt-in from the account menu (stored in this browser only); light stays the default and print always stays light ============ */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --paper:#0b1122; --leaf:#121a31; --leaf-2:#18223f; --leaf-3:#1f2b4d;
    --rail:#070b18; --rail-hi:rgba(190,204,240,.1); --rail-line:rgba(190,204,240,.12);
    --ink:#e8ecf8; --ink-2:#bdc7e4; --ink-3:#97a3c8;
    --rule:rgba(190,204,240,.12); --rule-2:rgba(190,204,240,.24);
    --gold-ink:#e6c565; --gold-tint:rgba(212,175,55,.2); --margin:rgba(212,175,55,.5); --credit:#93abff;
    --ok:#63d391;   --ok-bg:rgba(99,211,145,.14);
    --warn:#f2b45a; --warn-bg:rgba(242,180,90,.14);
    --bad:#ff8f86;  --bad-bg:rgba(255,143,134,.15);
    --info:#93abff; --info-bg:rgba(147,171,255,.15);
    --mute:#aab4d4; --mute-bg:rgba(170,180,212,.13);
    --ok-solid:#1b7a46; --warn-solid:#a85f0a; --bad-solid:#c8403a; --info-solid:#4663d4;
    --shadow-1:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -16px rgba(0,0,0,.7);
    --shadow-pop:0 18px 44px -14px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.4);
    --line:rgba(190,204,240,.16); --gold-deep:var(--gold-ink);
  }
  :root[data-theme="dark"] body{background:var(--paper); color:var(--ink);}
  :root[data-theme="dark"] .btn-navy{background:var(--leaf-3); border-color:var(--rule-2); color:var(--ink);}
  :root[data-theme="dark"] .btn-navy:hover:not(:disabled){background:var(--leaf-2);}
  :root[data-theme="dark"] .strip{background:#2b2410; color:#f0d68a;}
  :root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:var(--ink-3);}
  :root[data-theme="dark"] img.invert-dark{filter:invert(1) hue-rotate(180deg);}
}
.menu-btn .switch{margin-left:auto; position:relative; width:30px; height:18px; border-radius:9px; background:var(--rail-line); transition:background .15s ease; flex:none;}
.menu-btn .switch::after{content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .15s ease;}
.menu-btn[aria-checked="true"] .switch{background:var(--gold);}
.menu-btn[aria-checked="true"] .switch::after{left:14px;}
/* theme toggle for dark bars that have no account menu (web POS header, platform console, CA portal) */
.theme-btn{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border-radius:8px; border:1px solid var(--rail-line); background:var(--rail-hi); color:var(--rail-text); cursor:pointer; flex:none; transition:color .15s ease, border-color .15s ease, background .15s ease;}
.theme-btn:hover{color:#fff; border-color:var(--gold); background:rgba(190,204,240,.18);}
.theme-btn[aria-pressed="true"]{color:var(--gold); border-color:var(--margin);}
.theme-btn .i{width:16px; height:16px;}

/* ============ print: never print the app chrome ============ */
@media print{
  .rail,.topbar,.strip,.mobile-only,.no-print{display:none !important;}
  .app{display:block;}
  .main{max-width:none; padding:0;}
  body{background:#fff;}
  .panel,.card,table.data,.stat-tile{box-shadow:none;}
}

/* ============ touch & viewport protection ============ */
@media (max-width:768px){
  html, body{max-width:100%; overflow-x:hidden;}
  input, select, textarea, button{touch-action:manipulation;}
}

/* Field-level changes inside an audit-log row (views/partials/audit-changes.ejs) */
.audit-diff { margin-top: 6px; font-size: 0.8rem; }
.audit-diff > summary { cursor: pointer; color: var(--gold-ink); font-weight: 600; width: fit-content; }
.audit-diff-table { border-collapse: collapse; margin-top: 6px; width: 100%; max-width: 640px; background: var(--leaf-2); border: 1px solid var(--rule); }
.audit-diff-table th, .audit-diff-table td { padding: 4px 10px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; font-weight: 400; overflow-wrap: anywhere; }
.audit-diff-table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); font-weight: 600; }
.audit-diff-table tbody th { font-weight: 600; color: var(--ink); width: 28%; }
.audit-diff-table .chg-old { color: var(--bad); }
.audit-diff-table .chg-new { color: var(--ok); }
.audit-diff-table .chg-add { color: var(--ok); margin-right: 12px; }
.audit-diff-table .chg-rem { color: var(--bad); }

/* ---- AMC & Service (the Service pack): shared pieces for contracts, tickets, visits and My Visits ---- */
.head-actions{display:flex; gap:10px; flex-wrap:wrap;}
.amc-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:22px;}
.amc-kpis .stat-tile .sub{font-size:.75rem; color:var(--ink-3); margin-top:4px;}
.warn-note{background:var(--warn-bg); color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius:var(--r-1, 6px); padding:10px 14px; margin-bottom:16px; font-size:.875rem;}
.act-panel > summary{cursor:pointer; font-weight:600; color:var(--ink); list-style:none;}
.act-panel > summary::-webkit-details-marker{display:none;}
.act-panel > summary::before{content:"+"; display:inline-block; width:1.1em; font-weight:700; color:var(--gold-ink);}
.act-panel[open] > summary::before{content:"\2212";}
.inline-form{margin-top:12px;}
.row-edit{display:inline-block; text-align:left;}
.row-edit > summary{list-style:none; cursor:pointer; display:inline-flex;}
.row-edit > summary::-webkit-details-marker{display:none;}
.row-edit[open]{display:block; min-width:min(520px, 80vw);}
.renew-form{display:flex; align-items:center; gap:6px; margin-bottom:4px;}
.renew-form input{width:78px; min-height:30px; padding:2px 6px;}
.sr-only{position:absolute; top:0; left:0; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.sel-total{font:650 1.25rem/1.2 var(--f-mono); padding-top:6px;}
.check, .field label.check{display:flex; align-items:flex-start; gap:8px; font-weight:500; font-size:.875rem; margin-bottom:0; cursor:pointer;}
.detail-grid + .panel{margin-top:20px;}
.check input{margin-top:3px; width:18px; height:18px; flex:none;}
.inline-label{font-size:.8125rem; font-weight:600; color:var(--ink-2); align-self:center;}
.btn-lg{min-height:48px; padding:12px 22px; font-size:1rem;}
.strong{font-weight:700;}
.panel-tint{background:var(--leaf-2); border:1px solid var(--rule); border-radius:8px; padding:14px 14px 4px; margin-bottom:16px;}
.chk-list{list-style:none; margin:0; padding:0; border:1px solid var(--rule); border-radius:8px; overflow:hidden;}
.chk-list li{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--rule);}
.chk-list li:last-child{border-bottom:0;}
.chk-list input[type="text"]{min-height:34px;}
@media (max-width:640px){.chk-list li{grid-template-columns:1fr;}}
.sig-pad{border:1px dashed var(--rule-2); border-radius:8px; background:#fff; margin-bottom:8px; touch-action:none; line-height:0;}
.sig-pad canvas{width:100%; height:auto; display:block; touch-action:none; cursor:crosshair;}
.sig-saved{display:flex; align-items:center; gap:12px; margin-bottom:8px;}
.sig-saved img{max-height:64px; max-width:200px; background:#fff; border:1px solid var(--rule); border-radius:6px; padding:4px;}
.visit-cards{display:grid; gap:12px;}
.visit-card{display:block; background:var(--leaf); border:1px solid var(--rule); border-radius:10px; padding:14px 16px; color:var(--ink); text-decoration:none;}
.visit-card:hover{border-color:var(--gold); background:var(--leaf-2);}
.visit-card .top{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.visit-card .cust{font:650 1.1rem/1.25 var(--f-display); margin-top:6px;}
.visit-card .sub{color:var(--ink-3); font-size:.85rem; margin-top:2px;}
.visit-card .when{margin-top:8px; font-weight:600; font-size:.9rem;}

/* Report period picker (views/partials/period-picker.ejs, lib/periods.js): Month / Quarter / Half-year / Year / Custom, arrows, the current label. Tokens only, so dark mode follows. */
.pp{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:0 0 16px; padding:10px 12px; background:var(--leaf); border:1px solid var(--rule); border-radius:12px;}
.pp-kinds{display:inline-flex; gap:2px; padding:3px; background:var(--leaf-3); border-radius:10px; max-width:100%; overflow-x:auto;}
.pp-kind{padding:6px 13px; border-radius:8px; font-size:.8125rem; font-weight:600; color:var(--ink-2); text-decoration:none; white-space:nowrap;}
.pp-kind:hover{color:var(--ink); background:var(--leaf-2);}
.pp-kind.is-active{background:var(--leaf); color:var(--ink); box-shadow:0 0 0 1px var(--rule-2), inset 0 -2px 0 var(--gold);}
.pp-nav{display:flex; align-items:center; gap:8px; min-width:0;}
.pp-arrow{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none; border:1px solid var(--rule-2); border-radius:8px; background:var(--leaf); color:var(--ink); text-decoration:none;}
.pp-arrow:hover{border-color:var(--ink-3); background:var(--leaf-2);}
.pp-arrow.is-off{opacity:.35; pointer-events:none;}
.pp-prev svg{transform:scaleX(-1);}
.pp-now{display:flex; flex-direction:column; min-width:0; line-height:1.25;}
.pp-now strong{font:650 .95rem var(--f-display); letter-spacing:-.01em; white-space:nowrap;}
.pp-now span{font:500 .75rem var(--f-mono); color:var(--ink-3); white-space:nowrap;}
.pp-this{margin-left:4px; font-size:.78rem; font-weight:600; color:var(--gold-ink); text-decoration:none;}
.pp-this:hover{text-decoration:underline;}
.pp-custom{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;}
.pp-custom label{display:flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:600; color:var(--ink-2);}
.pp-custom input[type=date]{min-height:34px; padding:6px 10px; border:1px solid var(--rule-2); border-radius:9px; background:var(--leaf); color:var(--ink); font-family:var(--f-body); font-size:.8125rem;}
@media (max-width:640px){
  .pp{gap:10px 12px; padding:10px;}
  .pp-kinds{width:100%;}
  .pp-kind{flex:1; text-align:center; padding:6px 8px;}
  .pp-kinds-6{display:grid; grid-template-columns:repeat(3,1fr); overflow:visible;}   /* six choices do not fit one row on a phone: two rows of three */
  .pp-nav{width:100%;}
  .pp-now{flex:1; align-items:center; text-align:center;}
}
@media print{.pp{display:none;}}

/* "Show by" chips in the period picker and the breakdown table (lib/breakdown.js, views/partials/breakdown-table.ejs). Tokens only, so dark mode follows. */
.pp-by{display:flex; align-items:center; gap:8px; margin-left:auto;}
.pp-by-label{font:700 .7rem var(--f-body); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); white-space:nowrap;}
.pp-kinds-by .pp-kind, .pp-kinds-cmp .pp-kind{padding:5px 11px; font-size:.78rem;}
@media (max-width:640px){
  .pp-by{width:100%; flex-direction:column; align-items:flex-start; gap:4px; margin-left:0;}
  .pp-kinds-by, .pp-kinds-cmp{width:100%;}
  .pp-kinds-by .pp-kind, .pp-kinds-cmp .pp-kind{flex:1; padding:6px 4px; font-size:.75rem;}
  .pp-kinds-cmp .pp-kind{white-space:normal; line-height:1.2; text-align:center;}   /* "Same period last year" is long: two lines rather than a sideways scroll */
}
table.bd{min-width:100%;}
table.bd th, table.bd td{white-space:nowrap;}
table.bd thead th{vertical-align:bottom;}
table.bd thead th .bd-h{display:block;}
table.bd thead th small{display:block; margin-top:2px; font:500 .66rem var(--f-mono); color:var(--ink-3); text-transform:none; letter-spacing:0;}
table.bd tbody th[scope=row]{text-align:left; font-weight:500; white-space:normal; min-width:200px; max-width:320px; position:sticky; left:0; z-index:1; background:var(--leaf);}
table.bd td.bd-tot, table.bd th.bd-tot{border-left:2px solid var(--rule-2); font-weight:650;}
table.bd tr.bd-section th{background:var(--leaf-3); font:700 .7rem var(--f-body); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); text-align:left; position:static;}
table.bd tr.bd-subtotal th, table.bd tr.bd-subtotal td{font-weight:650; border-top:1px solid var(--rule-2);}
table.bd tr.bd-total th, table.bd tr.bd-total td{font-weight:700; border-top:2px solid var(--ink-3); background:var(--gold-tint);}
table.bd tr.bd-pct th, table.bd tr.bd-pct td{color:var(--ink-3); font-size:.8rem; font-weight:500;}
table.bd tr.bd-info th, table.bd tr.bd-info td{color:var(--ink-3);}
table.bd tr.bd-indent th[scope=row]{padding-left:28px;}
table.bd .bd-neg{color:var(--bad);}
.bd-notes{margin:10px 2px 0;}
.bd-notes p{margin:4px 0; font-size:.8rem; color:var(--ink-3);}
@media print{.pp-by{display:none;}}
/* a comparison's change columns carry a sign and stay neutral: a rise is good for sales and bad for costs, so the table does not colour it */
table.bd td.bd-chg{color:var(--ink-2); border-left:1px solid var(--rule);}
table.bd td.bd-chg:nth-of-type(3){border-left:2px solid var(--rule-2);}

/* Pager for the long lists (lib/paging.js, views/partials/pager.ejs) */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 4px 4px;font-size:.85rem;color:var(--text-soft)}
.pager-nav{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.pager-nums{display:inline-flex;align-items:center;gap:2px}
.pager-num{display:inline-flex;min-width:30px;height:30px;padding:0 8px;align-items:center;justify-content:center;border-radius:6px;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}
a.pager-num:hover{background:var(--gold-tint)}
.pager-num.is-current{background:var(--rail);color:#fff;font-weight:700}
.pager-gap{padding:0 4px;color:var(--ink-3)}
.pager-of{display:none}
.pager-size{display:inline-flex;align-items:center;gap:2px}
.pager .is-disabled{opacity:.45;pointer-events:none}
@media (max-width:640px){.pager-nums,.pager-size{display:none}.pager-of{display:inline}}