/* ==========================================================================
   Sổ Điều Hành TNT — nguyenthai design system (mockup source of truth)

   Identity (PRODUCT.md → Brand Personality):
   - Neutrals come from the powder-coated cabinet shell, RAL 7035 light grey
     (hue ≈165 in OKLCH, very low chroma). The rail IS the cabinet door.
   - Copper is the busbar: primary action, current selection, progress fill.
   - Signal yellow is the warning label on the cabinet: used only for
     "Cần quyết định" and hazard notes. Red/amber/green are pilot lamps and
     always carry a text label (never colour alone).
   - Bahnschrift (DIN 1451 lineage, shipped with Windows) is the nameplate
     voice: page titles, document codes, figures. Segoe UI is the reading
     voice: labels, body, buttons. No web fonts, no remote assets.
   - Calm by default: normal rows are grey; only late / short / negative /
     waiting-for-decision states light up.
   ========================================================================== */

:root {
  /* ---- Neutrals: RAL 7035 lineage ---- */
  --c-bg:            oklch(0.958 0.004 165);   /* #eff2f0 page */
  --c-rail:          oklch(0.918 0.007 165);   /* #e0e5e3 cabinet door (rail) */
  --c-rail-2:        oklch(0.885 0.008 165);   /* rail hover / pressed */
  --c-surface:       oklch(1 0 0);             /* #ffffff */
  --c-surface-2:     oklch(0.978 0.003 165);   /* #f6f8f7 table head, foot */
  --c-sunk:          oklch(0.94 0.005 165);    /* #e8ecea wells, tracks */
  --c-line:          oklch(0.88 0.006 165);    /* #d4d9d6 hairlines */
  --c-line-strong:   oklch(0.76 0.008 165);    /* #adb3b0 dividers */
  --c-field:         oklch(0.64 0.010 200);    /* input border ≥3:1 on white */

  /* ---- Ink: RAL 7016 anthracite ---- */
  --c-ink:           oklch(0.25 0.012 230);    /* #1c2326 14:1 on bg */
  --c-ink-2:         oklch(0.38 0.012 230);    /* #3c4448 8.8:1 */
  --c-ink-3:         oklch(0.49 0.012 230);    /* #5a6266 5.5:1 on bg, 4.9:1 on rail */
  --c-ink-inv:       oklch(1 0 0);

  /* ---- Copper (busbar) ---- */
  --c-copper:        oklch(0.50 0.115 48);     /* #964c20 white text 6.3:1 */
  --c-copper-hover:  oklch(0.44 0.105 46);     /* #803d18 */
  --c-copper-ink:    oklch(0.45 0.10 48);      /* #81411d text on tint */
  --c-copper-bright: oklch(0.60 0.13 52);      /* busbar fill, non-text ≥3:1 */
  --c-copper-line:   oklch(0.72 0.09 55);      /* soft rules */
  --c-copper-soft:   oklch(0.955 0.022 60);    /* selected row, current node */

  /* ---- Signal (warning label RAL 1003) ---- */
  --c-signal:        oklch(0.86 0.165 90);     /* #fbcb2f */
  --c-signal-soft:   oklch(0.965 0.05 95);

  /* ---- Lamps + semantic text/bg (all text pairs ≥5.6:1) ---- */
  --c-danger:        oklch(0.50 0.17 27);      /* #b02b27 */
  --c-danger-bg:     oklch(0.955 0.025 25);
  --c-danger-line:   oklch(0.82 0.07 25);
  --c-warn:          oklch(0.48 0.105 65);     /* #854f06 */
  --c-warn-bg:       oklch(0.96 0.045 88);
  --c-warn-line:     oklch(0.84 0.09 80);
  --c-ok:            oklch(0.46 0.10 150);     /* #266739 */
  --c-ok-bg:         oklch(0.955 0.03 150);
  --c-ok-line:       oklch(0.82 0.06 150);
  --c-info:          oklch(0.45 0.085 245);    /* #275981 */
  --c-info-bg:       oklch(0.955 0.02 245);
  --c-info-line:     oklch(0.83 0.04 245);
  --c-lamp-red:      oklch(0.60 0.21 27);
  --c-lamp-amber:    oklch(0.80 0.16 75);
  --c-lamp-green:    oklch(0.66 0.16 150);
  --c-lamp-blue:     oklch(0.62 0.12 245);

  /* ---- Chart series (distinguishable without hue) ---- */
  --c-series-1:      oklch(0.38 0.012 230);    /* anthracite: doanh thu */
  --c-series-2:      oklch(0.60 0.13 52);      /* copper: lợi nhuận */
  --c-series-3:      oklch(0.78 0.01 165);     /* grey: kỳ trước / phụ */

  /* ---- Type ---- */
  --font-ui:   "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, "Noto Sans", Arial, sans-serif;
  --font-data: "Bahnschrift", "DIN Alternate", "DIN 2014", "Roboto Condensed", "sans-serif-condensed", "Segoe UI", system-ui, sans-serif;
  --font-doc:  "Times New Roman", Times, "Noto Serif", "Liberation Serif", serif;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;   /* office body */
  --fs-15: 15px;
  --fs-16: 16px;   /* phone body (minimum on phone) */
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --lh-tight: 1.2;
  --lh: 1.5;

  /* ---- Space (4px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;

  /* ---- Shape ---- */
  --r-1: 2px;   /* nameplates, tags, meters */
  --r-2: 4px;   /* controls */
  --r-3: 6px;   /* panels */
  --r-4: 10px;  /* phone sheets */
  --r-pill: 999px;

  /* ---- Elevation: flat at rest, shadow only for overlays ---- */
  --sh-0: 0 1px 0 oklch(0.25 0.012 230 / 0.04);
  --sh-pop: 0 10px 30px oklch(0.25 0.012 230 / 0.18), 0 2px 6px oklch(0.25 0.012 230 / 0.10);
  --sh-up: 0 -6px 24px oklch(0.25 0.012 230 / 0.14);
  --focus: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-copper);

  /* ---- Layout ---- */
  --rail-w: 236px;
  --top-h: 52px;
  --tap: 48px;            /* phone touch target (gloves) */
  --m-bar-h: 56px;
  --m-nav-h: 64px;

  /* ---- Z scale ---- */
  --z-sticky: 10;
  --z-rail: 20;
  --z-pop: 30;
  --z-scrim: 40;
  --z-modal: 50;
  --z-toast: 60;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  line-height: var(--lh);
  color: var(--c-ink);
  background: var(--c-bg);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); color: var(--c-ink); text-wrap: balance; }
h1 { font-family: var(--font-data); font-weight: 600; font-size: var(--fs-28); letter-spacing: -0.005em; }
h2 { font-family: var(--font-data); font-weight: 600; font-size: var(--fs-20); }
h3 { font-size: var(--fs-16); font-weight: 600; }
h4 { font-size: var(--fs-14); font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--c-copper); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--c-copper-hover); }
small { font-size: var(--fs-12); }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-4) 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-2); }
[hidden] { display: none !important; }
::selection { background: var(--c-copper-soft); }

