/* The shared sale-line parts - sale_lines.css v1.0.2 (TASK-2026-168, slice S7)

   Draws what static/js/sale_lines.js writes: the line table, the discount control, the totals, the payment block, the customer and
   salesperson fields and the line window. It is the owner-approved mockup (scratch/pos-dialogs.html) on the design tokens (tokens.css) and the
   S3 component classes of app.css (.btn, .card, .modal-overlay / .modal-card, .badge, the field recipe). Every value is a token; nothing here
   is a colour, a size or a duration of its own. Every class is named for the feature (sl-), so nothing here can collide with, or be
   caught by, an older rule. It writes nothing into app.css, so it does not touch the TASK-2026-163 "DS lane: sell" anchor.

   Sides are logical (start, end, inline). A hidden attribute is never given a display: nothing here is toggled with it. Loaded after
   app.css, info_corner.css and figures.css, so where a global tag rule (input, select, th, td, table .btn-icon) already draws the same thing
   it is left alone, and only what differs from the mockup is set here. */

/* ---------- small things ---------- */
.sl-icon { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.sl-muted { color: var(--muted); }
.sl-strong { font-weight: 700; }
.sl-cur { color: var(--muted); font-size: var(--fs-small); font-weight: 400; }
.sl-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sl-table .rp-num, .sl-tot .rp-num, .sl-pay .rp-num, .sl-st .rp-num, .sl-help .rp-num, .sl-dialog .rp-num, .sl-hist .rp-num { white-space: nowrap; }

/* ---------- fields ---------- */
.sl-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.sl-label { font-size: var(--fs-small); line-height: 1.5; color: var(--text); font-weight: 400; margin: 0; }
.sl-help { margin: 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); }
.sl-help--error { color: var(--danger); white-space: normal; }
.sl-help--error:empty { display: none; }
.sl-num { text-align: end; font-variant-numeric: tabular-nums lining-nums; }
.sl-group { display: flex; min-width: 0; }
.sl-group > input { flex: 1 1 auto; min-width: 0; border-start-end-radius: 0; border-end-end-radius: 0; }
.sl-suffix { flex: none; display: grid; place-items: center; min-width: 48px; height: var(--control); padding-inline: var(--space-3);
  border: var(--border-width) solid var(--field); border-inline-start: 0; border-start-end-radius: var(--radius); border-end-end-radius: var(--radius);
  background: var(--sunken); color: var(--muted); font-size: var(--fs-small); }
