/* Scalpia POS — list screens (catalog, customers, receipts, inventory, documents, tasks) and their editors (item, customer
   profile, stock documents, promotions): owned by the "lists" screen agent of the native redesign; builds on
   web/ui/native.css (read its guide). Tokens only (tests/design-tokens.test.mjs).
   ─ GUIDE ───────────────────────────────────────────────────────────────────────────────────────────────────────────────
   • Lists (app.mjs renderCatalog/renderCustomers/renderSales/renderInventory/renderDocuments/renderTasks): table() rows,
     native rows < 700 px (kit § 5) — full-bleed .list-panel, 72 px rows, leading .row-lead (item tile, payment icon,
     category colour) on tr.has-lead, one .row-sub line under the title, a trailing value (.cell-trailing or the amount
     cell), tap = the row's action. Real tables from 700 px.
   • Add = the extended FAB (button.primary.fab.extended inside the page heading): floating above the navigation bar on a
     phone, an ordinary filled button in the heading from 700 px.
   • Catalog label printing = selection mode on a phone (.catalog-panel.selecting + .selection-bar from web/labels.mjs).
   • Receipts: .sales-day groups under a sticky .day-head (date · day total).
   • Editors: item editor sections (.ie-look colour swatches, field groups, flat variant/add-on rows, "+ Tambah" rows),
     customer profile (.profile-*), stock document lines (.document-line as list rows).
   ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* ── Add button: FAB on a phone, filled button in the heading on wider screens ─────────────────────────────────────── */
.list-screen .fab .ui-icon{margin-left:calc(-1 * var(--space-1))}
@media(min-width:700px){
 .page-heading .fab{position:static;height:auto;min-height:var(--touch);box-shadow:none;border-radius:var(--radius-md);padding:0 var(--space-5) 0 var(--space-4)}
}
@media(max-width:699px){
 .list-screen{padding-bottom:calc(var(--fab-size) + var(--space-8))}
 .list-screen .page-heading:not(:has(.page-more)){display:contents}
}

/* ── Shared row pieces ───────────────────────────────────────────────────────────────────────────────────────────────── */
.row-lead{display:grid;place-items:center;flex:none;width:var(--avatar);height:var(--avatar);overflow:hidden;border-radius:50%;background:var(--tonal-bg);color:var(--tonal-fg)}
.row-lead svg{width:var(--icon);height:var(--icon)}
.item-lead{border-radius:var(--radius-sm);font-size:var(--text-xl);line-height:1}
.item-lead img{width:100%;height:100%;object-fit:cover}
.item-lead .tile-initials{font-size:var(--text-md);letter-spacing:0}
.item-lead.has-emoji{background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border)}
.cat-lead{background:var(--swatch,var(--tonal-bg));box-shadow:inset 0 0 0 1px var(--border)}
.swatch-dot{display:inline-block;width:var(--space-4);height:var(--space-4);margin-right:var(--space-2);vertical-align:-3px;border-radius:50%;background:var(--swatch,transparent);box-shadow:inset 0 0 0 1px var(--border-strong)}
.pay-lead.is-refund{background:var(--danger-bg);color:var(--danger-fg)}
small.row-sub,.sale-time{display:none}
.row-stock.is-low{color:var(--danger-fg);font-weight:var(--weight-semibold)}
.row-flag{color:var(--danger-fg)}
.status-text{font-size:var(--text-xs);font-weight:var(--weight-semibold)}
.sales-days .sale-date{display:none}
.sales-days .sale-time{display:inline}
/* Wider screens: the leading visual floats beside the name inside the first cell. */
@media(min-width:700px){
 .table-name>.row-lead{float:left;width:36px;height:36px;margin:0 var(--space-3) 0 0}
 .table-name>.pay-lead{width:var(--icon);height:var(--icon);background:transparent;color:var(--text-muted);margin-top:0}
 .table-name>.pay-lead svg{width:20px;height:20px}
 .table-name>.cat-lead{width:var(--icon);height:var(--icon)}
 .row-flag{display:block}
}

