/* ============================================================
   QC99 Accounts — design system
   accounts.quickcart99.com

   Same house style as QC99 Daraz Hub: white sidebar, orange accent,
   14px card radius, one primary button per context.

   Two rules that keep the page readable:
     1. ONE primary action per screen. Everything else steps back, so
        the orange actually means something.
     2. Numbers are tabular and right-aligned. Money never wraps.
   ============================================================ */

:root{
  --brand:#f57224; --brand-d:#d9611b; --brand-soft:#fff1e6; --brand-line:#f3c9a6;
  --ink:#1b2030;   --ink-2:#545b6b;   --ink-3:#6b7280;
  --line:#e7e9ef;  --line-2:#f0f0f3;
  --bg:#f3f4f7;    --card:#fff;       --card-2:#f8f9fb;
  --ok:#1c7a43;    --ok-bg:#e7f7ea;
  --warn:#b26a00;  --warn-bg:#fff3e0;
  --bad:#c0392b;   --bad-bg:#fdeeee;
  --info:#2b5fb3;  --info-bg:#e6f0ff;
  --sh:0 1px 2px #0b112008;
  --sh-pop:0 10px 30px #0b112026;
  --r:14px; --r-sm:9px;
  color-scheme:light;
}

/* Dark mode reaches here two ways and BOTH are needed:
     1. the system is dark and the reader has not forced light
     2. the reader picked dark from the toggle
   CSS has no mixins, so the block below is written twice. Change a
   colour in one and change it in the other. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#ff8742; --brand-d:#ff9c62; --brand-soft:#3a2416; --brand-line:#5c3a20;
    --ink:#e9ecf3;   --ink-2:#aeb6c4;   --ink-3:#98a1b0;
    --line:#252b38;  --line-2:#1e2430;
    --bg:#10141c;    --card:#171d27;    --card-2:#141a23;
    --ok:#5fce8c;    --ok-bg:#12301f;
    --warn:#e0a84e;  --warn-bg:#352612;
    --bad:#f4776d;   --bad-bg:#371a1a;
    --info:#7aa7f0;  --info-bg:#182742;
    --sh:none; --sh-pop:0 10px 30px #0008;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --brand:#ff8742; --brand-d:#ff9c62; --brand-soft:#3a2416; --brand-line:#5c3a20;
  --ink:#e9ecf3;   --ink-2:#aeb6c4;   --ink-3:#98a1b0;
  --line:#252b38;  --line-2:#1e2430;
  --bg:#10141c;    --card:#171d27;    --card-2:#141a23;
  --ok:#5fce8c;    --ok-bg:#12301f;
  --warn:#e0a84e;  --warn-bg:#352612;
  --bad:#f4776d;   --bad-bg:#371a1a;
  --info:#7aa7f0;  --info-bg:#182742;
  --sh:none; --sh-pop:0 10px 30px #0008;
  color-scheme:dark;
}

*{box-sizing:border-box}
/* ⚠️ `overflow-x:hidden` here makes html/body a scroll container, which
   silently kills `position:sticky` on everything inside — the sidebar and
   the table headers both scrolled away with the page. `clip` does the
   same job of stopping sideways scroll without creating that container. */
