/* Hallmark · shape: app screen · genre: modern-minimal · theme: Dusk (by request)
 * nav: kept (the app's own shell) · signature: kept · states: kept · dusk: none/periwinkle-apricot/well
 * axes: dark 17.5 268/grotesk-sans Wix Madefor Display/cool 274 · posture: committed · modes: light+dark (html[data-theme]) · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S3 R5 V3 · weakest: S and P, phase 1 only re-points the app's own tokens and faces; components, radius and surfaces follow in phase 2 */
/* waive third signal: the Pockets brand yellow (#f5b400) stays the main action colour at the owner's request */
/* waive 48 (font-family !important): ps-theme.css sets a literal Segoe UI stack on ~40 selectors; one scoped override is safer than editing each */

/*
 * Pockets POS: Hallmark Dusk, phase 1 (tokens + typography).
 * Loaded right after assets/ps-theme.css by ps_head(). It only re-points the
 * existing --ps-* tokens; every rule in ps-theme.css keeps working.
 * Remove the <link> in includes/ps_layout.php ps_head() to undo.
 *
 * Signals: the Pockets brand yellow stays the main action colour (owner's
 * choice, 2026-11-04); periwinkle takes the old blue; apricot is open/owed/warning; sage is paid/success; a muted rose is kept
 * only for destructive actions (void, delete, reject) because a till needs one.
 */

/* ---------- Dark (default): slate, bone ink, periwinkle ---------- */
html[data-theme="dark"] {
  --ps-font: "Wix Madefor Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --ps-font-display: "Wix Madefor Display", "Wix Madefor Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif;

  --ps-bg: oklch(17.5% 0.014 268);
  --ps-bg-elev: oklch(21% 0.016 268);
  --ps-sidebar: oklch(19.5% 0.015 268);
  --ps-card: oklch(21% 0.016 268);
  --ps-card-2: oklch(25% 0.017 268);
  --ps-input: oklch(23% 0.016 268);
  --ps-line: oklch(30% 0.016 266);
  --ps-text: oklch(97% 0.003 268);
  --ps-muted: oklch(70% 0.016 262);
  --ps-top: oklch(17.5% 0.014 268);
  --ps-row: oklch(100% 0 0 / 0.035);
  --ps-overlay: oklch(10% 0.022 268 / 0.62);
  --ps-shadow: 0 1px 0 oklch(100% 0 0 / 0.05) inset, 0 24px 48px -24px oklch(8% 0.02 268 / 0.7);

  --ps-yellow: oklch(80.5% 0.165 80);
  --ps-yellow-ink: oklch(21% 0.006 80);
  --ps-blue: oklch(77% 0.10 274);
  --ps-blue-ink: oklch(19% 0.035 274);
  --ps-green: oklch(80% 0.09 160);
  --ps-danger: oklch(72% 0.12 22);
  --ps-danger-ink: oklch(19% 0.035 22);
  --ps-warn: oklch(83% 0.095 62);
  --ps-focus: oklch(80% 0.10 274);

  /* phase 2 roles */
  --ps-line-strong: oklch(38% 0.016 266);
  --ps-yellow-hi: oklch(85% 0.15 82);
  --ps-yellow-text: oklch(84% 0.15 82);
  --ps-yellow-soft: oklch(80.5% 0.165 80 / 0.16);
  --ps-radius-card: 14px; --ps-radius-control: 10px; --ps-radius-pill: 999px;
}

/* ---------- Light: neutral white surfaces (bone wells dropped at the owner's request) ---------- */
html[data-theme="light"] {
  --ps-font: "Wix Madefor Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --ps-font-display: "Wix Madefor Display", "Wix Madefor Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif;

  /* neutral whites (owner: no warm/bone tint), a hair cool toward the slate hue */
  --ps-bg: oklch(97% 0.003 268);
  --ps-bg-elev: oklch(99.6% 0.001 268);
  --ps-sidebar: oklch(99.6% 0.001 268);
  --ps-card: oklch(99.6% 0.001 268);
  --ps-card-2: oklch(97.6% 0.003 268);
  --ps-input: oklch(99.6% 0.001 268);
  --ps-line: oklch(90.5% 0.005 268);
  --ps-text: oklch(22% 0.022 268);
  --ps-muted: oklch(47% 0.016 265);
  --ps-top: oklch(99.6% 0.001 268);
  --ps-row: oklch(22% 0.022 268 / 0.035);
  --ps-overlay: oklch(22% 0.022 268 / 0.45);
  --ps-shadow: 0 1px 0 oklch(100% 0 0 / 0.6) inset, 0 16px 36px -20px oklch(28% 0.04 268 / 0.28);

  --ps-yellow: oklch(80.5% 0.165 80);
  --ps-yellow-ink: oklch(21% 0.006 80);
  --ps-blue: oklch(50% 0.13 274);
  --ps-blue-ink: oklch(98.5% 0.005 274);
  --ps-green: oklch(46% 0.10 160);
  --ps-danger: oklch(52% 0.15 25);
  --ps-danger-ink: oklch(98.5% 0.005 25);
  --ps-warn: oklch(50% 0.12 55);
  --ps-focus: oklch(44% 0.13 274);

  /* phase 2 roles */
  --ps-line-strong: oklch(80% 0.008 268);
  --ps-yellow-hi: oklch(84% 0.16 82);
  --ps-yellow-text: oklch(52% 0.115 70);
  --ps-yellow-soft: oklch(80.5% 0.165 80 / 0.22);
  --ps-radius-card: 14px; --ps-radius-control: 10px; --ps-radius-pill: 999px;
}