.skip { position: absolute; left: 8px; top: -60px; z-index: var(--z-toast); background: var(--c-ink); color: #fff; padding: 8px 14px; border-radius: var(--r-2); text-decoration: none; font-weight: 600; }
.skip:focus { top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Figures & codes (nameplate voice) ---- */
.num, td.num, th.num { text-align: right; white-space: nowrap; }
.num, .fig { font-family: var(--font-data); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; letter-spacing: 0.005em; }
.fig-lg { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: var(--fs-20); font-weight: 600; }
.neg { color: var(--c-danger); }
.muted { color: var(--c-ink-3); }
.ink-2 { color: var(--c-ink-2); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.right { text-align: right; }
.upper { text-transform: uppercase; }
.strike { text-decoration: line-through; color: var(--c-ink-3); }

/* ---- Icons (hand-drawn 24px stroke set, see icon sprite in each page) ---- */
.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.i-sm { width: 15px; height: 15px; vertical-align: -3px; }
.i-lg { width: 22px; height: 22px; }
.i-xl { width: 28px; height: 28px; }
.i-fill { fill: currentColor; stroke: none; }

/* ==========================================================================
   Desktop shell: cabinet-door rail + top bar
   ========================================================================== */
.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }

.rail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: var(--z-rail);
  display: flex; flex-direction: column;
  background: var(--c-rail);
  border-right: 1px solid var(--c-line-strong);
  scrollbar-width: thin; scrollbar-color: var(--c-line-strong) transparent;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; text-decoration: none; color: var(--c-ink); }
.brand-mark {
  width: 36px; height: 36px; flex: none; border-radius: var(--r-1);
  background: var(--c-ink); display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08);
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-name { display: block; font-family: var(--font-data); font-weight: 600; font-size: 17px; line-height: 1.1; letter-spacing: 0.01em; }
.brand-sub { display: block; font-size: var(--fs-12); color: var(--c-ink-3); line-height: 1.3; margin-top: 2px; }

.nav { padding: 4px 10px 16px; flex: 1; }
.nav-group { margin-top: 14px; }
.nav-group:first-child { margin-top: 2px; }
.nav-label {
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 6px; font-size: var(--fs-12); font-weight: 600; color: var(--c-ink-3);
}
.nav-key {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  font-family: var(--font-data); font-size: 11px; font-weight: 600; color: var(--c-ink-2);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-1); background: oklch(0.95 0.005 165);
}
.nav-label::after { content: ""; flex: 1; height: 1px; background: var(--c-line-strong); opacity: .7; }
.nav a {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; margin: 1px 0;
  color: var(--c-ink-2); text-decoration: none; font-weight: 500; font-size: var(--fs-14);
  border: 1px solid transparent; border-radius: var(--r-2);
  transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.nav a .i { color: var(--c-ink-3); }
.nav a:hover { background: var(--c-rail-2); color: var(--c-ink); }
.nav a[aria-current="page"] {
  background: var(--c-surface); color: var(--c-ink); font-weight: 600;
  border-color: var(--c-line-strong);
  box-shadow: 0 1px 0 oklch(0.25 0.012 230 / 0.06);
}
.nav a[aria-current="page"] .i { color: var(--c-copper); }
.nav-count {
  margin-left: auto; min-width: 22px; padding: 0 6px; height: 20px; display: inline-grid; place-items: center;
  font-family: var(--font-data); font-size: var(--fs-12); font-weight: 600;
  color: var(--c-copper-ink); background: var(--c-copper-soft); border: 1px solid var(--c-copper-line); border-radius: var(--r-pill);
}
.nav-count.is-alarm { color: var(--c-danger); background: var(--c-danger-bg); border-color: var(--c-danger-line); }

.rail-foot { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--c-line-strong); }
.rail-foot .who { min-width: 0; flex: 1; }
.rail-foot .who strong { display: block; font-size: var(--fs-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-foot .who small { display: block; color: var(--c-ink-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--c-ink); color: #fff; font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.02em;
}
.avatar-sm { width: 24px; height: 24px; font-size: 10.5px; }
.avatar-lg { width: 44px; height: 44px; font-size: var(--fs-15); }
.avatar.is-copper { background: var(--c-copper); }
.avatar.is-grey { background: var(--c-ink-3); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: 16px; height: var(--top-h); padding: 0 32px;
  background: oklch(0.958 0.004 165 / 0.94); backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--c-line);
}
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--c-ink-3); min-width: 0; white-space: nowrap; }
.crumbs a { color: var(--c-ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--c-ink); text-decoration: underline; }
.crumbs .sep { color: var(--c-line-strong); }
.crumbs [aria-current] { color: var(--c-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.topbar .grow { flex: 1; }
.gsearch { position: relative; width: 340px; }
.gsearch .i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--c-ink-3); pointer-events: none; }
.gsearch input {
  width: 100%; height: 34px; padding: 0 44px 0 34px; font: inherit; font-size: var(--fs-13);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-2); background: var(--c-surface); color: var(--c-ink);
}
.gsearch input::placeholder { color: var(--c-ink-3); }
.gsearch input:focus { outline: none; border-color: var(--c-copper); box-shadow: var(--focus); }
.kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--font-data); font-size: 11px; color: var(--c-ink-3); border: 1px solid var(--c-line-strong); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; background: var(--c-surface-2); }
.updated { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--c-ink-3); white-space: nowrap; }

/* ==========================================================================
   Page scaffolding
   ========================================================================== */
.page { padding: 24px 32px 56px; width: 100%; }
.page-narrow { max-width: 1040px; }
.page-mid { max-width: 1240px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.page-head .lede { margin-top: 6px; color: var(--c-ink-2); max-width: 72ch; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: none; }

.section { margin-top: 28px; }
.section:first-child { margin-top: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.section-head h2 { font-size: var(--fs-18); }
.section-head .meta { font-size: var(--fs-13); color: var(--c-ink-3); }

.cols { display: grid; gap: 20px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-side { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.cols-side-l { grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
.cols-wide-side { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }
.row { display: flex; align-items: center; gap: 8px; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.between { justify-content: space-between; }
.stack > * + * { margin-top: 12px; }
.stack-sm > * + * { margin-top: 6px; }
.stack-lg > * + * { margin-top: 20px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0 !important; }
.grow { flex: 1 1 auto; min-width: 0; }
.w-full { width: 100%; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  font: inherit; font-size: var(--fs-14); font-weight: 600; line-height: 1;
  color: var(--c-ink); background: var(--c-surface);
  border: 1px solid var(--c-field); border-radius: var(--r-2);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out);
}
.btn:hover { background: var(--c-surface-2); border-color: var(--c-ink-3); color: var(--c-ink); }
.btn:active { background: var(--c-sunk); }
.btn[disabled], .btn.is-disabled { color: var(--c-ink-3); background: var(--c-sunk); border-color: var(--c-line-strong); cursor: not-allowed; }
.btn-primary { background: var(--c-copper); border-color: var(--c-copper); color: var(--c-ink-inv); }
.btn-primary:hover { background: var(--c-copper-hover); border-color: var(--c-copper-hover); color: var(--c-ink-inv); }
.btn-primary:active { background: oklch(0.40 0.095 45); }
.btn-primary[disabled], .btn-primary.is-disabled { background: var(--c-sunk); border-color: var(--c-line-strong); color: var(--c-ink-3); }
.btn-dark { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-ink-inv); }
.btn-dark:hover { background: var(--c-ink-2); border-color: var(--c-ink-2); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--c-ink-2); }
.btn-ghost:hover { background: var(--c-sunk); border-color: transparent; }
.btn-danger { color: var(--c-danger); border-color: var(--c-danger-line); }
.btn-danger:hover { background: var(--c-danger-bg); border-color: var(--c-danger); color: var(--c-danger); }
.btn-ok { background: var(--c-ok); border-color: var(--c-ok); color: #fff; }
.btn-ok:hover { background: oklch(0.40 0.095 150); color: #fff; }
.btn-link { background: none; border: 0; min-height: 0; padding: 0; color: var(--c-copper); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.btn-link:hover { background: none; color: var(--c-copper-hover); }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: var(--fs-13); }
.btn-lg { min-height: 44px; padding: 0 20px; font-size: var(--fs-15); }
.btn-xl { min-height: 56px; padding: 0 22px; font-size: var(--fs-18); border-radius: var(--r-3); }
.btn-block { width: 100%; }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }
.btn.is-loading { color: var(--c-ink-inv); position: relative; }
.btn .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid oklch(1 0 0 / 0.4); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-2) 0 0 var(--r-2); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-2) var(--r-2) 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-size: var(--fs-13); font-weight: 600; color: var(--c-ink-2); }
.req::after { content: " *"; color: var(--c-danger); }
.input, .select, .textarea {
  width: 100%; min-height: 36px; padding: 7px 10px;
  font: inherit; font-size: var(--fs-14); color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-field); border-radius: var(--r-2);
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--c-ink-3); }
.textarea { min-height: 76px; resize: vertical; line-height: 1.45; }
.select {
  appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233c4448' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-copper); box-shadow: var(--focus); }
.input[readonly], .input:disabled, .select:disabled, .textarea[readonly] { background: var(--c-sunk); color: var(--c-ink-2); border-color: var(--c-line-strong); }
.input.num, .input[inputmode="numeric"], .input[inputmode="decimal"] { text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.input-sm { min-height: 30px; padding: 4px 8px; font-size: var(--fs-13); }
.is-invalid, .input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--c-danger) !important; background: oklch(0.99 0.006 25); }
.hint { font-size: var(--fs-12); color: var(--c-ink-3); }
.err { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-13); color: var(--c-danger); font-weight: 500; }
.err .i { margin-top: 1px; }
.affix { display: flex; align-items: stretch; }
.affix .input { border-top-right-radius: 0; border-bottom-right-radius: 0; min-width: 0; }
.affix .suffix, .affix .prefix {
  display: inline-flex; align-items: center; padding: 0 10px; white-space: nowrap;
  font-size: var(--fs-13); color: var(--c-ink-2); background: var(--c-sunk);
  border: 1px solid var(--c-field); border-left: 0; border-radius: 0 var(--r-2) var(--r-2) 0;
}
.affix .prefix { border-left: 1px solid var(--c-field); border-right: 0; border-radius: var(--r-2) 0 0 var(--r-2); font-family: var(--font-data); font-weight: 600; color: var(--c-ink); }
.affix .prefix + .input { border-radius: 0 var(--r-2) var(--r-2) 0; }
.check, .radio { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: var(--fs-14); line-height: 1.4; }
.check input, .radio input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--c-copper); flex: none; }
.search { position: relative; }
.search .i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--c-ink-3); pointer-events: none; }
.search .input { padding-left: 34px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
.form-grid .span-2, .form-grid-3 .span-2 { grid-column: span 2; }
.form-grid-3 .span-3 { grid-column: span 3; }
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset legend { padding: 0; margin-bottom: 8px; font-size: var(--fs-13); font-weight: 600; color: var(--c-ink-2); }

/* Segmented control */
.seg { display: inline-flex; background: var(--c-sunk); border: 1px solid var(--c-line-strong); border-radius: var(--r-2); padding: 2px; gap: 2px; }
.seg a, .seg button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px;
  font-size: var(--fs-13); font-weight: 600; color: var(--c-ink-2); text-decoration: none;
  background: none; border: 0; border-radius: 3px; cursor: pointer; white-space: nowrap;
}
.seg a:hover, .seg button:hover { color: var(--c-ink); background: oklch(1 0 0 / 0.6); }
.seg [aria-pressed="true"], .seg [aria-current="true"], .seg .is-on { background: var(--c-surface); color: var(--c-ink); box-shadow: 0 1px 2px oklch(0.25 0.012 230 / 0.14); }

