/* duyquynh.css: Sổ Hóa Đơn Nhôm Kính Duy Quỳnh, the tenant's own sheet, linked after the kit (v1.4).
   It holds only what the kit lacks (each rule names its gap in KIT_GAPS.md) and layout glue for this tenant's screens.
   Every colour, space, radius, type size and shadow is a var(--*) token; nothing here restyles a kit class, except where a
   rule works round a kit defect logged in KIT_GAPS.md (G18 for D11, G20 for D14), behind a dq- hook. */

/* ---------- G1 Ruler edge -------------------------------------------------------------------------------------------
   The graduated edge of an aluminium worker's rule: a short tick every --dq-tick and a full one every --dq-tick-major.
   It sits under every working of a line (G2) and on the sign-in card, the one decorative mark of the tenant.
   Delete when the kit has a measure strip. */
.dq-ruler {
  display: block;
  height: var(--dq-ruler-h);
  background:
    repeating-linear-gradient(to right, var(--muted) 0 1px, transparent 1px var(--dq-tick-major)) left bottom / 100% 100% no-repeat,
    repeating-linear-gradient(to right, var(--field-border) 0 1px, transparent 1px var(--dq-tick)) left bottom / 100% 50% no-repeat;
}
.dq-ruler-top { border-top: 1px solid var(--panel-border); }

/* ---------- G2 Phép tính --------------------------------------------------------------------------------------------
   The working of one line, written the way the owner works it out on the booklet:
   "1,6 × 1,32 × 3 = 6,336 m² × 1.700.000 = 10.771.200 ₫". Figures are tabular; the result is bold; the operators are
   muted. p.dq-calc > span.dq-calc-line (one or two) + span.dq-ruler[aria-hidden]. A manual figure (Sửa tay) shows the
   automatic one in a second line (.dq-calc-line). Delete when the kit has a formula line for a card (it has
   .tbl-formula for a sheet only). */
.dq-calc {
  margin: 0;
  padding: var(--sp-2) var(--sp-3) 0;
  font-size: var(--fs-sm);
  line-height: var(--lh);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.dq-calc-line { display: block; padding-bottom: var(--sp-1); overflow-wrap: anywhere; }
.dq-calc-n { color: var(--text); font-weight: 600; white-space: nowrap; }
.dq-calc-res { color: var(--text); font-weight: 700; white-space: nowrap; }
.dq-calc-miss { color: var(--warn); font-weight: 600; white-space: nowrap; }
.dq-calc > .dq-ruler { margin: var(--sp-1) calc(-1 * var(--sp-3)) 0; }

/* ---------- G3 Size pair --------------------------------------------------------------------------------------------
   Cao and Rộng typed on a phone as two decimal fields with "×" between them (the iOS decimal keypad has no "x").
   .dq-size > input.input + span.dq-size-x[aria-hidden] + input.input, inside a .field whose label names both. */
.dq-size {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--dq-size-x-w) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-1);
}
.dq-size-x { font-size: var(--fs-lg); font-weight: 600; text-align: center; color: var(--muted); }

/* ---------- Layout glue ---------------------------------------------------------------------------------------------- */
/* A field that spans both columns of .line-card-body (Tên hàng, the size pair) (G4). */
.dq-span-2 { grid-column: 1 / -1; }
/* A line card holds more than the kit's two inputs: keep its parts apart (G4). */
.dq-card-stack { display: grid; gap: var(--sp-3); }
/* G15 · The facts of a record beside its three money totals (S4, S8). */
.dq-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--sp-5);
  align-items: center;
}
@media (max-width: 60rem) { .dq-summary { grid-template-columns: minmax(0, 1fr); } }
/* G15 · A row of controls over a phone list (search, month): keeps them on one line. */
.dq-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.dq-bar > .dq-grow { flex: 1 1 var(--dq-grow-min); min-width: 0; }

/* ---------- G16 Words under a typed cell -----------------------------------------------------------------------------
   The kit sets td.cell-edit to padding 0 for its input, so a .cell-sub or .cell-flags under the input (S3 row 10:
   "Nên xem lại" and "Kiểm tra lại đơn vị: đang hiểu là mm") ran to the cell's danger edge and lost its last letters.
   span.cell-sub.dq-under or span.cell-flags.dq-under, right after the input, in a .tbl-compact sheet (S3, S10): it takes
   the compact input's inset. Delete when the kit insets text under a .cell-input. */
.dq-under { padding: 0 var(--sp-2) var(--sp-2); }

/* ---------- G17 Panels side by side end on one line -----------------------------------------------------------------
   .page-cols lines its columns up at the top (align-items: flex-start), so on S1 "Cần xử lý" ended about 80 px above
   "Doanh số và đã thu" beside it. .page-cols.dq-cols-match stretches the row so both panels end on one line (design
   lessons §30). Delete when the kit has a matched-height .page-cols. */
.dq-cols-match { align-items: stretch; }