.sl-find-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; }
.sl-find-row > .sl-search { flex: 1 1 160px; min-width: 0; }
.sl-search { position: relative; }
.sl-search > .sl-icon { position: absolute; inset-block: 0; inset-inline-start: var(--space-3); margin-block: auto; color: var(--muted); pointer-events: none; }
.sl-search > input { padding-inline-start: calc(var(--space-3) + var(--icon-sm) + var(--space-2)); }
.sl-ck { appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0;
  border: var(--border-width) solid var(--field); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.sl-ck:hover { border-color: var(--muted); }
.sl-ck:checked { background: var(--fill); border-color: var(--fill); }
.sl-ck:checked::after { content: ""; width: 9px; height: 5px; border-inline-start: 2px solid var(--on-fill); border-block-end: 2px solid var(--on-fill); transform: translateY(-1px) rotate(-45deg); }
.sl-ck:focus-visible { outline: 0; border-color: var(--focus); }
.sl-ck:checked:focus-visible { border-color: var(--focus-on-fill); }
.sl-ck-row { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.sl-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.sl-stack { display: grid; gap: var(--space-4); }
.sl-cs-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 760px) { .sl-g2, .sl-cs-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the segmented control (amount / percent / new total): joined, 40px, the chosen one tinted and bold ---------- */
.sl-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: var(--border-width) solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.sl-seg button { height: var(--control); padding-inline: var(--space-4); border: 0; border-inline-start: var(--border-width) solid var(--line-strong); background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap;
  font: inherit; font-weight: 400; line-height: 1; transition: background-color var(--duration-quick) var(--ease-standard), color var(--duration-quick) var(--ease-standard); }
.sl-seg button:first-child { border-inline-start: 0; }
.sl-seg button:hover:not(:disabled) { color: var(--brand); }
.sl-seg button[aria-pressed="true"] { background: var(--tint-strong); color: var(--brand); font-weight: 700; }
.sl-seg button:disabled { opacity: .45; cursor: not-allowed; }
.sl-seg button:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.sl-dc-seg { display: grid; width: 100%; }
.sl-dc-seg button { padding-inline: var(--space-2); }

/* ---------- the line table ---------- */
.sl-table-wrap { overflow-x: auto; }   /* not .table-wrapper: its frame, and the sticky last column it makes below 1700px, are not wanted inside a card */
.sl-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.sl-table th { padding-inline: var(--space-3); }
.sl-table td { height: var(--row); padding-block: 6px; padding-inline: var(--space-3); white-space: nowrap; vertical-align: middle; }
.sl-table th:first-child, .sl-table td:first-child { padding-inline-start: var(--pad); }
.sl-table th:last-child, .sl-table td:last-child { padding-inline-end: var(--pad); }
.sl-table .sl-n { text-align: end; }
.sl-lt tbody tr[data-line] { cursor: default; user-select: none; -webkit-user-select: none; }
.sl-lt tbody tr[data-line]:hover td { background: var(--tint); }
.sl-lt tbody tr[data-line]:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.sl-nm, .sl-sub { display: block; overflow: hidden; text-overflow: ellipsis; }
.sl-sub { font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); }
.sl-lt td.sl-c-rm, .sl-lt th.sl-c-rm { width: 48px; padding-inline: var(--space-2) var(--space-3); }
.sl-lt .btn.sl-rm { inline-size: var(--control-sm); block-size: var(--control-sm); width: var(--control-sm); height: var(--control-sm); opacity: 1; border-color: transparent; background: transparent; color: var(--brand); }
.sl-lt .btn.sl-rm:hover { background: var(--tint); border-color: transparent; color: var(--brand); }
.sl-empty { margin: 0; padding: var(--space-6) var(--pad); color: var(--muted); text-align: center; }

/* the cart fills what is left of its column; its lines scroll inside it and the head stays (the sticky head is the global thead rule) */
.sl-cart { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.sl-cart-scroll { flex: 1 1 0; height: 0; min-height: 0; overflow: auto; }
.sl-cart-scroll .sl-table-wrap { overflow: visible; }
.sl-cart-scroll .sl-lt thead th { position: sticky; top: 0; z-index: 2; }
.sl-tools { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-end; padding: var(--space-4) var(--pad); border-bottom: var(--border-width) solid var(--line); }
.sl-tools .sl-field { flex: 1 1 240px; }
.sl-card-meta { margin-inline-start: auto; color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }

/* narrow screens: a row becomes two lines (item over quantity, before, discount, after) */
@media (max-width: 600px) {
  .sl-lt thead { display: none; }
  .sl-lt, .sl-lt tbody { display: block; }
  .sl-lt tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) var(--control-sm); gap: 6px 8px; padding: 10px var(--space-4); border-bottom: var(--border-width) solid var(--line); }
  .sl-lt.sl-ro tbody tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sl-lt tbody tr:last-child { border-bottom: 0; }
  .sl-table.sl-lt td { display: block; height: auto; padding: 0; border: 0; white-space: normal; max-width: none; overflow: visible; }
  .sl-lt td.sl-c-name { grid-column: 1 / 5; }
  .sl-lt.sl-ro td.sl-c-name { grid-column: 1 / -1; }
  .sl-lt td.sl-c-rm { grid-column: 5; grid-row: 1 / 3; align-self: center; width: auto; }
  .sl-lt td[data-l]::before { content: attr(data-l); display: block; font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); }
  .sl-lt .sl-n { text-align: start; }
}

