/* Earth desk. Actions are terracotta with charcoal type. Content colors stay readable. */
[data-theme="light"]{--green:#C98F82;--green-d:#7A4A3E;--green-b:#E8CFC6;--green-tint:#F6E8E2;
  --status-ok:#2F6B3A;--status-brown:#8A5E45;
  --canvas:#F7F3EC;--surface:#FFFCF8;--surface-2:#F3EEE6;--surface-3:#E4D6C2;
  --border:#E4D6C2;--border-2:#D4C4AE;
  --text:#383735;--text-2:#5C5852;--muted:#6E6A63;
  --amber:#8A5A32;--amber-tint:#F8EEDC;
  --red:#8A4038;--red-tint:#F6E4E0;
  --blue:#2F5F8A;--blue-tint:#E3F0FA;
  --purple:#6B3FA0;--purple-tint:#F3E8FB;
  --chamber:#FFFCF8;
  --r-btn:10px;--r-card:14px;--r-panel:16px;
  --p-sales:#E4B8AC;--p-sales-2:#F0D2C8;--p-sales-3:#C98F82;
  --p-amber:#E2B56A;--p-purple:#C9A8E4;--p-blue:#8FB4DC;--p-transit:#E8A56A;--p-green:#7FB88A;
  --p-sand:#E4D6C2;--p-brown:#D4B09A;--p-green-2:#91A878;
  --p-wage:#E4CDB0;--p-procure:#D9D0C4;--p-dispatch:#D4C4B4;--p-fuel:#B7C4B8;--p-expense:#C8C4BE;
  --p-stone:#D4CFC6;--p-stone-2:#C8C2B8;--p-stone-3:#E4DDD4;
  --p-steel:#A9B5A1;--p-steel-2:#8FA090;
  --c-sales:#8A5344;--c-sales-2:#C98F82;--c-sales-3:#7A4A3E;
  --c-amber:#8A5A32;--c-amber-tint:#F8EEDC;
  --c-gold:#8A6238;--c-gold-tint:#F8F0E0;
  --c-purple:#6B3FA0;--c-purple-tint:#F3E8FB;
  --c-violet:#5C4A82;--c-violet-tint:#EDE6F6;
  --c-blue:#2F5F8A;--c-blue-tint:#E3F0FA;
  --c-cyan:#1F6A78;--c-cyan-tint:#DFF4F6;
  --c-transit:#9A4E1C;--c-transit-tint:#FDE6D4;
  --c-green:#2F6B3A;--c-green-tint:#E3F3E6;
  --c-green-2:#2F6B3A;--c-leaf:#3F8A52;
  --c-advance:#2F6F4E;--c-moss:#3D6B4F;
  --c-olive:#3D6B4A;--c-deep:#1E5C38;--c-forest:#1B4D34;--c-done-tint:#D7EBE0;
  --c-teal:#1A6B5C;--c-teal-tint:#DDF3EC;
  --c-red:#8A4038;--c-red-tint:#F6E4E0;
  --c-grey:#6E6A63;--c-warm-grey:#6E6A63;--c-pale:#8A857C;
  --c-sand:#6B5A40;--c-sand-tint:#F3E6C8;--c-sand-2:#5C4C36;
  --c-part:#7A5A30;--c-part-tint:#F8EEDC;
  --c-brown:#6B4A38;--c-brown-tint:#F3E6DC;
  --c-tax:#6B5E4E;--c-slate:#6E6A63;
  --c-stone:#6E6A63;--c-stone-2:#5C5852;--c-stone-3:#8A857C;--c-procure:#6E6A63;
  --c-wage:#8A5A32;--c-fuel:#4F5C48;--c-expense:#383735;
  --c-dispatch-pay:#6B5344;--c-steel:#4A5644;--c-steel-2:#3E4A38;
  --c-wa:#4A5C44;--c-ink:#383735}

/* ---------- client-mode radio choice on the new-load form ---------- */
.radio-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:2px}
.radio-row .radio-opt{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;cursor:pointer}

/* ---------- item/qty/rate row — item needs room, qty & rate don't ---------- */
.grid-item-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.grid-item-row>*{min-width:0}
@media(max-width:1080px){.grid-item-row{grid-template-columns:1fr}}