/* ---------- Typography: Wix Madefor Text for UI, Display for heads ---------- */
html[data-theme] body:is(.ps-app, .ps-pos),
html[data-theme] body:is(.ps-app, .ps-pos) :not(.mono, .readonly-code, .code, code, pre, kbd, samp, svg, svg *) {
  font-family: var(--ps-font) !important;
}
html[data-theme] body:is(.ps-app, .ps-pos) :is(h1, h2, h3) {
  font-family: var(--ps-font-display) !important;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
html[data-theme] body:is(.ps-app, .ps-pos) {
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
html[data-theme] body:is(.ps-app, .ps-pos) ::selection {
  background: var(--ps-yellow);
  color: var(--ps-yellow-ink);
}

/* ---------- Ink on accent fills (ps-theme.css hard-codes #fff on these) ---------- */
html[data-theme] body.ps-app #btnSave,
html[data-theme] body.ps-pos .btn-blue,
html[data-theme] body.ps-app a.new-order-button,
html[data-theme] body.ps-app .ps-btn-primary,
html[data-theme] body.ps-app .ps-btn.process,
html[data-theme] body.ps-app button.process:not(.ps-btn) {
  color: var(--ps-blue-ink);
}
.ps-logout-btn-primary,
html[data-theme] body.ps-app .ps-logout-btn-primary,
html[data-theme] body.ps-app #logout-button,
html[data-theme] body.ps-app .ps-btn.reject,
html[data-theme] body.ps-app button.reject:not(.ps-btn),
html[data-theme] body.ps-app button.delete-row:hover {
  color: var(--ps-danger-ink);
}

/* =====================================================================
 * Phase 2: shared components (tables, buttons, fields, surfaces, nav,
 * status). Same selectors as ps-theme.css, loaded later, so these win
 * without !important. One radius per level: 14px surfaces, 10px controls.
 * ===================================================================== */

/* ---------- Tables ---------- */
html[data-theme] body.ps-app table {
  border-radius: var(--ps-radius-card);
  box-shadow: none;
}
html[data-theme] body.ps-app th,
html[data-theme] body.ps-app td {
  padding: 12px 16px;
}
html[data-theme] body.ps-app th,
html[data-theme] body.ps-app .ps-table-wrap th,
html[data-theme] body.ps-app table.ps-table th {
  background: var(--ps-card-2);
  color: var(--ps-muted);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
html[data-theme] body.ps-app th a {
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
}
html[data-theme] body.ps-app th a:hover { color: var(--ps-text); }
html[data-theme] body.ps-app th a:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
html[data-theme] body.ps-app td { font-variant-numeric: tabular-nums; }
html[data-theme] body.ps-app tbody tr:hover td { background: var(--ps-row); }

/* ---------- Row actions: compact outline buttons in one line; destructive ones in red ----------
 * Buttons inside table cells were full-size yellow and stacked (e.g. Backup & Recovery:
 * Download / Restore test / Delete). Classed buttons (.ps-btn, .process, .reject...) keep their own look. */
html[data-theme] body.ps-app td.actions,
html[data-theme] body.ps-app td:has(> form + form) {
  display: table-cell; /* ps-theme's generic .actions made the cell a wrapping flex box */
  white-space: nowrap;
}
/* !important on width only: ps-theme sets "td form { width: 100% }" through several container selectors */
html[data-theme] body.ps-app td.actions > form,
html[data-theme] body.ps-app td:has(> form + form) > form {
  display: inline-flex;
  width: auto !important;
  margin: 2px 4px 2px 0;
  vertical-align: middle;
}
/* Long unbroken values (file names, references) may wrap so row actions stay on one line */
html[data-theme] body.ps-app td.ps-wrap-anywhere {
  overflow-wrap: anywhere;
  min-width: 8rem;
}
html[data-theme] body.ps-app td :is(button, input[type="submit"], input[type="button"]):not([class]) {
  height: 32px;
  min-height: 32px;
  width: auto;
  padding: 0 12px;
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-control);
  background: var(--ps-card);
  color: var(--ps-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
html[data-theme] body.ps-app td :is(button, input[type="submit"], input[type="button"]):not([class]):hover {
  background: var(--ps-card-2);
  border-color: var(--ps-line-strong);
}
html[data-theme] body.ps-app td :is(button, input[type="submit"]):not([class]):is([name*="delete"], [name*="void"], [name*="reject"], [name*="remove"], [name*="cancel"]) {
  color: var(--ps-danger);
  border-color: color-mix(in oklab, var(--ps-danger) 35%, var(--ps-line));
}
html[data-theme] body.ps-app td :is(button, input[type="submit"]):not([class]):is([name*="delete"], [name*="void"], [name*="reject"], [name*="remove"], [name*="cancel"]):hover {
  background: color-mix(in oklab, var(--ps-danger) 10%, var(--ps-card));
  border-color: var(--ps-danger);
}

/* ---------- Links ---------- */
html[data-theme] body.ps-app a { text-underline-offset: 3px; }
html[data-theme] body.ps-app a:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; border-radius: 4px; }

/* ---------- Buttons: primary (yellow) ---------- */
html[data-theme] body.ps-app button,
html[data-theme] body.ps-app input[type="submit"],
html[data-theme] body.ps-app input[type="button"],
html[data-theme] body.ps-app .ps-btn,
html[data-theme] body.ps-app a.ps-btn {
  border-radius: var(--ps-radius-control);
  min-height: 40px;
  font-weight: 600;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
html[data-theme] body.ps-app .ps-btn,
html[data-theme] body.ps-app a.ps-btn { height: 40px; }
html[data-theme] body.ps-app button:hover,
html[data-theme] body.ps-app input[type="submit"]:hover,
html[data-theme] body.ps-app input[type="button"]:hover,
html[data-theme] body.ps-app a.back-button:hover,
html[data-theme] body.ps-app a.template-button:hover,
html[data-theme] body.ps-app .ps-btn-default:hover,
html[data-theme] body.ps-app .ps-btn-destructive:hover {
  filter: none;
}
html[data-theme] body.ps-app input[type="submit"]:not([class]):hover,
html[data-theme] body.ps-app button:not([class]):hover,
html[data-theme] body.ps-app .ps-btn-default:hover {
  background: var(--ps-yellow-hi);
}
html[data-theme] body.ps-app button:active:not(:disabled),
html[data-theme] body.ps-app input[type="submit"]:active,
html[data-theme] body.ps-app .ps-btn:active:not(:disabled) { transform: translateY(1px); }
html[data-theme] body.ps-app button:focus-visible,
html[data-theme] body.ps-app input[type="submit"]:focus-visible,
html[data-theme] body.ps-app input[type="button"]:focus-visible,
html[data-theme] body.ps-app .ps-btn:focus-visible {
  outline: 2px solid var(--ps-focus);
  outline-offset: 2px;
  transition: none;
}
html[data-theme] body.ps-app button:disabled,
html[data-theme] body.ps-app input[type="submit"]:disabled,
html[data-theme] body.ps-app .ps-btn:disabled,
html[data-theme] body.ps-app .ps-btn[aria-disabled="true"] {
  background: var(--ps-card-2);
  color: var(--ps-muted);
  border-color: var(--ps-line);
  opacity: 1;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Buttons: secondary / outline / ghost ---------- */
html[data-theme] body.ps-app .back-button,
html[data-theme] body.ps-app .btn-secondary,
html[data-theme] body.ps-app #btnCancel,
html[data-theme] body.ps-app .ps-btn-secondary,
html[data-theme] body.ps-app .ps-btn-outline,
html[data-theme] body.ps-app a.ps-btn-outline,
html[data-theme] body.ps-app .ps-btn.ps-btn-outline {
  background: var(--ps-card);
  color: var(--ps-text);
  border: 1px solid var(--ps-line);
}
html[data-theme] body.ps-app .back-button:hover,
html[data-theme] body.ps-app .btn-secondary:hover,
html[data-theme] body.ps-app #btnCancel:hover,
html[data-theme] body.ps-app .ps-btn-secondary:hover,
html[data-theme] body.ps-app .ps-btn-outline:hover,
html[data-theme] body.ps-app a.ps-btn-outline:hover,
html[data-theme] body.ps-app .ps-btn.ps-btn-outline:hover {
  background: var(--ps-card-2);
  border-color: var(--ps-line-strong);
}
html[data-theme] body.ps-app .ps-btn-ghost:hover { background: var(--ps-card-2); }

/* ---------- Buttons: periwinkle (the old blue set) ---------- */
html[data-theme] body.ps-app .export-button,
html[data-theme] body.ps-app .print-button,
html[data-theme] body.ps-app .new-order-button,
html[data-theme] body.ps-app .create-button,
html[data-theme] body.ps-app .info-button,
html[data-theme] body.ps-app .load-all-button,
html[data-theme] body.ps-app .new-expense-button,
html[data-theme] body.ps-app .new-stock-button,
html[data-theme] body.ps-app .search-button,
html[data-theme] body.ps-app .backup-button,
html[data-theme] body.ps-app .template-button,
html[data-theme] body.ps-app .btn-primary,
html[data-theme] body.ps-app a.template-button,
html[data-theme] body.ps-app a.print-button,
html[data-theme] body.ps-app a.new-order-button,
html[data-theme] body.ps-app a.export-button {
  color: var(--ps-blue-ink);
}
html[data-theme] body.ps-app .export-button:hover,
html[data-theme] body.ps-app .print-button:hover,
html[data-theme] body.ps-app .new-order-button:hover,
html[data-theme] body.ps-app .create-button:hover,
html[data-theme] body.ps-app .search-button:hover,
html[data-theme] body.ps-app .btn-primary:hover,
html[data-theme] body.ps-app #btnSave:hover,
html[data-theme] body.ps-app .ps-btn-primary:hover,
html[data-theme] body.ps-app .ps-btn.process:hover {
  background: color-mix(in oklab, var(--ps-blue) 88%, var(--ps-text));
}

/* ---------- Buttons: destructive ---------- */
html[data-theme] body.ps-app .ps-btn-destructive,
html[data-theme] body.ps-app button.reject.ps-btn,
html[data-theme] body.ps-app .new-install-button {
  color: var(--ps-danger-ink);
}
html[data-theme] body.ps-app .ps-btn-destructive:hover,
html[data-theme] body.ps-app .ps-btn.reject:hover,
html[data-theme] body.ps-app #logout-button:hover {
  background: color-mix(in oklab, var(--ps-danger) 88%, var(--ps-text));
}

/* ---------- Fields ---------- */
html[data-theme] body.ps-app input[type="text"],
html[data-theme] body.ps-app input[type="password"],
html[data-theme] body.ps-app input[type="number"],
html[data-theme] body.ps-app input[type="date"],
html[data-theme] body.ps-app input[type="email"],
html[data-theme] body.ps-app input[type="search"],
html[data-theme] body.ps-app input[type="file"],
html[data-theme] body.ps-app select,
html[data-theme] body.ps-app textarea,
html[data-theme] body.ps-app .ps-select-trigger {
  border-radius: var(--ps-radius-control);
  min-height: 40px;
  font-weight: 400;
  transition: border-color 120ms ease, background-color 120ms ease;
}
html[data-theme] body.ps-app input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):hover,
html[data-theme] body.ps-app select:hover,
html[data-theme] body.ps-app textarea:hover,
html[data-theme] body.ps-app .ps-select-trigger:hover {
  border-color: var(--ps-line-strong);
}
html[data-theme] body.ps-app input:focus,
html[data-theme] body.ps-app select:focus,
html[data-theme] body.ps-app textarea:focus,
html[data-theme] body.ps-app .ps-select-trigger:focus,
html[data-theme] body.ps-app .ps-select-trigger:focus-visible,
html[data-theme] body.ps-app .ps-select.is-open .ps-select-trigger,
html[data-theme] body.ps-app .ps-input:focus-visible,
html[data-theme] body.ps-app .ps-form-stack input:focus-visible,
html[data-theme] body.ps-app .ps-form-stack select:focus-visible,
html[data-theme] body.ps-app .ps-form-stack textarea:focus-visible {
  outline: 2px solid var(--ps-focus);
  outline-offset: 1px;
  border-color: var(--ps-focus);
}
html[data-theme] body.ps-app input:disabled,
html[data-theme] body.ps-app select:disabled,
html[data-theme] body.ps-app textarea:disabled {
  background: var(--ps-card-2);
  color: var(--ps-muted);
  cursor: not-allowed;
}
/* Checkboxes and radios: one 18px size everywhere. ps-theme.css "td input" (width 100%, min 72x36)
 * was stretching the ones inside table cells, e.g. Role Permissions. */
html[data-theme] body:is(.ps-app, .ps-pos) input[type="checkbox"],
html[data-theme] body:is(.ps-app, .ps-pos) input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  vertical-align: middle;
  accent-color: var(--ps-yellow);
  cursor: pointer;
}
/* Role Permissions keeps its big tick boxes (owner's request). */
html[data-theme] body.ps-app .rp-table input[type="checkbox"] {
  width: 34px;
  height: 34px;
}
html[data-theme] body:is(.ps-app, .ps-pos) input[type="checkbox"]:focus-visible,
html[data-theme] body:is(.ps-app, .ps-pos) input[type="radio"]:focus-visible {
  outline: 2px solid var(--ps-focus);
  outline-offset: 2px;
}
html[data-theme] body:is(.ps-app, .ps-pos) input[type="checkbox"]:disabled,
html[data-theme] body:is(.ps-app, .ps-pos) input[type="radio"]:disabled { cursor: not-allowed; opacity: 0.55; }

/* ---------- Surfaces: cards, panels, modals ---------- */
html[data-theme] body.ps-app .ps-card,
html[data-theme] body.ps-app .ps-panel {
  border-radius: var(--ps-radius-card);
  box-shadow: none;
}
html[data-theme] body.ps-app .modal,
html[data-theme] body.ps-app .ps-dialog {
  border-radius: calc(var(--ps-radius-card) + 2px);
  box-shadow: var(--ps-shadow);
}

/* ---------- Sidebar ---------- */
html[data-theme] body.ps-app .ps-nav-group,
html[data-theme] body.ps-app .ps-nav-group span,
html[data-theme] body.ps-app .ps-nav button.ps-nav-group,
html[data-theme] body.ps-pos .kicker {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ps-text);
}
html[data-theme] body.ps-app .ps-nav a {
  border-radius: var(--ps-radius-control);
  transition: background-color 120ms ease, color 120ms ease;
}
html[data-theme] body.ps-app .ps-nav a:hover { background: var(--ps-row); color: var(--ps-text); }
html[data-theme] body.ps-app .ps-nav a.is-on {
  background: var(--ps-yellow-soft);
  color: var(--ps-text);
  font-weight: 600;
}
html[data-theme] body.ps-app .ps-nav a.is-on svg { color: var(--ps-yellow-text); }
html[data-theme] body.ps-app .ps-nav a:focus-visible,
html[data-theme] body.ps-app .ps-nav-group:focus-visible {
  outline: 2px solid var(--ps-focus);
  outline-offset: 1px;
}

/* ---------- Sidebar scrollbar (2026-11-04): slim, no arrows, no track; faint until the sidebar is hovered ---------- */
html[data-theme] body.ps-app .ps-nav {
  scrollbar-width: thin;
  scrollbar-color: var(--ps-line) transparent;
  scrollbar-gutter: stable;
}
html[data-theme] body.ps-app .ps-nav:hover,
html[data-theme] body.ps-app .ps-nav:focus-within {
  scrollbar-color: var(--ps-line-strong) transparent;
}
/* Older Chromium / Safari without scrollbar-color */
html[data-theme] body.ps-app .ps-nav::-webkit-scrollbar { width: 6px; }
html[data-theme] body.ps-app .ps-nav::-webkit-scrollbar-track { background: transparent; }
html[data-theme] body.ps-app .ps-nav::-webkit-scrollbar-button { display: none; }
html[data-theme] body.ps-app .ps-nav::-webkit-scrollbar-thumb {
  background: var(--ps-line);
  border-radius: 999px;
}
html[data-theme] body.ps-app .ps-nav:hover::-webkit-scrollbar-thumb { background: var(--ps-line-strong); }

/* ---------- Light/Dark switch: one size on every page (app, till; login matches in login/dusk.css) ---------- */
html[data-theme] body:is(.ps-app, .ps-pos) .ps-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-pill);
  background: var(--ps-card);
}
html[data-theme] body:is(.ps-app, .ps-pos) .ps-theme-switch button {
  height: 32px;
  min-height: 32px;
  width: auto;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ps-radius-pill);
  background: transparent;
  color: var(--ps-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  transform: none;
}
html[data-theme] body:is(.ps-app, .ps-pos) .ps-theme-switch button:hover:not(.is-on) {
  background: var(--ps-row);
  color: var(--ps-text);
}
html[data-theme] body:is(.ps-app, .ps-pos) .ps-theme-switch button.is-on {
  background: var(--ps-yellow);
  color: var(--ps-yellow-ink);
}

