/* hieunguyen.css: the tenant layer of Sổ Giặt Sấy Hiếu Nguyễn, linked after tokens.css, kit/fonts.css, kit/kit.css (and kit/look-app.css on phone screens).
   It holds only (a) components the kit lacks and (b) layout glue for this tenant's screens. Colours, spacing, radius, type sizes and shadows come from var(--*) tokens;
   no kit class is restyled. Every class is named hieunguyen-*. What each part stands in for is listed in KIT_GAPS.md. */

/* ---------- 1. Store in view, in the same place on every office screen (KIT_GAPS #1) ----------
   The kit's slim top bar beside a sidebar has three columns (start, centre, end); the centre is the search slot, which this tenant does not use. The store picker takes it,
   so the store reads in the middle of the bar on every screen. The picker itself is a kit .btn with a kit .menu of menuitemradio items. A counter account with one store
   gets a static badge instead (no menu to open): .hieunguyen-scope as a div, with a lock icon. */
@media (min-width: 48.0625rem) {
  .app-main > .topbar > .hieunguyen-scope { grid-column: 2; justify-self: center; }
}
.hieunguyen-scope { white-space: nowrap; }
div.hieunguyen-scope {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  font-weight: 600;
  color: var(--header-fg);
  background: var(--surface-2);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}
.hieunguyen-scope-opt { display: inline-flex; align-items: center; gap: var(--sp-3); text-align: left; }
.hieunguyen-scope-opt strong { display: block; font-weight: 600; }
.hieunguyen-now { font-size: var(--fs-sm); color: var(--header-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 2. Counter screens: Nhận đồ and Trả đồ (layout glue; keys KIT_GAPS #8, facts #9, order head #6) ---------- */
/* The payment column beside the order holds two money cards and the big button: it takes the kit's documented --side-w knob, wider than the 20rem default. */
.hieunguyen-counter { --side-w: 23rem; }
/* On Trả đồ the money is the whole task: the column is wider, so the two fund cards sit side by side and the main button stays above the fold at 1440x900. */
.hieunguyen-payout { --side-w: 26rem; }
/* The line sheet of a new order: kit .tbl.tbl-grid with sheet cells; only the column widths are the tenant's. */
.hieunguyen-lines { table-layout: fixed; }
.hieunguyen-lines .hieunguyen-col-qty { width: 7rem; }
.hieunguyen-lines .hieunguyen-col-unit { width: 3.75rem; }
.hieunguyen-lines .hieunguyen-col-price { width: 8.5rem; }
.hieunguyen-lines .hieunguyen-col-total { width: 8.5rem; }
.hieunguyen-lines .hieunguyen-col-x { width: calc(var(--tap) + var(--sp-5)); }
/* Under 1440px (a 1280 or 1366 counter screen) the service name must still read in full ("Giặt sấy thường" vs "Giặt sấy đồ trắng riêng"):
   the payment column steps down towards the kit's 20rem default and the figure columns take only what their titles and "/kg · tối thiểu 3 kg" need. */
@media (max-width: 89.9375rem) {
  .hieunguyen-counter { --side-w: 21rem; }
  .hieunguyen-lines .hieunguyen-col-qty { width: 5.5rem; } /* the kit's .cell-input is never narrower than 5.5rem */
  .hieunguyen-lines .hieunguyen-col-unit { width: 3.25rem; }
  .hieunguyen-lines .hieunguyen-col-price { width: 8rem; }
  .hieunguyen-lines .hieunguyen-col-total { width: 7rem; }
}
/* The keyboard path of the counter, under the main button: kit .kbd keys with their words. */
.hieunguyen-keys { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--muted); }
.hieunguyen-keys li { display: inline-flex; align-items: center; gap: var(--sp-2); }
/* Two fields side by side that the kit's form grid would stack too early (date and time of the due time). */
.hieunguyen-pair { display: grid; grid-template-columns: minmax(0, 1fr) 8rem; gap: var(--sp-3); align-items: end; }
/* A line of small facts under a chosen customer or order (phone, last visit, open debt), wrapping between facts. */
.hieunguyen-facts { 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); }
.hieunguyen-facts li { display: inline-flex; align-items: center; gap: var(--sp-1); }
.hieunguyen-facts strong { color: var(--text); font-weight: 600; }
/* The order header on Trả đồ and Chi tiết đơn: the big order code beside its customer. */
.hieunguyen-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.hieunguyen-order-code { font-size: var(--fs-2xl); line-height: 1; } /* the kit's .doc-code takes the size of the text around it */
.hieunguyen-order-who { display: grid; gap: var(--sp-1); min-width: 0; }
.hieunguyen-order-who strong { font-size: var(--fs-lg); }

/* ---------- 3. VietQR beside the amount to transfer (KIT_GAPS #3) ---------- */
.hieunguyen-qr-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); align-items: center; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius); }
.hieunguyen-qr { display: block; width: 7.5rem; height: 7.5rem; color: var(--heading); }