/* Filter bar */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-bottom: 14px; }
.filters .field { min-width: 150px; }
.filters .field-wide { flex: 1; min-width: 260px; }
.filters .field .select, .filters .field .input { min-height: 34px; padding-top: 5px; padding-bottom: 5px; font-size: var(--fs-13); }
.chip-filter {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px;
  font-size: var(--fs-13); font-weight: 600; color: var(--c-ink-2); text-decoration: none;
  background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); white-space: nowrap;
}
.chip-filter:hover { border-color: var(--c-ink-3); color: var(--c-ink); }
.chip-filter[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.chip-filter .n { font-family: var(--font-data); font-weight: 600; opacity: .8; }

/* Switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-14); }
.switch .track { width: 36px; height: 20px; border-radius: 999px; background: var(--c-line-strong); position: relative; flex: none; transition: background-color .15s var(--ease-out); }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .15s var(--ease-out); }
.switch.is-on .track { background: var(--c-copper); }
.switch.is-on .track::after { transform: translateX(16px); }

/* ==========================================================================
   Panels, definition grids
   ========================================================================== */
.panel { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-3); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--c-line); min-height: 50px; }
.panel-head h2, .panel-head h3 { font-family: var(--font-ui); font-size: var(--fs-15); font-weight: 600; }
.panel-head .meta { font-size: var(--fs-13); color: var(--c-ink-3); }
.panel-body { padding: 16px; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--c-line); background: var(--c-surface-2); border-radius: 0 0 var(--r-3) var(--r-3); font-size: var(--fs-13); color: var(--c-ink-3); }
.panel-flush > .panel-body { padding: 0; }
.panel-sunk { background: var(--c-surface-2); }

.dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: var(--fs-14); }
.dl dt { color: var(--c-ink-3); }
.dl dd { margin: 0; color: var(--c-ink); font-weight: 500; min-width: 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--c-line); }
.facts > div { padding: 12px 16px 12px 0; }
.facts dt { font-size: var(--fs-12); color: var(--c-ink-3); margin-bottom: 2px; }
.facts dd { margin: 0; font-weight: 600; font-size: var(--fs-14); }
.facts dd .fig { font-size: var(--fs-16); }

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrap { overflow: auto; border: 1px solid var(--c-line); border-radius: var(--r-3); background: var(--c-surface); }
.table-wrap.is-tall { max-height: 560px; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-14); }
.tbl th, .tbl td { padding: 9px 12px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: middle; }
.tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--c-surface-2); color: var(--c-ink-2);
  font-size: var(--fs-12); font-weight: 600; line-height: 1.3;
  border-bottom: 1px solid var(--c-line-strong); white-space: nowrap;
}
.tbl thead tr.th-group th { border-bottom-color: var(--c-line); text-align: center; font-size: var(--fs-12); color: var(--c-ink); }
.tbl thead tr + tr th { top: 31px; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: oklch(0.975 0.006 60); }
.tbl tr.is-selected > td { background: var(--c-copper-soft); }
.tbl tr.is-void td { color: var(--c-ink-3); }
.tbl tr.is-void td .strike-cell { text-decoration: line-through; }
.tbl tr.grp td { background: var(--c-sunk); font-weight: 600; color: var(--c-ink); }
.tbl tr.grp-2 td { background: var(--c-surface-2); font-weight: 600; }
.tbl tr.sub td { font-weight: 600; background: var(--c-surface-2); }
.tbl tr.total td { font-weight: 700; border-top: 2px solid var(--c-ink); background: var(--c-surface); }
.tbl tr.total-2 td { font-weight: 700; background: var(--c-surface); border-bottom: 3px double var(--c-ink); }
.tbl tr.alarm td { background: oklch(0.985 0.01 25); }
.tbl tr.alarm:hover td { background: oklch(0.97 0.018 25); }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl td.center, .tbl th.center { text-align: center; }
.tbl td.tight, .tbl th.tight { width: 1%; white-space: nowrap; }
.tbl td.wrap { white-space: normal; min-width: 220px; }
.tbl .sub-line { display: block; font-size: var(--fs-12); color: var(--c-ink-3); margin-top: 2px; font-weight: 400; }
.tbl a.row-link { color: var(--c-ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.tbl .ct { font-family: var(--font-data); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.tbl a.row-link:hover { color: var(--c-copper); text-decoration: underline; }
.tbl .col-sep { border-left: 1px solid var(--c-line); }
.tbl .col-sep-strong { border-left: 1px solid var(--c-line-strong); }
.tbl-compact th, .tbl-compact td { padding: 6px 10px; }
.tbl-compact { font-size: var(--fs-13); }
.tbl-cells td input.input-sm { min-width: 70px; }
.tbl tfoot td { background: var(--c-surface-2); font-weight: 600; border-top: 1px solid var(--c-line-strong); border-bottom: 0; }
.tbl-foot-note { padding: 10px 14px; font-size: var(--fs-13); color: var(--c-ink-3); border-top: 1px solid var(--c-line); background: var(--c-surface-2); }

/* Tree column (single-line-diagram bus lines) */
.tbl td.t { position: relative; padding-left: calc(14px + var(--lvl, 0) * 22px); }
.tbl td.t[style*="--lvl"]::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(14px + (var(--lvl) - 1) * 22px + 7px);
  width: 1px; background: var(--c-line-strong);
}
.tbl td.t[style*="--lvl"]::after {
  content: ""; position: absolute; top: 50%;
  left: calc(14px + (var(--lvl) - 1) * 22px + 7px);
  width: 11px; height: 1px; background: var(--c-line-strong);
}
.tbl tr.t-last td.t::before { bottom: 50%; }
.stt { display: inline-block; min-width: 26px; font-family: var(--font-data); font-weight: 600; color: var(--c-ink-2); }
.tbl td.stt { display: table-cell; }

/* ==========================================================================
   Codes, status, lamps, signs
   ========================================================================== */
.code {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-data); font-size: var(--fs-13); font-weight: 500; letter-spacing: 0.02em; line-height: 18px;
  padding: 1px 6px; color: var(--c-ink); white-space: nowrap;
  background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-1);
  text-decoration: none;
}
a.code:hover { border-color: var(--c-copper); color: var(--c-copper-ink); }
.code-plain { font-family: var(--font-data); font-size: 0.98em; letter-spacing: 0.02em; white-space: nowrap; }

/* Nameplate: engraved white-on-anthracite label with two rivets */
.plate {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-data); font-weight: 600; font-size: var(--fs-18); letter-spacing: 0.04em; line-height: 1;
  color: #fff; background: var(--c-ink); padding: 8px 18px; border-radius: var(--r-1);
  background-image:
    radial-gradient(circle at 7px 50%, oklch(0.55 0.01 230) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 7px) 50%, oklch(0.55 0.01 230) 0 2px, transparent 2.5px);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08);
  white-space: nowrap;
}
.plate-sm { font-size: var(--fs-14); padding: 5px 14px; }
.plate-light { color: var(--c-ink); background-color: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line-strong);
  background-image:
    radial-gradient(circle at 7px 50%, var(--c-line-strong) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 7px) 50%, var(--c-line-strong) 0 2px, transparent 2.5px); }