html,body{max-width:100%;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:14.5px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
a{color:inherit}
.hide{display:none!important}
.grow{flex:1}
.muted{color:var(--ink-3)}
.err{color:var(--bad);min-height:1.2em;margin:10px 0 0;font-size:13.5px}

/* ---------- login ---------- */
#login{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:20px}
.logincard{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:30px 26px;max-width:380px;width:100%;box-shadow:0 8px 30px #0b112012;
}
.logincard .logo{width:48px;height:48px;border-radius:14px;display:block}
.logincard h1{font-size:20px;margin:16px 0 4px}
.logincard p{margin:0 0 20px;color:var(--ink-3);font-size:13.5px}

/* ============================================================
   Shell — white sidebar, full-width content
   ============================================================ */
#app{display:flex;min-height:100vh}

.side{
  width:216px;flex:none;background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{
  display:flex;align-items:center;gap:9px;padding:16px 16px 14px;
  border-bottom:1px solid var(--line-2);font-size:16px;font-weight:800;color:var(--brand);
}
.brand .logo{width:26px;height:26px;border-radius:8px;flex:none}

#nav{padding:10px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
#nav button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:0;background:transparent;color:var(--ink-2);cursor:pointer;
  padding:9px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:500;
  white-space:nowrap;font-family:inherit;
}
#nav button .ic{width:20px;text-align:center;font-size:15px;flex:none}
#nav button:hover{background:var(--card-2);color:var(--ink)}
#nav button.on{background:var(--brand-soft);color:var(--brand-d);font-weight:700}
.navgrp{
  font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
  font-weight:700;padding:14px 12px 5px;
}

/* Name on one line, the two controls beneath it. Side by side they were
   squeezed into "Ta..." and neither button had room to read. */
.side-foot{
  padding:11px;border-top:1px solid var(--line-2);
  display:flex;flex-direction:column;align-items:stretch;gap:9px;
}
.side-foot .btn{flex:1}
.footbtns{display:flex;gap:7px}
.who{display:flex;align-items:center;gap:9px;min-width:0}
.who-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.who-t b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-t .muted{font-size:11px}
.avatar{
  width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand-d);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;
}

/* ---------- main column ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:12px 22px;
}
.topbar h1{font-size:17px;font-weight:700}
/* Full width on purpose — no max-width. A wide table should use the
   whole screen instead of leaving a dead strip down the right. */
main{padding:20px 22px 28px;width:100%;min-width:0}
footer{padding:4px 22px 26px;font-size:12px;color:var(--ink-3)}

/* ============================================================
   Cards, KPIs, tables
   ============================================================ */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin-bottom:14px;box-shadow:var(--sh);
}
.card > h2{font-size:15px;margin-bottom:4px}
.card > h2 + p.muted{margin:0 0 13px;font-size:13px}
h3{font-size:12px;margin:18px 0 8px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}

.kpis{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.kpi{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;box-shadow:var(--sh);flex:1;min-width:165px;
}
.kpi .l{
  color:var(--ink-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;
  margin-bottom:5px;font-weight:600;
}
.kpi .v{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.15}
.kpi.neg .v{color:var(--bad)}
.kpi.pos .v{color:var(--ok)}
.kpi.plain{box-shadow:none;border:0;padding:0;background:transparent}
.kpi .v.big{font-size:30px}

.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;
    border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:10px 13px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line-2)}
th{
  background:var(--card-2);color:var(--ink-2);font-weight:650;font-size:12px;
  position:sticky;top:0;z-index:1;
}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td.wrap-ok,th.wrap-ok{white-space:normal}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--card-2)}
tr.click{cursor:pointer}
.empty{padding:30px 12px;text-align:center;color:var(--ink-3);font-size:14px}
/* A table already inside a .card should not draw a second frame. */
.card > .tw{border:0;border-radius:0;background:transparent}

/* ---------- status pills ---------- */
.st{
  display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;
  font-weight:650;white-space:nowrap;background:var(--line-2);color:var(--ink-2);
  vertical-align:middle;
}
.st.ok{background:var(--ok-bg);color:var(--ok)}
.st.bad{background:var(--bad-bg);color:var(--bad)}
.st.warn{background:var(--warn-bg);color:var(--warn)}
.st.info{background:var(--info-bg);color:var(--info)}
.st.brand{background:var(--brand-soft);color:var(--brand-d)}

/* ============================================================
   Buttons — one scale, one primary per context
   ============================================================ */