/* ---------- 4. 80 mm thermal receipt and invoice (KIT_GAPS #2; barcode #3; print page #10) ----------
   The kit has A4 and A5 sheets, not a roll. This sheet prints on its own named page, so it never takes the kit's a4/a5 pages and no unnamed @page is declared. Ink is
   --heading on --surface: near-black on white, the pair a black-only thermal head needs; meaning never rests on colour (signs and words carry it). */
@page hieunguyen-80mm { size: 80mm 297mm; margin: 0; }
.hieunguyen-receipt {
  page: hieunguyen-80mm;
  box-sizing: border-box;
  width: 80mm;
  margin-inline: auto;
  padding: 5mm 4.5mm 7mm;
  font-size: 9.5pt;
  line-height: 1.35;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--heading);
  background: var(--surface);
  box-shadow: var(--sh-3);
}
.hieunguyen-receipt p { margin: 0; }
.hieunguyen-receipt-head { text-align: center; }
.hieunguyen-receipt-shop { font-size: 11pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.hieunguyen-receipt-title { margin-top: 3mm; font-size: 10pt; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 0.08em; }
.hieunguyen-receipt-code { margin-top: 1.5mm; font-size: 24pt; font-weight: 700; line-height: 1.1; text-align: center; letter-spacing: 0.02em; }
.hieunguyen-barcode { display: block; width: 100%; height: 12mm; margin-top: 2mm; color: var(--heading); }
.hieunguyen-receipt-rule { margin: 2.5mm 0; border: 0; border-top: 0.3mm dashed currentColor; }
.hieunguyen-receipt-row { display: flex; justify-content: space-between; gap: 3mm; }
.hieunguyen-receipt-row > :last-child { text-align: right; white-space: nowrap; }
.hieunguyen-receipt-lines { width: 100%; border-collapse: collapse; font-size: inherit; }
.hieunguyen-receipt-lines th, .hieunguyen-receipt-lines td { padding: 0.8mm 0; text-align: left; vertical-align: top; }
.hieunguyen-receipt-lines th { font-weight: 600; border-bottom: 0.3mm solid currentColor; }
.hieunguyen-receipt-lines .hieunguyen-receipt-num { text-align: right; white-space: nowrap; }
.hieunguyen-receipt-lines .hieunguyen-receipt-sub { display: block; font-size: 8pt; }
.hieunguyen-receipt-total { font-size: 12pt; font-weight: 700; }
.hieunguyen-receipt-due { margin-top: 2.5mm; padding: 1.5mm 2mm; text-align: center; border: 0.4mm solid currentColor; }
.hieunguyen-receipt-due strong { display: block; font-size: 13pt; }
.hieunguyen-receipt-words { margin-top: 1.5mm; font-style: italic; }
.hieunguyen-receipt-foot { margin-top: 3mm; font-size: 8pt; text-align: center; }
.hieunguyen-receipt-tag { display: block; margin-bottom: 2mm; padding: 1mm; font-size: 8.5pt; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 0.06em; border: 0.3mm solid currentColor; }
.hieunguyen-receipt .hieunguyen-qr { width: 30mm; height: 30mm; margin: 2mm auto 0; }
.hieunguyen-receipt-stamp { margin: 2mm 0; text-align: center; }
/* The same content on the kit's A5 sheet: the receipt parts scale to the larger page. */
.paper .hieunguyen-receipt-code { font-size: 30pt; }
.paper .hieunguyen-barcode { width: 70mm; margin-inline: auto; }
@media print {
  .hieunguyen-receipt { margin: 0; box-shadow: none; break-after: page; }
}
/* The print preview: a toolbar above the sheet (kit .no-print hides it on paper). */
.hieunguyen-print-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.hieunguyen-print-page { max-width: 72rem; margin-inline: auto; padding: var(--sp-6) var(--sp-5); }

/* ---------- 5. Tables: a filter button beside a column title (KIT_GAPS #4) ---------- */
.hieunguyen-th { display: inline-flex; align-items: center; gap: var(--sp-1); }
/* A list column typed into in place (Ghi chú on Sổ đơn, Địa chỉ on Khách hàng; KIT_GAPS #12): the kit's .cell-input fills its cell but does not widen the column,
   so the col keeps room for a short note or an address while the cell is open. */
.hieunguyen-col-note { width: 11rem; }
.hieunguyen-col-address { width: 17rem; }

/* ---------- 6. Dashboards ---------- */
/* Three store cards side by side on a computer, one a line on a narrow column: the kit's even page columns with a smaller minimum. */
.hieunguyen-stores { --col-min: 17rem; }
/* A sheet with typed cells beside a side panel (S10 sửa giá, S12 phiếu nhập and xuất dùng): the side stays beside it only while the sheet keeps 44rem (the kit's --main-min knob);
   at 1280 the side drops under the sheet, so service and item names are not cut or wrapped over 3-4 lines. */
.hieunguyen-sheet-cols { --main-min: 44rem; }

/* ---------- 7. Index pages of the mockup sets ---------- */
.hieunguyen-index { max-width: 72rem; margin-inline: auto; padding: var(--sp-7) var(--sp-5); }
.hieunguyen-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--sp-4); }