/* Workflow state chip (document state) */
.st {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; min-height: 22px;
  font-size: var(--fs-12); font-weight: 600; line-height: 1.2; white-space: nowrap;
  color: var(--c-ink-2); background: var(--c-surface-2); border: 1px solid var(--c-line-strong); border-radius: var(--r-1);
}
.st .i { width: 13px; height: 13px; vertical-align: 0; }
.st-info { color: var(--c-info); background: var(--c-info-bg); border-color: var(--c-info-line); }
.st-ok { color: var(--c-ok); background: var(--c-ok-bg); border-color: var(--c-ok-line); }
.st-warn { color: var(--c-warn); background: var(--c-warn-bg); border-color: var(--c-warn-line); }
.st-danger { color: var(--c-danger); background: var(--c-danger-bg); border-color: var(--c-danger-line); }
.st-copper { color: var(--c-copper-ink); background: var(--c-copper-soft); border-color: var(--c-copper-line); }
.st-dark { color: #fff; background: var(--c-ink); border-color: var(--c-ink); }
.st-void { color: var(--c-ink-3); background: var(--c-sunk); border-style: dashed; }

/* Pilot lamp (alarm level, always with text) */
.lamp { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-13); font-weight: 600; color: var(--c-ink-2); white-space: nowrap; line-height: 1.2; }
.lamp::before {
  content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%;
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-ink-3);
}
.lamp-red { color: var(--c-danger); }
.lamp-red::before { background: radial-gradient(circle at 35% 35%, oklch(1 0 0 / 0.6) 0 18%, transparent 24%), var(--c-lamp-red); box-shadow: 0 0 0 1px oklch(0.42 0.15 27), 0 0 0 3px oklch(0.60 0.21 27 / 0.16); }
.lamp-amber { color: var(--c-warn); }
.lamp-amber::before { background: radial-gradient(circle at 35% 35%, oklch(1 0 0 / 0.7) 0 18%, transparent 24%), var(--c-lamp-amber); box-shadow: 0 0 0 1px oklch(0.58 0.12 70), 0 0 0 3px oklch(0.80 0.16 75 / 0.22); }
.lamp-green { color: var(--c-ok); }
.lamp-green::before { background: radial-gradient(circle at 35% 35%, oklch(1 0 0 / 0.6) 0 18%, transparent 24%), var(--c-lamp-green); box-shadow: 0 0 0 1px oklch(0.48 0.11 150); }
.lamp-blue { color: var(--c-info); }
.lamp-blue::before { background: radial-gradient(circle at 35% 35%, oklch(1 0 0 / 0.6) 0 18%, transparent 24%), var(--c-lamp-blue); box-shadow: 0 0 0 1px oklch(0.45 0.09 245); }
.lamp-off { color: var(--c-ink-3); font-weight: 500; }
.lamp-lg { font-size: var(--fs-15); gap: 9px; }
.lamp-lg::before { width: 14px; height: 14px; }

/* Warning label (yellow, black border) — only for decisions & hazards */
.sign {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; min-height: 22px;
  font-size: var(--fs-12); font-weight: 700; line-height: 1.2; color: var(--c-ink); white-space: nowrap;
  background: var(--c-signal); border: 1px solid var(--c-ink); border-radius: var(--r-1);
}
.sign .i { width: 13px; height: 13px; vertical-align: 0; stroke-width: 2.2; }
/* Provisional tag (dashed): Chưa báo giá, Tạm tính, Chi tiết hóa sau */
.tag-tmp {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; min-height: 20px;
  font-size: var(--fs-12); font-weight: 600; color: var(--c-ink-2); white-space: nowrap;
  background: repeating-linear-gradient(135deg, var(--c-surface) 0 5px, var(--c-sunk) 5px 7px);
  border: 1px dashed var(--c-ink-3); border-radius: var(--r-1);
}
/* Small neutral pill (counts, roles) */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; min-height: 20px; font-size: var(--fs-12); font-weight: 600; color: var(--c-ink-2); background: var(--c-sunk); border-radius: var(--r-pill); white-space: nowrap; }
.pill-copper { color: var(--c-copper-ink); background: var(--c-copper-soft); }
.delta-up { color: var(--c-danger); font-weight: 600; }
.delta-down { color: var(--c-ok); font-weight: 600; }

/* ==========================================================================
   Meters (segmented %, 10 cells = the 10/20/…/100 steps)
   ========================================================================== */
.meter {
  --p: 0%; --fill: var(--c-copper-bright);
  display: inline-block; width: 100px; height: 10px; vertical-align: middle;
  background: linear-gradient(90deg, var(--fill) var(--p), var(--c-sunk) var(--p));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
          mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
  box-shadow: none;
}
.meter-lg { width: 100%; height: 16px; }
.meter-sm { width: 70px; height: 8px; }
.meter.is-done { --fill: var(--c-lamp-green); }
.meter.is-ink { --fill: var(--c-ink-2); }
.meter-row { display: inline-flex; align-items: center; gap: 8px; }
.meter-row .fig { min-width: 46px; text-align: right; font-weight: 600; }
.bar { height: 6px; background: var(--c-sunk); border-radius: var(--r-1); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--c-copper-bright); }
.bar.is-ink > span { background: var(--c-ink-2); }

/* ==========================================================================
   Tabs
   ========================================================================== */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--c-line-strong); overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; margin-bottom: -1px;
  font-size: var(--fs-14); font-weight: 600; color: var(--c-ink-3); text-decoration: none; white-space: nowrap;
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.tabs a:hover, .tabs button:hover { color: var(--c-ink); }
.tabs [aria-current="page"], .tabs [aria-selected="true"] { color: var(--c-ink); border-bottom-color: var(--c-copper); }
.tabs .count { font-family: var(--font-data); font-size: var(--fs-12); font-weight: 600; padding: 0 6px; min-width: 20px; text-align: center; border-radius: var(--r-pill); background: var(--c-sunk); color: var(--c-ink-2); }
.tabs .count.is-alarm { background: var(--c-danger-bg); color: var(--c-danger); }

/* ==========================================================================
   Alerts & toasts (full border + tint + leading icon; no side stripes)
   ========================================================================== */
.alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px;
  font-size: var(--fs-14); color: var(--c-ink); background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-2);
}
.alert > .i { margin-top: 1px; }
.alert .alert-body { flex: 1; min-width: 0; }
.alert .alert-body > * + * { margin-top: 4px; }
.alert strong { font-weight: 700; }
.alert .alert-actions { display: flex; gap: 8px; flex: none; align-self: center; }
.alert-info { background: var(--c-info-bg); border-color: var(--c-info-line); }
.alert-info > .i { color: var(--c-info); }
.alert-warn { background: var(--c-warn-bg); border-color: var(--c-warn-line); }
.alert-warn > .i { color: var(--c-warn); }
.alert-danger { background: var(--c-danger-bg); border-color: var(--c-danger-line); }
.alert-danger > .i { color: var(--c-danger); }
.alert-ok { background: var(--c-ok-bg); border-color: var(--c-ok-line); }
.alert-ok > .i { color: var(--c-ok); }
.alert-lock { background: var(--c-sunk); }
.alert-hazard { background: var(--c-signal-soft); border-color: var(--c-ink); }
.alert-hazard > .i { color: var(--c-ink); }

.toast-host { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--c-ink); color: #fff; border-radius: var(--r-2); box-shadow: var(--sh-pop); font-weight: 500; max-width: min(560px, calc(100vw - 32px)); pointer-events: auto; animation: rise .22s var(--ease-out); }
.toast .i { color: var(--c-lamp-green); }
.toast a { color: #fff; font-weight: 600; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ==========================================================================
   Readout strip (instrument row, replaces KPI-card grids)
   ========================================================================== */
.readouts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-3); }
.ro { display: block; padding: 14px 18px 14px; color: inherit; text-decoration: none; min-width: 0; }
.ro + .ro { border-left: 1px solid var(--c-line); }
a.ro:hover { background: var(--c-surface-2); }
a.ro:hover .ro-label { color: var(--c-ink); }
.ro-label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--c-ink-2); font-weight: 600; }
.ro-value { margin-top: 6px; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: var(--fs-28); font-weight: 600; line-height: 1.05; letter-spacing: -0.005em; white-space: nowrap; }
.ro-value small { font-size: var(--fs-15); font-weight: 500; color: var(--c-ink-3); margin-left: 2px; }
.ro-sub { margin-top: 6px; font-size: var(--fs-13); color: var(--c-ink-3); }
.ro.is-alarm .ro-value { color: var(--c-danger); }
.ro.is-warn .ro-value { color: var(--c-warn); }
.readouts-sm .ro-value { font-size: var(--fs-20); }