.btn{
  background:var(--brand);color:#fff;border:1px solid transparent;padding:9px 16px;
  border-radius:var(--r-sm);font-size:13.5px;font-weight:650;line-height:1.2;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:38px;font-family:inherit;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.btn:hover{background:var(--brand-d)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid #f5722455;outline-offset:1px}
/* Secondary — form mechanics. Filled slate, not white: an outline button
   on a white card had almost no contrast and read as disabled. */
.btn.sec{background:#404a63;color:#fff;border-color:#404a63}
.btn.sec:hover{background:#333c52}
/* Ghost — side actions: PDF, CSV, Details. Grey fill, still a button. */
.btn.ghost{background:var(--line-2);color:var(--ink-2);border-color:var(--line);font-weight:600}
.btn.ghost:hover{background:var(--line);color:var(--ink)}
.btn.on{background:var(--brand-soft);color:var(--brand-d);border-color:var(--brand-line);font-weight:700}
.btn.on:hover{background:var(--brand-soft)}
.btn.danger{background:var(--bad)}
.btn.danger:hover{filter:brightness(.92)}
.btn.sm{padding:6px 11px;min-height:32px;font-size:12.5px;border-radius:8px}
.btn.block{width:100%}
.rowbtns{display:flex;gap:6px;justify-content:flex-end}

a.back{
  display:inline-flex;align-items:center;gap:5px;margin-bottom:12px;
  color:var(--ink-3);text-decoration:none;cursor:pointer;font-size:13.5px;font-weight:600;
}
a.back:hover{color:var(--ink)}

/* ============================================================
   Toolbar + filters
   ============================================================ */
.bar{display:flex;gap:9px;align-items:center;margin-bottom:13px;flex-wrap:wrap}
.bar.mb0{margin-bottom:0}
#q{
  flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-size:14px;
}

.filters{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px 3px;margin-bottom:13px;box-shadow:var(--sh);
}
.filters .fldgrid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.filters .fld{margin-bottom:10px}
.filters input,.filters select{font-size:13.5px;padding:8px 10px}
.filtfoot{display:flex;gap:9px;align-items:center;padding:0 0 11px;flex-wrap:wrap}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--brand-soft);
  border:1px solid var(--brand-line);border-radius:20px;padding:4px 6px 4px 12px;
  font-size:12.5px;color:var(--brand-d);font-weight:600;
}
.chip b{font-weight:700}
.chip button{
  border:0;background:transparent;color:var(--brand-d);cursor:pointer;
  font-size:15px;line-height:1;padding:0 4px;border-radius:50%;opacity:.7;
}
.chip button:hover{opacity:1}

/* ---------- party balance strip ---------- */
.party{
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 18px;margin-bottom:13px;box-shadow:var(--sh);
}
.party .who-n{font-weight:700;font-size:15px;line-height:1.3}
.party .who-n small{display:block;color:var(--ink-3);font-weight:500;font-size:11.5px}
.party .m{display:flex;flex-direction:column;line-height:1.3}
.party .m span{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.7px;font-weight:600}
.party .m b{font-size:16px;font-variant-numeric:tabular-nums;font-weight:700}
.party .m.hi b{font-size:20px;font-weight:800}
.party .m.hi b.neg{color:var(--bad)}
.party .m.hi b.pos{color:var(--ok)}

/* ---------- sub tabs ---------- */
.tabs{
  display:flex;gap:4px;overflow-x:auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:6px;box-shadow:var(--sh);margin-bottom:14px;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  white-space:nowrap;padding:8px 14px;border-radius:8px;border:0;background:transparent;
  color:var(--ink-2);font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;
}
.tabs button:hover{background:var(--card-2);color:var(--ink)}
.tabs button.on{background:var(--brand-soft);color:var(--brand-d)}
.tabs .cnt{
  display:inline-block;margin-left:5px;background:var(--line-2);color:var(--ink-3);
  border-radius:20px;padding:0 7px;font-size:11px;
}
.tabs button.on .cnt{background:var(--brand);color:#fff}

/* ============================================================
   Forms
   ============================================================ */
input,select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:14px;background:var(--card);color:var(--ink);font-family:inherit;
  transition:border-color .12s,box-shadow .12s;
}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 3px #f5722422;
}
textarea{resize:vertical}
.fld{display:block;margin-bottom:13px}
.fld > span{
  display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:5px;
  font-weight:600;letter-spacing:.02em;
}
.fldgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0 15px}
.hint{font-size:12px;color:var(--ink-3);margin:5px 0 0;line-height:1.45}

