/* ==========================================================================
   Sổ Hàng Lê Thơm — Phase 3 mockup system

   Concept: "Sổ hàng trong tiệm bánh kẹo".
   Warm like the shop: rice-paper cream background, caramel/cinnamon brown
   for actions (the colour of kẹo dừa and nước đường thắng), a tamarind
   orange used only as a marker (active tab, selected row edge, the ruled
   line under a section title). Orderly like the ledger it replaces:
   figures right-aligned in tabular numerals, one money format
   (1.250.000 ₫), totals always sit under a double rule so the eye knows
   "this is the sum of the lines above".

   Sync state is never colour-only: every state = icon + words.
     Trực tuyến (green, check) · Đang gửi (blue, arrows) ·
     Ngoại tuyến • N phiếu chờ gửi (amber, cloud-off) ·
     N phiếu bị từ chối (red, alert) · Đang chờ phiếu khác (slate, link).
   Temporary offline codes (TAM-A1B2-0032) always render in a dashed box,
   official codes (BH-2026-000123) in a solid one.

   Fonts: Lexend (headings, brand, big figures — wide, easy for older eyes)
   + Source Sans 3 (body, tables; tabular figures). Both carry Vietnamese.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Paper & ink */
  --bg: #F7F2EA;            /* rice-paper cream: app background */
  --surface: #FFFFFF;
  --surface-2: #FBF8F3;     /* table head, quiet fills */
  --surface-3: #F1EADF;     /* sunken, pressed, read-only inputs */
  --line: #E6DCCD;
  --line-2: #CDBFAA;        /* strong rule, input border */
  --ink: #2A1D14;           /* 16.3:1 on white — key figures */
  --ink-2: #4E3F33;         /* 10.1:1 */
  --ink-3: #6B5B4D;         /* 6.5:1 on white, 5.8:1 on --bg */
  --ink-4: #9C8D7E;         /* disabled only, never for text that matters */

  /* Caramel: actions, brand */
  --primary: #7A3B12;       /* 8.5:1 with white */
  --primary-hover: #5E2C0B;
  --primary-soft: #F6E7D9;
  --primary-line: #D9B596;
  --on-primary: #FFFFFF;

  /* Tamarind: a marker, never text on white */
  --accent: #E08A1E;
  --accent-soft: #FDEBD0;
  --on-accent: #2A1600;

  --focus: #1D5FAF;
  --link: #7A3B12;

  /* Semantic */
  --success: #1E6B3A; --success-bg: #E3F2E6; --success-line: #9FCBAA;
  --warn: #8A4B00;    --warn-bg: #FFF1D6;    --warn-line: #EDBE72;
  --danger: #B42318;  --danger-bg: #FDEBE8;  --danger-line: #F0AAA2;
  --info: #1D5FAF;    --info-bg: #E7F0FA;    --info-line: #A5C3E8;
  --blocked: #4A5563; --blocked-bg: #ECEEF1; --blocked-line: #C2C8D0;

  /* Type */
  --f-head: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --f-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
  --fs-xs: 0.8125rem;   /* 13px meta only */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-body: 1rem;      /* 16px base (PRODUCT.md) */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.375rem;    /* 22px */
  --fs-xl: 1.75rem;     /* 28px */
  --fs-2xl: 2.25rem;    /* 36px key figures */

  /* Spacing: 4px unit */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(42, 29, 20, 0.06), 0 1px 1px rgba(42, 29, 20, 0.04);
  --sh-2: 0 12px 32px rgba(42, 29, 20, 0.16), 0 2px 6px rgba(42, 29, 20, 0.08);
  --sh-bar: 0 -6px 16px rgba(42, 29, 20, 0.08);

  --touch: 44px;
  --phone-w: 375px;
  --desk-w: 1280px;
  --side-w: 248px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #E9E2D6; color: var(--ink);
  font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 600; line-height: 1.25; margin: 0; letter-spacing: -0.005em; }
p { margin: 0; }
a { color: var(--link); text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: none; }
.ico svg { width: 100%; height: 100%; }
.ico--sm { width: 1rem; height: 1rem; }
.ico--lg { width: 1.5rem; height: 1.5rem; }

/* ==========================================================================
   Mockup viewer (not part of the product UI)
   ========================================================================== */