/* ── Phone: native rows ──────────────────────────────────────────────────────────────────────────────────────────────── */
@media(max-width:699px){
 .list-panel{margin:0 calc(-1 * var(--space-4));border:0;border-radius:0;box-shadow:none;background:var(--surface);padding:0}
 .list-panel .table-wrap{border:0;border-radius:0;box-shadow:none}
 .as-cards tr.has-lead{padding-left:calc(var(--space-4) + var(--avatar) + var(--space-4))}
 .as-cards tr.has-lead .row-lead{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%)}
 .as-cards tr.has-lead [data-cell=title]{font-weight:var(--weight-medium)}
 .as-cards [data-cell=title] small.row-sub{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .as-cards [data-cell=title] :is(.wide-only,.item-ref){display:none}
 .list-panel .as-cards [data-cell=meta]~[data-cell=meta]:not(.cell-trailing){margin-left:calc(-1 * var(--space-2))}
 .as-cards .cell-trailing{order:2;margin-left:auto;font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text)}
 .as-cards .cell-trailing::before{content:none}
 .as-cards .cell-trailing:not(:has(.tag)){display:none}
 .as-cards .cell-trailing .tag{padding:0;background:transparent;color:inherit;font-size:var(--text-md);font-weight:var(--weight-semibold)}
 .as-cards .cell-trailing .tag.orange{color:var(--warning-fg)}
 .as-cards .cell-trailing .status-text{font-size:var(--text-xs)}
 /* Catalog: name + one line (category · stock · hidden), price right; nothing else. */
 .catalog-panel .as-cards [data-cell=meta]{display:none}
 .catalog-panel .as-cards tr.is-off [data-cell=title]>:not(.row-lead){opacity:.7}
 .catalog-panel .as-cards tr.is-off .row-lead{opacity:.6}
 .catalog-panel:not(.selecting) .as-cards [data-cell=select]{display:none}
 /* Customers: avatar, name, phone · points; the balance due is the trailing value. */
 .customers-panel .as-cards [data-cell=meta]:not(.cell-trailing){display:none}
 /* Receipts: one line = receipt number + amount, the second = time · payment (· customer). */
 .sales-days .as-cards [data-walkin]{display:none}
 .as-cards tr.is-refund [data-cell=amount]{color:var(--danger-fg)}
 .as-cards .row-flag{display:inline;margin-left:var(--space-2);font-size:var(--text-xs);font-weight:var(--weight-semibold)}
 /* Documents: reference + supplier, status on the right, type · date under it. */
 .documents-panel .as-cards [data-cell=meta]:not(.cell-trailing)~[data-cell=meta]:not(.cell-trailing)::before{content:'· '}
 /* Recent stock movements: quantity on the right. */
 .movements-panel .as-cards .cell-trailing{display:block}
 .movements-panel .as-cards .cell-trailing.is-out{color:var(--danger-fg)}
}

/* ── Receipts grouped by day ─────────────────────────────────────────────────────────────────────────────────────────── */
.sales-panel{overflow:clip}
.sales-day+.sales-day{margin-top:var(--space-2)}
.day-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:40px;padding:var(--space-2) var(--space-4);background:var(--surface-sunken);box-shadow:inset 0 -1px 0 var(--border);font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-semibold);color:var(--text-muted)}
.day-head>span:first-child::first-letter{text-transform:uppercase}
.day-total{color:var(--text);font-variant-numeric:tabular-nums}
@media(min-width:700px){
 .sales-panel .sales-day+.sales-day thead{display:none}
 .sales-panel .table-wrap table{table-layout:fixed}
 .sales-panel th:nth-child(1){width:22%}.sales-panel th:nth-child(2){width:12%}.sales-panel th:nth-child(3){width:24%}.sales-panel th:nth-child(4){width:18%}.sales-panel th:nth-child(6){width:12%}
}
@media(max-width:699px){
 .day-head{top:var(--app-bar-h);background:var(--bg)}
 .sales-day+.sales-day{margin-top:0}
}

