/* ============================================================================
   MGC Construction — Inventory, Consumption, Wastage & Audit
   Design tokens + component layer. Source of truth: docs/spec/05-UX-SPEC.md §1.2
   and docs/design-handoff/Board 0 Foundations.dc.html.
   No framework, no build step. Mobile-first (360px), desktop ≥1024px.
   ========================================================================== */

/* ---------- Fonts (Google Fonts is the one allowed external host) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Nastaliq+Urdu:wght@400&display=swap');

/* ---------- Tokens (verbatim from 05-UX-SPEC §1.2) ---------- */
:root{
  /* Surface — warm neutral concrete, not white. Cuts glare, prints fine. */
  --c-bg:        #F2F2EF;
  --c-surface:   #FFFFFF;
  --c-surface-2: #E7E7E2;
  --c-line:      #CFCFC8;

  /* Ink — near-black slate, AAA on all surfaces */
  --c-ink:       #16181A;
  --c-ink-2:     #4A4F55;
  --c-ink-3:     #767C83;

  /* Accent — a single hi-vis signal orange, primary actions only */
  --c-accent:    #E8590C;
  --c-accent-ink:#FFFFFF;
  --c-accent-dark:#C04A09;

  /* Status — always paired with a word */
  --c-ok:        #1F7A3D;
  --c-warn:      #B26A00;
  --c-danger:    #B3261E;
  --c-info:      #1B4F8A;
  --c-pending:   #6B4FA8;

  /* Status tints (Board 0 chips) */
  --t-ok:        #E8F3EC;
  --t-warn:      #FBF2E3;
  --t-danger:    #FBEAE9;
  --t-info:      #E7EEF7;
  --t-pending:   #EFEAF7;

  /* Hatched wastage fill */
  --hatch-danger: repeating-linear-gradient(45deg,#B3261E 0,#B3261E 3px,#7d1a15 3px,#7d1a15 6px);

  /* Type */
  --f-ui:   'Inter Tight', system-ui, sans-serif;
  --f-num:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-ur:   'Noto Nastaliq Urdu', serif;

  --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:20px; --t-xl:26px; --t-2xl:34px;

  /* Rhythm */
  --sp:8px;
  --r:6px;
  --r-sm:4px;
  --tap:48px;
  --shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .04);
  --shadow-float: 0 4px 12px rgb(0 0 0 / .18);

  /* Shell */
  --nav-w: 236px;
  --tabbar-h: 66px;
  --header-h: 56px;
}
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

/* High-contrast field mode: surface pure white, ink pure black, borders 2px. Values change, nothing moves. */
html[data-contrast="high"]{
  --c-bg:#FFFFFF; --c-surface:#FFFFFF; --c-surface-2:#F0F0F0; --c-line:#000000;
  --c-ink:#000000; --c-ink-2:#000000; --c-ink-3:#333333;
}
html[data-contrast="high"] .card, html[data-contrast="high"] .input, html[data-contrast="high"] .select, html[data-contrast="high"] .btn-secondary{ border-width:2px; }
html[data-motion="reduce"] *{ animation:none!important; transition:none!important; }
html[data-text="large"]{ font-size:112.5%; }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--c-bg); color:var(--c-ink);
  font-family:var(--f-ui); font-size:var(--t-md); line-height:1.45;
  -webkit-font-smoothing:antialiased; min-height:100dvh;
}
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.15; letter-spacing:-0.015em; }
h1{ font-size:var(--t-xl); }   /* 26 — page titles on mobile */
h2{ font-size:var(--t-lg); }   /* 20 */
h3{ font-size:var(--t-md); font-weight:500; }
p{ margin:0; }
a{ color:var(--c-accent); text-decoration:none; }
a:hover{ color:var(--c-accent-dark); }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
img,svg{ display:block; max-width:100%; }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }
::selection{ background:rgb(232 89 12 / .22); }
[hidden]{ display:none !important; }