/* ---------- product thumbnails ---------- */
.thumb{
  width:34px;height:34px;border-radius:8px;object-fit:cover;background:var(--line-2);
  border:1px solid var(--line);display:block;
}
.thumb.ph{
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;color:var(--ink-3);font-weight:700;
}
.thumb.lg{width:76px;height:76px;border-radius:13px;font-size:15px}
td.thumbcell,th.thumbcell{width:46px;padding-right:0}
.prodhead{display:flex;gap:15px;align-items:flex-start;margin-bottom:14px}
.prodhead .t{min-width:0;flex:1}
.imgwrap{display:flex;gap:14px;align-items:center;margin-bottom:14px}

/* ============================================================
   Bulk entry grid
   ============================================================ */
.grid-entry input{
  padding:7px 9px;font-size:13.5px;max-width:118px;margin:0 0 0 auto;
  text-align:right;font-variant-numeric:tabular-nums;
}
.grid-entry td{padding:7px 13px}
.grid-entry tr.filled td{background:var(--brand-soft)}
.grid-entry tr.filled:hover td{background:var(--brand-soft)}
.stickyfoot{
  position:sticky;bottom:0;z-index:5;background:var(--card);
  border-top:1px solid var(--line);padding:13px 18px;margin:0 -18px -16px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  border-radius:0 0 var(--r) var(--r);
}
.stickyfoot .sum{font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.stickyfoot .sum b{font-size:17px;color:var(--ink)}

/* ============================================================
   Record log
   ============================================================ */
.logrow{
  display:grid;grid-template-columns:150px 92px 1fr;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line-2);font-size:13px;align-items:baseline;
}
.logrow:last-child{border-bottom:0}
.logrow .when{color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums}
.logrow .det{color:var(--ink-2);min-width:0;overflow-wrap:anywhere}

.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:13.5px;align-items:baseline;margin:0}
.kv dt{color:var(--ink-3);font-size:12px}
.kv dd{margin:0}

/* ============================================================
   Notices, toast, dialog
   ============================================================ */
.notice{
  background:var(--warn-bg);border:1px solid var(--brand-line);color:var(--warn);
  padding:11px 14px;border-radius:10px;margin:13px 0 0;font-size:13px;line-height:1.5;
}
.notice b{font-weight:700}

#toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;
  padding:12px 18px;border-radius:11px;font-size:14px;max-width:88vw;
  box-shadow:var(--sh-pop);display:none;font-weight:600;
}
#toast.good{background:#0d3d24;color:#c9f3d9}
#toast.bad{background:#4a1714;color:#fcd9d6}

#askbox{
  position:fixed;inset:0;z-index:70;background:#0b112088;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.askcard{
  background:var(--card);border-radius:16px;padding:22px;max-width:470px;width:100%;
  box-shadow:var(--sh-pop);border:1px solid var(--line);
}
.askcard p{margin:0 0 13px;font-size:14px;white-space:pre-line;line-height:1.55}
.askbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
#shareurl{font-size:12.5px;font-family:ui-monospace,Menlo,monospace}

/* ============================================================
   Charts, skeleton, misc
   ============================================================ */
.skeleton{
  height:140px;border-radius:var(--r);
  background:linear-gradient(90deg,var(--line-2) 25%,var(--card) 37%,var(--line-2) 63%);
  background-size:400% 100%;animation:sk 1.3s ease infinite;
}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

.bars{display:flex;flex-direction:column;gap:9px}
.barline{display:grid;grid-template-columns:104px 1fr 110px;gap:12px;align-items:center;font-size:13px}
.barline .track2{display:flex;flex-direction:column;gap:3px}
.barline .tr{height:7px;background:var(--line-2);border-radius:999px;overflow:hidden;display:block}
.barline .fillin,.barline .fillout{display:block;height:100%;border-radius:999px;min-width:2px}
.barline .fillin{background:var(--ok)}
.barline .fillout{background:var(--brand)}
.barline .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.barline .n.neg{color:var(--bad)}
.barline .n.pos{color:var(--ok)}

