/* Sổ Kế Toán Lên Nguyễn (tenant minhnhat), the charts of S1 Tổng quan (decision D-4).
   Linked after minhnhat.css on the S1 screens only. Every chart is an inline SVG drawn from these classes; no colour, size or radius is written
   here as a literal: each is a var(--*) token from tokens.css, or a mix of tokens (the slots below). Prefix mn-, as in minhnhat.css.
   The meaning never rests on colour: each chart prints its figures on or beside the marks, and carries a hidden table with the same numbers. */

/* -- Chart palette: slots made from existing tokens (the kit names no categorical colours). Channels and series first, then status. -------------------- */
:root {
  --mn-ch-1: var(--primary);                                          /* TikTok Shop, "phát sinh", the current month */
  --mn-ch-2: var(--mn-brass);                                         /* Facebook, "còn phải nộp" */
  --mn-ch-3: color-mix(in srgb, var(--info) 60%, var(--surface));     /* Shopee, "sàn nộp thay" */
  --mn-ch-4: color-mix(in srgb, var(--muted) 85%, var(--surface));    /* Zalo and khác */
  --mn-ch-5: color-mix(in srgb, var(--muted) 62%, var(--surface));    /* Khác, apart from Zalo */
  --mn-ch-cost: color-mix(in srgb, var(--danger) 60%, var(--surface)); /* a deduction in the waterfall */
  --mn-ch-past: color-mix(in srgb, var(--primary) 60%, var(--surface));                             /* the months before the current one */
  --mn-ch-weekend: color-mix(in srgb, var(--sunk) 60%, var(--surface)); /* a band behind a Saturday or Sunday */
  --mn-ch-w: 0.9rem;                                                  /* swatch size in a legend */
  --mn-ch-ph-min: 9rem;                                               /* the least height of an empty chart */
  --mn-todo-split: 56rem;                                             /* the room the to-do list needs before it goes to two columns (kept in the @container below) */
}

/* -- Grid of the chart cards: two columns, a wide card spans both. The wrapper is the query container, the grid reacts to it. ------------------------- */
.mn-dash-wrap { container-type: inline-size; }
.mn-dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: stretch; }
.mn-span-2 { grid-column: 1 / -1; }
@container (max-width: 56rem) {
  .mn-dash { grid-template-columns: minmax(0, 1fr); }
}

/* -- A chart card: the kit .panel, a head with the takeaway as its title, a quiet subtitle and the link to the list --------------------------------- */
.mn-card { display: flex; flex-direction: column; min-width: 0; }
.mn-card > .panel-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
:root .mn-card .panel-head h2.mn-card-title { font-size: var(--fs-md); font-weight: 650; line-height: var(--lh-tight); color: var(--heading); max-width: 62ch; }
.mn-card .panel-head { align-items: flex-start; flex-wrap: nowrap; }
.mn-card .panel-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.mn-card .panel-actions { flex: none; }
.mn-card .panel-sub { margin-top: var(--sp-1); }
.mn-card-note { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.mn-card-note .icon { vertical-align: -0.2em; margin-inline-end: var(--sp-1); }
.mn-chart { position: relative; margin: 0; }
.mn-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mn-svg text { font-family: inherit; font-variant-numeric: tabular-nums; }
@media (max-width: 30rem) {
  .mn-card > .panel-body { padding: var(--sp-4); }
  .mn-card .panel-head { padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
  .mn-card .panel-head > div:first-child { flex: 1 1 100%; }
  .mn-card .panel-actions { margin-top: calc(-1 * var(--sp-1)); }
}

/* -- SVG parts ------------------------------------------------------------------------------------------------------------------------------- */
.mn-s1 { fill: var(--mn-ch-1); }
.mn-s2 { fill: var(--mn-ch-2); }
.mn-s3 { fill: var(--mn-ch-3); }
.mn-s4 { fill: var(--mn-ch-4); }
.mn-s5 { fill: var(--mn-ch-5); }
.mn-s-cost { fill: var(--mn-ch-cost); }
.mn-s-past { fill: var(--mn-ch-past); }
.mn-s-ok { fill: var(--ok); }
.mn-s-info { fill: var(--info); }
.mn-s-warn { fill: var(--warn); }
.mn-s-bad { fill: var(--danger); }
.mn-s-muted { fill: var(--muted); }
.mn-s-track { fill: var(--sunk); }
.mn-s-weekend { fill: var(--mn-ch-weekend); }
.mn-seg { stroke: var(--surface); stroke-width: 1; }
.mn-gridline { stroke: var(--panel-border); stroke-width: 1; }
.mn-axisline { stroke: var(--field-border); stroke-width: 1; }
.mn-link-line { stroke: var(--field-border); stroke-width: 1; stroke-dasharray: 2 2; }
.mn-mark { stroke: var(--heading); stroke-width: 2; }
.mn-ph-line { vector-effect: non-scaling-stroke; fill: none; stroke: var(--primary-tint-line); stroke-width: 1.5; stroke-dasharray: 5 4; }
.mn-tx { fill: var(--muted); font-size: 12px; }
.mn-tx-lab { fill: var(--text); font-size: 13px; }
.mn-tx-val { fill: var(--heading); font-size: 13px; font-weight: 600; }
.mn-tx-warn { fill: var(--warn); font-size: 12px; font-weight: 600; }
.mn-tx-on { fill: var(--on-primary); font-size: 13px; font-weight: 600; }
.mn-tx-b { font-weight: 700; }
.mn-tx-cap { fill: var(--muted); font-size: 12px; font-weight: 600; }
.mn-end { text-anchor: end; }
.mn-mid { text-anchor: middle; }

/* -- Legend and the rows of a stacked bar --------------------------------------------------------------------------------------------------- */
.mn-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--muted); }
.mn-legend li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.mn-sw { flex: none; width: var(--mn-ch-w); height: var(--mn-ch-w); background: var(--mn-sw, var(--mn-ch-1)); border-radius: var(--radius-sm); }
.mn-sw-1 { --mn-sw: var(--mn-ch-1); }
.mn-sw-2 { --mn-sw: var(--mn-ch-2); }
.mn-sw-3 { --mn-sw: var(--mn-ch-3); }
.mn-sw-4 { --mn-sw: var(--mn-ch-4); }
.mn-sw-cost { --mn-sw: var(--mn-ch-cost); }
.mn-sw-past { --mn-sw: var(--mn-ch-past); }
.mn-sw-ok { --mn-sw: var(--ok); }
.mn-sw-info { --mn-sw: var(--info); }
.mn-sw-warn { --mn-sw: var(--warn); }
.mn-sw-bad { --mn-sw: var(--danger); }
.mn-sw-muted { --mn-sw: var(--muted); }
.mn-sw-weekend { background: var(--mn-ch-weekend); outline: 1px solid var(--field-border); outline-offset: -1px; }
.mn-sw-tick { width: 2px; height: var(--mn-ch-w); background: var(--heading); border-radius: 0; }
.mn-rows { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.mn-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2) var(--sp-3); }
.mn-rows .mn-rows-n { text-align: right; color: var(--heading); font-weight: 600; }
.mn-rows .mn-rows-p { min-width: 3.5rem; text-align: right; color: var(--muted); }

