/* ==========================================================================
   Sổ Công Lương HSS (tenant phamngocvinh) — shared stylesheet for every mockup.
   One file: tokens + every shared component. Plain CSS, no remote assets.

   Identity (PRODUCT.md: Kỷ luật · Minh bạch · Chắc tay · Gần gũi)
   - Tím than: the navy-indigo of the guards' uniform carries the chrome and
     every primary action.
   - Vàng phản quang: the hi-vis yellow-green of the reflective vest, used only
     as a marker on the dark chrome (current month step, today, brand mark)
     and as a pale tint for "today" in the grids. Never as text on white.
   - Sổ trực ca: ruled ledger tables, tabular numbers, double rule under
     totals, square-cornered badges. No shields, camouflage, red-black alarm.
   Type: the platform UI font (Segoe UI / Roboto / SF). Mid-range Android on a
   weak connection loads nothing extra (PRODUCT.md "Kết nối yếu").
   Office screens are drawn at 1440×900 (body.desk), phone screens at 390×844
   (body.phone), print previews at 1440×900 (body.desk.print-preview).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Brand: tím than ---- */
  --tt-975: oklch(0.205 0.05 278);
  --tt-950: oklch(0.24 0.06 278);
  --tt-900: oklch(0.30 0.085 278);
  --tt-800: oklch(0.36 0.105 278);
  --tt-700: oklch(0.44 0.12 278);
  --tt-600: oklch(0.51 0.125 278);
  --tt-300: oklch(0.78 0.06 278);
  --tt-200: oklch(0.86 0.035 278);
  --tt-100: oklch(0.93 0.024 278);
  --tt-050: oklch(0.967 0.012 278);

  /* ---- Accent: vàng phản quang ---- */
  --vis: oklch(0.90 0.175 116);
  --vis-soft: oklch(0.968 0.055 113);
  --vis-line: oklch(0.86 0.11 116);
  --vis-ink: oklch(0.40 0.085 122);

  /* ---- Neutrals (tinted toward the brand hue) ---- */
  --bg: oklch(0.966 0.006 278);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.982 0.004 278);
  --sunk: oklch(0.945 0.008 278);
  --line: oklch(0.905 0.009 278);
  --line-soft: oklch(0.94 0.006 278);
  --line-strong: oklch(0.80 0.014 278);
  --ink: oklch(0.215 0.03 278);
  --ink-2: oklch(0.37 0.03 278);
  --ink-3: oklch(0.485 0.025 278);
  --ink-inv: oklch(0.995 0 0);
  --on-dark-2: oklch(0.86 0.03 278);
  --on-dark-3: oklch(0.76 0.04 278);

  /* ---- Status (always paired with a word or an icon) ---- */
  --ok: oklch(0.45 0.115 152);
  --ok-bg: oklch(0.956 0.034 152);
  --ok-line: oklch(0.84 0.07 152);
  --warn: oklch(0.49 0.11 62);
  --warn-bg: oklch(0.963 0.045 84);
  --warn-line: oklch(0.85 0.09 78);
  --danger: oklch(0.505 0.175 27);
  --danger-bg: oklch(0.958 0.024 25);
  --danger-line: oklch(0.84 0.07 25);
  --lock: oklch(0.40 0.02 278);
  --lock-bg: oklch(0.935 0.009 278);

  /* ---- Type ---- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", "Roboto Mono", Consolas, "Liberation Mono", monospace;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --lh-tight: 1.25;
  --lh: 1.5;

  /* ---- Space (4 px 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: 56px;

  /* ---- Shape & depth ---- */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;
  --r-pill: 999px;
  --sh-1: 0 1px 0 oklch(0.215 0.03 278 / 0.04), 0 1px 2px oklch(0.215 0.03 278 / 0.05);
  --sh-2: 0 6px 18px oklch(0.215 0.03 278 / 0.12), 0 1px 3px oklch(0.215 0.03 278 / 0.08);
  --sh-3: 0 18px 48px oklch(0.205 0.05 278 / 0.24), 0 2px 8px oklch(0.205 0.05 278 / 0.1);
  --ring: 0 0 0 3px var(--tt-100);

  /* ---- Layering ---- */
  --z-sticky: 10;
  --z-header: 20;
  --z-dropdown: 30;
  --z-scrim: 40;
  --z-drawer: 50;
  --z-dialog: 60;
  --z-toast: 70;

  /* ---- Layout ---- */
  --top-h: 52px;
  --side-w: 232px;
  --p-top-h: 56px;
  --p-tab-h: 66px;
  --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);
  font-size: var(--fs-14);
  line-height: var(--lh);
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 650; text-wrap: balance; }
h1 { font-size: var(--fs-24); letter-spacing: -0.012em; }
h2 { font-size: var(--fs-18); letter-spacing: -0.005em; }
h3 { font-size: var(--fs-15); }
h4 { font-size: var(--fs-14); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--tt-700); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--tt-900); }
small { font-size: var(--fs-12); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-4) 0; }
button { font: inherit; color: inherit; }
img, svg { display: block; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--tt-700); outline-offset: 2px; border-radius: var(--r-1); }
.top :focus-visible, .p-top :focus-visible, .on-dark :focus-visible { outline-color: var(--vis); }

.skip { position: absolute; left: 8px; top: -60px; z-index: var(--z-toast); padding: 8px 14px; background: var(--vis); color: var(--tt-975); font-weight: 650; border-radius: var(--r-2); text-decoration: none; }
.skip:focus { top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- Utilities ---- */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.code { font-family: var(--mono); font-size: 0.9em; letter-spacing: 0; }
.muted { color: var(--ink-3); }
.ink-2 { color: var(--ink-2); }
.strong { font-weight: 650; }
.nowrap { white-space: nowrap; }
.neg { color: var(--danger); }
.pos { color: var(--ok); }
.row { display: flex; align-items: center; gap: var(--s-2); }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-5); }
.mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); }
.gap-4 { gap: var(--s-4); }
.w-full { width: 100%; }

/* ---- Icons ---- */
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 15px; height: 15px; }
.ico-lg { width: 22px; height: 22px; }
.ico-xl { width: 28px; height: 28px; }
.ico-fill { fill: currentColor; stroke: none; }

/* ==========================================================================
   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(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); 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(--surface-2); border-color: var(--ink-3); color: var(--ink); }
.btn:active { background: var(--sunk); }
.btn[disabled], .btn[aria-disabled="true"] { color: var(--ink-3); background: var(--surface-2); border-color: var(--line); cursor: not-allowed; }
.btn-primary { color: var(--ink-inv); background: var(--tt-900); border-color: var(--tt-900); }
.btn-primary:hover { color: var(--ink-inv); background: var(--tt-800); border-color: var(--tt-800); }
.btn-primary:active { background: var(--tt-950); }
.btn-primary[disabled], .btn-primary[aria-disabled="true"] { color: var(--on-dark-2); background: var(--tt-300); border-color: var(--tt-300); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--sunk); border-color: transparent; }
.btn-danger { color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }
.btn-danger-solid { color: var(--ink-inv); background: var(--danger); border-color: var(--danger); }
.btn-danger-solid:hover { color: var(--ink-inv); background: oklch(0.45 0.165 27); }
.btn-ok { color: var(--ink-inv); background: var(--ok); border-color: var(--ok); }
.btn-ok:hover { color: var(--ink-inv); background: oklch(0.40 0.11 152); }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: var(--fs-13); border-radius: var(--r-1); }
.btn-lg { min-height: 44px; padding: 0 18px; font-size: var(--fs-15); }
.btn-block { width: 100%; }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }
.btn .kbd { margin-left: 4px; }
.btn-link { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--tt-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.btn-link:hover { color: var(--tt-900); }
.btn.is-loading { color: var(--ink-3); cursor: progress; }
.btn.is-loading::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.kbd { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 5px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-1); }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: var(--fs-13); font-weight: 600; color: var(--ink-2); }
.req::after { content: " *"; color: var(--danger); }
.opt { font-weight: 400; color: var(--ink-3); }
.input, .select, .textarea {
  width: 100%; min-height: 36px; padding: 7px 10px;
  font: inherit; font-size: var(--fs-14); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-2);
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }
.textarea { min-height: 76px; resize: vertical; line-height: var(--lh); }
.select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23464b66' stroke-width='2.2' 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(--ink-3); }
.input:focus, .select:focus, .textarea:focus, .input.is-focus { outline: none; border-color: var(--tt-700); box-shadow: var(--ring); }
.input[readonly], .input:disabled, .select:disabled, .textarea:disabled { color: var(--ink-2); background: var(--surface-2); border-color: var(--line); cursor: not-allowed; }
.input.num { text-align: right; }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger); background: var(--danger-bg); }
.input.is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-bg); }
.hint { font-size: var(--fs-12); color: var(--ink-3); }
.err { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-13); font-weight: 550; color: var(--danger); }
.err .ico { width: 15px; height: 15px; margin-top: 2px; }
.affix { display: flex; align-items: stretch; }
.affix .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.affix-end { display: inline-flex; align-items: center; padding: 0 10px; font-size: var(--fs-13); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 var(--r-2) var(--r-2) 0; white-space: nowrap; }
.search { position: relative; }
.search > .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; width: 16px; height: 16px; }
.search .input { padding-left: 34px; }
.check, .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-14); }
.check input, .radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--tt-800); flex: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.span-2 { grid-column: span 2; }
.span-all { grid-column: 1 / -1; }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset > legend { padding: 0; margin-bottom: 6px; font-size: var(--fs-13); font-weight: 600; color: var(--ink-2); }
.form-section + .form-section { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.form-section > h3 { margin-bottom: var(--s-3); }

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

/* Switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-14); }
.switch input { appearance: none; width: 38px; height: 22px; margin: 0; border-radius: var(--r-pill); background: var(--line-strong); position: relative; cursor: pointer; transition: background-color .15s var(--ease-out); flex: none; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--sh-1); transition: transform .18s var(--ease-out); }
.switch input:checked { background: var(--tt-800); }
.switch input:checked::after { transform: translateX(16px); }

/* Filter pills: "Pháp nhân: HSS ▾" */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pick { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; font: inherit; font-size: var(--fs-13); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-2); cursor: pointer; white-space: nowrap; }
.pick:hover { border-color: var(--ink-3); }
.pick .k { color: var(--ink-3); }
.pick .v { font-weight: 600; }
.pick .ico { width: 14px; height: 14px; color: var(--ink-3); }
.pick.is-set { border-color: var(--tt-300); background: var(--tt-050); }
.bar .search { width: 280px; }
.bar .search .input { min-height: 34px; }
.bar-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }

/* ==========================================================================
   Badges, chips, status words
   ========================================================================== */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; font-size: var(--fs-12); font-weight: 600; line-height: 1; color: var(--ink-2); background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-1); white-space: nowrap; vertical-align: middle; }
.badge .ico { width: 13px; height: 13px; stroke-width: 2; }
.b-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.b-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.b-danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.b-brand { color: var(--tt-800); background: var(--tt-050); border-color: var(--tt-200); }
.b-lock { color: var(--lock); background: var(--lock-bg); border-color: var(--line-strong); }
.b-solid { color: var(--ink-inv); background: var(--tt-900); border-color: var(--tt-900); }
.b-vis { color: var(--vis-ink); background: var(--vis-soft); border-color: var(--vis-line); }
.b-sm { height: 18px; padding: 0 5px; font-size: 11.5px; }

/* Priority words (Thường / Cao / Khẩn) */
.prio { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-12); font-weight: 650; white-space: nowrap; }
.prio::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--line-strong); }
.prio-cao { color: var(--warn); }
.prio-cao::before { background: var(--warn); }
.prio-khan { color: var(--danger); }
.prio-khan::before { background: var(--danger); transform: rotate(45deg); }

/* Task status */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); font-weight: 600; white-space: nowrap; }
.st::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; }
.st-moi { color: var(--tt-700); }
.st-dang { color: var(--warn); }
.st-dang::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.st-cho { color: var(--tt-800); }
.st-cho::before { background: currentColor; box-shadow: inset 0 0 0 2px var(--surface); }
.st-xong { color: var(--ok); }
.st-xong::before { background: currentColor; }
.st-huy { color: var(--ink-3); text-decoration: line-through; }

/* Overdue / due words */
.due { font-size: var(--fs-13); font-weight: 600; white-space: nowrap; color: var(--ink-2); }
.due-over { color: var(--danger); }
.due-soon { color: var(--warn); }

/* Avatar */
.av { width: 30px; height: 30px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--tt-900); background: var(--tt-100); }
.av-sm { width: 24px; height: 24px; font-size: 10.5px; }
.av-lg { width: 44px; height: 44px; font-size: 16px; }

/* ==========================================================================
   Notes / banners (full border + tint, leading icon)
   ========================================================================== */
.note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; font-size: var(--fs-14); color: var(--ink-2); background: var(--tt-050); border: 1px solid var(--tt-200); border-radius: var(--r-2); }
.note > .ico { margin-top: 1px; color: var(--tt-700); }
.note strong { color: var(--ink); font-weight: 650; }
.note .grow > * + * { margin-top: 2px; }
.note .note-act { margin-left: auto; flex: none; align-self: center; }
.note-warn { background: var(--warn-bg); border-color: var(--warn-line); color: oklch(0.36 0.08 62); }
.note-warn > .ico { color: var(--warn); }
.note-danger { background: var(--danger-bg); border-color: var(--danger-line); color: oklch(0.38 0.13 27); }
.note-danger > .ico { color: var(--danger); }
.note-ok { background: var(--ok-bg); border-color: var(--ok-line); color: oklch(0.34 0.09 152); }
.note-ok > .ico { color: var(--ok); }
.note-lock { background: var(--lock-bg); border-color: var(--line-strong); color: var(--ink-2); }
.note-lock > .ico { color: var(--lock); }

/* ==========================================================================
   Panels & sections
   ========================================================================== */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-1); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: var(--fs-15); font-weight: 650; }
.panel-head .sub { font-size: var(--fs-13); color: var(--ink-3); font-weight: 400; }
.panel-body { padding: 16px; }
.panel-foot a { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 600; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; font-size: var(--fs-13); color: var(--ink-3); background: var(--surface-2); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-3) var(--r-3); }
.panel-flush > .panel-body { padding: 0; }
.panel-scroll { overflow: auto; }
.cols { display: grid; gap: var(--s-5); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-main-side { grid-template-columns: minmax(0, 1fr) 380px; }
.cols-side-main { grid-template-columns: 300px minmax(0, 1fr); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: var(--s-6) 0 var(--s-3); }
.section-title h2 { font-size: var(--fs-16); }
.section-title .sub { color: var(--ink-3); font-size: var(--fs-13); }

/* Definition lists */
.dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 9px 16px; margin: 0; }
.dl dt { color: var(--ink-3); font-size: var(--fs-13); padding-top: 1px; }
.dl dd { margin: 0; font-weight: 500; }
.dl-inline { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; }
.dl-inline > div { display: flex; flex-direction: column; }
.dl-inline dt { font-size: var(--fs-12); color: var(--ink-3); }
.dl-inline dd { margin: 0; font-weight: 650; font-size: var(--fs-16); }

/* ==========================================================================
   Desktop shell
   ========================================================================== */
body.desk { min-width: 1280px; }
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); grid-template-rows: var(--top-h) minmax(0, 1fr); min-height: 100vh; }

.top { grid-column: 1 / -1; position: sticky; top: 0; z-index: var(--z-header); display: flex; align-items: center; gap: 18px; height: var(--top-h); padding-right: 14px; color: var(--ink-inv); background: var(--tt-950); }
.brand { display: flex; align-items: center; gap: 10px; flex: none; width: var(--side-w); height: 100%; padding: 0 16px; color: inherit; text-decoration: none; border-right: 1px solid oklch(1 0 0 / 0.09); }
.brand:hover { color: inherit; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name { display: block; font-size: var(--fs-15); font-weight: 700; line-height: 1.15; letter-spacing: -0.005em; }
.brand-sub { display: block; font-size: 11.5px; color: var(--on-dark-3); line-height: 1.2; }

.month { display: flex; align-items: center; gap: 14px; min-width: 0; }
.month-switch { display: flex; align-items: center; gap: 2px; }
.month-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; color: var(--on-dark-2); background: none; border: 0; border-radius: var(--r-2); cursor: pointer; }
.month-btn:hover { color: var(--ink-inv); background: oklch(1 0 0 / 0.08); }
.month-btn[disabled] { opacity: .35; cursor: not-allowed; background: none; }
.month-name { min-width: 112px; text-align: center; font-size: var(--fs-15); font-weight: 650; white-space: nowrap; }
.month-name small { display: block; font-size: 11px; font-weight: 500; color: var(--on-dark-3); line-height: 1.1; }

.life { display: flex; align-items: center; list-style: none; padding: 4px 12px; background: oklch(1 0 0 / 0.05); border: 1px solid oklch(1 0 0 / 0.1); border-radius: var(--r-pill); }
.life li { display: flex; align-items: center; gap: 7px; font-size: var(--fs-13); color: var(--on-dark-3); white-space: nowrap; }
.life li + li::before { content: ""; width: 20px; height: 1px; margin: 0 9px; background: oklch(1 0 0 / 0.22); }
.life .dot { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; }
.life .dot .ico { width: 11px; height: 11px; stroke-width: 3; }
.life .is-done { color: var(--on-dark-2); }
.life .is-done .dot { color: var(--tt-950); background: var(--on-dark-2); border-color: var(--on-dark-2); }
.life .is-now { color: var(--ink-inv); font-weight: 650; }
.life .is-now .dot { color: var(--tt-975); background: var(--vis); border-color: var(--vis); box-shadow: 0 0 0 3px oklch(0.90 0.175 116 / 0.22); }
.tchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; font-size: 12.5px; font-weight: 550; color: var(--on-dark-2); border: 1px solid oklch(1 0 0 / 0.16); border-radius: var(--r-pill); white-space: nowrap; }
.tchip .ico { width: 13px; height: 13px; }
.tchip.is-ok { color: var(--ink-inv); }
.tchip.is-ok .ico { color: var(--vis); }
.tchip.is-pending .ico { color: var(--on-dark-3); }

