/* tahung.css — Sổ Thu Chi Nhà Trọ Tạ Hưng. The tenant's own sheet, linked after kit.css (and look-app.css on phone screens).
   It holds only (a) components the kit lacks, each recorded in KIT_GAPS.md, and (b) layout glue for these screens. Colour, spacing, radius,
   type size and shadow come from var(--*) tokens only (kit tokens and the tahung-* tokens of tokens.json). No kit class is restyled. */

/* ---------------------------------------------------------------- 1. Brand mark: the four blocks and the kiot row, drawn in currentColor (gap 1) */
.tahung-mark { display: block; inline-size: 72%; block-size: 72%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

/* ---------------------------------------------------------------- 2. Tòa plate: the block letter A B C D K, the order the whole book follows (gap 2) */
.tahung-toa {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: var(--tahung-toa-w);
  block-size: var(--tahung-toa-w);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
  background: var(--primary-tint, var(--surface-2));
  border: 1px solid var(--primary-tint-line, var(--panel-border));
  border-radius: var(--radius-sm);
}
.tahung-toa-sm { inline-size: var(--tahung-toa-w-sm); block-size: var(--tahung-toa-w-sm); font-size: var(--fs-md); }
@media print { .tahung-toa { color: var(--tahung-paper-ink); background: var(--tahung-paper-bg); border-color: var(--tahung-paper-ink); } }

/* ---------------------------------------------------------------- 3. Tòa cards of Tháng này: five cards in one row, A → B → C → D → Kiot (gap 3) */
.tahung-toa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--tahung-card-min), 1fr)); gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.tahung-toa-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  block-size: 100%;
  padding: var(--sp-4);
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-1);
}
a.tahung-toa-card:hover { border-color: var(--field-border); background: var(--surface-hover); }
.tahung-toa-card-head { display: flex; align-items: center; gap: var(--sp-3); }
.tahung-toa-card-name { display: block; font-size: var(--fs-lg); font-weight: 650; line-height: var(--lh-tight); }
.tahung-toa-card-sub { display: block; font-size: var(--fs-sm); color: var(--muted); }
.tahung-toa-card .stat-strip { margin-top: auto; }
.tahung-prog { display: grid; gap: var(--sp-1); }
.tahung-prog-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); }
.tahung-prog-row strong { font-variant-numeric: tabular-nums; }
.tahung-toa-card[data-state="todo"] { border-color: var(--warn-line); }
.tahung-toa-card[data-state="done"] { border-color: var(--ok-line); }

/* ---------------------------------------------------------------- 4. Meter face: a reading drawn as the counter wheels of the meter it was read from (gap 4) */
.tahung-meter {
  display: inline-flex;
  gap: var(--tahung-meter-gap);
  padding: var(--tahung-meter-gap);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: var(--fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: middle;
  background: var(--muted);
  border-radius: var(--radius-sm);
}
.tahung-meter-d { display: grid; place-items: center; inline-size: var(--tahung-meter-w); padding-block: var(--sp-1); color: var(--surface); background: var(--heading); border-radius: var(--tahung-meter-r); }
.tahung-meter-sm { font-size: var(--fs-sm); }
@media print { .tahung-meter { background: none; } .tahung-meter-d { color: var(--tahung-paper-ink); background: var(--tahung-paper-bg); border: 1px solid var(--tahung-paper-ink); } }

/* ---------------------------------------------------------------- 5. Reading card: one room on the phone, saved row by row (gap 5) */
.tahung-reading-list { margin: 0; padding: 0; list-style: none; }
.tahung-reading { position: relative; border-bottom: 1px solid var(--panel-border); }
.tahung-reading:last-child { border-bottom: 0; }
.tahung-reading-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  min-block-size: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text);
  text-decoration: none;
}
a.tahung-reading-row:hover { background: var(--surface-hover); }
.tahung-reading-main { display: grid; min-inline-size: 0; }
.tahung-reading-who { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.tahung-reading-end { display: grid; justify-items: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tahung-reading-fig { font-weight: 600; }
.tahung-reading-sub { font-size: var(--fs-sm); color: var(--muted); }
/* the open card: the room being typed */
.tahung-reading-open { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.tahung-reading-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.tahung-reading-title { display: grid; min-inline-size: 0; }
.tahung-reading-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; gap: var(--sp-3); }
.tahung-reading-old { display: grid; gap: var(--sp-1); }
.tahung-reading-calc { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3); font-variant-numeric: tabular-nums; }
.tahung-reading-calc strong { font-size: var(--fs-lg); }
.tahung-reading-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tahung-reading[data-state]::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--tahung-bar-w); }
.tahung-reading[data-state="open"] { background: var(--surface); }
.tahung-reading[data-state="open"]::before { background: var(--primary); }
.tahung-reading[data-state="warn"] { background: var(--warn-bg); }
.tahung-reading[data-state="warn"]::before { background: var(--warn); }
.tahung-reading[data-state="error"] { background: var(--danger-bg); }
.tahung-reading[data-state="error"]::before { background: var(--danger); }
.tahung-reading[data-state="todo"]::before { content: none; }
.tahung-reading[data-state="todo"] .tahung-reading-fig { font-weight: 400; color: var(--muted); }