/* ---------- misc item rows on the new-load form ---------- */
.misc-item-row{display:grid;grid-template-columns:2fr 1fr auto;gap:12px;align-items:center}
.misc-item-row>*{min-width:0}
@media(max-width:720px){.misc-item-row{grid-template-columns:1fr}}

/* ---------- extra structured item-line rows on the new-load form ---------- */
.extra-item-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;align-items:center}
.extra-item-row>*{min-width:0}
@media(max-width:860px){.extra-item-row{grid-template-columns:1fr}}

/* ---------- totals row (accounts table) ---------- */
tr.totals-row td{font-weight:700;border-top:1.5px solid var(--border)}

/* ---------- sortable table headers ---------- */
table.sortable th.sortable-col{cursor:pointer;user-select:none;position:relative;padding-right:16px}
table.sortable th.sortable-col::after{content:"";position:absolute;right:4px;top:50%;
  transform:translateY(-50%);border:4px solid transparent;opacity:.35}
table.sortable th.sortable-col.sort-asc::after{border-bottom-color:var(--text-2);opacity:1}
table.sortable th.sortable-col.sort-desc::after{border-top-color:var(--text-2);opacity:1}

/* ---------- extra chip colors (Completed / In-transit need their own,
   since --green is the terracotta accent and amber is already
   claimed by Submitted/Under Review) ---------- */
.chip.st-done{background:var(--c-done-tint);color:var(--c-forest)}
.chip.st-transit{background:var(--c-transit-tint);color:var(--c-transit)}
.chip.c-submitted{background:var(--c-amber-tint);color:var(--c-amber)}
.chip.c-enquiry{background:var(--c-gold-tint);color:var(--c-gold)}
.chip.c-approved{background:var(--c-purple-tint);color:var(--c-purple)}
.chip.c-review{background:var(--c-violet-tint);color:var(--c-violet)}
.chip.c-loading{background:var(--c-blue-tint);color:var(--c-blue)}
.chip.c-dispatch{background:var(--c-cyan-tint);color:var(--c-cyan)}
.chip.c-transit{background:var(--c-transit-tint);color:var(--c-transit)}
.chip.c-delivered{background:var(--c-green-tint);color:var(--c-green)}
.chip.c-fulfilled{background:var(--c-green-tint);color:var(--c-olive)}
.chip.c-ready{background:var(--c-done-tint);color:var(--c-deep)}
.chip.c-done{background:var(--c-done-tint);color:var(--c-forest)}
.chip.c-closed{background:var(--c-teal-tint);color:var(--c-teal)}
.chip.c-rejected{background:var(--c-red-tint);color:var(--c-red)}
.chip.c-cancelled{background:var(--surface-2);color:var(--c-grey)}
.chip.c-cancelled-enq{background:var(--surface-2);color:var(--c-warm-grey)}
.chip.c-deleted{background:var(--surface-2);color:var(--c-pale)}
.chip.c-paid{background:var(--c-green-tint);color:var(--c-green)}
.chip.c-due{background:var(--c-sand-tint);color:var(--c-sand)}
.chip.c-credit{background:var(--c-brown-tint);color:var(--c-brown)}
.chip.c-part{background:var(--c-part-tint);color:var(--c-part)}
.chip.c-advance{background:var(--c-done-tint);color:var(--c-advance)}
.chip.c-writeoff{background:var(--surface-2);color:var(--c-slate)}

/* ---------- dashboard: per-table count cards ---------- */
.count-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:1080px){.count-cards{grid-template-columns:repeat(4,1fr)}}
@media(max-width:820px){.count-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.count-cards{grid-template-columns:repeat(2,1fr)}}
.count-card{display:block;width:100%;text-align:left;font:inherit;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-card);padding:16px 18px;cursor:pointer;
  transition:border-color .15s}
.count-card:hover{border-color:var(--green)}
.count-card .val{font-size:21px;font-weight:700;color:var(--text);line-height:1.2}
.count-card .lab{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:3px}

/* ---------- dashboard: tables capped to ~5 rows, scroll for more ---------- */
.dash-tbl{max-height:255px;overflow-y:auto}
.dash-tbl thead th{position:sticky;top:0;z-index:1}