.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.who { display: flex; align-items: center; gap: 10px; }
.who .av { color: var(--ink-inv); background: var(--tt-800); }
.who-name { display: block; font-size: var(--fs-13); font-weight: 650; line-height: 1.2; }
.who-role { display: block; font-size: 11.5px; color: var(--on-dark-3); line-height: 1.2; }
.top-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--on-dark-2); border-radius: var(--r-2); text-decoration: none; }
.top-icon:hover { color: var(--ink-inv); background: oklch(1 0 0 / 0.08); }

.side { position: sticky; top: var(--top-h); grid-row: 2; align-self: start; height: calc(100vh - var(--top-h)); overflow-y: auto; padding: 14px 10px 24px; background: var(--surface); border-right: 1px solid var(--line); }
.nav-group + .nav-group { margin-top: 12px; }
.nav-label { padding: 0 10px 6px; font-size: var(--fs-12); font-weight: 650; color: var(--ink-3); }
.nav { list-style: none; }
.nav a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; font-size: var(--fs-14); font-weight: 500; color: var(--ink-2); text-decoration: none; border-radius: var(--r-2); }
.nav a .ico { color: var(--ink-3); }
.nav a:hover { color: var(--ink); background: var(--tt-050); }
.nav a[aria-current="page"] { color: var(--tt-900); font-weight: 650; background: var(--tt-100); }
.nav a[aria-current="page"] .ico { color: var(--tt-800); }
.nav .count { margin-left: auto; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-inv); background: var(--tt-800); border-radius: var(--r-pill); }
.nav .count.is-danger { background: var(--danger); }
.side-foot { margin: 20px 10px 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-12); color: var(--ink-3); }

.main { grid-row: 2; min-width: 0; padding: 22px 28px 56px; }
.crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: var(--fs-13); color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .ico { width: 13px; height: 13px; color: var(--line-strong); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-head .lede { margin-top: 4px; max-width: 78ch; color: var(--ink-3); font-size: var(--fs-14); }
.page-head h1 .badge { margin-left: 8px; vertical-align: 3px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Ledger summary strip (instead of stat cards) */
.ledger { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-1); }
.ledger > div { padding: 12px 16px; }
.ledger > div + div { border-left: 1px solid var(--line-soft); }
.ledger dt { font-size: var(--fs-13); color: var(--ink-3); }
.ledger dd { margin: 2px 0 0; font-size: var(--fs-20); font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.ledger dd small { font-size: var(--fs-13); font-weight: 500; color: var(--ink-3); }
.ledger .delta { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--ink-3); }
.ledger .is-key dd { color: var(--tt-900); }

/* ==========================================================================
   Tabs
   ========================================================================== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-strong); overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px 9px; font-size: var(--fs-14); font-weight: 600; color: var(--ink-3); text-decoration: none; white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs [aria-selected="true"], .tabs [aria-current="page"] { color: var(--tt-900); border-bottom-color: var(--tt-800); }
.tabs .count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; font-size: 11.5px; font-weight: 650; color: var(--ink-2); background: var(--sunk); border-radius: var(--r-pill); }
.tabs [aria-selected="true"] .count, .tabs [aria-current="page"] .count { color: var(--tt-900); background: var(--tt-100); }
.tabs .ico { width: 16px; height: 16px; }
.tabs-boxed { padding: 0 16px; background: var(--surface); border-radius: var(--r-3) var(--r-3) 0 0; }

/* ==========================================================================
   Tables — the ledger
   ========================================================================== */
.tbl-wrap { position: relative; overflow: auto; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-14); }
.tbl th, .tbl td { padding: 8px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line-soft); }
.tbl thead th { position: sticky; top: 0; z-index: 2; font-size: var(--fs-13); font-weight: 650; color: var(--ink-2); background: var(--surface-2); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.tbl thead th small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.tbl thead tr.th-group th { top: 0; font-size: var(--fs-12); text-align: center; color: var(--ink-3); background: var(--surface); border-bottom: 1px solid var(--line); }
.tbl tbody tr:hover > td { background: var(--tt-050); }
.tbl tbody tr:last-child > td { border-bottom: 0; }
.tbl .num { text-align: right; }
.tbl .center { text-align: center; }
.tbl .c-check { width: 40px; padding-right: 0; }
.tbl .c-act { width: 1%; white-space: nowrap; text-align: right; }
.tbl-dense th, .tbl-dense td { padding: 6px 10px; font-size: var(--fs-13); }
.tbl tr.is-selected > td { background: var(--vis-soft); }
.tbl tr.is-muted > td { color: var(--ink-3); }
.tbl tr.tr-group > td { padding-top: 10px; padding-bottom: 8px; font-weight: 650; color: var(--ink); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.tbl tr.tr-sum > td { font-weight: 700; background: var(--tt-050); border-bottom: 3px double var(--line-strong); }
.tbl tr.tr-total > td { font-weight: 700; border-top: 1px solid var(--ink-2); border-bottom: 3px double var(--ink-2); background: var(--surface); }
.tbl tr.tr-sub > td { font-size: var(--fs-13); color: var(--ink-2); background: var(--surface-2); }
.tbl tr.tr-sub > td:first-child { box-shadow: inset 3px 0 0 var(--surface-2); }
.tbl .sep-l { border-left: 1px solid var(--line); }
.tbl .sep-strong { border-left: 1px solid var(--line-strong); }
.cell-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cell-who .nm { font-weight: 600; color: var(--ink); }
.cell-who .meta { font-size: var(--fs-12); color: var(--ink-3); }
.cell-who .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.tbl a.row-link { color: var(--ink); text-decoration: none; font-weight: 600; }
.tbl a.row-link:hover { color: var(--tt-700); text-decoration: underline; }
.amt-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--ink-3); cursor: pointer; }
.amt-link:hover { color: var(--tt-700); border-bottom-color: var(--tt-700); }
.amt-on { padding: 2px 4px; margin: -2px -4px; color: var(--tt-900); background: var(--vis-soft); outline: 2px solid var(--tt-700); border-radius: 3px; }
.ovr { position: relative; }
.ovr::after { content: "GĐ"; position: absolute; top: 2px; right: 2px; font-size: 9px; font-weight: 800; line-height: 1; padding: 1px 2px; color: var(--warn); background: var(--warn-bg); border-radius: 2px; letter-spacing: .02em; }
.tbl td.c-zero { color: var(--ink-3); }
.tbl-foot-note { padding: 10px 16px; font-size: var(--fs-12); color: var(--ink-3); background: var(--surface-2); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-3) var(--r-3); display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.tbl-foot-note .legend { display: inline-flex; align-items: center; gap: 6px; }

/* Pager */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; font-size: var(--fs-13); color: var(--ink-3); border-top: 1px solid var(--line); }
.pager .row { gap: 4px; }

/* ==========================================================================
   Bảng chấm công tháng (lưới BCC)
   ========================================================================== */