/* ---------- Tabs ---------- */
html[data-theme] body.ps-app .tabs a.on,
html[data-theme] body.ps-app .cm-tabs label:has(input:checked) {
  font-weight: 600;
}

/* ---------- Status: badges, alerts, labels ---------- */
html[data-theme] body.ps-app .ps-badge { font-weight: 500; }
html[data-theme] body.ps-app .ps-badge-success,
html[data-theme] body.ps-app .ps-badge-BALANCED,
html[data-theme] body.ps-app .ps-badge-PROCESSED {
  background: color-mix(in oklab, var(--ps-green) 15%, transparent);
  color: var(--ps-green);
}
html[data-theme] body.ps-app .ps-badge-destructive,
html[data-theme] body.ps-app .ps-badge-SHORTAGE,
html[data-theme] body.ps-app .ps-badge-REJECTED {
  background: color-mix(in oklab, var(--ps-danger) 15%, transparent);
  color: var(--ps-danger);
}
html[data-theme] body.ps-app .ps-badge-warning {
  background: color-mix(in oklab, var(--ps-warn) 16%, transparent);
  color: var(--ps-warn);
}
html[data-theme] body.ps-app .ps-badge-info {
  background: color-mix(in oklab, var(--ps-blue) 16%, transparent);
  color: var(--ps-blue);
}
html[data-theme] body.ps-app .error:not(:empty),
html[data-theme] body.ps-app .alert:not(:empty) {
  background: color-mix(in oklab, var(--ps-danger) 10%, transparent);
  border-color: color-mix(in oklab, var(--ps-danger) 32%, transparent);
  border-radius: var(--ps-radius-control);
}
html[data-theme] body.ps-app .success:not(:empty) {
  background: color-mix(in oklab, var(--ps-green) 12%, transparent);
}
html[data-theme] body.ps-app .ps-kpi-label {
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Brand mark: the white logo tile needs an edge on white ---------- */
.ps-mark { box-shadow: inset 0 0 0 1px var(--ps-line); }

/* ---------- Till (body.ps-pos) ---------- */
html[data-theme] body.ps-pos .step button,
html[data-theme] body.ps-pos .vchoose {
  color: var(--ps-yellow-text);
}
html[data-theme] body.ps-pos .step .qtybtn { color: var(--ps-text); }
html[data-theme] body.ps-pos .step button:hover:not(.qtybtn) {
  background: var(--ps-yellow-soft);
  border-color: var(--ps-yellow);
}
html[data-theme] body.ps-pos .search:focus,
html[data-theme] body.ps-pos input:focus,
html[data-theme] body.ps-pos select:focus,
html[data-theme] body.ps-pos textarea:focus {
  outline: 2px solid var(--ps-focus);
  outline-offset: 1px;
  border-color: var(--ps-focus);
}
html[data-theme] body.ps-pos button:focus-visible {
  outline: 2px solid var(--ps-focus);
  outline-offset: 2px;
}
html[data-theme] body.ps-pos .pcard,
html[data-theme] body.ps-pos .sheet { border-radius: var(--ps-radius-card); }

/* =====================================================================
 * Phase 3: the till (ajax_pos.php). CSS only; markup and JS untouched.
 * Big tap targets stay (44px actions, 36px steppers).
 * ===================================================================== */

/* ---------- Category tabs: neutral tab + the category's own colour as a left stripe ----------
 * Each .cat carries its colour inline (set per Button Category on the Items page). The 6px
 * transparent left border lets that inline background show as a stripe; an inset shadow
 * paints the rest of the tab in the card colour. */
html[data-theme] body.ps-pos .cat {
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-left: 6px solid transparent;
  border-radius: var(--ps-radius-control);
  background-clip: border-box;
  box-shadow: inset 0 0 0 1px var(--ps-line), inset 0 0 0 999px var(--ps-card);
  color: var(--ps-text);
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: box-shadow 120ms ease;
}
html[data-theme] body.ps-pos .cat:hover:not(.on) {
  box-shadow: inset 0 0 0 1px var(--ps-line-strong), inset 0 0 0 999px var(--ps-row), inset 0 0 0 999px var(--ps-card);
}
html[data-theme] body.ps-pos .cat.on,
html[data-theme="light"] body.ps-pos .cat.on {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--ps-yellow), inset 0 0 0 999px var(--ps-yellow-soft), inset 0 0 0 999px var(--ps-card);
  font-weight: 700;
}
html[data-theme] body.ps-pos .cat:focus-visible {
  outline: 2px solid var(--ps-focus);
  outline-offset: 2px;
}