/* ---------- dashboard: flash-highlight a card jumped to from a count card ---------- */
.card.dash-highlight{outline:2px solid var(--green);outline-offset:2px}

/* ---------- status / dispatch / delivery dot icons (list views) ---------- */
.status-dot,.dispatch-dot,.delivery-dot{width:12px;height:12px;vertical-align:middle;flex:none}
.status-dot.filled svg,.dispatch-dot.filled svg,.delivery-dot.filled svg{fill:currentColor}
.status-dot.ok{color:var(--status-ok)}
.status-dot.bad{color:var(--red)}
.status-dot.purple{color:var(--purple)}
.dispatch-dot{color:var(--blue)}
.delivery-dot{color:var(--status-brown)}

.amt-sales{color:var(--c-sales)}
.amt-paid{color:var(--c-green)}
.amt-collected{color:var(--c-green-2)}
.amt-today{color:var(--c-leaf)}
.amt-advance{color:var(--c-advance)}
.amt-part{color:var(--c-part)}
.amt-due{color:var(--c-sand)}
.amt-pending{color:var(--c-sand-2)}
.amt-overdue{color:var(--c-red);font-weight:600}
.amt-credit{color:var(--c-brown)}
.amt-tax{color:var(--c-tax)}
.amt-writeoff{color:var(--c-slate)}
.amt-purchase{color:var(--c-stone)}
.amt-wage{color:var(--c-wage)}
.amt-fuel{color:var(--c-fuel)}
.amt-expense{color:var(--c-expense)}
.amt-dispatch{color:var(--c-dispatch-pay)}
.amt-payable{color:var(--c-steel)}
.amt-enquiry{color:var(--c-gold)}
.amt-wa{color:var(--c-wa)}
.amt-ink{color:var(--c-ink)}
.amt-mode-cash{color:var(--c-green)}
.amt-mode-online{color:var(--c-blue)}
.amt-mode-credit{color:var(--c-brown)}
.amt-mode-advance{color:var(--c-advance)}
.amt-mode-write_off{color:var(--c-slate)}

.ev-approved{color:var(--c-purple)}
.ev-proceeded,.ev-loading_started{color:var(--c-blue)}
.ev-rejected{color:var(--c-red)}
.ev-resubmitted{color:var(--c-amber)}
.ev-cancelled{color:var(--c-grey)}
.ev-deleted{color:var(--c-pale)}
.ev-in_transit{color:var(--c-transit)}
.ev-delivered,.ev-dispatch_closed,.ev-payment{color:var(--c-green)}
.ev-completed{color:var(--c-forest)}
.ev-dispatch_pay{color:var(--c-dispatch-pay)}
.ev-created{color:var(--c-sales)}

/* ---------- shared per-table search box ---------- */
.search-table .tb-search{margin-bottom:10px}

/* ---------- single-line collapsible filter bar ---------- */
.filter-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.filter-row .field{margin-top:0;flex:1;min-width:150px}
.filter-row .filter-actions{flex:0 0 auto;display:flex;gap:8px}

/* ---------- archive rows: cancelled (mild red) / deleted (grey) ---------- */
tr.row-cancelled td,tr.row-cancelled td .tk{color:var(--c-grey)}
tr.row-deleted td,tr.row-deleted td .tk{color:var(--c-pale)}

/* ---------- receivables: payment-term row already collected ---------- */
tr.row-settled td{background:var(--surface-2)}

/* ---------- shared row-detail: clicked trigger row, see brick.js ---------- */
tr.row-detail-trigger{cursor:pointer}
tr.row-detail-trigger.row-detail-active td{background:var(--surface-2)}

/* ---------- simple tabs ---------- */
.tabs{display:flex;gap:6px;margin-bottom:14px}
.tab-btn{font-family:var(--body);font-weight:600;font-size:13px;padding:8px 14px;
  border-radius:var(--r-btn);border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);cursor:pointer}
.tab-btn.active{background:var(--green-tint);color:var(--green-d);border-color:var(--green)}
.tab-panel[hidden]{display:none}

.kc-mark{display:flex;flex-direction:column;gap:2px;min-width:0}
.kc-name{font-family:"Noto Serif Tamil","Noto Serif",serif;font-weight:700;font-size:19px;
  color:var(--text);line-height:1.2}
.kc-sub{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}