/* ── Catalog selection mode (labels) ─────────────────────────────────────────────────────────────────────────────────── */
.selection-bar{display:none}
@media(max-width:699px){
 .selection-bar:not([hidden]){position:sticky;top:var(--app-bar-h);z-index:5;display:flex;align-items:center;gap:var(--space-2);min-height:var(--app-bar-h);margin:0 calc(-1 * var(--space-4));padding:0 var(--space-2);background:var(--tonal-bg);color:var(--tonal-fg)}
 .selection-bar .icon-button{color:inherit}
 .selection-count{flex:1 1 auto;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
 .selection-bar .text-button{min-height:var(--touch);padding:0 var(--space-3);font-size:var(--text-md);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.5px}
 .list-screen:has(.catalog-panel.selecting) .fab{display:none}
 .catalog-panel.selecting .as-cards [data-cell=select]{position:absolute;inset:0;z-index:2;display:flex;width:auto;min-width:0;height:auto;min-height:0;align-items:center;justify-content:flex-start;margin:0;padding-left:calc(var(--space-4) + var(--space-2));background:transparent}
 .catalog-panel.selecting .as-cards tr.has-lead .row-lead{visibility:hidden}
 .catalog-panel.selecting .as-cards [data-cell=action]{visibility:hidden}
 .catalog-panel.selecting .label-check{width:var(--icon);height:var(--icon);margin:0;accent-color:var(--primary)}
 .catalog-panel.selecting .as-cards tr:has(.label-check:checked){background:var(--tonal-bg)}
}

/* ── Inventory (own-labelled cells) ──────────────────────────────────────────────────────────────────────────────────── */
@media(max-width:699px){
 .stock-panel{margin:0 calc(-1 * var(--space-4));border:0;border-radius:0;box-shadow:none;padding:0}
 .stock-panel table,.stock-panel tbody{display:block}
 .stock-panel thead{display:none}
 .stock-panel tr{position:relative;display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--space-3);row-gap:2px;min-height:var(--row-h-2);padding:var(--space-3) var(--space-4);border:0;box-shadow:inset 0 -1px 0 var(--border)}
 .stock-panel tr::after{content:'';order:4;flex-basis:100%;height:0}
 .stock-panel td{padding:0;border:0;min-width:0;background:transparent;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
 .stock-panel td.table-name{order:1;flex:1 1 0;font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-medium);color:var(--text)}
 .stock-panel td.table-name small{display:block;font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-regular);color:var(--text-muted)}
 .stock-panel td.table-name small.row-ref{display:none}
 .stock-panel td[data-label]{grid-row:auto}
 .stock-panel td[data-label]:nth-child(2){order:2}
 .stock-panel td[data-label]:nth-child(2)::before{content:none}
 .stock-panel td[data-label]:nth-child(2) .tag{padding:0;background:transparent;font-size:var(--text-lg);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;color:var(--text)}
 .stock-panel tr.is-low td[data-label]:nth-child(2) .tag{color:var(--danger-fg)}
 .stock-panel td[data-label]:nth-child(3){order:5}
 .stock-panel td[data-label]:nth-child(4){order:6}
 .stock-panel td[data-label]:nth-child(3)::before,.stock-panel td[data-label]:nth-child(4)::before{content:attr(data-label) ' ';display:inline;margin:0;font-size:inherit;font-weight:inherit;letter-spacing:0;text-transform:none;color:inherit}
 .stock-panel td[data-label]:nth-child(4)::before{content:'· ' attr(data-label) ' '}
 .stock-panel td[data-label]:nth-child(4){margin-left:calc(-1 * var(--space-2))}
 .stock-panel td.row-action{order:3}
 .stock-panel td.row-action>button{display:grid;place-items:center;width:var(--icon);min-width:var(--icon);height:var(--icon);min-height:var(--icon);padding:0;border:0;background:transparent;color:var(--text-muted)}
 .stock-panel td.row-action .row-action-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .stock-panel td.row-action>button::before{content:'';width:var(--icon);height:var(--icon);background:currentColor;-webkit-mask:var(--mask-chevron) center/contain no-repeat;mask:var(--mask-chevron) center/contain no-repeat}
 .stock-panel td.row-action>button::after{content:'';position:absolute;inset:0}
 .stock-panel tr:active{background:var(--state-press)}
}