/* ---------- Product cards ---------- */
html[data-theme] body.ps-pos .pcard {
  padding: 16px 16px 12px;
  border-radius: var(--ps-radius-card);
  transition: border-color 120ms ease;
}
html[data-theme] body.ps-pos .pcard:hover { border-color: var(--ps-line-strong); }
html[data-theme] body.ps-pos .pname {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.25;
}
html[data-theme] body.ps-pos .pstock {
  margin-top: 4px;
  color: var(--ps-muted);
  font-size: 12.5px;
}
html[data-theme] body.ps-pos .pprice {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html[data-theme] body.ps-pos .ppack { border-top-style: solid; }

/* ---------- Order pane ---------- */
html[data-theme] body.ps-pos .order { background: var(--ps-bg-elev); }
html[data-theme] body.ps-pos .order-foot { border-top: 1px solid var(--ps-line); padding-top: 12px; }
html[data-theme] body.ps-pos .order-foot .total {
  margin: 2px 0;
  color: var(--ps-muted);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
html[data-theme] body.ps-pos .order-foot .total:has(#totalAmount) {
  margin: 8px 0 4px;
  color: var(--ps-text);
  font-family: var(--ps-font-display) !important;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
html[data-theme] body.ps-pos .oline-price { font-weight: 700; }

/* ---------- Order actions: Print / Submit is the main action, full width on top;
 * View ticket, Place order and Clear cart share the row below (owner's layout). ---------- */
html[data-theme] body.ps-pos .order-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-theme] body.ps-pos .order-actions .btn.btn-blue {
  grid-column: 1 / -1;
  order: -1;
  min-height: 52px;
  font-size: 16px;
  font-weight: 700;
}
html[data-theme] body.ps-pos .order-actions .btn { padding: 4px 8px; }
html[data-theme] body.ps-pos .order-actions .btn {
  min-height: 44px;
  border-radius: var(--ps-radius-control);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
/* main: Print / Submit in yellow; Place order joins the secondary outlines */
html[data-theme] body.ps-pos .order-actions .btn-blue {
  background: var(--ps-yellow);
  color: var(--ps-yellow-ink);
  border: 0;
}
html[data-theme] body.ps-pos .order-actions .btn-blue:hover:not(:disabled) { background: var(--ps-yellow-hi); }
html[data-theme] body.ps-pos .btn-yellow:hover:not(:disabled) { background: var(--ps-yellow-hi); }
html[data-theme] body.ps-pos .order-actions .btn-yellow,
html[data-theme] body.ps-pos .btn-blue,
html[data-theme] body.ps-pos .btn-gray {
  background: var(--ps-card);
  color: var(--ps-text);
  border: 1px solid var(--ps-line);
}
html[data-theme] body.ps-pos .order-actions .btn-yellow:hover:not(:disabled),
html[data-theme] body.ps-pos .btn-blue:hover:not(:disabled),
html[data-theme] body.ps-pos .btn-gray:hover:not(:disabled) {
  background: var(--ps-card-2);
  border-color: var(--ps-line-strong);
}
html[data-theme] body.ps-pos #discardCartBtn {
  color: var(--ps-danger);
  border-color: color-mix(in oklab, var(--ps-danger) 35%, var(--ps-line));
}
html[data-theme] body.ps-pos #discardCartBtn:hover:not(:disabled) {
  background: color-mix(in oklab, var(--ps-danger) 10%, var(--ps-card));
  border-color: var(--ps-danger);
}
html[data-theme] body.ps-pos .btn:active:not(:disabled) { transform: translateY(1px); }
html[data-theme] body.ps-pos .btn:disabled {
  background: var(--ps-card-2);
  color: var(--ps-muted);
  border: 1px solid var(--ps-line);
  opacity: 1;
  cursor: not-allowed;
}

/* ---------- Bottom nav ---------- */
html[data-theme] body.ps-pos .nav { background: var(--ps-bg-elev); }
html[data-theme] body.ps-pos .nav a,
html[data-theme] body.ps-pos .nav button:not(.fab) {
  padding: 8px 12px;
  border-radius: var(--ps-radius-control);
  font-size: 12.5px;
  font-weight: 500;
  transition: color 120ms ease, background-color 120ms ease;
}
html[data-theme] body.ps-pos .nav a:hover,
html[data-theme] body.ps-pos .nav button:not(.fab):hover { color: var(--ps-text); background: var(--ps-row); }
html[data-theme] body.ps-pos .nav a.on,
html[data-theme] body.ps-pos .nav button.on {
  color: var(--ps-text);
  font-weight: 700;
  background: var(--ps-yellow-soft);
}

/* =====================================================================
 * Phase 4: pages with their own colours. Overrides only; page files are
 * left alone (most carry the owner's uncommitted work). Print documents
 * (receipts, slips, PDFs) stay black on white on purpose.
 * ===================================================================== */

/* ---------- Admin Home shortcut tiles: neutral cards, each tile's own colour as a left stripe ----------
 * Colours are inline per tile (admin_dashboard.php). Same stripe technique as the till's category tabs. */
html[data-theme] body.ps-app .ps-tile {
  min-height: 96px;
  padding: 16px;
  border: 0;
  border-left: 6px solid transparent;
  border-radius: var(--ps-radius-card);
  background-clip: border-box;
  box-shadow: inset 0 0 0 1px var(--ps-line), inset 0 0 0 999px var(--ps-card);
  color: var(--ps-text) !important; /* ps-theme sets #fff !important */
  font-size: 15px;
  font-weight: 600;
  filter: none;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
html[data-theme] body.ps-app .ps-tile span {
  color: var(--ps-muted);
  font-size: 13px;
  font-weight: 400;
}
html[data-theme] body.ps-app .ps-tile:hover {
  filter: none;
  box-shadow: inset 0 0 0 1px var(--ps-line-strong), inset 0 0 0 999px var(--ps-card-2);
}
html[data-theme] body.ps-app .ps-tile:active { transform: translateY(1px); }
html[data-theme] body.ps-app .ps-tile:focus-visible {
  outline: 2px solid var(--ps-focus);
  outline-offset: 2px;
}

/* ---------- Admin Home: initials when the company has not uploaded a logo ---------- */
html[data-theme] body.ps-app .ps-dash-logo--initials {
  width: 88px;
  height: 88px;
  padding: 0;
  background: var(--ps-card-2);
  color: var(--ps-text);
  font-family: var(--ps-font-display) !important;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- Shared alerts and banners still carrying the old rgba pinks/greens/blues ---------- */
html[data-theme] body.ps-app .ps-alert-destructive,
html[data-theme] body.ps-app .error:not(:empty) {
  background: color-mix(in oklab, var(--ps-danger) 10%, transparent);
  border-color: color-mix(in oklab, var(--ps-danger) 32%, transparent);
  color: var(--ps-danger);
}
html[data-theme] body.ps-app .ps-alert-warn {
  background: color-mix(in oklab, var(--ps-warn) 12%, transparent);
  border-color: color-mix(in oklab, var(--ps-warn) 35%, transparent);
  color: var(--ps-warn);
}
html[data-theme] body.ps-app .ps-alert-success,
html[data-theme] body.ps-app .success:not(:empty) {
  background: color-mix(in oklab, var(--ps-green) 10%, transparent);
  border-color: color-mix(in oklab, var(--ps-green) 32%, transparent);
  color: var(--ps-green);
}
html[data-theme] body.ps-app .ps-platform-banner {
  border-color: color-mix(in oklab, var(--ps-blue) 35%, var(--ps-line));
  border-left-color: var(--ps-blue);
  background: color-mix(in oklab, var(--ps-blue) 8%, var(--ps-card));
}

/* ---------- Page-level colours (doubled .ps-app beats the pages' own <style> blocks) ---------- */
/* Profit report: chart, KPI boxes, loss rows, legend swatches */
html[data-theme] body.ps-app.ps-app .pr-kpis div { border-color: var(--ps-line); border-radius: var(--ps-radius-control); }
html[data-theme] body.ps-app.ps-app .pr-bar { fill: var(--ps-green); }
html[data-theme] body.ps-app.ps-app .pr-neg { fill: var(--ps-danger); }
html[data-theme] body.ps-app.ps-app .pr-line { stroke: var(--ps-yellow); }
html[data-theme] body.ps-app.ps-app .pr-axis { stroke: var(--ps-line-strong); }
html[data-theme] body.ps-app.ps-app .pr-tick { fill: var(--ps-muted); }
html[data-theme] body.ps-app.ps-app tr.neg td { color: var(--ps-danger); }
html[data-theme] body.ps-app.ps-app .pr-legend i[style*="178a43"] { background: var(--ps-green) !important; }
html[data-theme] body.ps-app.ps-app .pr-legend i[style*="c2410c"] { background: var(--ps-danger) !important; }
html[data-theme] body.ps-app.ps-app .pr-legend i[style*="f5b400"] { background: var(--ps-yellow) !important; }
/* Stock take records: gains and losses */
html[data-theme] body.ps-app.ps-app .str-neg { color: var(--ps-danger); }
html[data-theme] body.ps-app.ps-app .str-pos { color: var(--ps-green); }
/* Packs: warning text was raw yellow (unreadable on white) */
html[data-theme] body.ps-app.ps-app .pk-warn { color: var(--ps-warn); }
/* Code/log boxes with an inline light-grey background were unreadable in dark mode (e.g. Backup & Recovery) */
html[data-theme] body.ps-app pre[style*="background"] {
  background: var(--ps-card-2) !important;
  color: var(--ps-text);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-control);
}
/* Till: "till open N days" warning; ajax_pos.php's JS sets a fixed dark orange inline, hence !important */
html[data-theme] body.ps-pos.ps-pos .till-stale-warning {
  background: color-mix(in oklab, var(--ps-warn) 12%, transparent) !important;
  border: 1px solid color-mix(in oklab, var(--ps-warn) 35%, transparent) !important;
  color: var(--ps-warn) !important;
}
/* Quotation item search dropdown */
html[data-theme] body.ps-app.ps-app .q-results {
  border-color: var(--ps-line);
  border-radius: var(--ps-radius-control);
  box-shadow: var(--ps-shadow);
}
html[data-theme] body.ps-app.ps-app .q-results button:hover,
html[data-theme] body.ps-app.ps-app .q-results button:focus { background: var(--ps-row); }

/* =====================================================================
 * Consistency pass (owner review): the login's faint glow behind every
 * page, and filter bars that line up on one baseline.
 * ===================================================================== */

/* ---------- The login's faint radial glow at the top of every page ---------- */
html[data-theme="dark"] { --ps-glow: oklch(77% 0.10 274 / 0.10); }
html[data-theme="light"] { --ps-glow: oklch(80.5% 0.165 80 / 0.10); }
html[data-theme] body.ps-app,
html[data-theme] body.ps-pos {
  background:
    radial-gradient(60rem 30rem at 40% 0, var(--ps-glow), transparent 70%) no-repeat fixed,
    var(--ps-bg);
}
/* the shell and main column painted their own solid --ps-bg over it */
html[data-theme] body.ps-app .ps-shell,
html[data-theme] body.ps-app .ps-main { background: transparent; }
/* sticky top bar as slate glass (Dusk: the nav turns to glass over content), so the glow shows through */
html[data-theme] body.ps-app .ps-top {
  background: color-mix(in oklab, var(--ps-top) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}

/* ---------- Filter bars: fields, buttons and links on one bottom line ----------
 * Pattern: <form class="audit-filters|filters|…-toolbar|filter-form"> with <div><label/><input/></div>
 * wrappers. ps-theme centred the columns, so a button without a label floated mid-row. */
html[data-theme] body.ps-app.ps-app form:is(.audit-filters, .cc-filters, .filters, [class*="toolbar"], .filter-form, .search-form) {
  align-items: end;
  column-gap: var(--ps-space-3);
  row-gap: var(--ps-space-3);
}
html[data-theme] body.ps-app.ps-app form:is(.audit-filters, .cc-filters, .filters, [class*="toolbar"], .filter-form, .search-form) > div {
  align-self: end;
  margin: 0;
}
/* field columns share the row (grow and shrink); button/link groups keep their natural width */
html[data-theme] body.ps-app.ps-app form:is(.audit-filters, .cc-filters, .filters, [class*="toolbar"], .filter-form, .search-form) > div:has(input:not([type="hidden"]), select, textarea) {
  flex: 1 1 11rem;
  min-width: 0;
}
html[data-theme] body.ps-app.ps-app form:is(.audit-filters, .cc-filters, .filters, [class*="toolbar"], .filter-form, .search-form) > div:has(input:not([type="hidden"]), select, textarea) :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
}
html[data-theme] body.ps-app.ps-app form:is(.audit-filters, .cc-filters, .filters, [class*="toolbar"], .filter-form, .search-form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, .ps-select-trigger, button, a.ps-btn) {
  height: 40px;
  min-height: 40px;
  margin: 0;
}
html[data-theme] body.ps-app.ps-app form:is(.audit-filters, .cc-filters, .filters, [class*="toolbar"], .filter-form, .search-form) label {
  margin: 0 0 var(--ps-space-2);
}
/* a wrapper holding only buttons/links: same 40px line as the fields */
html[data-theme] body.ps-app.ps-app form:is(.audit-filters, .cc-filters, .filters, [class*="toolbar"], .filter-form, .search-form) > div:not(:has(input:not([type="hidden"]), select, textarea, label)) {
  display: flex;
  flex: 0 0 auto; /* ps-theme gave every wrapper flex: 1 1 180px, squeezing button groups */
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ps-space-2);
  min-height: 40px;
}
/* link groups beside a filter ("Back to receipts | New receipt"): outline buttons, text dividers hidden */
html[data-theme] body.ps-app.ps-app form:is(.audit-filters, .cc-filters, .filters, [class*="toolbar"], .filter-form, .search-form) > div:not(:has(input:not([type="hidden"]), select, textarea, label, button)):has(> a) {
  font-size: 0;
  flex-wrap: nowrap;
  margin-left: auto;
  justify-self: end;
}
html[data-theme] body.ps-app.ps-app form:is(.audit-filters, .cc-filters, .filters, [class*="toolbar"], .filter-form, .search-form) > div:not(:has(input:not([type="hidden"]), select, textarea, label)) > a:not(.ps-btn) {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--ps-space-4);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-control);
  background: var(--ps-card);
  color: var(--ps-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease;
}
html[data-theme] body.ps-app.ps-app form:is(.audit-filters, .cc-filters, .filters, [class*="toolbar"], .filter-form, .search-form) > div:not(:has(input:not([type="hidden"]), select, textarea, label)) > a:not(.ps-btn):hover {
  background: var(--ps-card-2);
  border-color: var(--ps-line-strong);
}