/* ---------- totals ---------- */
.sl-tot { margin: 0; }
.sl-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); margin: 0; padding-block: 9px; border-bottom: var(--border-width) solid var(--line); align-items: baseline; }
.sl-tot .sl-kv:last-child { border-bottom: 0; }
.sl-kv dt { color: var(--muted); }
.sl-kv dd { margin: 0; text-align: end; white-space: nowrap; }
.sl-kv--total { padding-block: 12px; }
.sl-kv--total dt { color: var(--text); font-weight: 700; }
.sl-kv--total dd { color: var(--brand); font-weight: 700; font-size: var(--fs-body-lg); }
.sl-kv--total .sl-cur { color: inherit; }
.sl-kv.sl-is-warn dt, .sl-kv.sl-is-warn dd { color: var(--warning); font-weight: 700; }
.sl-st { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border: var(--border-width) solid; border-radius: var(--radius); font-size: var(--fs-small); line-height: 1.5; }
.sl-st .sl-icon { margin-block-start: 2px; }
.sl-st--ok { color: var(--success); background: var(--success-tint); border-color: var(--success-line); }
.sl-st--warn { color: var(--warning); background: var(--warning-tint); border-color: var(--warning-line); }

/* ---------- payment ---------- */
.sl-pay { display: grid; gap: var(--space-2); }
.sl-pay-row { display: grid; grid-template-columns: 116px minmax(0, 1fr) var(--control); gap: var(--space-2); align-items: center; }
.sl-pay-l { display: flex; align-items: center; gap: var(--space-2); color: var(--text); margin: 0; font-size: var(--fs-body); }
.sl-pay-l .sl-icon { color: var(--muted); }
.sl-pay-row .btn.sl-fill { inline-size: var(--control); block-size: var(--control); width: var(--control); height: var(--control); border-color: transparent; background: transparent; color: var(--brand); }
.sl-pay-row .btn.sl-fill:hover { background: var(--tint); border-color: transparent; color: var(--brand); }
.sl-pay-extras { margin-block-start: var(--space-3); }

/* ---------- the line window and the dialogs of the sale screens ---------- */
.modal-card.sl-dialog { max-width: var(--dialog-w); }
.modal-card.sl-dialog--wide { max-width: 1040px; }
.sl-dialog-end { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; }
.sl-dialog-body { display: grid; gap: var(--space-4); align-content: start; }
.sl-dialog-body > p { margin: 0; }
.sl-le-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--sunken); border: var(--border-width) solid var(--line); border-radius: var(--radius); }
.sl-le-item .sl-nm { font-weight: 700; }
.sl-dialog .modal-footer .sl-push { margin-inline-end: auto; }
@media (max-width: 600px) {
  .modal-overlay.sl-full { padding: 0; }
  .sl-full .modal-card.sl-dialog { max-width: none; width: 100%; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .sl-full .sl-dialog-body { padding: var(--space-4); }
  .sl-full .modal-footer { padding-inline: var(--space-4); }
  .sl-hide-sm { display: none; }
}

/* ---------- the till's layout (S8) ---------- */
.sl-pos-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: var(--space-4); align-items: stretch; }
.sl-pos-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.sl-pos-side { display: grid; gap: var(--space-4); align-content: start; }
@media (max-width: 1180px) {
  .sl-pos-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sl-cart-scroll { flex: none; height: auto; }
}