.bcc-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-1); overflow: hidden; }
.bcc-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.bcc-scroll { position: relative; overflow: auto; max-height: 610px; }
.bcc { border-collapse: separate; border-spacing: 0; font-size: var(--fs-13); min-width: 100%; }
.bcc th, .bcc td { height: 32px; padding: 0; text-align: center; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.bcc thead th { position: sticky; top: 0; z-index: 3; height: 42px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border-bottom: 1px solid var(--line-strong); }
.bcc thead th .d { display: block; font-size: var(--fs-13); font-weight: 700; color: var(--ink); line-height: 1.1; }
.bcc thead th .w { display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); line-height: 1.2; }
.bcc thead th.is-cn { background: var(--sunk); }
.bcc thead th.is-cn .w { color: var(--danger); }
.bcc thead th.is-today { background: var(--vis); }
.bcc thead th.is-today .d, .bcc thead th.is-today .w { color: var(--tt-975); }
.bcc tr.bcc-daysum td { position: sticky; top: 42px; z-index: 3; height: 30px; font-size: 11.5px; letter-spacing: -0.01em; font-weight: 650; color: var(--tt-900); background: var(--tt-050); border-bottom: 3px double var(--line-strong); }
.bcc .c-ma, .bcc .c-ten { position: sticky; z-index: 2; background: var(--surface); text-align: left; }
.bcc .c-ma { left: 0; width: 84px; min-width: 84px; padding: 0 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.bcc .c-ten { left: 84px; width: 200px; min-width: 200px; max-width: 200px; padding: 0 10px; border-right: 1px solid var(--line-strong); overflow: hidden; text-overflow: ellipsis; }
.bcc .c-ten .nm { font-weight: 600; color: var(--ink); }
.bcc .c-ten .cv { margin-left: 4px; font-size: 11.5px; color: var(--ink-3); }
.bcc thead .c-ma, .bcc thead .c-ten, .bcc tr.bcc-daysum .c-ma, .bcc tr.bcc-daysum .c-ten { z-index: 5; background: var(--surface-2); }
.bcc tr.bcc-daysum .c-ma, .bcc tr.bcc-daysum .c-ten { background: var(--tt-050); }
.bcc td.d { width: 40px; min-width: 40px; font-variant-numeric: tabular-nums; color: var(--ink); }
.bcc td.d.is-cn { background: var(--surface-2); }
.bcc td.d.is-today { background: var(--vis-soft); }
.bcc td.d.is-empty::after { content: "·"; color: var(--line-strong); }
.bcc td.d.is-past-empty { background: repeating-linear-gradient(-45deg, var(--surface) 0 4px, var(--warn-bg) 4px 7px); }
.bcc td.d.is-off { color: var(--ink-3); background: repeating-linear-gradient(-45deg, var(--surface-2) 0 3px, var(--sunk) 3px 6px); font-size: 0; }
.bcc td.d.is-edit { position: relative; padding: 0; background: var(--surface); box-shadow: inset 0 0 0 2px var(--tt-700); }
.bcc td.d.is-edit input { width: 100%; height: 30px; border: 0; padding: 0 2px; font: inherit; font-weight: 700; text-align: center; color: var(--tt-900); background: transparent; outline: none; }
.bcc td.d.is-conflict { background: var(--warn-bg); box-shadow: inset 0 0 0 2px var(--warn); font-weight: 700; color: var(--warn); }
.bcc td.d.is-error { background: var(--danger-bg); box-shadow: inset 0 0 0 2px var(--danger); color: var(--danger); font-weight: 700; }
.bcc td.d.is-saved { background: var(--ok-bg); }
.bcc td.d.is-sel { box-shadow: inset 0 0 0 2px var(--tt-700); }
.bcc td.d.h-24 { font-weight: 700; }
.bcc td.d.h-frac { color: var(--tt-700); font-weight: 650; }
.bcc .c-tot, .bcc .c-chuan, .bcc .c-tc { width: 60px; min-width: 60px; padding: 0 8px; text-align: right; font-variant-numeric: tabular-nums; }
.bcc td.c-tot { font-weight: 700; border-left: 1px solid var(--line-strong); }
.bcc thead th.c-tot { border-left: 1px solid var(--line-strong); }
.bcc td.c-chuan { color: var(--ink-3); }
.bcc td.c-tc { font-weight: 650; }
.bcc .tc-plus { display: inline-flex; align-items: baseline; gap: 2px; color: var(--tt-800); }
.bcc .tc-plus small { font-size: 10px; font-weight: 800; padding: 0 3px; color: var(--tt-800); background: var(--tt-100); border-radius: 2px; }
.bcc .tc-minus { color: var(--ink-3); font-weight: 500; }
.bcc tr.g td { height: 34px; padding: 0; background: var(--surface-2); border-bottom: 1px solid var(--line); text-align: left; }
.bcc .g-in { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; }
.bcc .g-title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13); font-weight: 700; color: var(--ink); }
.bcc .g-title .code { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.bcc .g-meta { margin-left: 10px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.bcc tr.g.is-collapsed td { background: var(--surface); }
.bcc tr.g .g-tog { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--ink-3); border-radius: var(--r-1); cursor: pointer; }
.bcc tr.g .g-tog:hover { background: var(--sunk); color: var(--ink); }
.bcc tr.is-tc td.c-ten .nm::after { content: ""; }
.bcc tbody tr:not(.g):hover td { background-color: var(--tt-050); }
.bcc tbody tr:not(.g):hover td.c-ma, .bcc tbody tr:not(.g):hover td.c-ten { background: var(--tt-050); }
.bcc .tag-tc { display: inline-block; margin-left: 4px; padding: 0 4px; font-size: 10.5px; font-weight: 700; line-height: 16px; color: var(--tt-800); background: var(--tt-050); border: 1px solid var(--tt-200); border-radius: 3px; vertical-align: 1px; }
.bcc .tag-off { display: inline-block; margin-left: 4px; padding: 0 4px; font-size: 10.5px; font-weight: 700; line-height: 16px; color: var(--lock); background: var(--lock-bg); border: 1px solid var(--line-strong); border-radius: 3px; vertical-align: 1px; }
.bcc.is-readonly td.d { color: var(--ink-2); }
.cell-pop { position: absolute; z-index: var(--z-dropdown); width: 300px; padding: 12px 14px; font-size: var(--fs-13); text-align: left; white-space: normal; color: var(--ink-2); background: var(--surface); border: 1px solid var(--warn-line); border-radius: var(--r-2); box-shadow: var(--sh-2); }
.cell-pop.is-danger { border-color: var(--danger-line); }
.cell-pop strong { display: block; margin-bottom: 4px; color: var(--ink); }
.cell-pop .row { margin-top: 10px; }
/* Cell bar above the grid (like a spreadsheet formula bar) */
.cellbar { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px 14px; font-size: var(--fs-13); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cb-ref { display: inline-flex; flex: none; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; }
.cb-ref b { color: var(--ink); font-weight: 650; }
.cb-ref .sep { color: var(--line-strong); }
.cb-val { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); white-space: nowrap; }
.cb-val .input { width: 64px; min-height: 30px; padding: 3px 8px; font-weight: 700; text-align: center; }
.cb-msg { display: inline-flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 6px; font-weight: 600; }
.cb-msg .ico { width: 16px; height: 16px; }
.cb-msg.is-warn { color: var(--warn); }
.cb-msg.is-danger { color: var(--danger); }
.cb-msg.is-ok { color: var(--ok); }
.cellbar .grow + .keys { margin-left: auto; }
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--fs-12); color: var(--ink-3); }
.keys span { display: inline-flex; align-items: center; gap: 5px; }
.legend-sw { display: inline-block; width: 16px; height: 12px; border-radius: 2px; border: 1px solid var(--line-strong); vertical-align: -1px; }
.sw-today { background: var(--vis-soft); border-color: var(--vis-line); }
.sw-cn { background: var(--surface-2); }
.sw-missing { background: repeating-linear-gradient(-45deg, var(--surface) 0 3px, var(--warn-bg) 3px 6px); border-color: var(--warn-line); }
.sw-off { background: repeating-linear-gradient(-45deg, var(--surface-2) 0 2px, var(--sunk) 2px 4px); }

/* ==========================================================================
   Payroll (bảng lương)
   ========================================================================== */
.pay-scroll { position: relative; overflow: auto; max-height: 560px; }
.pay { border-collapse: separate; border-spacing: 0; font-size: var(--fs-13); }
.pay th, .pay td { padding: 7px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.pay thead th { position: sticky; z-index: 3; font-size: 12.5px; font-weight: 650; color: var(--ink-2); background: var(--surface-2); vertical-align: bottom; }
.pay thead tr.ph1 th { top: 0; height: 30px; text-align: center; font-size: 12px; color: var(--ink-3); background: var(--surface); border-bottom: 1px solid var(--line); }
.pay thead tr.ph2 th { top: 30px; height: 44px; border-bottom: 1px solid var(--line-strong); }
.pay thead th small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); }
.pay tr.pay-sum td { position: sticky; top: 74px; z-index: 2; font-weight: 700; color: var(--tt-900); background: var(--tt-050); border-bottom: 3px double var(--line-strong); }
.pay .c-stt, .pay .c-nv { position: sticky; z-index: 1; background: var(--surface); text-align: left; }
.pay .c-stt { left: 0; width: 44px; min-width: 44px; color: var(--ink-3); text-align: right; padding-right: 6px; }
.pay .c-nv { left: 44px; width: 250px; min-width: 250px; max-width: 250px; border-right: 1px solid var(--line-strong); white-space: normal; }
.pay thead .c-stt, .pay thead .c-nv { z-index: 4; background: var(--surface-2); }
.pay thead tr.ph1 .c-stt, .pay thead tr.ph1 .c-nv { background: var(--surface); }
.pay tr.pay-sum .c-stt, .pay tr.pay-sum .c-nv { z-index: 3; background: var(--tt-050); }
.pay tbody tr:hover td { background: var(--tt-050); }
.pay tbody tr:hover .c-stt, .pay tbody tr:hover .c-nv { background: var(--tt-050); }
.pay .g-in { border-left: 1px solid var(--line-strong); }
.pay .g-out { border-left: 1px solid var(--line-strong); }
.pay .c-tong { font-weight: 700; color: var(--ink); background: var(--surface-2); }
.pay .c-net { position: sticky; right: 0; z-index: 1; font-weight: 750; font-size: var(--fs-14); color: var(--tt-900); border-left: 1px solid var(--line-strong); background: var(--tt-050); box-shadow: -6px 0 10px -8px oklch(0.205 0.05 278 / 0.35); }
.pay thead th.c-net { z-index: 4; background: var(--tt-100); }
.pay tr.pay-sum td.c-net { z-index: 3; background: var(--tt-100); }
.pay .c-nv .meta, .pay tr.vt .vt-line .meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay a.row-link { color: var(--ink); text-decoration: none; font-weight: 600; }
.pay a.row-link:hover { color: var(--tt-700); text-decoration: underline; }
.pay tbody tr:hover .c-tong, .pay tbody tr:hover .c-net { background: var(--tt-100); }
.pay .c-txt { text-align: left; }
.pay td.c-zero { color: var(--line-strong); }
.pay .exp { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 4px; padding: 0; color: var(--ink-3); background: none; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; vertical-align: -5px; }
.pay .exp:hover { color: var(--ink); border-color: var(--ink-3); }
.pay tr.is-open > td { background: var(--surface); border-bottom-color: var(--line); }
.pay tr.vt > td { font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border-bottom: 1px dashed var(--line); }
.pay tr.vt > td.c-nv { padding-left: 32px; background: var(--surface-2); }
.pay tr.vt:last-of-type > td { border-bottom: 1px solid var(--line); }
.pay tr.vt .vt-line { display: flex; flex-direction: column; gap: 1px; }
.pay tr.vt .vt-line .meta { font-size: 11.5px; color: var(--ink-3); }
.pay tr.is-neg > td { background: var(--danger-bg); }
.pay tr.is-neg .c-stt, .pay tr.is-neg .c-nv { background: var(--danger-bg); }
.pay tr.is-neg .c-net { color: var(--danger); background: var(--danger-bg); }
.pay .kpi-pct { display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.pay .kpi-pct.is-low { color: var(--warn); }
.pay tr.is-flash > td { animation: flash 1.6s var(--ease-out); }
@keyframes flash { 0%, 30% { background: var(--vis-soft); } }
.cc-toggle { display: inline-flex; margin-top: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-1); overflow: hidden; }
.cc-toggle button { padding: 1px 6px; font-size: 11px; font-weight: 650; color: var(--ink-2); background: var(--surface); border: 0; border-left: 1px solid var(--line); cursor: pointer; }
.cc-toggle button:first-child { border-left: 0; }
.cc-toggle [aria-pressed="true"] { color: var(--ink-inv); background: var(--tt-800); }
.delta-up, .delta-down { color: var(--ink); font-weight: 650; }