/* ── Tasks ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.task-list{background:var(--surface)}
.task-row{position:relative;min-height:var(--row-h-2)}
.task-check{flex:none;display:grid;place-items:center;position:relative;z-index:1;width:var(--touch);height:var(--touch);min-height:var(--touch);margin:0 calc(-1 * var(--space-1)) 0 calc(-1 * var(--space-1));padding:0;border:0;border-radius:50%;background:transparent;color:var(--primary)}
.task-check::before{content:'';width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--border-strong)}
.task-check.is-done::before{content:none}
.task-check .ui-icon{color:var(--primary)}
.task-photo{flex:none;width:var(--avatar);height:var(--avatar);object-fit:cover;border-radius:var(--radius-sm)}
.task-row.is-done .list-title{color:var(--text-muted);text-decoration:line-through}
.task-row .status-text{color:var(--success-fg)}
.task-row .status-text.is-todo{color:var(--warning-fg)}
.row-open{position:static;display:grid;place-items:center;flex:none;width:var(--icon);height:var(--icon);min-height:var(--icon);padding:0;border:0;background:transparent;color:var(--text-muted)}
.row-open::after{content:'';position:absolute;inset:0}
.task-row:has(.row-open:active){background:var(--state-press)}
@media(max-width:699px){
 .task-panel{margin:0 calc(-1 * var(--space-4));border:0;border-radius:0;padding:0}
}

/* ── Item editor (app.mjs editItem, web/item-editor.mjs) ─────────────────────────────────────────────────────────────── */
.item-form,.doc-form{align-items:start}
.ie-look-head{display:flex;align-items:center;gap:var(--space-4)}
.ie-preview{position:relative;width:64px;height:64px;border-radius:var(--radius-md);font-size:var(--text-2xl)}
.ie-preview .ie-face{display:grid;place-items:center;width:100%;height:100%;border-radius:var(--radius-md)}
.ie-preview .tile-initials{border-radius:var(--radius-md);font-size:var(--text-xl)}
.ie-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md)}
.ie-preview img[hidden]{display:none}
.ie-look-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.ie-look-text .field-help{padding:0}
.ie-photo-button{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch);margin-left:calc(-1 * var(--space-3));padding:0 var(--space-3);font-size:var(--text-md);font-weight:var(--weight-semibold)}
/* Colour swatches: radio inputs over 48 px squares; the checked one carries a check mark and a ring. */
.ie-swatches{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ie-swatch{--lists-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");position:relative;display:grid;place-items:center;width:var(--touch);height:var(--touch);border-radius:var(--radius-sm);background:var(--swatch);color:var(--on-primary);cursor:pointer}
.ie-swatch.is-auto{background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 2px var(--border-strong)}
.ie-swatch.is-auto::before{content:'';position:absolute;inset:var(--space-2);border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--tonal-bg) 50%,var(--warning-bg) 50%)}
.ie-swatch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ie-swatch:has(input:checked){box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
.ie-swatch:has(input:checked)::after{content:'';position:relative;width:var(--icon);height:var(--icon);background:currentColor;-webkit-mask:var(--lists-check) center/contain no-repeat;mask:var(--lists-check) center/contain no-repeat}
.ie-swatch:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:4px}
/* Barcode: scan glyph at the end of the field (a hardware scanner types into it). */
.tf-scan .tf-box{--lists-scan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 8V5h3M17 5h3v3M20 16v3h-3M7 19H4v-3M8 9v6M11 9v6M14 9v6M16.5 9v6'/%3E%3C/svg%3E")}
.tf-scan .tf-box>input{padding-right:calc(var(--space-4) + var(--icon) + var(--space-2))}
.tf-scan .tf-box::after{content:'';position:absolute;right:var(--space-3);top:50%;width:var(--icon);height:var(--icon);transform:translateY(-50%);background:var(--text-muted);-webkit-mask:var(--lists-scan) center/contain no-repeat;mask:var(--lists-scan) center/contain no-repeat;pointer-events:none}
@media(min-width:600px){.ie-pair .field-group-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-3)}.ie-pair .field-group-body>.field.full{grid-column:1/-1}}
.ie-taxes .field-group-body,.category-groups .field-group-body{gap:0}
.ie-taxes .switch-row,.category-groups .switch-row{border-bottom:1px solid var(--border)}
.ie-taxes .switch-row:last-child,.category-groups .switch-row:last-child{border-bottom:0}
details.ie-url>summary{display:flex;align-items:center;min-height:var(--touch);color:var(--primary);font-size:var(--text-md);font-weight:var(--weight-semibold);cursor:pointer;list-style:none}
details.ie-url>summary::-webkit-details-marker{display:none}
details.ie-url>summary::after{content:'';width:var(--icon);height:var(--icon);margin-left:var(--space-1);background:currentColor;-webkit-mask:var(--mask-expand) center/contain no-repeat;mask:var(--mask-expand) center/contain no-repeat}
details.ie-url[open]>summary::after{transform:rotate(180deg)}
/* Sections of rows (variants, add-ons, groups, recipe): flat rows under a titled group, "+ Add" rows. */
.ie-section{gap:0}
.ie-rows{gap:0}
.ie-add,.ie-section>[data-ie-op=add]{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-4);align-self:stretch;width:100%;min-height:var(--row-h);padding:0 var(--space-2);border:0;border-radius:0;background:transparent;color:var(--primary);font-size:var(--text-md);font-weight:var(--weight-semibold);text-align:left}
.ie-row{padding:var(--space-3) 0;border:0;border-radius:0;background:transparent;box-shadow:inset 0 -1px 0 var(--border)}
.ie-row.invalid{border:0;background:var(--danger-bg);box-shadow:inset 3px 0 0 var(--danger),inset 0 -1px 0 var(--border);padding-left:var(--space-3);padding-right:var(--space-2)}
.ie-fields{gap:var(--space-2)}
/* Compact filled fields of the row editors (variant, add-on, group, recipe and document lines): label inside, 48 px. */
:is(.ie-field,.component-row>div,.document-line>div:not(.document-line-main)){position:relative}
:is(.ie-field,.component-row>div,.document-line>div:not(.document-line-main))>.mini-label{position:absolute;top:var(--space-1);left:var(--space-3);right:var(--space-3);z-index:1;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;font-size:var(--text-xs);line-height:var(--leading-xs);font-weight:var(--weight-medium);color:var(--text-muted)}
.ie-field>input,.mg-head .ie-field>select,.component-row :is(input,select),.document-line>div:not(.document-line-main)>input{width:100%;min-height:var(--touch);padding:calc(var(--space-1) + var(--leading-xs)) var(--space-3) var(--space-1);border:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--field-bg);box-shadow:inset 0 -1px 0 var(--field-line);font-size:var(--text-lg);line-height:var(--leading-md);color:var(--text)}
.ie-field>input[readonly]{background:var(--surface-sunken);box-shadow:inset 0 -1px 0 var(--border)}
:is(.ie-field>input,.mg-head .ie-field>select,.component-row :is(input,select),.document-line input):focus{outline:0;box-shadow:inset 0 -2px 0 var(--primary)}
.ie-row input[aria-invalid=true]{border:0;box-shadow:inset 0 -2px 0 var(--danger)}
.ie-actions{gap:0}
.ie-actions button{width:var(--touch);height:var(--touch);border-radius:50%;background:transparent;color:var(--text-muted)}
.ie-actions .ie-remove{color:var(--danger-fg)}
.ie-active{min-height:var(--touch);padding:0;gap:var(--space-2);font-size:var(--text-md);font-weight:var(--weight-medium)}
.ie-active input[type=checkbox]{order:-1}
.ie-error{padding-top:var(--space-1)}
.mg-cards{gap:0}
.mg-card{gap:var(--space-2);padding:var(--space-3) 0;border:0;border-radius:0;background:transparent;box-shadow:inset 0 -1px 0 var(--border)}
.mg-card.invalid{background:var(--danger-bg);box-shadow:inset 3px 0 0 var(--danger);padding-left:var(--space-3)}
.mg-card .ie-row{background:transparent;margin-left:var(--space-4)}
.mg-card .mg-add{margin-left:var(--space-4);width:auto}
.mg-tools{padding:var(--space-2) 0}
.mg-tools select{min-height:var(--touch);padding:0 var(--space-3);border:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--field-bg);box-shadow:inset 0 -1px 0 var(--field-line);font-size:var(--text-md)}
@media(max-width:699px){
 .ie-row{grid-template-columns:minmax(0,1fr);padding:var(--space-3) 0}
 .ie-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ie-field.ie-name{grid-column:1/-1}
 .ie-actions{justify-content:flex-end}
 .mg-head{grid-template-columns:minmax(0,1fr)}
 .mg-head .ie-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
 .mg-head .ie-field.ie-name{grid-column:1/-1}
}
/* Recipe lines and cost. */
.component-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 96px var(--touch);gap:var(--space-2);align-items:center;padding:var(--space-3) 0;box-shadow:inset 0 -1px 0 var(--border)}
.component-row select{appearance:none;-webkit-appearance:none;text-overflow:ellipsis}
.cr-remove{color:var(--danger-fg)}
.recipe-cost{display:flex;align-items:center;justify-content:space-between;min-height:var(--row-h);font-size:var(--text-lg)}
.recipe-cost strong{font-variant-numeric:tabular-nums}
@media(max-width:699px){
 .component-row{grid-template-columns:minmax(0,1fr) 96px var(--touch);grid-template-areas:'item item remove' 'variant qty qty'}
 .cr-item{grid-area:item}.cr-variant{grid-area:variant}.cr-qty{grid-area:qty}.cr-remove{grid-area:remove}
}

