/* ledlivo.css: the Sổ Ledlivo layer, linked after tokens.css, kit/fonts.css, kit/kit.css (and kit/look-app.css on phone screens).
   It holds only (a) parts the kit lacks and (b) layout glue for these screens. Every colour, space, radius, type size and shadow is a
   var(--*) from tokens.css; vehicle colours are tenant tokens (--ll-c-*) that a page hands to a swatch as --sw / --sw2. No kit class is
   restyled here. Each part below is listed in KIT_GAPS.md. */

/* ---------- Brand mark: a volt bolt on the cobalt plate (.brand-mark draws the plate) ---------- */
.ll-mark { inline-size: var(--ll-mark); block-size: var(--ll-mark); fill: currentColor; }

/* ---------- Top bar glue: today's date beside the main button ---------- */
.ll-today { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--header-muted); white-space: nowrap; }

/* ---------- G1 Colour swatch: the real colour of a vehicle, always beside its name ---------- */
.ll-sw {
  display: inline-block; flex: none; inline-size: var(--ll-sw); block-size: var(--ll-sw);
  vertical-align: -0.125em; background: var(--sw, var(--sunk));
  border-radius: calc(var(--radius-sm) * 0.6); box-shadow: inset 0 0 0 1px var(--ll-sw-edge);
}
.ll-sw-2 { background: linear-gradient(135deg, var(--sw) 0 50%, var(--sw2) 50% 100%); }
.ll-sw-lg { inline-size: var(--ll-sw-lg); block-size: var(--ll-sw-lg); border-radius: var(--radius-sm); }
.ll-mau { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.ll-mau-line { color: var(--muted); font-weight: 500; }
.ll-sw-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); vertical-align: middle; }
/* In a matrix head: the swatch above the colour name, right-aligned over the figures. */
.ll-mau-th { display: inline-flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }

/* ---------- G2 Colour stock tile: one colour of one line, band in its colour, the figure big ---------- */
.ll-ton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ll-tile-min)), 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.ll-ton-grid-sm { --ll-tile-min: var(--ll-tile-sm); }
.ll-ton {
  position: relative; display: grid; align-content: start; gap: var(--sp-1); min-block-size: var(--tap);
  padding: calc(var(--ll-band-h) + var(--sp-2)) var(--sp-3) var(--sp-3);
  color: var(--text); text-decoration: none; background: var(--surface);
  border: 1px solid var(--panel-border); border-radius: var(--radius); overflow: hidden;
}
.ll-ton::before { content: ""; position: absolute; inset: 0 0 auto; block-size: var(--ll-band-h); background: var(--sw, var(--sunk)); box-shadow: inset 0 -1px 0 var(--ll-sw-edge); }
.ll-ton-2::before { background: linear-gradient(90deg, var(--sw) 0 50%, var(--sw2) 50% 100%); }
.ll-ton-name { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-tight); }
.ll-ton-qty { font-size: var(--fs-2xl); font-weight: 700; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.ll-ton-qty small { margin-inline-start: var(--sp-1); font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.ll-ton-sub { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.ll-ton .tag { justify-self: start; }
.ll-ton[data-tone="warn"] { background: var(--warn-bg); border-color: var(--warn-line); }
.ll-ton[data-tone="bad"] { background: var(--danger-bg); border-color: var(--danger-line); }
.ll-ton-grid-sm .ll-ton { padding: calc(var(--ll-band-h) + var(--sp-1)) var(--sp-2) var(--sp-2); gap: 0; }
.ll-ton-grid-sm .ll-ton-qty { font-size: var(--fs-xl); }
.ll-ton-grid-sm .ll-ton-name { font-size: var(--fs-xs); }
a.ll-ton:hover { border-color: var(--field-border); }
a.ll-ton:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- G3 Colour pick tile: tap to add one vehicle of that colour to the order ---------- */
.ll-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ll-pick-min)), 1fr)); gap: var(--sp-2); }
.ll-pick-item {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--sp-2);
  min-block-size: calc(var(--tap) + var(--sp-3)); padding: var(--sp-2) var(--sp-3);
  font: inherit; text-align: start; color: var(--text); background: var(--surface);
  border: 1px solid var(--field-border); border-radius: var(--radius); cursor: pointer;
}
.ll-pick-item > .ll-sw { grid-row: 1 / span 2; inline-size: var(--ll-sw-lg); block-size: var(--ll-sw-lg); border-radius: var(--radius-sm); }
.ll-pick-name { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-tight); }
.ll-pick-sub { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.ll-pick-item:hover { border-color: var(--field-border-hover); }
.ll-pick-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ll-pick-item[aria-pressed="true"] { background: var(--primary-tint, var(--sunk)); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.ll-pick-item[data-tone="warn"] { background: var(--warn-bg); border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.ll-pick-item[data-tone="warn"] .ll-pick-sub { color: var(--warn); font-weight: 600; }
.ll-pick-item[aria-disabled="true"] { color: var(--muted); background: var(--surface-2); border-style: dashed; cursor: not-allowed; }
.ll-pick-n { position: absolute; inset-block-start: var(--sp-1); inset-inline-end: var(--sp-1); }
.ll-pick-item:has(.ll-pick-n) { padding-inline-end: var(--sp-8); }

/* ---------- G4 Calculation in words: each step of a figure, operator first, result at the end ---------- */
.ll-calc { display: grid; margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.ll-calc-row { display: grid; grid-template-columns: var(--ll-calc-op) minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--sp-2); padding-block: var(--sp-2); border-block-end: 1px solid var(--panel-border); }
.ll-calc-op { font-weight: 700; text-align: center; color: var(--muted); }
.ll-calc-label { font-size: var(--fs-sm); color: var(--text); }
.ll-calc-label small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.ll-calc-val { font-weight: 600; text-align: end; white-space: nowrap; }
.ll-calc-total { border-block-end: 0; border-block-start: 2px solid var(--text); }
.ll-calc-total .ll-calc-label { font-weight: 700; }
.ll-calc-total .ll-calc-val { font-size: var(--fs-lg); font-weight: 700; color: var(--heading); }

/* ---------- G5 A figure under the warning level inside a matrix cell (icon + word for screen readers) ---------- */
.ll-low { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--sp-1); font-weight: 700; color: var(--warn); }

/* ---------- Glue: colour matrices (S2, S3, S5) ---------- */
/* Thirteen colour columns and Tổng fit a 1280 px window: a colour name may break between its words ("TRẮNG / HỒNG") in a smaller size, and a row
   name may wrap, so the column width follows the figures, not the longest name. */
.ll-mat thead th { vertical-align: bottom; }
.ll-mat th.num, .ll-mat td.num { min-inline-size: var(--ll-mat-col); }
.ll-mat tbody th { min-inline-size: var(--ll-mat-name); white-space: normal; }
.ll-mat-tight tbody th { min-inline-size: var(--ll-mat-name-sm); }
.ll-mat thead .ll-mau-th { font-size: var(--fs-xs); }
.ll-mat .ll-mau-th > span:not(.ll-sw) { white-space: normal; text-align: end; }
.ll-mat .cell-input { text-align: end; }
.ll-mat a.ll-cell-link { color: inherit; text-decoration-color: var(--field-border); text-underline-offset: 3px; }

/* ---------- Glue: page parts ---------- */
.ll-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.ll-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--sp-4); }
.ll-cell-strong { font-weight: 700; }

