/* Workspace records: one information hierarchy for orders, stock and catalogues.
   Screen-only styling: printed reports and customer documents keep their format. */
@media screen {
 html:root #app #page .sales-sort-control { min-width:130px; max-width:170px; margin:0; }
 html:root #app #page .sales-sort-control .select-control { width:100%; }
 html:root #app #page .sale-record-products { grid-column:1/-1; grid-row:5; min-width:0; padding:12px 0 0; margin-top:6px; border-top:1px solid var(--ds-line); cursor:default; }
 html:root #app #page .sale-record-products[hidden] { display:none; }
 html:root #app #page .sale-record-products-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; font-size:12px; }
 html:root #app #page .sale-record-products .sale-record-open { position:static; display:inline-flex; align-items:center; gap:6px; width:auto; min-height:36px; padding:6px 8px; color:var(--ds-accent); background:transparent; border:0; font-size:12px; }
 html:root #app #page .sale-record-products ul { list-style:none; margin:8px 0 0; padding:0; }
 html:root #app #page .sale-record-products li { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:start; gap:8px 18px; padding:10px 0; border-top:1px solid var(--ds-line); font-size:12px; }
 html:root #app #page .sale-record-products li>div { display:grid; gap:4px; overflow-wrap:anywhere; min-width:0; }
 html:root #app #page .sale-record-products li small { color:var(--ds-muted); }
 html:root #app #page .sale-record-products li>strong { font-variant-numeric:tabular-nums; }
 html:root #app #page .sale-record-header>.sale-record-open[aria-expanded="true"] .icon { transform:rotate(180deg); }
 @media(max-width:480px) {
  html:root #app #page .sale-record-products li { grid-template-columns:minmax(0,1fr) auto; gap:6px; }
  html:root #app #page .sale-record-products li>div { grid-column:1/-1; }
  html:root #app #page .sale-record-products li>strong { text-align:right; }
 }
 html:root #app #page {
  --ds-record-positive:#067647;
  --ds-record-negative:#b42318;
  --ds-record-warning:#955800;
  --ds-record-positive-bg:#ecfdf3;
  --ds-record-negative-bg:#fff1f0;
  --ds-record-warning-bg:#fffaeb;
 }
 html:root[data-theme="dark"] #app #page {
  --ds-record-positive:#7ddcb0;
  --ds-record-negative:#ffaaa5;
  --ds-record-warning:#f6cc80;
  --ds-record-positive-bg:#19382b;
  --ds-record-negative-bg:#41292c;
  --ds-record-warning-bg:#3c3324;
 }

 /* Separate order workflow from the independently applied financial filter. */
 html:root #app #page .sales-situation-label { color:var(--ds-muted); font-size:11px; font-weight:600; margin:0 0 5px; }
 html:root #app #page[data-screen="sales"] .sales-list-toolbar { padding:0; margin:16px 0 10px; border-bottom:1px solid var(--ds-line); }
 html:root #app #page[data-screen="sales"] .sales-status-shortcuts { gap:2px 6px; }
 html:root #app #page[data-screen="sales"] .sales-status-shortcut { min-height:40px; padding:9px 12px; border:0; border-bottom:2px solid transparent; border-radius:6px 6px 0 0; background:transparent; box-shadow:none; color:var(--ds-muted); font-size:12px; font-weight:600; }
 html:root #app #page[data-screen="sales"] .sales-status-shortcut:hover { color:var(--ds-text); background:var(--ds-surface-alt); }
 html:root #app #page[data-screen="sales"] .sales-status-shortcut[aria-pressed="true"] { color:var(--ds-accent); background:var(--ds-accent-soft); border-bottom-color:var(--ds-accent); box-shadow:none; }
 html:root #app #page .sales-results-toolbar { margin:0 0 10px; }
 html:root #app #page .sales-filter-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; min-width:0; }
 html:root #app #page .sales-filter-actions #sales-selection-toolbar { position:static; margin:0; min-width:0; }
 html:root #app #page .sales-filter-actions .bulk-mode-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; min-width:40px; height:40px; padding:0; border:1px solid var(--ds-line); border-radius:9px; background:var(--ds-surface); color:var(--ds-accent); box-shadow:none; }
 html:root #app #page .sales-filter-actions .bulk-mode-icon:hover { background:var(--ds-accent-soft); border-color:var(--ds-accent); }
 html:root #app #page .sales-filter-actions:has(.sales-bulk-toolbar) { grid-column:1/-1; flex-wrap:wrap; }
 html:root #app #page .sales-filter-actions:has(.sales-bulk-toolbar) #sales-selection-toolbar { flex:1 1 550px; }
 html:root #app #page .sales-filter-actions .sales-select-all { display:flex; flex-direction:row; align-items:center; gap:8px; margin:0; }
 @media(max-width:700px) {
  html:root #app #page .sales-filter-actions { grid-column:1/-1; }
  html:root #app #page .sales-filter-actions .bulk-mode-icon { width:44px; min-width:44px; height:44px; }
 }
 html:root #app #page #sales-results>.sales-records-compact { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; border:0; border-radius:0; background:transparent; box-shadow:none; }
 html:root #app #page #sales-results[data-layout="list"] .sale-record-compact { grid-template-columns:minmax(0,1fr) minmax(290px,440px) 36px 40px; gap:4px 12px; margin:0; padding:12px 16px 0; border:1px solid var(--ds-line); border-radius:12px; background:var(--ds-surface); box-shadow:0 2px 5px #17203303; min-width:0; }
 html:root #app #page #sales-results .sale-record-compact:is(:hover,:focus-within) { border-color:color-mix(in srgb,var(--ds-accent) 32%,var(--ds-line)); box-shadow:0 3px 10px #17203309; }
 html:root #app #page #sales-results .sale-record-compact:has([data-sale-select]:checked) { background:var(--ds-accent-soft); box-shadow:inset 3px 0 var(--ds-accent); }
 html:root #app #page #sales-results .sale-record-compact:has(.sale-selection-control:not([hidden])) { padding-left:48px; }
 html:root #app #page #sales-results .sale-record-header,
 html:root #app #page #sales-results .sale-record-overview { display:contents; }
 html:root #app #page #sales-results .sale-record-meta-line { gap:5px 9px; }
 html:root #app #page #sales-results .sale-record-meta-line .sale-number { color:var(--ds-accent); font-size:11px; font-weight:700; letter-spacing:.015em; }
 html:root #app #page #sales-results .sale-timing,
 html:root #app #page #sales-results .sale-timing>strong { color:var(--ds-muted); font-size:11px; font-weight:400; }
 html:root #app #page #sales-results .sale-record-compact-identity>strong { color:var(--ds-text); font-size:14px; font-weight:650; line-height:1.4; }
 html:root #app #page #sales-results .sale-record-compact-values { grid-column:2; grid-row:1/3; gap:0; border:0; border-radius:0; background:transparent; overflow:visible; }
 html:root #app #page #sales-results .sale-record-compact-values>span { padding:5px 10px; gap:5px; border:0; border-left:1px solid var(--ds-line); border-radius:0; background:transparent; justify-items:end; text-align:right; }
 html:root #app #page #sales-results .sale-record-compact-values>span:first-child { border-left:0; }
 html:root #app #page #sales-results .sale-record-compact-values>:is(.profit,.loss,.pending) { background:transparent; }
 html:root #app #page #sales-results .sale-record-compact-values small { color:var(--ds-muted); font-size:11px; font-weight:400; line-height:1.3; white-space:normal; }
 html:root #app #page #sales-results .sale-record-compact-values strong { color:var(--ds-text); font-size:13px; font-weight:650; line-height:1.35; font-variant-numeric:tabular-nums; white-space:normal; overflow:visible; overflow-wrap:anywhere; }
 html:root #app #page #sales-results .sale-record-compact-values>.profit>strong { color:var(--ds-record-positive); }
 html:root #app #page #sales-results .sale-record:not(.sale-record-cancelled) .sale-record-compact-values>span:first-child>strong { color:var(--ds-accent); }
 html:root #app #page #sales-results .sale-record-compact-values>.loss>strong { color:var(--ds-record-negative); }
 html:root #app #page #sales-results .sale-record-compact-values>.pending>strong { color:var(--ds-record-warning); }
 html:root #app #page #sales-results .sale-record-compact-values>:is(.profit,.loss,.pending)>small { color:var(--ds-muted); }
 html:root #app #page #sales-results .sale-record-header>.sale-actions-menu { grid-column:3; grid-row:1/3; align-self:center; }
 html:root #app #page #sales-results .sale-record-header>.sale-record-open { grid-column:4; grid-row:1/3; align-self:center; width:40px; min-width:40px; height:40px; min-height:40px; padding:9px; border-color:transparent; border-radius:9px; background:transparent; color:var(--ds-muted); box-shadow:none; }
 html:root #app #page #sales-results .sale-record-header>.sale-record-open:hover { border-color:var(--ds-accent); background:var(--ds-accent-soft); }
 html:root #app #page #sales-results .sale-record-compact-footer { grid-column:1/-1; grid-row:3; margin-top:7px; padding:7px 0; gap:5px 12px; border:0; border-top:1px solid color-mix(in srgb,var(--ds-line) 65%,transparent); background:transparent; min-height:0; }
 html:root #app #page #sales-results .sale-record-seller-badge { color:var(--ds-muted); background:transparent; font-size:11px; font-weight:400; padding:0; }
 html:root #app #page #sales-results .sale-record-status-summary { font-size:11px; padding:3px 7px; min-height:22px; border-radius:6px; background:transparent; border:1px solid color-mix(in srgb,currentColor 45%,transparent); }
 html:root #app #page #sales-results .sale-record-alerts .badge { min-height:22px; padding:3px 7px; font-size:11px; border-radius:6px; background:transparent; border:1px solid color-mix(in srgb,currentColor 45%,transparent); }
 html:root #app #page #sales-results .sale-record-compact-footer .wholesale-badge { background:transparent; color:var(--ds-muted); padding:2px 0; }
 html:root #app #page #sales-results .sale-record-products { padding-bottom:12px; }

 /* Actions are restrained, with destructive actions visually separate. */
 html:root #app #page .sale-actions-menu>summary { width:36px; height:36px; min-height:36px; border:1px solid transparent; border-radius:8px; color:var(--ds-muted); background:transparent; box-shadow:none; }
 html:root #app #page .sale-actions-menu>summary:hover,
 html:root #app #page .sale-actions-menu[open]>summary { background:var(--ds-accent-soft); color:var(--ds-accent); border-color:var(--ds-line); }
 html:root #app #page .sale-actions-popover { border:1px solid var(--ds-line); border-radius:12px; padding:6px; background:var(--ds-surface); color:var(--ds-text); box-shadow:0 18px 50px #10182826,0 2px 8px #1018280a; }
 html:root #app #page .sale-menu-heading { padding:10px 10px 12px; border-color:var(--ds-line); }
 html:root #app #page .sale-menu-heading>span { color:var(--ds-text); font-size:13px; font-weight:650; }
 html:root #app #page .sale-menu-heading small { color:var(--ds-muted); font-size:10px; letter-spacing:.045em; }
 html:root #app #page .sale-actions-item,
 html:root #app #page .sale-actions-disclosure>summary { min-height:42px; padding:8px 10px; border:0; border-radius:7px; color:var(--ds-text); background:transparent; font-size:13px; font-weight:500; }
 html:root #app #page .sale-actions-item:hover,
 html:root #app #page .sale-actions-disclosure>summary:hover { color:var(--ds-accent); background:var(--ds-accent-soft); }
 html:root #app #page .sale-menu-icon { width:28px; height:28px; border:0; border-radius:7px; color:var(--ds-muted); background:transparent; }
 html:root #app #page .sale-menu-icon .icon { width:17px; height:17px; }
 html:root #app #page .sale-actions-control { border-color:var(--ds-line); padding:10px; color:var(--ds-muted); font-size:12px; }
 html:root #app #page .sale-actions-control>span { color:var(--ds-muted); }
 html:root #app #page .sale-wholesale { background:var(--ds-surface-alt); border:1px solid var(--ds-line); color:var(--ds-text); border-radius:7px; padding:6px 9px; }
 html:root #app #page .sale-actions-item.sale-actions-cancel { color:var(--ds-record-negative); border-top:1px solid var(--ds-line); border-radius:0 0 7px 7px; margin-top:5px; }
 html:root #app #page .sale-actions-cancel .sale-menu-icon { color:inherit; }
 html:root #app #page .sale-actions-cancel:hover { background:var(--ds-record-negative-bg); }

 /* Detail: document header, summary ledger, line items and related panels. */
 html:root #app #page .sale-detail-page { gap:14px; }
 html:root #app #page .sale-detail-header { padding:18px 20px; border:1px solid var(--ds-line); border-radius:var(--ds-radius); background:var(--ds-surface); gap:14px; box-shadow:none; }
 html:root #app #page .sale-detail-title-line h1 { font-size:23px; font-weight:650; letter-spacing:-.04em; color:var(--ds-text); }
 html:root #app #page .sale-detail-title-line h1>span { color:var(--ds-accent); }
 html:root #app #page .sale-detail-party { margin-top:7px; gap:6px 12px; color:var(--ds-muted); font-size:12px; }
 html:root #app #page .sale-detail-status-picker .status-control { margin:0; }
 html:root #app #page .sale-detail-status-picker .select-control { width:auto; min-width:130px; max-width:240px; }
 html:root #app #page .sale-detail-status-picker .select-trigger { min-height:36px; height:auto; border-radius:20px; padding:7px 12px; font-size:12px; font-weight:600; }
 html:root #app #page .sale-detail-status-picker .select-control:has(select.is-review)>.select-trigger { color:var(--ds-record-warning); background:var(--ds-record-warning-bg); border-color:color-mix(in srgb,var(--ds-record-warning) 40%,var(--ds-line)); }
 html:root #app #page .sale-actions-wholesale { padding:8px 12px; border-top:0; border-bottom:1px solid var(--ds-line); }
 html:root #app #page .sale-actions-wholesale .sale-wholesale { padding:0; background:transparent; border:0; min-height:36px; }
 html:root #app #page .sale-detail-party>strong { color:var(--ds-text); font-size:13px; font-weight:600; }
 html:root #app #page .sale-detail-summary { border:1px solid var(--ds-line); border-radius:var(--ds-radius); background:var(--ds-surface); gap:0; }
 html:root #app #page .sale-detail-metric { border:0; border-left:1px solid var(--ds-line); border-radius:0; padding:15px 18px; background:transparent; min-height:80px; justify-items:start; text-align:left; box-shadow:none; }
 html:root #app #page .sale-detail-metric:first-child { border-left:0; }
 html:root #app #page .sale-detail-metric>span { color:var(--ds-muted); font-size:11px; line-height:1.4; font-weight:500; }
 html:root #app #page .sale-detail-metric>strong { color:var(--ds-text); font-size:20px; letter-spacing:-.025em; line-height:1.4; font-weight:650; font-variant-numeric:tabular-nums; white-space:normal; overflow-wrap:anywhere; }
 html:root #app #page .sale-detail-commission>strong { font-size:15px; }
 html:root #app #page .sale-detail-commission>.sale-detail-commission-rule { color:var(--ds-muted); font-size:10px; }
 html:root #app #page .sale-detail-profit.profit>strong { color:var(--ds-record-positive); }
 html:root #app #page .sale-detail-profit.loss>strong { color:var(--ds-record-negative); }
 html:root #app #page .sale-detail-profit.pending>strong { color:var(--ds-record-warning); }
 html:root #app #page .sale-detail-warnings { background:var(--ds-record-warning-bg); color:var(--ds-record-warning); border:1px solid color-mix(in srgb,var(--ds-record-warning) 22%,var(--ds-surface)); border-radius:10px; padding:10px 14px; }
 html:root #app #page .sale-detail-section>.panel-header { padding:12px 16px; min-height:48px; background:var(--ds-surface-alt); border-color:var(--ds-line); }
 html:root #app #page .sale-detail-section>.panel-header h2 { color:var(--ds-text); font-size:13px; font-weight:650; }
 html:root #app #page .sale-detail-product-list { padding:0; gap:0; }
 html:root #app #page .sale-detail-product { padding:13px 16px; gap:20px; background:var(--ds-surface); border:0; border-top:1px solid var(--ds-line); border-radius:0; }
 html:root #app #page .sale-detail-product:first-child { border-top:0; }
 html:root #app #page .sale-detail-product:nth-child(even) { background:var(--ds-surface); }
 html:root #app #page .sale-detail-product-name { color:var(--ds-text); font-size:13px; font-weight:600; text-decoration:none; }
 html:root #app #page .sale-detail-product-name:hover { color:var(--ds-accent); }
 html:root #app #page .sale-detail-product-meta { color:var(--ds-muted); font-size:11px; line-height:1.5; }
 html:root #app #page .sale-detail-product-quantity { color:var(--ds-accent); background:var(--ds-accent-soft); border-radius:5px; padding:3px 6px; font-size:11px; }
 html:root #app #page .sale-detail-values dt,
 html:root #app #page .sale-detail-payment-values dt { color:var(--ds-muted); font-size:11px; font-weight:400; }
 html:root #app #page .sale-detail-values dd,
 html:root #app #page .sale-detail-payment-values dd { color:var(--ds-text); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
 html:root #app #page .sale-detail-values>.profit dd { color:var(--ds-record-positive); }
 html:root #app #page .sale-detail-values>.loss dd { color:var(--ds-record-negative); }
 html:root #app #page .sale-detail-values>.pending dd { color:var(--ds-record-warning); }
 html:root #app #page .sale-detail-payment-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); padding:14px; gap:12px; }
 html:root #app #page .sale-detail-payment { min-width:0; background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:10px; padding:14px; }
 html:root #app #page .sale-detail-payment:first-child { border-top:1px solid var(--ds-line); }
 html:root #app #page .sale-detail-payment header { display:grid; gap:7px; padding:0 0 12px; background:transparent; border:0; min-width:0; }
 html:root #app #page .sale-detail-payment header>strong { display:flex; align-items:center; gap:8px; }
 html:root #app #page .sale-detail-payment header .icon { width:18px; height:18px; color:var(--ds-record-positive); }
 html:root #app #page .sale-detail-payment-values { margin:0; padding-top:12px; border-top:1px solid var(--ds-line); gap:10px; }
 html:root #app #page .sale-detail-payment-values>div { min-width:0; }
 html:root #app #page .sale-detail-payment-values dd { overflow-wrap:anywhere; }
 html:root #app #page .sale-detail-payment-values>div:first-child dd { color:var(--ds-record-positive); font-size:16px; }
 html:root #app #page .sale-section-heading { display:flex; gap:12px; align-items:center; min-width:0; }
 html:root #app #page .sale-section-heading h2 { margin:0; font-size:15px; }
 html:root #app #page .sale-section-heading p { margin:3px 0 0; font-size:12px; color:var(--ds-muted); }
 html:root #app #page .sale-section-icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0; border-radius:9px; color:var(--ds-accent); background:var(--ds-accent-soft); }
 html:root #app #page .sale-section-icon .icon { width:20px; height:20px; }
 html:root #app #page .sale-detail-payments .sale-section-icon { color:var(--ds-record-positive); background:var(--ds-record-positive-bg); }
 html:root #app #page .sale-detail-products>.panel-header { border-left:3px solid var(--ds-accent); }
 html:root #app #page .sale-detail-payments>.panel-header { border-left:3px solid var(--ds-record-positive); }
 html:root #app #page .sale-detail-products .sale-detail-product-list { display:grid; gap:8px; padding:12px; }
 html:root #app #page .sale-detail-products .sale-detail-product { border:1px solid var(--ds-line); border-radius:8px; }
 html:root #app #page .sale-detail-secondary { margin-top:8px; }
 html:root #app #page .sale-detail-warnings.has-amount-due { border-left:4px solid var(--ds-record-negative); }
 html:root #app #page .sale-detail-warnings .amount-due { color:var(--ds-record-negative); background:var(--ds-record-negative-bg); padding:7px 10px; border-radius:6px; font-size:15px; font-weight:650; }
 html:root #app #page .sale-detail-payment header>strong { color:var(--ds-text); font-size:13px; }
 html:root #app #page .sale-detail-payment header>span { color:var(--ds-muted); font-size:12px; line-height:1.5; }
 html:root #app #page .sale-detail-empty { padding:18px 16px; font-size:12px; color:var(--ds-muted); }
 html:root #app #page .sale-detail-disclosure>summary { min-height:44px; padding:12px 16px; color:var(--ds-muted); font-size:12px; }

 /* Stock has a continuous workspace rather than a stack of nested cards. */
 html:root #app #page .inventory-page { --inventory-border:var(--ds-line); --inventory-muted:var(--ds-muted); }
 html:root #app #page .inventory-overview { display:flex; align-items:center; gap:12px 22px; margin:0 0 16px; padding:12px 16px; border:1px solid var(--ds-line); border-radius:10px; background:var(--ds-surface); }
 html:root #app #page .inventory-overview>div { font-size:12px; color:var(--ds-muted); }
 html:root #app #page .inventory-overview strong { color:var(--ds-text); font-size:16px; }
 html:root #app #page .inventory-overview .icon { color:var(--ds-accent); }
 html:root #app #page .inventory-overview .inventory-attention { color:var(--ds-record-warning); background:var(--ds-record-warning-bg); }
 html:root #app #page .inventory-attention strong { color:inherit; }
 html:root #app #page .inventory-workspace,
 html:root #app #page .inventory-history { border:1px solid var(--ds-line); border-radius:var(--ds-radius); background:var(--ds-surface); box-shadow:none; overflow:visible; }
 html:root #app #page .inventory-workspace .inventory-history { border:0; border-radius:0 0 var(--ds-radius) var(--ds-radius); }
 html:root #app #page .inventory-navigation { padding:0 18px; gap:20px; border-color:var(--ds-line); background:var(--ds-surface-alt); border-radius:var(--ds-radius) var(--ds-radius) 0 0; }
 html:root #app #page .inventory-navigation button { min-height:48px; padding:12px 3px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--ds-muted); font-size:13px; font-weight:600; }
 html:root #app #page .inventory-navigation button[aria-pressed="true"] { border-bottom-color:var(--ds-accent); color:var(--ds-accent); }
 html:root #app #page .inventory-navigation button span { color:var(--ds-muted); background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:5px; }
 html:root #app #page .inventory-navigation button[aria-pressed="true"] span { color:var(--ds-accent); background:var(--ds-accent-soft); border-color:transparent; }
 html:root #app #page .inventory-search>div,
 html:root #app #page .inventory-search-control { border-color:var(--ds-line); background:var(--ds-surface-alt); border-radius:9px; }
 html:root #app #page .inventory-search>div:focus-within,
 html:root #app #page .inventory-search-control:focus-within { border-color:var(--ds-accent); outline:0; box-shadow:0 0 0 3px var(--ds-accent-soft); }
 html:root #app #page .inventory-search input { background:transparent; color:var(--ds-text); font-size:13px; }
 html:root #app #page .inventory-search button { color:var(--ds-muted); }
 html:root #app #page :is(.stock-result-count,.inventory-entry-count,.inventory-section-heading>span) { color:var(--ds-muted); font-size:11px; }
 html:root #app #page :is(.inventory-layout-switch,.entry-layout-switch) { border:1px solid var(--ds-line); border-radius:8px; background:var(--ds-surface-alt); box-shadow:none; }
 html:root #app #page :is(.inventory-layout-switch,.entry-layout-switch) button { background:transparent; color:var(--ds-muted); font-size:12px; border-radius:6px; }
 html:root #app #page :is(.inventory-layout-switch,.entry-layout-switch) button[aria-pressed="true"] { background:var(--ds-surface); color:var(--ds-accent); box-shadow:0 1px 4px #1018280d; border-color:var(--ds-line); }
 html:root #app #page .inventory-list-view { --stock-list-columns:minmax(0,1fr) 80px 120px 120px 40px; margin:0; border:0; border-radius:0 0 var(--ds-radius) var(--ds-radius); overflow:visible; }
 html:root #app #page .inventory-list-view.no-costs { --stock-list-columns:minmax(0,1fr) 80px 40px; }
 html:root #app #page .inventory-list-header { margin:0 18px; padding:11px 18px; background:transparent; color:var(--ds-muted); font-size:11px; letter-spacing:.02em; border:0; }
 html:root #app #page .inventory-list-view .inventory-products { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding:0 18px 18px; }
 html:root #app #page .inventory-list-view .inventory-product { padding:14px 18px; gap:12px 16px; background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:12px; box-shadow:0 2px 5px #17203303; }
 html:root #app #page .inventory-product:is(:hover,:focus-within) { border-color:color-mix(in srgb,var(--ds-accent) 32%,var(--ds-line)); box-shadow:0 3px 10px #17203309; }
 html:root #app #page .inventory-product-identity .link-button { color:var(--ds-text); font-size:13px; font-weight:600; line-height:1.45; text-decoration:none; }
 html:root #app #page .inventory-product-identity .link-button:hover { color:var(--ds-accent); }
 html:root #app #page .inventory-product-meta { gap:5px 9px; margin-top:5px; color:var(--ds-muted); font-size:11px; line-height:1.45; }
 html:root #app #page .product-sku { color:var(--ds-muted); font-family:inherit; font-size:11px; font-weight:400; letter-spacing:.025em; overflow-wrap:anywhere; }
 html:root #app #page .inventory-serial-tag { background:var(--ds-accent-soft); color:var(--ds-accent); border-color:transparent; border-radius:4px; font-size:10px; font-weight:600; padding:2px 5px; }
 html:root #app #page .inventory-launched-tag { background:var(--ds-record-positive-bg); color:var(--ds-record-positive); border-color:transparent; border-radius:4px; font-size:10px; }
 html:root #app #page .inventory-serial-match { color:var(--ds-accent); }
 html:root #app #page .inventory-product .stock-balance-value { color:var(--ds-text); font-size:17px; font-weight:600; letter-spacing:-.02em; }
 html:root #app #page .inventory-product .stock-balance-value.muted { color:var(--ds-muted); }
 html:root #app #page .inventory-product .stock-balance-value.negative { color:var(--ds-record-negative); }
 html:root #app #page .inventory-product-costs { background:var(--ds-surface-alt); border-color:var(--ds-line); }
 html:root #app #page .inventory-product-costs dt { color:var(--ds-muted); font-size:11px; }
 html:root #app #page .inventory-product-costs dd { color:var(--ds-text); font-size:13px; font-weight:500; }
 html:root #app #page .inventory-product .inventory-unit-toggle { width:40px; min-width:40px; height:40px; min-height:40px; border-color:var(--ds-line); background:var(--ds-surface-alt); color:var(--ds-accent); border-radius:8px; }
 html:root #app #page .inventory-product .inventory-unit-toggle[aria-expanded="true"] { background:var(--ds-accent-soft); border-color:var(--ds-accent); }
 html:root #app #page .inventory-unit-expansion { border-color:var(--ds-line); padding-top:14px; }
 html:root #app #page .inventory-unit-chips>li { background:var(--ds-surface-alt); border-color:var(--ds-line); color:var(--ds-text); border-radius:7px; padding:10px 12px; }
 html:root #app #page .inventory-unit-chips small { color:var(--ds-muted); font-size:11px; }
 html:root #app #page .inventory-unit-chips [data-stock-unit-status="available"] small { color:var(--ds-record-positive); }
 html:root #app #page .inventory-cards-view .inventory-products { gap:10px; padding:0 18px 18px; }
 html:root #app #page .inventory-cards-view .inventory-product { border:1px solid var(--ds-line); border-radius:12px; background:var(--ds-surface); box-shadow:0 2px 5px #17203303; }
 html:root #app #page .inventory-cards-view .inventory-product-heading { padding:16px; min-height:90px; }
 html:root #app #page .inventory-cards-view .inventory-product-costs { padding:12px 16px; }

 /* Products and entries share the same separated-card treatment as sales. */
 html:root #app #page .inventory-section-heading { padding:16px 18px; }
 html:root #app #page .inventory-section-heading h2 { color:var(--ds-text); font-size:14px; font-weight:650; }
 html:root #app #page .inventory-history .inventory-entry-list { gap:10px; padding:0 18px 18px; }
 html:root #app #page .inventory-entry { border:1px solid var(--ds-line); border-radius:12px; background:var(--ds-surface); box-shadow:0 2px 5px #17203303; }
 html:root #app #page .inventory-entry>header { background:var(--ds-surface-alt); border-color:var(--ds-line); }
 html:root #app #page .inventory-entry-identification strong { color:var(--ds-accent); font-size:12px; }
 html:root #app #page .inventory-entry-identification time,
 html:root #app #page .inventory-entry-source { color:var(--ds-muted); font-size:11px; }
 html:root #app #page .inventory-entry-body { padding:14px; }
 html:root #app #page .inventory-entry-body h3 { color:var(--ds-text); font-size:13px; font-weight:600; }
 html:root #app #page .inventory-entry-values dt { color:var(--ds-muted); font-size:11px; }
 html:root #app #page .inventory-entry-values dd { color:var(--ds-text); font-size:13px; font-weight:600; }
 html:root #app #page .inventory-entry-values>div+div { border-color:var(--ds-line); }
 html:root #app #page .inventory-entry-details { border-color:var(--ds-line); color:var(--ds-muted); font-size:11px; }
 html:root #app #page .inventory-entry-actions button:not(.danger) { color:var(--ds-accent); font-size:11px; min-height:36px; border:1px solid var(--ds-line); border-radius:7px; background:var(--ds-surface); }
 html:root #app #page .inventory-entry-actions button:not(.danger):hover { color:var(--ds-accent); background:var(--ds-accent-soft); }
 html:root #app #page .inventory-entry-menu .sale-actions-item { display:flex; width:100%; min-height:44px; padding:9px 12px; border:0; border-radius:8px; background:transparent; color:var(--ds-text); font-size:13px; text-align:left; }
 html:root #app #page .inventory-entry-menu .sale-actions-item:hover { background:var(--ds-accent-soft); color:var(--ds-accent); }
 html:root #app #page .inventory-entry-menu .sale-actions-cancel { color:var(--ds-record-negative); border-top:1px solid var(--ds-line); border-radius:0 0 8px 8px; }
 html:root #app #page .inventory-entry.entry-voided { background:var(--ds-surface-alt); }
 html:root #app #page .inventory-history[data-layout="list"] .inventory-entry-list { gap:10px; padding:0 18px 18px; border:0; }
 html:root #app #page .inventory-history[data-layout="list"] .inventory-entry { border:1px solid var(--ds-line); border-radius:12px; }
 @media(max-width:700px) {
  html:root #app #page .inventory-list-view .inventory-products,
  html:root #app #page .inventory-cards-view .inventory-products,
  html:root #app #page .inventory-history .inventory-entry-list,
  html:root #app #page .inventory-history[data-layout="list"] .inventory-entry-list { padding:0 12px 12px; }
 }

 /* Product and contact tables keep identity together and numbers aligned. */
 html:root #app #page .stock-search { margin-bottom:14px; }
 html:root #app #page .records-layout-toolbar { margin:10px 0; color:var(--ds-muted); font-size:12px; }
 html:root #app #page .product-catalog .product-table th { background:var(--ds-surface-alt); color:var(--ds-muted); padding:11px 16px; font-size:11px; font-weight:600; letter-spacing:.02em; }
 html:root #app #page .product-catalog .product-table td { border-color:var(--ds-line); padding:14px 16px; }
 html:root #app #page .product-catalog .product-table td.num { color:var(--ds-text); font-size:13px; font-variant-numeric:tabular-nums; }
 html:root #app #page .product-catalog .product-table td.product-stock-cell>.badge { white-space:nowrap; overflow-wrap:normal; }
 html:root #app #page .product-catalog .product-table tbody>tr:is(:hover,:focus-within) { background:var(--ds-surface-alt); }
 html:root #app #page .product-catalog .product-table tr.product-selected { background:var(--ds-accent-soft); }
 html:root #app #page .product-catalog .product-table .product-menu-cell { padding:8px; width:52px; }
 html:root #app #page .product-bulk-toolbar { background:var(--ds-surface-alt); color:var(--ds-muted); border-color:var(--ds-line); padding:10px 16px; }
 html:root #app #page .product-bulk-toolbar.has-selection { background:var(--ds-accent-soft); color:var(--ds-accent); }
 html:root #app #page .product-catalog[data-layout="grid"] .product-table>tbody { padding:16px; gap:14px; }
 html:root #app #page .product-catalog[data-layout="grid"] .product-table>tbody>tr { padding:16px; gap:16px 14px; border-color:var(--ds-line); border-radius:10px; background:var(--ds-surface); }
 html:root #app #page .product-catalog[data-layout="grid"] .product-table>tbody>tr>td { padding:0; }
 html:root #app #page .product-catalog.can-manage[data-layout="grid"] td.product-name-cell { padding:0 40px 0 0; }
 html:root #app #page .product-catalog.can-manage[data-bulk-active="true"][data-layout="grid"] td.product-name-cell { padding-left:28px; }
 html:root #app #page .product-catalog[data-layout="grid"] .product-table>tbody>tr.product-selected { background:var(--ds-accent-soft); border-color:var(--ds-accent); }
 html:root #app #page .product-catalog[data-layout="grid"] td.num::before { color:var(--ds-muted); font-size:11px; }
 html:root #app #page .inventory-detail-heading { padding:18px; background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:var(--ds-radius); }
 html:root #app #page .inventory-detail-heading h1 { font-size:22px; white-space:normal; overflow:visible; overflow-wrap:anywhere; color:var(--ds-text); }
 html:root #app #page .inventory-detail-heading .product-codes { color:var(--ds-muted); white-space:normal; overflow:visible; }
 html:root #app #page .inventory-units .serial-unit { padding:13px 14px; border-radius:8px; background:var(--ds-surface-alt); border-color:var(--ds-line); }
 html:root #app #page .inventory-units .serial-unit>strong { color:var(--ds-text); }
 html:root #app #page .inventory-units .serial-unit .badge { min-height:22px; font-size:11px; padding:3px 7px; }
 html:root #app #page .stock-report-page .report-sheet { border-color:var(--ds-line); border-radius:var(--ds-radius); background:var(--ds-surface); }
 html:root #app #page .stock-report-page .report-heading { padding:20px; border-color:var(--ds-line); }
 html:root #app #page .stock-report-page .report-summary { padding:16px 20px; gap:0; border-bottom:1px solid var(--ds-line); }
 html:root #app #page .stock-report-page .report-summary>div { padding:2px 20px; border:0; border-left:1px solid var(--ds-line); border-radius:0; background:transparent; }
 html:root #app #page .stock-report-page .report-summary>div:first-child { border-left:0; padding-left:0; }
 html:root #app #page .stock-report-page .report-summary>div>span { color:var(--ds-muted); font-size:11px; }
 html:root #app #page .stock-report-page .report-summary>div>strong { color:var(--ds-text); font-size:22px; font-weight:650; }

 /* Never reveal inactive controls or data excluded by permissions/selection mode. */
 html:root #app #page [hidden] { display:none!important; }

 @media (min-width:1050px) {
  html:root #app #page .inventory-history[data-layout="list"] .inventory-entry { grid-template-columns:88px minmax(0,1fr) minmax(220px,.72fr) 160px; padding:14px 18px; gap:8px 16px; }
 }
 @media (max-width:1100px) {
  html:root #app #page #sales-results[data-layout="list"] .sale-record-compact { grid-template-columns:minmax(0,1fr) minmax(250px,360px) 36px 40px; gap:4px 8px; padding:12px; }
  html:root #app #page #sales-results .sale-record-compact-values>span { padding:4px 7px; }
  html:root #app #page .inventory-list-view { --stock-list-columns:minmax(0,1fr) 64px 105px 105px 40px; }
  html:root #app #page .inventory-list-view.no-costs { --stock-list-columns:minmax(0,1fr) 64px 40px; }
  html:root #app #page .product-catalog .product-table.mobile-records tbody td { padding:0; width:auto; }
  html:root #app #page .product-catalog .product-table.mobile-records tbody td.product-menu-cell { width:44px; padding:0; }
 }
 @media (max-width:850px) {
  html:root #app #page #sales-results[data-layout="list"] .sale-record-compact { grid-template-columns:minmax(0,1fr) 36px 44px; gap:7px 8px; padding:14px; }
  html:root #app #page #sales-results .sale-record-header>.sale-actions-menu { grid-column:2; grid-row:1/3; }
  html:root #app #page #sales-results .sale-record-header>.sale-record-open { grid-column:3; grid-row:1/3; width:44px; min-width:44px; min-height:44px; height:44px; }
  html:root #app #page #sales-results .sale-record-compact-values { grid-column:1/-1; grid-row:3; padding-top:8px; border-top:1px solid var(--ds-line); }
  html:root #app #page #sales-results .sale-record-compact-footer { grid-column:1/-1; grid-row:4; padding:8px 0 0; }
  html:root #app #page .sale-detail-product { grid-template-columns:minmax(0,1fr); gap:10px; }
 }
 @media (max-width:700px) {
  html:root #app #page #sales-results .sale-record-compact-values { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 0; }
  html:root #app #page #sales-results .sale-record-compact-values.values-1 { grid-template-columns:minmax(0,1fr); }
  html:root #app #page #sales-results .sale-record-compact-values>span { padding:3px 8px; justify-items:start; text-align:left; }
  html:root #app #page #sales-results .sale-record-compact-values>span:nth-child(odd) { padding-left:0; border-left:0; }
  html:root #app #page #sales-results .sale-record:not(.sale-record-cancelled) .sale-record-compact-values.values-4>span:nth-child(n+3) { border-top:0; }
  html:root #app #page #sales-results .sale-record-compact-values strong { font-size:13px; }
  html:root #app #page .sale-actions-menu>summary,
  html:root #app #page .sale-actions-item { min-height:44px; }
  html:root #app #page[data-screen="sales"] .sales-status-shortcut { min-height:44px; padding:9px 10px; }
  html:root #app #page .sale-detail-header { padding:14px; align-items:start; }
  html:root #app #page .sale-detail-title-line h1 { font-size:21px; }
  html:root #app #page .sale-detail-summary,
  html:root #app #page .sale-detail-summary.summary-5 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html:root #app #page .sale-detail-metric { padding:12px; min-height:74px; border-top:1px solid var(--ds-line); }
  html:root #app #page .sale-detail-metric:nth-child(-n+2) { border-top:0; }
  html:root #app #page .sale-detail-metric:nth-child(odd) { border-left:0; }
  html:root #app #page .sale-detail-metric>strong { font-size:18px; }
  html:root #app #page .sale-detail-product { padding:13px 14px; }
  html:root #app #page .sale-detail-values { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  html:root #app #page .sale-detail-values>div { text-align:left; }
  html:root #app #page .inventory-overview { gap:10px 18px; padding:12px; }
  html:root #app #page .inventory-overview strong { font-size:15px; }
  html:root #app #page .inventory-list-view,
  html:root #app #page .inventory-list-view.no-costs { --stock-list-columns:minmax(0,1fr) 58px 44px; }
  html:root #app #page .inventory-list-view .inventory-product { padding:14px 12px; gap:10px 8px; }
  html:root #app #page .inventory-list-view .inventory-product .inventory-product-costs { display:grid; grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; background:transparent; }
  html:root #app #page .inventory-product .inventory-unit-toggle { min-width:44px; width:44px; min-height:44px; height:44px; }
  html:root #app #page .inventory-cards-view .inventory-products { padding:0 12px 12px; }
  html:root #app #page .inventory-entry-actions button,
  html:root #app #page .inventory-entry-actions button:not(.danger) { min-height:44px; }
  html:root #app #page .inventory-detail-heading { padding:14px; gap:8px; }
  html:root #app #page .inventory-detail-heading h1 { font-size:19px; }
  html:root #app #page .inventory-detail-heading .product-codes { grid-column:1/-1; grid-row:3; line-height:1.6; }
  html:root #app #page .inventory-detail-back { width:44px; min-height:44px; height:44px; }
  html:root #app #page .inventory-detail-edit { grid-column:3; min-height:44px; }
  html:root #app #page .product-catalog.can-manage .product-table.mobile-records tbody td.product-name-cell { padding:2px 44px 0 0; }
  html:root #app #page .product-catalog.can-manage[data-bulk-active="true"] .product-table.mobile-records tbody td.product-name-cell { padding-left:28px; }
  html:root #app #page .product-catalog .product-table.mobile-records tbody td.product-select-cell { width:20px; }
  html:root #app #page .stock-report-page .report-summary { padding:12px; gap:14px; }
  html:root #app #page .stock-report-page .report-summary>div { border:0; padding:0; }
  html:root #app #page .stock-report-page .report-summary>div>strong { font-size:19px; }
 }
}
@media screen {
 .product-name-cell{position:relative;padding-right:46px!important}
 .product-name-cell>.inventory-unit-toggle{position:absolute;right:8px;top:14px}
 .product-name-cell>.inventory-unit-expansion{margin-top:12px;white-space:normal}
 .product-name-cell .inventory-unit-chips{display:flex;flex-wrap:wrap;gap:6px}
 .product-name-cell .inventory-unit-chips li{max-width:100%;overflow-wrap:anywhere}
 .product-catalog[data-layout="grid"] .product-name-cell{min-height:74px}
 .product-catalog.can-manage[data-layout="grid"] .product-name-cell:has(>.inventory-unit-toggle){padding-right:88px!important}
 .product-catalog.can-manage[data-layout="grid"] .product-name-cell>.inventory-unit-toggle{right:42px;top:0}
 @media(max-width:700px){
  .product-catalog.can-manage .product-table.mobile-records .product-name-cell:has(>.inventory-unit-toggle){padding-right:88px!important}
  .product-catalog.can-manage .product-table.mobile-records .product-name-cell>.inventory-unit-toggle{right:42px;top:0}
 }
 dialog#modal #card-machine-form .machine-editor-brand{grid-template-columns:minmax(0,1fr) auto auto}
 @media(max-width:650px){dialog#modal #card-machine-form .machine-editor-brand{grid-template-columns:1fr 1fr}dialog#modal #card-machine-form .machine-editor-brand>.field{grid-column:1/-1}}
}