/* ---------- Filter forms without wrapper divs (GET forms: filters and searches) ----------
 * Two more markup patterns exist besides <div><label/><input/></div>:
 *   wrapped:  <label>From <input></label>            (e.g. Sales Reports)
 *   loose:    <label>From</label><input> siblings     (e.g. All Receipts, Income Statement)
 * Both get: label above field, every control on one 40px bottom line, wrapping when full.
 * Scope: GET forms with no textarea or file input, not inside a table cell, not .ps-form-stack. */
html[data-theme] body.ps-app.ps-app form[method="get" i]:not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: var(--ps-space-3);
  row-gap: var(--ps-space-3);
}
/* wrapped pattern: the label becomes a two-row stack, its text above its control */
html[data-theme] body.ps-app.ps-app form[method="get" i]:not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form) > label:where(:has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, .ps-select)) {
  display: grid;
  gap: var(--ps-space-2);
  flex: 1 1 8.5rem;
  min-width: 0;
  margin: 0;
  color: var(--ps-muted);
  font-size: 13px;
  font-weight: 500;
}
/* minimum widths by field type, so dropdown values and dates stay readable */
html[data-theme] body.ps-app.ps-app form[method="get" i]:not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form) > label:has(.ps-select, select) { flex: 1.8 1 12.5rem; }
html[data-theme] body.ps-app.ps-app form[method="get" i]:not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form) > label:has(input[type="date"]) { flex-basis: 9rem; }
html[data-theme] body.ps-app.ps-app form[method="get" i]:not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form) > label:has(input[type="text"], input[type="search"], input[type="number"]) { flex-basis: 5.5rem; }
html[data-theme] body.ps-app.ps-app form[method="get" i]:not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form) > label > :is(input, select, .ps-select) {
  width: 100%;
  min-width: 0;
  margin: 0;
}
/* every control and action on the same 40px line */
html[data-theme] body.ps-app.ps-app form[method="get" i]:not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, .ps-select-trigger, button) {
  height: 40px;
  min-height: 40px;
}
html[data-theme] body.ps-app.ps-app form[method="get" i]:not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form) > :is(button, input[type="submit"], a) {
  flex: 0 0 auto;
  margin: 0;
}
html[data-theme] body.ps-app.ps-app form[method="get" i]:not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form) > a:not(.ps-btn) {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--ps-space-4);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-control);
  background: var(--ps-card);
  color: var(--ps-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
html[data-theme] body.ps-app.ps-app form[method="get" i]:not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form) > a:not(.ps-btn):hover {
  background: var(--ps-card-2);
  border-color: var(--ps-line-strong);
}
/* loose pattern: a two-row grid, labels on row 1 and their controls straight below on row 2 */
html[data-theme] body.ps-app.ps-app form[method="get" i]:not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form):has(> label[for], > label.ps-label) {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  grid-auto-columns: minmax(0, max-content);
  justify-content: start;
  align-items: end;
  column-gap: var(--ps-space-4);
  row-gap: var(--ps-space-2);
}
html[data-theme] body.ps-app.ps-app form[method="get" i]:not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form):has(> label[for], > label.ps-label) > label:not(:has(input, select, .ps-select)) {
  grid-row: 1;
  margin: 0;
  color: var(--ps-muted);
  font-size: 13px;
  font-weight: 500;
}
html[data-theme] body.ps-app.ps-app form[method="get" i]:not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form):has(> label[for], > label.ps-label) > :not(label):not([type="hidden"]) {
  grid-row: 2;
  min-width: 12rem;
}
html[data-theme] body.ps-app.ps-app form[method="get" i]:not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form):has(> label[for], > label.ps-label) > :is(button, input[type="submit"], a) { min-width: 0; }