.powered-by{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--muted);
  padding:10px 16px 14px}

.card-h{flex-wrap:wrap}
.card-h .toggle-panel{margin-left:auto}
.page-head{flex-wrap:wrap;row-gap:10px}
.page-head .toggle-panel+.toggle-panel{margin-left:8px}

.brick-ok{font-size:12.5px;color:var(--green-d);background:var(--green-tint);
  border:1px solid var(--green);border-radius:8px;padding:9px 12px;margin:0 0 16px}
.brick-phone{max-width:440px;margin:0 auto}
.brick-thread{min-height:420px;max-height:62vh;overflow:auto}
.brick-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.brick-actions form{margin:0}
.brick-compose{display:flex;gap:8px;margin-top:12px;align-items:center}
.brick-compose input{flex:1}
.brick-compose input[type="file"]{min-width:0;font-size:13px;color:var(--text)}
.brick-bar{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border)}
.brick-bar h1{font-size:16px;margin:0}
.brick-meta{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* ---------- invoice detail: load card + payments/dispatch column ---------- */
.detail-split{align-items:start}
.detail-col{display:flex;flex-direction:column;min-width:0}
.detail-col .card{display:flex;flex-direction:column}

/* ---------- bill-styled load card (mirrors the print bill's layout) ---------- */
.bill-look{background:var(--canvas)}
.bill-head{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:10.5px;font-weight:600;color:var(--text-2);margin-bottom:10px}
.bill-company{text-align:center;margin-bottom:12px}
.bill-name{font-family:"Noto Serif Tamil","Noto Serif",serif;font-weight:700;font-size:21px;color:var(--text)}
.bill-addr{font-size:11px;color:var(--muted);margin-top:2px}
.bill-meta{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;
  padding:8px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.bill-to{font-size:13px;margin:10px 0 0}
table.bill-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:12px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
table.bill-table th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--border)}
table.bill-table td{padding:9px 12px;border-bottom:1px solid var(--border)}
table.bill-table tbody tr:last-child td{border-bottom:none}
table.bill-table tr.bill-total-row td{font-weight:700;border-top:1.5px solid var(--border)}
.bill-footer{font-family:"Noto Serif Tamil","Noto Serif",serif;font-weight:700;font-size:13px;
  text-align:right;margin-top:16px;color:var(--text-2)}
.line-item-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:12.5px}
.line-item-row .spacer{flex:1}

