/* Godown-specific styling.
 *
 * Deliberately almost empty: awp-admin.css is the source of truth, and a rule
 * added here is a rule that will not follow the design system when it moves.
 * If something looks wrong, the fix is nearly always to use the component the
 * stylesheet already ships rather than to add a rule below.
 */

/* Dates and voucher numbers never break across lines: "16 Sep 2026" stacked
 * three high, or OUT- above 00189, reads as three facts rather than one. */
.tbl td.nowrap { white-space: nowrap; }
/* Likewise a quantity and its unit: "1,296.000" over "kg" is two numbers. */
.tbl td.num { white-space: nowrap; }

/* Numeric column headings.
 *
 * The design system sets `.num { text-align: right }` and, further down,
 * `.tbl th { text-align: left }` — which is both later and more specific, so a
 * `<th class="num">` stays left-aligned over a right-aligned column. */
.tbl th.num { text-align: right; }

/* Quantities typed into the voucher line editor line up under the heading. */
.tbl td.num input { text-align: right; }

/* The line editor's controls fill their cells. */
.lines select, .lines input { width: 100%; }
.lines .affix .unit { min-width: 3.2em; justify-content: center; }

/* Tom Select inside a table cell: the widget is the cell's whole width, and
 * the dropdown must escape the .scroll wrapper's overflow clipping. */
.lines .ts-wrapper { width: 100%; }
.lines .scroll, .card .scroll:has(.lines) { overflow: visible; }

/* Stacked rows (.tbl-stack, below 560px). The design system lays a cell out as
 * a flex row: label, then content. A cell with a second line — the SKU under an
 * item, the date under a voucher number — puts that line beside the first
 * instead of under it. For those cells the label becomes a column spanning
 * both lines. Cells whose extra is inline (a unit after a quantity) are left
 * as the row they are. */
@media (max-width: 560px) {
  .tbl-stack td[data-label]:has(> div) { display: grid; grid-template-columns: 38% 1fr; gap: 2px var(--sp-3); }
  .tbl-stack td[data-label]:has(> div)::before { grid-column: 1; grid-row: 1 / span 2; }
  /* The design system pads a table's first cell to the card edge with
     `.card > :is(.scroll, form > .scroll) .tbl :is(th, td):first-child` (0,4,2),
     and undoes it for stacked rows with `.card > .scroll .tbl-stack :is(th, td):first-child`
     (0,4,1) — one type selector weaker, so the undo never applies and the first
     field of every stacked card sat 12px right of the rest. Matched here at
     higher weight; remove once awp-admin.css fixes its own reset. */
  .card > :is(.scroll, form > .scroll) .tbl.tbl-stack :is(th, td):first-child { padding-left: 0; }
  .tbl-stack td[data-label]:has(> div)::before { width: auto; }
  .tbl-stack td[data-label]:has(> div) > * { grid-column: 2; }
}

/* The on-screen guide, in its drawer and on its own page. The design system
 * styles headings, lists and tables; this only gives prose room to breathe. */
.guide-body h3 { margin: var(--sp-5) 0 var(--sp-2); }
.guide-body h4 { margin: var(--sp-4) 0 var(--sp-2); }
.guide-body p, .guide-body ul, .guide-body ol { margin: 0 0 var(--sp-3); line-height: 1.6; }
.guide-body ul, .guide-body ol { padding-left: 1.2em; }
.guide-body .callout, .guide-body .scroll { margin: var(--sp-3) 0; }
dialog.drawer .guide-body { max-width: 62ch; }

/* The roles matrix: a tick the signed-in role cannot grant is visibly locked. */
[data-roles] input[type=checkbox]:disabled { opacity: .45; cursor: not-allowed; }