/* ps-theme forces a two-column "label | field" grid (display and gap !important) on .filter-form and
 * .ps-form-inline inside cards. For filter forms we override just those two properties, so these
 * also get labels above and one control line. The !important matches theirs; nothing else uses it. */
html[data-theme] body.ps-app.ps-app form:is([method="get" i], .filter-form, .ps-form-inline, .cm-filter):not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form):not(:has(> label[for], > label.ps-label)) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ps-space-3) !important;
}
html[data-theme] body.ps-app.ps-app form:is([method="get" i], .filter-form, .ps-form-inline, .cm-filter):not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form):has(> label[for], > label.ps-label) {
  display: grid !important;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-template-rows: auto auto;
  grid-auto-columns: minmax(0, max-content);
  justify-content: start;
  align-items: end;
  gap: var(--ps-space-2) var(--ps-space-3) !important;
}
html[data-theme] body.ps-app.ps-app form:is([method="get" i], .filter-form, .ps-form-inline, .cm-filter):not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form):has(> label[for], > label.ps-label) > label:not(:has(input, select, .ps-select)) {
  grid-row: 1;
  grid-column: auto;
  margin: 0;
  color: var(--ps-muted);
  font-size: 13px;
  font-weight: 500;
}
html[data-theme] body.ps-app.ps-app form:is([method="get" i], .filter-form, .ps-form-inline, .cm-filter):not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form):has(> label[for], > label.ps-label) > :not(label):not([type="hidden"]) {
  grid-row: 2;
  grid-column: auto;
  justify-self: stretch;
  min-width: 12rem;
  margin: 0;
}
html[data-theme] body.ps-app.ps-app form:is([method="get" i], .filter-form, .ps-form-inline, .cm-filter):not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form):has(> label[for], > label.ps-label) > :is(button, input[type="submit"], a) {
  min-width: 0;
  justify-self: start;
}
html[data-theme] body.ps-app.ps-app form:is([method="get" i], .filter-form, .ps-form-inline, .cm-filter):not(:has(textarea, input[type="file"])):not(.ps-form-stack):not(td form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .ps-select-trigger, button, a.ps-btn) {
  height: 40px;
  min-height: 40px;
}