/* -- Empty chart: axes only, never a row of zeros -------------------------------------------------------------------------------------------- */
.mn-ph { display: grid; align-content: center; gap: var(--sp-2); min-height: var(--mn-ch-ph-min); padding: var(--sp-3); background: var(--surface-2); border: var(--mn-line) dashed var(--primary-tint-line); border-radius: var(--radius); }
.mn-ph .mn-svg { width: 100%; height: calc(var(--mn-ch-ph-min) - var(--sp-6)); }
.mn-ph-note { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* -- To do: the kit work list in two columns on a wide screen, one on a narrow one -------------------------------------------------------------- */
.mn-todo-wrap { container-type: inline-size; }
@container (min-width: 56rem) {
  .mn-todo-wrap .work-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-todo-wrap .work-list > li > .work-item { height: 100%; }
  .mn-todo-wrap .work-list > li:nth-child(odd) { border-right: 1px solid var(--panel-border); }
  .mn-todo-wrap .work-list > li:nth-last-child(-n + 2) > .work-item { border-bottom: 0; }
}

/* -- Period line above the numbers --------------------------------------------------------------------------------------------------------------- */
.mn-period { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.mn-period .mn-rule { flex: 1 1 24rem; }

/* -- KPI row: the kit .kpi-row; the phone gets a tighter card so six fit in three lines ---------------------------------------------------------- */
/* Two cards a line on a phone; the kit would put one on each line under 27rem. */
.kpi-row.mn-kpis-sm > .kpi { --kpi-span: 6; }
.mn-kpis-sm .kpi { gap: var(--sp-1); padding: var(--sp-3); }
:root .mn-kpis-sm .kpi-value { font-size: var(--fs-2xl); }
.mn-kpis-sm .kpi-foot { font-size: var(--fs-xs); }
.mn-kpis-sm .kpi-icon { width: 1.75rem; height: 1.75rem; }
.mn-kpis-sm .kpi-label { font-size: var(--fs-xs); }
.mn-kpi-foot-b { color: var(--text); font-weight: 600; }

/* -- Data freshness strip: one cell per source, the days since the last upload on a 14-day bar with a mark at 7 days ---------------------------------- */

/* -- Phone: the rest of the charts behind one disclosure ---------------------------------------------------------------------------------------- */
.mn-more { display: grid; gap: var(--sp-4); }
.mn-more > summary { list-style: none; cursor: pointer; justify-content: space-between; }
.mn-more > summary::-webkit-details-marker { display: none; }
.mn-more > summary .icon { transition: transform var(--dur-1) var(--ease); }
.mn-more[open] > summary .icon { transform: rotate(180deg); }
.mn-more-body { display: grid; gap: var(--sp-4); }
.mn-more:not([open]) .mn-more-body { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mn-more > summary .icon { transition: none; }
}

/* The text twin of a chart is a visually hidden table; a table keeps its intrinsic width, so clip it as a block to stop it widening the page. */
table.visually-hidden { display: block; width: 1px; height: 1px; overflow: hidden; }