/* ---------- the saved-invoice page (S11) and the return / exchange steps (S10) ---------- */
.sl-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: auto; }
.sl-inv-foot-note { flex-basis: 100%; margin: 0; text-align: end; }
.sl-hist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.sl-hist li { padding-block: var(--space-2); border-bottom: var(--border-width) solid var(--line); }
.sl-hist li:last-child { border-bottom: 0; }
.sl-meta4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: 0; padding: var(--space-3) var(--space-4); background: var(--sunken); border: var(--border-width) solid var(--line); border-radius: var(--radius); }
.sl-meta4 > div { min-width: 0; }
.sl-meta4 dt { font-size: var(--fs-caption); color: var(--muted); line-height: 1.5; }
.sl-meta4 dd { margin: 0; font-weight: 700; line-height: 1.6; }
@media (max-width: 760px) { .sl-meta4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sl-steps { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.sl-steps li { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 0; min-width: 0; color: var(--muted); font-size: var(--fs-small); }
.sl-steps li + li::before { content: ""; flex: 0 1 24px; min-width: 8px; height: 1px; background: var(--line-strong); }
.sl-steps .sl-sq { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: var(--border-width) solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font-size: var(--fs-caption); }
.sl-steps .sl-sq .sl-icon { width: 14px; height: 14px; }
.sl-steps .sl-st-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.7; }
.sl-steps li.sl-cur { color: var(--brand); font-weight: 700; }
.sl-steps li.sl-cur .sl-sq { border-color: var(--brand); background: var(--tint-strong); }
.sl-steps li.sl-done { color: var(--text); }
.sl-steps li.sl-done .sl-sq { color: var(--brand); border-color: var(--brand); }
@media (max-width: 600px) {
  .sl-steps li:not(.sl-cur) .sl-st-l { display: none; }
  .sl-steps li:not(.sl-cur) { flex: none; }
  .sl-steps li.sl-cur { flex: 1 1 auto; }
}

/* ---------- the return and exchange windows (S10) ---------- */
.sl-label-row { display: flex; align-items: center; gap: var(--space-2); }
.sl-rt td.sl-c-ck, .sl-rt th.sl-c-ck { width: 40px; }
.sl-rt tr.sl-on td { color: var(--text); }
.sl-rt tr.sl-off td:not(.sl-c-ck) { color: var(--muted); }
.sl-qty-in { display: flex; align-items: center; gap: var(--space-2); }
.sl-qty-in input { width: 64px; }
.sl-c-wear .sl-group { width: 104px; }
.sl-c-cond select { width: 210px; }
.sl-rt td .sl-help--error { margin-block-start: 4px; max-width: 220px; white-space: normal; }
.sl-rt tr.sl-rt-group td { height: auto; padding-block: var(--space-2); background: var(--sunken); color: var(--brand); font-weight: 700; }
@media (max-width: 600px) {
  .sl-rt thead { display: none; }
  .sl-rt, .sl-rt tbody { display: block; }
  .sl-rt tbody tr { display: grid; grid-template-columns: 26px repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px var(--space-4); border-bottom: var(--border-width) solid var(--line); }
  .sl-rt tbody tr:last-child { border-bottom: 0; }
  .sl-rt tbody tr.sl-rt-group { display: block; padding: var(--space-2) var(--space-4); }
  .sl-table.sl-rt td { display: block; height: auto; padding: 0; border: 0; white-space: normal; }
  .sl-rt td[data-l]::before { content: attr(data-l); display: block; font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); }
  .sl-rt .sl-n { text-align: start; }
  .sl-rt td.sl-c-ck { grid-column: 1; grid-row: 1; padding-block-start: 2px; }
  .sl-rt td.sl-c-name { grid-column: 2 / 4; grid-row: 1; }
  .sl-rt td.sl-c-per { grid-column: 2; grid-row: 2; }
  .sl-rt td.sl-c-ref { grid-column: 3; grid-row: 2; }
  .sl-rt td.sl-c-qty { grid-column: 2; grid-row: 3; }
  .sl-rt td.sl-c-wear { grid-column: 3; grid-row: 3; }
  .sl-rt td.sl-c-cond { grid-column: 2 / 4; grid-row: 4; }
  .sl-c-cond select, .sl-c-wear .sl-group { width: 100%; }
}

/* ---------- receipt paper: white paper and dark ink in every theme (S11) ---------- */
.sl-paper { background: var(--paper); color: var(--ink); border: var(--border-width) solid var(--neutral-300); padding: 20px 18px 16px; font-size: 13px; line-height: 1.55; }
.sl-paper .sl-r-shop { text-align: center; font-size: 18px; font-weight: 700; }
.sl-paper .sl-r-c { text-align: center; color: var(--neutral-700); }
.sl-paper .sl-rule { border: 0; border-top: 1px dashed var(--ink); margin: 10px 0; }
.sl-r-row { display: flex; justify-content: space-between; gap: 12px; }
.sl-r-row > :first-child { min-width: 0; }
.sl-r-item { margin-bottom: 8px; }
.sl-r-item:last-child { margin-bottom: 0; }
.sl-r-name { font-weight: 700; }
.sl-r-var, .sl-r-mut { color: var(--neutral-700); }
.sl-r-total { font-weight: 700; font-size: 15px; }
.sl-r-amend { margin: 10px 0 0; padding: 6px 8px; border: 1.5px solid var(--ink); text-align: center; }
.sl-r-amend b { display: block; font-size: 15px; }
.sl-paper .rp-num { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .sl-seg button { transition-duration: .01ms; }
}