/* ---------- G18 Month and year in a phone calendar (kit defect D11) ------------------------------------------------
   Under data-tap="all" the kit's rule for the date field's own button room (:root[data-tap="all"] .datepicker .input,
   56 px at the end) also reaches the month and year boxes in the calendar head, which sit inside the same .datepicker
   box, and beats the head's own 28 px. At 390 and 360 "Tháng 11" read "Tháng" (118/101 px) and "2026" read "20"
   (98/77). .datepicker.dq-date (the 13 phone date fields) gives the head boxes back the room of their caret only, so
   the text fits the same boxes (90/101 and 70/77). Delete when the kit scopes that rule to the field's own input. */
.dq-date.datepicker .calendar-head .combo .input { padding-inline-end: calc(var(--sp-2) + var(--icon)); }

/* ---------- G19 A link that is a touch target in a value cell ------------------------------------------------------
   The customer link in the S4 phone facts card and the "Dùng cho" link of S10 phone were 17 and 20 px tall. a.dq-tap
   keeps the link look and takes a full --tap height; a long name still wraps inside it. Delete when the kit sizes a
   link in a .dl value under a coarse pointer. */
.dq-tap { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------- G20 A list row that opens a sheet ----------------------------------------------------------------------
   The kit draws .work-item as a link (a.work-item) or a div; a row that opens the Sửa giá sheet (S11 phone) is a
   button, which kept the browser's grey face, outset edges, own font and shrink-to-fit width. button.work-item.dq-row-btn
   takes the row's full width and the kit row's look (its bottom rule and the last row's none stay the kit's). Delete
   when the kit documents button.work-item. */
.dq-row-btn {
  width: 100%;
  margin: 0;
  font: inherit;
  text-align: start;
  background: none;
  border-top: 0;
  border-inline: 0;
  cursor: pointer;
}
.dq-row-btn:hover { background: var(--surface-hover); }
.dq-row-btn:focus-visible { outline-offset: -3px; }

/* ---------- G21 Two fields side by side on a narrow phone ----------------------------------------------------------
   .line-card-body puts Số lượng and Đơn giá side by side; under 380 px the price box was 105 px and "1.700.000" lost
   its last digit (115/105). .dq-pair-stack fields take the full row there. Delete when .line-card-body stacks by itself. */
@media (max-width: 23.75rem) { .dq-pair-stack { grid-column: 1 / -1; } }

/* ---------- G22 A field that needs two columns of a form grid -------------------------------------------------------
   S10 office "Dùng cho hóa đơn" holds "HĐ 0008 · Nhà văn hóa thôn Ngọc Lâm" (328 px) in a 262 px column. .dq-wide spans
   two columns of its .form-grid from 64 rem up, where the grid has three or more. Delete when the kit has a wide
   form-grid field. */
@media (min-width: 64rem) { .dq-wide { grid-column: span 2; } }

/* ---------- G5 The shop's documents on paper ------------------------------------------------------------------------
   The booklet "HÓA ĐƠN THANH TOÁN" (A5) and the workbook's "BẢNG KHỐI LƯỢNG" (A4, flowing over pages). The paper is
   black on white in every palette (kit .paper), so every line here is currentColor. */
.dq-doc-title {
  margin: var(--dq-doc-gap) 0 0;
  font-size: var(--dq-doc-title);
  font-weight: 700;
  letter-spacing: var(--dq-doc-track);
  text-align: center;
}
.dq-doc-sub { margin: 0; text-align: center; }
.dq-doc-party { display: grid; gap: var(--dq-doc-gap-sm); margin: var(--dq-doc-gap) 0 0; }
.dq-doc-party > p { display: flex; gap: var(--dq-doc-gap-sm); align-items: baseline; margin: 0; }
.dq-doc-fill { flex: 1 1 auto; min-width: 0; border-bottom: var(--dq-doc-rule) dotted currentColor; }
.dq-doc-tbl {
  width: 100%;
  margin-top: var(--dq-doc-gap);
  border-collapse: collapse;
  font-size: var(--dq-doc-fs);
  font-variant-numeric: lining-nums tabular-nums;
}
.dq-doc-tbl :is(th, td) {
  padding: var(--dq-doc-cell-y) var(--dq-doc-cell-x);
  text-align: start;
  vertical-align: top;
  border: var(--dq-doc-rule) solid currentColor;
}
.dq-doc-tbl thead th { font-weight: 700; text-align: center; vertical-align: middle; }
.dq-doc-tbl tbody th { font-weight: 400; }
.dq-doc-tbl :is(th, td).num { text-align: end; white-space: nowrap; }
.dq-doc-tbl .dq-doc-c { text-align: center; white-space: nowrap; }
.dq-doc-tbl tr.dq-doc-group :is(th, td) { font-weight: 700; font-style: italic; }
.dq-doc-tbl tfoot :is(th, td) { font-weight: 700; }
.dq-doc-tbl tfoot tr.dq-doc-plain :is(th, td) { font-weight: 400; }
.dq-doc-tbl thead { display: table-header-group; }
.dq-doc-tbl tr { break-inside: avoid; }
.dq-doc-words { margin: var(--dq-doc-gap-sm) 0 0; }
.dq-doc-date { margin: var(--dq-doc-gap) 0 0; text-align: end; font-style: italic; }
.dq-doc-small { font-size: var(--dq-doc-fs-sm); }