/* custom dropdown text stays on one line (it wrapped to two inside 40px triggers) */
html[data-theme] body.ps-app .ps-select-trigger .ps-select-value {
  overflow: clip;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ---------- KPI rows: one long note no longer stretches the whole row ----------
 * e.g. Management Dashboard > Inventory > Stock value carries a ~70-word valuation note.
 * Notes clamp to three lines (screen readers always get all of it). No hover expansion: it made the row jump. */
html[data-theme] body.ps-app .ps-kpi { border-radius: var(--ps-radius-card); }
html[data-theme] body.ps-app .ps-kpi-sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: clip;
  font-size: 12.5px;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body:is(.ps-app, .ps-pos) * { transition-duration: 0ms !important; }
  html[data-theme] body:is(.ps-app, .ps-pos) :is(button, .ps-btn):active { transform: none !important; }
}

/* ---------- Split payment rows on the till payment sheet (2026-11-05) ---------- */
html[data-theme] body.ps-pos .split-rows { display: grid; gap: 12px; margin-top: 12px; }
html[data-theme] body.ps-pos .split-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-control);
  background: var(--ps-card-2);
}
html[data-theme] body.ps-pos .split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
html[data-theme] body.ps-pos .split-grid:not(:has(select + select)) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; }
html[data-theme] body.ps-pos .split-remove { min-width: 40px; padding-inline: 12px; }
html[data-theme] body.ps-pos .split-add { margin-top: 12px; width: 100%; }
html[data-theme] body.ps-pos .split-add[hidden] { display: none !important; }
@media (max-width: 480px) {
  html[data-theme] body.ps-pos .split-grid { grid-template-columns: 1fr 1fr; }
}


