/* Sổ Kế Toán Lên Nguyễn (tenant minhnhat), the tenant's own stylesheet.
   Linked last: tokens.css, kit/fonts.css, kit/kit.css, [kit/look-app.css on phone screens], minhnhat.css.
   It holds only (a) components the kit lacks, prefixed mn-, and (b) layout glue for these screens.
   Every colour, space, radius, type size and shadow is a var(--*) token from tokens.css; no kit class is restyled.
   Identity (PRODUCT.md): denim indigo for frame and emphasis, a brass stitch for the few accents, kraft paper for ledger bands. */

/* -- Brand monogram, drawn inside the kit's .brand-mark ------------------------------------------------------------ */
.mn-logo { display: block; width: 100%; height: 100%; }
.mn-logo-stitch { fill: none; stroke: var(--mn-brass); stroke-width: var(--mn-logo-stitch-w); stroke-dasharray: var(--mn-logo-dash); }
.mn-logo-ink { fill: none; stroke: currentColor; stroke-width: var(--mn-logo-ink-w); stroke-linecap: round; stroke-linejoin: round; }

/* -- Today's date in the top bar ---------------------------------------------------------------------------------- */
.mn-today { font-size: var(--fs-sm); white-space: nowrap; }
@media (max-width: 64rem) { .mn-today { display: none; } }

/* -- Period picker (bộ chọn kỳ dùng chung): kit .seg + step buttons + a .combo-select, laid out as one bar ---------- */
.mn-ky { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.mn-ky-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.mn-ky-step { display: inline-flex; align-items: center; gap: var(--sp-1); }
.mn-ky-value { width: var(--mn-ky-value-w); }
.mn-ky-range { font-size: var(--fs-sm); color: var(--muted); }
.mn-ky-end { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }

/* -- Ledger statement (báo cáo dạng sổ): a statement read top to bottom, sign column, subtotals, a double-ruled result --
   table.mn-ledger > tr (th[scope=row] label, td.mn-ledger-sign, td.num amounts, td.mn-ledger-note);
   tr.mn-ledger-head (column titles), tr.mn-ledger-sub (an "in which" line), tr.mn-ledger-total (subtotal),
   tr.mn-ledger-result (the bottom line), tr.mn-ledger-gap (a quiet line that is not added in). */
.mn-ledger { width: 100%; border-collapse: collapse; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.mn-ledger th, .mn-ledger td { padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: baseline; border-bottom: var(--mn-line) solid var(--panel-border); }
.mn-ledger th { font-weight: 500; color: var(--text); }
.mn-ledger .num { text-align: right; white-space: nowrap; }
.mn-ledger-head th, .mn-ledger-head td { padding-block: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--mn-track-caps); text-transform: uppercase; color: var(--muted); border-bottom: var(--mn-line) solid var(--field-border); }
.mn-ledger-sign { width: var(--mn-ledger-sign-w); padding-inline: var(--sp-2) 0; font-weight: 700; text-align: center; color: var(--muted); }
.mn-ledger-sub th { padding-inline-start: var(--sp-7); font-weight: 400; color: var(--muted); }
.mn-ledger-sub td.num { color: var(--muted); }
.mn-ledger-total th, .mn-ledger-total td { font-weight: 650; border-top: var(--mn-line) solid var(--text); }
.mn-ledger-result th, .mn-ledger-result td { padding-block: var(--sp-3); font-size: var(--fs-lg); font-weight: 700; color: var(--heading); background: var(--mn-kraft); border-bottom: var(--mn-rule-w) double var(--primary); }
.mn-ledger-gap th, .mn-ledger-gap td { font-size: var(--fs-sm); color: var(--muted); border-bottom-style: dashed; }
.mn-ledger-note { font-size: var(--fs-sm); color: var(--muted); }
.mn-ledger tr:last-child > * { border-bottom-color: var(--primary); }
.mn-ledger-compact th, .mn-ledger-compact td { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }
.mn-ledger-compact .mn-ledger-sub th { padding-inline-start: var(--sp-5); }
.mn-ledger-compact .mn-ledger-result th, .mn-ledger-compact .mn-ledger-result td { font-size: var(--fs-md); }

/* A figure that opens the filtered list behind it (drill-down, PRODUCT design principle 2). */
.mn-drill { color: inherit; text-decoration: underline dotted var(--field-border); text-underline-offset: var(--mn-drill-offset); }
.mn-drill:hover { color: var(--link); text-decoration-style: solid; text-decoration-color: currentColor; }

/* -- Where a figure comes from (một con số, một nguồn): a quiet inline label, words first, never colour alone -------- */
.mn-src { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 500; color: var(--muted); white-space: nowrap; }
.mn-src .icon { flex: none; }
.mn-src-tam { color: var(--warn); }
.mn-src-tay { color: var(--mn-brass-ink); }

/* -- Note under a report: which rule produced the figures ("Ghi nhận theo Ngày tạo đơn · chỉ đơn Đã nhận") ----------- */
.mn-rule { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--mn-brass-ink); background: var(--mn-brass-tint); border-radius: var(--radius); }
.mn-rule .icon { flex: none; }

/* -- Import sources (S2): a grid of panels, one per source --------------------------------------------------------- */
.mn-nap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--mn-nap-card-min)), 1fr)); gap: var(--sp-4); align-items: start; }
.mn-nap-body { display: grid; gap: var(--sp-3); }
.mn-nap-when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.mn-nap-how { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.mn-nap-how strong { color: var(--text); font-weight: 600; }

/* -- Import progress: one bar the whole width, the count over it ----------------------------------------------------- */
.mn-progress { display: grid; gap: var(--sp-2); }
.mn-progress-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); font-variant-numeric: tabular-nums; }
.mn-progress-figure { font-size: var(--fs-2xl); font-weight: 700; color: var(--heading); }
.mn-progress-figure small { font-size: var(--fs-md); font-weight: 500; color: var(--muted); }