/* Explanation ("Giải thích") */
.calc { border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.calc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; font-size: var(--fs-13); font-weight: 650; color: var(--ink-2); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.calc-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-13); }
.calc-row:last-child { border-bottom: 0; }
.calc-row .k { color: var(--ink-3); }
.calc-row .f { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.calc-row .v { font-weight: 650; text-align: right; white-space: nowrap; }
.calc-row.is-total { background: var(--tt-050); }
.calc-row.is-total .v { font-size: var(--fs-15); color: var(--tt-900); }
.calc-row.is-focus { background: var(--vis-soft); }
.calc-row.is-ovr .v { color: var(--warn); }
.formula { display: block; padding: 12px 14px; font-family: var(--mono); font-size: var(--fs-14); line-height: 1.6; color: var(--ink); background: var(--vis-soft); border: 1px solid var(--vis-line); border-radius: var(--r-2); }
.formula b { color: var(--tt-900); }
.formula .eq { color: var(--ink-3); }

/* Checklists (chốt lương, khóa công) */
.checks { list-style: none; border: 1px solid var(--line); border-radius: var(--r-2); }
.checks li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.checks li:last-child { border-bottom: 0; }
.checks .mark { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; }
.checks .mark .ico { width: 13px; height: 13px; stroke-width: 2.6; }
.checks .is-pass .mark { color: var(--ink-inv); background: var(--ok); }
.checks .is-fail .mark { color: var(--ink-inv); background: var(--danger); }
.checks .is-warn .mark { color: var(--ink-inv); background: var(--warn); }
.checks .t { font-weight: 600; color: var(--ink); }
.checks .d { font-size: var(--fs-13); color: var(--ink-3); }
.checks .is-fail .t { color: var(--danger); }

/* Stamp for a closed month */
.stamp { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; color: var(--tt-900); background: var(--surface); border: 1.5px solid var(--tt-800); border-radius: var(--r-2); box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px var(--tt-200); }
.stamp .ico { width: 26px; height: 26px; color: var(--tt-800); }
.stamp strong { display: block; font-size: var(--fs-13); letter-spacing: .04em; }
.stamp small { display: block; font-size: 11.5px; color: var(--ink-3); }

/* ==========================================================================
   Drawers, dialogs, sheets, toasts
   ========================================================================== */
.scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: oklch(0.205 0.05 278 / 0.42); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer); display: flex; flex-direction: column; width: min(560px, 100vw); background: var(--surface); box-shadow: var(--sh-3); border-left: 1px solid var(--line-strong); animation: drawerIn .22s var(--ease-out); }
.drawer-wide { width: min(720px, 100vw); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: var(--fs-18); }
.drawer-head .sub { margin-top: 2px; font-size: var(--fs-13); color: var(--ink-3); }
.drawer-body { flex: 1; overflow: auto; padding: 18px 20px 24px; }
.drawer-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; background: var(--surface-2); border-top: 1px solid var(--line); }
.drawer-foot .grow { font-size: var(--fs-13); color: var(--ink-3); }
@keyframes drawerIn { from { transform: translateX(24px); opacity: 0; } }
.dialog { position: fixed; left: 50%; top: 50%; z-index: var(--z-dialog); width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; background: var(--surface); border-radius: var(--r-3); box-shadow: var(--sh-3); transform: translate(-50%, -50%); animation: dialogIn .2s var(--ease-out); }
.dialog-wide { width: min(640px, calc(100vw - 32px)); }
.dialog-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 8px; }
.dialog-head .ico-wrap { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; color: var(--tt-800); background: var(--tt-100); }
.dialog-head .ico-wrap.is-warn { color: var(--warn); background: var(--warn-bg); }
.dialog-head .ico-wrap.is-danger { color: var(--danger); background: var(--danger-bg); }
.dialog-head h2 { font-size: var(--fs-18); }
.dialog-head .sub { margin-top: 3px; font-size: var(--fs-14); color: var(--ink-3); }
.dialog-body { padding: 10px 20px 18px; color: var(--ink-2); }
.dialog-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; background: var(--surface-2); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-3) var(--r-3); }
.dialog-foot .grow { font-size: var(--fs-13); color: var(--ink-3); }
@keyframes dialogIn { from { opacity: 0; transform: translate(-50%, -47%); } }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: var(--z-toast); display: flex; align-items: center; gap: 10px; padding: 11px 16px; font-weight: 550; color: var(--ink-inv); background: var(--tt-975); border-radius: var(--r-2); box-shadow: var(--sh-3); transform: translateX(-50%); white-space: nowrap; }
.toast .ico { color: var(--vis); }
.toast a { color: var(--vis); font-weight: 650; }

/* Popover anchored inside a relative box */
.pop { position: absolute; z-index: var(--z-dropdown); width: 340px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-3); box-shadow: var(--sh-2); text-align: left; white-space: normal; }
.pop-head { padding: 12px 14px 8px; }
.pop-head h3 { font-size: var(--fs-14); }
.pop-head .sub { font-size: var(--fs-12); color: var(--ink-3); }
.pop-body { padding: 4px 14px 12px; }
.pop-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 14px; background: var(--surface-2); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-3) var(--r-3); }

/* ==========================================================================
   Home blocks
   ========================================================================== */
.todo { list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-1); }
.todo > li { border-bottom: 1px solid var(--line-soft); }
.todo > li:last-child { border-bottom: 0; }
.todo a, .todo .todo-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px; color: inherit; text-decoration: none; }
.todo a:hover { background: var(--tt-050); }
.todo .mark { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-2); color: var(--tt-800); background: var(--tt-050); }
.todo .mark.is-warn { color: var(--warn); background: var(--warn-bg); }
.todo .mark.is-danger { color: var(--danger); background: var(--danger-bg); }
.todo .mark.is-ok { color: var(--ok); background: var(--ok-bg); }
.todo .t { display: block; font-weight: 600; color: var(--ink); }
.todo .d { display: block; font-size: var(--fs-13); color: var(--ink-3); }
.todo .go { color: var(--ink-3); }
.todo li.is-done .t { color: var(--ink-3); font-weight: 500; }

.bars { list-style: none; }
.bars li { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr) 132px; gap: 12px; align-items: center; padding: 6px 0; font-size: var(--fs-13); }
.bars .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.bars .lbl .code { color: var(--ink-3); margin-right: 4px; }
.bars .track { height: 10px; background: var(--sunk); border-radius: 2px; overflow: hidden; }
.bars .fill { display: block; height: 100%; background: var(--tt-700); border-radius: 2px; }
.bars .fill.is-ot { background: linear-gradient(90deg, var(--tt-700) var(--base, 80%), var(--tt-300) var(--base, 80%)); }
.bars .fill.is-low { background: var(--warn); }
.bars .val { text-align: right; font-weight: 650; white-space: nowrap; }
.bars .val small { font-weight: 500; color: var(--ink-3); }

.meter { display: inline-flex; align-items: center; gap: 8px; }
.meter .track { width: 64px; height: 6px; background: var(--sunk); border-radius: 2px; overflow: hidden; }
.meter .fill { display: block; height: 100%; background: var(--tt-700); }
.meter .fill.is-low { background: var(--warn); }
.meter b { min-width: 40px; text-align: right; font-weight: 650; }