/* ==========================================================================
   Document header + lineage (one mã CT, one truth)
   ========================================================================== */
.doc-head { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-3); margin-bottom: 0; }
.doc-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 18px 20px 14px; }
.doc-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.doc-head h1 { font-size: var(--fs-24); }
.doc-sub { margin-top: 6px; color: var(--c-ink-2); display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-14); }
.doc-sub .sep { color: transparent; width: 1px; background: var(--c-line-strong); align-self: stretch; margin: 3px 0; overflow: hidden; }
.doc-head .facts { padding: 0 20px; }
.doc-head .facts > div { padding: 12px 20px 12px 0; }
.doc-head .facts > div + div { padding-left: 20px; border-left: 1px solid var(--c-line); }
.doc-head + .tabs { margin-top: 4px; }
.doc-wrap > .tabs { background: transparent; margin-top: 12px; }

.lineage { display: flex; align-items: center; flex-wrap: wrap; gap: 0; padding: 10px 20px; border-top: 1px solid var(--c-line); background: var(--c-surface-2); border-radius: 0 0 var(--r-3) var(--r-3); font-size: var(--fs-12); }
.lineage-label { color: var(--c-ink-3); font-weight: 600; margin-right: 12px; }
.lineage ol { display: flex; align-items: center; flex-wrap: wrap; list-style: none; gap: 0; }
.lineage li { display: flex; align-items: center; }
.lineage li + li::before { content: ""; width: 16px; height: 1px; background: var(--c-copper-line); margin: 0 2px; }
.lineage .node { display: inline-flex; flex-direction: column; padding: 3px 8px; border: 1px solid var(--c-line-strong); border-radius: var(--r-1); background: var(--c-surface); text-decoration: none; color: var(--c-ink); line-height: 1.25; }
.lineage .node small { font-size: 10.5px; color: var(--c-ink-3); font-weight: 600; }
.lineage .node b { font-family: var(--font-data); font-weight: 600; font-size: var(--fs-13); letter-spacing: 0.02em; }
.lineage a.node:hover { border-color: var(--c-copper); }
.lineage .node[aria-current="page"] { border-color: var(--c-copper); background: var(--c-copper-soft); box-shadow: inset 0 0 0 1px var(--c-copper); }
.lineage .node.is-empty { border-style: dashed; background: transparent; color: var(--c-ink-3); }

/* ==========================================================================
   Single-line-diagram BOM (busbar with taps)
   ========================================================================== */
.sld { position: relative; padding-left: 28px; }
.sld::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 22px; width: 4px; border-radius: 2px; background: var(--c-copper-bright); }
.sld-source { position: relative; display: flex; align-items: center; gap: 10px; margin-left: -28px; padding: 0 0 12px; }
.sld-source .src-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--c-ink); display: grid; place-items: center; color: #fff; flex: none; box-shadow: 0 0 0 3px var(--c-bg); }
.sld-branch { position: relative; margin-top: 10px; }
.sld-branch::before { content: ""; position: absolute; left: -19px; top: 22px; width: 19px; height: 2px; background: var(--c-copper-bright); }
.sld-branch::after { content: ""; position: absolute; left: -23px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-copper); }
.sld-branch > details { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-3); }
.sld-branch summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 14px;
  border-radius: var(--r-3);
}
.sld-branch summary::-webkit-details-marker { display: none; }
.sld-branch summary:hover { background: var(--c-surface-2); }
.sld-branch summary .chev { transition: transform .15s var(--ease-out); color: var(--c-ink-3); }
.sld-branch details[open] > summary .chev { transform: rotate(90deg); }
.sld-branch details[open] > summary { border-bottom: 1px solid var(--c-line); border-radius: var(--r-3) var(--r-3) 0 0; }
.sld-branch .ngan-name { font-family: var(--font-data); font-weight: 600; font-size: var(--fs-15); letter-spacing: 0.02em; }
.sld-branch .tbl thead th { top: 0; }
.sld-branch .tbl { font-size: var(--fs-13); }

/* ==========================================================================
   Overlays: scrim, drawer, dialog, popover
   ========================================================================== */
.scrim { position: fixed; inset: 0; background: oklch(0.25 0.012 230 / 0.42); z-index: var(--z-scrim); animation: fade .18s var(--ease-out); }
@keyframes fade { from { opacity: 0; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: var(--z-modal);
  display: flex; flex-direction: column; background: var(--c-surface); box-shadow: var(--sh-pop);
  border-left: 1px solid var(--c-line-strong); animation: slidein .22s var(--ease-out);
}
.drawer-wide { width: min(780px, 100vw); }
@keyframes slidein { from { transform: translateX(24px); opacity: 0; } }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--c-line); }
.drawer-head h2 { font-size: var(--fs-18); }
.drawer-head p { margin-top: 4px; color: var(--c-ink-3); font-size: var(--fs-13); }
.drawer-body { flex: 1; overflow: auto; padding: 20px; }
.drawer-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--c-line); background: var(--c-surface-2); }
.drawer-foot .grow { color: var(--c-ink-3); font-size: var(--fs-13); }

.dialog {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: var(--z-modal);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  background: var(--c-surface); border-radius: var(--r-3); box-shadow: var(--sh-pop); border: 1px solid var(--c-line-strong);
  animation: pop .2s var(--ease-out);
}
.dialog-wide { width: min(720px, calc(100vw - 32px)); }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -48%); } }
.dialog-head { padding: 18px 22px 10px; }
.dialog-head h2 { font-size: var(--fs-20); }
.dialog-head p { margin-top: 6px; color: var(--c-ink-2); }
.dialog-body { padding: 8px 22px 18px; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--c-line); background: var(--c-surface-2); border-radius: 0 0 var(--r-3) var(--r-3); }

.popover { position: absolute; z-index: var(--z-pop); background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-3); box-shadow: var(--sh-pop); min-width: 280px; }
.menu { list-style: none; padding: 4px; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; text-decoration: none; color: var(--c-ink); border-radius: var(--r-2); text-align: left; cursor: pointer; font-size: var(--fs-14); }
.menu a:hover, .menu button:hover, .menu .is-active { background: var(--c-copper-soft); }
.menu .menu-sub { display: block; font-size: var(--fs-12); color: var(--c-ink-3); }
.menu hr { margin: 4px 0; }

/* ==========================================================================
   Timeline / log, stepper, handover
   ========================================================================== */
.timeline { list-style: none; position: relative; }
.timeline > li { position: relative; padding: 0 0 16px 26px; }
.timeline > li::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: -6px; width: 1px; background: var(--c-line-strong); }
.timeline > li:last-child::before { display: none; }
.timeline > li::after { content: ""; position: absolute; left: 1px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-ink-3); }
.timeline > li.is-key::after { border-color: var(--c-copper); background: var(--c-copper); }
.timeline > li.is-bad::after { border-color: var(--c-danger); }
.timeline > li.is-good::after { border-color: var(--c-ok); background: var(--c-ok); }
.timeline .t-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: var(--fs-13); color: var(--c-ink-3); }
.timeline .t-head strong { color: var(--c-ink); font-size: var(--fs-14); }
.timeline .t-body { margin-top: 3px; color: var(--c-ink); }

.stepper { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; list-style: none; counter-reset: st; }
.stepper li { position: relative; padding: 0 12px 0 0; counter-increment: st; }
.stepper li::before { content: ""; position: absolute; left: 30px; right: 0; top: 13px; height: 2px; background: var(--c-line-strong); }
.stepper li:last-child::before { display: none; }
.stepper .dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface); border: 2px solid var(--c-line-strong); font-family: var(--font-data); font-weight: 600; font-size: var(--fs-13); color: var(--c-ink-3); }
.stepper .dot::after { content: counter(st); }
.stepper .s-label { margin-top: 6px; font-weight: 600; font-size: var(--fs-13); color: var(--c-ink-2); }
.stepper .s-meta { font-size: var(--fs-12); color: var(--c-ink-3); }
.stepper li.is-done::before { background: var(--c-copper-bright); }
.stepper li.is-done .dot { background: var(--c-copper); border-color: var(--c-copper); color: #fff; }
.stepper li.is-done .dot::after { content: "✓"; font-family: var(--font-ui); }
.stepper li.is-now .dot { border-color: var(--c-copper); color: var(--c-copper-ink); box-shadow: 0 0 0 4px var(--c-copper-soft); }
.stepper li.is-now .s-label { color: var(--c-ink); }

.handover { list-style: none; border: 1px solid var(--c-line); border-radius: var(--r-3); background: var(--c-surface); }
.handover li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; }
.handover li + li { border-top: 1px solid var(--c-line); }
.handover .dept { font-weight: 600; }
.handover .when { font-size: var(--fs-13); color: var(--c-ink-3); }