/* ── Stock documents: lines as list rows (name / variant, quantity, unit cost, remove) ────────────────────────────────── */
.doc-lines .field-group-body{gap:var(--space-2)}
.document-lines{margin:0}
.document-line{grid-template-columns:minmax(0,1fr) 88px 112px var(--touch);grid-template-areas:'main qty cost remove';gap:var(--space-2);align-items:center;margin:0;padding:var(--space-3) 0;box-shadow:inset 0 -1px 0 var(--border)}
.document-line.no-cost{grid-template-columns:minmax(0,1fr) 96px var(--touch);grid-template-areas:'main qty remove'}
.document-line>.document-line-remove{grid-area:remove;color:var(--text-muted)}
.document-line>.document-line-main{grid-area:main}
.document-line>div:nth-child(3){grid-area:qty}
.document-line>div:nth-child(4){grid-area:cost}
.document-line>div:last-child:not(:nth-child(3)){grid-column:auto}
.document-line-name{font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-medium)}
.document-line select{min-height:40px;padding:0 var(--space-2);border:0;border-radius:var(--radius-sm);background:var(--field-bg);font-size:var(--text-md)}
.document-line>div>input{text-align:right;font-variant-numeric:tabular-nums}
.doc-proof .photo-thumb{max-height:160px}
@media(max-width:699px){
 .document-line{grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--touch);grid-template-areas:'main main remove' 'qty cost cost'}
 .document-line.no-cost{grid-template-columns:minmax(0,1fr) 120px var(--touch);grid-template-areas:'main qty remove'}
}