.counts { display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; background: var(--surface); }
.counts a, .counts div { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; color: inherit; text-decoration: none; }
.counts > * + * { border-left: 1px solid var(--line-soft); }
.counts b { font-size: var(--fs-20); font-weight: 700; line-height: 1.1; }
.counts span { font-size: var(--fs-13); color: var(--ink-3); }
.counts .is-danger b { color: var(--danger); }
.counts .is-warn b { color: var(--warn); }
.counts a:hover { background: var(--tt-050); }

/* Task list */
.tasks { list-style: none; }
.task { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.task:hover { background: var(--tt-050); }
.task .ttl { font-weight: 600; color: var(--ink); }
.task .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--fs-13); color: var(--ink-3); }
.task .meta .ico { width: 14px; height: 14px; }
.task .meta span { display: inline-flex; align-items: center; gap: 4px; }
.task .side-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.task.is-over { background: linear-gradient(90deg, var(--danger-bg), var(--surface) 40%); }

/* Timeline (nhật ký tiến độ, lịch sử) */
.timeline { list-style: none; position: relative; }
.timeline > li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding-bottom: 16px; }
.timeline > li::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.timeline > li:last-child::before { display: none; }
.timeline .tl-dot { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--tt-800); background: var(--tt-050); border: 1px solid var(--tt-200); }
.timeline .tl-dot .ico { width: 14px; height: 14px; }
.timeline .tl-dot.is-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.timeline .tl-dot.is-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.timeline .tl-head { font-size: var(--fs-13); color: var(--ink-3); }
.timeline .tl-head strong { color: var(--ink); font-weight: 650; }
.timeline .tl-body { margin-top: 3px; color: var(--ink-2); }

/* Attachments */
.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.file { position: relative; display: flex; flex-direction: column; gap: 4px; }
.thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-2); border: 1px solid var(--line-strong); color: var(--ink-3); overflow: hidden; }
.thumb.ph-1 { background: linear-gradient(160deg, oklch(0.82 0.03 240) 0 40%, oklch(0.70 0.04 140) 40% 60%, oklch(0.58 0.03 60) 60%); }
.thumb.ph-2 { background: linear-gradient(200deg, oklch(0.86 0.02 250) 0 35%, oklch(0.62 0.02 270) 35% 70%, oklch(0.45 0.03 270) 70%); }
.thumb.ph-3 { background: linear-gradient(170deg, oklch(0.90 0.01 90) 0 55%, oklch(0.72 0.05 80) 55%); }
.thumb.ph-doc { background: var(--surface-2); }
.thumb.is-failed { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.file .fn { font-size: var(--fs-12); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file .fs { font-size: 11.5px; color: var(--ink-3); }
.file-add { display: grid; place-items: center; gap: 4px; aspect-ratio: 4 / 3; font-size: var(--fs-12); font-weight: 600; color: var(--tt-700); background: var(--surface); border: 1.5px dashed var(--tt-300); border-radius: var(--r-2); cursor: pointer; }
.file-add:hover { background: var(--tt-050); border-color: var(--tt-700); }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 20px; text-align: center; color: var(--ink-3); background: var(--surface); border: 1.5px dashed var(--line-strong); border-radius: var(--r-3); }
.dropzone .ico { width: 30px; height: 30px; color: var(--tt-700); }
.dropzone strong { color: var(--ink); font-size: var(--fs-15); }
.dropzone.has-file { flex-direction: row; text-align: left; padding: 14px 16px; border-style: solid; }
.dropzone.has-file .ico { width: 26px; height: 26px; }

/* Steps (a real sequence: import wizard) */
.steps { display: flex; gap: 0; list-style: none; counter-reset: st; }
.steps li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: var(--fs-14); color: var(--ink-3); background: var(--surface); border: 1px solid var(--line); counter-increment: st; }
.steps li + li { border-left: 0; }
.steps li:first-child { border-radius: var(--r-2) 0 0 var(--r-2); }
.steps li:last-child { border-radius: 0 var(--r-2) var(--r-2) 0; }
.steps li::before { content: counter(st); display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; font-size: var(--fs-13); font-weight: 700; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.steps li.is-done { color: var(--ink-2); }
.steps li.is-done::before { content: "✓"; color: var(--ink-inv); background: var(--ok); border-color: var(--ok); }
.steps li.is-now { color: var(--tt-900); font-weight: 650; background: var(--tt-050); border-color: var(--tt-200); }
.steps li.is-now::before { color: var(--ink-inv); background: var(--tt-800); border-color: var(--tt-800); }

.progress { height: 8px; background: var(--sunk); border-radius: var(--r-pill); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--tt-800); border-radius: var(--r-pill); }

/* Weight bar (bộ KPI tổng 100) */
.wbar { display: flex; height: 12px; border-radius: 3px; overflow: hidden; background: var(--sunk); gap: 2px; }
.wbar span { display: block; height: 100%; }
.wbar .w1 { background: var(--tt-800); }
.wbar .w2 { background: var(--tt-600); }
.wbar .w3 { background: var(--tt-300); }
.wbar .w4 { background: var(--vis-line); }
.wsum { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-13); }
.wsum b { font-size: var(--fs-15); }
.wsum.is-bad b { color: var(--danger); }
.src { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); }
.src .ico { width: 14px; height: 14px; color: var(--ink-3); }

/* Empty / error / forbidden */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; color: var(--ink-3); }
.empty .empty-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 50%; color: var(--tt-700); background: var(--tt-050); border: 1px solid var(--tt-200); }
.empty .empty-ico .ico { width: 24px; height: 24px; }
.empty strong { font-size: var(--fs-16); color: var(--ink); }
.empty p { max-width: 52ch; }
.empty .actions { margin-top: 8px; justify-content: center; }
.gate { min-height: calc(100vh - var(--top-h)); display: grid; place-items: center; padding: 40px 24px; }
.gate-card { width: min(520px, 100%); text-align: center; }
.gate-code { display: inline-block; margin-bottom: 14px; padding: 4px 10px; font-family: var(--mono); font-size: var(--fs-13); font-weight: 650; color: var(--tt-800); background: var(--tt-050); border: 1px solid var(--tt-200); border-radius: var(--r-1); }
.gate h1 { font-size: var(--fs-24); }
.gate p { margin-top: 8px; color: var(--ink-3); }
.gate .actions { justify-content: center; margin-top: 20px; }

/* Skeleton */
.sk { display: block; height: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--sunk) 0%, var(--surface-2) 50%, var(--sunk) 100%); background-size: 200% 100%; animation: sk 1.3s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* ==========================================================================
   Sign-in
   ========================================================================== */
.signin { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); background: var(--surface); }
.signin-side { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 56px; color: var(--ink-inv); background: var(--tt-950); overflow: hidden; }
.signin-side::after { content: ""; position: absolute; inset: auto -10% -2px -10%; height: 46%; background: repeating-linear-gradient(0deg, oklch(1 0 0 / 0.05) 0 1px, transparent 1px 34px); pointer-events: none; }
.signin-side .brand-big { display: flex; align-items: center; gap: 14px; }
.signin-side .brand-big svg { width: 48px; height: 48px; }
.signin-side .brand-big strong { display: block; font-size: var(--fs-24); font-weight: 700; letter-spacing: -0.01em; }
.signin-side .brand-big span { display: block; font-size: var(--fs-14); color: var(--on-dark-3); }
.signin-side blockquote { margin: 0; max-width: 30ch; font-size: var(--fs-30); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.signin-side blockquote em { font-style: normal; color: var(--vis); }
.signin-side .facts { display: flex; gap: 32px; font-size: var(--fs-13); color: var(--on-dark-3); position: relative; z-index: 1; }
.signin-side .facts b { display: block; font-size: var(--fs-16); color: var(--ink-inv); }
.signin-main { display: flex; flex-direction: column; justify-content: center; padding: 48px 72px; }
.signin-form { width: 100%; max-width: 380px; }
.signin-form h1 { font-size: var(--fs-24); }
.signin-form .lede { margin-top: 6px; color: var(--ink-3); }
.signin-form .stack-lg { margin-top: 28px; }
.signin-form .input { min-height: 44px; font-size: var(--fs-15); }
.signin-form .btn-lg { width: 100%; }
.signin-help { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--fs-13); color: var(--ink-3); }
.pw { position: relative; }
.pw .input { padding-right: 46px; }
.pw button { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: 42px; height: 40px; padding: 0; color: var(--ink-3); background: none; border: 0; border-radius: var(--r-2); cursor: pointer; }

/* ==========================================================================
   Print previews (bảng công A4 ngang, phiếu lương A5)
   ========================================================================== */