/* Utility classes. The CSP sets style-src 'self', so an inline
   style="..." attribute is ignored entirely — these exist in its place.
   (Setting el.style.x from JS still works.) */
.m0{margin:0}
.mt6{margin-top:6px}
.mt10{margin-top:10px}
.mt14{margin-top:14px}
.mb0{margin-bottom:0}
.center{text-align:center}
.foot-note{margin:14px 0 0;font-size:15px}
.tiny-center{text-align:center;font-size:12px;padding:16px}
.pad{padding:16px}

/* ============================================================
   Phone — the sidebar becomes a strip across the top
   ============================================================ */
@media (max-width:900px){
  #app{flex-direction:column}
  .side{
    width:100%;height:auto;flex-direction:row;align-items:center;
    border-right:0;border-bottom:1px solid var(--line);
    overflow-x:auto;z-index:7;padding:0;scrollbar-width:none;
  }
  .side::-webkit-scrollbar{display:none}
  .brand{border-bottom:0;padding:10px 12px;font-size:0;gap:0}
  .brand .logo{width:28px;height:28px}
  #nav{flex-direction:row;flex:1;gap:0;padding:4px;overflow:visible}
  #nav button{
    flex-direction:column;font-size:10px;padding:7px 9px;gap:3px;
    min-width:62px;text-align:center;line-height:1.15;font-weight:600;
  }
  #nav button .ic{width:auto;font-size:17px}
  .navgrp{display:none}
  .side-foot{border-top:0;padding:6px 8px;flex-direction:row;align-items:center}
  .footbtns{gap:6px}
  .who{display:none}

  .topbar{padding:10px 14px}
  .topbar h1{font-size:15.5px}
  main{padding:14px 14px calc(22px + env(safe-area-inset-bottom))}
  footer{padding:0 14px 24px}

  /* iOS zooms in when a focused input is under 16px — force 16px so the
     page never zooms itself on tap. */
  input,select,textarea{font-size:16px!important}
  .grid-entry input{font-size:16px!important;max-width:104px}

  .kpi{flex:1 1 calc(50% - 6px);min-width:calc(50% - 6px);padding:12px 13px}
  .kpi .v{font-size:20px}
  .kpi .v.big{font-size:26px}
  .party{gap:14px;padding:12px 14px}
  .party .m b{font-size:15px}
  .party .m.hi b{font-size:18px}
  .card{padding:14px;border-radius:12px}
  .stickyfoot{margin:0 -14px -14px;padding:12px 14px}
  .logrow{grid-template-columns:1fr;gap:2px}
  .barline{grid-template-columns:80px 1fr 90px;gap:8px;font-size:12px}
  .hide-sm{display:none}
}

/* ============================================================
   Accessibility
   ============================================================ */

/* Jump past the sidebar. Off-screen until it takes focus. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--brand);color:#fff;padding:10px 16px;border-radius:0 0 var(--r-sm) 0;
  font-size:14px;font-weight:650;text-decoration:none;
}
.skip:focus{left:0}

/* One visible focus ring for everything that can take focus. Without
   this, tabbing through the app showed nothing at all in some browsers. */
:where(a,button,input,select,textarea,tr.click,[tabindex]):focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:4px;
}
tr.click:focus-visible{outline-offset:-3px}
main:focus{outline:none}

/* Someone who has asked for less motion should get less motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* ============================================================
   Inline record links
   ============================================================ */
.lnk{
  border:0;background:none;padding:0;margin:0;font:inherit;color:var(--brand-d);
  font-weight:600;cursor:pointer;text-align:left;
  text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:2px;transition:text-decoration-color .12s;
}
.lnk:hover{text-decoration-color:currentColor}

/* ============================================================
   Record header — the top of a sale, purchase, product, account
   ============================================================ */
