/* ==========================================================================
   HB DESIGN SYSTEM — one visual language for the whole ERP.
   Loaded LAST so it settles differences between older module stylesheets.
   Desktop-first; mobile files keep their own layout rules.
   ========================================================================== */

:root{
  --hb-graphite:#1C2024;
  --hb-graphite-2:#252A2F;
  --hb-graphite-3:#31373D;
  --hb-paper:#F7F7F5;
  --hb-surface:#FFFFFF;
  --hb-ink:#14181C;
  --hb-ink-60:#5A646E;
  --hb-ink-40:#8A939C;
  --hb-rule:#E2E2DE;
  --hb-oxide:#9D1C20;
  --hb-patina:#17706B;
  --hb-amber:#B26A00;

  --hb-sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --hb-cond:'IBM Plex Sans Condensed','IBM Plex Sans',system-ui,sans-serif;
  --hb-mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
}

/* ---------- 1. base ---------- */
html body{
  font-family:var(--hb-sans)!important;
  background:var(--hb-paper)!important;
  color:var(--hb-ink)!important;
  font-size:13px!important;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
html body h1,html body h2,html body h3,html body h4{font-family:var(--hb-cond)!important;font-weight:600!important;letter-spacing:.01em;line-height:1.15}
h1{font-size:20px}h2{font-size:17px}h3{font-size:15px}h4{font-size:13px}
small{color:var(--hb-ink-60)}
a{color:var(--hb-oxide)}
:focus-visible{outline:2px solid var(--hb-oxide);outline-offset:1px}

/* every figure, code and money reads as data */
.num,.money,.amount,.qty,.bal,.v,
td .num,td .money{font-family:var(--hb-mono);font-variant-numeric:tabular-nums}

/* ---------- 2. shell ---------- */
.vasy-app>aside,
.vasy-sidebar,
.dense-sidebar{background:var(--hb-graphite)!important;color:#C9CFD5!important}
.vasy-sidebar a,.vasy-sidebar button,
.dense-sidebar a,.dense-sidebar button{color:#AEB6BE}
.vasy-sidebar a:hover,.vasy-sidebar button:hover,
.dense-sidebar a:hover,.dense-sidebar button:hover{background:var(--hb-graphite-2);color:#fff}
.vasy-sidebar .active,.dense-sidebar .active,
.vasy-sidebar [aria-current="true"],.dense-sidebar [aria-current="true"]{
  background:var(--hb-graphite-3)!important;color:#fff!important;
  box-shadow:inset 2px 0 0 var(--hb-oxide);border-radius:0!important;
}

.vasy-top,.hb-clean-topbar{
  background:var(--hb-surface)!important;
  border-bottom:1px solid var(--hb-rule)!important;
  box-shadow:none!important;
  min-height:46px;
}
.vasy-top .fy,.hb-clean-topbar .fy{
  font-family:var(--hb-mono);font-size:12px;font-weight:500;
  background:none!important;border:0!important;border-left:1px solid var(--hb-rule)!important;
  border-radius:0!important;color:var(--hb-ink)!important;padding:0 10px!important;
}
.vasy-top .hamburger{color:var(--hb-ink-60);background:none;border-radius:0}
.vasy-top .hamburger:hover{background:var(--hb-paper);color:var(--hb-ink)}

/* ---------- 3. tables — the core of an ERP ---------- */
html body table{width:100%;border-collapse:collapse;background:var(--hb-surface)!important}
thead th{
  font-family:var(--hb-cond)!important;font-weight:600!important;font-size:10px!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;
  color:var(--hb-ink-40)!important;text-align:left;
  padding:8px 12px!important;background:var(--hb-paper)!important;
  border-bottom:1px solid var(--hb-rule)!important;white-space:nowrap;
}
tbody td{
  padding:9px 12px!important;
  border-bottom:1px solid var(--hb-rule)!important;
  vertical-align:middle;font-size:12.5px;
}
tbody tr:hover{background:#FBFBF9}
tbody tr.selected,tbody tr[aria-selected="true"]{
  background:#F2F4F3!important;box-shadow:inset 2px 0 0 var(--hb-ink);
}
tfoot td{
  padding:10px 12px!important;border-top:1px solid var(--hb-ink)!important;
  font-family:var(--hb-mono);font-weight:600;
}
/* numeric columns align right and read as figures */
td.r,th.r,td.right,th.right,td.amount,td.num,td.money{text-align:right}
td.amount,td.num,td.money,td .amount,td .money{font-family:var(--hb-mono);font-weight:500}

/* ---------- 4. buttons ---------- */
html body button,html body .btn,html body .admin-btn,html body .mini-action{
  font-family:var(--hb-sans)!important;font-size:12px!important;font-weight:500!important;
  border-radius:0!important;
}
.btn,.admin-btn,.mini-action,button.secondary{
  border:1px solid var(--hb-rule);background:var(--hb-surface);color:var(--hb-ink);
  padding:6px 12px;
}
.btn:hover,.admin-btn:hover,.mini-action:hover{border-color:var(--hb-ink-40)}

.primary,.sales-primary,.biz-primary,.ast-primary,.btn-primary,button.primary{
  background:var(--hb-ink)!important;color:#fff!important;
  border:1px solid var(--hb-ink)!important;border-radius:0!important;
  padding:6px 12px;font-weight:500;
}
.primary:hover,.sales-primary:hover,.biz-primary:hover,.ast-primary:hover,button.primary:hover{
  background:#000!important;border-color:#000!important;
}
.danger,button.danger,.btn.danger{
  color:var(--hb-oxide)!important;background:var(--hb-surface)!important;
  border:1px solid #E4C6C7!important;border-radius:0!important;
}

/* ---------- 5. inputs ---------- */
html body input,html body select,html body textarea{
  font-family:var(--hb-sans)!important;font-size:12.5px!important;
  border:1px solid var(--hb-rule)!important;border-radius:0!important;
  background:var(--hb-surface)!important;color:var(--hb-ink)!important;padding:6px 9px!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--hb-ink);outline:none;box-shadow:none;
}
input::placeholder,textarea::placeholder{color:var(--hb-ink-40)}
/* money and code fields read as data */
input[type="number"],input.amount,input.rate,input.qty,input.price{
  font-family:var(--hb-mono);text-align:right;
}

/* ---------- 6. cards & panels ---------- */
.biz-card,.cmd-card,.bmr-card,.sv-card,.sales-panel,.finance-panel,
.admin-kpi,.card,.panel{
  background:var(--hb-surface)!important;
  border:1px solid var(--hb-rule)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.biz-card-head,.panel-head,.sales-title{
  border-bottom:1px solid var(--hb-rule);
  background:var(--hb-surface);
}

/* ---------- 7. figures: numbers lead, labels recede ---------- */
.admin-kpi .v,.biz-card .v,.kpi .v,.sales-kpis b,.fig .v{
  font-family:var(--hb-mono)!important;
  font-size:24px!important;font-weight:500!important;
  letter-spacing:-.02em;line-height:1;color:var(--hb-ink);
}
.admin-kpi .l,.biz-card .l,.kpi .l,.sales-kpis span,.fig .eyebrow,.q-lbl{
  font-family:var(--hb-cond)!important;font-weight:600!important;
  font-size:10px!important;letter-spacing:.14em!important;
  text-transform:uppercase!important;color:var(--hb-ink-40)!important;
}

/* ---------- 8. status tags ---------- */
.sales-status,.tag,.pill,.pay-pill,.status{
  font-family:var(--hb-cond)!important;font-size:10px!important;font-weight:600!important;
  letter-spacing:.1em!important;text-transform:uppercase!important;
  padding:2px 6px!important;border-radius:0!important;
  border:1px solid;background:transparent!important;white-space:nowrap;
}
.sales-status.s-open,.pay-pill.p-unpaid,.status.open{color:#1769AA!important;border-color:#BFD3E6!important}
.sales-status.s-converted,.sales-status.s-invoiced,.sales-status.s-confirmed,
.pay-pill.p-paid,.status.paid,.green{color:var(--hb-patina)!important;border-color:#BFD9D6!important}
.sales-status.s-cancelled,.due,.status.due{color:var(--hb-oxide)!important;border-color:#E4C6C7!important}
.warn,.status.pending{color:var(--hb-amber)!important;border-color:#EBD7B5!important}

/* money semantics, used app-wide */
.money.buy,.cost{color:var(--hb-amber)}
.money.neg,.negative,.outstanding{color:var(--hb-oxide)}
.money.pos,.positive,.received{color:var(--hb-patina)}

/* ---------- 9. document numbers read as codes ---------- */
.doc-link,.doc-no,.bill-no,.invoice-no,.code{
  font-family:var(--hb-mono)!important;font-weight:500;letter-spacing:-.01em;
  color:var(--hb-oxide);
}

/* ---------- 10. POS keeps its own layout, adopts the palette ---------- */
.hbpos-app{
  --brand:var(--hb-ink);
  font-family:var(--hb-sans);
}
.hbpos-app .hbpos-logo{background:var(--hb-oxide)!important}
.hbpos-app .hbpos-bottom-summary .grand,
.hbpos-app .grand-total{font-family:var(--hb-mono);color:var(--hb-ink)!important}
.hbpos-app .hbpos-qty button{color:var(--hb-ink)!important}
.hbpos-app button.primary,.hbpos-app .complete{background:var(--hb-ink)!important;border-color:var(--hb-ink)!important}

/* ---------- 11. quiet the decoration ---------- */
.vasy-app [class*="card"],.vasy-app [class*="panel"]{border-radius:0}
.vasy-app *{text-shadow:none}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}