/* ── Customer profile (customerDetail) ───────────────────────────────────────────────────────────────────────────────── */
.profile-head{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) 0 var(--space-4)}
.profile-avatar{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;background:var(--tonal-bg);color:var(--tonal-fg);font-size:var(--text-xl);font-weight:var(--weight-semibold)}
.profile-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.profile-contact{display:flex;flex-direction:column;font-size:var(--text-lg);line-height:var(--leading-lg);color:var(--text)}
.profile-contact span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-note{font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.profile-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}
.profile-actions button{flex:1 1 160px;min-height:var(--touch)}
.profile-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 var(--space-2);border-radius:var(--radius-md);background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border)}
.profile-stats>div{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;padding:var(--space-3) var(--space-4)}
.profile-stats>div+div{box-shadow:inset 1px 0 0 var(--border)}
.profile-stats span{font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted)}
.profile-stats strong{font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.profile-stats .is-due strong{color:var(--warning-fg)}
.profile-due{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--row-h);margin:var(--space-2) 0;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border-radius:var(--radius-md);background:var(--warning-bg);color:var(--warning-fg);font-size:var(--text-md)}
.profile-due .text-button{flex:none;min-height:var(--touch);padding:0 var(--space-3);color:var(--warning-fg);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.5px}
.profile-section{margin-top:var(--space-2)}
.profile-section .list-group{margin:0 calc(-1 * var(--modal-pad))}
.profile-section .list-row{padding-left:var(--modal-pad);padding-right:var(--modal-pad)}
.move-amount{font-variant-numeric:tabular-nums}
.move-amount.is-credit{color:var(--success-fg)}
@media(max-width:699px){
 .profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .profile-stats>div:nth-child(3){box-shadow:inset 0 1px 0 var(--border)}
 .profile-stats>div:nth-child(4){box-shadow:inset 1px 0 0 var(--border),inset 0 1px 0 var(--border)}
 .profile-section .table-wrap{margin:0 calc(-1 * var(--modal-pad))}
}