/* -- Document viewer (S10): the file as the proxy route shows it, toolbar above, page in a sunk stage ------------------ */
.mn-doc { display: grid; overflow: hidden; background: var(--sunk); border: var(--mn-line) solid var(--panel-border); border-radius: var(--radius-lg); }
.mn-doc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface); border-bottom: var(--mn-line) solid var(--panel-border); }
.mn-doc-name { flex: 1 1 var(--mn-doc-name-min); min-width: 0; font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.mn-doc-zoom { min-width: var(--mn-doc-zoom-w); font-size: var(--fs-sm); text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.mn-doc-stage { max-height: var(--mn-doc-stage-h); padding: var(--sp-5); overflow: auto; }
.mn-doc-page { max-width: var(--mn-doc-page-w); margin-inline: auto; padding: var(--sp-6); font-size: var(--fs-xs); line-height: var(--lh); color: var(--text); background: var(--surface); box-shadow: var(--sh-2); }
.mn-doc-page h3 { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-md); text-align: center; letter-spacing: var(--mn-track-caps); }
.mn-doc-page p { margin: 0 0 var(--sp-1); }
.mn-doc-center { text-align: center; color: var(--muted); }
.mn-doc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-block: var(--sp-3); }
.mn-doc-page table { width: 100%; margin-block: var(--sp-3); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mn-doc-page th, .mn-doc-page td { padding: var(--sp-1); border: var(--mn-line) solid var(--panel-border); text-align: left; }
.mn-doc-page th { font-weight: 600; background: var(--surface-2); }
.mn-doc-page .num { text-align: right; }
.mn-doc-sign { display: flex; justify-content: space-between; margin-top: var(--sp-5); color: var(--muted); }
/* The value the app read from the file, marked on the page where it sits (beside the field that holds it). */
.mn-doc-hl { padding-inline: var(--sp-1); background: var(--mn-brass-tint); outline: var(--mn-line) dashed var(--mn-brass); }
/* A photo of a paper receipt: narrow, slightly turned, as the camera took it. */
.mn-doc-receipt { max-width: var(--mn-doc-receipt-w); padding: var(--sp-4); font-size: var(--fs-xs); transform: rotate(var(--mn-doc-tilt)); }
.mn-doc-receipt hr { margin: var(--sp-2) 0; border: 0; border-top: var(--mn-line) dashed var(--field-border); }
.mn-doc-blur { filter: blur(var(--mn-doc-blur)); }

/* -- Field with the source of its value under the label (S10) ------------------------------------------------------ */
.mn-field-src { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-2); }

/* -- Phone: the two large actions of Nhân viên chứng từ (S9), stacked kit buttons --------------------------------- */
.mn-quick { display: grid; gap: var(--sp-3); }

/* -- Layout glue ------------------------------------------------------------------------------------------------- */
.mn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.mn-grow { flex: 1 1 auto; min-width: 0; }
.mn-nowrap { white-space: nowrap; }
/* A muted second line under a value outside a table (the kit styles .cell-sub only inside .tbl), e.g. in a dl's dd. */
.mn-sub { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
/* A full touch target for a link the kit leaves at its content height (the phone top bar's brand link, kit defect D2). */
.mn-tap { min-height: var(--tap); }
.mn-pos { color: var(--ok); }
.mn-neg { color: var(--danger); }
.mn-mono { font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace); font-size: var(--fs-sm); }
.mn-cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mn-col-min)), 1fr)); gap: var(--sp-4); align-items: start; }
.mn-actions-end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.mn-section-title { margin: 0; font-size: var(--fs-md); font-weight: 650; color: var(--heading); }
.mn-lede { margin: 0; color: var(--muted); }
.mn-pad { padding: var(--sp-4); }
.mn-list-plain { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.mn-list-plain li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.mn-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-3); }
.mn-meter .bar { --bar-w: 100%; }

/* Settings page (S18): the page contents beside the sections. */
.mn-settings { display: grid; grid-template-columns: var(--mn-settings-nav-w) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.mn-settings-nav { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
@media (max-width: 60rem) { .mn-settings { grid-template-columns: minmax(0, 1fr); } .mn-settings-nav { position: static; } }

/* Sign-in: the drawing of the aside (a back pocket with its double stitch, over ledger lines). */
.mn-art-ink { fill: none; stroke: currentColor; stroke-width: var(--mn-art-ink-w); stroke-linecap: round; stroke-linejoin: round; opacity: var(--mn-art-ink-opacity); }
.mn-art-line { fill: none; stroke: currentColor; stroke-width: var(--mn-art-line-w); opacity: var(--mn-art-line-opacity); }
.mn-art-stitch { fill: none; stroke: var(--mn-brass); stroke-width: var(--mn-art-ink-w); stroke-dasharray: var(--mn-art-dash); stroke-linecap: round; }
.mn-art-rivet { fill: var(--mn-brass); }

/* Index pages of the mockup sets (not part of the app). */
.mn-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--mn-index-col-min)), 1fr)); gap: var(--sp-4); }
.mn-index-list { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }

/* Sign-in card title (the aside holds the page's h1). */
.mn-login-title { margin: 0; font-size: var(--fs-2xl); }