/* ---------- boxed payment-mode / delivery-info blocks on the bill ---------- */
.bill-box{width:fit-content;max-width:100%;border:1px solid var(--border);border-radius:var(--r-card);padding:10px 12px}
.bill-box.mt{margin-top:14px}
.bill-box h4{margin:0 0 6px;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
.bb-row{text-align:left;padding:3px 0;font-size:12.5px}
.bb-row .lbl{font-weight:700;margin-right:6px}

/* ---------- ledger view: fixed-height scrolling tables so a paired
   section (Invoices/Purchases, Collections/Expenses) always matches its
   neighbour's height, whether or not either side has rows ---------- */
.ledger-tbl{max-height:440px;overflow-y:auto}
.ledger-tbl thead th{position:sticky;top:0;z-index:1;background:var(--surface)}

/* ---------- day-detail breakdown: label left, amount + source icon right ---------- */
.dd-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;font-size:12.5px}
.dd-row .lbl{font-weight:700}
.dd-row .amt{display:flex;align-items:center;gap:6px;flex-shrink:0}
.dd-row .amt svg{width:13px;height:13px;color:var(--muted)}
.bill-box-row{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.bill-box-row .bill-box{flex:1;width:auto;min-width:160px}

/* ---------- item/qty/rate columns in the invoice tables' Item column ---------- */
.item-cols{display:grid;grid-template-columns:max-content 52px 68px;gap:6px;white-space:nowrap}
.item-cols span:nth-child(2),.item-cols span:nth-child(3){text-align:right}
.item-line+.item-line{margin-top:3px}

/* ---------- chamber shell ---------- */
html{color-scheme:light}
body{background:var(--canvas)}
::selection{background:var(--green-tint);color:var(--text)}
:focus-visible{outline-color:var(--green)}
*{scrollbar-color:#D4C4AE transparent}

.app{margin:0;height:100vh;min-height:0;background:var(--chamber);
  border:0;border-radius:0;box-shadow:none;overflow:hidden}
.sidebar{position:relative;inset:auto;width:240px;height:100%;flex:none;
  background:var(--chamber);border-right:1px solid var(--border);border-radius:0}
.main{margin-left:0;flex:1;min-width:0;height:100%;overflow:auto;background:var(--canvas)}
.topbar{height:64px;padding:0 28px;background:var(--chamber);border-bottom:1px solid var(--border);
  backdrop-filter:none;gap:16px;position:sticky;top:0;z-index:15}
.topbar h1{font-size:15px;font-weight:600;letter-spacing:-.01em}
.crumb{font-size:12px;color:var(--muted);margin-top:2px}
.content{padding:28px 32px 48px}

.brand{padding:16px 16px 12px;align-items:flex-start;background:var(--chamber)}
.kc-mark{min-width:0}
.brand .mark{width:32px;height:32px;border-radius:10px;margin-top:1px;
  background:#E4C4B4;color:#5C3A32;box-shadow:none}
.kc-name{font-size:14px;line-height:1.3}
.kc-sub{letter-spacing:0;text-transform:none;font-family:var(--body);font-size:12px;margin-top:1px}

.nav{padding:4px 12px 8px;scrollbar-width:thin}
.nav .grp{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);padding:12px 10px 4px}
.nav .grp:first-child{padding-top:4px}
.nav a{border-radius:10px;padding:5px 12px;margin:0;font-size:13px;gap:10px;line-height:1.35;color:var(--text-2)}
.nav a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav a:hover{background:var(--green-tint);color:var(--text)}
.nav a.active{background:var(--green-tint);color:#6B4038;box-shadow:none}
.nav a svg{width:16px;height:16px}
.nav a .badge{background:var(--c-amber-tint);color:var(--c-amber)}

.side-foot{padding:10px 14px;background:var(--chamber);position:relative;z-index:1}
.side-foot .av{background:#E4C4B4;color:#5C3A32;width:28px;height:28px;font-size:11px}
.powered-by{padding:0 14px 10px;background:var(--chamber);font-size:10px;line-height:1.2}

.tb-title{min-width:160px;flex:1 1 280px;max-width:420px}
.tb-title h1,.tb-title .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-search{flex:1;max-width:420px}
.tb-search input{height:34px;border-radius:10px;background:var(--surface);
  border-color:var(--border);padding-left:36px}
.tb-search input:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-tint)}
.tb-actions{display:flex;align-items:center;gap:12px;flex:none}
.tb-actions .btn{box-shadow:none;height:36px}
.count-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--c-amber-tint);color:var(--c-amber);
  font-family:var(--mono);font-size:11px;font-weight:600;line-height:1}