/* ── Promotions: list rows and the editor's filter chips (categories, items, days, shops) ───────────────────────────── */
.promo-lead{background:var(--warning-bg);color:var(--warning-fg)}
@media(max-width:699px){
 .as-cards .promo-targets{display:none}
 .as-cards .cell-trailing .tag.promo-live{color:var(--warning-fg)}
}
.chip-set-label{font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-medium);color:var(--text)}
.chip-set{--lists-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");display:flex;flex-wrap:wrap;gap:var(--space-2)}
.promo-pick.chip-set{max-height:200px;overflow:auto;padding:0;border:0;border-radius:0}
.chip-set .check{gap:var(--space-2);min-height:40px;padding:0 var(--space-3) 0 var(--space-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-medium);justify-content:flex-start}
.chip-set .check:has(input:checked){border-color:var(--tonal-bg);background:var(--tonal-bg);color:var(--tonal-fg)}
.chip-set .check input[type=checkbox]{order:0;width:18px;height:18px;border-radius:var(--radius-sm);background:transparent;box-shadow:inset 0 0 0 2px var(--text-muted)}
.chip-set .check input[type=checkbox]::before{content:none}
.chip-set .check input[type=checkbox]:checked{background:var(--tonal-fg);box-shadow:none}
.chip-set .check input[type=checkbox]:checked::after{content:'';position:absolute;inset:2px;background:var(--surface);-webkit-mask:var(--lists-check) center/contain no-repeat;mask:var(--lists-check) center/contain no-repeat}
.promo-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-3)}
.promo-form>.field-group:first-child .field-group-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-3)}
.promo-form>.field-group:first-child .field.full{grid-column:1/-1}

/* ── Tasks editor bits ───────────────────────────────────────────────────────────────────────────────────────────────── */
.task-complete-title{margin-bottom:var(--space-4);font-size:var(--text-lg);font-weight:var(--weight-medium)}
.photo-button.ie-add{margin-top:var(--space-2)}

/* ── Category editor: the colour field is a swatch filling the field box ───────────────────────────────────────────── */
.tf-box>input[type=color]{box-sizing:border-box;block-size:calc(var(--row-h) + var(--space-2));padding:calc(var(--space-2) + var(--leading-xs)) var(--space-4) var(--space-2);cursor:pointer}
.tf-box>input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.tf-box>input[type=color]::-webkit-color-swatch{border:0;border-radius:var(--radius-sm)}
.tf-box>input[type=color]::-moz-color-swatch{border:0;border-radius:var(--radius-sm)}

/* F33-2: stock tabs, filters and phone cards use native fields and status rows. */
.stock-card-tabs,.stock-card-pager{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-block:var(--space-3)}
.stock-card-tabs [aria-selected=true]{background:var(--selected-bg);color:var(--selected-text)}
.stock-card-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-block:var(--space-4)}
.stock-card-report{padding:var(--space-4);min-width:0}
.stock-card-report td,[data-stock-item-panel] td{overflow-wrap:anywhere}
.stock-charge{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
@media(max-width:699px){
 .stock-card-filters,.stock-charge{grid-template-columns:minmax(0,1fr)}
 .stock-card-report table,.stock-card-report tbody,[data-stock-item-panel] table,[data-stock-item-panel] tbody{display:block;width:100%;min-width:0}
 .stock-card-report thead,[data-stock-item-panel] thead{display:none}
 .stock-card-report tr,[data-stock-item-panel] tr{display:block;padding-block:var(--space-3);border-bottom:var(--space-1) solid var(--border)}
 .stock-card-report td,[data-stock-item-panel] td{display:flex;justify-content:space-between;gap:var(--space-2);white-space:normal;padding:var(--space-2);text-align:end}
 .stock-card-report td:before,[data-stock-item-panel] td:before{content:attr(data-label);color:var(--text-muted);text-align:start;flex-shrink:0}
}