/* nguyenvanchien: Sổ Chi Phí Vận Hành Trại (VHMT Miền Trung – Tây Nguyên).
   The tenant's own sheet, linked after the kit. It holds only (a) parts kit v1.3 does not have and (b) layout glue for these screens;
   every colour, gap, radius, size and shadow is a var(--*) token (tokens.css). No kit class is restyled: each nvc-* part is listed in KIT_GAPS.md. */

/* Brand mark: a water drop with a leaf, drawn in the mark's own colour (gap 1). */
.nvc-mark { display: block; width: var(--nvc-mark-size); height: var(--nvc-mark-size); fill: none; stroke: currentColor; stroke-width: var(--nvc-art-stroke); stroke-linecap: round; stroke-linejoin: round; }

/* The drawing in the sign-in aside (the kit gives the slot, the tenant draws) (gap 2). */
.nvc-art { fill: none; stroke: currentColor; stroke-width: var(--nvc-art-stroke); stroke-linecap: round; stroke-linejoin: round; }
.nvc-art-soft { opacity: var(--nvc-art-soft); }
.nvc-art-faint { opacity: var(--nvc-art-faint); }

/* S1 hero: the month's total, its split into hoá chất and vận hành, and the change (gap 4). */
.nvc-hero { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: end; gap: var(--sp-5) var(--sp-7); }
.nvc-hero-main { display: grid; gap: var(--sp-1); }
.nvc-hero-label { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.nvc-hero-figure { margin: 0; font-size: var(--nvc-hero-figure); font-weight: 700; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; color: var(--heading); white-space: nowrap; }
.nvc-hero-figure .num-unit { margin-inline-start: var(--sp-1); font-size: var(--fs-xl); font-weight: 600; color: var(--muted); }
.nvc-hero-delta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.nvc-split { display: grid; gap: var(--sp-3); }
@container (max-width: 40rem) { .nvc-hero { grid-template-columns: minmax(0, 1fr); } }
/* A phone at 360px leaves the card about 300px: the figure steps down to the kit's largest size so "486.200.000 đ" stays on one line. */
@container (max-width: 20rem) { .nvc-hero-figure { font-size: var(--fs-3xl); } .nvc-hero-figure .num-unit { font-size: var(--fs-lg); } }
.nvc-hero-wrap { container-type: inline-size; }

/* The value printed on top of a stacked column (gap 5): a child of .cc-cols, which stacks upwards, so the last child sits on the top piece. */
.nvc-cc-total { flex: none; padding-bottom: var(--nvc-cc-total-gap); font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; color: var(--text); text-align: center; white-space: nowrap; }
.nvc-cc-total-none { font-weight: 400; font-style: italic; color: var(--muted); }
/* A norm that changes by month: one dashed tick per group at its own height (gap 6). */
.nvc-cc-norm-key { display: inline-block; width: var(--sp-5); border-top: 2px dashed var(--text); }
.nvc-cc-flag { margin-inline-start: var(--sp-1); font-weight: 600; color: var(--danger); }
.nvc-cc-norm { position: absolute; z-index: 2; inset-inline: var(--sp-1); bottom: calc(var(--cc-label-h) + var(--t, 0) * var(--cc-h)); border-top: 2px dashed var(--text); pointer-events: none; }

/* A series key beside a column title or a figure (the kit's .chart-key, laid out in a line) (gap 12). */
.nvc-key { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
th.num .nvc-key { justify-content: flex-end; }

/* The bar column of the S1 farm table: wide enough that a small farm's bar still reads (gap 7). */
.nvc-farm-bar { width: 30%; min-width: var(--nvc-farm-bar-min); }

/* Norm meter in a line: the kit's target bar with the words beside it (gap 8). */
.nvc-meter { display: grid; gap: var(--sp-2); min-width: var(--nvc-meter-w); }
.nvc-meter-text { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.nvc-meter-text .tag { flex: none; }

/* Office entry table: fixed widths for the figure columns so the inputs line up (gap 9). */
.nvc-c-qty { width: var(--nvc-col-qty); }
.nvc-c-price { width: var(--nvc-col-price); }
.nvc-c-money { width: var(--nvc-col-money); }
.nvc-c-norm { width: var(--nvc-col-norm); }
.nvc-c-act { width: var(--tap); }
/* The change column of the S13 diary: wide enough for "Đơn giá (trống) → 52.000 đ từ T11/2026" on one line. */
.nvc-c-diff { width: var(--nvc-col-diff); }
.nvc-entry-name { display: grid; gap: var(--sp-1); }
.nvc-entry-name .work-tags, .nvc-flags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.nvc-reason { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-2) var(--sp-4); }

/* Phone line card: the norm row and the reason field under the kit's line card parts (gap 11). */
.nvc-line-norm { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--panel-border); }
.nvc-line-extra { margin-top: var(--sp-3); }
.nvc-line-head-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }

/* A row of a label and its controls on one line (period, scope), wrapping when narrow (gap 13). */
.nvc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.nvc-row-end { margin-inline-start: auto; }
.nvc-grow { flex: 1 1 auto; min-width: 0; }
/* The branches of one farm as checkboxes under its group head (S10, several branches at once) (gap 14). */
.nvc-checks { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding: var(--sp-3) var(--sp-4); }

/* A figure that must stand out in a body cell or a dd (Tổng phiếu, Thực tế) (gap 15). */
.nvc-strong { font-weight: 650; color: var(--heading); }
/* A line of text in a .panel-flush, back at the panel's padding (gap 16). */
.nvc-pad { padding: var(--sp-3) var(--sp-4); }
.nvc-pad + .nvc-pad { padding-top: 0; }

/* Whole-page states (no permission, no connection): the kit's .empty at reading width, no panel around it (gap 17). */
.nvc-state { width: min(100%, var(--modal-w)); margin: var(--sp-9) auto; }

/* A caption with its controls pushed to the far end of the same line, wrapping when narrow (S2) (gap 13). */
.nvc-legend-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }

/* Print sheet of S15: the report as an A4 landscape form (gap 18); the bar over it (gap 19). */
.nvc-doc { display: grid; gap: var(--sp-3); font-size: var(--nvc-doc-fs); line-height: var(--lh-tight); }
.nvc-doc-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; text-align: center; text-transform: uppercase; }
.nvc-doc-sub { margin: 0; text-align: center; font-style: italic; }
.nvc-doc-tbl { width: 100%; border-collapse: collapse; font-size: var(--nvc-doc-fs); font-variant-numeric: tabular-nums; }
.nvc-doc-tbl th, .nvc-doc-tbl td { padding: var(--sp-1) var(--sp-2); border: 1px solid currentColor; vertical-align: top; }
.nvc-doc-tbl thead th { font-weight: 700; text-align: center; }
.nvc-doc-tbl .num { text-align: end; white-space: nowrap; }
.nvc-doc-tbl tbody th { font-weight: 400; text-align: start; }
.nvc-doc-tbl tr.nvc-doc-sum th, .nvc-doc-tbl tr.nvc-doc-sum td { font-weight: 700; }
.nvc-doc-note { margin: 0; font-size: var(--nvc-doc-fs-sm); font-style: italic; }
/* One bar per farm on page 2: name, bar, total; the rows share one grid (subgrid) so every bar starts and ends at the same place. */
.nvc-doc-bars { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); margin: 0; padding: 0; list-style: none; }
.nvc-doc-bars li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.nvc-doc-bar { display: flex; height: var(--sp-4); border: 1px solid currentColor; }
.nvc-doc-bar > span { display: block; height: 100%; width: calc(var(--v, 0) * 100%); }
.nvc-doc-bar > .nvc-doc-hc { background: currentColor; }
.nvc-doc-bar > .nvc-doc-vh { background: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 4px); }
.nvc-doc-key { display: inline-block; width: var(--sp-3); height: var(--sp-3); margin-inline-end: var(--sp-1); vertical-align: middle; border: 1px solid currentColor; }
.nvc-doc-key.nvc-doc-hc { background: currentColor; }
.nvc-doc-key.nvc-doc-vh { background: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 4px); }
.nvc-printbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--panel-border); }
.nvc-printbar h1 { margin: 0; font-size: var(--fs-lg); }

/* Excel preview of S16: the workbook as it opens, cells, row numbers and sheet tabs (gap 20). */
.nvc-xl { overflow: auto; background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius); }
.nvc-xl-grid { border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.nvc-xl-grid th, .nvc-xl-grid td { height: var(--nvc-xl-row-h); min-width: var(--nvc-xl-col-w); padding: 0 var(--sp-2); white-space: nowrap; border: 1px solid var(--panel-border); }
.nvc-xl-grid thead th, .nvc-xl-grid .nvc-xl-rn { min-width: 0; font-weight: 500; text-align: center; color: var(--muted); background: var(--sunk); }
.nvc-xl-grid .num { text-align: end; }
.nvc-xl-grid .nvc-xl-b { font-weight: 700; }
.nvc-xl-grid .nvc-xl-h { font-weight: 700; text-align: center; background: var(--surface-2); }
.nvc-xl-grid .nvc-xl-title { font-size: var(--fs-md); font-weight: 700; }
.nvc-xl-tabs { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; background: var(--surface-2); border-top: 1px solid var(--panel-border); }
.nvc-xl-tabs li { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); border-inline-end: 1px solid var(--panel-border); }
.nvc-xl-tabs li[aria-current="true"] { font-weight: 600; background: var(--surface); border-bottom: 2px solid var(--primary); }

/* Phone: the month and the progress at the head of a first-level page (gap 21). */
.nvc-phone-head { display: grid; gap: var(--sp-3); }

/* Workaround for kit defect 1 (S5 tab strip): .tabs is overflow-x auto and each .tab hangs 1px below it, so the strip scrolls 1px vertically and can draw a
   scrollbar. Clipping the vertical axis hides nothing that shows today: the hanging pixel is already outside the visible box. Drop it when the kit fixes .tabs. */
.nvc-tabs-clip { overflow-y: hidden; }