/* ==========================================================================
   Upload / files
   ========================================================================== */
.dropzone {
  display: grid; place-items: center; text-align: center; gap: 10px; padding: 36px 24px;
  background: var(--c-surface); border: 1.5px dashed var(--c-field); border-radius: var(--r-3); color: var(--c-ink-2);
}
.dropzone.is-over { border-color: var(--c-copper); background: var(--c-copper-soft); }
.dropzone .i-xl { color: var(--c-ink-3); }
.dropzone strong { font-size: var(--fs-16); color: var(--c-ink); }
.files { list-style: none; }
.files li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--c-line); }
.files li:first-child { border-top: 0; }
.file-ico { width: 34px; height: 40px; flex: none; border-radius: var(--r-1); border: 1px solid var(--c-line-strong); background: var(--c-surface-2); display: grid; place-items: end center; padding-bottom: 4px; font-family: var(--font-data); font-weight: 600; font-size: 10px; color: var(--c-ink-2); position: relative; }
.file-ico::before { content: ""; position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; background: linear-gradient(225deg, var(--c-bg) 50%, var(--c-line-strong) 50%); }
.file-ico.pdf { color: var(--c-danger); }
.file-ico.xls { color: var(--c-ok); }
.file-ico.doc { color: var(--c-info); }
.file-ico.img { color: var(--c-copper-ink); }
.file-meta { font-size: var(--fs-12); color: var(--c-ink-3); }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumb { width: 72px; height: 72px; border-radius: var(--r-2); border: 1px solid var(--c-line-strong); background:
  linear-gradient(135deg, oklch(0.84 0.01 165), oklch(0.72 0.012 200)); position: relative; overflow: hidden; }
.thumb::after { content: ""; position: absolute; inset: auto 8px 8px 8px; height: 22px; border-radius: 2px; background: oklch(0.93 0.004 165); box-shadow: 0 -18px 0 -6px oklch(0.6 0.02 60); }
.thumb.is-doc { background: linear-gradient(180deg, #fff, oklch(0.95 0.004 165)); }
.thumb.is-doc::after { inset: 10px; height: auto; background: repeating-linear-gradient(180deg, oklch(0.8 0.005 230) 0 1px, transparent 1px 6px); box-shadow: none; }
.thumb-add { display: grid; place-items: center; color: var(--c-ink-3); background: var(--c-surface); border-style: dashed; }
.thumb-add::after { display: none; }

/* ==========================================================================
   Empty / loading / blocked
   ========================================================================== */
.empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 40px 24px; color: var(--c-ink-2); }
.empty .i-xl { color: var(--c-ink-3); }
.empty strong { font-size: var(--fs-16); color: var(--c-ink); }
.empty p { max-width: 52ch; color: var(--c-ink-3); }
.skel { display: block; height: 12px; border-radius: 2px; background: linear-gradient(90deg, var(--c-sunk) 0%, var(--c-surface-2) 50%, var(--c-sunk) 100%); background-size: 200% 100%; animation: sk 1.3s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* ==========================================================================
   Charts (inline SVG + data table)
   ========================================================================== */
.chart { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--c-line-strong); stroke-width: 1; }
.chart .grid { stroke: var(--c-line); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .lbl { font-family: var(--font-data); font-size: 11px; fill: var(--c-ink-3); }
.chart .val { font-family: var(--font-data); font-size: 11px; fill: var(--c-ink-2); font-weight: 600; }
.chart .s1 { fill: var(--c-series-1); }
.chart .s2 { fill: var(--c-series-2); }
.chart .s3 { fill: var(--c-series-3); }
.chart .now { fill: var(--c-copper-soft); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-13); color: var(--c-ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.legend .k1 { background: var(--c-series-1); }
.legend .k2 { background: var(--c-series-2); }
.legend .k3 { background: var(--c-series-3); }

/* ==========================================================================
   Work list (Việc của tôi) — calm rows, alarms lit
   ========================================================================== */
.worklist { list-style: none; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-3); }
.work-group + .work-group { border-top: 1px solid var(--c-line-strong); }
.work-group-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; }
.work-group-head h3 { font-size: var(--fs-14); font-weight: 600; }
.work-group-head .n { font-family: var(--font-data); font-weight: 600; font-size: var(--fs-14); min-width: 24px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--c-sunk); color: var(--c-ink); }
.work-group-head .n.is-alarm { background: var(--c-danger); color: #fff; }
.work-group-head .n.is-copper { background: var(--c-copper); color: #fff; }
.work-row { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 16px; color: inherit; text-decoration: none; border-top: 1px solid var(--c-line); }
.work-group-head + .work-row { border-top: 0; }
.work-row:hover { background: oklch(0.975 0.006 60); }
.work-row > :first-child { justify-self: start; }
.work-row .w-title { font-weight: 600; color: var(--c-ink); }
.work-row .w-sub { display: block; font-size: var(--fs-13); color: var(--c-ink-3); font-weight: 400; }
.work-row .w-when { font-size: var(--fs-13); color: var(--c-ink-3); white-space: nowrap; }
.work-row .chev { color: var(--c-ink-3); }

/* Quick tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tile { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-3); text-decoration: none; color: var(--c-ink); font-weight: 600; }
.tile:hover { border-color: var(--c-copper-line); background: var(--c-copper-soft); }
.tile .i { color: var(--c-copper); }

/* ==========================================================================
   Login
   ========================================================================== */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-door {
  position: relative; background: var(--c-rail); border-right: 1px solid var(--c-line-strong);
  display: flex; flex-direction: column; justify-content: space-between; padding: 48px 56px;
  overflow: hidden;
}
.auth-door::before { /* louver vents stamped into the door */
  content: ""; position: absolute; right: 64px; bottom: 72px; width: 168px; height: 150px;
  background: repeating-linear-gradient(180deg,
    transparent 0 9px,
    oklch(0.70 0.010 165) 9px 11px,
    oklch(0.80 0.008 165) 11px 15px,
    oklch(0.97 0.004 165) 15px 16px,
    transparent 16px 19px);
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
}
.auth-door::after { /* door seam */
  content: ""; position: absolute; top: 28px; bottom: 28px; left: 24px; width: 1px; background: var(--c-line-strong);
  box-shadow: 1px 0 0 oklch(0.97 0.004 165);
}
.auth-latch { position: absolute; right: 26px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  background: radial-gradient(circle, oklch(0.88 0.006 165) 0 55%, oklch(0.72 0.01 165) 56% 62%, oklch(0.93 0.005 165) 63%);
  box-shadow: 0 1px 0 oklch(1 0 0 / .6), inset 0 1px 2px oklch(0.25 0.012 230 / .25); }
.auth-latch::after { content: ""; position: absolute; left: 50%; top: 7px; bottom: 7px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: oklch(0.45 0.01 230); }
.auth-sld { list-style: none; position: relative; margin-top: 28px; padding-left: 30px; }
.auth-sld::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 10px; width: 4px; border-radius: 2px; background: var(--c-copper-bright); }
.auth-sld li { position: relative; display: flex; align-items: baseline; gap: 10px; min-height: 30px; font-size: var(--fs-14); color: var(--c-ink-2); }
.auth-sld li::before { content: ""; position: absolute; left: -20px; top: 10px; width: 14px; height: 2px; background: var(--c-copper-bright); }
.auth-sld li b { font-family: var(--font-data); font-weight: 600; font-size: var(--fs-16); color: var(--c-ink); letter-spacing: .01em; }
.auth-sld li.is-key b::after { content: " · mã CT"; font-weight: 500; color: var(--c-copper-ink); font-size: var(--fs-13); }
.auth-brand { display: flex; align-items: center; gap: 14px; }
.auth-brand .brand-mark { width: 48px; height: 48px; }
.auth-brand .brand-mark svg { width: 30px; height: 30px; }
.auth-title { font-family: var(--font-data); font-weight: 600; font-size: 22px; line-height: 1.1; }
.auth-co { color: var(--c-ink-2); font-size: var(--fs-14); }
.auth-claim { max-width: 22ch; font-family: var(--font-data); font-size: 34px; font-weight: 600; line-height: 1.18; color: var(--c-ink); letter-spacing: -0.005em; }
.auth-foot { font-size: var(--fs-12); color: var(--c-ink-3); }
.auth-form-side { display: grid; place-items: center; padding: 48px 32px; background: var(--c-bg); }
.auth-card { width: min(400px, 100%); }
.auth-card h1 { font-size: var(--fs-24); }
.auth-card .lede { color: var(--c-ink-2); margin-top: 6px; }
.auth-card form { margin-top: 24px; }
.auth-card .input { min-height: 44px; font-size: var(--fs-15); }
.auth-card .btn-primary { min-height: 46px; font-size: var(--fs-15); }
.auth-note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: var(--fs-13); color: var(--c-ink-3); }
.pw { position: relative; }
.pw .input { padding-right: 76px; }
.pw .btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 34px; }