.print-preview { background: oklch(0.86 0.01 278); }
.pp-bar { position: sticky; top: 0; z-index: var(--z-header); display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; color: var(--ink-inv); background: var(--tt-950); }
.pp-bar h1 { font-size: var(--fs-15); font-weight: 650; }
.pp-bar .sub { font-size: var(--fs-12); color: var(--on-dark-3); }
.pp-bar .btn { color: var(--ink); }
.pp-bar .btn-primary { color: var(--tt-975); background: var(--vis); border-color: var(--vis); }
.pp-bar .btn-primary:hover { color: var(--tt-975); background: oklch(0.86 0.175 116); }
.pp-bar .pick { color: var(--ink-inv); background: oklch(1 0 0 / 0.06); border-color: oklch(1 0 0 / 0.18); }
.pp-bar .pick .k { color: var(--on-dark-3); }
.pp-stage { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 28px 20px 48px; }
.paper { background: #fff; color: #000; box-shadow: 0 2px 10px oklch(0.2 0.03 278 / 0.25); font-family: "Times New Roman", Times, serif; }
.paper-a4l { width: 1123px; min-height: 794px; padding: 34px 38px; }
.paper-a4p { width: 794px; min-height: 1123px; padding: 0; display: grid; grid-template-rows: 1fr 1fr; }
.pp-head { display: flex; justify-content: space-between; gap: 20px; font-size: 12px; line-height: 1.45; }
.pp-head .org strong { font-size: 13px; text-transform: uppercase; }
.pp-title { margin: 14px 0 4px; text-align: center; font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.pp-subtitle { text-align: center; font-size: 12.5px; font-style: italic; }
.pp-draft { display: inline-block; margin-left: 8px; padding: 1px 8px; font-family: var(--font); font-size: 11px; font-weight: 700; font-style: normal; border: 1.5px solid #000; letter-spacing: .04em; }
.ptbl { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 10.5px; }
.ptbl th, .ptbl td { border: 1px solid #000; padding: 2px 3px; text-align: center; font-variant-numeric: tabular-nums; }
.ptbl th { font-weight: 700; }
.ptbl td.l { text-align: left; white-space: nowrap; }
.ptbl td.r { text-align: right; }
.ptbl tr.pg td { font-weight: 700; text-align: left; background: #ececec; }
.ptbl th.cn, .ptbl td.cn { background: #f1f1f1; }
.pp-sign { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; text-align: center; font-size: 12px; }
.pp-sign strong { display: block; }
.pp-sign em { display: block; margin-top: 2px; font-size: 11px; }
.pp-pageno { margin-top: 14px; display: flex; justify-content: space-between; font-size: 10.5px; }
.slip { padding: 26px 34px; border-bottom: 1px dashed #777; font-size: 12px; line-height: 1.45; }
.slip:last-child { border-bottom: 0; }
.slip-head { display: flex; justify-content: space-between; gap: 16px; }
.slip-title { margin: 8px 0 2px; text-align: center; font-size: 16px; font-weight: 700; text-transform: uppercase; }
.slip-who { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 20px; margin: 10px 0 8px; }
.slip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.slip table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.slip th, .slip td { padding: 2px 4px; border-bottom: 1px solid #bbb; text-align: left; }
.slip td.r, .slip th.r { text-align: right; font-variant-numeric: tabular-nums; }
.slip tr.t td { font-weight: 700; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.slip-net { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding: 6px 10px; border: 1.5px solid #000; font-size: 13px; }
.slip-net b { font-size: 17px; }
.slip-foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; }

/* QR (VietQR mock) */
.qr { display: block; width: 220px; height: 220px; padding: 10px; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-2); }
.qr-sm { width: 44px; height: 44px; padding: 3px; }

/* ==========================================================================
   Phone shell (390×844)
   ========================================================================== */
body.phone { font-size: var(--fs-16); background: var(--bg); }
.phone .p-app { min-height: 100vh; display: flex; flex-direction: column; }
.p-top { position: sticky; top: 0; z-index: var(--z-header); color: var(--ink-inv); background: var(--tt-950); }
.p-top-row { display: flex; align-items: center; gap: 2px; min-height: var(--p-top-h); padding: 0 6px 0 4px; }
.p-top-row h1 { flex: 1; min-width: 0; padding-left: 8px; font-size: var(--fs-18); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-top-row .brand-mark { width: 30px; height: 30px; margin-left: 10px; }
.p-iconbtn { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; color: var(--ink-inv); background: none; border: 0; border-radius: var(--r-2); text-decoration: none; cursor: pointer; }
.p-iconbtn .ico { width: 24px; height: 24px; }
.p-iconbtn:hover { color: var(--ink-inv); background: oklch(1 0 0 / 0.08); }
.p-month { display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; font-size: var(--fs-14); color: var(--on-dark-2); }
.p-month b { color: var(--ink-inv); font-weight: 650; }
.p-state { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; font-size: var(--fs-13); font-weight: 600; color: var(--tt-975); background: var(--vis); border-radius: var(--r-pill); }
.p-state .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.p-state.is-lock { color: var(--ink-inv); background: oklch(1 0 0 / 0.12); }
.p-body { flex: 1; padding: 16px 16px calc(var(--p-tab-h) + 24px); }
.p-body.has-action { padding-bottom: calc(var(--p-tab-h) + 104px); }
.p-body.no-tab { padding-bottom: 32px; }
.p-body.no-tab.has-action { padding-bottom: 112px; }
.p-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header); display: grid; grid-template-columns: repeat(5, 1fr); height: var(--p-tab-h); padding: 6px 4px 8px; background: var(--surface); border-top: 1px solid var(--line-strong); }
.p-tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; font-size: var(--fs-13); font-weight: 600; color: var(--ink-3); text-decoration: none; border-radius: var(--r-2); }
.p-tabbar .pill { display: inline-grid; place-items: center; width: 54px; height: 30px; border-radius: 15px; }
.p-tabbar .ico { width: 23px; height: 23px; }
.p-tabbar a[aria-current="page"] { color: var(--tt-900); }
.p-tabbar a[aria-current="page"] .pill { background: var(--tt-100); }
.p-tabbar .dotc { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--ink-inv); background: var(--danger); border-radius: var(--r-pill); border: 2px solid var(--surface); }
.p-action { position: fixed; left: 0; right: 0; bottom: var(--p-tab-h); z-index: var(--z-sticky); display: flex; gap: 10px; padding: 12px 16px; background: var(--surface); border-top: 1px solid var(--line-strong); box-shadow: 0 -8px 20px oklch(0.205 0.05 278 / 0.06); }
.p-action.no-tab { bottom: 0; padding-bottom: 18px; }
.p-action .btn { flex: 1; }

.phone .btn { min-height: 48px; font-size: var(--fs-16); padding: 0 16px; border-radius: var(--r-2); }
.phone .btn-sm { min-height: 44px; font-size: var(--fs-15); padding: 0 12px; }
.phone .btn-icon { width: 48px; padding: 0; }
.phone .input, .phone .select, .phone .textarea { min-height: 48px; font-size: var(--fs-16); padding: 10px 12px; border-width: 1.5px; border-color: oklch(0.66 0.02 278); }
.phone .textarea { min-height: 96px; }
.phone .label { font-size: var(--fs-15); color: var(--ink); }
.phone .hint { font-size: var(--fs-14); }
.phone .err { font-size: var(--fs-15); }
.phone .note { font-size: var(--fs-15); padding: 12px 14px; }
.phone .badge { height: 24px; font-size: var(--fs-13); }
.phone .seg { display: flex; }
.phone .seg button, .phone .seg a { flex: 1; justify-content: center; min-height: 44px; font-size: var(--fs-15); }
.phone .search .input { padding-left: 42px; }
.phone .search > .ico { left: 13px; width: 20px; height: 20px; }
.phone .check input, .phone .radio input { width: 22px; height: 22px; }
.phone .tabs a, .phone .tabs button { min-height: 48px; font-size: var(--fs-15); padding: 12px 12px 10px; }

.p-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 22px 2px 8px; }
.p-sec h2 { font-size: var(--fs-16); font-weight: 700; }
.p-sec a { font-size: var(--fs-15); font-weight: 600; }
.p-sec .sub { font-size: var(--fs-14); color: var(--ink-3); }
.p-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-3); }
.p-card-body { padding: 14px 16px; }
.p-list { list-style: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-3); overflow: hidden; }
.p-list > li { border-bottom: 1px solid var(--line); }
.p-list > li:last-child { border-bottom: 0; }
.p-item { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; color: inherit; text-decoration: none; }
a.p-item:hover, button.p-item:hover { background: var(--tt-050); }
button.p-item { width: 100%; font: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.p-item .t { display: block; font-size: var(--fs-16); font-weight: 650; color: var(--ink); }
.p-item .d { display: block; font-size: var(--fs-14); color: var(--ink-3); line-height: 1.35; }
.p-item .r { text-align: right; white-space: nowrap; font-weight: 700; }
.p-item .r small { display: block; font-weight: 500; font-size: var(--fs-13); color: var(--ink-3); }
.p-item .chev { color: var(--ink-3); }
.p-item .mk { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-2); color: var(--tt-800); background: var(--tt-050); }
.p-item .mk.is-warn { color: var(--warn); background: var(--warn-bg); }
.p-item .mk.is-danger { color: var(--danger); background: var(--danger-bg); }
.p-item .mk.is-ok { color: var(--ok); background: var(--ok-bg); }
.p-hello { margin: 2px 2px 14px; }
.p-hello h2 { font-size: var(--fs-20); }
.p-hello p { color: var(--ink-3); font-size: var(--fs-15); }
.p-counts { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-3); overflow: hidden; }
.p-counts a { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 72px; padding: 12px 14px; color: inherit; text-decoration: none; }
.p-counts a + a { border-left: 1px solid var(--line); }
.p-counts b { font-size: var(--fs-24); font-weight: 750; line-height: 1.1; }
.p-counts span { font-size: var(--fs-14); color: var(--ink-3); }
.p-counts .is-danger b { color: var(--danger); }
.p-counts .is-warn b { color: var(--warn); }