/* ---------- Till: the same custom dropdown as the admin pages (2026-11-05) ----------
 * Generated from the .ps-select rules in ps-theme.css (body.ps-app -> body.ps-pos), so the payment sheet's method /
 * currency / change pickers open the modern listbox instead of the browser's native list. ps-theme.js enhances them. */
/* Custom listbox. The span takes the select's grid/flex slot; the native control stays in the form. */
html[data-theme] body.ps-pos .ps-select {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  width: auto;
  min-width: min(180px, 100%);
  max-width: 100%;
}
html[data-theme] body.ps-pos .modal .ps-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
html[data-theme] body.ps-pos select.ps-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  max-width: none;
  padding: 0;
  margin: -1px;
  overflow: clip;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
html[data-theme] body.ps-pos .ps-select-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  height: auto;
  margin: 0;
  padding: 8px 12px;
  background: var(--ps-input);
  color: var(--ps-text);
  border: 1px solid var(--ps-line);
  border-radius: 8px;
  box-shadow: none;
  font-family: var(--ps-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
html[data-theme] body.ps-pos .ps-select-trigger:hover,
html[data-theme] body.ps-pos .ps-select-option:hover {
  filter: none;
}
html[data-theme] body.ps-pos .ps-select-trigger:hover {
  background: var(--ps-input);
  border-color: var(--ps-line);
}
html[data-theme] body.ps-pos .ps-select-trigger:focus,
html[data-theme] body.ps-pos .ps-select-trigger:focus-visible,
html[data-theme] body.ps-pos .ps-select.is-open .ps-select-trigger {
  outline: 2px solid var(--ps-yellow);
  outline-offset: 1px;
  border-color: var(--ps-yellow);
}
html[data-theme] body.ps-pos .ps-select-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
html[data-theme] body.ps-pos .ps-select-value {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: left;
}
html[data-theme] body.ps-pos .ps-select-trigger.is-placeholder {
  color: var(--ps-muted);
}
html[data-theme] body.ps-pos .ps-select-chevron {
  display: inline-flex;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--ps-muted);
}
html[data-theme] body.ps-pos .ps-select-chevron svg {
  display: block;
  width: 16px;
  height: 16px;
}
html[data-theme] body.ps-pos .ps-select-panel {
  position: fixed;
  z-index: 10050;
  box-sizing: border-box;
  margin: 0;
  padding: 4px;
  background: var(--ps-card);
  color: var(--ps-text);
  border: 1px solid var(--ps-line);
  border-radius: 8px;
  box-shadow: var(--ps-shadow);
  max-height: 240px;
  overflow-x: clip;
  overflow-y: auto;
}
html[data-theme] body.ps-pos .ps-select-panel[hidden] {
  display: none;
}
html[data-theme] body.ps-pos .ps-select-group {
  padding: 8px 12px 4px;
  font-family: var(--ps-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--ps-muted);
}
html[data-theme] body.ps-pos .ps-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 8px 12px;
  background: transparent;
  color: var(--ps-text);
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  font-family: var(--ps-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  overflow: visible;
  cursor: pointer;
}
html[data-theme] body.ps-pos .ps-select-option-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: left;
}
html[data-theme] body.ps-pos .ps-select-option:hover,
html[data-theme] body.ps-pos .ps-select-option.is-active {
  background: var(--ps-row);
  color: var(--ps-text);
  filter: none;
}
html[data-theme] body.ps-pos .ps-select-option.is-selected {
  font-weight: 600;
}
html[data-theme] body.ps-pos .ps-select-check {
  display: inline-flex;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--ps-text);
  opacity: 0;
}
html[data-theme] body.ps-pos .ps-select-option.is-selected .ps-select-check {
  opacity: 1;
}
html[data-theme] body.ps-pos .ps-select-check svg {
  display: block;
  width: 16px;
  height: 16px;
}
html[data-theme] body.ps-pos .pay-sheet .ps-select { display: flex; width: 100%; min-width: 0; }
html[data-theme] body.ps-pos .split-grid .ps-select { min-width: 0; }

/* ---------- 2026-11-05: held (parked) sales on the till ---------- */
html[data-theme] body.ps-pos .order-hold {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
html[data-theme] body.ps-pos .order-hold[hidden],
html[data-theme] body.ps-pos .order-hold .btn[hidden] { display: none !important; }
html[data-theme] body.ps-pos .order-hold .btn:only-child,
html[data-theme] body.ps-pos .order-hold .btn[hidden] + .btn,
html[data-theme] body.ps-pos .order-hold .btn:has(+ .btn[hidden]) { grid-column: 1 / -1; }
html[data-theme] body.ps-pos .order-hold .btn {
  min-height: 40px;
  margin-top: 0;
  padding: 4px 8px;
  border-radius: var(--ps-radius-control);
  font-size: 14px;
  font-weight: 600;
}
html[data-theme] body.ps-pos #heldSalesBtn {
  color: var(--ps-text);
  border-color: color-mix(in oklab, var(--ps-yellow) 55%, var(--ps-line));
}
html[data-theme] body.ps-pos .held-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
  max-height: min(60vh, 460px);
  overflow-y: auto;
}
html[data-theme] body.ps-pos .held-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-control);
  background: var(--ps-card);
}
html[data-theme] body.ps-pos .held-row .hint { margin: 2px 0 0; }
html[data-theme] body.ps-pos .held-title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] body.ps-pos .held-row .btn {
  width: auto;
  min-height: 38px;
  margin-top: 0;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 600;
}
html[data-theme] body.ps-pos .held-row .held-resume {
  background: var(--ps-yellow);
  color: var(--ps-yellow-ink);
  border: 0;
}
html[data-theme] body.ps-pos .held-row .held-resume:hover:not(:disabled) { background: var(--ps-yellow-hi); }