/* ==========================================================================
   Phone shell (390 × 844 reference) — quản đốc, QC, kho, giao hàng
   ========================================================================== */
body.phone { font-size: var(--fs-16); background: var(--c-bg); }
.m-app { min-height: 100vh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; background: var(--c-bg); position: relative; }
.m-bar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: 4px; height: var(--m-bar-h); padding: 0 6px 0 4px;
  background: var(--c-surface); border-bottom: 1px solid var(--c-line);
}
.m-bar .m-back { width: var(--tap); height: var(--tap); display: grid; place-items: center; color: var(--c-ink); border-radius: var(--r-2); text-decoration: none; flex: none; }
.m-bar .m-title { flex: 1; min-width: 0; padding-left: 4px; }
.m-bar .m-title strong { display: block; font-size: var(--fs-18); font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-bar .m-title small { display: block; font-size: var(--fs-13); color: var(--c-ink-3); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-bar .m-act { width: var(--tap); height: var(--tap); display: grid; place-items: center; color: var(--c-ink-2); border-radius: var(--r-2); border: 0; background: none; flex: none; }
.m-brandbar { display: flex; align-items: center; gap: 10px; padding-left: 10px; }
.m-brandbar .brand-mark { width: 32px; height: 32px; }
.m-brandbar .brand-mark svg { width: 20px; height: 20px; }
.m-body { flex: 1; padding: 16px 16px calc(var(--m-nav-h) + 28px); }
.m-body.has-savebar { padding-bottom: 120px; }
.m-body h2 { font-size: var(--fs-18); }
.m-section { margin-top: 22px; }
.m-section:first-child { margin-top: 0; }
.m-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.m-section-head h2 { font-family: var(--font-ui); font-size: var(--fs-16); font-weight: 600; }
.m-section-head .meta { font-size: var(--fs-14); color: var(--c-ink-3); }

.m-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--c-surface); border-top: 1px solid var(--c-line-strong);
  max-width: 560px; margin: 0 auto;
}
.m-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--c-ink-3); font-size: var(--fs-12); font-weight: 600; position: relative; }
.m-nav a .i { width: 24px; height: 24px; }
.m-nav a[aria-current="page"] { color: var(--c-copper); }
.m-nav a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--c-copper); }
.m-nav .dot { position: absolute; top: 9px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--c-danger); color: #fff; font-family: var(--font-data); font-size: 11px; display: grid; place-items: center; }

.m-list { list-style: none; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-3); }
.m-item { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; color: inherit; text-decoration: none; }
.m-list > li + li .m-item, .m-list > li + li > .m-item, .m-item + .m-item { border-top: 1px solid var(--c-line); }
.m-item:active { background: var(--c-copper-soft); }
.m-item .m-main { flex: 1; min-width: 0; }
.m-item .m-main strong { display: block; font-size: var(--fs-16); font-weight: 600; line-height: 1.3; }
.m-item .m-main small { display: block; font-size: var(--fs-14); color: var(--c-ink-3); line-height: 1.35; margin-top: 2px; }
.m-item .m-side { text-align: right; flex: none; }
.m-item .chev { color: var(--c-ink-3); }
.m-count { font-family: var(--font-data); font-weight: 600; font-size: var(--fs-24); line-height: 1; min-width: 40px; text-align: center; }
.m-count.is-alarm { color: var(--c-danger); }

.m-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-3); padding: 14px; }
.m-card + .m-card { margin-top: 10px; }
.m-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: var(--fs-15); }
.m-kv dt { color: var(--c-ink-3); }
.m-kv dd { margin: 0; text-align: right; font-weight: 600; }

/* Big % step buttons (glove-friendly) */
.pct-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pct-grid button, .pct-grid a {
  min-height: 56px; border: 1px solid var(--c-field); background: var(--c-surface); border-radius: var(--r-3);
  font-family: var(--font-data); font-size: var(--fs-20); font-weight: 600; color: var(--c-ink); cursor: pointer;
  display: grid; place-items: center; text-decoration: none;
}
.pct-grid .is-prev { background: var(--c-sunk); color: var(--c-ink-3); border-style: dashed; }
.pct-grid [aria-pressed="true"] { background: var(--c-copper); border-color: var(--c-copper); color: #fff; box-shadow: 0 0 0 3px var(--c-copper-soft); }
.stage-pick { display: grid; gap: 8px; }
.stage-opt { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; min-height: 64px; padding: 10px 14px; background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-3); text-decoration: none; color: var(--c-ink); }
.stage-opt strong { font-size: var(--fs-16); }
.stage-opt small { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: var(--fs-14); color: var(--c-ink-3); }
.stage-opt[aria-current="true"] { border-color: var(--c-copper); box-shadow: inset 0 0 0 1px var(--c-copper); background: var(--c-copper-soft); }
.stage-opt.is-done { background: var(--c-surface-2); }

.passfail { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.passfail button { min-height: 52px; border-radius: var(--r-3); border: 1px solid var(--c-field); background: var(--c-surface); font-size: var(--fs-16); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; color: var(--c-ink-2); }
.passfail .pass[aria-pressed="true"] { background: var(--c-ok); border-color: var(--c-ok); color: #fff; }
.passfail .fail[aria-pressed="true"] { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }

.m-savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); max-width: 560px; margin: 0 auto;
  display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface); border-top: 1px solid var(--c-line-strong); box-shadow: var(--sh-up);
}
.m-savebar .btn { min-height: 56px; font-size: var(--fs-17, 17px); flex: 1; }
.m-savebar .btn-secondary { flex: 0 0 auto; }

body.phone .input, body.phone .select, body.phone .textarea { min-height: var(--tap); font-size: var(--fs-16); padding: 10px 12px; }
body.phone .field > label, body.phone .label { font-size: var(--fs-15); }
body.phone .btn { min-height: var(--tap); font-size: var(--fs-16); }
body.phone .btn-sm { min-height: 40px; font-size: var(--fs-14); }
body.phone .alert { font-size: var(--fs-15); }
body.phone .st { font-size: var(--fs-13); min-height: 24px; }
body.phone .lamp { font-size: var(--fs-14); }
body.phone .code { font-size: var(--fs-14); }
body.phone .tbl { font-size: var(--fs-15); }
body.phone .tabs a { font-size: var(--fs-15); padding: 12px 12px; }
body.phone .hint { font-size: var(--fs-13); }
body.phone .err { font-size: var(--fs-14); }

.m-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal); max-width: 560px; margin: 0 auto; background: var(--c-surface); border-radius: var(--r-4) var(--r-4) 0 0; box-shadow: var(--sh-up); padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); animation: up .22s var(--ease-out); }
.m-sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--c-line-strong); margin: 4px auto 12px; }
@keyframes up { from { transform: translateY(16px); opacity: 0; } }