.rechead{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin-bottom:14px;box-shadow:var(--sh);
}
.rechead-top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.rechead-t h2{font-size:22px;letter-spacing:-.02em;line-height:1.2}
.rechead-t p{font-size:14px;margin-top:3px}
.rechead .metagrid{margin-top:16px;padding-top:15px;border-top:1px solid var(--line-2)}

/* Each fact gets a label of its own instead of being run together into
   one grey line. That line was the thing that was hard to read. */
.metagrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:15px 22px;margin:0;
}
.metagrid > div{min-width:0}
.metagrid dt{
  font-size:10.5px;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.7px;font-weight:600;margin-bottom:3px;
}
.metagrid dd{
  margin:0;font-size:15.5px;font-weight:650;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.metagrid dd.neg{color:var(--bad)}
.metagrid dd.pos{color:var(--ok)}
.metagrid dd .lnk{font-size:15.5px;font-weight:650}
.metagrid time{font-variant-numeric:normal}

/* ============================================================
   Filter date shortcuts
   ============================================================ */
.presets{
  display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line-2);
}
.presets .muted{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;font-weight:600}

/* ============================================================
   Search palette
   ============================================================ */
.kbd{
  display:inline-block;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;padding:0 5px;font-size:11px;font-weight:600;
  color:var(--ink-3);background:var(--card-2);margin-left:4px;line-height:1.7;
}
#palette{
  position:fixed;inset:0;z-index:80;background:#0b112099;
  display:none;align-items:flex-start;justify-content:center;padding:12vh 20px 20px;
}
#palette.on{display:flex}
.palcard{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh-pop);width:100%;max-width:620px;overflow:hidden;
  display:flex;flex-direction:column;max-height:70vh;
}
#palq{
  border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:16px 18px;font-size:16px;background:transparent;
}
#palq:focus{outline:0;box-shadow:none;border-color:var(--brand)}
#palres{overflow-y:auto;padding:7px;min-height:0}
.palhint{color:var(--ink-3);font-size:13px;padding:18px 12px;margin:0;text-align:center}
.palgrp{
  font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
  font-weight:700;padding:11px 12px 5px;
}
.palrow{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);
  padding:9px 12px;border-radius:9px;
}
.palrow:hover,.palrow.on{background:var(--brand-soft)}
.palrow.on{box-shadow:inset 0 0 0 1px var(--brand-line)}
.palic{font-size:16px;width:22px;text-align:center;flex:none}
.palt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.35}
.palt b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palt .muted{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paln{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-2);flex:none}

@media (max-width:900px){
  .rechead-t h2{font-size:19px}
  .metagrid{grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:13px 16px}
  .metagrid dd{font-size:14.5px}
  #palette{padding:6vh 12px 12px}
  .palcard{max-height:80vh}
}

/* ============================================================
   Dashboard
   ============================================================ */

/* Two panels side by side on a wide screen, stacked on a narrow one. */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.twocol > .card{margin-bottom:0}
@media (max-width:1100px){ .twocol{grid-template-columns:1fr;gap:0} 
  .twocol > .card{margin-bottom:14px} }

/* "Needs attention" — each one is a button that goes somewhere, because
   a count you cannot act on is just decoration. */
.attn{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:10px;margin-top:12px}
.attn-i{
  display:flex;gap:13px;align-items:flex-start;text-align:left;cursor:pointer;
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 14px;font:inherit;color:var(--ink);
  transition:border-color .12s,background .12s;
}
.attn-i:hover{background:var(--brand-soft);border-color:var(--brand-line)}
.attn-n{
  font-size:22px;font-weight:800;line-height:1.1;flex:none;min-width:44px;
  font-variant-numeric:tabular-nums;color:var(--ink-2);
}
.attn-i.bad  .attn-n{color:var(--bad)}
.attn-i.warn .attn-n{color:var(--warn)}
.attn-l{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13.5px;font-weight:650;line-height:1.35}
.attn-l b{font-size:14px;font-variant-numeric:tabular-nums}
.attn-l .muted{font-size:11.5px;font-weight:400;line-height:1.4}

.kindic{font-size:15px}
.barline .n br + .muted{font-size:11.5px}