.btn{border-radius:10px}
.btn-primary{background:#F0DDD4;color:#5C3A32;border-color:#E0C4B8;box-shadow:none}
.btn-primary:hover{background:#E8D0C6;color:#5C3A32;box-shadow:none;transform:none}
.btn-ghost{background:var(--chamber);border-radius:10px}
.icon-btn{border-radius:10px;background:var(--chamber)}
.desk-search-none{margin:0 0 14px;padding:10px 12px;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);color:var(--text-2);font-size:13px}
.desk-search-none[hidden]{display:none}

th{background:var(--surface-2);color:var(--muted)}
.count-cards{gap:16px}
.count-card .lab{text-transform:none;letter-spacing:0;font-family:var(--body);
  font-size:12.5px;font-weight:500}
.count-card .val{font-size:24px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.card,.kpi,.count-card{background:var(--chamber);border:1px solid var(--border);
  border-radius:14px;box-shadow:none}
.card-h{border-bottom-color:var(--border);padding:18px 22px;gap:12px}
.card-b{padding:22px 24px}
.card-h h3{font-size:14px;letter-spacing:-.01em}
.kpi{display:flex;flex-direction:column;padding:20px 22px}
.kpi.sales,.kpi.purchase,.kpi.paid,.kpi.due,.kpi.payable,.kpi.advance,.kpi.writeoff{
  border-top-width:1px}
.kpi.sales{background:#F8EBE6;border-color:#EAD5CC}
.kpi.paid{background:#E8F0E2;border-color:#D0E0C4}
.kpi.due{background:#F8F0E4;border-color:#EBD9C0}
.kpi.purchase{background:#EEF1EA;border-color:#D5DDD0}
.kpi.payable{background:#E8EEE6;border-color:#D0D8CC}
.kpi.advance{background:#E7F0E6;border-color:#C9DCC8}
.kpi.writeoff{background:#F3F0EA;border-color:#E4DCD0}
.kpi .val{color:var(--text)}
.kpi .lab{color:var(--muted)}
.count-card .val{color:var(--text)}
.count-card[data-target="tbl-pending-approval"]{background:#F8EEDC;border-color:#E8D4B0}
.count-card[data-target="tbl-under-review"]{background:#EDE6F6;border-color:#DDD0EE}
.count-card[data-target="tbl-open-enquiries"]{background:#F8F0DC;border-color:#EBDCC0}
.count-card[data-target="tbl-open-dispatch"]{background:#DFF4F6;border-color:#C5E4E8}
.count-card[data-target="tbl-in-transit"]{background:#FDE6D4;border-color:#F0D0B4}
.count-card[data-target="tbl-pending-completion"]{background:#D7EBE0;border-color:#C0DCC8}
.count-card[data-target="tbl-pending-payment"]{background:#F8F0E4;border-color:#EBD9C0}
.count-card[data-target="tbl-payment-due"]{background:#F8EBE6;border-color:#EAD5CC}
.count-card[data-target="tbl-collections-today"]{background:#E3F3E6;border-color:#C9E4CE}
.count-card[data-target="tbl-purchases"]{background:#F4F1EC;border-color:#E4DCD2}
#clientSalesChart .hb .ht i{background:var(--p-sales-2)}
#itemSoldChart .bar{background:var(--p-sales-3)}
#purchaseItemsChart .bar{background:var(--p-stone-3)}
.hbars.purchase .hb .ht i,.bars.purchase .b .bar{background:var(--p-stone-2)}
.hbars.due .hb .ht i{background:var(--p-sand)}
.hbars.due .hv{color:var(--c-sand)}
.hbars.payable .hb .ht i{background:var(--p-steel-2)}
.hbars.payable .hv{color:var(--c-steel-2)}
.bars .b .bar{background:linear-gradient(180deg,#F0DDD4,#C98F82)}
.kpi .lab{font-size:12.5px;font-weight:600}
.kpi .delta{margin-top:auto;padding-top:12px}
.grid5{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.kpi .val{letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:24px;
  overflow-wrap:anywhere;margin-top:10px}
.kpi .delta{line-height:1.35}
.count-card:hover{border-color:var(--green)}
.page-head{margin-bottom:20px;min-height:0}
.page-head .sub{font-size:13px;color:var(--text-2)}
.bars .b .bar{border-radius:8px 8px 3px 3px;max-width:36px}
.row{gap:20px}
.hbars{gap:14px}
.hbars .hb{gap:14px}
.legend{gap:12px}
.row[data-detail-scope]{flex-wrap:wrap;container-type:inline-size}
@container (max-width:1280px){
  .row[data-detail-scope]>.card{flex:1 1 100% !important}
}
.mt{margin-top:20px}

.tabs{display:inline-flex;gap:20px;padding:0;margin-bottom:20px;width:auto;
  background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0}
.tab-btn{border:0;border-bottom:2px solid transparent;background:transparent;border-radius:0;
  padding:8px 2px;margin-bottom:-1px;color:var(--muted)}
.tab-btn.active{background:transparent;color:var(--text);border-bottom-color:var(--green)}
.tab-btn:hover{color:var(--text)}
.tab-btn.active:hover{color:var(--text)}

.search-table{padding:16px 18px 0;margin-bottom:16px;background:var(--chamber);
  border:1px solid var(--border);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(31,35,40,.04)}
.card .search-table{margin:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.search-table .tb-search{max-width:none;width:100%;margin-bottom:14px}
.search-table .tb-search input{height:36px;background:var(--canvas)}
.card > .tbl-wrap,.search-table .tbl-wrap{border:0;border-radius:0;border-top:1px solid var(--border)}
.tbl-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#D4C4AE var(--surface-2)}
.tbl-scroll::-webkit-scrollbar{height:10px}
.tbl-scroll::-webkit-scrollbar-track{background:var(--surface-2)}
.tbl-scroll::-webkit-scrollbar-thumb{background:#D4C4AE;border-radius:8px}
.tbl-scroll table{min-width:100%}
.tbl-scroll th,.tbl-scroll td{vertical-align:middle;white-space:nowrap}
.tbl-scroll td[colspan],.tbl-scroll td.cell-wrap{white-space:normal}
.tbl-scroll .sub-cell{white-space:normal}
.tbl-scroll th{padding:12px 5px;letter-spacing:0}
.tbl-scroll td{padding:12px 5px}
.tbl-scroll td:last-child:has(.btn,.icon-btn),
.tbl-scroll th:last-child:empty{text-align:right;width:1%;white-space:nowrap}
.tbl-scroll .btn,.tbl-scroll .icon-btn{vertical-align:middle}

select{height:36px;border-radius:10px;border:1px solid var(--border);background:var(--chamber);
  color:var(--text);font-family:var(--body);font-size:13px;padding:0 10px}
.page-head .filter-row{margin-bottom:0}
.field input,.field select,.field textarea{border-radius:10px}
.field input:not([type=checkbox]):not([type=radio]):not([type=file]),.field select{height:36px}
.field input[type=file]{height:auto;padding:8px 0;border:0;background:transparent;font-size:13px;color:var(--text)}

input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]),
select,textarea{border-radius:10px}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
select,textarea{accent-color:var(--green)}

.auth-wrap{background:transparent}
.auth-card{max-width:420px;border:1px solid var(--border);border-radius:8px;
  box-shadow:none;background:var(--chamber)}
.auth-brand{border-bottom:0;padding-bottom:0}
.auth-title{font-size:26px;letter-spacing:-.03em}
.field input,.field select,.field textarea{background:var(--surface);border-color:var(--border)}

.scrim{display:none}
@media(max-width:1080px){
  .tb-actions .btn-ghost{display:none}
}
@media(max-width:820px){
  .app{margin:0;height:100vh;border-radius:0;overflow:hidden}
  .sidebar{position:fixed;top:0;bottom:0;left:0;width:min(280px,88vw);height:100%;
    background:var(--chamber);border-radius:0;border-right:1px solid var(--border);
    transform:translateX(-105%);transition:transform .2s ease;z-index:20}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .topbar{height:auto;flex-wrap:wrap;padding:12px 14px;row-gap:10px}
  .tb-title{flex:1}
  .tb-search{order:3;flex:1 1 100%;max-width:none;margin:0}
  .tb-actions{margin-left:auto}
  .sidebar.open ~ .scrim{display:block;background:rgba(31,35,40,.28)}
  .content{padding:18px 18px 32px}
}
@media(prefers-reduced-motion:reduce){
  .sidebar{transition:none}
  .btn-primary:hover,.btn-primary{transform:none}
}
.amt-sales,.amt-paid,.amt-collected,.amt-today,.amt-advance,.amt-part,.amt-due,
.amt-pending,.amt-credit,.amt-tax,.amt-writeoff,.amt-purchase,.amt-wage,.amt-fuel,
.amt-expense,.amt-dispatch,.amt-payable,.amt-enquiry,.amt-mode-cash,.amt-mode-online,
.amt-mode-credit,.amt-mode-advance,.amt-mode-write_off,
.brick-meta.amt-sales,.brick-meta.amt-paid,.brick-meta.amt-collected,.brick-meta.amt-today,
.brick-meta.amt-advance,.brick-meta.amt-part,.brick-meta.amt-due,.brick-meta.amt-pending,
.brick-meta.amt-credit,.brick-meta.amt-tax,.brick-meta.amt-writeoff,.brick-meta.amt-purchase,
.brick-meta.amt-wage,.brick-meta.amt-fuel,.brick-meta.amt-expense,.brick-meta.amt-dispatch,
.brick-meta.amt-payable,.brick-meta.amt-enquiry{color:var(--text)}
.amt-overdue,.brick-meta.amt-overdue{color:var(--c-red);font-weight:600}
.amt-wa,.brick-meta.amt-wa{color:var(--c-wa)}