/* Site + day pickers (S3) */
.p-picker { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px; font: inherit; text-align: left; color: var(--ink); background: var(--surface); border: 1.5px solid oklch(0.66 0.02 278); border-radius: var(--r-2); cursor: pointer; text-decoration: none; }
.p-picker .grow small { display: block; font-size: var(--fs-13); color: var(--ink-3); }
.p-picker .grow b { display: block; font-size: var(--fs-17, 17px); font-weight: 700; }
.p-picker .ico { color: var(--ink-3); }
.p-day { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-top: 10px; }
.p-day .btn { min-height: 44px; padding: 0 10px; font-size: var(--fs-15); }
.p-day .btn:last-child { justify-self: end; }
.p-day .today { text-align: center; line-height: 1.2; }
.p-day .today b { display: block; font-size: var(--fs-16); }
.p-day .today small { font-size: var(--fs-13); color: var(--vis-ink); font-weight: 650; }
.p-sum { position: sticky; top: calc(var(--p-top-h) + 36px); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px -16px 0; padding: 10px 16px; font-size: var(--fs-15); color: var(--ink-2); background: var(--bg); border-bottom: 1px solid var(--line); }
.p-sum b { font-size: var(--fs-18); color: var(--ink); }
.p-sum .warn { color: var(--danger); font-weight: 650; display: inline-flex; gap: 4px; align-items: center; }

/* Roster rows: one person, one hour box, quick buttons */
.roster { list-style: none; margin-top: 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-3); overflow: hidden; }
.roster > li { padding: 12px 14px 12px; border-bottom: 1px solid var(--line); }
.roster > li:last-child { border-bottom: 0; }
.r-head { display: flex; align-items: center; gap: 12px; }
.r-who { flex: 1; min-width: 0; }
.r-name { display: block; font-size: 17px; font-weight: 650; line-height: 1.25; }
.r-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; font-size: var(--fs-14); color: var(--ink-3); }
.r-meta .code { font-size: var(--fs-13); }
.r-hours { width: 86px; flex: none; }
.r-hours .input { height: 52px; padding: 0 6px; font-size: 22px; font-weight: 750; text-align: center; letter-spacing: -0.01em; }
.r-hours .input.is-saved { border-color: var(--ok-line); background: var(--surface); }
.r-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.r-quick button { min-height: 44px; font-size: var(--fs-16); font-weight: 700; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-2); cursor: pointer; }
.r-quick button:hover { border-color: var(--tt-700); }
.r-quick button[aria-pressed="true"] { color: var(--ink-inv); background: var(--tt-900); border-color: var(--tt-900); }
.r-quick button.is-clear { font-size: var(--fs-15); font-weight: 600; color: var(--ink-2); }
.r-quick button:disabled { color: var(--ink-3); background: var(--surface-2); border-color: var(--line); cursor: not-allowed; }
.r-state { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-14); font-weight: 600; }
.r-state .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.r-state.is-saved { color: var(--ok); }
.r-state.is-saving { color: var(--ink-3); }
.r-state.is-failed { color: var(--danger); }
.r-state.is-error { color: var(--danger); align-items: flex-start; }
.r-state.is-error .ico { margin-top: 2px; }
.r-state .btn-link { margin-left: auto; font-size: var(--fs-15); }
.roster > li.is-failed { background: var(--danger-bg); }
.roster > li.is-failed .r-hours .input { border-color: var(--danger); background: var(--surface); }
.roster > li.is-error .r-hours .input { border-color: var(--danger); background: var(--surface); }
.roster > li.is-off { background: var(--surface-2); }
.roster > li.is-off .r-name { color: var(--ink-2); }
.roster > li.is-new { box-shadow: inset 0 0 0 2px var(--vis-line); background: var(--vis-soft); }
.roster.is-readonly .r-hours .input { color: var(--ink-2); background: var(--surface-2); border-color: var(--line); }

/* Bottom sheet (phone) */
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-drawer); display: flex; flex-direction: column; max-height: 86%; background: var(--surface); border-radius: var(--r-4) var(--r-4) 0 0; box-shadow: var(--sh-3); animation: sheetIn .24s var(--ease-out); }
.sheet-head { padding: 8px 16px 12px; border-bottom: 1px solid var(--line); }
.sheet-head::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: var(--line-strong); }
.sheet-head h2 { font-size: var(--fs-18); }
.sheet-head .sub { margin-top: 2px; font-size: var(--fs-14); color: var(--ink-3); }
.sheet-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.sheet-foot { display: flex; gap: 10px; padding: 12px 16px 18px; border-top: 1px solid var(--line); background: var(--surface); }
.sheet-foot .btn { flex: 1; }
@keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } }

/* Score stepper (KPI on phone) */
.score { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.score button { min-height: 44px; font-size: var(--fs-15); font-weight: 700; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-2); cursor: pointer; }
.score button[aria-pressed="true"] { color: var(--ink-inv); background: var(--tt-900); border-color: var(--tt-900); }
.crit { padding: 14px 0; border-bottom: 1px solid var(--line); }
.crit:last-child { border-bottom: 0; }
.crit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.crit-head .t { font-weight: 650; }
.crit-head .w { font-size: var(--fs-13); color: var(--ink-3); white-space: nowrap; }
.crit-val { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-24); font-weight: 750; }
.crit-val small { font-size: var(--fs-13); font-weight: 500; color: var(--ink-3); }

/* KPI person card (phone) */
.kcard { display: block; padding: 12px 14px; color: inherit; text-decoration: none; }
.kcard + .kcard { border-top: 1px solid var(--line); }
.kcard:hover { background: var(--tt-050); }
.kcard-top { display: flex; align-items: center; gap: 12px; }
.kcard .pct { margin-left: auto; text-align: right; font-size: var(--fs-20); font-weight: 750; line-height: 1.1; }
.kcard .pct small { display: block; font-size: var(--fs-12); font-weight: 600; color: var(--ink-3); }
.kcard .pct.is-low { color: var(--warn); }
.kcard .why { margin-top: 8px; padding: 8px 10px; font-size: var(--fs-14); color: var(--ink-2); background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--r-2); }
.kcard .crits { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: var(--fs-13); color: var(--ink-3); }
.kcard .crits b { color: var(--ink-2); font-weight: 650; }

/* Index page */
.idx { max-width: 1180px; margin: 0 auto; padding: 32px 28px 64px; }
.idx-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.idx-head svg { width: 40px; height: 40px; }
.idx table { margin-top: 18px; }

/* ==========================================================================
   S12–S21 additions (pages-d.mjs, pages-e.mjs). Additive only.
   ========================================================================== */
/* KPI table: weight under each score, lowered scores, group toggle, nested task list */
.tbl .kw { display: block; font-size: 11px; font-weight: 500; line-height: 1.2; color: var(--ink-3); white-space: nowrap; }
.is-down, .kcard .crits b.is-down { color: var(--warn); font-weight: 700; }
.tbl .exp { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; color: var(--ink-3); background: var(--surface); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; vertical-align: -6px; }
.tbl .exp:hover { color: var(--ink); border-color: var(--ink-3); }
.tbl .cell-who .nm .exp { margin-right: 6px; }
.tbl .cell-who.rs + .cell-who.rs { margin-top: 6px; }
.tbl tr.tr-sub > td.sub-in { padding: 2px 16px 14px 46px; }
.tbl .sub-in .tbl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); }

/* Option cards (choose what to import) */
.opt-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-3); cursor: pointer; }
.opt-card:hover { border-color: var(--ink-3); }
.opt-card input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--tt-800); }
.opt-card .t { display: block; font-weight: 650; color: var(--ink); }
.opt-card .d { display: block; margin-top: 2px; font-size: var(--fs-13); color: var(--ink-3); }
.opt-card.is-on { border-color: var(--tt-700); background: var(--tt-050); box-shadow: var(--ring); }

/* Phone toast sits above the tab bar and wraps */
.phone .toast { left: 16px; right: 16px; bottom: calc(var(--p-tab-h) + 14px); transform: none; white-space: normal; }

/* Payslip of a person with several positions: one more table, still half an A4 page */
.slip.is-multi { padding-top: 18px; padding-bottom: 18px; }
.slip.is-multi .slip-who { margin: 6px 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Real print */
@media print {
  .pp-bar, .top, .side, .p-tabbar, .p-action { display: none !important; }
  .print-preview, body { background: #fff; }
  .pp-stage { padding: 0; gap: 0; }
  .paper { box-shadow: none; }
}