/* ---------------------------------------------------------------- 6. The printed bill: A5 landscape, or two halves of one A4 sheet (gap 6) */
.tahung-bill { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--tahung-mm-2); font-size: var(--tahung-pt); line-height: 1.3; color: var(--tahung-paper-ink); }
.tahung-bill-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tahung-mm-5); padding-bottom: var(--tahung-mm-2); border-bottom: var(--tahung-rule-strong) solid var(--tahung-paper-ink); }
.tahung-bill-house { margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.tahung-bill-line { margin: 0; font-size: var(--tahung-pt-sm); }
.tahung-bill-title { margin: 0; text-align: end; font-size: var(--tahung-pt-xl); font-weight: 700; text-transform: uppercase; }
.tahung-bill-no { margin: 0; text-align: end; }
.tahung-bill-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tahung-mm-1) var(--tahung-mm-5); margin: 0; }
.tahung-bill-who strong { font-size: var(--tahung-pt-lg); }
.tahung-bill-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--tahung-qr-col); gap: var(--tahung-mm-5); align-items: start; }
.tahung-bill-tbl { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tahung-bill-tbl :is(th, td) { padding: var(--tahung-mm-1) var(--tahung-mm-2); text-align: start; vertical-align: top; border-bottom: var(--tahung-rule) solid var(--tahung-paper-ink); }
.tahung-bill-tbl thead th { font-size: var(--tahung-pt-sm); font-weight: 700; border-bottom-width: var(--tahung-rule-strong); }
.tahung-bill-tbl tbody th { font-weight: 400; }
.tahung-bill-tbl .num { text-align: end; white-space: nowrap; }
.tahung-bill-tbl .tahung-bill-calc { font-size: var(--tahung-pt-sm); white-space: nowrap; }
.tahung-bill-tbl tr.tahung-bill-sum > * { font-weight: 700; border-top: var(--tahung-rule-strong) solid var(--tahung-paper-ink); }
.tahung-bill-tbl tr.tahung-bill-due > * { font-size: var(--tahung-pt-lg); font-weight: 700; border-top: var(--tahung-rule-strong) solid var(--tahung-paper-ink); border-bottom: var(--tahung-rule-double) double var(--tahung-paper-ink); }
.tahung-bill-words { margin: var(--tahung-mm-1) 0 0; font-style: italic; }
.tahung-bill-pay { display: grid; justify-items: center; gap: var(--tahung-mm-1); text-align: center; font-size: var(--tahung-pt-sm); }
.tahung-bill-pay p { margin: 0; }
.tahung-bill-memo { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--tahung-pt); font-weight: 700; }
.tahung-bill-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--tahung-mm-2) var(--tahung-mm-5); font-size: var(--tahung-pt-sm); }
.tahung-qr { display: block; inline-size: var(--tahung-qr); block-size: var(--tahung-qr); color: var(--tahung-paper-ink); }
.tahung-qr-empty { display: grid; place-items: center; inline-size: var(--tahung-qr); block-size: var(--tahung-qr); padding: var(--tahung-mm-2); font-size: var(--tahung-pt-sm); text-align: center; border: var(--tahung-rule) dashed var(--tahung-paper-ink); }
.tahung-half { display: grid; block-size: var(--tahung-half-h); }
.tahung-cut { display: flex; align-items: center; gap: var(--tahung-mm-2); margin-block: var(--tahung-mm-3); font-size: var(--tahung-pt-sm); }
.tahung-cut::before, .tahung-cut::after { content: ""; flex: 1; border-top: var(--tahung-rule) dashed var(--tahung-paper-ink); }
.tahung-bill .stamp { justify-self: start; }

/* ---------------------------------------------------------------- 7. Copied message: the plain text that goes into Zalo, shown as it will paste (gap 7) */
.tahung-msg {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: var(--fs-sm);
  line-height: var(--lh);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  background: var(--surface-2);
  border: 1px dashed var(--field-border);
  border-radius: var(--radius);
}

/* ---------------------------------------------------------------- 8. Layout glue */
/* Two panels side by side that each keep a readable width (S13 EVN blocks, S17 dry-run findings, S18 settings). */
.tahung-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--tahung-pair-min), 1fr)); gap: var(--sp-4); align-items: start; }
/* A row of buttons that wraps, with the kit's gap. */
.tahung-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
/* A name, its state and a figure on one line that wraps (S2 tòa progress line, S4 and S9 tag rows). */
.tahung-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
/* Room code beside its renter on one line in a table cell. */
.tahung-room { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }

/* Hidden tab panels stay hidden even though .panel sets display. */
.panel[hidden], [role="tabpanel"][hidden] { display: none; }