.stepper-v { list-style: none; }
.stepper-v li { position: relative; padding: 0 0 18px 40px; min-height: 44px; }
.stepper-v li::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--c-line-strong); }
.stepper-v li:last-child::before { display: none; }
.stepper-v .dot { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface); border: 2px solid var(--c-line-strong); font-family: var(--font-data); font-weight: 600; font-size: var(--fs-13); color: var(--c-ink-3); }
.stepper-v li.is-done::before { background: var(--c-copper-bright); }
.stepper-v li.is-done .dot { background: var(--c-copper); border-color: var(--c-copper); color: #fff; }
.stepper-v li.is-now .dot { border-color: var(--c-copper); color: var(--c-copper-ink); box-shadow: 0 0 0 4px var(--c-copper-soft); }
.stepper-v strong { display: block; font-size: var(--fs-16); line-height: 28px; }
.stepper-v small { display: block; font-size: var(--fs-14); color: var(--c-ink-3); }

.offline { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--c-ink); color: #fff; font-size: var(--fs-15); }
.offline .i { color: var(--c-signal); }

/* ==========================================================================
   Print preview + A4 documents (black-and-white safe)
   ========================================================================== */
body.print-view { background: oklch(0.86 0.006 165); }
.print-bar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: var(--c-surface); border-bottom: 1px solid var(--c-line-strong);
}
.print-bar .title { font-weight: 600; }
.print-bar .title small { display: block; font-weight: 400; color: var(--c-ink-3); font-size: var(--fs-12); }
.print-stage { padding: 28px 24px 64px; display: grid; justify-items: center; gap: 24px; }
.sheet {
  width: 210mm; min-height: 297mm; padding: 14mm 14mm 16mm; background: #fff; color: #000;
  box-shadow: 0 2px 10px oklch(0.25 0.012 230 / 0.18); font-family: var(--font-doc); font-size: 12pt; line-height: 1.38;
  position: relative;
}
.sheet.landscape { width: 297mm; min-height: 210mm; }
.sheet h1, .sheet h2, .sheet h3 { font-family: var(--font-doc); color: #000; letter-spacing: 0; }
.sheet .doc-title { text-align: center; font-size: 16pt; font-weight: 700; text-transform: uppercase; margin: 10px 0 2px; }
.sheet .doc-no { text-align: center; font-style: italic; font-size: 11pt; }
.sheet .qh { text-align: center; font-weight: 700; font-size: 12pt; line-height: 1.3; }
.sheet .qh small { display: block; font-size: 12pt; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sheet .lh { display: grid; grid-template-columns: 30mm 1fr; gap: 6mm; align-items: center; padding-bottom: 4mm; border-bottom: 1.5pt solid #000; }
.sheet .lh-logo { height: 18mm; border: 1pt solid #000; display: grid; place-items: center; font-family: var(--font-data); font-weight: 600; font-size: 16pt; letter-spacing: .06em; }
.sheet .lh-co { font-size: 10.5pt; line-height: 1.35; }
.sheet .lh-co b { font-size: 12.5pt; text-transform: uppercase; }
.sheet .kv { display: grid; grid-template-columns: 34mm 1fr; gap: 1mm 4mm; font-size: 11pt; }
.sheet .kv2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10mm; }
.sheet .qh-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 0 6mm; align-items: start; }
.sheet .qh-row .qh { font-size: 11.5pt; }
.sheet .qh-row .qh + .qh { white-space: nowrap; }
.sheet p { margin: 0 0 2mm; text-wrap: auto; }
.sheet .clause { margin-top: 3mm; }
.sheet .clause h3 { font-size: 12pt; font-weight: 700; margin-bottom: 1mm; }
.sheet .note { font-size: 10pt; font-style: italic; }
.ptbl { width: 100%; border-collapse: collapse; font-size: 10pt; margin: 3mm 0; }
.ptbl th, .ptbl td { border: 0.6pt solid #000; padding: 1.2mm 1.6mm; vertical-align: top; }
.ptbl th { font-weight: 700; text-align: center; background: #fff; }
.ptbl td.num, .ptbl th.num { text-align: right; font-family: var(--font-doc); white-space: nowrap; }
.ptbl td.c { text-align: center; }
.ptbl tr.g td { font-weight: 700; }
.ptbl tr.g2 td { font-weight: 700; font-style: italic; }
.ptbl tr.t td { font-weight: 700; }
.ptbl .tmp { font-style: italic; }
.ptbl thead { display: table-header-group; }
.ptbl tr { break-inside: avoid; }
.signs { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 6mm; margin-top: 8mm; text-align: center; font-size: 11pt; break-inside: avoid; }
.signs b { display: block; text-transform: uppercase; }
.signs i { display: block; font-size: 10pt; }
.signs .space { height: 24mm; }
.sheet .page-no { position: absolute; bottom: 7mm; right: 14mm; font-size: 9pt; }
.sheet .words { font-style: italic; }
.sheet .stamp { display: inline-block; border: 1pt solid #000; padding: 0 2mm; font-family: var(--font-ui); font-size: 9pt; font-weight: 700; letter-spacing: .02em; }
.sheet .rcpt { display: grid; grid-template-columns: repeat(4, 1fr); border: 0.6pt solid #000; margin-top: 4mm; font-size: 10pt; }
.sheet .rcpt > div { padding: 2mm; text-align: center; min-height: 26mm; }
.sheet .rcpt > div + div { border-left: 0.6pt solid #000; }

@page { size: A4; margin: 0; }
@media print {
  body.print-view { background: #fff; }
  .print-bar, .no-print { display: none !important; }
  .print-stage { padding: 0; gap: 0; display: block; }
  .sheet { box-shadow: none; margin: 0; break-after: page; }
}

/* ==========================================================================
   Responsive: office down to 1280 still full; tablet collapses rail
   ========================================================================== */
@media (max-width: 1360px) {
  .page { padding-left: 24px; padding-right: 24px; }
  .topbar { padding: 0 24px; }
  .gsearch { width: 280px; }
  .cols-side { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1100px) {
  .app { grid-template-columns: 72px minmax(0, 1fr); }
  .brand-text, .nav-label span:not(.nav-key), .nav a span, .nav-count, .rail-foot .who { display: none; }
  .nav a { justify-content: center; padding: 0; }
  .nav-label { justify-content: center; padding: 0 0 6px; }
  .nav-label::after { display: none; }
  .brand { justify-content: center; }
  .cols-side, .cols-wide-side, .cols-side-l { grid-template-columns: minmax(0, 1fr); }
  .readouts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ro + .ro { border-left: 0; }
  .ro { border-top: 1px solid var(--c-line); }
}
@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .page-head { flex-direction: column; }
  .cols-2, .cols-3, .form-grid, .form-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .gsearch { display: none; }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-door { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* Decision cell (giao ban: Giám đốc ghi quyết định ngay trên dòng) */
.decide { display: grid; gap: 6px; justify-items: start; }
.decide p { font-size: var(--fs-13); color: var(--c-ink); font-weight: 500; }
.decide-row { display: flex; gap: 6px; width: 100%; }
.decide-row .input { flex: 1; min-width: 0; }
.decided { font-size: var(--fs-13); color: var(--c-ok); font-weight: 600; }

/* ==========================================================================
   Shop-floor line: production stages as taps on one copper bus (S16, S18)
   ========================================================================== */
.flowline { position: relative; display: grid; grid-template-columns: repeat(var(--n, 9), minmax(0, 1fr)); gap: 0 4px; padding: 14px 12px 14px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-3); list-style: none; }
.flowline::before { content: ""; position: absolute; left: calc(100% / var(--n, 9) / 2 + 12px); right: calc(100% / var(--n, 9) / 2 + 12px); top: 48px; height: 3px; background: var(--c-copper-bright); border-radius: 2px; }
.flowline .stage { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; color: var(--c-ink); text-decoration: none; border-radius: var(--r-2); padding-bottom: 4px; }
.flowline a.stage:hover .stage-name { color: var(--c-copper-ink); }
.flowline .stage-name { font-size: var(--fs-12); font-weight: 600; color: var(--c-ink-2); line-height: 1.25; min-height: 30px; display: grid; align-items: end; }
.flowline .stage-node { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--c-surface); border: 3px solid var(--c-copper); }
.flowline .stage.is-hot .stage-node { background: var(--c-copper); box-shadow: 0 0 0 4px var(--c-copper-soft); }
.flowline .stage.is-idle .stage-node { border-color: var(--c-line-strong); }
.flowline .stage-n { font-family: var(--font-data); font-weight: 600; font-size: var(--fs-24); line-height: 1; margin-top: 2px; }
.flowline .stage.is-idle .stage-n { color: var(--c-ink-3); }
.flowline .stage-sub { font-size: var(--fs-12); color: var(--c-ink-3); line-height: 1.3; }
.flowline .stage-w { font-family: var(--font-data); font-size: var(--fs-11); color: var(--c-ink-3); }
@media (max-width: 1100px) { .flowline { overflow-x: auto; grid-template-columns: repeat(var(--n, 9), 110px); } }

/* A4 landscape sheet (purchase request with comparison columns) */
@page land { size: A4 landscape; margin: 12mm; }
.sheet.sheet-land { width: 297mm; min-height: 210mm; page: land; }

/* Filters placed among page actions keep their natural width */
.page-actions .select, .page-actions .input { width: auto; flex: none; }

/* Phone: checkbox and radio rows are full tap targets */
body.phone .check, body.phone .radio { min-height: var(--tap); align-items: center; }
body.phone .check input, body.phone .radio input { width: 22px; height: 22px; margin: 0; }