/* Numbers: every quantity, rate, value, doc no, code, %, date */
.num, .mono{ font-family:var(--f-num); font-variant-numeric:tabular-nums; }
.ur{ font-family:var(--f-ur); color:var(--c-ink-2); line-height:1.8; direction:rtl; unicode-bidi:isolate; font-size:15px; }
.kicker{ font:600 10px/1.2 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); }
.kicker-danger{ color:var(--c-danger); }
.label{ font-size:13px; color:var(--c-ink-2); }
.muted{ color:var(--c-ink-3); }
.caption{ font-size:var(--t-xs); color:var(--c-ink-3); }
.ink2{ color:var(--c-ink-2); }
.ok{ color:var(--c-ok) !important; } .warn{ color:var(--c-warn) !important; } .danger{ color:var(--c-danger) !important; } .info{ color:var(--c-info) !important; } .pending{ color:var(--c-pending) !important; }
.right{ text-align:right; } .center{ text-align:center; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Layout helpers ---------- */
.row{ display:flex; align-items:center; gap:8px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.row-base{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.col{ display:flex; flex-direction:column; gap:8px; }
.stack{ display:flex; flex-direction:column; gap:11px; }
.grow{ flex:1; min-width:0; }
.wrap{ flex-wrap:wrap; }
.gap-2{ gap:2px } .gap-4{ gap:4px } .gap-6{ gap:6px } .gap-10{ gap:10px } .gap-12{ gap:12px } .gap-14{ gap:14px } .gap-16{ gap:16px } .gap-20{ gap:20px }
.mt-4{ margin-top:4px } .mt-6{ margin-top:6px } .mt-8{ margin-top:8px } .mt-10{ margin-top:10px } .mt-12{ margin-top:12px } .mt-14{ margin-top:14px } .mt-16{ margin-top:16px } .mt-20{ margin-top:20px } .mt-24{ margin-top:24px }
.mb-4{ margin-bottom:4px } .mb-6{ margin-bottom:6px } .mb-8{ margin-bottom:8px } .mb-10{ margin-bottom:10px } .mb-12{ margin-bottom:12px } .mb-16{ margin-bottom:16px }
.ml-auto{ margin-left:auto } .w-full{ width:100% }
.hr{ height:1px; background:var(--c-line); border:0; margin:0; }
.hr-soft{ height:1px; background:var(--c-surface-2); border:0; margin:0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.grid-auto{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.desktop-only{ display:none !important; }
@media (min-width:1024px){ .desktop-only{ display:revert !important; } .mobile-only{ display:none !important; } }

/* ---------- App shell ---------- */
.app{ min-height:100dvh; display:flex; flex-direction:column; }
.app-header{
  position:sticky; top:0; z-index:30; height:var(--header-h);
  display:flex; align-items:center; gap:8px; padding:0 8px 0 12px;
  background:var(--c-surface); border-bottom:1px solid var(--c-line);
}
.app-header .title{ font-size:var(--t-lg); font-weight:600; letter-spacing:-0.01em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-header .subtitle{ font-size:var(--t-xs); color:var(--c-ink-2); }
.app-header .back{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--c-ink); background:none; border:0; border-radius:var(--r); margin-left:-8px; }
.icon-btn{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:0; border-radius:var(--r); color:var(--c-ink-2); position:relative; }
.icon-btn:hover{ background:var(--c-bg); }
.icon-btn svg{ width:18px; height:18px; }
.badge{ position:absolute; top:6px; right:5px; min-width:16px; height:16px; border-radius:8px; background:var(--c-danger); color:#fff; font:600 10px/16px var(--f-num); text-align:center; padding:0 4px; }
.badge-warn{ background:var(--c-warn); }
.avatar{ width:34px; height:34px; border-radius:50%; background:var(--c-ink); color:#fff; display:flex; align-items:center; justify-content:center; font:600 12px var(--f-ui); flex:none; }
.project-chip{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 10px; background:var(--c-surface-2); border:0; border-radius:var(--r); font:500 14px var(--f-ui); color:var(--c-ink); max-width:52vw; }
.project-chip .code{ font:400 11px var(--f-num); color:var(--c-ink-3); }
.project-chip .caret{ color:var(--c-ink-3); font-size:11px; }
.project-chip span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.app-main{ flex:1; min-width:0; padding:14px 12px calc(var(--tabbar-h) + 90px); }
.app-main.no-tabs{ padding-bottom:24px; }
.page{ max-width:1300px; margin:0 auto; }
.page-head{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.page-head h1{ font-size:var(--t-lg); }

/* Offline banner slot — directly under the header */
.offline-banner{ display:none; align-items:center; gap:8px; background:var(--c-warn); color:#fff; padding:11px 13px; font:500 13px var(--f-ui); position:sticky; top:var(--header-h); z-index:29; }
.offline-banner.show{ display:flex; }
.offline-banner svg{ width:14px; height:14px; flex:none; }

/* Bottom tab bar (mobile) */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30; height:var(--tabbar-h);
  display:flex; align-items:flex-end; justify-content:space-around; padding:0 2px 8px;
  background:var(--c-surface); border-top:1px solid var(--c-line);
  padding-bottom:max(8px, env(safe-area-inset-bottom));
}
.tab{ width:60px; display:flex; flex-direction:column; align-items:center; gap:2px; padding-top:10px; background:none; border:0; color:var(--c-ink-2); font:400 10px var(--f-ui); position:relative; text-decoration:none; }
.tab .ico{ font-size:19px; line-height:1; }
.tab .ico svg{ width:22px; height:22px; }
.tab.active{ color:var(--c-accent); font-weight:500; }
.tab .badge{ top:4px; right:9px; min-width:18px; height:18px; line-height:18px; border-radius:9px; }
.tab-new{ width:66px; }
.tab-new .fab{ width:64px; height:64px; border-radius:50%; background:var(--c-accent); color:#fff; margin-top:-26px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-float); font:300 34px/1 var(--f-ui); border:0; }
.tab-new span{ color:var(--c-accent); font-weight:500; margin-top:2px; font-size:10px; }

/* Desktop left nav */
.sidenav{ display:none; }
@media (min-width:1024px){
  .app{ flex-direction:row; }
  .sidenav{
    display:flex; flex-direction:column; gap:14px; width:var(--nav-w); flex:none;
    background:var(--c-ink); color:#F2F2EF; padding:18px 12px; position:sticky; top:0; height:100dvh; overflow:auto;
  }
  .sidenav .brand{ padding:0 8px; }
  .sidenav .brand .name{ font:600 15px var(--f-ui); color:#F2F2EF; }
  .sidenav .brand .sub{ font:400 11px var(--f-ui); color:var(--c-ink-3); }
  .sidenav .project-chip{ background:#2A2C2F; color:#F2F2EF; height:40px; max-width:none; width:100%; justify-content:flex-start; }
  .sidenav .project-chip .caret{ margin-left:auto; }
  .sidenav .nav-section{ font:600 9px var(--f-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-2); padding:0 10px 6px; }
  .sidenav a.nav-link, .sidenav button.nav-link{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:5px; color:#CFCFC8; text-decoration:none; font:400 13px var(--f-ui); background:none; border:0; width:100%; text-align:left; }
  .sidenav .nav-link:hover{ background:#2A2C2F; color:#F2F2EF; }
  .sidenav .nav-link.active{ background:var(--c-accent); color:#fff; font-weight:500; }
  .sidenav .nav-link .count{ margin-left:auto; font:500 11px var(--f-num); background:var(--c-danger); color:#fff; border-radius:8px; padding:1px 6px; }
  .sidenav .nav-group{ display:flex; flex-direction:column; gap:1px; }
  .app-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .app-header{ height:60px; padding:0 20px; gap:14px; }
  .app-header .back{ display:none; }
  .app-main{ padding:22px 22px 40px; }
  .tabbar{ display:none; }
  .project-chip.mobile{ display:none; }
  .search-bar{ flex:1; max-width:400px; height:38px; border:1px solid var(--c-line); border-radius:var(--r); display:flex; align-items:center; gap:8px; padding:0 12px; background:var(--c-bg); color:var(--c-ink-3); font-size:14px; cursor:text; }
  .search-bar svg{ width:17px; height:17px; flex:none; }
  .asof{ font-size:12px; color:var(--c-ink-2); }
  .asof .num{ color:var(--c-ink); font-weight:500; }
  .who{ display:flex; align-items:center; gap:8px; }
  .who .avatar{ width:32px; height:32px; font-size:11px; }
  .who .name{ font:500 13px var(--f-ui); color:var(--c-ink); }
  .who .role{ font:400 11px var(--f-ui); color:var(--c-ink-3); }
}
.search-bar{ display:none; }
@media (min-width:1024px){ .search-bar{ display:flex; } }

/* ---------- Cards ---------- */
.card{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r); padding:12px; }
.card-lg{ padding:16px 18px; }
.card-title{ font:500 16px var(--f-ui); color:var(--c-ink); }
.card.status-ok{ border-left:4px solid var(--c-ok); }
.card.status-warn{ border-left:4px solid var(--c-warn); }
.card.status-danger{ border-left:4px solid var(--c-danger); }
.card.status-info{ border-left:4px solid var(--c-info); }
.card.status-pending{ border-left:4px solid var(--c-pending); }
.card.status-neutral{ border-left:4px solid var(--c-ink-2); }
.card.status-ink{ border-left:4px solid var(--c-ink); }
.card.status-accent{ border-left:4px solid var(--c-accent); }
.card.dashed{ border-style:dashed; background:var(--c-bg); }
.card-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.note{ background:var(--t-info); border:1px solid var(--c-info); border-radius:5px; padding:9px 11px; font:400 13px/1.45 var(--f-ui); color:var(--c-ink); }
.note-warn{ background:var(--t-warn); border-color:var(--c-warn); }
.note-danger{ background:var(--t-danger); border-color:var(--c-danger); }
.note-ok{ background:var(--t-ok); border-color:var(--c-ok); }
.note-pending{ background:var(--t-pending); border-color:var(--c-pending); }
.strip-note{ padding:9px 11px; background:var(--c-bg); border-left:3px solid var(--c-line); border-radius:4px; font-size:13px; }
.strip-note.ok{ border-left-color:var(--c-ok); } .strip-note.warn{ border-left-color:var(--c-warn); } .strip-note.danger{ border-left-color:var(--c-danger); } .strip-note.info{ border-left-color:var(--c-info); }
.persist-note{ background:var(--t-info); border-bottom:1px solid var(--c-info); padding:11px 13px; font:500 13px/1.45 var(--f-ui); color:var(--c-info); }

/* ---------- Tiles (dashboard) ---------- */
.tile{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r); padding:12px; min-height:88px; text-decoration:none; color:inherit; display:block; }
.tile .big{ font:500 34px/1 var(--f-num); color:var(--c-ink); font-variant-numeric:tabular-nums; }
.tile .lbl{ font:400 13px/1.35 var(--f-ui); color:var(--c-ink-2); margin-top:6px; }
.tile:hover{ border-color:var(--c-ink-3); }

/* ---------- Buttons — verb + object, never Submit ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 18px; border-radius:var(--r); font:500 15px var(--f-ui); border:1px solid transparent; text-decoration:none; white-space:nowrap; }
.btn-primary{ background:var(--c-accent); color:var(--c-accent-ink); font-weight:600; }
.btn-primary:hover{ background:var(--c-accent-dark); }
.btn-secondary{ background:var(--c-surface); color:var(--c-ink); border-color:var(--c-line); }
.btn-secondary:hover{ background:var(--c-bg); }
.btn-outline{ background:var(--c-surface); color:var(--c-accent); border-color:var(--c-accent); font-weight:600; }
.btn-outline:hover{ background:#FDF1EA; }
.btn-danger{ background:var(--c-surface); color:var(--c-danger); border-color:var(--c-danger); }
.btn-danger:hover{ background:var(--t-danger); }
.btn-ok{ background:var(--c-surface); color:var(--c-ok); border-color:var(--c-ok); font-weight:600; }
.btn-ghost{ background:none; color:var(--c-accent); font-weight:600; padding:0 8px; height:40px; }
.btn-sm{ height:40px; padding:0 14px; font-size:13px; }
.btn-xs{ height:36px; padding:0 12px; font-size:13px; }
.btn-lg{ height:56px; font-size:16px; }
.btn-block{ width:100%; }
.btn:disabled, .btn[aria-disabled="true"]{ background:var(--c-surface-2); color:var(--c-ink-3); border:1px solid var(--c-line); cursor:not-allowed; font-weight:500; font-size:14px; text-align:center; padding:0 10px; white-space:normal; line-height:1.2; }
.btn .spin{ width:16px; height:16px; border:2px solid rgb(255 255 255 / .4); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn-secondary .spin, .btn-outline .spin{ border-color:rgb(0 0 0 / .15); border-top-color:var(--c-accent); }

/* Sticky action bar at the bottom of a mobile form */
.action-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:31; background:var(--c-surface); border-top:1px solid var(--c-line);
  padding:10px 12px calc(12px + env(safe-area-inset-bottom));
}
.action-bar .total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
.action-bar .total .lbl{ font-size:14px; color:var(--c-ink-2); }
.action-bar .total .val{ font:500 26px var(--f-num); color:var(--c-ink); }
.action-bar .summary{ font-size:13px; color:var(--c-danger); margin-bottom:9px; }
.action-bar .summary.ok{ color:var(--c-ok); }
.action-bar .actions{ display:flex; gap:8px; }
.action-bar .actions .btn{ flex:1; }
@media (min-width:1024px){
  .action-bar{ position:sticky; bottom:0; margin:0 -22px -40px; padding:12px 22px; border-radius:0; }
  .has-action-bar .app-main{ padding-bottom:40px; }
}

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:5px; }
.field > label, .field-label{ font-size:13px; color:var(--c-ink-2); }
.field .hint{ font-size:11px; color:var(--c-ink-3); margin-top:-1px; }
.field .err{ font-size:14px; line-height:1.45; color:var(--c-danger); margin-top:2px; }
.input, .select, .textarea{
  width:100%; min-height:48px; padding:0 12px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r);
  font:400 16px var(--f-ui); color:var(--c-ink);
}
.textarea{ min-height:64px; padding:12px; resize:vertical; line-height:1.45; }
.input::placeholder, .textarea::placeholder{ color:var(--c-ink-3); }
.input:hover, .select:hover, .textarea:hover{ border-color:var(--c-ink-3); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible{ border:2px solid var(--c-accent); outline:none; padding-left:11px; }
.input.invalid, .select.invalid, .textarea.invalid{ border:2px solid var(--c-danger); }
.input.mono{ font-family:var(--f-num); font-weight:500; }
.select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23767C83' stroke-width='1.6'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; cursor:pointer; }
.select:disabled, .input:disabled{ background:var(--c-surface-2); color:var(--c-ink-3); cursor:not-allowed; }
.input[readonly]{ background:var(--c-surface-2); color:var(--c-ink-3); }
.field-row{ display:flex; align-items:center; height:48px; padding:0 12px; background:var(--c-surface); border-bottom:1px solid var(--c-surface-2); gap:8px; }
.field-row:last-child{ border-bottom:0; }
.field-row .k{ font-size:13px; color:var(--c-ink-2); width:76px; flex:none; }
.field-row .v{ font-size:15px; color:var(--c-ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.field-row .caret{ margin-left:auto; color:var(--c-ink-3); font-size:12px; }
.field-group{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r); overflow:hidden; }
button.field-row, .field-row[role="button"]{ width:100%; border:0; border-bottom:1px solid var(--c-surface-2); text-align:left; cursor:pointer; }
button.field-row:last-child{ border-bottom:0; }
button.field-row:hover{ background:var(--c-bg); }

/* Quantity input — mono, right-aligned, unit suffix */
.qty{ position:relative; }
.qty .input{ height:56px; padding:0 58px 0 14px; font:500 26px var(--f-num); text-align:right; font-variant-numeric:tabular-nums; }
.qty.sm .input{ height:52px; font-size:22px; padding-right:48px; }
.qty.xs .input{ height:48px; font-size:18px; padding-right:46px; }
.qty .unit{ position:absolute; right:14px; top:50%; transform:translateY(-50%); font:500 13px var(--f-num); color:var(--c-ink-3); pointer-events:none; }
.qty.sm .unit{ right:10px; font-size:12px; }
.qty .ghost{ position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding-right:58px; font:500 26px var(--f-num); color:var(--c-ink-3); pointer-events:none; }
.qty .input.ghosted{ border-style:dashed; background:var(--c-bg); color:var(--c-ink-3); }
.under{ display:flex; justify-content:space-between; gap:8px; font-size:13px; color:var(--c-ink-3); margin-top:7px; }
.under .num{ color:var(--c-ink-2); font-weight:500; }

/* Radio list & segmented */
.radio{ display:flex; align-items:center; gap:9px; min-height:34px; cursor:pointer; font-size:15px; color:var(--c-ink-2); }
.radio input{ position:absolute; opacity:0; width:0; height:0; }
.radio .dot{ width:18px; height:18px; border-radius:50%; border:2px solid var(--c-line); flex:none; }
.radio input:checked + .dot{ border-color:var(--c-accent); background:var(--c-accent); box-shadow:inset 0 0 0 3px #fff; }
.radio input:checked ~ .txt{ color:var(--c-ink); font-weight:500; }
.radio input:focus-visible + .dot{ outline:2px solid var(--c-accent); outline-offset:2px; }
.seg{ display:flex; gap:6px; }
.seg .opt{ flex:1; min-height:48px; border:1px solid var(--c-line); border-radius:var(--r); background:var(--c-surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer; padding:4px; }
.seg .opt .t{ font:500 13px var(--f-ui); color:var(--c-ink-2); }
.seg .opt .s{ font:400 10px var(--f-ui); color:var(--c-ink-3); }
.seg .opt.on{ border:2px solid var(--c-accent); }
.seg .opt.on .t{ color:var(--c-ink); font-weight:600; }
.toggle{ width:44px; height:26px; border-radius:13px; background:var(--c-surface-2); border:1px solid var(--c-line); display:flex; align-items:center; padding:2px; cursor:pointer; flex:none; transition:background .15s; }
.toggle .knob{ width:20px; height:20px; border-radius:50%; background:var(--c-ink-3); transition:transform .15s; }
.toggle.on{ background:var(--c-accent); border-color:var(--c-accent); }
.toggle.on .knob{ background:#fff; transform:translateX(18px); }

/* Filter pills */
.pills{ display:flex; gap:7px; flex-wrap:wrap; }
.pill{ font:400 12px var(--f-ui); color:var(--c-ink-2); border:1px solid var(--c-line); border-radius:4px; padding:5px 11px; background:var(--c-surface); cursor:pointer; white-space:nowrap; }
.pill.on{ background:var(--c-ink); color:#fff; border-color:var(--c-ink); font-weight:500; }
.pill.danger{ color:var(--c-danger); border-color:var(--c-danger); }
.pill.warn{ color:var(--c-warn); border-color:var(--c-warn); }

/* ---------- Chips (status, sync, band) — colour + word, never colour alone ---------- */
.chip{ display:inline-flex; align-items:center; gap:4px; font:500 12px var(--f-ui); border:1px solid; border-radius:4px; padding:4px 9px; white-space:nowrap; line-height:1.1; }
.chip-xs{ font-size:11px; padding:3px 8px; }
.chip.draft{ color:var(--c-pending); background:var(--t-pending); border-color:var(--c-pending); }
.chip.submitted, .chip.pending-sync, .chip.warn{ color:var(--c-warn); background:var(--t-warn); border-color:var(--c-warn); }
.chip.approved, .chip.synced, .chip.ok{ color:var(--c-ok); background:var(--t-ok); border-color:var(--c-ok); }
.chip.posted{ color:#fff; background:var(--c-ok); border-color:var(--c-ok); }
.chip.in-transit, .chip.info{ color:var(--c-info); background:var(--t-info); border-color:var(--c-info); }
.chip.rejected, .chip.failed, .chip.danger{ color:var(--c-danger); background:var(--t-danger); border-color:var(--c-danger); }
.chip.danger-solid{ color:#fff; background:var(--c-danger); border-color:var(--c-danger); }
.chip.warn-solid{ color:#fff; background:var(--c-warn); border-color:var(--c-warn); }
.chip.reversed, .chip.neutral{ color:var(--c-ink-2); background:var(--c-surface-2); border-color:var(--c-line); }
.chip.cancelled{ color:var(--c-ink-3); background:var(--c-surface-2); border-color:var(--c-line); }
.chip.ink{ color:#fff; background:var(--c-ink); border-color:var(--c-ink); }
.unit-chip{ font:500 12px var(--f-num); color:var(--c-ink-3); background:var(--c-surface-2); padding:3px 7px; border-radius:4px; }
.abc{ font:600 11px var(--f-ui); border-radius:3px; padding:2px 7px; }
.abc.A{ color:#fff; background:var(--c-ink); }
.abc.B, .abc.C{ color:var(--c-ink-2); background:var(--c-surface-2); border:1px solid var(--c-line); }

/* VarianceBadge — value + % + colour + icon + word */
.vbadge{ display:flex; align-items:baseline; gap:9px; border-radius:5px; padding:9px 11px; border:1px solid; }
.vbadge .v{ font:500 17px var(--f-num); color:var(--c-ink); }
.vbadge .p{ font:500 15px var(--f-num); }
.vbadge .w{ font:500 12px var(--f-ui); margin-left:auto; }
.vbadge.green{ background:var(--t-ok); border-color:var(--c-ok); } .vbadge.green .p, .vbadge.green .w{ color:var(--c-ok); }
.vbadge.amber{ background:var(--t-warn); border-color:var(--c-warn); } .vbadge.amber .p, .vbadge.amber .w{ color:var(--c-warn); }
.vbadge.red{ background:var(--t-danger); border-color:var(--c-danger); } .vbadge.red .p, .vbadge.red .w{ color:var(--c-danger); }
.band-green{ border-left-color:var(--c-ok) !important; } .band-amber{ border-left-color:var(--c-warn) !important; } .band-red{ border-left-color:var(--c-danger) !important; }

/* ---------- Balance strip — the signature element ---------- */
.bstrip{ display:flex; height:28px; border:1px solid var(--c-line); border-radius:4px; overflow:hidden; background:var(--c-surface-2); }
.bstrip.lg{ height:34px; }
.bstrip.sm{ height:24px; }
.bstrip > div{ display:flex; align-items:center; justify-content:center; overflow:hidden; transition:width 700ms cubic-bezier(.2,.8,.2,1); min-width:0; }
.bstrip .seg-consumed{ background:var(--c-ok); }
.bstrip .seg-wasted{ background:var(--hatch-danger); }
.bstrip .seg-returned{ background:var(--c-info); }
.bstrip .seg-remaining{ background:var(--c-surface-2); box-shadow:inset 1px 0 0 var(--c-ink-3); }
.bstrip > div[data-nonzero="1"]{ min-width:4px; }
.bstrip span{ font:600 13px var(--f-num); color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bstrip.lg span{ font-size:14px; }
.bstrip.sm span{ font-size:12px; }
.bstrip .seg-remaining span{ color:var(--c-ink); }
.bstrip-legend{ display:flex; justify-content:space-between; gap:10px; margin-top:7px; font:400 12px var(--f-ui); flex-wrap:wrap; }
.bstrip-legend .issued{ color:var(--c-ink-2); } .bstrip-legend .consumed{ color:var(--c-ok); } .bstrip-legend .wasted{ color:var(--c-danger); } .bstrip-legend .returned{ color:var(--c-info); } .bstrip-legend .remaining{ color:var(--c-ink); }
.bstrip-legend .num{ font-weight:500; }

/* ---------- Lists, tables & mobile cards ---------- */
.list{ display:flex; flex-direction:column; gap:9px; }
.list-card{ background:var(--c-surface); border:1px solid var(--c-line); border-left:4px solid var(--c-line); border-radius:var(--r); padding:11px 12px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; text-decoration:none; color:inherit; }
.list-card .primary{ font:500 15px var(--f-ui); color:var(--c-ink); }
.list-card .qty-big{ font:500 20px var(--f-num); color:var(--c-ink); font-variant-numeric:tabular-nums; }
.list-card .qty-big + .u{ font:400 11px var(--f-num); color:var(--c-ink-3); }
.list-card .sub{ font:400 11px var(--f-num); color:var(--c-ink-3); margin-top:2px; }
.list-card .state{ font:500 12px var(--f-ui); margin-top:4px; }
.list-card.ok{ border-left-color:var(--c-ok); } .list-card.warn{ border-left-color:var(--c-warn); } .list-card.danger{ border-left-color:var(--c-danger); } .list-card.info{ border-left-color:var(--c-info); } .list-card.pending{ border-left-color:var(--c-pending); } .list-card.neutral{ border-left-color:var(--c-ink-2); }
.list-card:hover{ border-color:var(--c-ink-3); border-left-width:4px; }

/* Desktop data table: CSS grid rows so the status strip is the left border */
.dtable{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r); overflow:hidden; }
.dtable .thead, .dtable .trow, .dtable .tfoot{ display:grid; align-items:center; }
.dtable .thead{ background:var(--c-surface-2); border-bottom:1px solid var(--c-line); font:600 10px var(--f-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--c-ink-2); }
.dtable .thead > div{ padding:9px 10px; }
.dtable .trow{ border-bottom:1px solid var(--c-surface-2); border-left:4px solid transparent; }
.dtable .trow:hover{ background:#FAFAF8; }
.dtable .trow > div{ padding:11px 10px; min-width:0; }
.dtable .trow.ok{ border-left-color:var(--c-ok); } .dtable .trow.warn{ border-left-color:var(--c-warn); } .dtable .trow.danger{ border-left-color:var(--c-danger); } .dtable .trow.info{ border-left-color:var(--c-info); } .dtable .trow.pending{ border-left-color:var(--c-pending); } .dtable .trow.neutral{ border-left-color:var(--c-ink-2); }
.dtable .tfoot{ background:var(--c-surface-2); border-top:1px solid var(--c-line); font-weight:600; }
.dtable .tfoot > div{ padding:12px 10px; }
.dtable .thead > div:first-child, .dtable .trow > div:first-child, .dtable .tfoot > div:first-child{ padding-left:18px; }
.dtable .trow > div:first-child{ padding-left:14px; }
.dtable .thead > div:last-child, .dtable .trow > div:last-child, .dtable .tfoot > div:last-child{ padding-right:18px; }
.dtable .docno{ font:500 13px var(--f-num); color:var(--c-ink); }
.dtable a.docno{ color:var(--c-accent); text-decoration:underline; }
.dtable .cell-n{ text-align:right; font:500 15px var(--f-num); color:var(--c-ink); font-variant-numeric:tabular-nums; }
.dtable .cell-n.lg{ font-size:18px; }
.dtable .cell-n.muted{ color:var(--c-ink-3); }
.dtable .cell-s{ font-size:13px; color:var(--c-ink-2); }
.dtable .toolbar{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--c-line); flex-wrap:wrap; }
.dtable .toolbar .ttl{ font:600 17px var(--f-ui); color:var(--c-ink); }
.dtable .foot-note{ padding:12px 18px; background:var(--c-surface-2); font:400 12px/1.5 var(--f-ui); color:var(--c-ink-2); }
.dtable-wrap{ overflow-x:auto; }  /* desktop tables may scroll; mobile never shows them */

/* Inbox / queue rows */
.qrow{ padding:14px 18px; border-bottom:1px solid var(--c-surface-2); border-left:4px solid var(--c-line); }
.qrow:last-child{ border-bottom:0; }
.qrow.ok{ border-left-color:var(--c-ok); } .qrow.warn{ border-left-color:var(--c-warn); } .qrow.danger{ border-left-color:var(--c-danger); } .qrow.info{ border-left-color:var(--c-info); } .qrow.pending{ border-left-color:var(--c-pending); } .qrow.neutral{ border-left-color:var(--c-ink-2); }
@media (max-width:1023px){ .qrow{ padding:12px; } }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:0; border-bottom:1px solid var(--c-line); padding:0 18px; }
.tabs .t{ padding:12px 4px; margin-right:22px; font:500 14px var(--f-ui); color:var(--c-ink-3); background:none; border:0; cursor:pointer; }
.tabs .t.on{ color:var(--c-ink); font-weight:600; box-shadow:inset 0 -3px 0 var(--c-accent); }
@media (max-width:1023px){ .tabs{ padding:0 12px; } }

/* ---------- Sheets, dialogs, toasts ---------- */
.scrim{ position:fixed; inset:0; background:rgb(22 24 26 / .45); z-index:40; display:flex; align-items:flex-end; justify-content:center; }
.sheet{ width:100%; max-height:92dvh; background:var(--c-surface); border-top-left-radius:12px; border-top-right-radius:12px; box-shadow:0 -6px 24px rgb(0 0 0 / .18); display:flex; flex-direction:column; animation:sheetUp 200ms ease-out; overflow:hidden; }
@keyframes sheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.sheet .grab{ width:36px; height:4px; border-radius:2px; background:var(--c-line); margin:8px auto 10px; flex:none; }
.sheet .sheet-title{ padding:0 16px 10px; font:600 10px var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); }
.sheet .sheet-body{ overflow:auto; flex:1; }
.sheet .sheet-item{ display:flex; align-items:center; gap:12px; height:56px; padding:0 16px; border-top:1px solid var(--c-surface-2); width:100%; background:none; border-left:0; border-right:0; border-bottom:0; font:500 16px var(--f-ui); color:var(--c-ink); text-align:left; }
.sheet .sheet-item:hover{ background:var(--c-bg); }
.sheet .sheet-item .ico{ width:32px; text-align:center; font-size:17px; }
.sheet .sheet-foot{ padding:14px 16px calc(12px + env(safe-area-inset-bottom)); }
@media (min-width:1024px){
  .scrim{ align-items:center; }
  .sheet{ width:min(520px, 100%); max-height:86vh; border-radius:var(--r); animation:none; }
  .sheet.wide{ width:min(920px,100%); }
}
.dialog{ width:min(440px, calc(100% - 24px)); background:var(--c-surface); border-radius:var(--r); box-shadow:var(--shadow-float); padding:18px; display:flex; flex-direction:column; gap:12px; margin:auto; }
.dialog .dlg-title{ font:600 18px var(--f-ui); color:var(--c-ink); }
.dialog .dlg-body{ font-size:14px; color:var(--c-ink-2); line-height:1.5; }
.dialog .dlg-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }
.dialog .dlg-actions .btn{ flex:1; }

.toast-host{ position:fixed; left:12px; right:12px; bottom:calc(var(--tabbar-h) + 12px); z-index:50; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
@media (min-width:1024px){ .toast-host{ left:auto; right:22px; bottom:22px; width:380px; } }
.toast{ background:var(--c-ink); color:#fff; border-radius:var(--r); padding:13px 14px; box-shadow:var(--shadow-float); pointer-events:auto; animation:fadeIn 150ms ease-out; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.toast .t-title{ display:flex; align-items:center; gap:8px; font:500 15px var(--f-ui); }
.toast .t-title .tick{ width:20px; height:20px; border-radius:50%; background:var(--c-ok); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; flex:none; }
.toast .t-title .tick.err{ background:var(--c-danger); }
.toast .t-title .tick.warn{ background:var(--c-warn); }
.toast .t-sub{ font:400 12px var(--f-num); color:#CFCFC8; margin-top:4px; }
.toast .t-actions{ display:flex; gap:18px; margin-top:10px; }
.toast .t-actions button{ background:none; border:0; padding:0; font:600 14px var(--f-ui); color:var(--c-accent); }

/* ---------- Skeleton, empty, error ---------- */
@keyframes shim{ 0%{ background-position:-360px 0 } 100%{ background-position:360px 0 } }
.sk{ border-radius:3px; background:linear-gradient(90deg,#E7E7E2 8%,#F2F2EF 18%,#E7E7E2 33%); background-size:360px 100%; animation:shim 1.4s linear infinite; }
.sk-static{ border-radius:3px; background:var(--c-surface-2); }
.sk.h11{ height:11px } .sk.h13{ height:13px } .sk.h14{ height:14px } .sk.h16{ height:16px } .sk.h28{ height:28px } .sk.h30{ height:30px } .sk.h48{ height:48px; border-radius:var(--r) } .sk.h52{ height:52px; border-radius:var(--r) } .sk.h56{ height:56px; border-radius:var(--r) }
.empty{ border:1px dashed var(--c-line); border-radius:var(--r); padding:26px 18px; text-align:center; background:var(--c-bg); }
.empty svg{ width:40px; height:40px; margin:0 auto 12px; }
.empty .msg{ font:400 15px/1.5 var(--f-ui); color:var(--c-ink-2); max-width:30ch; margin:0 auto 16px; }
.empty .msg:last-child{ margin-bottom:0; }
.errbox{ background:var(--c-surface); border:1px solid var(--c-line); border-left:4px solid var(--c-danger); border-radius:var(--r); padding:14px; }
.errbox .fact{ font:500 15px/1.45 var(--f-ui); color:var(--c-ink); }
.errbox .fix{ font:400 13px/1.5 var(--f-ui); color:var(--c-ink-2); margin-top:5px; }
.stale{ background:var(--c-surface-2); border:1px dashed var(--c-line); border-radius:var(--r); padding:12px; }
.stale .lbl{ font:500 12px var(--f-ui); color:var(--c-warn); margin-bottom:9px; }
.stale .content{ opacity:.75; }

/* ---------- Attachments & signature ---------- */
.thumbs{ display:flex; gap:8px; flex-wrap:wrap; }
.thumb{ width:74px; height:74px; border-radius:var(--r); border:1px solid var(--c-line); background:var(--c-surface-2); position:relative; overflow:hidden; flex:none; }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb .prog{ position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--c-surface-2); }
.thumb .prog > div{ height:100%; background:var(--c-accent); transition:width .2s; }
.thumb .rm{ position:absolute; top:2px; right:2px; width:24px; height:24px; border-radius:50%; background:rgb(22 24 26 / .7); color:#fff; border:0; font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center; }
.thumb.failed{ border:2px solid var(--c-danger); }
.thumb-add{ width:74px; height:74px; border:1px dashed var(--c-line); border-radius:var(--r); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:var(--c-surface); color:var(--c-ink-3); font:400 10px var(--f-ui); cursor:pointer; flex:none; }
.thumb-add svg{ width:22px; height:22px; }
.thumb-add.required{ border:2px dashed var(--c-danger); color:var(--c-danger); }
.thumb-add.big{ width:82px; height:82px; }
.sigpad{ height:120px; border:1px solid var(--c-line); border-radius:var(--r); background:#fff; position:relative; overflow:hidden; touch-action:none; }
.sigpad canvas{ width:100%; height:100%; display:block; }
.sigpad .sig-name{ position:absolute; left:10px; bottom:5px; font:400 10px var(--f-ui); color:var(--c-ink-3); pointer-events:none; }
.sigpad .sig-clear{ position:absolute; right:8px; top:6px; font:500 11px var(--f-ui); color:var(--c-accent); background:none; border:0; }

/* ---------- Material picker ---------- */
.picker{ border:1px solid var(--c-line); border-radius:var(--r); overflow:hidden; background:var(--c-surface); }
.picker .psearch{ display:flex; align-items:center; gap:8px; height:48px; padding:0 12px; background:var(--c-bg); border-bottom:1px solid var(--c-line); }
.picker .psearch input{ flex:1; border:0; background:none; font:400 15px var(--f-ui); color:var(--c-ink); min-width:0; }
.picker .psearch svg{ width:17px; height:17px; flex:none; }
.picker .pgroup{ padding:8px 12px; font:600 10px var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); background:var(--c-surface-2); }
.picker .pitem{ display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; min-height:56px; padding:9px 12px; border:0; border-bottom:1px solid var(--c-surface-2); background:none; text-align:left; }
.picker .pitem:hover{ background:var(--c-bg); }
.picker .pitem .n{ font:500 14px var(--f-ui); color:var(--c-ink); }
.picker .pitem .c{ font:400 11px var(--f-num); color:var(--c-ink-3); }
.picker .pbody{ max-height:60dvh; overflow:auto; }

/* ---------- Progress, bars ---------- */
.pbar{ height:8px; background:var(--c-surface-2); border-radius:4px; overflow:hidden; }
.pbar > div{ height:100%; background:var(--c-ink); }
.pbar.accent > div{ background:var(--c-accent); }
.hbar{ height:12px; background:var(--c-surface-2); border-radius:2px; overflow:hidden; position:relative; }
.hbar > .fill{ height:100%; background:var(--c-ink); border-radius:2px; min-width:0; }
.hbar > .tick{ position:absolute; top:0; bottom:0; width:2px; background:var(--c-ink); }

/* ---------- Timeline (trail, chain) ---------- */
.tl{ display:flex; flex-direction:column; }
.tl-item{ display:flex; gap:14px; }
.tl-item .rail{ width:11px; flex:none; display:flex; flex-direction:column; align-items:center; padding-top:4px; }
.tl-item .rail .dot{ width:11px; height:11px; border-radius:50%; background:var(--c-ink-3); flex:none; }
.tl-item .rail .line{ flex:1; width:2px; background:var(--c-line); }
.tl-item:last-child .rail .line{ display:none; }
.tl-item .body{ padding-bottom:18px; flex:1; min-width:0; }
.tl-item .when{ font:400 12px var(--f-num); color:var(--c-ink-3); }
.tl-item .what{ font:500 14px var(--f-ui); color:var(--c-ink); }
.tl-item .who{ font:400 13px var(--f-ui); color:var(--c-ink-2); margin-top:3px; }
.dot.ok{ background:var(--c-ok) !important; } .dot.warn{ background:var(--c-warn) !important; } .dot.danger{ background:var(--c-danger) !important; } .dot.info{ background:var(--c-info) !important; } .dot.pending{ background:var(--c-pending) !important; } .dot.ink{ background:var(--c-ink) !important; }
.ledger-pill{ font:400 12px var(--f-num); background:var(--c-bg); padding:6px 10px; border-radius:4px; border-left:3px solid var(--c-line); }
.ledger-pill.in{ color:var(--c-ok); border-left-color:var(--c-ok); } .ledger-pill.out{ color:var(--c-danger); border-left-color:var(--c-danger); }

/* Audit chain nodes */
.chain{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; align-items:stretch; }
.chain .node{ background:var(--c-bg); border:1px solid var(--c-line); border-top:3px solid var(--c-ink-3); border-radius:5px; padding:12px; cursor:pointer; }
.chain .node.ok{ border-top-color:var(--c-ok); } .chain .node.warn{ border-top-color:var(--c-warn); } .chain .node.danger{ border-top-color:var(--c-danger); } .chain .node.info{ border-top-color:var(--c-info); }
.chain .node.final{ background:var(--c-surface); border:2px solid var(--c-ink); }
.chain .node .k{ font:600 10px var(--f-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--c-ink-3); }
.chain .node .v{ font:500 26px var(--f-num); color:var(--c-ink); margin-top:6px; }
.chain .node .d{ font:500 12px var(--f-num); color:var(--c-accent); text-decoration:underline; margin-top:6px; }
.chain .node .s{ font:400 11px/1.4 var(--f-ui); color:var(--c-ink-2); margin-top:5px; }
.chain .node .w{ font:400 11px var(--f-ui); color:var(--c-ink-3); margin-top:7px; }
@media (max-width:1023px){ .chain{ display:none; } }

/* ---------- Login ---------- */
.login{ min-height:100dvh; background:var(--c-bg); padding:48px 24px 24px; display:flex; flex-direction:column; max-width:440px; margin:0 auto; }
.login .mark{ width:44px; height:44px; border-radius:var(--r); background:var(--c-ink); color:var(--c-accent); display:flex; align-items:center; justify-content:center; font:700 17px var(--f-ui); margin-bottom:26px; }
.login h1{ font-size:26px; letter-spacing:-0.015em; }
.login .sub{ font-size:14px; color:var(--c-ink-2); margin-top:3px; }
.login .foot{ margin-top:auto; padding-top:24px; font:400 12px var(--f-num); color:var(--c-ink-3); }
.login .input{ height:56px; }
.otp{ display:flex; gap:8px; }
.otp input{ flex:1; min-width:0; height:60px; border:1px solid var(--c-line); border-radius:var(--r); background:#fff; text-align:center; font:500 26px var(--f-num); color:var(--c-ink); padding:0; }
.otp input:focus-visible{ border:2px solid var(--c-accent); }
.otp.invalid input{ border:2px solid var(--c-danger); }

/* ---------- Print ---------- */
@media print{
  .sidenav, .tabbar, .app-header, .action-bar, .offline-banner, .toast-host, .no-print{ display:none !important; }
  body{ background:#fff; color:#000; font-size:12pt; }
  .app-main{ padding:0; }
  .card, .dtable{ border-color:#000; box-shadow:none; }
  .print-only{ display:block !important; }
  a{ color:#000; text-decoration:none; }
}
.print-only{ display:none; }