/* ---------- S8 additions: the till's page (TASK-2026-168, slice S8) ---------- */
/* The sale pane joins the tab strip above it exactly as the old pane did (one surface, the active tab opening into it); only its content is new. */
.pos-terminal-shell .sl-pos-grid {
  border-block-start: 1px solid var(--line);
  border-inline: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  padding-block: var(--space-5) var(--space-4);
  padding-inline: var(--space-4);
  background: var(--sunken);
}
html[data-theme^="retailpower"] .pos-terminal-shell .sl-pos-grid { background: var(--surface); }
/* The pane is as tall as its tallest column (the totals and the payment), as in the mockup: the page scrolls, never a box inside it, and the cart takes what its own
   column has left, so its bottom meets the payment card's and its lines scroll inside it under a head that stays. The old pane was fixed to the screen's height; that
   rule of the workspace shell is lifted for the new pane at every width, or the second and third cards would be cut off. */
.pos-terminal-shell:has(.sl-pos-grid) { display: block; block-size: auto; overflow: visible; }
/* The two search boxes open their lists over what stands below them: the cards that hold them stand in front of the ones after. */
.sl-till-front { z-index: 10; }
.sl-till-cart { z-index: 9; }
.sl-till-cart > .card-header { justify-content: flex-start; gap: var(--space-3); }
.sl-till-cart > .card-header .sl-card-meta { margin-inline-start: auto; }
.sl-till-cart .pos-scan-outcome:not(:empty) { padding: var(--space-3) var(--pad); border-block-end: var(--border-width) solid var(--line); }
.sl-till-chosen { flex-wrap: wrap; margin-block-start: var(--space-3); }
/* the salesperson field is the shared one, which draws its own two-column grid; here it is one field in the card's second column */
.sl-till-seller > .sl-cs-grid { display: block; }
.sl-till-notes textarea { min-height: var(--control); resize: vertical; }
.sl-till-foot { display: grid; gap: var(--space-3); }
.sl-till-foot .pos-checkout-blockers { margin: 0; text-align: center; }
/* ---------- the sale edit window (S9): sale_edit.js ---------- */
.sl-dialog--wide .sl-dialog-body { container-type: inline-size; }
.sl-ed-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.sl-ed-cart { z-index: 2; }
.sl-ed-err { margin: 0; padding-inline: var(--pad); padding-block: 0 var(--space-3); }
.sl-dialog textarea.sl-reason { width: 100%; box-sizing: border-box; height: calc(var(--control) * 2); min-height: calc(var(--control) * 2); resize: vertical; }
.sl-badges-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sl-pop { position: absolute; inset-inline: 0; inset-block-start: calc(100% + var(--space-1)); z-index: 20; max-height: 232px; overflow-y: auto;
  background: var(--surface); border: var(--border-width) solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-float); }
.sl-pop-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: var(--row); padding: var(--space-2) var(--space-3);
  border: 0; border-bottom: var(--border-width) solid var(--line); background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.sl-pop-item:last-child { border-bottom: 0; }
.sl-pop-item:hover, .sl-pop-item.is-active { background: var(--tint); }
.sl-pop-name { display: grid; min-width: 0; }
.sl-pop-none { margin: 0; padding: var(--space-3); color: var(--muted); }
@media (max-width: 600px) {
  .sl-full .modal-card.sl-dialog { margin: 0; border-radius: 0; }   /* the shell gives every card a 10px margin on a phone; full-screen has none */
@container (max-width: 640px) {
  .sl-ed-pair, .sl-dialog--wide .sl-cs-grid { grid-template-columns: minmax(0, 1fr); }
}
}

/* ---------- the line window's (i) beside a label (S-LE, owner 2026-10-16) ---------- */
.sl-dialog .sl-label-row { min-height: 24px; }
@media (max-width: 640px) {
  .sl-dialog .sl-label-row { min-height: 28px; }
}

/* ---------- the Sales group redraw (TASK-2026-187, spec 062): a pickable cart, the window's (!) beside Save, the status as a hint ---------- */
.sl-pickable tbody tr[data-row-id] { cursor: pointer; }
.sl-pickable tbody tr.selected-row :is(.sl-sub, .sl-muted) { color: inherit; opacity: .85; }
.sl-foot-end { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.sl-st-hint { display: flex; justify-content: flex-end; margin-block-start: var(--space-2); }