/* Hạ hàng (S13): one row per colour, the name at the start and the kit stepper at the end. */
.ll-ha-list { margin: 0; padding: 0; list-style: none; }
.ll-ha-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-block-end: 1px solid var(--panel-border); }
.ll-ha-row:last-child { border-block-end: 0; }
.ll-ha-row .number-stepper { flex: none; }
.ll-ha-name { display: grid; gap: 0; min-inline-size: 0; }
.ll-ha-name .ll-mau { white-space: normal; }
.ll-ha-name small { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- G6 A5 delivery slip (S8): header, facts and lines on the kit's .paper.paper-a5 ---------- */
.ll-slip { display: grid; gap: var(--sp-3); }
.ll-slip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding-block-end: var(--sp-2); border-block-end: 1px solid currentColor; }
.ll-slip-org { font-weight: 700; }
.ll-slip-org small { display: block; font-weight: 400; }
.ll-slip-title { margin: 0; text-align: center; font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.04em; }
.ll-slip-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; }
.ll-slip-facts dt { font-weight: 600; }
.ll-slip-facts dd { margin: 0; }
.ll-slip .tbl th, .ll-slip .tbl td { padding: var(--sp-1) var(--sp-2); }
.ll-slip-cod { display: flex; justify-content: space-between; padding: var(--sp-2) var(--sp-3); border: 2px solid currentColor; font-weight: 700; }

/* ---------- G13 Goods of an order on a phone row: every colour line, never cut (S6 Đơn, S6 Chờ bốc) ---------- */
.ll-hang { margin: 2px 0 0; font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--muted); }

/* ---------- G14 A5 slip preview on a phone: scaled to the stage on screen, printed at full size (S8) ---------- */
@media screen and (max-width: 40rem) { .ll-fit { zoom: 0.52; } }
@media screen and (max-width: 23.5rem) { .ll-fit { zoom: 0.47; } }

/* ---------- Glue: the sign-in drawing, a fan of the vehicle colours ---------- */
.ll-art rect { fill: var(--sw); stroke: var(--ll-sw-edge); }
.ll-art .ll-art-bolt { fill: var(--ll-volt); stroke: none; }

/* ---------- Glue: index pages of the mockup set ---------- */
.ll-index-list { margin: 0; padding: 0; list-style: none; columns: 2 22rem; column-gap: var(--sp-6); }
.ll-index-list li { break-inside: avoid; padding-block: var(--sp-1); }