.mk-bar {
  position: sticky; top: 0; z-index: 50; background: #2A1D14; color: #F7F2EA;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-3) var(--sp-6); font-size: var(--fs-sm);
}
.mk-bar__id { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-md); display: flex; align-items: baseline; gap: var(--sp-2); }
.mk-bar__no { background: var(--accent); color: var(--on-accent); border-radius: var(--r-sm); padding: 0 var(--sp-2); font-size: var(--fs-sm); }
.mk-bar__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); color: #D8CCBC; }
.mk-bar__meta code { font-family: var(--f-mono); color: #FFFFFF; font-size: var(--fs-xs); }
.mk-bar__meta b { color: #FFFFFF; font-weight: 600; }
.mk-bar__tools { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }
.mk-seg { display: inline-flex; border: 1px solid #6B5B4D; border-radius: var(--r-sm); overflow: hidden; }
.mk-seg button { background: transparent; border: 0; color: #F7F2EA; padding: 6px 12px; cursor: pointer; min-height: 32px; }
.mk-seg button[aria-pressed="true"] { background: #F7F2EA; color: #2A1D14; font-weight: 600; }
.mk-bar a { color: #FFFFFF; }
.mk-nav { display: flex; gap: var(--sp-3); }

.mk-stage { display: flex; flex-wrap: wrap; gap: var(--sp-10) var(--sp-8); align-items: flex-start; padding: var(--sp-8) var(--sp-6) var(--sp-12); }
.mk-frame { margin: 0; display: grid; gap: var(--sp-3); }
.mk-frame[data-device="desk"] { flex-basis: 100%; overflow-x: auto; padding-bottom: var(--sp-2); }
.mk-cap { font-size: var(--fs-sm); color: var(--ink-2); max-width: var(--desk-w); display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: baseline; }
.mk-cap b { color: var(--ink); font-family: var(--f-head); font-weight: 600; }
.mk-frame[data-device="phone"] .mk-cap { max-width: var(--phone-w); }
.mk-note {
  max-width: var(--phone-w); font-size: var(--fs-xs); color: var(--ink-2); background: #FFFDF8;
  border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3);
}
.mk-frame[data-device="desk"] .mk-note { max-width: var(--desk-w); }
.mk-note code { font-family: var(--f-mono); font-size: 0.95em; }
body[data-show="phone"] .mk-frame[data-device="desk"],
body[data-show="desk"] .mk-frame[data-device="phone"] { display: none; }

/* ==========================================================================
   Phone shell (375px)
   ========================================================================== */
.lt-phone {
  position: relative; width: var(--phone-w); min-height: 760px; background: var(--bg);
  border: 1px solid var(--line-2); border-radius: 28px; box-shadow: var(--sh-2);
  display: flex; flex-direction: column; overflow: clip;
}
.ph-status {
  display: flex; justify-content: space-between; align-items: center; padding: 8px 22px 4px;
  font-size: 12px; font-weight: 600; color: var(--ink); background: var(--surface);
}
.ph-status__net { display: flex; gap: 6px; align-items: center; }
.ph-status__net .ico { width: 14px; height: 14px; }
.ph-head {
  position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}
.ph-head__row { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); }
.ph-head__back { width: var(--touch); height: var(--touch); display: grid; place-items: center; border-radius: var(--r-md); color: var(--ink); text-decoration: none; margin-left: -6px; }
.ph-head__back:hover { background: var(--surface-3); }
.ph-head__title { font-family: var(--f-head); font-size: var(--fs-md); font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-head__brand { display: flex; align-items: center; gap: var(--sp-2); flex: 1; font-family: var(--f-head); font-weight: 600; }
.ph-head__actions { display: flex; gap: var(--sp-1); }
.ph-head__sync { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ph-body { flex: 1; padding: var(--sp-4) var(--sp-4) var(--sp-6); display: grid; gap: var(--sp-4); align-content: start; }
.ph-body--flush { padding-left: 0; padding-right: 0; }
.ph-tabs {
  position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--line); padding: 4px 4px 14px;
}
.ph-tab {
  display: grid; justify-items: center; gap: 2px; padding: 6px 2px; min-height: 52px; text-decoration: none;
  color: var(--ink-3); font-size: 12px; font-weight: 600; border-radius: var(--r-md); position: relative;
}
.ph-tab .ico { width: 1.5rem; height: 1.5rem; }
.ph-tab[aria-current="page"] { color: var(--primary); }
.ph-tab[aria-current="page"]::before { content: ""; position: absolute; top: -5px; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.ph-savebar {
  position: sticky; bottom: 0; z-index: 6; background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: var(--sh-bar); padding: var(--sp-3) var(--sp-4) 18px; display: grid; gap: var(--sp-2);
}
.ph-savebar__sum { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.ph-savebar__sum span { color: var(--ink-2); font-size: var(--fs-sm); }
.ph-savebar__sum strong { font-family: var(--f-head); font-size: var(--fs-lg); font-weight: 600; }
.ph-fab {
  position: sticky; bottom: 84px; margin: 0 var(--sp-4) calc(-1 * var(--touch) - 16px) auto; z-index: 4;
  width: max-content;
}

/* ==========================================================================
   Desktop shell (1280px)
   ========================================================================== */
.lt-desk {
  width: var(--desk-w); min-height: 800px; background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--sh-2); overflow: clip; display: flex; flex-direction: column;
}
.dk-chrome { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 14px; background: #E4DBCD; border-bottom: 1px solid var(--line-2); font-size: var(--fs-xs); color: var(--ink-2); }
.dk-chrome__dots { display: flex; gap: 6px; }
.dk-chrome__dots i { width: 11px; height: 11px; border-radius: 50%; background: #C9BBA7; display: block; }
.dk-chrome__url { flex: 1; max-width: 560px; background: #FBF8F3; border-radius: var(--r-pill); padding: 3px 14px; font-family: var(--f-mono); color: var(--ink-2); }
.dk-body { flex: 1; display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 0; }
.dk-side { background: #FFFFFF; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-3); gap: var(--sp-4); }
.dk-brand { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-2) var(--sp-2); text-decoration: none; color: var(--ink); }
.dk-brand__name { font-family: var(--f-head); font-weight: 600; font-size: 1.0625rem; line-height: 1.15; white-space: nowrap; }
.dk-brand__name small { display: block; font-family: var(--f-body); font-weight: 400; font-size: var(--fs-xs); color: var(--ink-3); }
.brand-mark {
  width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--primary); color: #FFF6EC;
  display: grid; place-items: center; font-family: var(--f-head); font-weight: 700; font-size: 1rem; letter-spacing: -0.02em;
  box-shadow: inset 0 -3px 0 var(--accent); flex: none;
}
.brand-mark--sm { width: 2rem; height: 2rem; font-size: 0.8125rem; border-radius: 8px; }
.brand-mark--lg { width: 3.5rem; height: 3.5rem; font-size: 1.375rem; border-radius: 14px; box-shadow: inset 0 -4px 0 var(--accent); }
.dk-nav { display: grid; gap: var(--sp-4); }
.dk-nav__group { display: grid; gap: 2px; }
.dk-nav__label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding: 0 var(--sp-3) var(--sp-1); }
.dk-nav a {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; padding: 0 var(--sp-3);
  border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.9375rem;
}
.dk-nav a:hover { background: var(--surface-3); color: var(--ink); }
.dk-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); box-shadow: inset 3px 0 0 var(--accent); }
.dk-nav a .count { margin-left: auto; }
.dk-side__foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: var(--sp-3); display: grid; gap: var(--sp-2); }
.dk-user { display: flex; gap: var(--sp-3); align-items: center; padding: 0 var(--sp-2); }
.dk-user__name { font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; }
.dk-user__role { font-size: var(--fs-xs); color: var(--ink-3); }
.dk-main { min-width: 0; display: flex; flex-direction: column; }
.dk-top {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-8);
  background: var(--surface); border-bottom: 1px solid var(--line); min-height: 76px;
}
.dk-top__titles { display: grid; gap: 2px; min-width: 0; }
.dk-top__crumb { font-size: var(--fs-xs); color: var(--ink-3); }
.dk-top__crumb a { color: var(--ink-3); }
.dk-top h1 { font-size: var(--fs-lg); }
.dk-top__right { margin-left: auto; display: flex; gap: var(--sp-3); align-items: center; }
.dk-content { padding: var(--sp-6) var(--sp-8) var(--sp-10); display: grid; gap: var(--sp-6); align-content: start; }

/* ==========================================================================
   Sync status — the pill that is always visible
   ========================================================================== */
.sync {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 12px 3px 8px;
  border-radius: var(--r-pill); border: 1px solid; font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none; white-space: nowrap; line-height: 1.2;
}
.sync .ico { width: 1.125rem; height: 1.125rem; }
.sync--online   { color: var(--success); background: var(--success-bg); border-color: var(--success-line); }
.sync--sending  { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.sync--pending  { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.sync--offline  { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.sync--rejected { color: #FFFFFF; background: var(--danger); border-color: var(--danger); }
.sync--locked   { color: var(--blocked); background: var(--blocked-bg); border-color: var(--blocked-line); }
.cache-stamp { font-size: var(--fs-xs); color: var(--ink-3); display: inline-flex; gap: 4px; align-items: center; }
.cache-stamp .ico { width: 0.9rem; height: 0.9rem; }
.cache-stamp b { color: var(--warn); font-weight: 700; }

/* Per-document sync / posting status */
.st {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 5px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 700; border: 1px solid; white-space: nowrap; line-height: 1.5;
}
.st .ico { width: 0.95rem; height: 0.95rem; }
.st--pending  { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.st--sending  { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.st--sent     { color: var(--success); background: var(--success-bg); border-color: var(--success-line); }
.st--rejected { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.st--blocked  { color: var(--blocked); background: var(--blocked-bg); border-color: var(--blocked-line); }
.st--void     { color: var(--ink-2); background: var(--surface-3); border-color: var(--line-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.st--neutral  { color: var(--ink-2); background: var(--surface-2); border-color: var(--line-2); }
.st--info     { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }

/* Document codes */
.code { font-family: var(--f-mono); font-size: 0.875em; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface-2); color: var(--ink); }
.code--tam { border-style: dashed; border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.code--plain { border: 0; background: none; padding: 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--touch); padding: 0 var(--sp-4); border-radius: var(--r-md); border: 1px solid transparent;
  font-weight: 600; font-size: var(--fs-body); text-decoration: none; cursor: pointer; white-space: nowrap; line-height: 1.2;
}
.btn .ico { width: 1.25rem; height: 1.25rem; }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--secondary { background: var(--surface); color: var(--primary); border-color: var(--primary-line); }
.btn--secondary:hover { background: var(--primary-soft); }
.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-3); color: var(--ink); }
.btn--danger { background: var(--danger); color: #FFFFFF; }
.btn--danger-outline { background: var(--surface); color: var(--danger); border-color: var(--danger-line); }
.btn--lg { min-height: 52px; font-size: var(--fs-md); padding: 0 var(--sp-5); }
.btn--sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn--block { width: 100%; }
.btn--icon { width: var(--touch); padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--surface-3); color: var(--ink-4); border-color: var(--line); cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.btn-row--end { justify-content: flex-end; }

/* Quick actions (home) — a column of large, labelled rows, not a POS grid */
.quick { display: grid; gap: var(--sp-2); }
.quick--2 { grid-template-columns: 1fr 1fr; }
.quick a {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 60px; padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none;
  color: var(--ink); font-weight: 600; font-family: var(--f-head); font-size: var(--fs-body);
}
.quick a:hover { border-color: var(--primary-line); background: var(--primary-soft); }
.quick a .ico { width: 1.75rem; height: 1.75rem; padding: 4px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); box-sizing: content-box; }
.quick a small { display: block; font-family: var(--f-body); font-weight: 400; font-size: var(--fs-xs); color: var(--ink-3); }
.quick a.is-main { background: var(--primary); color: #FFFFFF; border-color: var(--primary); }
.quick a.is-main .ico { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.quick a.is-main small { color: #F3DDC8; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: var(--sp-4); }
.form-grid { display: grid; gap: var(--sp-4) var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-all { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); display: flex; gap: var(--sp-2); align-items: baseline; }
.label .req { color: var(--danger); }
.label .opt { font-weight: 400; color: var(--ink-3); }
.input, .select, .textarea {
  width: 100%; min-height: var(--touch); padding: 0 var(--sp-3); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-size: var(--fs-body);
}
.textarea { padding: var(--sp-2) var(--sp-3); min-height: 72px; resize: vertical; }
.select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234E3F33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; }
.input:focus, .select:focus, .textarea:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.input--num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.input--money { text-align: right; font-weight: 600; padding-right: 30px; }
.input[readonly], .input--ro { background: var(--surface-3); color: var(--ink-2); border-color: var(--line); }
.input[disabled] { background: var(--surface-3); color: var(--ink-4); }
.input.is-error, .select.is-error { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.input.is-warn { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn-line); }
.affix { position: relative; }
.affix__end { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: var(--fs-sm); pointer-events: none; }
.affix__start { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.affix--search .input { padding-left: 40px; }
.affix__btn { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-2); border-radius: var(--r-sm); cursor: pointer; }
.hint { font-size: var(--fs-xs); color: var(--ink-3); }
.err { font-size: var(--fs-sm); color: var(--danger); font-weight: 600; display: flex; gap: 6px; align-items: flex-start; }
.err .ico, .warn-text .ico { width: 1rem; height: 1rem; margin-top: 2px; }
.warn-text { font-size: var(--fs-sm); color: var(--warn); font-weight: 600; display: flex; gap: 6px; align-items: flex-start; }
.ok-text { font-size: var(--fs-sm); color: var(--success); font-weight: 600; display: flex; gap: 6px; align-items: center; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

/* Segmented control (loại phiếu, đơn vị, Nhập/Xuất) */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; gap: 3px; }
.seg--block { display: grid; width: 100%; }
.seg label, .seg button, .seg a {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 var(--sp-3);
  border-radius: 8px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; border: 0; background: transparent; text-decoration: none; white-space: nowrap;
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg .is-on, .seg [aria-pressed="true"], .seg [aria-selected="true"] { background: var(--surface); color: var(--primary); box-shadow: var(--sh-1); outline: 1px solid var(--primary-line); }

.check { display: flex; gap: var(--sp-2); align-items: center; min-height: var(--touch); font-weight: 600; font-size: var(--fs-sm); }
.check input { width: 20px; height: 20px; accent-color: var(--primary); }

/* Picker (customer / product / supplier suggestion) */
.picker { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-2); overflow: hidden; }
.picker__item { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); min-height: 56px; align-items: center; text-decoration: none; color: var(--ink); }
.picker__item:last-child { border-bottom: 0; }
.picker__item.is-active { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--accent); }
.picker__name { font-weight: 600; }
.picker__name mark { background: var(--accent-soft); color: inherit; border-radius: 2px; padding: 0 1px; }
.picker__meta { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 2px var(--sp-2); }
.picker__meta b { color: var(--ink); font-weight: 700; }
.picker__add { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); color: var(--primary); font-weight: 600; background: var(--surface-2); min-height: 52px; text-decoration: none; }

/* Selected party block (customer/supplier chosen on a form) — "Nợ nhìn là thấy" */
.party { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-md); background: var(--surface); }
.party__top { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; }
.party__name { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-md); }
.party__sub { font-size: var(--fs-xs); color: var(--ink-3); }
.party__figs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.party__fig { display: grid; gap: 0; }
.party__fig span { font-size: var(--fs-xs); color: var(--ink-3); }
.party__fig strong { font-size: var(--fs-md); font-weight: 700; }

/* ==========================================================================
   Surfaces
   ========================================================================== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.card__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); min-height: 52px; }
.card__head h2, .card__head h3 { font-size: var(--fs-body); }
.card__head .aside { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }
.card__body { padding: var(--sp-4); display: grid; gap: var(--sp-4); }
.card__foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-md) var(--r-md); }
.card--flush .card__body { padding: 0; }

/* Section title with the tamarind rule under it */
.sec-title { display: flex; align-items: baseline; gap: var(--sp-3); }
.sec-title h2 { font-size: var(--fs-md); position: relative; padding-bottom: 6px; }
.sec-title h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--accent); }
.sec-title .aside { margin-left: auto; font-size: var(--fs-sm); }
.sec-title p { color: var(--ink-3); font-size: var(--fs-sm); }

/* Banners */
.banner { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border: 1px solid; border-radius: var(--r-md); font-size: var(--fs-sm); }
.banner .ico { width: 1.25rem; height: 1.25rem; margin-top: 1px; }
.banner__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.banner__text strong { font-size: var(--fs-body); }
.banner__act { margin-left: auto; display: flex; gap: var(--sp-2); align-self: center; }
.banner--info { color: var(--ink); background: var(--info-bg); border-color: var(--info-line); }
.banner--info > .ico { color: var(--info); }
.banner--warn { color: var(--ink); background: var(--warn-bg); border-color: var(--warn-line); }
.banner--warn > .ico { color: var(--warn); }
.banner--danger { color: var(--ink); background: var(--danger-bg); border-color: var(--danger-line); }
.banner--danger > .ico { color: var(--danger); }
.banner--success { color: var(--ink); background: var(--success-bg); border-color: var(--success-line); }
.banner--success > .ico { color: var(--success); }
.banner--blocked { color: var(--ink); background: var(--blocked-bg); border-color: var(--blocked-line); }
.banner--blocked > .ico { color: var(--blocked); }

/* Figures strip (KPIs) — a ruled ledger row, not a grid of identical cards */
.figs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.figs--wrap { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
.fig { padding: var(--sp-4) var(--sp-5); display: grid; gap: 4px; align-content: start; border-left: 1px solid var(--line); min-width: 0; text-decoration: none; color: inherit; }
.fig:first-child { border-left: 0; }
.figs--wrap .fig { border-left: 0; border-top: 1px solid var(--line); }
.figs--wrap .fig:nth-child(-n+2) { border-top: 0; }
.figs--wrap .fig:nth-child(even) { border-left: 1px solid var(--line); }
.fig__label { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.fig__value { font-family: var(--f-head); font-size: var(--fs-xl); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; }
.fig__value--lg { font-size: var(--fs-2xl); }
.fig__value small { font-size: 0.6em; font-weight: 500; color: var(--ink-2); }
.fig__sub { font-size: var(--fs-xs); color: var(--ink-3); }
.fig__sub b { color: var(--ink); }
.fig--alert .fig__value { color: var(--danger); }
.fig--warn .fig__value { color: var(--warn); }

/* ==========================================================================
   Tables (desktop) — right-aligned figures, double rule above totals
   ========================================================================== */
.tbl-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tbl th, .tbl td { padding: 10px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.tbl thead th { background: var(--surface-2); font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.tbl tbody tr:hover { background: #FDF9F3; }
.tbl tbody tr.is-link { cursor: pointer; }
.tbl tbody tr.is-selected { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--accent); }
.tbl tbody tr.is-void td { color: var(--ink-3); }
.tbl tbody tr.is-void .money { text-decoration: line-through; }
.tbl tbody tr.is-local { background: #FFFAF0; }
.tbl tbody tr.is-rejected { background: #FFF6F4; }
.tbl tbody tr.is-group td { background: var(--surface-3); font-weight: 700; font-size: var(--fs-sm); color: var(--ink-2); }
.tbl .num, .tbl .money { text-align: right; white-space: nowrap; }
.tbl .c { text-align: center; }
.tbl .nowrap { white-space: nowrap; }
.tbl .muted { color: var(--ink-3); }
.tbl .w-min { width: 1%; white-space: nowrap; }
.tbl tfoot td, .tbl tfoot th { border-top: 3px double var(--ink-2); border-bottom: 0; background: var(--surface-2); font-weight: 700; }
.tbl tfoot .money, .tbl tfoot .num { font-size: var(--fs-body); }
.tbl td .sub { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.tbl--compact th, .tbl--compact td { padding: 8px 12px; }
.tbl--form { table-layout: fixed; }
.tbl--form th, .tbl--form td { padding: 8px 10px; }
.tbl--form .input, .tbl--form .select { min-width: 0; }
.tbl .check-cell input { width: 20px; height: 20px; accent-color: var(--primary); }
.tbl a.row-link { color: var(--ink); text-decoration: none; font-weight: 600; }
.tbl a.row-link:hover { text-decoration: underline; color: var(--primary); }

.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money--in { color: var(--success); }
.money--out { color: var(--danger); }
.money--key { font-family: var(--f-head); font-weight: 600; }
.qty { font-variant-numeric: tabular-nums; white-space: nowrap; }
.qty small, .money small { color: var(--ink-3); font-size: 0.85em; }
.neg-note { color: var(--success); font-weight: 600; }

/* Totals block (form / detail) */
.totals { display: grid; gap: 6px; }
.totals__row { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: baseline; font-size: var(--fs-sm); color: var(--ink-2); }
.totals__row strong { color: var(--ink); font-size: var(--fs-body); }
.totals__row--grand { border-top: 3px double var(--ink-2); padding-top: var(--sp-2); margin-top: 2px; color: var(--ink); font-weight: 700; font-size: var(--fs-body); }
.totals__row--grand strong { font-family: var(--f-head); font-size: var(--fs-lg); font-weight: 600; }
.totals__row--em { color: var(--ink); font-weight: 700; }

/* Filters toolbar */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.filters .field { min-width: 160px; }
.filters .grow { flex: 1; min-width: 260px; }
.result-sum { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); align-items: baseline; font-size: var(--fs-sm); color: var(--ink-2); }
.result-sum b { color: var(--ink); font-size: var(--fs-body); }

/* Chips (filter chips on phone) */
.chips { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap; text-decoration: none; }
.chip[aria-pressed="true"], .chip.is-on { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.chip .n { font-weight: 700; }

/* Count badge */
.count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; background: var(--surface-3); color: var(--ink-2); }
.count--danger { background: var(--danger); color: #FFFFFF; }
.count--warn { background: var(--warn); color: #FFFFFF; }

/* Tabs */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none; }
.tabs [role="tab"] {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); padding: 0 var(--sp-4);
  border: 0; background: none; font-weight: 600; color: var(--ink-3); cursor: pointer; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -1px; text-decoration: none;
}
.tabs [role="tab"][aria-selected="true"] { color: var(--primary); border-bottom-color: var(--accent); }
[role="tabpanel"][hidden] { display: none; }

/* ==========================================================================
   Mobile lists
   ========================================================================== */
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.list--flush { border-radius: 0; border-left: 0; border-right: 0; }
.row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); min-height: 64px; align-content: center;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: #FDF9F3; }
.row--local { background: #FFFAF0; box-shadow: inset 3px 0 0 var(--warn-line); }
.row--rejected { background: #FFF6F4; box-shadow: inset 3px 0 0 var(--danger); }
.row--void { color: var(--ink-3); }
.row--void .row__amt { text-decoration: line-through; color: var(--ink-3); }
.row--static { cursor: default; }
.row__title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__amt { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row__meta { font-size: var(--fs-xs); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 2px var(--sp-2); align-items: center; min-width: 0; }
.row__side { text-align: right; font-size: var(--fs-xs); color: var(--ink-3); display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.row__full { grid-column: 1 / -1; }
.list-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: 0 var(--sp-1); }
.list-head h2, .list-head h3 { font-size: var(--fs-body); }
.list-head .aside { font-size: var(--fs-xs); color: var(--ink-3); }

/* Line item (sales / purchase form, phone) */
.lines { display: grid; gap: var(--sp-3); }
.line { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-3); position: relative; }
.line--error { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.line--warn { border-color: var(--warn-line); }
.line__top { display: flex; gap: var(--sp-2); align-items: flex-start; }
.line__no { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); min-width: 1.25rem; padding-top: 2px; }
.line__name { font-weight: 600; flex: 1; min-width: 0; }
.line__name small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--ink-3); }
.line__del { width: 40px; height: 40px; margin: -8px -6px 0 0; border: 0; background: none; color: var(--ink-3); display: grid; place-items: center; border-radius: var(--r-sm); cursor: pointer; }
.line__grid { display: grid; grid-template-columns: 104px 1fr; gap: var(--sp-2) var(--sp-3); align-items: end; }
.line__sum { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); color: var(--ink-2); border-top: 1px dashed var(--line-2); padding-top: var(--sp-2); }
.line__sum strong { color: var(--ink); font-size: var(--fs-body); }

/* Key–value */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; color: var(--ink); font-weight: 600; min-width: 0; }
.kv--wide { grid-template-columns: 180px 1fr; }

/* Layout helpers */
.stack { display: grid; gap: var(--sp-4); align-content: start; }
.stack-sm { display: grid; gap: var(--sp-2); align-content: start; }
.stack-lg { display: grid; gap: var(--sp-6); align-content: start; }
.cols { display: grid; gap: var(--sp-6); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.cols--main-side { grid-template-columns: minmax(0, 1fr) 360px; }
.cols--side-main { grid-template-columns: 340px minmax(0, 1fr); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hstack { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.strong { font-weight: 700; }
.right { text-align: right; }
.mt-2 { margin-top: var(--sp-2); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Empty / offline / lock states */
.empty { display: grid; justify-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-10) var(--sp-6); color: var(--ink-2); }
.empty__ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); }
.empty__ico svg { width: 30px; height: 30px; }
.empty__ico--warn { background: var(--warn-bg); color: var(--warn); }
.empty__ico--danger { background: var(--danger-bg); color: var(--danger); }
.empty h2, .empty h3 { font-size: var(--fs-lg); color: var(--ink); }
.empty p { max-width: 34ch; }

/* Progress (first-login cache download) */
.progress { height: 8px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.loadlist { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.loadlist li { display: flex; gap: var(--sp-2); align-items: center; }
.loadlist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

/* ==========================================================================
   Dialog / sheet (shown statically inside a frame)
   ========================================================================== */
.has-overlay { position: relative; }
.scrim { position: absolute; inset: 0; background: rgba(42, 29, 20, 0.48); z-index: 20; display: grid; place-items: center; padding: var(--sp-4); }
.scrim--sheet { place-items: end stretch; padding: 0; }
.dialog { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); width: 100%; max-width: 520px; display: grid; gap: var(--sp-4); padding: var(--sp-6); }
.dialog h2 { font-size: var(--fs-lg); display: flex; gap: var(--sp-3); align-items: center; }
.dialog h2 .ico { width: 1.75rem; height: 1.75rem; }
.dialog__body { display: grid; gap: var(--sp-3); font-size: var(--fs-body); color: var(--ink-2); }
.dialog__consequence { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); display: grid; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink); }
.dialog__consequence li { display: flex; gap: var(--sp-2); }
.dialog__consequence li::before { content: "•"; color: var(--accent); font-weight: 700; }
.dialog__foot { display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; }
.dialog--danger h2 { color: var(--danger); }
.sheet { background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sh-2); padding: var(--sp-3) var(--sp-4) var(--sp-6); display: grid; gap: var(--sp-3); }
.sheet__grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); justify-self: center; }
.sheet h2 { font-size: var(--fs-md); }
.menu-list { display: grid; }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: 0 var(--sp-2); border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--ink); font-weight: 600; text-decoration: none; cursor: pointer; width: 100%; }
.menu-list .ico { color: var(--ink-2); }
.menu-list .aside { margin-left: auto; }

/* Toast */
.toast { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--ink); color: #FFFFFF; font-size: var(--fs-sm); box-shadow: var(--sh-2); }
.toast .ico { color: #9FE0B2; }
.toast--pending .ico { color: #FFD28A; }
.toast a { color: #FFE2C2; font-weight: 700; margin-left: auto; }

/* Avatar */
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--primary); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); flex: none; }
.avatar--muted { background: var(--surface-3); color: var(--ink-3); }

/* Role tag */
.role { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.role--admin { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.role--ketoan { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary); }
.role--thukho { background: #EAF1E6; border-color: #B7CFAE; color: #2F5A22; }
.role--banhang { background: var(--accent-soft); border-color: #EFC48A; color: #7A4300; }

/* Bars (only where a chart answers a real question: "ai bán nhiều nhất") */
.hbars { display: grid; gap: var(--sp-3); }
.hbar { display: grid; grid-template-columns: 150px 1fr 130px; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
.hbar__track { height: 14px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.hbar__fill { height: 100%; background: var(--primary); border-radius: 3px; }
.hbar__val { text-align: right; font-weight: 700; }

/* Stock level meter (tồn vs tối thiểu) */
.meter { display: grid; gap: 3px; min-width: 110px; }
.meter__track { height: 6px; background: var(--surface-3); border-radius: 3px; position: relative; overflow: hidden; }
.meter__fill { height: 100%; background: var(--success); border-radius: 3px; }
.meter__fill--low { background: var(--danger); }
.meter__fill--near { background: var(--accent); }

/* ==========================================================================
   Printed slips (A5 order, A4 statement) — print preview inside frame
   ========================================================================== */
.paper { background: #FFFFFF; color: #111111; border: 1px solid var(--line-2); box-shadow: var(--sh-2); padding: 28px 32px; font-size: 13px; line-height: 1.45; font-family: var(--f-body); }
.paper--a5 { width: 559px; min-height: 794px; }
.paper--a4 { width: 794px; min-height: 1123px; }
.paper h1 { font-size: 18px; text-align: center; letter-spacing: 0.04em; text-transform: uppercase; margin: 8px 0 2px; }
.paper__co { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid #111; padding-bottom: 8px; }
.paper__co b { font-size: 14px; }
.paper table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.paper th, .paper td { border: 1px solid #555; padding: 4px 6px; }
.paper th { background: #F2F2F2; font-size: 12px; }
.paper .num { text-align: right; white-space: nowrap; }
.paper .sig { display: grid; grid-template-columns: 1fr 1fr; text-align: center; margin-top: 18px; gap: 16px; }
.paper .sig span { display: block; font-size: 11px; font-style: italic; color: #444; margin-bottom: 56px; }
.paper__unsynced { border: 2px dashed #111; padding: 6px 10px; text-align: center; font-weight: 700; margin: 6px 0; }

/* Diff (audit log before → after) */
.diff { display: grid; grid-template-columns: max-content 1fr 1fr; gap: 0; font-size: var(--fs-sm); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.diff > div { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.diff .k { color: var(--ink-3); background: var(--surface-2); }
.diff .b { background: #FDF1EF; color: var(--ink); text-decoration: line-through; text-decoration-color: var(--danger); }
.diff .a { background: #EEF7F0; color: var(--ink); font-weight: 600; }
.diff .h { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); background: var(--surface-3); }

/* Pagination */
.pager { display: flex; gap: var(--sp-2); align-items: center; justify-content: space-between; font-size: var(--fs-sm); color: var(--ink-2); }
.pager__btns { display: flex; gap: var(--sp-1); }
.pager__btns a, .pager__btns span { min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink-2); font-weight: 600; }
.pager__btns .is-on { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }

/* Login */
.auth { flex: 1; display: grid; align-content: center; gap: var(--sp-6); padding: var(--sp-6) var(--sp-5); }
.auth__brand { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }
.auth__brand h1 { font-size: var(--fs-xl); }
.auth__brand p { color: var(--ink-3); font-size: var(--fs-sm); }

/* Index page */
.ix { max-width: 1180px; margin: 0 auto; padding: var(--sp-8) var(--sp-6) var(--sp-12); display: grid; gap: var(--sp-8); }
.ix-hero { display: flex; gap: var(--sp-5); align-items: center; }
.ix-hero h1 { font-size: var(--fs-2xl); }
.ix-hero p { color: var(--ink-2); max-width: 70ch; }
.ix-group { display: grid; gap: var(--sp-3); }
.ix-group h2 { font-size: var(--fs-lg); }
.ix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--sp-3); }
.ix-card { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--ink); position: relative; }
.ix-card:hover { border-color: var(--primary-line); box-shadow: var(--sh-1); }
.ix-card__no { font-family: var(--f-head); font-weight: 700; color: var(--primary); font-size: var(--fs-sm); }
.ix-card__name { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-md); }
.ix-card__route { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.ix-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); color: var(--ink-2); }
.off { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 700; border: 1px solid; }
.off--W { color: var(--success); background: var(--success-bg); border-color: var(--success-line); }
.off--R { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.off--N { color: var(--ink-2); background: var(--surface-3); border-color: var(--line-2); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.sw { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); font-size: var(--fs-xs); }
.sw i { display: block; height: 44px; }
.sw span { display: block; padding: 6px 8px; }
.sw code { font-family: var(--f-mono); color: var(--ink-3); }