/* ═══════════════════════════════════════════════════════════════════
   RetailPower Design System — Premium Egyptian Gold Dark Theme
   ═══════════════════════════════════════════════════════════════════ */

/* ─── CSS DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Z-Index Hierarchy Variables */
  --z-back-to-top: 10;
  --z-chart: 20;
  --z-sidebar: 100;
  --z-header: 250;
  --z-dropdown: 200;
  --z-drawer: 500;
  --z-modal: 1000;
  --z-toast: 2000;

  /* Theme Adjustable Variables */
  --sidebar-bg:         var(--bg-secondary);
  --sidebar-text:       var(--text-secondary);
  --sidebar-text-hover: var(--text-primary);
  --sidebar-text-active:var(--accent-gold);
  --sidebar-border:     var(--border-color);
  --sidebar-label:      var(--text-muted);
  --nav-group-label-bg: rgba(255, 255, 255, 0.04);
  --sidebar-footer-bg:  rgba(0, 0, 0, 0.15);

  --header-bg:          rgba(18, 23, 30, 0.97);
  --header-text:        var(--text-primary);
  --btn-primary-text:   #000000;

  /* A printed paper is white with dark ink in every theme (the A4 statement and the receipt paper of customer credit, TASK-2026-156): its colours are named once here. */
  --paper-bg: #ffffff;
  --paper-ink: #111111;
  --paper-ink-2: #444444;
  --paper-ink-3: #555555;
  --paper-ink-4: #666666;
  --paper-rule: #222222;
  --paper-dash: #888888;
  --paper-cell: #aaaaaa;
  --paper-line: #cccccc;
  --paper-line-soft: #dddddd;
  --paper-edge: #cfcfcf;
  --paper-head: #e8e8e8;
  --credit-scrim: rgba(0, 0, 0, 0.35);

  --bg-primary:    #0c1016;
  --bg-secondary:  #141a22;
  --bg-tertiary:   #1c2330;
  --bg-card:       rgba(20, 26, 34, 0.95);
  --bg-glass:      rgba(255, 255, 255, 0.04);
  --bg-hover:      rgba(240, 165, 0, 0.06);

  --accent-gold:       #f0a500;
  --accent-rgb:        240, 165, 0;   /* the accent as channels, for the rgba() component rules below */
  /* A filled block of accent that carries text on it. Identical to --accent-gold in
     every palette except retailpower-dark, where the accent splits: the readable step
     is too bright to sit behind white text (2.44, fails), so blocks use the deep one. */
  --accent-fill:       var(--accent-gold);
  --accent-gold-dark:  #cc8400;
  --accent-gold-light: #ffd04d;
  --accent-gold-glow:  rgba(240, 165, 0, 0.14);
  --accent-gold-bg:    rgba(240, 165, 0, 0.10);
  --accent-blue:       #1a6cf0;
  --accent-blue-light: #4d94f5;

  --color-success:     #2dd665;
  --color-success-bg:  rgba(45, 214, 101, 0.12);
  --color-danger:      #f25555;
  --color-danger-bg:   rgba(242, 85, 85, 0.12);
  --color-warning:     #f5a623;
  --color-warning-bg:  rgba(245, 166, 35, 0.12);
  --color-info:        #4cc3f5;
  --color-info-bg:     rgba(76, 195, 245, 0.12);
  --color-purple:      #a855f7;
  --color-purple-bg:   rgba(168, 85, 247, 0.12);

  --text-primary:   #e2e8f0;
  --text-secondary: #7d8a95;
  --text-muted:     #3d4654;
  --text-gold:      #f0a500;
  --text-inverse:   #ffffff;

  --border-color:   rgba(255, 255, 255, 0.06);
  --border-subtle:  rgba(255, 255, 255, 0.04);
  --border-active:  rgba(240, 165, 0, 0.45);
  --border-focus:   rgba(240, 165, 0, 0.45);

  --sidebar-width:     260px;
  --sidebar-collapsed: 68px;
  --header-height:     60px;
  /* 2px, not 8px: the owner asked for square corners to read as bookkeeping rather
     than consumer software. All five steps are the same number on purpose — the
     scale exists so a future decision can separate them, not because it does today. */
  --radius:     2px;
  --radius-sm:  2px;
  --radius-md:  2px;
  --radius-lg:  2px;
  --radius-xl:  2px;

  /* These four were being asked for in four places and had never been declared, so every one of those
     `gap` and `padding-inline` declarations was invalid and silently dropped — which is one of the
     reasons the owner reported text sitting too close together. Declaring them makes the rules that
     already exist do what they were written to do. */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.15);
  --shadow-md:   0 2px 4px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.25);
  --shadow-lg:   0 4px 8px rgba(0,0,0,0.15), 0 16px 32px rgba(0,0,0,0.3);
  --shadow-xl:   0 8px 16px rgba(0,0,0,0.2), 0 24px 48px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 20px rgba(240,165,0,0.10), 0 0 40px rgba(240,165,0,0.05);

  /* Motion (TASK-2026-163 S3): one curve, three durations, and only colour moves on hover. `all` transitions are
     retired: --transition names colour properties, so the hundreds of rules that read it stop animating
     size, shadow and position. */
  --transition:      color var(--duration-quick) var(--ease-standard), background-color var(--duration-quick) var(--ease-standard), border-color var(--duration-quick) var(--ease-standard);
  --transition-slow: color var(--duration-calm) var(--ease-standard), background-color var(--duration-calm) var(--ease-standard), border-color var(--duration-calm) var(--ease-standard);
  --motion-calm: var(--duration-calm);
  --motion-calm-ms: 250;
  /* Control heights are fixed pixels (tokens.css): they do not grow with the person's text size. The old recipe
     (font size x line height + padding + borders) is gone. */
  --control-height-compact: var(--control-sm);
  --control-font-size: 1rem;
  --control-padding-block: 0px;
  --control-line-height: 1.6;
  --control-height: var(--control);
  /* The type scale: eight sizes in rem on the 14px base, so the text-size setting scales them all together. Almarai
     has 400 and 700 only: a 500 draws as 400 and a 600 as 700, nothing is faked. */
  --fs-caption:   0.8571rem;   /* 12px: timestamps, helper lines, chart axes */
  --fs-small:     0.9286rem;   /* 13px: labels, table heads, badges */
  --fs-body:      1rem;        /* 14px: body, cells, inputs, buttons */
  --fs-body-lg:   1.1429rem;   /* 16px: card and dialog titles at 700 */
  --fs-title:     1.4286rem;   /* 20px: section titles, the till total */
  --fs-heading:   1.7143rem;   /* 24px: page titles */
  --fs-display-s: 2.2857rem;   /* 32px: website section headings */
  --fs-display:   3.4286rem;   /* 48px: website hero, never inside the app */
  --floating-panel-gap: 8;
  --floating-panel-gutter: 12;
  --dialog-viewport-gutter: 1.25rem;
  --dialog-max-block-size: calc(calc(100 * var(--vh)) - (var(--dialog-viewport-gutter) * 2));
  --dialog-inline-size-compact: 46rem;
  --dialog-inline-size-workspace: 62rem;
  --dialog-inline-size-wide: 74rem;
  --dialog-block-size-preview: min(calc(90 * var(--vh)), 52rem);
  --dialog-viewport-gutter-mobile: .5rem;
  --shell-compact-gap: .5rem;
  --shell-control-size: 2.25rem;
  --shell-header-control-size: 32px;
  --shell-tab-min-inline-size: 8.75rem;
  --shell-header-inline-padding: 1.5rem;
  --shell-header-inline-padding-mobile: .75rem;

  /* The dark themes set --border-color to 6% white, which disappears between two dark surfaces: the
     header, the sidebar and the page all ran together (TASK-2026-028 FR-032). A divider leans the same
     token towards the muted text colour, so it stays visible in the light themes too. */
  --border-divider: color-mix(in srgb, var(--border-color) 55%, var(--text-muted));
  /* Scrollbars were a 6px brand-gold sliver with no track, which reads as a stray stripe rather than
     something to grab (FR-032). */
  --scrollbar-size: 10px;
  --scrollbar-size-inner: 8px;
  --scrollbar-track: color-mix(in srgb, var(--bg-secondary) 65%, transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--text-muted) 90%, transparent);
  --scrollbar-thumb-hover: var(--text-secondary);

  /* Centralized Skeleton tokens */
  --sk-base:       rgba(255, 255, 255, 0.04);
  --sk-shine:      rgba(255, 255, 255, 0.08);
  --sk-shine-peak: rgba(240, 165, 0, 0.08);
}

/* ─── RESET & BASE ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.hidden { display: none !important; }

/* `scrollbar-color` inherits, so one declaration here reaches every scroll surface in the engines that
   have no WebKit pseudo-elements. The WebKit rules for the same bar are below (TASK-2026-028 FR-038). */
html {
  scroll-behavior: smooth;
  /* The person's text size scales the WHOLE screen like browser zoom (TASK-2026-163 look pass): the head script writes
     --text-zoom (the chosen even size from 10 to 20, over the default 14; 1 when nothing is written) and the root zooms by
     it, so controls, icons, spacing, tables, dialogs, popovers, toasts and charts all scale together. The root's own font
     size is therefore always 14px; zooming it is the only scaling (a size read from --font-base here would scale twice).
     A zoomed root does not shrink the viewport units, so --vh and --vw are the window's 1vh and 1vw in zoomed pixels:
     write a viewport length as calc(100 * var(--vh)), never 100vh. static/js/ui_zoom.js puts rectangles, pointer positions
     and the window size into the same pixels for the scripts. */
  font-size: 14px;
  zoom: var(--text-zoom, 1);
  --vh: calc(1vh / var(--text-zoom, 1));
  --dvh: calc(1dvh / var(--text-zoom, 1));
  --vw: calc(1vw / var(--text-zoom, 1));
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
@media print {
  /* A printed page is laid out at its own size, whatever the screen's text size is. */
  html { zoom: 1; --vh: 1vh; --dvh: 1dvh; --vw: 1vw; }
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: calc(100 * var(--vh));
  /* No lock here. It used to read `overflow: hidden` unconditionally — "only #main-content
     scrolls" — and that is true of the desktop shell, where `.app-shell` and `.main-wrapper` are
     both `height: 100vh` so `.main-content` has a definite height to scroll inside.

     Below 769px that block does not apply: the shell has `min-height` and no height, so
     `.main-content` is a flex child that grows to fit its content and its `overflow-y: auto` never
     engages. With the body locked and `.main-wrapper` hidden on top of it, **everything past the
     first screen was clipped and unreachable on a phone** — no scrollbar, no wheel, no touch, which
     is exactly what the shop reported. The lock now lives with the layout that earns it. */
  -webkit-font-smoothing: antialiased;
}

/* Text is selectable and copyable everywhere (TASK-2026-028 FR-001). The few controls that keep
   `user-select: none` are click targets only (nav group labels, drag handles, row pickers), where a
   stray double-click selection would fight the interaction. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
textarea,
[contenteditable="true"],
.selectable-text {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

/* Form controls do not inherit the page font by default — the search box, filter bars, modal fields
   and dropdowns would otherwise fall back to the browser font (TASK-2026-028 FR-004). */
input,
textarea,
select,
button,
optgroup,
option,
.filter-bar,
.modal,
.modal-overlay {
  font-family: var(--font-sans, inherit);
}

/* Make interactive controls show pointer cursor cleanly */
button,
a,
select,
label,
.btn,
.nav-item,
.tab-btn,
.card-header,
.theme-card {
  cursor: pointer;
}

/* Custom scrollbar — one neutral bar everywhere, from the shared tokens */
::-webkit-scrollbar { width: var(--scrollbar-size-inner); height: var(--scrollbar-size-inner); }
::-webkit-scrollbar-track { background: transparent; border-radius: 2px; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: var(--field); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

::selection { background: var(--tint); color: var(--teal-400); }

a { color: var(--brand); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--brand); }
a:not([class]):hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  font-weight: 700;
  line-height: 1.4;
}
h1 { font-size: var(--fs-heading); }
h2 { font-size: var(--fs-title); }
h3 { font-size: var(--fs-body-lg); }
h4 { font-size: var(--fs-body); }

p { color: var(--muted); line-height: 1.7; }

img { max-width: 100%; display: block; }

/* ─── APP LAYOUT ────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: calc(100 * var(--vh));
  transition: all 0.3s ease;
  /* Fade-in on load — starts invisible, becomes visible after loader closes */
  opacity: 0;
  transition: opacity 0.6s ease, all 0.3s ease;
}

/* Applied by showApp() after the loader fades out */
.app-shell.app-visible {
  opacity: 1;
}

.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100 * var(--vh));
  min-width: 0; /* Prevent flex item expanding beyond viewport — required for inner scroll */
  overflow: hidden; /* Constrains main-content width so overflow-x:auto triggers properly */
  position: relative;
  z-index: 200; /* Desktop layer sits above sidebar z-index 100 */
}

@media (min-width: 769px) {
  /* The desktop shell: a fixed frame with one scrolling pane inside it. The body lock belongs here,
     with the two definite heights that make it work, and nowhere else. */
  body { overflow: hidden; }
  .app-shell {
    height: calc(100 * var(--vh));
    overflow: hidden;
  }
  .main-wrapper {
    height: calc(100 * var(--vh));
    overflow: hidden; /* Must stay hidden so main-content scroll is contained */
  }
}

/* Inventory Control Center — Arabic-first visual foundation
   ================================================================== */
.inventory-control {
  --ic-surface: color-mix(in srgb, var(--surface) 92%, transparent);
  --ic-border: color-mix(in srgb, var(--line) 78%, transparent);
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding-bottom: 28px;
}

.inventory-heading-line {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: .4rem;
}

.inventory-heading-line > h2,
.inventory-heading-line > h3,
.inventory-heading-line > h4,
.inventory-heading-line > strong { min-width: 0; }

.context-info {
  position: relative;
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .72rem;
  cursor: help;
}

.context-info:hover,
.context-info:focus,
.context-info:focus-visible {
  border: 0;
  outline: none;
  background: transparent;
  color: var(--brand);
  box-shadow: none;
}

.context-info::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + .45rem);
  inset-inline-start: auto;
  inset-inline-end: auto;
  right: auto;
  left: 50%;
  width: min(18rem, calc(55 * var(--vw)));
  max-width: none;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-float);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.55;
  text-align: start;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-.2rem);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: var(--z-toast);
}

.context-info:hover::after,
.context-info:focus::after,
.context-info:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.inventory-control-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--ic-border);
  border-radius: 2px;
  background: var(--ic-surface);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
}

.inventory-control-hero-copy,
.inventory-control-health {
  position: relative;
  z-index: 1;
}

.inventory-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: var(--brand);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.inventory-control-hero h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.25rem, calc(1.8 * var(--vw)), 1.7rem);
  font-weight: 850;
}

.inventory-control-hero p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.75;
}

.inventory-control-health {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 265px;
  padding: .7rem .85rem;
  border: 1px solid var(--ic-border);
  border-inline-start: 3px solid var(--success);
  border-radius: 2px;
  background: var(--bg);
}

.inventory-control-health strong,
.inventory-control-health small {
  display: block;
}

.inventory-control-health strong {
  margin-bottom: 0;
  color: var(--text);
  font-size: .82rem;
}

.inventory-control-health small {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.5;
}

.inventory-command-bar {
  display: grid;
  grid-template-columns: minmax(230px, 1.05fr) minmax(380px, 1.6fr) minmax(240px, 1.1fr);
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--ic-border);
  border-radius: 2px;
  background: var(--ic-surface);
}

.inventory-command-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  flex-wrap: wrap;
  padding: 21px 10px 7px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
}

.inventory-command-label {
  position: absolute;
  inset-inline-start: 11px;
  top: 5px;
  color: var(--text-muted);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.inventory-command-group .btn {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 36px;
  padding: 8px 11px;
  white-space: nowrap;
}

.inventory-command-documents {
  justify-content: flex-end;
}

.inventory-archive-btn:not(:disabled) {
  color: var(--danger);
}

.inventory-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(125px, 1fr));
  gap: 11px;
}

.inventory-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 15px;
  border: 1px solid var(--ic-border);
  border-radius: 2px;
  background: var(--ic-surface);
}

.inventory-kpi-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 2px;
  background: color-mix(in srgb, var(--brand) 9%, var(--bg));
  color: var(--brand);
  font-size: .95rem;
}

.inventory-kpi strong,
.inventory-kpi span:not(.inventory-kpi-icon) {
  position: relative;
  z-index: 1;
  display: block;
}

.inventory-kpi strong {
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.1;
}

.inventory-kpi span:not(.inventory-kpi-icon) {
  margin-top: 5px;
  color: var(--muted);
  overflow: hidden;
  font-size: .64rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-control-card {
  overflow: hidden;
  min-height: 440px;
  border: 1px solid var(--ic-border);
  border-radius: 2px;
  background: var(--ic-surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .11);
}

.inventory-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--ic-border);
  background: color-mix(in srgb, var(--bg) 45%, transparent);
}

.inventory-tab-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 2px 2px 0 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  cursor: pointer;
}

.inventory-tab-btn::after {
  content: '';
  position: absolute;
  inset-inline: 18px;
  bottom: -1px;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: transparent;
}

.inventory-tab-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--brand) 6%, transparent);
}

.inventory-tab-btn.active {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

.inventory-tab-btn.active::after {
  background: var(--brand);
}

.inventory-tab-content {
  padding: 16px;
}

.inventory-tab-toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
}

.inventory-tab-toolbar select {
  width: auto;
  min-width: 165px;
  min-height: 41px;
}

.inventory-search-box {
  position: relative;

  flex: 1;
  min-width: 230px;
}

.inventory-search-box > i {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  z-index: 1;
  color: var(--text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.inventory-search-box input {
  width: 100%;
  min-height: 41px;
  padding-inline-start: 40px;
}

.inventory-result-count {
  margin-inline-start: auto;
  color: var(--text-muted);
  font-size: .7rem;
  white-space: nowrap;
}

.inventory-selection-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: .75rem;
  min-height: 42px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.inventory-selection-summary > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.inventory-selection-summary.is-active {
  border-color: var(--brand);
  background: var(--tint, var(--surface));
}

.inventory-selection-summary.is-inactive {
  color: var(--text-muted);
}

.inventory-selection-summary.is-inactive svg {
  opacity: .45;
}

.inventory-data-table-wrap {
  max-height: min(calc(62 * var(--vh)), 680px);
  border: 1px solid var(--ic-border);
  border-radius: 2px;
}

.inventory-data-table {
  min-width: 940px;
}

.inventory-data-table thead {
  position: sticky;
  top: 0;
  z-index: 3;
}

.inventory-data-table th {
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .02em;
  white-space: nowrap;
}

.inventory-data-table td {
  vertical-align: middle;
  font-size: .76rem;
}

.inventory-data-table tbody tr {
  transition: background .18s ease, box-shadow .18s ease;
}

.inventory-data-table tbody tr:hover,
.inventory-data-table tbody tr.is-selected {
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
}

.inventory-data-table tbody tr.is-selected {
  box-shadow: inset 3px 0 0 var(--brand);
}

[dir="rtl"] .inventory-data-table tbody tr.is-selected {
  box-shadow: inset -3px 0 0 var(--brand);
}

.inventory-check-cell {
  width: 44px;
  text-align: center !important;
}

.inventory-check-cell input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}

.inventory-variant-pill,
.inventory-sku,
.inventory-stock-status,
.inventory-movement-type,
.inventory-stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 2px;
  white-space: nowrap;
}

.inventory-variant-pill {
  padding: 4px 8px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--muted);
  font-size: .69rem;
}

.inventory-sku {
  direction: ltr;
  padding: 4px 8px;
  border: 1px solid var(--ic-border);
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .67rem;
}

.inventory-quantity {
  font-size: .9rem;
}

.inventory-stock-status {
  padding: 4px 8px;
  font-size: .66rem;
  font-weight: 750;
}

.inventory-stock-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.inventory-stock-healthy { background: var(--success-tint); color: var(--success); }
.inventory-stock-healthy i { background: var(--success); }
.inventory-stock-low { background: var(--warning-tint); color: var(--warning); }
.inventory-stock-low i { background: var(--warning); }
.inventory-stock-out { background: var(--danger-tint); color: var(--danger); }
.inventory-stock-out i { background: var(--danger); }

.inventory-empty-state {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  text-align: center;
}

.inventory-empty-state > i {
  margin-bottom: 5px;
  color: var(--brand);
  font-size: 1.8rem;
  opacity: .7;
}

.inventory-empty-state strong {
  color: var(--text);
}

.inventory-empty-state span {
  font-size: .75rem;
}

.inventory-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 3px 0;
  color: var(--text-muted);
  font-size: .7rem;
}

.inventory-pagination > div {
  display: flex;
  gap: 7px;
}

.inventory-section-heading,
.inventory-workflow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.inventory-section-heading {
  margin-bottom: 18px;
  padding: 9px 4px;
}

.inventory-section-heading h3,
.inventory-workflow-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.08rem;
}

.inventory-section-heading p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .78rem;
}

.inventory-stage-badge {
  padding: 7px 10px;
  border: 1px solid rgba(96,165,250,.23);
  background: rgba(59,130,246,.08);
  color: #60a5fa;
  font-size: .65rem;
  font-weight: 700;
}

.inventory-count-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.inventory-count-mode {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 13px;
  min-height: 128px;
  padding: 18px;
  border: 1px solid var(--ic-border);
  border-radius: 2px;
  background: color-mix(in srgb, var(--bg) 53%, transparent);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.inventory-count-mode:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
}

.inventory-count-mode.selected {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--bg));
  box-shadow: 0 10px 28px rgba(var(--accent-rgb), .08);
}

.inventory-mode-letter {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 2px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  font-size: 1.15rem;
  font-weight: 900;
}

.inventory-mode-copy strong,
.inventory-mode-copy small,
.inventory-mode-copy em {
  display: block;
}

.inventory-mode-copy strong {
  margin-bottom: 6px;
  font-size: .88rem;
}

.inventory-mode-copy small {
  min-height: 36px;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.55;
}

.inventory-mode-copy em {
  margin-top: 8px;
  color: var(--brand);
  font-size: .62rem;
  font-style: normal;
  font-weight: 800;
}

.inventory-mode-metric {
  color: var(--text-muted);
  font-size: 1.1rem;
  font-weight: 850;
}

.inventory-mode-check {
  position: absolute;
  inset-inline-end: 11px;
  top: 10px;
  color: var(--brand);
  opacity: 0;
}

.inventory-count-mode.selected .inventory-mode-check {
  opacity: 1;
}

.inventory-workflow-panel {
  margin-top: 15px;
  padding: 20px;
  border: 1px solid var(--ic-border);
  border-radius: 2px;
  background: color-mix(in srgb, var(--bg) 48%, transparent);
}

.inventory-workflow-header {
  margin-bottom: 18px;
}

.inventory-workflow-steps {

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inventory-workflow-steps li {
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
}

.inventory-workflow-steps li > span {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .25);
  border-radius: 2px;
  color: var(--brand);
  font-size: .7rem;
  font-weight: 850;
}

.inventory-workflow-steps strong,
.inventory-workflow-steps small {
  display: block;
}

.inventory-count-history {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--ic-border);
  border-radius: 2px;
  background: var(--bg);
}

.inventory-count-modal { z-index: 99999; }
.inventory-count-setup-card { --inventory-dialog-inline-size: var(--dialog-inline-size-compact); }
.inventory-count-session-card {
  width: min(var(--dialog-inline-size-wide), calc(calc(100 * var(--vw)) - (var(--dialog-viewport-gutter) * 2)));
  max-height: var(--dialog-max-block-size);
}
.inventory-count-session-card .modal-body { overflow: auto; }

.inventory-count-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.inventory-count-scope,
.inventory-count-notes,
.inventory-count-blind-notice { grid-column: 1 / -1; }

.inventory-count-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.inventory-count-scope legend { margin-bottom: 8px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.inventory-count-scope label { display: flex; gap: 10px; padding: 13px; border: 1px solid var(--ic-border); border-radius: 2px; cursor: pointer; }
.inventory-count-scope label:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--bg)); }
.inventory-count-scope label.is-disabled { opacity: .48; cursor: not-allowed; }
.inventory-count-scope strong, .inventory-count-scope small { display: block; }
.inventory-count-scope small { margin-top: 4px; color: var(--text-muted); font-size: .67rem; }

.inventory-count-blind-notice {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-inline-start: 3px solid var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  color: var(--text);
}
.inventory-count-blind-notice svg { color: var(--brand); }
.inventory-count-blind-notice strong, .inventory-count-blind-notice small { display: block; }
.inventory-count-blind-notice small { margin-top: 3px; color: var(--muted); font-size: .69rem; }
/* Feature 005: the Counts-tab badge and the review screen's contest chips. Logical sides only. */
.inventory-tab-badge { margin-inline-start: 6px; }
.inventory-count-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.inventory-count-chips .badge { font-size: .66rem; }
.inventory-count-counters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; font-size: .7rem; color: var(--muted); }
.inventory-count-counters b { color: var(--text); font-variant-numeric: tabular-nums; }

.inventory-count-modal-status { display: inline-flex; align-items: center; padding: 5px 9px; border: 1px solid var(--ic-border); border-radius: 2px; color: var(--muted); font-size: .67rem; font-weight: 800; white-space: nowrap; }
.inventory-count-status-counting { border-color: color-mix(in srgb, var(--brand) 45%, var(--ic-border)); color: var(--brand); }
.inventory-count-status-submitted { border-color: color-mix(in srgb, var(--info) 45%, var(--ic-border)); color: var(--info); }
.inventory-count-status-approved { border-color: color-mix(in srgb, var(--success) 45%, var(--ic-border)); color: var(--success); }
.inventory-count-status-cancelled { border-color: color-mix(in srgb, var(--danger) 45%, var(--ic-border)); color: var(--danger); }

.inventory-count-session-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.inventory-count-session-summary span { padding: 10px 12px; border: 1px solid var(--ic-border); border-radius: 2px; }
.inventory-count-session-summary b { display: block; margin-bottom: 3px; color: var(--text); }
.inventory-count-session-summary span { color: var(--text-muted); font-size: .68rem; }
.inventory-count-table-wrap { max-height: calc(52 * var(--vh)); margin-top: 12px; }
.inventory-count-table th { position: sticky; top: 0; z-index: 2; background: var(--card); }
.inventory-count-table td small { display: block; margin-top: 3px; color: var(--text-muted); font-size: .63rem; }
.inventory-count-qty, .inventory-verify-qty { width: 88px; min-height: 36px; text-align: center; }
.inventory-count-review-row { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.inventory-count-difference.has-difference { color: var(--danger); font-weight: 800; }
.inventory-not-required { color: var(--text-muted); font-size: .67rem; }

@media (max-width: 760px) {
  .inventory-count-setup-grid,
  .inventory-count-scope { grid-template-columns: 1fr; }
  .inventory-count-session-summary { grid-template-columns: 1fr; }
}

.inventory-workflow-steps strong {
  margin-bottom: 4px;
  color: var(--text);
  font-size: .7rem;
}

.inventory-workflow-steps small {
  color: var(--text-muted);
  font-size: .6rem;
  line-height: 1.5;
}

.inventory-nowrap { white-space: nowrap; }
.inventory-cell-subtitle { display: block; margin-top: 4px; color: var(--text-muted); font-size: .63rem; }
.inventory-qty-in { color: #34d399; }
.inventory-qty-out { color: #fb7185; }
.inventory-movement-type { padding: 4px 8px; font-size: .65rem; font-weight: 750; }
.movement-sale { background: rgba(59,130,246,.1); color: #60a5fa; }
.movement-return { background: rgba(16,185,129,.1); color: #34d399; }
.movement-purchase { background: rgba(var(--accent-rgb), .1); color: var(--brand); }
.movement-transfer,
.movement-count,
.movement-correction,
.movement-adjustment {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
}

.inventory-audit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.inventory-audit-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  min-height: 170px;
  padding: 24px;
  border: 1px dashed var(--ic-border);
  border-radius: 2px;
  background: color-mix(in srgb, var(--bg) 45%, transparent);
}

.inventory-audit-card > span {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 2px;
  background: rgba(var(--accent-rgb), .1);
  color: var(--brand);
}

.inventory-audit-card strong {
  color: var(--text);
  font-size: .9rem;
}

.inventory-audit-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.7;
}

.inventory-audit-card-accent {
  border-style: solid;
  border-color: rgba(96,165,250,.2);
}

.inventory-audit-card-danger {
  border-style: solid;
  border-color: var(--danger);
  background: var(--danger-tint);
}

.inventory-audit-section {
  margin-block-start: 1rem;
}

.inventory-audit-section .inventory-section-heading p {
  color: var(--muted);
}

.inventory-print-modal {
  z-index: 14000;
}

.inventory-print-modal-card {
  width: min(var(--dialog-inline-size-wide), calc(calc(100 * var(--vw)) - (var(--dialog-viewport-gutter) * 2)));
  max-width: none;
  height: var(--dialog-block-size-preview);
}

.inventory-print-modal-card .modal-header h3 {
  margin: 0;
}

.inventory-print-modal-body {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}

.inventory-print-options {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.inventory-print-location-field {
  margin: 0 0 3px;
}

.inventory-print-location-field label {
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 800;
}

.inventory-print-location-field small {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: .63rem;
  line-height: 1.45;
}

.inventory-print-group-label {
  color: var(--text-muted);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.inventory-density-label { margin-top: 5px; }

.inventory-density-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.inventory-density-option {
  padding: 10px 8px;
  border: 1px solid var(--ic-border);
  border-radius: 2px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.inventory-density-option strong,
.inventory-density-option small { display: block; }
.inventory-density-option strong { font-size: .7rem; }
.inventory-density-option small { margin-top: 3px; color: var(--text-muted); font-size: .56rem; line-height: 1.4; }
.inventory-density-option.selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--bg)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }

.inventory-print-option {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--ic-border);
  border-radius: 2px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.inventory-print-option > i {
  grid-row: 1 / 3;
  margin-top: 3px;
  color: var(--brand);
}

.inventory-print-option strong,
.inventory-print-option small {
  display: block;
}

.inventory-print-option strong { font-size: .77rem; }
.inventory-print-option small { margin-top: 5px; color: var(--text-muted); font-size: .63rem; line-height: 1.5; }
.inventory-print-option.selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--bg)); }

.inventory-print-preview-shell {
  overflow: auto;
  display: grid;
  min-width: 0;
  place-items: start center;
  padding: 20px;
  border: 1px solid var(--ic-border);
  border-radius: 2px;
  background: #d7d9dd;
}

.inventory-print-status {
  align-self: stretch;
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--text-muted);
  text-align: center;
}

.inventory-print-status-error { color: var(--danger); }

.inventory-landscape-paper {
  width: 840px;
  min-height: 545px;
  padding: 22px 26px;
  background: #fff;
  color: #111;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
  font-family: Cairo, 'Segoe UI', Arial, sans-serif;
  transform-origin: top center;
}

.inventory-paper-header {
  display: grid;
  grid-template-columns: 105px 1fr 105px;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1.5px solid #222;
  text-align: center;
}

.inventory-paper-header strong,
.inventory-paper-header small { display: block; }
.inventory-paper-header strong { font-size: 14px; line-height: 1.25; }
.inventory-paper-header small { margin-top: 1px; color: #777; font-size: 7px; }
.inventory-paper-logo,
.inventory-paper-brand {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
}

.inventory-paper-logo img { max-width: 92px; max-height: 31px; object-fit: contain; }
.inventory-paper-brand { flex-direction: column; gap: 2px; color: #d99a13; font-weight: 800; }
.inventory-paper-brand img { max-width: 34px; max-height: 23px; object-fit: contain; }
.inventory-paper-brand span { font-size: 8px; line-height: 1; }

.inventory-paper-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 5px 0;
  border: 1px solid #ccc;
}

.inventory-paper-meta span {
  padding: 3px 6px;
  border-inline-end: 1px solid #ddd;

  font-size: 8px;
}

.inventory-paper-meta span:last-child { border: 0; }
.inventory-landscape-paper table { width: 100%; border-collapse: collapse; font-size: 7px; }
.inventory-landscape-paper th { background: #e8e8e8; }
.inventory-landscape-paper th,
.inventory-landscape-paper td { height: 23px; padding: 3px 4px; border: 1px solid #bbb; color: #111; text-align: start; }
.inventory-landscape-paper.inventory-paper-compact th,
.inventory-landscape-paper.inventory-paper-compact td { height: 18px; padding-block: 2px; }
.inventory-paper-sequence { width: 25px; min-width: 25px; max-width: 25px; text-align: center !important; }

.inventory-paper-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  margin-top: 16px;
  font-size: 8px;
  text-align: center;
}

.inventory-paper-footer span { padding-top: 7px; border-top: 1px solid #777; }

.inventory-preview-warning {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-end: auto;
  color: var(--text-muted);
  font-size: .67rem;
}

.inventory-workflow-dialog {
  width: min(var(--inventory-dialog-inline-size, var(--dialog-inline-size-workspace)), calc(calc(100 * var(--vw)) - (var(--dialog-viewport-gutter) * 2)));
  max-height: var(--dialog-max-block-size);
}

.inventory-workflow-dialog > .modal-body,
.inventory-workflow-dialog > form .modal-body {
  min-height: 0;
  overflow: auto;
}

.inventory-workflow-dialog > form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.inventory-workflow-dialog .modal-header,
.inventory-workflow-dialog .modal-footer {
  flex: 0 0 auto;
}

.inventory-locations-modal-card { --inventory-dialog-inline-size: var(--dialog-inline-size-workspace); }
.inventory-transfer-modal-card { --inventory-dialog-inline-size: var(--dialog-inline-size-compact); }

.inventory-locations-modal-card .modal-header > div { min-width: 0; }
.inventory-locations-modal-card .modal-header { padding: .75rem 1rem; }
.inventory-locations-modal-card .modal-header h3 { font-size: 1rem; }
.inventory-locations-modal-card .modal-header p { margin: .2rem 0 0; color: var(--muted); font-size: .7rem; }

.inventory-locations-modal-body {
  display: grid;
  min-width: 0;
  gap: 1rem;
  overflow: hidden auto;
}

.inventory-locations-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.inventory-locations-overview article {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .7rem;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.inventory-locations-overview article > svg { flex: 0 0 auto; color: var(--brand); }
.inventory-locations-overview span,
.inventory-locations-overview strong,
.inventory-locations-overview small { display: block; min-width: 0; }
.inventory-locations-overview strong { color: var(--text); font-size: 1rem; }
.inventory-locations-overview small { overflow: hidden; color: var(--muted); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }

.inventory-location-editor {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.inventory-location-editor-heading { margin-bottom: .8rem; }
.inventory-location-editor-heading .inventory-section-kicker,
.inventory-locations-list .inventory-section-kicker,
.inventory-transfer-history .inventory-section-kicker { margin-bottom: .15rem; }

.inventory-location-count-badge {
  flex: 0 0 auto;
  padding: .3rem .55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.inventory-location-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: .75rem;
}

.inventory-location-form .form-group { min-width: 0; margin: 0; }
.inventory-location-form input,
.inventory-location-form select { min-width: 0; max-width: 100%; }

.inventory-location-toggle {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 3rem;
  color: var(--text);
}

.inventory-location-toggle span,
.inventory-location-toggle strong,
.inventory-location-toggle small { display: block; }

.inventory-location-toggle small {
  color: var(--muted);
  font-size: .7rem;
}

.inventory-location-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  grid-column: 1 / -1;
}

.inventory-locations-list,
.inventory-transfer-history {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.inventory-locations-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}

.inventory-locations-heading h4,
.inventory-locations-heading p { margin: 0; }

.inventory-locations-heading p,
.inventory-locations-heading > span {
  color: var(--muted);
  font-size: .72rem;
}

.inventory-location-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.inventory-location-card {
  min-width: 0;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: var(--transition);
}

.inventory-location-card.is-inactive { opacity: .62; }

.inventory-location-card-head {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.inventory-location-icon {
  display: grid;
  flex: 0 0 2.5rem;
  min-height: 2.5rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--brand);
  background: var(--bg);
}

.inventory-location-card-head > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.inventory-location-card-head strong,
.inventory-location-card-head small { display: block; }

.inventory-location-card-head small { color: var(--text-muted); }

.inventory-location-badges,
.inventory-inline-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem;
}

.inventory-transfer-history-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
.inventory-transfer-history table { width: 100%; min-width: 48rem; }
.inventory-transfer-route-label { display: inline-flex; align-items: center; gap: .35rem; }

.inventory-location-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .8rem;
}

.inventory-location-metrics span {
  min-width: 0;
  padding: .55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--bg);
  font-size: .65rem;
}

.inventory-location-metrics b {
  display: block;
  overflow: hidden;
  margin-bottom: .2rem;
  color: var(--text);
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-location-actions {
  display: flex;
  justify-content: flex-end;
  gap: .45rem;
  margin-top: .7rem;
}

.inventory-transfer-status {
  display: inline-flex;
  padding: .3rem .55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--surface);
  font-size: .68rem;
  font-weight: 700;
}

.inventory-transfer-received { color: var(--success); border-color: var(--success); }
.inventory-transfer-in_transit { color: var(--brand); border-color: var(--brand); }
.inventory-transfer-rejected { color: var(--danger); border-color: var(--danger); }

.inventory-transfer-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: .75rem;
}

.inventory-transfer-route .form-group { margin: 0; }

.inventory-transfer-route > span {
  display: grid;
  min-height: 2.7rem;
  place-items: center;
  color: var(--brand);
}

.inventory-transfer-items { min-width: 44rem; }
.inventory-transfer-items td strong,
.inventory-transfer-items td small { display: block; }
.inventory-transfer-items td small { color: var(--text-muted); }
.inventory-transfer-items input { min-width: 5rem; width: 100%; }
.inventory-transfer-row-status { margin-top: .3rem; color: var(--muted); font-size: .66rem; line-height: 1.35; }
.inventory-transfer-empty {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem;
  border: 1px solid var(--line);
  border-inline-start-color: var(--warning);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--bg);
}
.inventory-transfer-empty svg { flex: 0 0 auto; color: var(--warning); }

.inventory-transfer-notice {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .8rem;
  border: 1px solid var(--line);
  border-inline-start-color: var(--brand);
  border-radius: var(--radius);
  color: var(--brand);
  background: var(--surface);
}

.inventory-transfer-notice span,
.inventory-transfer-notice strong,
.inventory-transfer-notice small { display: block; }

.inventory-transfer-notice small {
  margin-top: .2rem;
  color: var(--muted);
}

@media (max-width: 1250px) {
  .inventory-command-bar { grid-template-columns: 1fr 1fr; }
  .inventory-command-documents { grid-column: 1 / -1; justify-content: flex-start; }
  .inventory-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .inventory-workflow-steps { grid-template-columns: repeat(3, 1fr); }
  .inventory-location-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .inventory-control-hero { align-items: flex-start; flex-direction: column; gap: .6rem; }
  .inventory-control-health { width: 100%; min-width: 0; }
  .inventory-command-bar { grid-template-columns: 1fr; }
  .inventory-command-documents { grid-column: auto; }
  .inventory-command-group { flex-wrap: wrap; }
  .inventory-location-grid,
  .inventory-location-form { grid-template-columns: 1fr; }
  .inventory-transfer-route { grid-template-columns: 1fr; }
  .inventory-transfer-route > span { transform: rotate(90deg); }
  .inventory-count-modes { grid-template-columns: 1fr; }
  .inventory-workflow-steps { grid-template-columns: repeat(2, 1fr); }
  .inventory-print-modal-body { grid-template-columns: 1fr; overflow: auto; }
  .inventory-print-options { display: grid; grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .inventory-locations-modal { padding: .7rem; }
  .inventory-locations-modal-card { max-height: calc(calc(100 * var(--vh)) - (var(--dialog-viewport-gutter-mobile) * 2)); margin: 0; }
  .inventory-locations-modal-card .modal-header { align-items: flex-start; padding: .9rem 1rem; }
  .inventory-locations-modal-card .modal-body { padding: .8rem; }
  .inventory-locations-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .inventory-locations-overview article { align-items: flex-start; flex-direction: column; gap: .35rem; padding: .65rem; }
  .inventory-locations-overview small { line-height: 1.35; white-space: normal; }
  .inventory-location-editor,
  .inventory-locations-list,
  .inventory-transfer-history { padding: .8rem; }
  .inventory-locations-heading { align-items: flex-start; flex-wrap: wrap; }
  .inventory-location-form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-location-form-actions .btn,
  .inventory-location-actions .btn { justify-content: center; width: 100%; }
  .inventory-location-card-head { align-items: flex-start; flex-wrap: wrap; }
  .inventory-location-badges { width: 100%; justify-content: flex-start; padding-inline-start: 3.2rem; }
  .inventory-location-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-location-metrics span:last-child { grid-column: 1 / -1; }
  .inventory-location-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-transfer-history-wrap { overflow: visible; }
  .inventory-transfer-history table,

  .inventory-transfer-history tbody,
  .inventory-transfer-history tr,
  .inventory-transfer-history td { display: block; width: 100%; min-width: 0; }
  .inventory-transfer-history thead { display: none; }
  .inventory-transfer-history tr { margin-bottom: .65rem; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .inventory-transfer-history td { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; border: 0; border-bottom: 1px solid var(--line); text-align: end; }
  .inventory-transfer-history td:last-child { border-bottom: 0; }
  .inventory-transfer-history td::before { content: attr(data-label); flex: 0 0 auto; color: var(--muted); font-size: .68rem; font-weight: 700; text-align: start; }
  .inventory-transfer-history .inventory-inline-actions { justify-content: flex-end; }
  .inventory-control-hero { padding: .8rem 1rem; }
  .inventory-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .inventory-tabs { grid-template-columns: repeat(4, minmax(135px, 1fr)); overflow-x: auto; }
  .inventory-tab-btn { min-width: 0; padding-inline: 11px; }
  .inventory-tab-toolbar { align-items: stretch; flex-direction: column; }
  .inventory-tab-toolbar select { width: 100%; }
  .inventory-result-count { margin-inline-start: 0; }
  .inventory-workflow-header,
  .inventory-section-heading { align-items: flex-start; flex-direction: column; }
  .inventory-workflow-steps { grid-template-columns: 1fr; }
  .inventory-audit-grid { grid-template-columns: 1fr; }
  .inventory-print-options { grid-template-columns: 1fr; }
  .inventory-print-modal-card {
    width: calc(calc(100 * var(--vw)) - (var(--dialog-viewport-gutter-mobile) * 2));
    height: calc(calc(100 * var(--vh)) - (var(--dialog-viewport-gutter-mobile) * 2));
  }
  .inventory-landscape-paper { transform: scale(.72); margin-bottom: -150px; }
}

.table-change-badge {
  vertical-align: middle;
}
.badge-purple  { background: var(--tint);  color: var(--teal-200);  border: 1px solid color-mix(in srgb, var(--teal-200) 25%, transparent); }
.badge-muted   { background: var(--sunken);      color: var(--text-muted);    border: 1px solid var(--line); }
.main-content {
  flex: 1;
  /* The inline padding is the header's own, so the page body lines up with the page title above it at
     every font size (TASK-2026-028 FR-032); 24px was hard-coded while the header used 1.5rem. The
     deeper bottom padding keeps the last row off the window edge. */
  padding: 1.5rem var(--shell-header-inline-padding) 2.5rem;
  overflow-y: auto;
  overflow-x: auto;
  /* Horizontal scroll: content never collapses below 960px */
  min-width: 0;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* A route-owned POS lock covers the content surface; remove the reserved
   scrollbar lane until that lock is released so no unblurred strip remains. */
.main-content.pos-day-locked {
  overflow: hidden;
  scrollbar-gutter: auto;
}

/* Inner page wrapper enforces min-width so content never crushes under large fonts.
   Excludes loading spinner and any modal overlays that render inside main-content. */
.main-content > *:not(.loading-screen):not(.modal-overlay) {
  min-width: 960px;
}

/* A scrollbar wide enough to see and to grab, with a track so the lane reads as a scrollbar and not as
   a stray gold stripe down the edge of the page (TASK-2026-028 FR-032). */
.main-content::-webkit-scrollbar {
  height: var(--scrollbar-size);
  width: var(--scrollbar-size);
}
.main-content::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 2px;
}
.main-content::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 2px;
}
.main-content::-webkit-scrollbar-thumb:hover {
  background: var(--field);
  background-clip: padding-box;
}
.main-content::-webkit-scrollbar-corner { background: transparent; }

/* ─── SIDEBAR ────────────────────────────────────────────────────── */
.sidebar {
  flex-shrink: 0;
  width: var(--sidebar-width);
  height: calc(100 * var(--vh));
  background: var(--side);
  /* The boundary with the page, not a divider inside the sidebar: the dark themes gave it a 6%-white
     hairline, so the content read as glued to the sidebar (TASK-2026-028 FR-032). */
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: var(--z-sidebar);
  overflow: hidden;
}
.sidebar.collapsed { width: var(--sidebar-collapsed); }

@media (min-width: 769px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: calc(100 * var(--vh)) !important;
  }
  .main-wrapper {
    margin-left: var(--sidebar-width);
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.collapsed + .main-wrapper {
    margin-left: var(--sidebar-collapsed);
  }
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: var(--header-height);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  max-width: 180px;
}
.logo-icon { font-size: 1.5rem; flex-shrink: 0; }
.logo-text {
  font-size: 1.1rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--brand), var(--teal-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: opacity 0.2s;
}
.sidebar.collapsed .sidebar-logo { max-width: none; }   /* TASK-2026-130: the logo stays when the sidebar folds; its name goes (block near SPEC 017) */
.sidebar.collapsed .sidebar-header { justify-content: center; padding: 0; }

.sidebar-toggle {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  width: 24px; height: 24px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s, border-color 0.25s, color 0.25s;
  flex-shrink: 0;
  z-index: 120;
}
.sidebar-toggle:hover {
  color: var(--text);
  border-color: var(--border-active);
  background: var(--tint);
}
.sidebar.collapsed .sidebar-toggle {
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
}
.sidebar.collapsed .sidebar-toggle {
  transform: rotate(-90deg);
}
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* FR-031: a scrollbar appearing must not narrow the buttons or shift them sideways. That was
     solved by reserving a gutter, which cost a permanent 15px empty strip down one side — and the
     owner asked for the buttons to reach both edges (2026-09-21). Solved the other way round now:
     the scrollbar takes no width at all, so there is nothing to reserve and nothing can move.
     It still scrolls by wheel, trackpad and keyboard. What is gone is the 4px hover-only thumb,
     which was already transparent until the pointer was over it. */
  scrollbar-gutter: auto;
  scrollbar-width: none;
  padding: 12px 0;
  direction: rtl; /* Places scrollbar on far-left outer screen edge in LTR */
}
.sidebar-nav > * {
  direction: ltr; /* Keeps inner English content LTR */
}

/* Styled 4px auto-hiding sidebar scrollbar */
.sidebar-nav::-webkit-scrollbar {
  width: 0;
}
.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}
.sidebar-nav:hover::-webkit-scrollbar-thumb {
  background: var(--line-strong);
}

.nav-group {
  margin-bottom: 4px;
  transition: margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background-color: var(--nav-group-label-bg, rgba(255, 255, 255, 0.04));
  padding: 10px 16px;
  margin: 6px 12px;
  border-radius: var(--radius);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s, color 0.25s;
  overflow: hidden;
  max-height: 40px;
  width: calc(100% - 1.5rem);
  border: 0;
  font-family: inherit;
  text-align: start;
}
.nav-group-label:hover {
  background-color: var(--tint);
  color: var(--text, var(--text));
}
.nav-group-label::after {
  content: '－';
  font-size: 0.8rem;
  font-weight: bold;
  transition: color 0.25s ease;
  margin-left: 8px;
}
html[dir="rtl"] .nav-group-label::after {
  margin-left: 0;
  margin-right: 8px;
}
.nav-group.collapsed .nav-group-label::after {
  content: '＋';
}
.sidebar.collapsed .nav-group-label::after {
  display: none;
}
.sidebar.collapsed .nav-group-label {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none;
}

.nav-group-content {
  max-height: 500px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-group.collapsed .nav-group-content {
  max-height: 0 !important;
  opacity: 0 !important;
}

.sidebar.collapsed .nav-group-content {
  max-height: none !important;
  opacity: 1 !important;
}
.sidebar.collapsed .nav-group {
  margin-bottom: 0;
}
.sidebar.collapsed #global-collapse-group {
  display: block !important;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 20px;
  color: var(--muted);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, border-color 0.2s, color 0.2s;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  outline: none !important;
  box-shadow: none !important;
}
.nav-item:focus,
.nav-item:focus-visible {
  outline: none !important;
}
.nav-item:focus-visible,
.nav-group-label:focus-visible {
  box-shadow: inset 0 0 0 .125rem var(--focus) !important;
  color: var(--text);
}
.nav-item:hover {
  color: var(--text);
  background: var(--tint);
  border-left-color: var(--border-active);
}
.nav-item.active {
  color: var(--brand);
  background: var(--tint);
  border-left-color: var(--brand);
  outline: none !important;
  box-shadow: none !important;
}
.nav-item.active .nav-icon { filter: drop-shadow(0 0 5px var(--brand)); }

.nav-icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  color: var(--muted);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-icon i { font-size: 0.95rem; line-height: 1; }
.nav-item:hover .nav-icon  { color: var(--text); }
.nav-item.active .nav-icon { color: var(--brand); }
.nav-label {
  font-size: 0.85rem;
  font-weight: 500;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  max-width: 180px;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}
.sidebar.collapsed .nav-label {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
}
.sidebar.collapsed .nav-item { padding: 11px 0; justify-content: center; }

/* Sidebar tooltip on collapsed */
.sidebar.collapsed .nav-item:hover::after {
  content: attr(title);
  position: absolute;
  left: calc(var(--sidebar-collapsed) + 8px);
  background: var(--sunken);
  color: var(--text);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 0.8rem;
  white-space: nowrap;
  box-shadow: none;
  border: 1px solid var(--line);
  z-index: 200;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  /* Was a hardcoded rgba(0,0,0,.15). That reads as a shadow under a dark chrome and as
     a dirty grey smudge under a light one, so the wash is a token the palette owns. */
  background: var(--sunken);
  flex-shrink: 0;
  gap: 8px;
  overflow: hidden;
  transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-info-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  flex: 1;
  /* Spec 009 US4 (mockup M5): a button now — it opens "Change my password" — drawn exactly as the block it replaced. */
  background: none;
  border: 0;
  padding: 4px;
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.user-info-footer:hover { background: var(--sidebar-hover-bg, var(--sunken)); }
.user-info-footer:focus-visible { outline: 2px solid var(--accent-color, var(--brand)); outline-offset: 2px; }
.user-details, .user-name, .user-role { display: block; }

.user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--fill-hover));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--on-fill);
  flex-shrink: 0;
}

.user-details {
  overflow: hidden;
  text-align: center;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 150px;
  white-space: nowrap;
}
.user-name { font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 0.7rem; color: var(--muted); text-transform: capitalize; }
.sidebar.collapsed .user-details {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
}
.sidebar.collapsed .user-info-footer {
  justify-content: center;
  flex: 1;
  gap: 0;
}
.sidebar.collapsed .sidebar-footer {
  justify-content: center;
  padding: 12px 0;
  gap: 0;
}
.sidebar.collapsed .logout-btn {
  opacity: 0;
  max-width: 0 !important;
  border-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

.logout-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  width: 30px !important;
  height: 30px !important;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.95rem;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s, color 0.2s;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  overflow: hidden;
  max-width: 30px !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.logout-btn:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-tint); }
.logout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-1px);
}

/* ─── TOP HEADER ────────────────────────────────────────────────── */
.top-header {
  height: var(--header-height);
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 var(--shell-header-inline-padding);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  flex-shrink: 0;
}

.header-context {
  display: flex;
  align-items: center;
  gap: var(--shell-compact-gap);
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
}

#tenant-context-badge {
  min-block-size: var(--control-sm);
  block-size: var(--control-sm);
  padding-block: 0;
  justify-content: center;
}

.header-title {
  flex: 0 1 auto;
  min-inline-size: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
  min-inline-size: 0;
}

.shift-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--tint);
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  cursor: default;
  height: var(--control-sm);
  box-sizing: border-box;
}
.shift-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: var(--transition);
  flex-shrink: 0;
}
.shift-dot.open {
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: pulse 2s infinite;
}

.header-clock {
  /* The clock reads left to right whatever the interface language, because its contents are English:
     "2:20 PM · 9 Sep 2026". Left in the Arabic paragraph direction, the bidi algorithm reorders it
     twice over — the three spans come out date-first, and inside each span the Latin runs swap, so
     "2:20 PM · 9 Sep 2026" was rendering as "Sep 2026 9 · PM 2:20" (owner, 2026-09-09). `isolate`
     keeps this island's direction from leaking either way. */
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-sans, inherit);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: 0.05em;
  background: var(--tint);
  padding-inline: calc(var(--shell-compact-gap) * 1.5);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--control-sm);
  width: auto;
  min-width: max-content;
  max-width: none;
  column-gap: var(--shell-compact-gap);
  flex-shrink: 0;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
}

.header-clock-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: auto;
  text-align: center;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.header-clock-sep {
  margin: 0;
  opacity: 0.6;
  flex-shrink: 0;
}

.header-clock-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.quick-lang-btn {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--tint);
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  height: var(--control-sm);
  box-sizing: border-box;
}
.quick-lang-btn:hover {
  background: var(--brand);
  color: var(--bg);
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 6px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  transition: var(--transition);
}
.mobile-menu-btn:hover { border-color: var(--brand); color: var(--brand); }

.header-back-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1.1rem;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.header-back-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--tint);
}
.header-back-btn.hidden {
  display: none !important;
}

html[dir="rtl"] .header-back-btn {
  transform: scaleX(-1);
}

/* ─── LOGIN PAGE ─────────────────────────────────────────────────── */
.login-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  background: var(--bg);
  overflow: hidden;
}

.login-bg-anim {
  position: absolute; inset: 0;
  background: 
    radial-gradient(ellipse at 20% 20%, rgba(var(--accent-rgb), 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(26,108,240,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(var(--accent-rgb), 0.04) 0%, transparent 70%);
  animation: gradientShift 8s ease-in-out infinite alternate;
}

.login-card {
  position: relative;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  border-radius: var(--radius);
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-float), 0 0 60px rgba(var(--accent-rgb), 0.08);
  backdrop-filter: blur(20px);
  animation: slideUp 0.5s ease;
}

.login-logo {
  text-align: center;
  margin-bottom: 32px;
}
.login-logo-img {
  height: 128px !important;
  width: 128px !important;
  max-height: 128px !important;
  max-width: 128px !important;
  object-fit: contain !important;
  display: block !important;
}
.sidebar-logo-img {
  height: 32px !important;
  width: 32px !important;
  max-height: 32px !important;
  max-width: 32px !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.mobile-header-logo {
  height: 28px !important;
  width: 28px !important;
  max-height: 28px !important;
  max-width: 28px !important;
  object-fit: contain !important;
  display: block !important;
}
.login-logo-icon { font-size: 3rem; display: block; margin-bottom: 12px; }
.login-app-name {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--brand), var(--teal-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}
.login-tagline { font-size: 0.82rem; color: var(--text-muted); }

.login-form { display: flex; flex-direction: column; gap: 16px; }

.login-error {
  background: var(--danger-tint);
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.82rem;
  animation: fadeIn 0.2s ease;
}

.login-hint {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: 16px;
}

/* ─── BUTTONS ────────────────────────────────────────────────────── */
/* TASK-2026-163 S3. A button is a fixed 40px (--control), 2px corners, no shadow, no gradient, and a 1px border at rest
   (transparent on the filled and the quiet ones), so a focus line, which turns that border, never moves the layout by
   a pixel. One filled teal button per card or dialog. Almarai has 400 and 700: the filled button is 700, the rest 400. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control);
  padding: 0 var(--space-4);
  border-radius: var(--radius);
  font-size: 1rem;
  /* Explicit and 1: the label sits in a fixed-height box, so its line box can not decide the height (it measured 47px in
     Arabic against 36px in English before the box was fixed, TASK-2026-029). */
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  transition: var(--transition);
  border: var(--border-width) solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
  outline: none;
}

/* A button hidden with the attribute must actually hide. `.btn` declares display, which beats the
   user agent's [hidden], and nothing guarded it — the fifth instance of the rule that has cost this
   stylesheet four outages (TASK-2026-046). */
.btn[hidden] { display: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
/* :where keeps this at the weight of a single class pair, so a feature button that sets its own colours (a solid red end-employment button, say) is not turned teal on hover. */
:where(.btn):hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }

.btn-primary {
  background: var(--fill);
  color: var(--on-fill);
  border-color: transparent;
  font-weight: 700;
}
.btn-primary:hover:not(:disabled) {
  background: var(--fill-hover);
  border-color: transparent;
  color: var(--on-fill);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }

.btn-danger {
  background: var(--surface);
  color: var(--danger);
  border-color: var(--danger-line);
}
.btn-danger:hover:not(:disabled) { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger); }

.btn-success {
  background: var(--surface);
  color: var(--success);
  border-color: var(--success-line);
}
.btn-success:hover:not(:disabled) { background: var(--success-tint); border-color: var(--success-line); color: var(--success); }

/* Quiet: no fill and no visible edge, teal text, a tint on hover. */
.btn-ghost {
  background: transparent;
  color: var(--brand);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { background: var(--tint); border-color: transparent; color: var(--brand); }

.btn-gold-outline {
  background: var(--surface);
  color: var(--brand);
  border-color: var(--line-strong);
}
.btn-gold-outline:hover:not(:disabled) { background: var(--tint); border-color: var(--brand); }

.btn-neutral {
  background: var(--sunken);
  color: var(--text);
  border-color: var(--line);
}
.btn-neutral:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }

/* Sizes: small is 32px (rows and toolbars only), large is 48px (roomy density). Extra small is the small size with
   less room: the design has no smaller control. */
.btn-xs { height: var(--control-sm); padding: 0 var(--space-2); font-size: var(--fs-caption); gap: var(--space-1); }
.btn-sm { height: var(--control-sm); padding: 0 var(--space-3); font-size: var(--fs-small); }
.btn-lg { height: var(--control-roomy); padding: 0 var(--space-5); font-size: var(--fs-body-lg); }
.btn-xl { height: var(--control-roomy); padding: 0 var(--space-6); font-size: var(--fs-body-lg); }
.btn-full, .btn-block { width: 100%; }
.btn-icon {
  background: var(--surface);
  border: var(--border-width) solid var(--line-strong);
  color: var(--muted);
  width: var(--control-sm); height: var(--control-sm);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--fs-body);
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--transition);
  padding: 0;
  font-family: inherit;
}
.btn-icon:hover { border-color: var(--brand); color: var(--brand); }
.btn-icon.btn-danger-icon:hover { border-color: var(--danger-line); color: var(--danger); }

/* ─── FORMS ──────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 6px;
  /* No all-caps and no tracking: capitals are not used for labels, and letter spacing breaks Arabic joins. */
  text-transform: none;
  letter-spacing: 0;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
/* A single field left over at the end of a two-column form keeps the column width instead of
   stretching across the dialog. */
.form-group-half { max-width: calc(50% - 7px); }
.form-required { color: var(--danger); font-weight: 700; }
@media (max-width: 640px) {
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .form-group-half { max-width: none; }
}

/* `input:not([type])` matters: an <input> written without a type attribute is a text box to the browser
   but matched none of the selectors below, so those fields rendered in the browser's own default styling
   — the mismatch the owner saw in the bank dialogs (TASK-2026-028 FR-015). */
input:not([type]),
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="month"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="file"],
input[type="datetime-local"],
select,
textarea,
.form-control {
  width: 100%;
  /* TASK-2026-163 S3. A field is a fixed 40px (--control) with no vertical padding and a 1.6 line height inside it:
     the brand font's ascent and descent overrides make the field hold the whole glyph, so an Arabic tail is never cut.
     The border is the field colour; focus replaces it (below), so nothing moves. The colour only for the background:
     the `background` shorthand here also reset background-image, and at .form-control's weight it wiped the
     dropdown arrow off every select carrying the class (TASK-2026-157). */
  height: var(--control);
  background-color: var(--surface);
  border: var(--border-width) solid var(--field);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.6;
  padding-block: 0;
  padding-inline: var(--space-3);
  transition: var(--transition);
  outline: none;
  -webkit-appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus) { border-color: var(--muted); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--focus);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
input:disabled, select:disabled, textarea:disabled {
  background-color: var(--sunken);
  color: var(--muted);
  cursor: not-allowed;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;   /* the inline end in English; flipped below for Arabic */
  padding-inline-end: 36px;
  cursor: pointer;
  text-overflow: ellipsis;
  /* A dropdown is the same height as the text box beside it (TASK-2026-051 item 1.4).
     It was not: measured on the Settings form, a select came out 45px against an input's 53px,
     with identical radius, border, background, font and padding, because a select inherits a line-height from the
     page while an input does not. Since TASK-2026-163 S3 every field and every select is the same fixed 40px
     (--control) with no vertical padding and a 1.6 line height, so no line-height decides the height any more and the
     two can not drift apart. */
  line-height: 1.6;
}
/* .form-control's `padding: 10px 14px` outweighs the plain select rule, which put a .form-control
   dropdown's text under its arrow. Same room, at the class's weight. */
select.form-control { padding-inline-end: 36px; }
/* background-position has no logical keyword, so the arrow's side is flipped for Arabic here; the
   room for it above is already logical. */
html[dir="rtl"] select { background-position: left 12px center; }
select option { background: var(--surface); color: var(--text); }
textarea { resize: vertical; height: auto; min-height: 88px; padding-block: var(--space-2); }

input[type="date"],
input[type="datetime-local"] {
  -webkit-appearance: listbox;
  appearance: auto;
  cursor: pointer;
}
html[data-theme="retailpower-dark"] input[type="date"],
html[data-theme="retailpower-dark"] input[type="datetime-local"] { color-scheme: dark; }

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  padding: 4px;
  margin-inline-start: 6px;
  border-radius: var(--radius);
  transition: opacity var(--duration-quick) var(--ease-standard);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Floating label */
.form-group.floating { position: relative; }
.form-group.floating input,
.form-group.floating textarea {
  padding-top: 20px;
  padding-bottom: 8px;
}
.form-group.floating label {
  position: absolute;
  left: 14px; top: 14px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  transition: all 0.2s ease;
  pointer-events: none;
}
.form-group.floating input:focus + label,
.form-group.floating input:not(:placeholder-shown) + label,
.form-group.floating textarea:focus + label,
.form-group.floating textarea:not(:placeholder-shown) + label {
  top: 5px;
  font-size: 0.68rem;
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.form-error { font-size: 0.75rem; color: var(--danger); margin-top: 4px; }
.form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

/* Checkbox */
.checkbox-group { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.checkbox-group input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
  border-radius: 2px !important;
}
.checkbox-group label {
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  margin: 0;
}

/* ─── CARDS ──────────────────────────────────────────────────────── */
/* TASK-2026-163 S3. A card is a 2px box on the surface with a 1px line, no shadow, no blur, no lift on hover. Its header is
   56px and its padding 20px. Its (i) stands in the top inline-end corner (info_corner.css), so the card is positioned. */
.card {
  position: relative;
  min-width: 0;
  background: var(--card);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  isolation: isolate;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header);
  padding: var(--space-2) var(--pad);
  border-bottom: var(--border-width) solid var(--line);
  gap: var(--space-3);
}
.card-header h3 {
  font-size: var(--fs-body-lg);
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
}
/* The gold pictogram that used to sit before every card heading is gone from all 79 headings that had
   one, and its two rules went with it. Buttons, row actions and the icons inside KPI cards keep theirs:
   those say something a word would have to repeat, and a heading's icon never did (owner's decision,
   2026-09-09). */
.card-body { padding: var(--pad); }
.card-footer {
  padding: var(--space-4) var(--pad);
  border-top: var(--border-width) solid var(--line);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* KPI Card */
.kpi-card {
  background: var(--card);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  box-shadow: var(--card-shadow);
}
/* The 3px brand-gold bar that used to sit across the top of every KPI card was withdrawn on the owner's
   walk of the test site (TASK-2026-032). It was on every card identically, so it distinguished nothing:
   it was decoration, and it put the brand colour on top of the store's own numbers. The card's border and
   radius carry the shape now. `position: relative` above is kept as the ordinary baseline for a card. */
.kpi-card:hover { border-color: var(--line-strong); }
.kpi-icon {
  font-size: 1.6rem;
  margin-bottom: 8px;
  color: var(--muted);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.kpi-icon i { font-size: 1.5rem; line-height: 1; }
.kpi-card:hover .kpi-icon { color: var(--brand); }
.kpi-value { font-size: var(--fs-title); font-weight: 700; color: var(--text); margin-top: 6px; margin-bottom: 12px; line-height: 1; }
.kpi-label { font-size: var(--fs-small); color: var(--muted); font-weight: 400; }
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

/* ─── TABLES ─────────────────────────────────────────────────────── */
/* TASK-2026-163 S3. A row is 48px (--row), the head is 40px with a --line-strong rule under it and 13px text in the muted
   colour at weight 400 (Almarai has no medium), the cells are cut by --line. Figures end-align. The table paints its own
   cell borders (separate, not collapsed) so the head's rule stays with the sticky head when the body scrolls. A wide table
   scrolls sideways inside its own wrapper; the page never does. */
/* A table that rests on the page is a table card (TASK-2026-163 look): the card layer and its soft shadow in light, nothing extra in dark. Inside a card, or where a panel takes the border away, it adds neither. */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  border: var(--border-width) solid var(--line);
  background: var(--card);
  box-shadow: var(--card-shadow);
  --table-sticky-bg: var(--card);
}
.card .table-wrapper { box-shadow: none; }

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-body);
}

thead {
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 5;
}

th {
  background: var(--card);
  height: 40px;
  padding: 0 var(--space-4);
  /* Logical, not physical: `left` needed html[dir="rtl"] to overrule it, and that
     override was strong enough to also beat every .text-center / .text-end on a
     cell. One start here means no override is needed and the utilities work. */
  text-align: start;
  font-size: var(--fs-small);
  font-weight: 400;
  /* No all-caps and no letter spacing: capitals are not used for labels, and tracking breaks Arabic joins. */
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  border-bottom: var(--border-width) solid var(--line-strong);
  white-space: nowrap;
}
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--brand); }
th.sort-asc::after { content: ' ↑'; color: var(--brand); }
th.sort-desc::after { content: ' ↓'; color: var(--brand); }

td {
  height: var(--row);
  padding: 0 var(--space-4);
  border-bottom: var(--border-width) solid var(--line);
  color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}
td.wrap-text {
  white-space: normal !important;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--tint); }
tbody tr.clickable { cursor: pointer; }

.table-actions { display: flex; align-items: center; justify-content: center; gap: 6px; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.5; }
.empty-state p { font-size: 0.9rem; }

/* ─── MODALS ─────────────────────────────────────────────────────── */
/* TASK-2026-163 S3. The scrim is the brand scrim with no blur; the dialog is the one thing that floats, so it is the one
   thing with --shadow-float. It rises 8px over 250ms and fades in. */
.modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: calc(100 * var(--vw)) !important;
  height: calc(100 * var(--vh)) !important;
  background: var(--scrim) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  padding: var(--space-5);
  animation: fadeIn var(--duration-calm) var(--ease-standard);
}
.modal-overlay.hidden {
  display: none !important;
}

.modal-card {
  background: var(--surface);
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  max-height: calc(90 * var(--vh));
  width: 100%;
  /* No `forwards`: the last keyframe is `transform: scale(1) translateY(0)`, which is the card's natural
     state but computes to an identity matrix rather than `none`. Held by fill-mode it made every dialog a
     containing block for its own fixed children, so a dropdown opened inside a dialog was placed against
     the card and then clipped by the `overflow: hidden` below it. Dropping fill-mode lets the transform
     revert when the animation ends, and there is nothing to revert to but the same picture
     (TASK-2026-034 FR-003). */
  animation: modalEntrance 0.25s var(--ease-standard);   /* 250ms is --duration-calm; the literal is what the frame test reads */
  overflow: hidden;
}
/* Widened 2026-09-19 on the owner's word. A form capped at 800px on a 1215px screen spends the
   width it will not use on height instead: the same fields, stacked, scrolling. These are caps, not
   widths — the card is still `width: 100%`, and the mobile rules below still take over on a phone. */
.modal-sm { max-width: 440px; }
/* A small modal asks one question, so its footer buttons share the width evenly
   rather than huddling at the end. `flex: 1 1 0` not `width: 100%`, so two
   buttons sit side by side instead of stacking — and it is direction-agnostic.
   The :has() guard keeps it to footers that are nothing but buttons: a footer
   carrying a note or a grouping div wants its own proportions, and a browser
   without :has() simply drops the rule and keeps today's layout. */
.modal-sm .modal-footer:not(:has(> :not(.btn))) > .btn { flex: 1 1 0; min-width: 0; }
.modal-md { max-width: 760px; }
.modal-lg { max-width: 1040px; }
.modal-xl { max-width: 1280px; }

/* Return / exchange progressive workflow */
.return-workflow-card {
  width: min(calc(92 * var(--vw)), 55rem);
  max-height: calc(calc(100 * var(--vh)) - 40px);
  height: auto;
  margin: 0 auto;
  transform-origin: center top;
  transition:
    box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 240ms ease;
}

.return-workflow-card.is-lookup {
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
}

.return-workflow-card.is-morphing {
  will-change: width, height, border-radius;
}

.return-workflow-card.is-lookup > .modal-body {
  flex: 0 1 auto !important;
  overflow-y: visible !important;
}

.return-workflow-card.is-lookup #return-txn-detail,
.return-workflow-card.is-lookup #submit-return-btn {
  display: none !important;
}

.return-workflow-card.is-expanded {
  width: min(calc(96 * var(--vw)), 75rem);
  height: min(calc(96 * var(--vh)), calc(calc(100 * var(--vh)) - 24px));
  max-height: calc(calc(100 * var(--vh)) - 24px);
  min-height: 0;
  border-radius: var(--radius);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.48);
}

.return-workflow-card.is-expanded > .modal-body {
  flex: 1 1 auto !important;
  min-height: 0;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  scroll-padding-block: 14px 32px;
  padding-block-end: 32px;
}

.return-workflow-body {
  gap: 14px !important;
  padding: 14px 24px 20px !important;
  scrollbar-color: rgba(125, 138, 149, 0.55) transparent;
  scrollbar-width: thin;
}

.return-workflow-body::-webkit-scrollbar {
  width: 5px;
}

.return-workflow-body::-webkit-scrollbar-track {
  background: transparent;
}

.return-workflow-body::-webkit-scrollbar-thumb {
  background: rgba(125, 138, 149, 0.48);
  border-radius: 2px;
}

.return-workflow-card .return-workflow-details {
  gap: 16px !important;
  margin-top: 4px !important;
}

.return-workflow-card .return-lookup-row {
  margin-bottom: 0 !important;
}

.return-workflow-card #exchange-section {
  position: relative;
  z-index: 0;
  margin-bottom: 2px !important;
}

.return-workflow-card #exchange-section.has-open-search {
  z-index: 50;
}

.return-workflow-card .return-exchange-search-row {
  align-items: flex-start;
  margin-bottom: 0 !important;
}

.return-exchange-search-field {
  min-width: 0;
}

.return-workflow-card #exch-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 60;
  width: 100%;
  max-height: min(calc(36 * var(--vh)), 280px);
  margin-top: 0;
  overflow-y: auto;
  background: var(--surface);
  border-color: var(--teal-400);
  box-shadow: var(--shadow-float);
}

.return-workflow-card #exch-dropdown .search-item {
  min-height: 48px;
  padding: 8px 12px;
}

.return-workflow-card #exch-dropdown .search-item-name {
  font-size: 0.8rem;
}

.return-workflow-card #exch-dropdown .search-item-meta {
  color: var(--muted);
  font-size: 0.7rem;
}

.return-workflow-card #exch-dropdown .search-item-price {
  font-size: 0.82rem;
}

.return-workflow-card #exch-dropdown .search-item.is-keyboard-selected,
.return-workflow-card #exch-dropdown .search-item.is-keyboard-selected:hover {
  background: rgba(26, 108, 240, 0.2);
  outline: 2px solid var(--teal-400);
  outline-offset: -2px;
}

.return-items-table-wrapper {
  position: relative;
  isolation: isolate;
  min-height: 0;
  max-height: min(calc(36 * var(--vh)), 320px) !important;
  overflow-y: auto !important;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.return-items-table {
  border-collapse: separate !important;
  border-spacing: 0;
  table-layout: fixed;
}

.return-items-table thead {
  position: static !important;
}

.return-items-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sunken);
  box-shadow: inset 0 -1px 0 var(--line);
}

.return-items-table .return-items-col-check { width: 4%; }
.return-items-table .return-items-col-product { width: 26%; }
.return-items-table .return-items-col-size { width: 16%; }
.return-items-table .return-items-col-source { width: 11%; }
.return-items-table .return-items-col-qty { width: 8%; }
.return-items-table .return-items-col-depreciation { width: 12%; }
.return-items-table .return-items-col-action { width: 14%; }
.return-items-table .return-items-col-price { width: 9%; }

.return-items-table th,
.return-items-table td {
  overflow-wrap: anywhere;
  vertical-align: middle;
}

.return-items-table th:first-child,
.return-items-table td:first-child,
.return-items-table th:nth-child(5),
.return-items-table td:nth-child(5),
.return-items-table th:nth-child(6),
.return-items-table td:nth-child(6) {
  text-align: center;
}

.return-items-table th:last-child,
.return-items-table td:last-child {
  text-align: end;
}

.return-reconciliation-grid {
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.return-summary-card,
.return-payment-card {
  height: auto !important;
  min-height: 224px !important;
  flex: 1 1 auto;
  padding: 14px !important;
  background: var(--surface) !important;
}

.return-summary-card {
  display: grid !important;
  grid-template-rows: minmax(104px, 1fr) auto auto;
  align-content: stretch;
  gap: 12px !important;
}

.return-summary-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  padding: 12px;
  text-align: center;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.return-summary-hero-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.return-summary-hero-value {
  margin-top: 5px;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
}

.return-summary-direction {
  min-height: 1rem;
  margin-top: 5px;
  font-size: 0.72rem;
  font-weight: 700;
}

.return-summary-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.return-summary-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 66px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.return-summary-metric > span {
  color: #9aa6b2;
  font-size: 0.72rem;
}

.return-summary-metric > strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 0.95rem;
}

.return-summary-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.74rem;
  font-weight: 800;
  text-align: center;
}

.return-summary-status.is-refund {
  color: var(--success);
  background: var(--success-tint);
  border-color: rgba(45, 214, 101, 0.28);
}

.return-summary-status.is-charge {
  color: var(--danger);
  background: var(--danger-tint);
  border-color: rgba(242, 85, 85, 0.28);
}

.return-summary-status.is-balanced {
  color: var(--muted);
  background: var(--sunken);
}

.return-payment-card {
  min-height: 224px !important;
  justify-content: flex-start !important;
  gap: 14px !important;
}

.return-payment-header {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.return-payment-header-label {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25rem;
}

.return-payment-header-hint {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.25rem;
}

.return-payment-card .return-tender-grid {
  gap: 8px !important;
}

.return-payment-card .ret-tender-btn {
  min-height: 38px;
  padding: 8px 10px !important;
  color: var(--text);
  background: var(--sunken);
  font-size: 0.78rem !important;
  border-color: rgba(125, 138, 149, 0.38);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.return-payment-card .ret-tender-btn:hover {
  background: var(--tint);
  border-color: var(--teal-400);
}

.return-payment-card .ret-tender-btn.is-selected {
  color: var(--text);
  background: var(--teal-700);
  border-color: var(--teal-400);
  box-shadow: 0 0 0 2px rgba(26, 108, 240, 0.16);
}

.return-payment-inputs {
  gap: 10px !important;
}

.return-payment-inputs .form-row {
  gap: 10px !important;
}

.return-payment-inputs .form-group {
  flex: 1 1 0 !important;
  min-width: 0;
  margin: 0 !important;
}

.return-payment-inputs .form-group label {
  display: block;
  margin-bottom: 4px !important;
  color: #9aa6b2;
  font-size: 0.72rem !important;
}

.return-payment-inputs .form-group input {
  min-height: 36px;
  padding: 7px 9px !important;
  color: var(--text);
  background: var(--sunken);
  border-color: rgba(125, 138, 149, 0.32);
  font-size: 0.82rem !important;
}

.return-payment-inputs .form-group input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.return-payment-status {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.return-payment-status-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.75rem;
}

.return-payment-status-row strong {
  color: var(--text);
  font-size: 1rem;
}

.return-payment-status .return-payment-balance {
  flex: none;
  min-height: 0;
  justify-content: flex-start;
  gap: 2px;
  font-size: 0.72rem;
  line-height: 1.35;
  padding: 0;
}

.return-payment-card .tender-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.return-workflow-card.is-expanded > .modal-footer {
  flex: 0 0 auto;
  direction: ltr;
  justify-content: flex-end;
  background: var(--surface);
  position: relative;
  z-index: 3;
  box-shadow: 0 -10px 22px rgba(0, 0, 0, 0.2);
}

.return-workflow-footer > button { direction: rtl; }

/* The footer above is forced `direction: ltr` so Cancel and Save keep one order in both languages,
   and the line above hands that direction back to the buttons' own contents.  The refund refusal
   between them is not a button, so it kept the footer's LTR — and an Arabic sentence in an LTR
   paragraph is laid out wrongly at its edges.  Measured on 2026-09-16 with the real message at
   1280px: three line boxes at 219..1038, 219..519 and 519..523, the last of which is the sentence's
   final full stop, alone, four pixels wide, on a line of its own.  With the direction given back,
   and the row below, it is two lines at 194..1108 and 957..1108, packed to the right where Arabic
   belongs.  It only became visible when the message grew past one sentence (finding 21). */
html[dir="rtl"] .return-workflow-footer > .edge-return-blocked { direction: rtl; }

/* `.edge-return-blocked` asks for `flex-basis: 100%`, which only means anything if the row it sits
   in may wrap — and `.modal-footer` does not.  So the refusal shared one line with Cancel and Save
   and, on a phone, was measured at 163px wide and 320px tall: a narrow column of text between two
   squashed buttons, 43% of the screen.  Wrapping it, with the message ordered ahead of the buttons,
   puts the sentence on its own full-width row and leaves the buttons on the row beneath it, which
   is what the 100% basis was always for.  Order matters: without it the DOM order (Cancel, message,
   Save) would break the two buttons onto separate rows. */
.return-workflow-footer { flex-wrap: wrap; }
.return-workflow-footer > .edge-return-blocked { order: -1; }

.return-workflow-card .return-reconciliation-grid > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.return-workflow-card .section-title { color: var(--text); }

.return-workflow-card .table-compact th {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.return-workflow-card .table-compact td { color: var(--text); }

.return-payment-balance {
  flex: 1.8;
  min-height: 2.6em;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.35;
  padding-bottom: 2px;
}

.return-payment-balance span { display: block; }

.return-workflow-card.is-expanded .return-workflow-details {
  animation: returnWorkflowReveal 340ms cubic-bezier(0.16, 1, 0.3, 1) 70ms both;
}

.return-workflow-card.is-expanded .return-lookup-status {
  display: none !important;
}

.return-workflow-card.is-expanded .return-lookup-row {
  animation: returnLookupSettle 300ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both;
}

.return-workflow-card.is-expanded .return-workflow-details > * {
  animation: returnWorkflowSectionReveal 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.return-workflow-card.is-expanded .return-workflow-details > :nth-child(1) { animation-delay: 110ms; }
.return-workflow-card.is-expanded .return-workflow-details > :nth-child(2) { animation-delay: 145ms; }
.return-workflow-card.is-expanded .return-workflow-details > :nth-child(3) { animation-delay: 180ms; }
.return-workflow-card.is-expanded .return-workflow-details > :nth-child(4) { animation-delay: 215ms; }
.return-workflow-card.is-expanded .return-workflow-details > :nth-child(5) { animation-delay: 250ms; }

.return-workflow-card.is-expanded #submit-return-btn {
  animation: returnWorkflowActionReveal 260ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both;
}

.return-load-button {
  min-width: 7rem;
}

.return-lookup-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.return-lookup-status:not(.hidden) {
  animation: returnLookupStatusReveal 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.return-lookup-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes returnWorkflowReveal {
  from { transform: translateY(12px); }
  to { transform: translateY(0); }
}

@keyframes returnWorkflowSectionReveal {
  from { opacity: 0; transform: translateY(10px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes returnLookupSettle {
  from { opacity: 0.82; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes returnWorkflowActionReveal {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes returnLookupStatusReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .return-workflow-card,
  .return-workflow-card.is-expanded {
    width: 100%;
    max-height: calc(calc(100 * var(--vh)) - 20px);
  }

  .return-workflow-card.is-expanded {
    height: calc(calc(100 * var(--vh)) - 20px);
  }

  .return-lookup-row {
    flex-direction: column;
    align-items: stretch !important;
  }

  .return-lookup-type {
    width: 100% !important;
  }

  .return-reconciliation-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .return-items-table-wrapper {
    min-height: 0;
    max-height: min(calc(38 * var(--vh)), 280px) !important;
  }

  .return-payment-inputs .form-row {
    flex-wrap: wrap;
  }

  .return-payment-inputs .form-group {
    flex-basis: min(100%, 180px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .return-workflow-card,
  .return-workflow-card.is-expanded .return-workflow-details,
  .return-workflow-card.is-expanded .return-lookup-row,
  .return-workflow-card.is-expanded .return-workflow-details > *,
  .return-workflow-card.is-expanded #submit-return-btn,
  .return-lookup-status:not(.hidden),
  .return-lookup-spinner {
    animation: none !important;
    transition: none !important;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header);
  padding-block: var(--space-2);
  padding-inline: var(--pad) var(--space-3);
  border-bottom: var(--border-width) solid var(--line);
  flex-shrink: 0;
}
.modal-header h3 { font-size: var(--fs-body-lg); font-weight: 700; line-height: 1.4; margin: 0; min-width: 0; }
.modal-close {
  background: none;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--fs-body-lg);
  cursor: pointer;
  min-width: var(--control-sm);
  height: var(--control-sm);
  padding: 0 var(--space-1);
  transition: var(--transition);
  line-height: 1;
}
.modal-close:hover { color: var(--text); }

.modal-body {
  padding: var(--pad);
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  padding: var(--space-4) var(--pad);
  border-top: var(--border-width) solid var(--line);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

#receipt-modal .modal-footer {
  display: flex !important;
  gap: 12px !important;
  width: 100% !important;
  justify-content: space-between !important;
}
#receipt-modal .modal-footer > button {
  flex: 1 1 0% !important;
  width: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ─── BADGES ─────────────────────────────────────────────────────── */
/* TASK-2026-096: `.badge` sets a display, which beats the `hidden` attribute, so the header's company-store
   badge (hidden until the server names the store) drew as an empty pill. The sixth instance of this rule. */
.badge[hidden] { display: none; }
.user-store[hidden] { display: none; }   /* TASK-2026-096: same trap as .badge; kept beside it, outside the Team Administration block whose test forbids [hidden] */
/* TASK-2026-163 S3. One fixed box for every status: 120 x 24, 2px corners, never a pill, 13px at weight 400, a word that does
   not fit is cut with an ellipsis (the locale file is where a word is shortened). Five tones: success, warning, danger,
   info and neutral. The old names (gold, purple, the role and the status names) are kept as names for those five. */
.badge {
  --b-fg: var(--neutral-status);
  --b-bg: var(--neutral-status-tint);
  --b-ln: var(--neutral-status-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--badge-w);
  height: var(--badge-h);
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--b-ln);
  border-radius: var(--radius);
  background: var(--b-bg);
  color: var(--b-fg);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  flex: none;
}
.badge-success { --b-fg: var(--success); --b-bg: var(--success-tint); --b-ln: var(--success-line); }
.badge-danger  { --b-fg: var(--danger);  --b-bg: var(--danger-tint);  --b-ln: var(--danger-line); }
.badge-warning { --b-fg: var(--warning); --b-bg: var(--warning-tint); --b-ln: var(--warning-line); }
.badge-info    { --b-fg: var(--info);    --b-bg: var(--info-tint);    --b-ln: var(--info-line); }
.badge-gold    { --b-fg: var(--neutral-status); --b-bg: var(--neutral-status-tint); --b-ln: var(--neutral-status-line); }

.table-row-changed > td {
  background: var(--tint) !important;
  transition: var(--transition-slow);
}

.table-change-badge {
  vertical-align: middle;
}
/* Role badges: named for the five tones above. */
.badge-purple, .badge-muted, .badge-admin, .badge-tailor { --b-fg: var(--neutral-status); --b-bg: var(--neutral-status-tint); --b-ln: var(--neutral-status-line); }
.badge-cashier { --b-fg: var(--info); --b-bg: var(--info-tint); --b-ln: var(--info-line); }

/* Loyalty tier badges */
.tier-bronze   { background: rgba(205,127,50,0.15);  color: #cd7f32; border: 1px solid rgba(205,127,50,0.3); }
.tier-silver   { background: rgba(192,192,192,0.12); color: #c0c0c0; border: 1px solid rgba(192,192,192,0.3); }
.tier-gold     { background: var(--tint);  color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.tier-platinum { background: linear-gradient(135deg,rgba(168,85,247,0.15),rgba(56,189,248,0.15)); color: #c084fc; border: 1px solid rgba(168,85,247,0.3); }
/* Not a tier: a customer this shop invented while it was offline, whose standing head office has
   not confirmed yet (TASK-2026-048). Deliberately the quietest of the five — it must not read as a
   rank a cashier could repeat to the customer, and bronze is exactly what it would read as if this
   class had no rule of its own. */
.tier-unknown  { background: var(--surface); color: var(--muted); border: 1px dashed var(--line); font-weight: 500; }

/* Status badges: named for the five tones above. */
.badge-draft     { --b-fg: var(--neutral-status); --b-bg: var(--neutral-status-tint); --b-ln: var(--neutral-status-line); }
.badge-submitted, .badge-at-tailor { --b-fg: var(--info); --b-bg: var(--info-tint); --b-ln: var(--info-line); }
.badge-received  { --b-fg: var(--success); --b-bg: var(--success-tint); --b-ln: var(--success-line); }
.badge-pending   { --b-fg: var(--warning); --b-bg: var(--warning-tint); --b-ln: var(--warning-line); }
.badge-ready     { --b-fg: var(--neutral-status); --b-bg: var(--neutral-status-tint); --b-ln: var(--neutral-status-line); }
.badge-completed { --b-fg: var(--success); --b-bg: var(--success-tint); --b-ln: var(--success-line); }

/* ─── TOASTS ─────────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  left: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 200000;
  max-width: 440px;
  width: calc(100% - 48px);
}

html[dir="rtl"] .toast-container,
[dir="rtl"] .toast-container {
  left: 24px !important;
  right: auto !important;
}

/* TASK-2026-163 S3. A toast floats, so it carries --shadow-float; it has a 1px --line-strong edge on every side (no coloured
   stripe: the icon carries the tone), and it rises 8px over 200ms. */
.toast {
  background: var(--surface);
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius);
  min-height: var(--control);
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-float);
  animation: toastEnter var(--duration-base) var(--ease-standard) forwards;
  cursor: pointer;
  max-height: 120px;
  overflow: hidden;
}

.toast-icon { font-size: var(--fs-body-lg); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
/* The icon carries the tone (the coloured side stripe is gone): success, warning, danger, info. */
.toast.toast-success .toast-icon { color: var(--success); }
.toast.toast-info .toast-icon    { color: var(--info); }
.toast.toast-error .toast-icon   { color: var(--danger); }
.toast.toast-warning .toast-icon { color: var(--warning); }

.toast-message { font-size: var(--fs-body); font-weight: 400; color: var(--text); line-height: 1.5; flex: 1; word-break: break-word; overflow-wrap: anywhere; }

.toast.dismiss { animation: toastExit var(--duration-quick) var(--ease-standard) forwards; pointer-events: none; }

@keyframes toastEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toastExit {
  0% {
    opacity: 1;
    transform: translateY(0);
    max-height: 120px;
    margin-bottom: 10px;
  }
  100% {
    opacity: 0;
    transform: translateY(0);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-width: 0;
  }
}

/* ─── LOADING ────────────────────────────────────────────────────── */
.spinner {
  width: 300px;
  height: 300px;
  background-color: var(--brand);
  -webkit-mask: url('/static/logo/loading-animation.svg') no-repeat center / contain;
  mask: url('/static/logo/loading-animation.svg') no-repeat center / contain;
  display: inline-block;
  flex-shrink: 0;
  transition: opacity 0.6s ease;
}
.spinner-sm  { width: 16px; height: 16px; }
.spinner-md  { width: 64px; height: 64px; }
.spinner-lg  { width: 300px; height: 300px; }

/* 300 px spinner - used by the full-screen loading overlay (#retailpower-loader) */
.spinner-300 { width: 300px; height: 300px; }

.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 16px;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(13,17,23,0.85);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 900;
}

/* ═══════════════════════════════════════════════════════════════
   SKELETON / INLINE LOADING SYSTEM (skeleton.js companion)
   Glass-effect shimmer that adapts to dark, light, and all themes
   ═══════════════════════════════════════════════════════════════ */

/* ── Base shimmer line ──────────────────────────────────────── */
.sk-line {
  display: block;
  background: var(--sunken);
  border-radius: var(--radius);
  min-height: 14px;
  position: relative;
  overflow: hidden;
}

/* Pseudo element: a flat tint that dims in and out (TASK-2026-163 S3: no sweep gradient, the brand's loading state is a dim). */
.sk-line::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--tint);
  opacity: 0;
  animation: sk-breathe 1600ms var(--ease-standard) infinite;
}

@keyframes sk-breathe {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

@keyframes sk-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes sk-sweep-rtl {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* UI Loading states & accessibility support */
[aria-busy="true"] {
  cursor: wait;
}

/* Shimmer style for button loading state */
.sk-btn-shimmer {
  position: relative !important;
  overflow: hidden !important;
  color: transparent !important;
  pointer-events: none !important;
}

.sk-btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--on-fill);
  opacity: 0;
  animation: sk-breathe-btn 1600ms var(--ease-standard) infinite;
}

@keyframes sk-breathe-btn {
  0%, 100% { opacity: 0; }
  50%      { opacity: .25; }
}

/* Static fallback for prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .sk-line::before, .sk-btn-shimmer::after {
    animation: none !important;
    opacity: 0.7;
  }
}

/* ── Skeleton page wrapper ──────────────────────────────────── */
.sk-page {
  animation: sk-fade-in 0.25s ease;
}
@keyframes sk-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── Page header skeleton ───────────────────────────────────── */
.sk-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

/* ── KPI stat grid skeleton ─────────────────────────────────── */
.sk-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.sk-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 110px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sk-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin: 0 auto 10px;
}

/* ── Table skeleton ─────────────────────────────────────────── */
.sk-table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sk-table {
  width: 100%;
  border-collapse: collapse;
}

.sk-thead th,
.sk-tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.sk-thead th {
  background: rgba(255,255,255,0.03);
}

.sk-row {
  transition: background 0.2s;
}

.sk-row:last-child td {
  border-bottom: none;
}

/* ── Inline table-row skeleton (inside existing tables) ─────── */
tr.sk-row td .sk-line {
  margin: 0;
}

/* ── Card skeleton ──────────────────────────────────────────── */
.sk-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sk-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

/* ── Form skeleton ──────────────────────────────────────────── */
.sk-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sk-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Inline error state ─────────────────────────────────────── */
.sk-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  gap: 8px;
  color: var(--danger);
  font-size: 0.875rem;
  text-align: center;
  background: var(--danger-tint);
  border: 1px solid rgba(239,68,68,0.18);
  border-radius: var(--radius);
  animation: sk-fade-in 0.2s ease;
}

.sk-error-icon {
  font-size: 1.8rem;
  margin-bottom: 4px;
}

.sk-error-msg {
  color: var(--danger);
  font-weight: 500;
}

/* ─── PAGE HEADER ────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.page-header h2 { font-size: 1.4rem; font-weight: 800; }
.page-header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ─── POS TERMINAL ───────────────────────────────────────────────── */
.pos-grid {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a track's automatic minimum is its content, so one long item name used to push the 360px
     totals column off the screen (TASK-2026-163 S3). The left track may now be as narrow as it needs. */
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  height: calc(calc(100 * var(--vh)) - var(--header-height) - 48px);
}

/* The sale content carries the rule the tab strip gave up, so the strip and the sale are one surface
   with the active tab opening into it (TASK-2026-028 FR-020). Border-box keeps the height unchanged. */
.pos-terminal-shell .pos-grid {
  border-block-start: 1px solid var(--line);
  padding-block-start: 20px;
  background: var(--sunken);
  border-inline: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  padding-inline: 16px;
  padding-block-end: 16px;
}

.pos-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: visible;
  min-width: 0;
}

.pos-search-bar {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.pos-search-input,
.pos-cust-search-input {
  width: 100%;
  height: var(--control) !important;
  font-size: var(--fs-body) !important;
  border-radius: var(--radius) !important;
  border: var(--border-width) solid var(--field) !important;
  background: var(--surface) !important;
  transition: border-color var(--duration-quick) var(--ease-standard) !important;
}

/* Focus (design system v15): the field's own border turns the focus colour; no glow. */
.pos-search-input:focus,
.pos-cust-search-input:focus {
  border-color: var(--focus) !important;
  box-shadow: none !important;
  background: var(--surface) !important;
}

.pos-search-icon,
.pos-cust-search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1.1rem;
  pointer-events: none;
  z-index: 2;
}

#pos-quick-add-btn,
#quick-add-cust-btn {
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border-active);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
}

.search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: var(--transition);
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: var(--tint); }

/* The "Add New Customer" row at the foot of an empty customer search (TASK-2026-051 item 2.2).
   It is a real <button> because it performs an action and must be reachable from the keyboard,
   and every other .search-item is a <div> — so it arrives carrying the browser's own button
   styling. Measured before this rule existed: background rgb(240,240,240) and colour rgb(0,0,0),
   which put the label's light text on a light grey ground and made it invisible while the darker
   meta text still showed. A class written for one element type does not dress another. */
button.search-item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  font: inherit;
  text-align: start;
}
button.search-item:last-child { border-bottom: none; }
.search-item.is-keyboard-selected,
.search-item.is-keyboard-selected:hover {
  background: var(--tint);
  outline: 2px solid var(--border-active);
  outline-offset: -2px;
}
.search-item-name { font-weight: 600; color: var(--text); font-size: 0.875rem; }
.search-item-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.search-item-price { font-weight: 700; color: var(--brand); white-space: nowrap; font-size: 0.875rem; }
.search-item-stock { font-size: 0.72rem; color: var(--text-muted); }

.cart-container {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.cart-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
}

.cart-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  transition: var(--transition);
}
.cart-item:hover { background: var(--tint); }
.cart-item-name { font-weight: 600; font-size: 0.84rem; }
.cart-item-meta { font-size: 0.72rem; color: var(--text-muted); }

.cart-qty-input {
  width: 52px !important;
  text-align: center;
  padding: 5px 8px !important;
  font-size: 0.84rem !important;
}

.cart-disc-input {
  width: 56px !important;
  text-align: center;
  padding: 5px 8px !important;
  font-size: 0.84rem !important;
}

.cart-line-total { font-weight: 700; color: var(--brand); font-size: 0.875rem; white-space: nowrap; text-align: right; }

.cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  gap: 12px;
  padding: 40px;
}
.cart-empty-icon { font-size: 2.5rem; opacity: 0.4; }

/* POS Right Panel */
.pos-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pos-totals-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--card-shadow);
}

.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--line);
}
.totals-row:last-child { border-bottom: none; }
.totals-row.total-final {
  padding-top: 12px;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--brand);
  border-top: 2px solid var(--border-active);
  margin-top: 4px;
}
.totals-row label { color: var(--muted); font-size: 0.82rem; }

/* ─── ORDER SUMMARY LADDER ──────────────────────────────────────── */
/* The owner asked for space used wisely rather than for a tighter card: "no huge gaps, and no text
   crowded together" (TASK-2026-036 FR-046). So the workings are one rhythm of small quiet lines with
   even breathing room and no rules between them, then a single rule, then the total alone and large.
   The ruled row-per-line the card used before gave every figure the same weight as the total. */
.pos-totals-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 10px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
}

.pos-totals-ref {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pos-totals-ladder {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pos-totals-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-block-size: 22px;
  color: var(--muted);
  font-size: 0.82rem;
}

/* The guard. Without it the `display: flex` above outlives the hidden attribute, which is the trap
   this stylesheet has now sprung five times. */
.pos-totals-line[hidden] { display: none; }

.pos-totals-line > bdi { color: var(--text); font-variant-numeric: tabular-nums; }
.pos-totals-line .is-credit { color: var(--success); }

.pos-totals-line-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pos-invoice-discount-line { min-block-size: 30px; }

.pos-invoice-discount-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pos-totals-worked-out {
  color: var(--success);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.pos-totals-worked-out[hidden] { display: none; }

/* The suffix is drawn beside the field rather than typed into it, so the value stays a plain number
   that `valueAsNumber` and the server both read without stripping anything. */
.pos-percent-field {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-inline: 8px;
  background: var(--surface);
  border: var(--border-width) solid var(--field);
  border-radius: var(--radius);
  transition: border-color var(--duration-quick) var(--ease-standard);
}

/* The wrapper is the control the cashier sees, so the wrapper's own border carries the focus line (one 1px line, no glow). */
.pos-percent-field:focus-within {
  border-color: var(--focus);
}

.pos-percent-field input {
  inline-size: 3.2rem;
  padding: 4px 0;
  color: var(--text);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
}

/* One highlight, not two. The universal focus rule at the end of this file paints
   `box-shadow: … !important` on every `input:focus`, which lands INSIDE this field's border and
   reads as a second, doubled ring. `outline: none` above does not touch a box-shadow, and the
   universal rule is !important, so this has to be too. Focus is not being removed — it moves to
   `.pos-percent-field:focus-within` above, where it belongs. */
.pos-percent-field input:focus,
.pos-percent-field input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Chrome and the password managers guess at unlabelled fields and paint this one as a credential,
   which is where the pale filled box came from; `autocomplete="off"` is routinely ignored for it.
   The markup carries the manager opt-outs, and this replaces any autofill paint with the field's
   own surface. Same treatment as `.inventory-search-box input`. */
.pos-percent-field input:-webkit-autofill,
.pos-percent-field input:-webkit-autofill:hover,
.pos-percent-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--sunken) inset !important;
  box-shadow: 0 0 0 1000px var(--sunken) inset !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}

/* The spinners are 20px of hitbox for a value that is typed, and they sit where the % belongs. */
.pos-percent-field input::-webkit-outer-spin-button,
.pos-percent-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pos-percent-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.pos-percent-suffix { color: var(--muted); font-size: 0.78rem; }

.pos-totals-warning {
  margin: 8px 0 0;
  color: var(--danger);
  font-size: 0.76rem;
  line-height: 1.35;
}

.pos-totals-grand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-block-start: 12px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--line);
}

.pos-totals-grand-label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pos-totals-grand-value {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

/* Twice the size of a ladder line, which is the whole point of the layout: one figure to read. */
#t-total {
  color: var(--text);
  font-size: 1.65rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

#t-total.is-overridden { color: var(--brand); }

.pos-totals-struck {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-decoration: line-through;
}

.pos-totals-struck[hidden] { display: none; }

.pos-totals-edit {
  align-self: center;
  padding: 2px 4px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: var(--radius);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}

.pos-totals-edit:hover,
.pos-totals-edit:focus-visible {
  color: var(--text);
  background: var(--sunken);
}

.tender-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.tender-btn {
  padding: 10px 8px;
  background: var(--sunken);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.tender-btn:hover, .tender-btn.active {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--tint);
}

.checkout-btn {
  width: 100%;
  height: var(--control-roomy);   /* TASK-2026-163 S3: the till's one filled button, 48px (large), 700 */
  padding: 0 var(--space-4);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  background: var(--fill);
  color: var(--on-fill);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0;
  font-family: inherit;
}
.checkout-btn:hover:not(:disabled) {
  background: var(--fill-hover);
}
.checkout-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── VARIANT MATRIX ─────────────────────────────────────────────── */
.variant-matrix-wrapper {
  overflow-x: auto;
  background: var(--sunken);
  border-radius: var(--radius);
  padding: 2px;
}
.variant-matrix {
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 400px;
}
.variant-matrix th {
  background: var(--surface);
  padding: 8px 14px;
  font-size: 0.72rem;
  /* Size and colour centre here too; the header cells were falling through to the global
     `th { text-align: start }` (owner, 2026-09-19). */
  text-align: center;
}
.variant-matrix td {
  padding: 8px 14px;
  text-align: center;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s;
  min-width: 80px;
}
.variant-matrix td:hover { background: var(--tint); }
.matrix-cell-low { background: var(--danger-tint) !important; color: var(--danger); }
.matrix-cell-edit {
  width: 60px !important;
  text-align: center;
  padding: 4px 6px !important;
  font-size: 0.82rem !important;
  background: var(--surface) !important;
}

/* ─── KANBAN BOARD ───────────────────────────────────────────────── */
.kanban-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  min-height: calc(calc(100 * var(--vh)) - 200px);
  align-items: flex-start;
}

.kanban-column {
  flex: 0 0 280px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  max-height: calc(calc(100 * var(--vh)) - 180px);
  box-shadow: var(--card-shadow);
}

.kanban-col-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.kanban-col-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kanban-col-count {
  background: var(--sunken);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
}

.kanban-cards {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 60px;
}
.kanban-cards.drag-over {
  background: var(--tint);
  border-radius: var(--radius);
}

.kanban-card {
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: var(--transition);
  border-left: 3px solid transparent;
}
.kanban-card:hover { transform: translateY(-2px); box-shadow: none; }
.kanban-card.dragging { opacity: 0.4; transform: rotate(2deg); }
.kanban-card-title { font-weight: 700; font-size: 0.84rem; margin-bottom: 4px; }
.kanban-card-meta { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 6px; }
.kanban-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* Kanban column accent colors */
.col-pending    .kanban-col-title { color: var(--muted); }
.col-pending    .kanban-card     { border-left-color: var(--text-muted); }
.col-at-tailor  .kanban-col-title { color: var(--info); }
.col-at-tailor  .kanban-card     { border-left-color: var(--info); }
.col-ready      .kanban-col-title { color: var(--brand); }
.col-ready      .kanban-card     { border-left-color: var(--brand); }
.col-completed  .kanban-col-title { color: var(--success); }
.col-completed  .kanban-card     { border-left-color: var(--success); }

/* ─── DENOMINATION PANEL ─────────────────────────────────────────── */
.denomination-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.denomination-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  align-items: center;
  gap: 12px;
}
.denomination-label {
  font-weight: 700;
  color: var(--text);
  font-size: 0.9rem;
}
.denomination-subtotal {
  text-align: right;
  font-weight: 600;
  color: var(--brand);
  font-size: 0.875rem;
}
.shift-audit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}
.shift-audit-row:last-child { border-bottom: none; }
.shift-audit-row label { color: var(--muted); }
.shift-audit-row value { font-weight: 700; }
.discrepancy-positive { color: var(--success); font-weight: 800; }
.discrepancy-negative { color: var(--danger); font-weight: 800; }

/* An unfinished shift is pinned to the top of the history log whatever the date range says, so it needs
   to read as a standing item rather than as part of the range below it. */
.shift-row-unresolved > td {
  background: color-mix(in srgb, var(--warning) 8%, transparent);
}
.shift-row-unresolved > td:first-child {
  box-shadow: inset 3px 0 0 var(--warning);
}
[dir="rtl"] .shift-row-unresolved > td:first-child {
  box-shadow: inset -3px 0 0 var(--warning);
}
.shift-outside-range-badge {
  margin-inline-start: 4px;
  font-size: .7rem;
}

/* ─── NET DIFFERENCE DISPLAY ─────────────────────────────────────── */
.net-diff-container {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  background: var(--sunken);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0;
}
.net-diff-label { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.net-diff-positive {
  color: var(--success) !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
}
.net-diff-negative {
  color: var(--danger) !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
}

/* ─── BARCODE PREVIEW ────────────────────────────────────────────── */
.barcode-preview-area {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--border-active);
}
.barcode-preview-label {
  color: #000;
  font-size: 0.82rem;
  text-align: center;
  font-weight: 600;
}
.barcode-preview-price {
  color: #000;
  font-size: 1.1rem;
  font-weight: 800;
}

/* ─── CATEGORY TREE ──────────────────────────────────────────────── */
.category-tree { list-style: none; padding: 0; }
.tree-node { margin: 2px 0; }
.tree-node-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  transition: var(--transition);
}
.tree-node-row:hover { background: var(--tint); }
.tree-toggle {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.7rem;
  transition: transform 0.2s;
  border: none; background: none;
}
.tree-toggle.open { transform: rotate(90deg); }
.tree-name { flex: 1; font-size: 0.875rem; font-weight: 500; }
.tree-children { padding-left: 24px; }
.tree-children.hidden { display: none; }

/* ─── TABS ───────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
/* Tabs (TASK-2026-163 S3): a tab is 40px high, its label is 400 and muted, the selected one is 700 in the brand colour with a
   2px rule under it. Focus is an inset 1px outline (the default focus rule), never a gap or a ring. */
.tab-btn {
  padding: 0 var(--space-3);
  height: var(--control);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: var(--fs-body);
  font-weight: 400;
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: -1px;
  font-family: inherit;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 700;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─── PROGRESS BAR ───────────────────────────────────────────────── */
.progress-bar-wrapper {
  width: 100%;
  background: var(--sunken);
  border-radius: 2px;
  height: 6px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--teal-400));
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* ─── SECTION HEADERS ────────────────────────────────────────────── */
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ─── FINANCE LEDGER CARDS ───────────────────────────────────────── */
.finance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.finance-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  transition: var(--transition);
  box-shadow: var(--card-shadow);
}
.finance-card:hover { transform: translateY(-2px); box-shadow: none; }
.finance-card-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; }
.finance-card-value { font-size: 1.4rem; font-weight: 800; color: var(--text); }
.finance-card.positive .finance-card-value { color: var(--success); }
.finance-card.negative .finance-card-value { color: var(--danger); }
.finance-card.gold .finance-card-value { color: var(--brand); }

/* ─── SETTINGS PAGE ──────────────────────────────────────────────── */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.setting-row:last-child { border-bottom: none; }
.setting-row label { font-size: 0.875rem; font-weight: 600; color: var(--text); flex: 1; }
.setting-row .setting-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

/* The backup key warning. Logical side, so it sits on the correct edge in Arabic; no explicit
   `display`, because this project has lost four outages to giving one to something the `hidden`
   attribute toggles — and the row above it is conditionally rendered. */
.backup-key-warning {
  margin-top: 6px;
  padding: 8px 10px;
  border-inline-start: 0.1875rem solid var(--warning, var(--brand));
  background: var(--sunken);
  border-radius: var(--radius);
  color: var(--warning, var(--brand));
  font-size: 0.78rem;
  line-height: 1.5;
}
/* Spec 009 US2 (mockup M3): "Configured" / "Not set" beside a Backup secret. A badge shouts in capitals; this one reads as a word. */
.backup-secret-state { margin-inline-start: 8px; gap: 4px; text-transform: none; letter-spacing: normal; font-size: 0.72rem; vertical-align: middle; }
/* Spec 009 US4 (mockup M5): the bell's "Needs you" section, above the other notifications, the owner's alone. */
.bell-sec-head { padding: 10px 14px 4px; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.bell-need { display: flex; align-items: flex-start; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line, var(--line)); }
.bell-need-text { flex: 1; min-width: 0; font-size: 0.8rem; line-height: 1.45; color: var(--text); }
/* Spec 009 US8 (approved mockup M4, proposal 2): the manager dialog dims the return lightly and does not blur it, so the
   cashier can see her return is still there. An id outranks the shared overlay rule's !important. */
#manager-override-modal { background: rgba(0, 0, 0, 0.35) !important; backdrop-filter: none !important; }
.setting-control { min-width: 160px; }

/* ─── BACKUP TABLE ROW SELECTION & CURSOR FIX ───────────────────────── */
.backup-history-table tr.backup-row-item {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.backup-history-table tr.backup-row-item:hover {
  background: var(--tint) !important;
}
.backup-history-table tr.backup-row-item.active-row {
  background: rgba(212, 160, 23, 0.12) !important;
  box-shadow: inset 4px 0 0 var(--brand);
}
html[dir="rtl"] .backup-history-table tr.backup-row-item.active-row {
  box-shadow: inset -4px 0 0 var(--brand);
}
.backup-table-toolbar {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--sunken);
  border-bottom: 1px solid var(--line);
}

/* Row 1 – equal-width buttons with gaps */
.backup-toolbar-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.backup-toolbar-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 8px 10px;
  border-radius: 2px !important;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  white-space: nowrap;
  min-width: 0;
  cursor: pointer;
}
.backup-toolbar-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Verify button – ghost style (matches its original btn-ghost) */
.backup-toolbar-btn.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
}
.backup-toolbar-btn.btn-ghost:not(:disabled):hover {
  background: var(--tint);
  border-color: var(--muted);
  color: var(--text);
}

/* Action buttons (inspect / download / restore) – gold-tinted neutral */
.backup-toolbar-btn.btn-secondary {
  background: var(--tint);
  color: var(--brand);
  border-color: rgba(var(--accent-rgb), 0.28);
}
.backup-toolbar-btn.btn-secondary:not(:disabled):hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: var(--brand);
}

/* Delete button – danger red */
.backup-toolbar-btn.btn-danger {
  background: rgba(220, 38, 38, 0.10);
  color: var(--danger, #ef4444);
  border-color: rgba(220, 38, 38, 0.30);
}
.backup-toolbar-btn.btn-danger:not(:disabled):hover {
  background: rgba(220, 38, 38, 0.20);
  border-color: var(--danger, #ef4444);
}

/* Row 2 – selected snapshot label */
.backup-toolbar-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  flex-wrap: wrap;
  min-height: 32px;
}


/* ─── RESTORE SUCCESS MODAL ─────────────────────────────────────────── */
#restore-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#restore-success-overlay.rsm-visible {
  opacity: 1;
}
#restore-success-overlay.rsm-visible .restore-success-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.restore-success-modal {
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 2px;
  padding: 40px 36px 32px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(var(--accent-rgb), 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: translateY(24px) scale(0.96);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  position: relative;
  overflow: hidden;
}
/* Subtle gold gradient top-bar */
.restore-success-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fill-hover), var(--brand), var(--teal-400));
  border-radius: 2px 2px 0 0;
}

/* Animated SVG Checkmark */
.rsm-icon-ring {
  margin: 0 auto 24px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--tint);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0.07);
}
.rsm-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rsm-checkmark {
  width: 48px;
  height: 48px;
}
.rsm-circle {
  stroke: var(--brand);
  stroke-width: 2;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-linecap: round;
  animation: rsm-circle-draw 0.55s cubic-bezier(0.65, 0, 0.45, 1) 0.2s forwards;
}
.rsm-check {
  stroke: var(--brand);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: rsm-check-draw 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.65s forwards;
}
@keyframes rsm-circle-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes rsm-check-draw {
  to { stroke-dashoffset: 0; }
}

.rsm-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}
.rsm-subtitle {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.rsm-details {
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 14px 16px;
  margin-bottom: 28px;
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rsm-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}
.rsm-detail-icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.4;
  display: flex;
  align-items: center;
}
.rsm-detail-filename code {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--brand);
  background: var(--tint);
  padding: 1px 5px;
  border-radius: 2px;
  word-break: break-all;
}
.rsm-detail-warning {
  color: var(--warning, #f59e0b);
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 2px;
  padding: 8px 10px;
  margin: 2px 0;
}

.rsm-proceed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 24px;
  background: linear-gradient(135deg, var(--brand), var(--fill-hover));
  color: #1a1200;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.28);
  font-family: inherit;
}
.rsm-proceed-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.38);
}
.rsm-proceed-btn:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.rsm-footnote {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 14px 0 0 0;
  opacity: 0.7;
}

/* ─── MODAL SHAKE ANIMATION FOR DISABLED INTERACTION ───────────────── */
@keyframes modal-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.modal-shake {
  animation: modal-shake 0.4s ease-in-out !important;
}

/* ─── UNIVERSAL ACCESSIBILITY FOCUS HIGHLIGHT SYSTEM ─────────────────────────
 *
 * `:focus-visible` only. This keyed on plain `:focus` as well, which a mouse click sets — so
 * clicking any button left a ring drawn around it that stayed until something else was clicked.
 * The owner reported it twice: on the group pin (TASK-2026-036 FR-033, worked around by excluding
 * that one button) and again on a section head and the theme switch, 2026-09-21. Excluding buttons
 * one at a time was never going to end; the rule itself was wrong.
 *
 * Nothing is lost for a keyboard user. `:focus-visible` matches whenever focus arrives by keyboard,
 * and browsers treat a text field as always focus-visible, so inputs, selects and textareas keep
 * their ring however they were reached. What goes is the ring a pointer leaves behind. */
/* TASK-2026-163 S3 (design system v15): focus is ONE 1px line on the control's own edge, no gap, no second ring, no glow.
   The universal rule that drew a 1px ring plus a glow here (with `!important`, on a long list of selectors) is gone. The
   replacement is in the S3 block above the lane anchors: a default inset 1px outline, and a border colour change for
   buttons, the (i) button and fields. */

/* ─── RESTORE WIZARD STEP PROGRESS BAR ────────────────────────────────── */
.wizard-progress-container {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.wizard-step-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--restore-progress-gap, 8px);
  margin-bottom: 10px;
}
.wizard-step-item {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sunken);
  border: 2px solid var(--line);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.82rem;
  transition: all 0.25s ease;
}
.wizard-step-connector {
  display: block;
  height: 2px;
  min-inline-size: 0;
  background: var(--line);
  transition: background 0.25s ease;
}
.wizard-step-connector.completed {
  background: var(--brand);
}
.wizard-step-item.active {
  background: var(--tint);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 0 12px transparent;
}
.wizard-step-item.completed {
  background: var(--brand);
  border-color: var(--brand);
  color: #1a1200;
}
.wizard-step-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.wizard-step-label {
  flex: 1;
  text-align: center;
}
.wizard-step-label.active {
  color: var(--brand);
  font-weight: 700;
}

/* ─── RESTORE TERMINAL OUTCOMES ───────────────────────────────────────── */
.restore-terminal-card {
  max-width: 560px;
  width: 92%;
  text-align: center;
  padding: 32px 28px !important;
}
.restore-terminal-icon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 14px;
  font-size: 1.35rem;
}
.restore-terminal-icon.success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 42%, transparent);
}
.restore-terminal-icon.warning {
  color: var(--brand);
  background: var(--tint);
  border: 1px solid var(--brand);
}
.restore-terminal-icon.failure {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 42%, transparent);
}
.restore-terminal-title {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 1.3rem;
}
.restore-terminal-copy {
  margin: 0 auto 18px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 430px;
}
.restore-terminal-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 12px;
  padding: 12px;
  text-align: start;
  border-radius: var(--radius);
  background: var(--sunken);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}
.restore-terminal-notice.success {
  border-inline-start: 3px solid var(--success);
}
.restore-terminal-snapshot {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}
.restore-terminal-snapshot code {
  color: var(--brand);
  direction: ltr;
  unicode-bidi: plaintext;
}
.restore-terminal-countdown {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.88rem;
}
.restore-terminal-action {
  min-width: 190px;
}
.restore-terminal-diagnostic-label {
  display: block;
  margin: 0 0 7px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: start;
}
.restore-terminal-diagnostic {
  min-height: 116px;
  max-height: 210px;
  margin: 0 0 18px;
  padding: 12px;
  overflow: auto;
  text-align: start;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  direction: ltr;
  unicode-bidi: plaintext;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sunken);
  color: var(--muted);
  font: 0.78rem/1.55 var(--font-mono, monospace);
}
.restore-terminal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

/* Restore recovery is rendered before normal authenticated routing when the
   browser reconnects to a durable server-owned restore operation. */
.login-card.restore-recovery-card {
  width: min(100%, 540px);
  max-width: 540px;
  padding: clamp(24px, calc(5 * var(--vw)), 40px);
  text-align: center;
}
.restore-recovery-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  color: var(--brand);
  background: var(--tint);
  font-size: 1.45rem;
}
.restore-recovery-title {
  margin: 0 0 10px;
  color: var(--text);
  font-size: clamp(1.25rem, calc(3 * var(--vw)), 1.6rem);
}
.restore-recovery-message {
  max-width: 460px;
  margin: 0 auto 14px;
  color: var(--muted);
  line-height: 1.65;
}
.restore-recovery-detail {
  margin: 0 0 20px;
  padding: 12px;
  color: var(--muted);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.restore-recovery-action {
  min-height: var(--control, 44px);
}
@media (max-width: 520px) {
  .restore-terminal-card { padding: 26px 18px !important; }
  .restore-terminal-actions > .btn { flex: 1 1 100%; }
}

/* ─── THEME-ADAPTIVE TIME PICKER ICON ────────────────────────────── */
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: opacity(0.85);
  transition: filter 0.2s ease, opacity 0.2s ease;
}
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  filter: opacity(1);
}
[data-theme="executive"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="github-dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.85);
}
[data-theme="navy"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="github"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0) opacity(0.75);
}

/* ─── SETTINGS SUB-TABS & RECEIPT BUILDER ───────────────────────── */
.settings-tabs-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  background: transparent;
  border: 0;
  border-bottom: var(--border-width) solid var(--line);
  border-radius: 0;
  padding: 0;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  position: relative;
  box-sizing: border-box;
}
.settings-tabs-header::-webkit-scrollbar {
  display: none;
}

.settings-tabs-header .tab-btn {
  scroll-snap-align: start;
}

/* ─── SUB-TABS (TASK-2026-163 S3: tabs underline, segments join; no more equal-width boxed pills) ──────────────────── */
.tabs-header,
.settings-tabs-header,
.tabs-nav,
.tab-bar,
.builder-sections-tabs,
.subtab-bar,
.tabs {
  display: flex !important;
  width: 100% !important;
  align-items: stretch !important;
  gap: var(--space-1) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: var(--border-width) solid var(--line) !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate;
  scrollbar-width: none !important;
  margin-bottom: var(--space-4) !important;
}
/* A segmented control: joined chips in one 1px frame; the chosen chip is the strong tint with brand text. */
.preview-toggle-container,
.lang-toggle-container {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: auto !important;
  max-width: 100%;
  padding: 0 !important;
  background: var(--surface) !important;
  border: var(--border-width) solid var(--line-strong) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-sizing: border-box !important;
  position: relative !important;
  scrollbar-width: none !important;
  margin-bottom: var(--space-4) !important;
}

.tabs-header::-webkit-scrollbar,
.settings-tabs-header::-webkit-scrollbar,
.tabs-nav::-webkit-scrollbar,
.tab-bar::-webkit-scrollbar,
.builder-sections-tabs::-webkit-scrollbar,
.preview-toggle-container::-webkit-scrollbar,
.lang-toggle-container::-webkit-scrollbar,
.subtab-bar::-webkit-scrollbar,
.tabs::-webkit-scrollbar {
  display: none !important;
}

.tab-indicator-pill {
  display: none !important;
}

/* The tab buttons. Declared important because the older universal rules (and the Employees strip's own overrides, which
   stay at a higher specificity) are. */
.tab-btn,
.settings-tabs-header .tab-btn,
.builder-sec-tab-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: var(--space-2) !important;
  height: var(--control);
  padding: 0 var(--space-3) !important;
  font-family: inherit !important;
  font-size: var(--fs-body);
  font-weight: 400 !important;
  line-height: 1;
  color: var(--muted);
  position: relative;
  z-index: 2;
  transition: var(--transition);
  box-sizing: border-box;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: -1px;
}
.tab-btn:hover,
.settings-tabs-header .tab-btn:hover,
.builder-sec-tab-btn:hover {
  color: var(--text);
  background: transparent !important;
}
.tab-btn.active,
.settings-tabs-header .tab-btn.active,
.builder-sec-tab-btn.active {
  background: transparent !important;
  color: var(--brand) !important;
  border-bottom: 2px solid var(--brand) !important;
  font-weight: 700 !important;
  animation: none !important;
}
.tab-btn i,
.tab-btn svg,
.tab-btn .tab-icon,
.settings-tabs-header .tab-btn .tab-icon,
.builder-sec-tab-btn .tab-icon {
  display: inline-flex !important;
  align-items: center !important;
  color: inherit;
  transition: color var(--duration-quick) var(--ease-standard);
}
.tab-btn.active i,
.tab-btn.active svg,
.tab-btn.active .tab-icon,
.settings-tabs-header .tab-btn.active .tab-icon,
.builder-sec-tab-btn.active .tab-icon {
  color: var(--brand) !important;
}

/* The segment chips (preview and language toggles). */
.preview-toggle-btn,
.lang-toggle-btn {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  height: var(--control);
  padding: 0 var(--space-4) !important;
  font-family: inherit !important;
  font-size: var(--fs-body);
  font-weight: 400 !important;
  line-height: 1;
  color: var(--text);
  position: relative;
  z-index: 2;
  transition: var(--transition);
  box-sizing: border-box;
  background: var(--surface) !important;
  border: 0 !important;
  border-inline-start: var(--border-width) solid var(--line-strong) !important;
  border-radius: 0 !important;
  cursor: pointer;
}
.preview-toggle-btn:first-child,
.lang-toggle-btn:first-child { border-inline-start: 0 !important; }
.preview-toggle-btn:hover,
.lang-toggle-btn:hover { color: var(--brand); }
.preview-toggle-btn.active,
.lang-toggle-btn.active {
  background: var(--tint-strong) !important;
  color: var(--brand) !important;
  font-weight: 700 !important;
  animation: none !important;
}

/* ─── ELASTIC SPRING PAGE CONTENT ANIMATION ENGINE ────────────────────────────── */
/* The name is old; the motion is not (TASK-2026-163 S3): a 4px rise and a fade on the brand curve, no overshoot, no bounce. */
@keyframes elasticSpringPageIn {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-panel.active,
.tab-content.active,
.tab-content:not(.hidden),
.builder-sec-content:not(.hidden),
.tab-panel:not(.hidden),
#staff-workspace-panel,
#tab-content-container,
#bday-main-content,
#bday-current-panel,
#bday-bank-panel,
#bday-history-panel {
  animation: elasticSpringPageIn var(--duration-base) var(--ease-standard) forwards !important;
}

.builder-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 24px;
  align-items: start;
}

@keyframes highlight-pulse {
  0%, 100% { border-color: var(--focus); }
  50% { border-color: var(--line-strong); }
}

.builder-highlight-active,
.btn-highlight-active,
.highlight-active {
  animation: highlight-pulse 1.5s infinite !important;
  background-color: transparent !important;
  border-radius: 2px;
  position: relative;
  z-index: 5;
  outline: none !important;
  border: var(--border-width) solid var(--focus) !important;
  box-shadow: none !important;
}

.builder-controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.builder-preview-sticky {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: none;
}

.builder-preview-title {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  width: 100%;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Sleek Segmented Switcher */
.preview-toggle-container,
.lang-toggle-container {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 3px;
  border: 1px solid var(--line);
  gap: 2px;
  box-sizing: border-box;
}

.preview-toggle-btn,
.lang-toggle-btn {
  flex: 1 1 0px;
  justify-content: center;
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.preview-toggle-btn:hover,
.lang-toggle-btn:hover {
  color: var(--text);
  background: var(--tint);
}

.preview-toggle-btn.active,
.lang-toggle-btn.active {
  background: var(--brand);
  color: #000;
  border-color: var(--brand);
  font-weight: 600;
}

.simulated-receipt-wrapper {
  background: #fdfdfd;
  background-image: linear-gradient(#e0e0e0 0.5px, transparent 0.5px);
  background-size: 100% 40px;
  border: 1px solid #d1d5db;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.02);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 100%;
  padding-bottom: 15px;
}

/* Realistic receipt tear slot at top */
.simulated-receipt-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: #111827;
  border-bottom: 2px solid #374151;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.5);
  z-index: 10;
}

/* Tear wave effect at bottom of paper */
.simulated-receipt-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12px;
  background-image: 
    linear-gradient(135deg, var(--bg) 25%, transparent 25%), 
    linear-gradient(225deg, var(--bg) 25%, transparent 25%), 
    linear-gradient(45deg, var(--bg) 25%, transparent 25%), 
    linear-gradient(315deg, var(--bg) 25%, transparent 25%);
  background-position: 0 0, 0 0, 0 0, 0 0;
  background-size: 8px 16px;
  background-repeat: repeat-x;
  z-index: 10;
}

.builder-sections-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  gap: 6px;
  margin-bottom: 20px;
  background: var(--surface);
  padding: 4px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-sizing: border-box;
}

.builder-sec-tab-btn {
  flex: 1 1 0px;
  justify-content: center;
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.builder-sec-tab-btn:hover {
  background: var(--tint);
  color: var(--text);
}

.builder-sec-tab-btn.active {
  background: var(--sunken);
  color: var(--brand);
  border-color: var(--border-active);
  box-shadow: none;
  font-weight: 700;
}

.builder-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.builder-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.builder-form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* TASK-2026-163 S3: the builder's fields take the shared field recipe (the 40px box, the field border, the surface colour, the
   one-line focus). What stays here is only that they fill their group. */
.builder-form-group input[type="text"],
.builder-form-group input[type="number"],
.builder-form-group select,
.builder-form-group textarea {
  width: 100%;
  box-sizing: border-box;
}
.builder-form-group select { padding-inline-end: 36px; }   /* room for the arrow, which sits at the inline end */

.builder-form-group textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.6;
}

.builder-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 10px;
  color: var(--text);
  transition: var(--transition);
}

.builder-checkbox-row:hover {
  background: var(--surface);
  border-color: var(--border-active);
}

.builder-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
}

.builder-checkbox-row label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

@media (max-width: 900px) {
  .builder-layout {
    grid-template-columns: 1fr;
  }
  .builder-preview-sticky {
    position: static;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ─── CHART WRAPPER ──────────────────────────────────────────────── */
.chart-wrapper {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--card-shadow);
}
.chart-title { font-size: 0.85rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }

/* ─── RECEIPT STYLES ─────────────────────────────────────────────── */
.receipt-container {
  background: #fff;
  color: #000;
  border-radius: var(--radius);
  padding: 24px;
  font-family: var(--font-sans, inherit);
  max-width: 320px;
  margin: 0 auto;
}
.receipt-header { text-align: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px dashed #ccc; }
.receipt-store-name { font-size: 1.1rem; font-weight: 700; }
.receipt-ref { font-size: 0.75rem; color: #666; }
.receipt-row { display: flex; justify-content: space-between; font-size: 0.82rem; padding: 3px 0; }
.receipt-row.total { font-weight: 700; font-size: 0.95rem; border-top: 1px dashed #ccc; padding-top: 8px; margin-top: 4px; }
.receipt-divider { border: none; border-top: 1px dashed #ccc; margin: 10px 0; }

/* ─── UTILITY CLASSES ────────────────────────────────────────────── */
.hidden        { display: none !important; }
.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.grid-2        { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media screen and (max-width: 768px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }  /* TASK-2026-124: folds on a phone (owner approved) */
.grid-3        { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-4        { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; }
.gap-1         { gap: 4px; }
.gap-2         { gap: 8px; }
.gap-3         { gap: 12px; }
.gap-4         { gap: 16px; }
.gap-6         { gap: 24px; }
.w-full        { width: 100%; }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
/* Logical pair. `text-end` is written 99 times across ten modules and had no
   rule behind it outside three tables that declared their own. */
.text-start    { text-align: start; }
.text-end      { text-align: end; }
.text-muted    { color: var(--text-muted); }
.text-secondary{ color: var(--muted); }
.text-success  { color: var(--success); }
.text-danger   { color: var(--danger); }
.text-warning  { color: var(--warning); }
.text-gold     { color: var(--brand); }
.font-bold     { font-weight: 700; }
.font-mono     { font-family: var(--font-sans, inherit); font-variant-numeric: tabular-nums; }
.truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-1 { margin-top: 4px; }   .mb-1 { margin-bottom: 4px; }
.mt-2 { margin-top: 8px; }   .mb-2 { margin-bottom: 8px; }
.mt-3 { margin-top: 12px; }  .mb-3 { margin-bottom: 12px; }
.mt-4 { margin-top: 16px; }  .mb-4 { margin-bottom: 16px; }
.mt-6 { margin-top: 24px; }  .mb-6 { margin-bottom: 24px; }
.p-1  { padding: 4px; }
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }

/* ─── ANIMATIONS ─────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
@keyframes gradientShift {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalEntrance {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.page-enter {
  animation: pageFadeIn var(--duration-base) var(--ease-standard) forwards;
  will-change: opacity, transform;
}

/* Theme transition overlay */
.theme-transitioning,
.theme-transitioning * {
  transition: background-color var(--duration-calm) var(--ease-standard), border-color var(--duration-calm) var(--ease-standard), color var(--duration-calm) var(--ease-standard) !important;
}

/* ─── ACCESSIBILITY & PREFERS REDUCED MOTION ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .page-enter {
    animation: none !important;
  }
}

/* ─── UNIVERSAL SUB-TAB TOUCH SCROLLING & STICKY TABLE HEADERS ───── */
.tabs-header, .settings-tabs-header, .tabs-nav, .tab-bar, .builder-sections-tabs, .subtab-bar {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  max-width: 100% !important;
}
.tabs-header::-webkit-scrollbar,
.settings-tabs-header::-webkit-scrollbar,
.subtab-bar::-webkit-scrollbar {
  display: none !important;
}
.tab-btn, .builder-sec-tab-btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

table thead th,
.data-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: var(--card) !important;
}

/* ─── SLEEK SUB-TAB SCROLL ARROW CONTROLS ──────────────────────────── */
.subtab-scroll-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.subtab-scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sunken);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  z-index: 5;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: none;
}
.subtab-scroll-btn:hover {
  background: var(--tint);
  border-color: var(--brand);
  color: var(--brand);
  transform: scale(1.08);
}
.subtab-scroll-left {
  margin-right: 6px;
}
.subtab-scroll-right {
  margin-left: 6px;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .finance-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .main-content > *:not(.loading-screen):not(.modal-overlay) {
    min-width: 0 !important;
    width: 100% !important;
  }
  .pos-grid,
  .kpi-grid,
  .finance-grid,
  .settings-grid,
  .form-row,
  .form-row-3 {
    grid-template-columns: 1fr !important;
  }
  .pos-right {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 100 !important;
    background: var(--surface) !important;
    border-top: var(--border-width) solid var(--line-strong) !important;
    padding: 16px !important;
    margin-top: 16px !important;
    box-shadow: none !important;
  }
}
@media (max-width: 1024px) {
  .header-clock-date { display: none !important; }
  .header-clock { width: auto !important; min-width: auto !important; padding: 0 10px !important; }
  .shift-status { padding: 0 8px !important; font-size: 0.8rem !important; white-space: nowrap !important; }
  .top-header,
  .header-controls { gap: var(--shell-compact-gap); }
}
@media (max-width: 768px) {
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease, width 0.3s ease;
    z-index: 1200; /* On mobile, side panel overlay sits on top of header/main content */
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .main-wrapper {
    margin-left: 0 !important;
    position: relative;
    z-index: 1; /* Low layer on mobile so sidebar overlays it */
    /* Sideways only. `overflow: hidden` here clipped the page vertically as well, and with the body
       locked there was nothing left that could scroll.
       `clip`, not `hidden` (spec 046 revision (b), RB13, TASK-2026-089): `hidden` still made this box a scroll container, so
       nothing inside it could stick to the top while the document scrolled — the Permissions search is pinned there, as the
       approved drawing's build note asks. `clip` cuts the same sideways overflow without being a scroller. The `hidden`
       line stays first for a browser that does not know `clip`. */
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: visible;
  }
  .mobile-menu-btn { display: flex; }
  .top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 105;
    padding-inline: var(--shell-header-inline-padding-mobile);
    overflow: hidden;
  }
  .header-context { gap: .375rem; }
  .header-context #runtime-environment-badge { display: none !important; }
  .header-context #tenant-context-badge {
    flex: 0 1 auto;
    min-inline-size: 0;
    max-inline-size: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .header-controls { gap: .375rem; }
  .header-controls .header-clock { display: none !important; }
  .mobile-menu-btn,
  .header-back-btn,
  .bell-btn,
  .quick-lang-btn,
  .shift-status,
  #tenant-context-badge {
    min-inline-size: var(--shell-control-size);
    min-block-size: var(--shell-control-size);
  }
  .main-content {
    padding: 16px;
    margin-top: var(--header-height);
    overflow-x: hidden;
    overflow-x: clip;  /* spec 046 revision (b), RB13: not a scroller, so a pinned line can stick (see .main-wrapper above) */
    /* The page itself scrolls on a phone, which is what the fixed header and this margin were
       already built for — and it is the better behaviour besides: the address bar collapses, the
       scrollbar is the one the phone draws, and a flick keeps its momentum. A nested scroller with
       no height to scroll inside gave none of that. */
    overflow-y: visible;
  }
  /* Shell children must fit the viewport; data-heavy surfaces own their scrolling. */
  .main-content > *:not(.loading-screen):not(.modal-overlay) {
    min-width: 0;
  }
  .settings-tabs-header {
    scroll-snap-type: inline proximity;
    justify-content: flex-start !important;
  }
  .settings-tabs-header .tab-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-inline-size: var(--shell-tab-min-inline-size) !important;
  }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .finance-grid { grid-template-columns: 1fr 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .modal-card { margin: 10px; border-radius: var(--radius); }
  .kanban-board { padding-bottom: 16px; }
  .header-clock .header-date { display: none; }
  /* A button keeps its normal size on a narrow screen (TASK-2026-163 look pass): the rule that stood here shrank every .btn to 0.8rem and its padding. */
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .finance-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .top-header { padding-inline: var(--shell-header-inline-padding-mobile); gap: .375rem; }
  .header-title { font-size: .9rem; }
  .shift-status { padding-inline: .5rem !important; }
  .shift-status #shift-label { display: none; }
  .quick-lang-btn { padding-inline: .5rem; }
  /* Likewise no .btn rule here: it used to drop the label to 0.76rem (10.64px, under the 12px floor), the padding to 5px 10px and the gap to 4px. */
}

/* ─── RECEIPT DESIGNER VARIABLE CALLOUT NOTE ────────────────────────── */
.receipt-note-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--tint, rgba(var(--accent-rgb), 0.08));
  border: 1px solid var(--border-active, rgba(var(--accent-rgb), 0.25));
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 14px;
  width: 100%;
  box-sizing: border-box;
}

.receipt-note-callout .callout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand, var(--brand));
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.receipt-note-callout .callout-content,
.receipt-note-callout .callout-text {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.7;
  flex: 1;
}

.var-pill {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand, var(--brand));
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 2px 6px;
  margin: 0 2px;
  display: inline-block;
  unicode-bidi: isolate;
  vertical-align: middle;
}

/* ─── PRINT STYLES ───────────────────────────────────────────────── */
@media print {
  body:not(.print-stock-report):not(.print-a4) * {
    visibility: hidden;
  }
  body:not(.print-stock-report):not(.print-a4) #receipt-modal, body:not(.print-stock-report):not(.print-a4) #receipt-modal *, body:not(.print-stock-report):not(.print-a4) .receipt-container, body:not(.print-stock-report):not(.print-a4) .receipt-container * {
    visibility: visible;
  }
  #receipt-modal {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  #receipt-modal .modal-card {
    background: #fff !important;
    color: #000 !important;
    border: none !important;
    box-shadow: none !important;
    width: 80mm !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  #receipt-modal .modal-header,
  #receipt-modal .modal-footer {
    display: none !important;
  }
  .receipt-container {
    width: 80mm !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    background: #fff !important;
    color: #000 !important;
    font-family: var(--font-sans, inherit) !important;
    font-size: 12px !important;
  }

  /* Detailed A4 Stock Tracking Report & Invoice Print Styles */
  body.print-stock-report,
  body.print-a4 {
    background: #ffffff !important;
    color: #000000 !important;
  }
  body.print-stock-report .app-shell,
  body.print-a4 .app-shell {
    display: block !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
  }
  body.print-stock-report .sidebar,
  body.print-stock-report .top-header,
  body.print-stock-report .print-hide,
  body.print-a4 .sidebar,
  body.print-a4 .top-header,
  body.print-a4 .print-hide {
    display: none !important;
  }
  body.print-stock-report .main-wrapper,
  body.print-stock-report .main-content,
  body.print-a4 .main-wrapper,
  body.print-a4 .main-content {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    overflow: visible !important;
  }
  /* Reset horizontal scroll constraints when printing */
  .main-content,
  .main-content > *:not(.loading-screen):not(.modal-overlay) {
    min-width: 0 !important;
    overflow: visible !important;
  }
  body.print-stock-report *,
  body.print-a4 * {
    visibility: visible !important;
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-color: #ddd !important;
  }
  body.print-stock-report .print-report-header {
    display: block !important;
  }
  body.print-stock-report .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
  }
  body.print-stock-report .kpi-card {
    border: 1px solid #ddd !important;
    padding: 10px !important;
    background: #fafafa !important;
    border-radius: 2px !important;
    box-sizing: border-box !important;
  }
  body.print-stock-report .kpi-value {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #000000 !important;
  }
  body.print-stock-report .kpi-label {
    font-size: 8px !important;
    color: #666 !important;
    text-transform: uppercase !important;
  }
  body.print-stock-report .table-wrapper {
    overflow: visible !important;
  }
  body.print-stock-report table {
    width: 100% !important;
    border-collapse: collapse !important;
    page-break-inside: auto !important;
  }
  body.print-stock-report tr {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
  }
  body.print-stock-report th, 
  body.print-stock-report td {
    border: 1px solid #ddd !important;
    padding: 6px 8px !important;
    font-size: 9px !important;
    text-align: left !important;
  }
  body.print-stock-report th {
    background: #f0f0f0 !important;
    font-weight: bold !important;
  }
  body.print-stock-report td .badge {
    border: 1px solid #000 !important;
    background: transparent !important;
    color: #000 !important;
    padding: 2px 4px !important;
  }
}

/* ─── TABS COMPONENT FOR FINANCE LEDGER ───────────────────────────── */
/* TASK-2026-163 S3: the tab buttons are drawn once, above (underline tabs); only the strip's own gap lives here. */
.tabs-header {
  display: flex;
  gap: var(--space-1);
  border-bottom: var(--border-width) solid var(--line);
  padding-bottom: 0;
}
.tab-content.hidden {
  display: none !important;
}

/* ─── ARABIC RTL FLOW OVERRIDES ──────────────────────────────────── */
html[dir="rtl"] {
  text-align: right;
}
html[dir="rtl"] body {
  font-family: var(--font-sans, 'Cairo', 'Tajawal', 'Inter', -apple-system, sans-serif);
}
html[dir="rtl"] .sidebar {
  /* The same boundary, on the other side (TASK-2026-028 FR-032). */
  border-left: 1px solid var(--line);
  border-right: none;
}
/* This used to flip to `direction: ltr` so the reserved scrollbar gutter sat on the screen's
   outer edge — which in Arabic is the sidebar's RIGHT edge, and that is where the buttons
   start. The 15px gutter is reserved whether or not anything scrolls, so every nav button
   began 23px in from the edge the reader's eye lands on, against 8px on the other side.
   Left as `rtl`, the gutter goes to the far side, next to the page, and the buttons sit
   flush. Reported by the owner from a screenshot, 2026-09-21. */
html[dir="rtl"] .sidebar-nav {
  direction: rtl;
}
html[dir="rtl"] .sidebar-nav > * {
  direction: rtl; /* Keeps inner Arabic content RTL */
}
@media (min-width: 769px) {
  html[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
  }
  html[dir="rtl"] .main-wrapper {
    margin-right: var(--sidebar-width);
    margin-left: 0;
  }
  html[dir="rtl"] .sidebar.collapsed + .main-wrapper {
    margin-right: var(--sidebar-collapsed);
    margin-left: 0;
  }
}
@media (max-width: 768px) {
  html[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  html[dir="rtl"] .sidebar.mobile-open {
    transform: translateX(0);
  }
}
html[dir="rtl"] .sidebar.collapsed .nav-item:hover::after {
  left: auto;
  right: calc(var(--sidebar-collapsed) + 8px);
}
html[dir="rtl"] .nav-item {
  border-left: none;
  border-right: 3px solid transparent;
  padding: 9px 20px 9px 16px;
}
html[dir="rtl"] .nav-item:hover {
  border-right-color: var(--border-active);
  border-left-color: transparent;
}
html[dir="rtl"] .nav-item.active {
  border-right-color: var(--brand);
  border-left-color: transparent;
  outline: none !important;
  box-shadow: none !important;
}
html[dir="rtl"] .sidebar-toggle {
  transform: scaleX(-1);
}
html[dir="rtl"] .sidebar.collapsed .sidebar-toggle {
  transform: scaleX(-1) rotate(90deg);
}

/* Search icons realignment in POS and lookup */
html[dir="rtl"] .pos-cust-search-icon,
html[dir="rtl"] .pos-search-icon {
  right: 14px !important;
  left: auto !important;
}
html[dir="rtl"] #customer-search,
html[dir="rtl"] .pos-cust-search-input,
html[dir="rtl"] .pos-search-input {
  padding-right: 42px !important;
  padding-left: 14px !important;
}
html[dir="ltr"] .pos-cust-search-icon,
html[dir="ltr"] .pos-search-icon {
  left: 14px !important;
  right: auto !important;
}
html[dir="ltr"] #customer-search,
html[dir="ltr"] .pos-cust-search-input,
html[dir="ltr"] .pos-search-input {
  padding-left: 42px !important;
  padding-right: 14px !important;
}

/* Phone inputs LTR flow but right-aligned placeholders in RTL mode */
html[dir="rtl"] input[type="tel"] {
  text-align: left;
  direction: ltr;
}
html[dir="rtl"] input[type="tel"]::placeholder {
  text-align: right;
}

/* Form and table alignment.
   There used to be a `html[dir="rtl"] th, html[dir="rtl"] td { text-align: right }`
   here. It was specificity (0,1,2), so it beat .text-center (0,1,0) and every
   `.some-table td { text-align: … }` (0,1,1) — a centred column rendered
   right-aligned in Arabic, and three tables had already been given bespoke
   `.x-table td.text-end` rules to climb over it. `th` is `text-align: start`
   now, `td` inherits start, and both resolve to right in Arabic on their own. */
html[dir="rtl"] .text-right {
  text-align: left !important;
}
html[dir="rtl"] .text-left {
  text-align: right !important;
}
html[dir="rtl"] .modal-close {
  left: 20px;
  right: auto;
}
html[dir="rtl"] .kpi-card {
  text-align: right;
}
html[dir="rtl"] .finance-card {
  text-align: right;
}

/* A username and a password are typed in Latin letters, so the VALUE stays left-to-right —
   an RTL run would reorder it as it is typed. Where it sits is a separate question: in Arabic
   the label and the typed value both belong on the right, where the reader's eye starts.
   Before this, the field ran right-to-left with its label pinned 14px from the LEFT edge,
   228px of empty box away from the side an Arabic reader looks at first. */
#login-username,
#login-password {
  direction: ltr !important;
  text-align: left !important;
}
html[dir="rtl"] #login-username,
html[dir="rtl"] #login-password {
  text-align: right !important;
}
/* The floating label is positioned absolutely, so it needs the matching side. Physical
   sides here rather than `inset-inline-start`, because the rule they override is physical
   and !important, and a logical property would lose to it in Arabic. */
.login-form .form-group label {
  left: 14px !important;
  right: auto !important;
}
html[dir="rtl"] .login-form .form-group label {
  right: 14px !important;
  left: auto !important;
}

/* --- Sales Details Redesign ACCENTS & BADGES --- */
.card-sale {
  border-top: 4px solid var(--success) !important;
}
.card-return {
  border-top: 4px solid var(--danger) !important;
}
.card-exchange {
  border-top: 4px solid var(--color-primary) !important;
}
.badge-sale {
  background-color: var(--success) !important;
  color: var(--on-fill) !important;
}
.badge-return {
  background-color: var(--danger) !important;
  color: var(--on-fill) !important;
}
.badge-exchange {
  background-color: var(--color-primary) !important;
  color: var(--on-fill) !important;
}

/* --- PRINT overrides for Sales Details A4 Invoice --- */
@media print {
  body.print-sale-details .app-shell {
    display: none !important;
  }
  body.print-sale-details #print-a4-invoice-container {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.print-sale-details #print-a4-invoice-container * {
    visibility: visible !important;
    color: #000 !important;
    border-color: #000 !important;
  }
  body.print-sale-details .a4-table th, 
  body.print-sale-details .a4-table td {
    border: 1px solid #ddd !important;
    padding: 6px 8px !important;
  }
  body.print-sale-details .a4-table th {
    background: #f5f5f5 !important;
    font-weight: 700 !important;
  }
}

/* ─── PAYROLL V2 A4 PRINT ────────────────────────────────────────── */

#payroll-print-container {
  display: none;
}

@media print {
  body.print-payroll-a4 .app-shell {
    display: none !important;
  }
  body.print-payroll-a4 #payroll-print-container {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ─── APPEARANCE & THEME STYLES ──────────────────────────────────── */

/* Navy Style theme values */
html[data-theme="navy"] {
  --bg-primary:    #f4f6f9;
  --bg-secondary:  #ffffff;
  --bg-tertiary:   #edf1f7;
  --bg-card:       #ffffff;
  --bg-glass:      rgba(10, 22, 40, 0.03);
  --bg-hover:      rgba(30, 64, 175, 0.05);

  --sidebar-bg:         #0a1628;
  --sidebar-text:       #8b9bb5;
  --sidebar-text-hover: #ffffff;
  --sidebar-text-active:#4f8ff7;
  --sidebar-border:     rgba(255, 255, 255, 0.08);
  --sidebar-label:      #475569;
  --nav-group-label-bg: rgba(255, 255, 255, 0.04);

  --header-bg:          #0a1628;
  --header-text:        #ffffff;

  --text-primary:   #111827; /* Deep navy dark */
  --text-secondary: #4b5c73;
  --text-muted:     #64748b;
  --text-gold:      #1d4ed8;

  --accent-gold:       #1d4ed8;

  --accent-rgb:        29, 78, 216;
  --accent-gold-dark:  #1e3a8a;
  --accent-gold-light: #60a5fa;
  --accent-gold-bg:    rgba(29, 78, 216, 0.06);
  --accent-gold-glow:  rgba(29, 78, 216, 0.12);
  --btn-primary-text:  #ffffff;

  --border-color:   #e2e8f0;
  --border-subtle:  #edf2f7;
  --border-active:  rgba(29, 78, 216, 0.45);
  --border-focus:   rgba(29, 78, 216, 0.45);
  --shadow-glow:    0 0 24px rgba(29,78,216,0.08);

  /* Soft Shadows Override */
  --shadow-sm:   0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.03);
  --shadow-md:   0 2px 4px rgba(15,23,42,0.04), 0 6px 16px rgba(15,23,42,0.06);
  --shadow-lg:   0 4px 8px rgba(15,23,42,0.04), 0 12px 24px rgba(15,23,42,0.08);
  --shadow-xl:   0 8px 16px rgba(15,23,42,0.06), 0 24px 36px rgba(15,23,42,0.12);

  /* Semantic Alerts Override */
  --color-success:     #15803d;
  --color-success-bg:  rgba(21, 128, 61, 0.08);
  --color-danger:      #dc2626;
  --color-danger-bg:   rgba(220, 38, 38, 0.08);
  --color-warning:     #d97706;
  --color-warning-bg:  rgba(217, 119, 6, 0.08);
  --color-info:        #0284c7;
  --color-info-bg:     rgba(2, 132, 199, 0.08);

  --sk-base:       rgba(15, 23, 42, 0.05);
  --sk-shine:      rgba(15, 23, 42, 0.03);
  --sk-shine-peak: rgba(255, 255, 255, 0.7);
}

/* Developer Style theme values */
html[data-theme="github"] {
  --bg-primary:    #f5f7fa;
  --bg-secondary:  #ffffff;
  --bg-tertiary:   #eef1f5;
  --bg-card:       #ffffff;
  --bg-glass:      rgba(31, 35, 40, 0.03);
  --bg-hover:      rgba(9, 105, 218, 0.05);

  --sidebar-bg:         #f0f3f6;
  --sidebar-text:       #57606a;
  --sidebar-text-hover: #1f2328;
  --sidebar-text-active:#0969da;
  --sidebar-border:     #d1d9e0;
  --sidebar-label:      #8c959f;
  --nav-group-label-bg: rgba(0, 0, 0, 0.04);

  --header-bg:          #ffffff;
  --header-text:        #1f2328;

  --text-primary:   #1f2328;
  --text-secondary: #59636e;
  --text-muted:     #6e7781;
  --text-gold:      #0969da;

  --accent-gold:       #0969da;

  --accent-rgb:        9, 105, 218;
  --accent-gold-dark:  #0550ae;
  --accent-gold-light: #218bff;
  --accent-gold-bg:    rgba(9, 105, 218, 0.08);
  --accent-gold-glow:  rgba(9, 105, 218, 0.12);
  --btn-primary-text:  #ffffff;

  --border-color:   #d1d9e0;
  --border-subtle:  #eaeef2;
  --border-active:  rgba(9, 105, 218, 0.45);
  --border-focus:   rgba(9, 105, 218, 0.45);
  --shadow-glow:    0 0 0 3px rgba(9,105,218,0.15);

  /* Soft Shadows Override */
  --shadow-sm:   0 1px 3px rgba(31,35,40,0.04);
  --shadow-md:   0 3px 6px rgba(31,35,40,0.04), 0 8px 16px rgba(31,35,40,0.04);
  --shadow-lg:   0 6px 12px rgba(31,35,40,0.04), 0 12px 24px rgba(31,35,40,0.06);
  --shadow-xl:   0 12px 24px rgba(31,35,40,0.06), 0 24px 48px rgba(31,35,40,0.08);

  /* Semantic Alerts Override */
  --color-success:     #16a34a;
  --color-success-bg:  rgba(22, 163, 74, 0.08);
  --color-danger:      #dc2626;
  --color-danger-bg:   rgba(220, 38, 38, 0.08);
  --color-warning:     #d97706;
  --color-info:        #0284c7;
  --color-info-bg:     rgba(2, 132, 199, 0.08);

  /* Light theme skeleton tokens */
  --sk-base:       rgba(0, 0, 0, 0.06);
  --sk-shine:      rgba(0, 0, 0, 0.03);
  --sk-shine-peak: rgba(255, 255, 255, 0.65);
}

/* GitHub Dark theme values */
html[data-theme="github-dark"] {
  --bg-primary:    #0d1117;
  --bg-secondary:  #151b23;
  --bg-tertiary:   #21262d;
  --bg-card:       #161b23;
  --bg-glass:      rgba(255, 255, 255, 0.04);
  --bg-hover:      rgba(88, 166, 255, 0.06);

  --sidebar-bg:         #010409;
  --sidebar-text:       #848d97;
  --sidebar-text-hover: #e6edf3;
  --sidebar-text-active:#4493f8;
  --sidebar-border:     #30363d;
  --sidebar-label:      #484f58;
  --nav-group-label-bg: rgba(255, 255, 255, 0.05);

  --header-bg:          #151b23;
  --header-text:        #e6edf3;

  --text-primary:   #e6edf3;
  --text-secondary: #848d97;
  --text-muted:     #484f58;
  --text-gold:      #4493f8;

  --accent-gold:       #4493f8;

  --accent-rgb:        68, 147, 248;
  /* White on #4493f8 is 3.10, under AA for the small text a table row carries. The
     filled block uses GitHub's own darker emphasis blue instead; 4.63, and it still
     stands off the card at 3.73. */
  --accent-fill:       #1F6FEB;
  --accent-gold-dark:  #1f6feb;
  --accent-gold-light: #6cb6ff;
  --accent-gold-bg:    rgba(68, 147, 248, 0.1);
  --accent-gold-glow:  rgba(68, 147, 248, 0.18);
  --btn-primary-text:  #ffffff;

  --border-color:   #30363d;
  --border-subtle:  #21262d;
  --border-active:  rgba(68, 147, 248, 0.45);
  --border-focus:   rgba(68, 147, 248, 0.45);
  --shadow-glow:    0 0 0 3px rgba(68,147,248,0.2);

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 3px 6px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.2);
  --shadow-lg:   0 4px 8px rgba(0,0,0,0.2), 0 16px 32px rgba(0,0,0,0.25);
  --shadow-xl:   0 8px 16px rgba(0,0,0,0.2), 0 24px 48px rgba(0,0,0,0.3);

  --color-success:     #3fb950;
  --color-success-bg:  rgba(63, 185, 80, 0.1);
  --color-danger:      #f85149;
  --color-danger-bg:   rgba(248, 81, 73, 0.1);
  --color-warning:     #d29922;
  --color-warning-bg:  rgba(210, 153, 34, 0.1);
  --color-info:        #4493f8;
  --color-info-bg:     rgba(68, 147, 248, 0.1);

  --sk-base:       rgba(255, 255, 255, 0.05);
  --sk-shine:      rgba(255, 255, 255, 0.08);
  --sk-shine-peak: rgba(68, 147, 248, 0.06);
}

/* Formal Muted theme values */
html[data-theme="formal"] {
  --bg-primary:    #f2ede5;
  --bg-secondary:  #faf8f4;
  --bg-tertiary:   #e8e2d0;
  --bg-card:       #faf8f4;
  --bg-glass:      rgba(74, 124, 89, 0.03);
  --bg-hover:      rgba(74, 124, 89, 0.06);

  --sidebar-bg:         #2a3038;
  --sidebar-text:       #9ca8b8;
  --sidebar-text-hover: #ffffff;
  --sidebar-text-active:#6b8f72;
  --sidebar-border:     rgba(255, 255, 255, 0.05);
  --sidebar-label:      #747d8c;
  --nav-group-label-bg: rgba(255, 255, 255, 0.05);

  --header-bg:          #2a3038;
  --header-text:        #ffffff;

  --text-primary:   #2a2f35;
  --text-secondary: #5a6370;
  --text-muted:     #8b9098;
  --text-gold:      #4a7c59;

  --accent-gold:       #4a7c59;

  --accent-rgb:        74, 124, 89;
  --accent-gold-dark:  #3a5f45;
  --accent-gold-light: #6b9b78;
  --accent-gold-bg:    rgba(74, 124, 89, 0.07);
  --accent-gold-glow:  rgba(74, 124, 89, 0.10);
  --btn-primary-text:  #ffffff;

  --border-color:   #d5cfc4;
  --border-subtle:  #e5dfd5;
  --border-active:  rgba(74, 124, 89, 0.45);
  --border-focus:   rgba(74, 124, 89, 0.45);
  --shadow-glow:    0 0 16px rgba(74,124,89,0.08);

  /* Soft Shadows Override */
  --shadow-sm:   0 1px 2px rgba(42,48,56,0.04), 0 1px 3px rgba(42,48,56,0.03);
  --shadow-md:   0 2px 4px rgba(42,48,56,0.04), 0 6px 16px rgba(42,48,56,0.06);
  --shadow-lg:   0 4px 8px rgba(42,48,56,0.06), 0 12px 24px rgba(42,48,56,0.08);
  --shadow-xl:   0 8px 16px rgba(42,48,56,0.08), 0 20px 32px rgba(42,48,56,0.12);

  /* Semantic Alerts Override */
  --color-success:     #15803d;
  --color-success-bg:  rgba(21, 128, 61, 0.08);
  --color-danger:      #dc2626;
  --color-danger-bg:   rgba(220, 38, 38, 0.08);
  --color-warning:     #d97706;
  --color-info:        #0284c7;
  --color-info-bg:     rgba(2, 132, 199, 0.08);

  /* Light theme skeleton tokens */
  --sk-base:       rgba(42, 48, 56, 0.05);
  --sk-shine:      rgba(42, 48, 56, 0.03);
  --sk-shine-peak: rgba(255, 255, 255, 0.65);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RetailPower — the brand themes (light and dark), TASK theme work 2026-09-21.

   These two are the product's own look and the default for anyone who has never
   picked a theme. The five palettes above stay reachable for anyone already on one.

   Brand teal is #327C8C. The UI accent is #2C6B78, the same teal deepened, because
   white on #327C8C measures 4.78 and clears AA by only 0.28 — too thin for the small
   text a button carries.

   Surfaces deliberately avoid near-white: a canvas within ~1.2 contrast of #ffffff
   washes out on the bright, cheap panels these shops use. Since TASK-2026-124 there are four
   levels (page, panel, card, control), each at least 1.15 from its neighbour; see the block
   named for that task near the stock page rules.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="retailpower"] {
  --bg-primary:    #E2DED6;
  --bg-secondary:  #F0EDE9;
  --bg-tertiary:   #EAE7E2;
  --bg-card:       #ffffff;
  --bg-glass:      rgba(44, 107, 120, 0.03);
  --bg-hover:      rgba(44, 107, 120, 0.06);

  /* Chrome is light here, unlike every palette above. Every sidebar and header
     token therefore has to be redeclared — the inherited ones assume dark chrome
     and would leave near-white text on a near-white bar. */
  --sidebar-bg:         #EAE8E4;
  --sidebar-text:       #556B82;
  --sidebar-text-hover: #1D2D3E;
  --sidebar-text-active:#2C6B78;
  --sidebar-border:     #D3CFC8;
  --sidebar-label:      #5F7285;
  --nav-group-label-bg: rgba(29, 45, 62, 0.04);
  --sidebar-footer-bg:  rgba(29, 45, 62, 0.05);

  --header-bg:          #EAE8E4;
  --header-text:        #1D2D3E;

  --text-primary:   #1D2D3E;
  --text-secondary: #4A5E74;
  --text-muted:     #52667C;
  --text-gold:      #2C6B78;
  --text-inverse:   #ffffff;

  --accent-gold:       #2C6B78;
  --accent-rgb:        44, 107, 120;
  --accent-gold-dark:  #21525C;
  --accent-gold-light: #327C8C;
  --accent-gold-bg:    rgba(44, 107, 120, 0.08);
  --accent-gold-glow:  rgba(44, 107, 120, 0.10);
  --btn-primary-text:  #ffffff;

  /* One stroke colour for every line in this theme (owner 2026-09-27): the sidebar edge, the header edge,
     cards and tables alike. Light enough not to draw a hard frame on the pale surfaces. */
  --border-color:   #D3CFC8;
  --border-subtle:  #D3CFC8;
  --border-divider: #D3CFC8;
  --border-active:  rgba(44, 107, 120, 0.45);
  --border-focus:   rgba(44, 107, 120, 0.45);
  --shadow-glow:    0 0 16px rgba(44, 107, 120, 0.08);

  --shadow-sm:   0 1px 2px rgba(29,45,62,0.04), 0 1px 3px rgba(29,45,62,0.03);
  --shadow-md:   0 2px 4px rgba(29,45,62,0.04), 0 6px 16px rgba(29,45,62,0.06);
  --shadow-lg:   0 4px 8px rgba(29,45,62,0.06), 0 12px 24px rgba(29,45,62,0.08);
  --shadow-xl:   0 8px 16px rgba(29,45,62,0.08), 0 20px 32px rgba(29,45,62,0.12);

  --color-success:     #0F7A4A;
  --color-success-bg:  rgba(15, 122, 74, 0.08);
  --color-danger:      #C2341F;
  --color-danger-bg:   rgba(194, 52, 31, 0.08);
  --color-warning:     #B45309;
  --color-warning-bg:  rgba(180, 83, 9, 0.08);
  --color-info:        #0E8FA6;
  --color-info-bg:     rgba(14, 143, 166, 0.08);

  /* Chart series. Validated for colour blindness: adjacent pairs separate by
     dE 9.2 (protanopia) and 8.8 (tritanopia) in OKLab x100, against a floor of 8. */
  --accent-blue:       #3F5FD0;
  --accent-blue-light: #6A85E0;
  --color-purple:      #A84F9B;
  --color-purple-bg:   rgba(168, 79, 155, 0.08);

  /* The payment-method ramp, drawn from the brand teals and chosen for this surface rather
     than flipped from the other one. Measured on white: #034959 is 9.99, #50B4BF 2.44,
     #D0EFF2 1.21 — so the two pale fills cannot carry their own contrast here and the 1px
     brand edge carries it instead, at 6.03. Separation dE 19.5 colour-blind / 22.4 normal. */
  --pay-1: #034959;
  --pay-2: #50B4BF;
  --pay-3: #D0EFF2;
  --pay-edge: #2C6B78;

  --scrollbar-track:      rgba(29, 45, 62, 0.04);
  --scrollbar-thumb:      rgba(29, 45, 62, 0.18);
  --scrollbar-thumb-hover:rgba(29, 45, 62, 0.30);

  --sk-base:       rgba(29, 45, 62, 0.05);
  --sk-shine:      rgba(29, 45, 62, 0.03);
  --sk-shine-peak: rgba(255, 255, 255, 0.65);
}

html[data-theme="retailpower-dark"] {
  --bg-primary:    #1A1917;
  --bg-secondary:  #272522;
  --bg-tertiary:   #3F3D39;
  --bg-card:       #33312D;
  --bg-glass:      rgba(255, 255, 255, 0.03);
  --bg-hover:      rgba(255, 255, 255, 0.05);

  --sidebar-bg:         #121110;
  --sidebar-text:       #C9C4BD;
  --sidebar-text-hover: #F2EFEA;
  --sidebar-text-active:#50B4BF;
  --sidebar-border:     #3D3A36;
  --sidebar-label:      #9A948C;
  --nav-group-label-bg: rgba(255, 255, 255, 0.05);
  --sidebar-footer-bg:  rgba(0, 0, 0, 0.22);

  --header-bg:          #121110;
  --header-text:        #F2EFEA;

  --text-primary:   #F2EFEA;
  --text-secondary: #C9C4BD;
  --text-muted:     #AAA49B;
  --text-gold:      #50B4BF;
  --text-inverse:   #14211F;

  /* The accent SPLITS on dark, and the split is the whole point. #2C6B78 works as a
     filled block (white on it, 6.03) but measures 2.40 against this surface, so as a
     thin line or a piece of text it disappears. The stylesheet uses --accent-gold for
     a line or a label 143 times and for a fill 37 times, so the token carries the
     readable step and the fills are overridden by name just below. */
  --accent-gold:       #50B4BF;
  --accent-fill:       #2C6B78;   /* white on this is 6.03; on #50B4BF it is 2.44 */
  --accent-rgb:        80, 180, 191;
  --accent-gold-dark:  #2C6B78;
  --accent-gold-light: #84D0D9;
  --accent-gold-bg:    rgba(80, 180, 191, 0.12);
  --accent-gold-glow:  rgba(80, 180, 191, 0.14);
  --btn-primary-text:  #ffffff;

  /* One stroke colour for every line (owner 2026-09-27). The shared divider leaned towards the muted text
     and read as a bright rule between the sidebar and the header; here it is the same quiet line as the rest. */
  --border-color:   #3D3A36;
  --border-subtle:  #3D3A36;
  --border-divider: #3D3A36;
  --border-active:  rgba(80, 180, 191, 0.45);
  --border-focus:   rgba(80, 180, 191, 0.45);
  --shadow-glow:    0 0 16px rgba(80, 180, 191, 0.10);

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.22);
  --shadow-md:   0 2px 4px rgba(0,0,0,0.30), 0 6px 16px rgba(0,0,0,0.34);
  --shadow-lg:   0 4px 8px rgba(0,0,0,0.34), 0 12px 24px rgba(0,0,0,0.40);
  --shadow-xl:   0 8px 16px rgba(0,0,0,0.38), 0 20px 32px rgba(0,0,0,0.46);

  --color-success:     #3FB27A;
  --color-success-bg:  rgba(63, 178, 122, 0.14);
  --color-danger:      #E86B56;
  --color-danger-bg:   rgba(232, 107, 86, 0.14);
  --color-warning:     #E0933C;
  --color-warning-bg:  rgba(224, 147, 60, 0.14);
  --color-info:        #0FA5BD;
  --color-info-bg:     rgba(15, 165, 189, 0.14);

  /* Chosen for this surface, not flipped from the light set: dE 12.0 / 14.6. */
  --accent-blue:       #6A62D0;
  --accent-blue-light: #8E87E0;
  --color-purple:      #CC5F93;
  --color-purple-bg:   rgba(204, 95, 147, 0.14);

  /* The same ramp, stepped for a dark card: here the dark end vanishes instead (#034959 is
     1.45 on #2B2926), so it starts one step up. All three clear 3:1 on their own — 3.04,
     5.95, 11.96 — so no edge is needed. Separation dE 16.8 colour-blind / 17.0 normal. */
  --pay-1: #327C8C;
  --pay-2: #50B4BF;
  --pay-3: #D0EFF2;
  --pay-edge: transparent;

  --scrollbar-track:      rgba(255, 255, 255, 0.04);
  --scrollbar-thumb:      rgba(255, 255, 255, 0.16);
  --scrollbar-thumb-hover:rgba(255, 255, 255, 0.26);

  --sk-base:       rgba(255, 255, 255, 0.05);
  --sk-shine:      rgba(255, 255, 255, 0.03);
  --sk-shine-peak: rgba(255, 255, 255, 0.10);
}

/* The filled-accent cases on dark, named one by one. Each is a block big enough to
   carry white text; the token above stays the readable step for everything thin. */
/* TASK-2026-163 S3: the dark primary button is the generic one (fill and fill-hover tokens, no gradient). */
html[data-theme="retailpower-dark"] .user-avatar {
  background: linear-gradient(135deg, #327C8C, #2C6B78);
  color: #ffffff;
}

/* ═════════════════════════════════════════════════════════════════
   DS ALIAS LAYER (TASK-2026-163 S1a) - begin
   The design system's shared tokens (static/css/tokens.css, generated from design/tokens.json) are the one
   source. Every older custom property below is now only a NAME for one of them, so every existing rule
   draws in the brand colours in both brand themes without a page changing. Specificity (0,1,1) beats the
   :root defaults and the palette blocks above, and this block comes after them. Slice S6 renames the
   names in the code, slice S7 deletes this block and the palettes. Colour, line, shadow, font and paper
   names only: sizes and motion (--control-height, --header-height, --transition, --radius-*, --space-*)
   keep their values until the slice that owns them (S3 components, S4 shell).
   ═════════════════════════════════════════════════════════════════ */
html[data-theme],
html:not([data-theme]) {
  --bg-primary:    var(--bg);
  --bg-secondary:  var(--surface);
  --bg-tertiary:   var(--sunken);
  --bg-card:       var(--surface);
  --bg-glass:      var(--surface);
  --bg-hover:      var(--tint);

  --text-primary:   var(--text);
  --text-secondary: var(--muted);
  --text-muted:     var(--muted);
  --text-gold:      var(--brand);
  --text-inverse:   var(--on-fill);
  --btn-primary-text: var(--on-fill);

  --accent-gold:       var(--brand);
  --accent-fill:       var(--fill);
  --accent-gold-dark:  var(--fill-hover);
  --accent-gold-light: var(--teal-400);
  --accent-gold-bg:    var(--tint);
  /* Glows are banned. A transparent value keeps every rule that still asks for one valid, and drawing nothing. */
  --accent-gold-glow:  transparent;
  --shadow-glow:       0 0 0 0 transparent;
  /* The accent as channels for rgba(var(--accent-rgb), a); slice S6 turns these into tint tokens. Light = --brand. */
  --accent-rgb:        44, 107, 120;

  --color-success:    var(--success);
  --color-success-bg: var(--success-tint);
  --color-warning:    var(--warning);
  --color-warning-bg: var(--warning-tint);
  --color-danger:     var(--danger);
  --color-danger-bg:  var(--danger-tint);
  --color-info:       var(--info);
  --color-info-bg:    var(--info-tint);
  /* The design system allows no other hue in a chart: the old blue and purple become teal series. */
  --accent-blue:       var(--teal-700);
  --accent-blue-light: var(--teal-400);
  --color-purple:      var(--teal-200);
  --color-purple-bg:   var(--tint);

  --border-color:   var(--line);
  --border-subtle:  var(--line);
  --border-divider: var(--line);
  --border-active:  var(--brand);
  --border-focus:   var(--focus);

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: var(--shadow-float);
  --shadow-xl: var(--shadow-float);

  --sidebar-bg:          var(--side);
  --sidebar-text:        var(--muted);
  --sidebar-text-hover:  var(--text);
  --sidebar-text-active: var(--brand);
  --sidebar-border:      var(--line);
  --sidebar-label:       var(--muted);
  --nav-group-label-bg:  transparent;
  --sidebar-footer-bg:   var(--sunken);
  --header-bg:           var(--surface);
  --header-text:         var(--text);

  --pay-1:    var(--teal-800);
  --pay-2:    var(--teal-400);
  --pay-3:    var(--teal-100);
  --pay-edge: var(--brand);

  --paper-bg:        var(--paper);
  --paper-ink:       var(--ink);
  --paper-ink-2:     var(--neutral-700);
  --paper-ink-3:     var(--neutral-700);
  --paper-ink-4:     var(--neutral-700);
  --paper-rule:      var(--ink);
  --paper-dash:      var(--ink);
  --paper-cell:      var(--neutral-400);
  --paper-line:      var(--neutral-300);
  --paper-line-soft: var(--neutral-300);
  --paper-edge:      var(--neutral-300);
  --paper-head:      var(--neutral-100);
  --credit-scrim:    var(--scrim);

  --scrollbar-thumb:       var(--line-strong);
  --scrollbar-thumb-hover: var(--field);
  --scrollbar-track:       transparent;

  --sk-base:       var(--sunken);
  --sk-shine:      var(--tint);
  --sk-shine-peak: var(--tint);

  /* One font. The font picker and the font upload are gone and nothing writes --font-family inline any more,
     so a plain declaration is enough (S1b removed the !important). */
  --font-family: var(--font-sans);
}
html[data-theme="retailpower-dark"] {
  --accent-rgb: 144, 208, 223;
  --pay-1:      var(--teal-600);
  --pay-edge:   transparent;
}
/* DS ALIAS LAYER - end */


/* Theme Management Grid & Previews */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 16px;
}
.theme-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.theme-card.active {
  border-color: var(--brand);
  box-shadow: var(--shadow-glow);
}
.theme-preview {
  height: 80px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: flex;
  overflow: hidden;
  position: relative;
}
.theme-preview-sidebar {
  width: 25%;
  height: 100%;
}
.theme-preview-body {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.theme-preview-header {
  height: 20%;
  width: 100%;
}
.theme-preview-content {
  flex: 1;
  width: 100%;
  padding: 6px;
  display: flex;
  gap: 4px;
  box-sizing: border-box;
}
.theme-preview-card {
  flex: 1;
  height: 80%;
  border-radius: 2px;
}

/* Receipt Builder Print/Monochrome Tables styling */
.receipt-products-table,
.receipt-products-table table,
.receipt-products-table thead,
.receipt-products-table tbody,
.receipt-products-table tr,
.receipt-products-table th,
.receipt-products-table td,
.receipt-container table,
.receipt-container thead,
.receipt-container tbody,
.receipt-container tr,
.receipt-container th,
.receipt-container td {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

.receipt-products-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
  word-wrap: break-word;
  word-break: break-word;
}
.receipt-products-table th {
  padding: 4px 2px;
  font-weight: bold;
  word-wrap: break-word;
  word-break: break-word;
}
.receipt-products-table td {
  padding: 4px 2px;
  word-wrap: break-word;
  word-break: break-word;
}

/* The trend chart sizes itself from .dash-plot now (2026-09-21). The old rule here was
   `height: 100% !important` against a wrapper that set a fixed height; with the rebuilt
   dashboard there is no such wrapper, so 100% resolved to nothing and the chart drew 0px tall.
   An !important on an id cannot be overridden by the component that owns the box, so it goes. */

/* ── Range Slider Styling ──────────────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 2px;
  outline: none;
  transition: background 0.3s ease;
}
input[type="range"]:hover {
  background: var(--surface);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand, #F59E0B);
  border: 2px solid var(--surface, #fff);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand, #F59E0B);
  border: 2px solid var(--surface, #fff);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* Session loading state overrides */
.loading-session .login-overlay {
  display: none !important;
}
.loading-session #loading-overlay {
  display: flex !important;
}

/* ── Notification Bell & Dropdown ────────────────────────────────── */
.notification-bell-container {
  position: relative;
  display: inline-block;
  align-self: center;
}
.bell-btn {
  font-size: 1rem;
  background: var(--tint);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  padding: 0 12px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--brand);
  position: relative;
  height: var(--control-sm);
  box-sizing: border-box;
}
.bell-btn:hover {
  background: var(--brand);
  color: var(--bg);
}
.bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: 50%;
  border: 1.5px solid var(--tint);
  animation: pulse-red 2s infinite;
}
.bell-badge.hidden {
  display: none !important;
}
.bell-dropdown {
  position: absolute;
  top: 120%;
  left: 50%;
  right: auto;
  --translate-x: -25%;
  transform: translateX(var(--translate-x)) translateY(0);
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slide-down-bell 0.2s ease;
}
html[dir="rtl"] .bell-dropdown {
  left: 50%;
  right: auto;
  --translate-x: -75%;
  transform: translateX(var(--translate-x)) translateY(0);
}
.bell-dropdown.hidden {
  display: none !important;
}
/* Spec 046 revision (b) RS8 (mockup 046b-m5 `oct10`; TASK-2026-089): the panel floats from the page — fixed, placed and
   clamped by app.js with 16 px to spare — so it never widens the page on a phone or a computer. The commission reminder is a
   reminder, not an alarm: amber, with its one way forward. */
html[dir] .bell-dropdown.is-floating { position: fixed; --translate-x: 0; transform: none; max-width: calc(calc(100 * var(--vw)) - 32px); }
.bell-pay-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; background: var(--warning-tint);
  border-bottom: 1px solid var(--line); }
.bell-pay-item > i { color: var(--warning); margin-top: 4px; }
.bell-pay-item b { font-size: 14px; color: var(--text); }
.bell-pay-item p { grid-column: 2; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 13px; color: var(--muted); }
.bell-pay-item .bell-pay-amt { font-family: 'Outfit', 'Cairo', sans-serif; font-size: 14px; font-weight: 600; color: var(--text); direction: ltr; unicode-bidi: isolate; }
.bell-pay-item time { grid-column: 2; font-size: 12px; color: var(--text-muted); }
.bell-pay-item .bell-pay-go { grid-column: 2; justify-self: start; margin-top: 4px; }
.bell-dropdown-header {
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--sunken);
  color: var(--text);
}
.bell-dropdown-body {
  max-height: 280px;
  overflow-y: auto;
}
.notification-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.notification-item:last-child {
  border-bottom: none;
}
.notification-item:hover {
  background: var(--sunken);
}
.notification-item.unread {
  background: rgba(var(--accent-rgb), 0.04);
}
.notification-item.unread:hover {
  background: rgba(var(--accent-rgb), 0.08);
}
.notification-title {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notification-desc {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.35;
}
.notification-date {
  font-size: 0.68rem;
  color: var(--text-muted);
  align-self: flex-end;
}

@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

@keyframes slide-down-bell {
  from {
    opacity: 0;
    transform: translateX(var(--translate-x)) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(var(--translate-x)) translateY(0);
  }
}

/* ─── LABEL TEMPLATE DESIGNER ────────────────────────────────────── */
.designer-element {
  position: absolute;
  border: 1px dashed rgba(var(--accent-rgb), 0.3);
  box-sizing: border-box;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.designer-element:hover {
  border: 1px dashed var(--brand);
}
.designer-element.active {
  border: 1px solid var(--brand);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2);
}
.designer-element.overlapping {
  border: 2px dashed var(--danger) !important;
}
.resize-handle {
  width: 7px;
  height: 7px;
  background: var(--brand);
  border: 1px solid #fff;
  position: absolute;
  border-radius: 50%;
  z-index: 100;
  display: none;
}
.designer-element.active .resize-handle {
  display: block;
}
.resize-handle.tl { top: -4px; left: -4px; cursor: nwse-resize; }
.resize-handle.tr { top: -4px; right: -4px; cursor: nesw-resize; }
.resize-handle.bl { bottom: -4px; left: -4px; cursor: nesw-resize; }
.resize-handle.br { bottom: -4px; right: -4px; cursor: nwse-resize; }

/* The rotate grip, on a stalk above the layer so it is never mistaken for a corner (TASK-2026-036
   FR-051). Physical `top` and `left` on purpose: this is a position inside a drawing whose own
   `direction` is pinned to ltr, so it must not mirror with the interface language — the same mistake
   the sidebar caret made with logical sides. */
.rotate-handle {
  position: absolute;
  top: -18px;
  left: 50%;
  z-index: 100;
  display: none;
  inline-size: 9px;
  block-size: 9px;
  margin-left: -4.5px;
  background: var(--brand);
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: grab;
}

/* The stalk. Drawn from the handle rather than the layer so it turns with it. */
.rotate-handle::after {
  position: absolute;
  top: 8px;
  left: 50%;
  inline-size: 1px;
  block-size: 10px;
  margin-left: -0.5px;
  background: var(--brand);
  content: '';
}

.designer-element.active .rotate-handle { display: block; }
.rotate-handle:active { cursor: grabbing; }
.designer-element.is-rotating { outline: 1px dashed var(--brand); }

/* ─── THE INVOICE DEAL ON A REPLACEMENT LINE ────────────────────── */
/* The owner asked for a tag on each line and no banner, and for it to be visible and noticeable
   (TASK-2026-036 FR-056). Absent entirely when the original sale carried no invoice discount, so an
   ordinary exchange looks exactly as it did. */
.ret-deal-master {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-block-end: 8px;
  padding: 6px 8px;
  color: var(--muted);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.74rem;
}

.ret-deal-master-actions { display: inline-flex; gap: 4px; }

.ret-deal-tag {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 4px;
  padding: 1px 5px;
  border: 1px solid transparent;
  border-radius: 2px;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.ret-deal-tag.is-on {
  color: var(--success);
  background: var(--success-tint);
  border-color: var(--success);
}

/* Off is not merely unhighlighted: the cashier has overridden a deal the customer bought under, and
   that has to read as a deliberate state rather than an absence. */
.ret-deal-tag.is-off {
  color: var(--text-muted);
  background: transparent;
  border-color: var(--line);
  text-decoration: line-through;
}

.ret-deal-tag:hover { border-color: var(--muted); }

.ret-deal-struck {
  margin-inline-end: 4px;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 400;
  text-decoration: line-through;
}

.barcode-prop-note {
  display: block;
  margin-block-start: 3px;
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.3;
}

.barcode-rotation-preset-row {
  display: flex;
  gap: 4px;
  margin-block-start: 2px;
}

.barcode-rotation-preset-row .btn { flex: 1 1 0; padding-inline: 0; }

.palette-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s ease;
}
.palette-btn:hover {
  background: var(--brand) !important;
  color: #000 !important;
}

/* Snapping Guidelines Styles */
.el-snap-guide-v {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed #0066ff;
  pointer-events: none;
  z-index: 9999;
}
.el-snap-guide-h {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed #0066ff;
  pointer-events: none;
  z-index: 9999;
}

/* Inventory matrix enhancements */
.matrix-cell {
  position: relative;
}
.matrix-cell .matrix-edit-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background-color 0.15s ease;
}
.matrix-cell:hover .matrix-edit-btn {
  opacity: 1;
  pointer-events: auto;
}
.matrix-cell.saving {
  opacity: 0.6;
  animation: pulse 1.5s infinite ease-in-out;
}
.matrix-cell.saving .matrix-qty-display {
  color: var(--brand);
  position: relative;
}
.matrix-qty-input {
  box-sizing: border-box;
  width: 60px;
  text-align: center;
  padding: 2px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  font-weight: bold;
}

/* ─── ATTENDANCE MATRIX GRID ───────────────────────────────────── */
.bg-success {
  background: var(--success-tint) !important;
  color: var(--success) !important;
}
.bg-danger {
  background: var(--danger-tint) !important;
  color: var(--danger) !important;
}
.bg-warning {
  background: var(--tint) !important;
  color: var(--teal-400) !important;
}
.bg-info {
  background: var(--info-tint) !important;
  color: var(--info) !important;
}
.bg-muted {
  background: var(--sunken) !important;
  color: var(--muted) !important;
}
.bg-dashed {
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px dashed var(--line) !important;
}

.matrix-legend-dot {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
}

button.att-matrix-badge {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  border-radius: 50% !important;
  border: 1px solid var(--line) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  outline: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  line-height: 1 !important;
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
  background-image: none !important;
}
html[dir="rtl"] button.att-matrix-badge {
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}
button.att-matrix-badge:hover {
  transform: scale(1.15);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

/* Custom Vertical Dropdown Menu */
.att-matrix-menu {
  z-index: var(--z-toast) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 2px !important; /* Rounded square menu */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 6px !important;
  gap: 6px !important;
}

/* Individual circular options inside dropdown */
button.att-menu-item {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  border-radius: 50% !important;
  border: 1px solid var(--line) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  transition: transform 0.1s ease !important;
}

button.att-menu-item:hover {
  transform: scale(1.15) !important;
}

.designer-element.is-locked {
  cursor: not-allowed;
}

.attendance-matrix-legend {
  position: relative;
}

.attendance-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  font-size: .8rem;
  cursor: help;
}

.attendance-legend-item:focus-visible {
  outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width));
}

.attendance-policy-tooltip {
  z-index: var(--z-toast);
  max-inline-size: min(21rem, calc(calc(100 * var(--vw)) - 2rem));
  padding: var(--radius);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  font-size: .82rem;
  line-height: 1.5;
  pointer-events: none;
}

.attendance-employee-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-inline-size: 0;
}

.attendance-employee-cell > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-row-visibility {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 1.85rem;
  block-size: 1.85rem;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

.attendance-row-visibility:hover,
.attendance-row-visibility:focus-visible {
  color: var(--teal-700);
  background: var(--sunken);
  border-color: var(--line);
}

/* A hidden employee is off the matrix, not dimmed on it. The row stays in the table so that hiding and
   restoring is one class rather than a rebuild of the whole grid, which is what made the eye feel dead
   (TASK-2026-036 FR-001). */
.attendance-row-hidden { display: none; }

/* Where a hidden employee comes back from. It replaced a "Show hidden / Hide hidden" mode that appeared
   and vanished under the pointer; with nobody hidden this is not on the screen at all. */
.attendance-hidden-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-6);
  padding: 10px 12px;
  background: var(--surface);
  border-radius: var(--radius);
}

.attendance-hidden-strip[hidden] { display: none; }

.attendance-hidden-strip-label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.attendance-hidden-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 10px;
  color: var(--text);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 2px;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.attendance-hidden-chip:hover,
.attendance-hidden-chip:focus-visible {
  color: var(--teal-700);
  background: var(--tint);
  border-color: var(--border-active);
}

.attendance-hidden-chip i { font-size: 0.75rem; opacity: 0.8; }

.att-matrix-not-employed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  color: var(--text-muted);
  background: var(--sunken);
  border: 1px dashed var(--line);
  border-radius: 50%;
  cursor: not-allowed;
}

.att-matrix-nonblocking {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: help;
}

.attendance-nonblocking-future .att-matrix-nonblocking {
  opacity: .58;
  border-style: dashed;
}

.attendance-nonblocking-weekly-off .att-matrix-nonblocking {
  background: var(--sunken);
}

/* A weekly day off is recordable like any other elapsed day (TASK-2026-029 FR-008), so it needs to stay
   readable as a rest day rather than looking like a working day nobody has filled in. The tint is the
   store's own secondary surface; the badge inside it is the ordinary editable badge. */
/* An employee's weekly day off (owner, 2026-09-22: "highlighted ... in the darkmode, and also can
   be seen in light mode").

   It used to be a flat --bg-tertiary. On the dark themes that token IS the card's colour, so the
   tint came to nothing — the same trap that hid the dashboard's progress track. A hatch instead
   of a wash: it reads on any surface, it survives colour blindness and a printout, and it cannot
   be confused with the blue wash marking today in the same table. */
.attendance-off-day-cell {
  background-color: var(--sunken);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(var(--accent-rgb), 0.20) 0 4px,
    transparent 4px 9px
  );
}
.matrix-legend-dot.bg-weekly-off {
  background-color: var(--sunken);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(var(--accent-rgb), 0.20) 0 4px,
    transparent 4px 9px
  );
  border: 1px dashed var(--line);
  color: var(--muted);
}
.attendance-off-day-cell .att-matrix-badge.bg-dashed {
  border-style: dashed;
  opacity: .72;
}

/* The dates a payroll row is still missing (the Attendance hand-off). The payout chooser, the proration note, the
   readiness warning and the unresolved-count badge that stood here were drawn by the payroll table spec 046 S4 replaced;
   their rules went in S8 (TASK-2026-089), when nothing referenced them any more. */
.payroll-unresolved-dates {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-block-start: .25rem;
}

.payroll-unresolved-date {
  padding: .2rem .45rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .72rem;
}

/* Barcodes Page 3-column Stacking Order on responsive viewports */
@media (max-width: 1200px) {
  #selector-column {
    order: 1 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  #designer-column {
    order: 2 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
  #properties-column {
    order: 3 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* The selected row is the one whose sale is about to be reversed or reprinted, so it
   inverts rather than tinting — one unmistakable signal (owner decision 2026-09-21).
   The `!important` this rule used to carry also blocked hover and focus from ever
   showing on the selected row; specificity does the job without it. */
tbody tr.selected-row,
tbody tr.selected-row > td {
  background-color: var(--fill);
  color: var(--on-fill);
}
tbody tr.selected-row > td a,
tbody tr.selected-row > td .badge { color: var(--on-fill); }
tbody tr.selected-row > td .badge {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   DYNAMIC COLOR-MATCHING HIGHLIGHT SYSTEM
   (A bare mark is drawn by the spec 048 block further down; this rule is now only for the two classes below.)
   Highlights adapt 100% dynamically to the target element's exact native color
   ========================================================================== */
.search-highlight,
.btn-highlight {
  background-color: transparent !important;
  color: inherit !important;
  border-color: var(--focus) !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: var(--radius);
}

/* Dynamic Focus-Visible on buttons and controls: the glow rule that stood here is gone (TASK-2026-163 S3); focus is the one 1px line of the S3 block. */

/* A selected button (`.active`) used to take an accent ring with `!important` here (TASK-2026-036 FR-040 had to carve the till's
   tab out of it). Gone with the rest of the rings (TASK-2026-163 S3): a selected tab, chip or segment is drawn by its own
   component (a rule, a strong tint), and a `.btn.active` is the strong tint with brand text. */
.btn.active {
  background: var(--tint-strong);
  border-color: var(--brand);
  color: var(--brand);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* POS Day Lock Overlay (No Active Business Day)                      */
/* ═══════════════════════════════════════════════════════════════════ */
.pos-day-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 14, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: posBlockFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-sizing: border-box;
}

.pos-day-lock-overlay.closing {
  animation: posBlockFadeOut 0.25s ease-in forwards;
}

.pos-day-lock-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 44px;
  max-width: 620px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--line);
  position: relative;
  overflow: hidden;
}

.pos-day-lock-icon-wrapper {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px auto;
  border-radius: 50%;
  background: var(--sunken);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-size: 2.2rem;
  box-shadow: 0 0 20px transparent;
  animation: pulseLockGlow 3s ease-in-out infinite;
}

.pos-day-lock-icon-wrapper svg {
  width: 38px;
  height: 38px;
  fill: currentColor;
  stroke: currentColor;
}

.pos-day-lock-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.pos-day-lock-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 24px;
}

.pos-day-lock-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.pos-stale-workspace-review-action {
  width: 100%;
  justify-content: center;
}

.pos-stale-workspace-cleanup-card {
  max-width: 47.5rem;
}

.pos-stale-workspace-cleanup-description {
  margin: 0.3125rem 0 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.5;
}

.pos-stale-workspace-cleanup-body {
  max-height: min(calc(56 * var(--vh)), 32.5rem);
  overflow: auto;
}

.pos-stale-workspace-list {
  display: grid;
  gap: 0.625rem;
}

.pos-stale-workspace-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem;
  border: thin solid var(--line);
  border-inline-start: 0.1875rem solid var(--warning, var(--brand));
  border-radius: var(--radius);
  background: var(--sunken);
}

.pos-stale-workspace-details {
  min-width: 0;
  display: grid;
  gap: 0.3125rem;
}

.pos-stale-workspace-name {
  color: var(--text);
  overflow-wrap: anywhere;
}

.pos-stale-workspace-status {
  color: var(--warning, var(--brand));
  font-size: 0.8rem;
  font-weight: 700;
}

.pos-stale-workspace-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.pos-stale-workspace-meta-item {
  display: inline-flex;
  gap: 0.3125rem;
  align-items: baseline;
}

.pos-stale-workspace-meta-item strong {
  color: var(--muted);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.pos-stale-workspace-actions {
  flex: 0 0 auto;
}

.pos-stale-workspace-empty {
  margin: 0;
  padding: 1.375rem 0.5rem;
  text-align: center;
  color: var(--text-muted);
}

@media (max-width: 38.75rem) {
  .pos-stale-workspace-row {
    align-items: stretch;
    flex-direction: column;
  }

  .pos-stale-workspace-actions,
  .pos-stale-workspace-actions .btn {
    width: 100%;
  }
}

@keyframes posBlockFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes posBlockFadeOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.03);
  }
}

@keyframes pulseLockGlow {
  0%, 100% {
    box-shadow: 0 0 15px transparent;
    border-color: var(--line);
  }
  50% {
    box-shadow: 0 0 30px transparent;
    border-color: var(--brand);
  }
}

/* ─── POS WORKSPACE RAIL ────────────────────────────────────────── */
.pos-terminal-shell {
  /* TASK-2026-163 S3: never under 48px, and tall enough for two lines at the chosen text size (10 to 20px). */
  --pos-workspace-rail-height: max(var(--control-roomy), 3.75rem);
  /* Trimmed from 180ms. The tabs are a navigation control; the movement should register that
     something happened, not be watched (owner's request, 2026-09-09). */
  --pos-workspace-motion: 110ms;
  --pos-workspace-ease: cubic-bezier(0.2, 0, 0, 1);
  min-inline-size: 0;
}

/* The strip sits directly on the sale content (TASK-2026-028 FR-020): it used to float above it with a
   gap, a full border and its own rounded bottom, which read as an unrelated bar. */
.pos-workspace-toolbar {
  flex: 0 0 auto;
  min-inline-size: 0;
  margin-block-end: 0;
}

.pos-workspace-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--radius);
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--pos-workspace-rail-height);
  padding: var(--radius) var(--radius) 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-block-end: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  /* visible, so the active tab can bleed over the rule that opens the content */
  overflow: visible;
  isolation: isolate;
}

.pos-workspace-tabs-loading {
  pointer-events: none;
}

.pos-workspace-tab-list {
  display: flex;
  /* Tabs sit on the strip's bottom edge, the way browser tabs do, so the active one reaches the rule
     that opens the sale content (TASK-2026-028 FR-020). */
  align-items: flex-end;
  gap: 0;
  flex: 1 1 auto;
  align-self: stretch;
  min-inline-size: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  padding-inline: 0.125rem;
}

.pos-workspace-tab-list::-webkit-scrollbar { display: none; }

.pos-workspace-tab-run {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  /* The run offers the whole strip, so the tabs inside it have room to grow into
     (TASK-2026-028 FR-035). Sized to its content, it collapsed to the tabs' minimum and every tab
     rendered at its floor however much space the strip had. */
  inline-size: 100%;
  min-inline-size: 0;
}

.pos-workspace-tab-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  /* Tabs share the strip equally up to a comfortable cap, the way browser tabs do: one sale measures
     about 317px against the 189px it used to get, three still measure 317, and six shrink to fit rather
     than scrolling out of reach (TASK-2026-028 FR-035). The old three declarations never interacted as
     intended — the basis was dead and every tab rendered at its floor. */
  flex: 1 1 0;
  min-inline-size: clamp(8rem, calc(11 * var(--vw)), 10rem);
  max-inline-size: clamp(14rem, calc(22 * var(--vw)), 18rem);
  align-self: flex-end;
  block-size: calc(var(--pos-workspace-rail-height) - (var(--radius) * 2));
  margin-inline-end: -0.2rem;
  /* Tokens, not the three hand-picked greys that used to be here: they were chosen against the dark
     rail and left the light themes with pale text on white. Inactive is the dim one and active the
     bright one, which is the owner's "active light, inactive darker" in every theme
     (TASK-2026-036 FR-040). */
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 0.1rem) calc(var(--radius) - 0.1rem) var(--radius) var(--radius);
  /* A new tab is inserted immediately before the "+", so its start edge is exactly where the "+" was
     standing: anchoring the scale there makes it unfurl out from under the button rather than pop
     into place, and a closing tab furls back the same way (TASK-2026-036 FR-041). */
  transform-origin: left center;
  transition:
    flex-basis var(--pos-workspace-motion) var(--pos-workspace-ease),
    min-inline-size var(--pos-workspace-motion) var(--pos-workspace-ease),
    max-inline-size var(--pos-workspace-motion) var(--pos-workspace-ease),
    margin-inline var(--pos-workspace-motion) var(--pos-workspace-ease),
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    opacity var(--pos-workspace-motion) var(--pos-workspace-ease),
    transform var(--pos-workspace-motion) var(--pos-workspace-ease);
}

.pos-workspace-tab-shell:not(.active)::after {
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0.7rem;
  inline-size: 1px;
  background: var(--line);
  content: '';
  opacity: 0.8;
  transition: opacity 140ms ease;
}

.pos-workspace-tab-shell:hover,
.pos-workspace-tab-shell:focus-within {
  z-index: 1;
  color: var(--text);
  background: var(--sunken);
}

.pos-workspace-tab-shell:hover::after,
.pos-workspace-tab-shell:focus-within::after,
.pos-workspace-tab-shell.active::after {
  opacity: 0;
}

html[dir="rtl"] .pos-workspace-tab-shell { transform-origin: right center; }

.pos-workspace-tab-shell.active {
  z-index: 3;
  /* No yellow. The active tab is told apart by being the front-most surface, the way a browser tab is,
     and its text is simply the brightest in the rail (TASK-2026-036 FR-040). */
  color: var(--text);
  /* No gradient and no lift: the active tab is a flat continuation of the sale content, and its extra
     pixel of height covers the content's top rule so the two read as one surface (FR-020). */
  background: var(--sunken);
  border-color: var(--line);
  border-block-end-color: var(--sunken);
  border-radius: calc(var(--radius) - 0.1rem) calc(var(--radius) - 0.1rem) 0 0;
  /* one padding taller than an inactive tab, so it lands on the content's rule and covers it */
  block-size: calc(var(--pos-workspace-rail-height) - var(--radius));
  margin-block-end: -1px;
  padding-block-end: 1px;
  box-shadow: none;
}

/* A click on "+" writes to the server before the tab can exist, so the strip shows the tab it is
   opening straight away rather than looking dead for a second (TASK-2026-028 FR-034). */
.pos-workspace-tab-shell.is-pending {
  color: var(--text-muted);
  background: var(--sunken);
  border-color: var(--line);
  border-block-end-color: var(--sunken);
  opacity: 0.7;
  pointer-events: none;
}

.pos-workspace-tab-shell.is-new {
  animation: posWorkspaceTabReveal var(--pos-workspace-motion) var(--pos-workspace-ease) both;
}

.pos-workspace-tab-shell.is-closing {
  flex-basis: 0;
  min-inline-size: 0;
  max-inline-size: 0;
  margin-inline: 0;
  border-color: transparent;
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0.72);
}

.pos-workspace-tab-shell.is-dragging {
  z-index: 4;
  opacity: 0.5;
}

.pos-workspace-tab-shell.drop-before::before,
.pos-workspace-tab-shell.drop-after::before {
  position: absolute;
  z-index: 5;
  inset-block: 0.45rem;
  inline-size: 2px;
  background: var(--brand);
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--surface);
  content: '';
}

.pos-workspace-tab-shell.drop-before::before { inset-inline-start: -0.15rem; }
.pos-workspace-tab-shell.drop-after::before { inset-inline-end: -0.15rem; }

.pos-workspace-tab {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 0.05rem;
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 100%;
  padding-inline: calc(var(--radius) + 0.1rem);
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: inherit;
  font: inherit;
  font-weight: 700;
  text-align: start;
  outline: 0;
}

/* Focus (design system v15): the tab's own edge turns the focus colour as one inset 1px line, no 2px box-shadow ring. */
.pos-workspace-tab:focus-visible {
  box-shadow: none;
  outline: var(--focus-width) solid var(--focus);
  outline-offset: calc(-1 * var(--focus-width));
}

.pos-workspace-tab-label,
.pos-workspace-tab-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line-height 1.7, not 1.2: both lines clip with overflow hidden for the ellipsis, and the brand font's glyphs reach about 1.65em, so a tighter line box cut the bottom of the Arabic text (TASK-2026-163 S3). */
.pos-workspace-tab-label { font-size: var(--fs-small); line-height: 1.7; }
.pos-workspace-tab-meta { color: var(--muted); font-size: var(--fs-caption); font-weight: 400; line-height: 1.7; opacity: 0.9; }
.pos-workspace-tab-shell.active .pos-workspace-tab-meta { color: var(--muted); opacity: 1; }

/* Both controls belong to the tab strip, so they are drawn like tabs — square-cornered and quiet —
   instead of the floating pills that sat over the new strip (TASK-2026-028 FR-036). */
.pos-workspace-tab-close,
.pos-workspace-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 1.55rem;
  block-size: 1.55rem;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.pos-workspace-tab-close { margin-inline-end: calc(var(--radius) + 0.15rem); }

.pos-workspace-tab-shell.active .pos-workspace-tab-close {
  color: var(--muted);
  background: transparent;
}

.pos-workspace-tab-close:disabled {
  color: var(--text-muted);
  background: transparent;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.42;
}

.pos-workspace-tab-shell.active .pos-workspace-tab-close:disabled {
  background: transparent;
}

.pos-workspace-tab-close:hover,
.pos-workspace-tab-close:focus-visible,
.pos-workspace-add:hover,
.pos-workspace-add:focus-visible {
  color: var(--text);
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--line);
}

.pos-workspace-tab-close:active,
.pos-workspace-add:active {
  color: var(--text);
  background: var(--sunken);
  transform: scale(0.92);
}

.pos-workspace-tab:active {
  color: var(--text);
}

/* The "+" sat centred in the strip while the tabs sat on its bottom edge; it now stands on the same
   line as the tabs and wears the same top-rounded plate on hover (TASK-2026-028 FR-036).
   Its box was as tall as a whole tab — 32×36 — which made a full-height column of the rail react to the
   pointer. It is a 28px square now, on the tabs' baseline, and the icon is untouched because it is a
   glyph sized by `font-size`, not by the box (TASK-2026-036 FR-042). */
.pos-workspace-add {
  align-self: flex-end;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  margin-block-end: 0.25rem;
  margin-inline-start: calc(var(--radius) + 0.15rem);
  margin-inline-end: var(--radius);
  border-radius: var(--radius);
}

.pos-workspace-add:hover,
.pos-workspace-add:focus-visible {
  box-shadow: none;
}

.pos-workspace-add.is-opening {
  animation: posWorkspaceAddContract var(--pos-workspace-motion) var(--pos-workspace-ease) both;
}

/* The held-sales button now sits on the outer edge of the rail, away from the tabs, and is drawn like
   any other small button in the application rather than as a pill of its own (TASK-2026-036 FR-037). */
.pos-parked-sales-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  align-self: flex-end;
  min-inline-size: 2.7rem;
  block-size: 1.75rem;
  margin-block-end: 0.25rem;
  padding-inline: 0.6rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.pos-parked-sales-button:hover,
.pos-parked-sales-button:focus-visible {
  color: var(--text);
  border-color: var(--muted);
  background: var(--sunken);
}

.pos-parked-sales-icon { display: inline-flex; }
.pos-parked-sales-count { font-size: 0.72rem; }

/* The one thing standing between the cashier and the payment screen, under the disabled button
   (TASK-2026-036 FR-045). No `display` here: it is shown and hidden with the `hidden` attribute. */
.pos-checkout-blockers {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
}

/* ─── HELD SALES ────────────────────────────────────────────────── */
/* One row per parked sale, two lines deep (TASK-2026-036 FR-038). The rows carried no styling at all
   before this: a bare `<strong>` and `<span>` in an unstyled div, which ran the name, the item count
   and the total together on one unspaced line. */
.pos-parked-sales-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pos-parked-sale-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.pos-parked-sale-row:hover { border-color: var(--text-muted); }
.pos-parked-sale-row.is-leaving { pointer-events: none; }

.pos-parked-sale-details {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.pos-parked-sale-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.pos-parked-sale-name {
  overflow: hidden;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-parked-sale-total {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.pos-parked-sale-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
}

/* Drawn between the facts rather than written into them, so the separator cannot end up on the wrong
   side of a run of Arabic. */
.pos-parked-sale-fact + .pos-parked-sale-fact::before {
  margin-inline-end: 0.5rem;
  color: var(--text-muted);
  content: '·';
}

.pos-parked-sale-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.4rem;
}

.pos-workspace-empty {
  margin: 0;
  padding: 1.5rem 0.5rem;
  color: var(--muted);
  text-align: center;
}

/* A new tab arrives at its own width and fades (owner's choice, 2026-09-19: drop the squash, stop
   animating layout).

   It used to animate flex-basis and min/max-inline-size from 1.25rem, which reflowed the entire
   tab strip on every one of ten frames, and scaleX(0.72 -> 1) squashed the label while it grew.
   Measured before the change: 16px -> 240px over ~10 frames.

   Nothing is lost by dropping the width growth, because the strip still eases: the tabs already
   there are moved into place by the FLIP in `animateWorkspaceTabLayout`, which uses transform and
   costs no layout at all. The room is still made smoothly; only the new tab stopped fighting for
   it frame by frame.

   The old keyframe also ended on widths the element does not otherwise have
   (max-inline-size: clamp(9.5rem,18vw,15rem) against a resting clamp(14rem,22vw,18rem)), so it
   snapped when the class came off. Declaring no width here means the element simply keeps its own,
   and there is nothing left to snap to. */
@keyframes posWorkspaceTabReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes posWorkspaceAddContract {
  0%, 100% { transform: scaleX(1); }
  45% { transform: scaleX(0.72); }
}

@media (min-width: 1101px) {
  .pos-terminal-shell {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    min-block-size: 0;
    overflow: hidden;
  }

  .pos-terminal-shell .pos-grid {
    flex: 1 1 auto;
    min-block-size: 0;
    block-size: auto;
  }

  .pos-terminal-shell .pos-left,
  .pos-terminal-shell .pos-right,
  .pos-terminal-shell .cart-container { min-block-size: 0; }
}

@media (max-width: 1100px) {
  .pos-terminal-shell .pos-grid { block-size: auto; }
  .pos-workspace-tab-shell {
    flex-basis: clamp(8.5rem, calc(38 * var(--vw)), 13rem);
    max-inline-size: clamp(8.5rem, calc(38 * var(--vw)), 13rem);
  }
}

@media (max-width: 640px) {
  .pos-workspace-tabs { gap: 0.2rem; }
  .pos-workspace-tab-shell {
    min-inline-size: 6.5rem;
    flex-basis: min(calc(62 * var(--vw)), 10.5rem);
    max-inline-size: min(calc(62 * var(--vw)), 10.5rem);
  }
  .pos-workspace-tab-meta { display: none; }
  .pos-parked-sales-button { min-inline-size: 2.2rem; padding-inline: var(--radius); }
}

/* ─── ATTENDANCE MATRIX OVERLAYS ───────────────────────────────── */
.att-status-picker { position: relative; }

.att-status-picker-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--radius);
  inline-size: 100%;
  min-block-size: var(--control-sm);
  padding-inline: var(--radius);
  color: var(--text);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  text-align: start;
}

.att-status-picker-trigger:hover,
.att-status-picker-trigger:focus-visible {
  border-color: var(--focus);
  background: var(--surface);
}

.att-status-picker-chevron { color: var(--text-muted); display: inline-flex; }

.att-status-picker-menu {
  z-index: var(--z-toast);
  display: grid;
  gap: var(--radius);
  min-inline-size: min(100%, 16rem);
  padding: var(--radius);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}

.att-status-picker-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--radius);
  inline-size: 100%;
  min-block-size: var(--control-sm);
  padding-inline: var(--radius);
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  text-align: start;
}

.att-status-picker-option:hover,
.att-status-picker-option:focus-visible,
.att-status-picker-option[aria-selected="true"] {
  color: var(--text);
  background: var(--sunken);
  border-color: var(--line);
}

.att-status-option-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--control-sm);
  block-size: var(--control-sm);
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 800;
}

.att-modal-context {
  display: grid;
  gap: var(--radius);
  padding: var(--radius);
  margin-block-end: var(--radius);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.att-modal-context-label { color: var(--muted); font-size: 0.82rem; }
.att-modal-context-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--radius); color: var(--text); }
.att-modal-context-meta > span:not(.att-modal-context-divider) { display: inline-flex; align-items: baseline; gap: var(--radius); }
.att-modal-context-key { color: var(--text-muted); font-size: 0.74rem; }
.att-modal-context-divider { color: var(--text-muted); }

html[dir="rtl"] .att-modal-context-meta { justify-content: flex-start; }

/* ─── GENERAL SETTINGS COMPACT LAYOUT ───────────────────────────── */
#settings-general-tab {
  --settings-card-gap: 1rem;
  --settings-card-padding: clamp(0.9rem, calc(1.5 * var(--vw)), 1.35rem);
}

#settings-general-tab .settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--settings-card-gap);
}

#settings-general-tab .settings-column {
  display: flex;
  flex-direction: column;
  gap: var(--settings-card-gap);
  min-inline-size: 0;
}

#settings-general-tab .settings-column > .card { inline-size: 100%; }
#settings-general-tab .card-header { padding: var(--settings-card-padding) !important; }
#settings-general-tab .card-body { padding: var(--settings-card-padding) !important; }

#settings-general-tab .setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--settings-card-gap);
  padding-block: var(--radius) !important;
}

#settings-general-tab .setting-control {
  inline-size: 100% !important;
  min-inline-size: 0;
  max-inline-size: none !important;
}

#settings-general-tab .setting-control > input:not([type="checkbox"]),
#settings-general-tab .setting-control > select,
#settings-general-tab .setting-control > textarea {
  inline-size: 100% !important;
  min-block-size: var(--control-sm) !important;
  block-size: auto !important;
}

#settings-general-tab .setting-label-group {
  display: inline-flex;
  align-items: center;
  gap: var(--radius);
  max-inline-size: 100%;
}

#settings-general-tab .general-setting-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: var(--control-sm);
  block-size: var(--control-sm);
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

#settings-general-tab .general-setting-info:hover,
#settings-general-tab .general-setting-info:focus,
#settings-general-tab .general-setting-info:focus-visible {
  color: var(--brand);
  background: var(--tint);
  border-color: var(--border-active);
  outline: none !important;
  box-shadow: none !important;
}

.general-setting-tooltip {
  z-index: var(--z-toast);
  max-inline-size: min(22rem, calc(calc(100 * var(--vw)) - 2rem));
  padding: var(--radius);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  font-size: 0.78rem;
  line-height: 1.55;
  pointer-events: none;
}

@media (max-width: 1100px) {
  #settings-general-tab .settings-grid { grid-template-columns: 1fr; }
  #settings-general-tab .setting-row { grid-template-columns: 1fr; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .pos-workspace-tab-shell.is-new,
  .pos-workspace-add.is-opening { animation: none; }
  .pos-workspace-tab-shell { transition-duration: 0s; }
}

/* Keep the Employee workspace navigation readable at every width. */
.employee-section-tabs {
  gap: var(--space-1) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
}

.employee-section-tabs .tab-btn {
  flex: 1 1 0 !important;
  width: auto !important;
  min-inline-size: 7rem !important;
  padding-inline: var(--space-3) !important;
}

.employee-tab-label-full { display: none; }
.employee-tab-label-compact { display: inline; }

@media (max-width: 900px) {
  .employee-section-tabs .tab-btn {
    flex: 0 0 auto !important;
    min-inline-size: 7.5rem !important;
    padding-inline: var(--space-3) !important;
  }
}

@media (min-width: 1441px) {
  .employee-tab-label-full { display: inline; }
  .employee-tab-label-compact { display: none; }
}

/* Barcode workspace: shared theme tokens, responsive print/design surfaces. */
.main-content > .barcode-page { min-width: 0; }

.barcode-page {
  display: grid;
  gap: var(--barcode-space-3);
  width: 100%;
  min-width: 0;
  --barcode-scrollbar-track: transparent;
  --barcode-scrollbar-thumb: var(--line-strong);
  --barcode-scrollbar-thumb-hover: var(--field);
  --barcode-space-1: .25rem;
  --barcode-space-2: .5rem;
  --barcode-space-3: .75rem;
  --barcode-space-4: 1rem;
  --barcode-mode-switch-inline-size: 22rem;
  --barcode-label-inline-size: 25rem;
  --barcode-label-block-size: 16rem;
  --barcode-preview-chrome-inline-size: 4rem;
  --barcode-preview-column-basis: calc(var(--barcode-label-inline-size) + var(--barcode-preview-chrome-inline-size));
  --barcode-side-column-basis: 22rem;
}

.barcode-modebar,
.barcode-actionbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--barcode-space-3);
  width: 100%;
  margin-bottom: 0;
  padding: var(--barcode-space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.barcode-mode-switch,
.barcode-actionbar-buttons,
.barcode-template-actions,
.barcode-sheet-settings-grid {
  display: grid;
  gap: var(--barcode-space-2);
}

.barcode-mode-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 0; flex: 1 1 var(--barcode-mode-switch-inline-size); min-inline-size: min(100%, var(--barcode-mode-switch-inline-size)); block-size: 3rem; padding: var(--barcode-space-1); background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius); }
.barcode-actionbar-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; }
.barcode-mode-btn { min-height: 0; height: 100%; padding-inline: var(--barcode-space-3); border: 0; border-radius: calc(var(--radius) - var(--barcode-space-1)); background: transparent; color: var(--muted); font: inherit; font-weight: 700; white-space: nowrap; }
.barcode-mode-btn.active { color: var(--on-fill); background: var(--brand); box-shadow: none; }
.barcode-active-template { display: block; flex: 0 1 18rem; min-width: 12rem; }
.barcode-active-template select { width: 100%; min-width: 0; height: 3rem; }
.barcode-active-template select.is-dirty { border-color: var(--warning); box-shadow: 0 0 0 1px var(--warning); }

.barcode-page[data-mode="print"] .barcode-design-only,
.barcode-page[data-mode="design"] .barcode-print-only { display: none !important; }

.barcode-workspace {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--barcode-space-3);
  width: 100%;
  min-width: 0;
}
#designer-column { flex: 1 1 var(--barcode-preview-column-basis); min-inline-size: min(100%, var(--barcode-preview-column-basis)); }
#properties-column,
#selector-column { flex: 1 1 var(--barcode-side-column-basis); min-inline-size: min(100%, var(--barcode-side-column-basis)); }
.barcode-workspace-column { display: flex; flex-direction: column; gap: var(--barcode-space-3); min-width: 0; }
.barcode-panel { width: 100%; padding: var(--barcode-space-4); box-sizing: border-box; }
.barcode-preview-panel { min-inline-size: 0; }
.barcode-preview-header { display: flex; align-items: center; justify-content: space-between; gap: var(--barcode-space-3); margin-block-end: var(--barcode-space-3); }
.barcode-preview-header .section-title { min-inline-size: 0; margin: 0; }
.barcode-zoom-control { display: flex; align-items: center; gap: var(--barcode-space-2); flex: 0 0 auto; }
.barcode-canvas-container { display: flex; justify-content: center; align-items: center; min-inline-size: 0; min-block-size: calc(var(--barcode-label-block-size) + var(--barcode-space-2) + var(--barcode-space-2)); padding: var(--barcode-space-2); overflow: visible; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius); direction: ltr !important; }
.barcode-canvas-container > #live-preview-label { flex: 0 0 auto; }
.barcode-selection-summary { display: inline-flex; align-items: center; gap: var(--barcode-space-2); min-inline-size: 0; padding-inline: var(--barcode-space-2); white-space: nowrap; }
.barcode-selection-summary strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.barcode-selection-summary > span:last-child { color: var(--muted); font-size: .8rem; }
.barcode-summary-icon { display: inline-flex; flex: 0 0 auto; }
.barcode-selector-header { display: flex; gap: var(--barcode-space-2); align-items: center; justify-content: space-between; margin-bottom: var(--barcode-space-3); }
.barcode-selector-header input { min-width: 0; flex: 1; }
.barcode-product-group { border: 1px solid var(--line); border-radius: var(--radius); overflow: clip; }
.barcode-product-group > .variant-list { scrollbar-gutter: stable; }
.barcode-search-hidden { display: none !important; }
.barcode-product-search-empty { padding: var(--barcode-space-4); color: var(--muted); text-align: center; }
.barcode-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--barcode-space-2); }
.barcode-layer-list { display: flex; flex-direction: column; gap: var(--barcode-space-2); max-block-size: none; overflow: visible; overscroll-behavior: auto; }
.barcode-print-queue-list { display: flex; flex-direction: column; gap: var(--barcode-space-2); max-block-size: 22rem; overflow: auto; }
.barcode-layer-row,
.barcode-queue-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--barcode-space-2); align-items: center; padding: var(--barcode-space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--sunken); }
.barcode-layer-row { transition: border-color .18s ease, background-color .18s ease, opacity .18s ease; }
.barcode-layer-row.active { border-color: var(--brand); background: var(--tint); }
.barcode-layer-row.is-hidden { opacity: .58; }
.barcode-layer-row.is-locked { border-style: dashed; }
.barcode-layer-select { min-inline-size: 0; padding: var(--barcode-space-1) var(--barcode-space-2); overflow: hidden; color: var(--text); background: transparent; border: 0; border-radius: var(--radius); font: inherit; font-weight: 600; text-align: start; text-overflow: ellipsis; white-space: nowrap; }
.barcode-layer-select:hover,
.barcode-layer-select:focus-visible { background: var(--tint); color: var(--brand); }
.barcode-layer-actions { display: flex; gap: var(--barcode-space-1); }
.barcode-layer-actions .barcode-layer-action { display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem; padding: 0; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.barcode-layer-actions .barcode-layer-action:hover,
.barcode-layer-actions .barcode-layer-action:focus-visible { color: var(--brand); border-color: var(--brand); background: var(--tint); }
.barcode-layer-actions .barcode-layer-action[aria-pressed="true"] { color: var(--brand); border-color: var(--brand); background: var(--tint); }
.barcode-layer-actions .barcode-layer-action:disabled { opacity: .35; cursor: not-allowed; }
.barcode-center-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--barcode-space-2); margin-block: var(--barcode-space-1) var(--barcode-space-2); }
.barcode-center-actions .btn { width: 100%; min-height: var(--control, 38px); padding-inline: var(--barcode-space-2); font-size: .75rem; }
.barcode-layer-empty { padding: var(--barcode-space-4); color: var(--muted); text-align: center; }
.variant-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--barcode-space-2); align-items: center; }
.variant-print-quantity input,
.barcode-queue-quantity input { inline-size: 5rem; min-height: var(--control, 38px); }
.variant-print-quantity.exceeds-stock input,
.barcode-queue-quantity.exceeds-stock input { border-color: var(--warning); }
.barcode-sheet-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.barcode-sheet-capacity { margin-top: var(--barcode-space-2); color: var(--muted); font-size: .8rem; }
.barcode-page :is(.barcode-properties-column, #products-accordion, .variant-list, .color-variant-list, .barcode-print-queue-list) { scrollbar-color: var(--barcode-scrollbar-thumb) var(--barcode-scrollbar-track); scrollbar-width: thin; overscroll-behavior: contain; }
@media (max-width: 700px) {
  .barcode-modebar,
  .barcode-actionbar { align-items: stretch; flex-direction: column; }
  .barcode-active-template { flex: 0 0 auto; min-width: 0; width: 100%; }
  .barcode-actionbar-buttons { grid-template-columns: minmax(0, 1fr); }
  .barcode-selector-header { align-items: stretch; flex-direction: column; }
  .barcode-mode-switch { flex: 0 0 3rem; min-inline-size: 0; width: 100%; block-size: 3rem; }
  .barcode-preview-header { align-items: stretch; flex-direction: column; }
  .barcode-zoom-control { justify-content: space-between; }
  .barcode-center-actions { grid-template-columns: minmax(0, 1fr); }
  .barcode-sheet-settings-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Stock workspace visual system: compact, calm, and responsive. */
.main-content > .inventory-control { min-width: 0; }

.inventory-control {
  /* Every individual element on this page used to be drawn inside a line: the command groups, the six
     KPI cards, the tab strip, the table, the toolbars. Nine or ten boxes on one screen, each announcing
     its own edge. The owner asked for the lines to go and for a soft background tint to do the
     separating instead (TASK-2026-036 FR-010).

     The borders are made transparent rather than removed. Every one of them is `1px solid`, so keeping
     the width keeps the layout exactly where it is — nothing shifts by a pixel — while nothing is
     painted. The two surface tints already existed and now carry the whole job of telling one block from
     the next, so they are pushed a little further apart from the page behind them.

     This page first, on the owner's instruction, before the same treatment goes anywhere else. */
  --stock-surface: color-mix(in srgb, var(--surface) 78%, var(--sunken));
  --stock-raised: color-mix(in srgb, var(--sunken) 92%, var(--surface));
  --stock-border: transparent;
  --stock-border-strong: transparent;
  --stock-muted: color-mix(in srgb, var(--muted) 78%, var(--text));
  --stock-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1680px;
  margin-inline: auto;
  padding-bottom: 24px;
}

.inventory-control :is(.btn, input, select, textarea) { font-size: .8rem; }
.inventory-control .btn { min-height: 38px; padding: 8px 12px; border-radius: 2px; box-shadow: none; }
.inventory-control .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: none; }
.inventory-control .btn:active:not(:disabled) { transform: translateY(0); }

.inventory-control-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  align-items: center;
  gap: 24px;
  padding: 12px 16px;
  border: 1px solid var(--stock-border-strong);
  border-radius: var(--stock-radius);
  background: var(--stock-surface);
  box-shadow: none;
}

.inventory-heading-line { align-items: center; gap: 8px; }
.inventory-control-hero h2 { font-size: clamp(1.18rem, calc(1.6 * var(--vw)), 1.45rem); letter-spacing: 0; line-height: 1.3; }
.inventory-control-hero .context-info { align-self: center; margin: 0; color: var(--stock-muted); }
.inventory-control-health {
  min-width: 0;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid var(--stock-border);
  border-radius: 2px;
  background: var(--stock-raised);
}
.inventory-health-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 14%, transparent);
}
.inventory-control-health strong { margin-bottom: 1px; font-size: .8rem; line-height: 1.35; }
.inventory-control-health small { color: var(--stock-muted); font-size: .72rem; line-height: 1.55; }

.inventory-command-bar {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}
.inventory-command-group {
  align-content: flex-start;
  align-items: center;
  gap: 8px;
  overflow: visible;
  padding: 11px 12px 12px;
  border: 1px solid var(--stock-border-strong);
  border-radius: var(--stock-radius);
  background: var(--stock-surface);
}
/* TASK-2026-123: the toolbar buttons keep their natural width (they used to stretch to fill the group,
   which made Print and Export two huge plates) and a disabled one wears the system's own disabled look
   instead of a private dimmed plate. */
.inventory-command-group .btn { flex: 0 0 auto; justify-content: center; }
.inventory-command-label {
  position: static;
  flex: 0 0 100%;
  margin-bottom: 2px;
  color: var(--stock-muted);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}
.inventory-command-documents-label {
  margin-top: 3px;
  padding-top: 8px;
  border-top: 1px solid var(--stock-border);
}
/* TASK-2026-123: New Inventory Count used to be painted from the blue/violet chart series, which is
   purple on the brand themes. It is now a plain primary button and takes the theme's accent fill. */

.inventory-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-block: 0; }
.inventory-kpi {
  --kpi-color: var(--brand);   /* the system accent, not the purple chart series (TASK-2026-123) */
  justify-content: flex-start;
  min-height: 66px;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid var(--stock-border);
  border-radius: var(--stock-radius);
  background: var(--stock-raised);
  box-shadow: none;
}
.inventory-kpi > div { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; }
.inventory-kpi-icon {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border: 1px solid color-mix(in srgb, var(--kpi-color) 22%, var(--stock-border));
  border-radius: 2px;
  background: color-mix(in srgb, var(--kpi-color) 10%, var(--bg));
  color: var(--kpi-color);
  font-size: .8rem;
}
.inventory-kpi strong { font-size: 1.08rem; line-height: 1; }
.inventory-kpi span:not(.inventory-kpi-icon) { margin: 0; color: var(--stock-muted); font-size: .71rem; line-height: 1.35; }
/* The six cards used to carry six different icon colours — gold, blue, amber, red, green, violet — which
   read as six unrelated warnings rather than one row of counts. The owner asked for the icons to stay and
   for the colours to become one (TASK-2026-036 FR-012), so the per-tone overrides are gone and every card
   inherits the single `--kpi-color` set on `.inventory-kpi`. The tone classes are still emitted by
   `renderKpi`, so nothing in the markup had to change and a future decision can colour them again from
   one place. */

.inventory-control-card {
  min-height: 0;
  margin-top: 0;
  border: 1px solid var(--stock-border-strong);
  border-radius: var(--stock-radius);
  background: var(--stock-surface);
  box-shadow: none;
}
/* The tabs are buttons, and now they look like the application's buttons. They used to be their own
   invention: a 44px underlined strip with its own radius, its own weight and its own blue, sitting on a
   tinted rail — a shape that appears nowhere else in the store. The owner asked for the standard button
   design, colouring and "one-feeling" (TASK-2026-036 FR-011), and said no screen has tabs like the POS
   rail, so that is deliberately not the model either.

   So: the shared control height, the shared radius, the shared resting surface, and the accent used for a
   selected control everywhere else. The icons are gone from the markup. */
.inventory-tabs {
  gap: 6px;
  padding: 10px 10px 0;
  border-bottom: 0;
  background: transparent;
}
.inventory-tab-btn {
  min-height: var(--control);
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--stock-raised);
  color: var(--stock-muted);
  font-size: 0.82rem;
  font-weight: 600;
  gap: 0;
  white-space: nowrap;
}
.inventory-tab-btn:hover { background: var(--tint); color: var(--text); }
.inventory-tab-btn.active {
  background: var(--tint);
  border-color: var(--border-active);
  color: var(--brand);
  box-shadow: none !important;
}
.inventory-tab-btn:focus { box-shadow: none !important; }
.inventory-tab-btn:focus-visible {
  outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width));
  box-shadow: none !important;
}
.inventory-tab-btn::after { display: none; }
/* The bar's own home, a sibling of the tab content rather than a child of it (TASK-2026-036 FR-005). */
.inventory-filter-host { padding: 10px 14px 0; }
.inventory-filter-host[hidden] { display: none; }
/* And on this page it wears no line either, like everything else here now. */
.inventory-control .filter-bar {
  border-color: transparent;
  background: var(--stock-raised);
  margin-bottom: 0;
}
.inventory-tab-content { padding: 14px; }
.inventory-tab-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(112px, .8fr)) auto auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.inventory-tab-toolbar select { width: 100%; min-width: 0; min-height: 36px; }
.inventory-search-box { min-width: 0; }
.inventory-search-box > i { inset-inline-start: 12px; color: var(--stock-muted); }
.inventory-search-box input { min-height: 36px; padding-inline: 36px 32px; }
.inventory-search-box input:-webkit-autofill,
.inventory-search-box input:-webkit-autofill:hover,
.inventory-search-box input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--stock-raised) inset !important;
  box-shadow: 0 0 0 1000px var(--stock-raised) inset !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}
.inventory-tab-toolbar > .btn { min-height: 36px; white-space: nowrap; }
.inventory-result-count { margin-inline-start: 0; color: var(--stock-muted); font-size: .72rem; font-weight: 650; justify-self: end; }

.inventory-selection-summary {
  justify-content: flex-start;
  min-height: 32px;
  margin-bottom: 10px;
  padding: 5px 0;
  border: 0;
  border-top: 1px solid var(--stock-border);
  border-radius: 0;
  background: transparent;
  color: var(--stock-muted);
  font-size: .72rem;
}
.inventory-selection-summary.is-active {
  border-color: color-mix(in srgb, var(--teal-400) 48%, var(--stock-border));
  background: transparent;
  color: var(--text);
}
.inventory-selection-summary.is-active .btn { margin-inline-start: auto; }
.inventory-selection-summary.is-inactive .btn { display: none; }
.inventory-selection-summary .btn { min-height: 30px; padding: 5px 9px; }
.inventory-data-table-wrap { max-height: min(calc(60 * var(--vh)), 650px); border-color: var(--stock-border-strong); border-radius: 2px; }
.inventory-data-table { min-width: 860px; }
.inventory-data-table th { padding: 10px 11px; background: var(--stock-raised); color: var(--stock-muted); font-size: .7rem; letter-spacing: 0; text-transform: none; }
.inventory-data-table td { padding: 10px 11px; font-size: .76rem; }
.inventory-data-table tbody tr:hover,
.inventory-data-table tbody tr.is-selected { background: color-mix(in srgb, var(--teal-700) 7%, var(--surface)); }
.inventory-variant-pill, .inventory-sku, .inventory-stock-status, .inventory-movement-type { border-radius: 2px; }
/* TASK-2026-124 (mockup 019, approved 2026-10-05): four surface levels for the two brand themes only.
   Level 0 page = --bg-primary, level 1 panel = --bg-secondary, level 2 card = --bg-card, level 3 control =
   --bg-tertiary. The stock page's two local tints used to be mixes of the old secondary and tertiary, so
   neighbouring blocks sat within 1.00-1.19:1 of each other; they now point straight at the levels. Card-level
   blocks carry a 1px hairline because a fill step alone clips on a bright panel. The other five palettes are
   untouched, hence the prefix selector. Active tab and selected row are one accent block with white text. */
html[data-theme^="retailpower"] .inventory-control {
  --stock-surface: var(--surface);
  --stock-raised: var(--surface);
  --stock-border: var(--line);
  --stock-border-strong: var(--line);
}
html[data-theme^="retailpower"] .inventory-control-card { background: var(--card); box-shadow: var(--card-shadow); }
html[data-theme^="retailpower"] .inventory-command-group { background: var(--surface); }
html[data-theme^="retailpower"] .inventory-command-group .btn-neutral { background: var(--surface); }
html[data-theme^="retailpower"] .inventory-data-table-wrap { background: var(--card); box-shadow: var(--card-shadow); }
html[data-theme^="retailpower"] .inventory-data-table th { background: var(--card) !important; }
html[data-theme^="retailpower"] .inventory-control .filter-bar { background: var(--card); border-color: var(--line); box-shadow: var(--card-shadow); }
html[data-theme^="retailpower"] .inventory-control .filter-bar .filter-q,
html[data-theme^="retailpower"] .inventory-control .filter-bar .filter-sort,
html[data-theme^="retailpower"] .inventory-control .filter-bar .filter-add { background: var(--sunken); }
html[data-theme^="retailpower"] .stock-selection-tools { background: var(--surface); border-style: solid; }
html[data-theme^="retailpower"] .inventory-tab-btn { background: var(--surface); border-color: var(--line); }
html[data-theme^="retailpower"] .inventory-tab-btn:hover { background: var(--tint); }
/* TASK-2026-163 S3: a selected `.tab-btn` is the brand colour in bold with a 2px rule under it (TABS above), no longer a filled block. The
   stock page's own tab (`.inventory-tab-btn`) keeps its filled look until the stock lane (P2) redraws it. */
html[data-theme^="retailpower"] .inventory-tab-btn.active {
  background: var(--fill) !important;
  border-color: var(--fill) !important;
  color: var(--on-fill) !important;
}
html[data-theme^="retailpower"] .inventory-data-table tbody tr.is-selected,
html[data-theme^="retailpower"] .inventory-data-table tbody tr.is-selected > td {
  background: var(--fill);
  color: var(--on-fill);
  box-shadow: none;
}
html[data-theme^="retailpower"] .inventory-data-table tbody tr.is-selected .inventory-variant-pill,
html[data-theme^="retailpower"] .inventory-data-table tbody tr.is-selected .inventory-sku,
html[data-theme^="retailpower"] .inventory-data-table tbody tr.is-selected .inventory-stock-status {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.5);
  color: var(--on-fill);
}
html[data-theme^="retailpower"] .inventory-data-table tbody tr.is-selected .inventory-stock-status i { background: var(--on-fill); }
html[data-theme^="retailpower"] .kpi-card,
html[data-theme^="retailpower"] .card { border-color: var(--line); }
/* TASK-2026-124 readability, measured on the probe pages after the levels moved (text AA 4.5:1).
   - The pale pill inside an accent block was 16% white (4.25:1 for its white text); 10% gives 4.84.
   - A selected row paints its own cells white, but a cell that sets the accent colour inline (a money total)
     was teal on teal; the attribute selector wins without touching each module.
   - Status text on its own 14% tint: on the lighter dark card the tint lifts the background, so the dark
     theme's four status colours step one notch lighter for TEXT only (fills such as dots keep the tokens).
   - A muted badge uses the secondary text colour: --text-muted is 4.38:1 on the control level in dark. */
html[data-theme^="retailpower"] .inventory-data-table tbody tr.is-selected .inventory-variant-pill,
html[data-theme^="retailpower"] .inventory-data-table tbody tr.is-selected .inventory-sku,
html[data-theme^="retailpower"] .inventory-data-table tbody tr.is-selected .inventory-stock-status,
html[data-theme^="retailpower"] tbody tr.selected-row > td .badge { background: rgba(255,255,255,.10); }
html[data-theme^="retailpower"] tbody tr.selected-row > td[style*="accent-gold"] { color: var(--on-fill) !important; }
html[data-theme^="retailpower"] :is(.badge-muted, .badge-draft) { color: var(--muted); }
html[data-theme="retailpower-dark"] :is(.badge-success, .badge-received, .badge-completed, .inventory-stock-healthy) { color: #58CB93; }
html[data-theme="retailpower-dark"] :is(.badge-danger, .inventory-stock-out) { color: #F7A090; }
html[data-theme="retailpower-dark"] :is(.badge-warning, .badge-pending, .inventory-stock-low) { color: #EBA85A; }
html[data-theme="retailpower-dark"] :is(.badge-info, .badge-submitted, .badge-cashier) { color: #40C2D6; }
html[data-theme="retailpower-dark"] :is(.badge-gold, .badge-admin, .badge-ready) { color: var(--teal-400); }
/* A ledger totals row and an imported-statement row sat on the control level, where a coloured amount reads
   4.4:1 (light) and 3.4:1 (dark); they now sit on the panel level, still a visible step below the card body. */
html[data-theme^="retailpower"] .bank-ledger .bank-ledger-totals td,
html[data-theme^="retailpower"] .bank-ledger tr[data-statement="1"] td { background: var(--surface); }
html[data-theme="retailpower-dark"] .bank-ledger .bank-amount-out { color: #F7A090; }
/* The sale pane held the cards on the control level, which in dark is LIGHTER than a card (an inverted step); it is the panel level. */
html[data-theme^="retailpower"] .pos-terminal-shell .pos-grid { background: var(--surface); }
/* The (i) button's accent glyph on the page level was 4.50:1 (a rounding away from failing); one step darker, hover unchanged. */
html[data-theme="retailpower"] .info-tip:not(:hover):not([aria-expanded="true"]) { color: var(--fill-hover); }
/* A dialog note on the panel level: a 3px accent edge only; the hairline gives the other three sides an edge. */
html[data-theme^="retailpower"] .bank-slip-notice { border-block: 1px solid var(--line); border-inline-end: 1px solid var(--line); }
html[data-theme="retailpower"] .period-preset[aria-checked="true"] { color: var(--fill-hover); }  /* accent on its own tint over the darker page was 4.07:1 */
.inventory-variant-pill, .inventory-sku { padding: 3px 6px; }
.inventory-stock-status { padding: 3px 6px; font-size: .68rem; }
.inventory-pagination { padding-top: 10px; color: var(--stock-muted); font-size: .72rem; }

.inventory-section-heading { gap: 12px; margin-bottom: 12px; padding: 4px 0; }
.inventory-section-heading h3 { font-size: 1rem; }
.inventory-section-heading p { color: var(--stock-muted); font-size: .75rem; line-height: 1.55; }
.inventory-workflow-panel, .inventory-count-history, .inventory-audit-section { margin-top: 12px; padding: 14px; border-radius: var(--stock-radius); }
.inventory-workflow-steps { gap: 7px; }
.inventory-workflow-steps li { gap: 8px; padding: 9px; border-radius: 2px; }
.inventory-workflow-steps li > span { width: 24px; height: 24px; flex-basis: 24px; border-radius: 2px; }
.inventory-workflow-steps strong { font-size: .76rem; }
.inventory-workflow-steps small { margin-top: 2px; color: var(--stock-muted); font-size: .68rem; line-height: 1.5; }

.inventory-audit-grid { gap: 8px; }
.inventory-audit-card { min-height: 78px; padding: 12px; border-radius: var(--stock-radius); }
.inventory-audit-card > span { width: 30px; height: 30px; border-radius: 2px; }
.inventory-audit-card strong { font-size: .85rem; }
.inventory-audit-card p { margin-top: 4px; color: var(--stock-muted); font-size: .71rem; line-height: 1.5; }

.inventory-workflow-dialog {
  width: min(var(--inventory-dialog-inline-size, var(--dialog-inline-size-workspace)), calc(calc(100 * var(--vw)) - (var(--dialog-viewport-gutter) * 2)));
  max-height: var(--dialog-max-block-size);
  overflow: hidden;
  border: 1px solid var(--stock-border);
  border-radius: 2px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
}
.inventory-workflow-dialog .modal-header { min-height: 64px; padding: 13px 16px; background: var(--surface); }
.inventory-workflow-dialog .modal-header h3 { font-size: .98rem; }
.inventory-workflow-dialog .modal-body { padding: 15px 16px; }
.inventory-workflow-dialog .modal-footer { padding: 11px 16px; background: var(--bg); }
.inventory-workflow-dialog .modal-footer .btn { min-width: 6.5rem; }
.inventory-workflow-dialog .modal-close { width: 32px; height: 32px; border: 1px solid var(--stock-border); border-radius: 2px; }
.inventory-locations-modal-card { --inventory-dialog-inline-size: var(--dialog-inline-size-workspace); }
.inventory-count-session-card { --inventory-dialog-inline-size: var(--dialog-inline-size-wide); max-height: var(--dialog-max-block-size); }
.inventory-print-modal-card { --inventory-dialog-inline-size: var(--dialog-inline-size-wide); width: min(var(--inventory-dialog-inline-size), calc(calc(100 * var(--vw)) - (var(--dialog-viewport-gutter) * 2))); max-width: none; height: var(--dialog-block-size-preview); }
.inventory-locations-modal-body { gap: 12px; }
.inventory-locations-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.inventory-locations-overview article { gap: 8px; padding: 10px; border-radius: 2px; }
.inventory-locations-overview strong { font-size: .9rem; }
.inventory-location-editor, .inventory-locations-list, .inventory-transfer-history { padding: 13px; border-radius: 2px; }
.inventory-location-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.inventory-location-card { padding: 11px; border-radius: 2px; }
.inventory-location-icon { flex-basis: 2.1rem; min-height: 2.1rem; border-radius: 2px; }
.inventory-location-metrics { gap: 5px; margin-top: 9px; }
.inventory-location-metrics span { padding: 7px; border-radius: 2px; }
.inventory-transfer-items { min-width: 0; }
.inventory-transfer-items th, .inventory-transfer-items td { padding: 9px 8px; }
.inventory-transfer-items input { min-height: 36px; }
.inventory-transfer-empty, .inventory-transfer-notice { padding: 10px; border-radius: 2px; font-size: .72rem; }

@media (max-width: 1440px) {
  .inventory-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .inventory-control-hero { grid-template-columns: 1fr; }
  .inventory-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inventory-tab-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-search-box, .inventory-result-count { grid-column: 1 / -1; }
  .inventory-result-count { justify-self: start; }
  .inventory-locations-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .inventory-control { gap: 12px; padding-bottom: 14px; }
  .inventory-control-hero { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .inventory-control-hero h2 { font-size: 1.1rem; }
  .inventory-control-health { padding: 7px 9px; }
  .inventory-control-health small { display: none; }
  .inventory-command-bar {
    grid-template-columns: minmax(0, 1fr);
  }
  .inventory-command-group { align-items: stretch; padding: 10px; }
  .inventory-command-group .btn { flex-basis: 7.5rem; }
  .inventory-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-kpi { min-height: 64px; padding: 9px 10px; }
  .inventory-kpi-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .inventory-tabs { grid-template-columns: repeat(4, minmax(150px, 1fr)); overflow-x: auto; }
  .inventory-tab-content { padding: 10px; }
  .inventory-tab-toolbar { align-items: stretch; }
  .inventory-search-box, .inventory-tab-toolbar select, .inventory-tab-toolbar .btn { width: 100%; min-width: 0; }
  .inventory-result-count { width: 100%; margin-inline-start: 0; }
  .inventory-workflow-dialog { width: calc(calc(100 * var(--vw)) - (var(--dialog-viewport-gutter-mobile) * 2)); }
  .inventory-workflow-dialog .modal-header { min-height: 58px; padding: 11px 12px; }
  .inventory-workflow-dialog .modal-body { padding: 11px 12px; }
  .inventory-workflow-dialog .modal-footer { padding: 9px 12px; }
  .inventory-workflow-dialog .modal-footer .btn { flex: 1 1 0; min-width: 0; }
  .inventory-locations-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-transfer-items { min-width: 35rem; }
  .inventory-print-modal-card { width: calc(calc(100 * var(--vw)) - (var(--dialog-viewport-gutter-mobile) * 2)); height: calc(calc(100 * var(--vh)) - (var(--dialog-viewport-gutter-mobile) * 2)); }
}

@media (max-width: 440px) {
  .inventory-control-hero { grid-template-columns: 1fr; }
  .inventory-control-health { justify-self: stretch; }
  .inventory-command-group .btn { flex-basis: 100%; }
  .inventory-tab-toolbar { grid-template-columns: 1fr; }
  .inventory-search-box, .inventory-result-count { grid-column: auto; }
}

/* Authorized Global Search: shell utility and body-level command surface. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sidebar-utility-group {
  /* The same 1px as the group buttons below it — see the note on .nav-section-head. The collapsed
     rail keeps its own inset further down; its icons are centred, so it never had this gap. */
  margin: 0 2px 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* Flex, not a fixed 3fr/7fr grid: "Collapse all" only exists in the inline (accordion) presentation, so
   on a desktop sidebar the second cell is empty and the search button used to sit in 30% of the row
   (TASK-2026-028 FR-008). A hidden flex sibling takes no space, so search fills what is left. */
.sidebar-utility-row {
  display: flex;
  align-items: stretch;
  gap: .35rem;
}
.sidebar-utility-row #global-search-sidebar-btn { flex: 1 1 auto; }

.sidebar-utility-action.nav-item {
  width: auto;
  min-width: 0;
  min-height: var(--control-sm, 36px);
  justify-content: flex-start;
  gap: .45rem;
  padding: .35rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
}

.sidebar-utility-action.nav-item:hover {
  border-color: var(--border-active);
  background: var(--tint);
  color: var(--text);
}

html[dir="rtl"] .sidebar-utility-action.nav-item {
  padding: .35rem .6rem;
  border: 1px solid var(--line);
}

.sidebar-utility-action .nav-icon { width: 1rem; font-size: .85rem; }
.sidebar-utility-action .nav-label { font-size: .78rem; }

/* In the collapsed rail the search button is one of the icon buttons, so it takes the same box as the
   section buttons beside it: content-sized and centred, 9px of padding, no border, and the icon metrics
   of `.nav-section-icon` (TASK-2026-028 FR-037). It used to keep the expanded row's stretch, its own
   padding and border, and a label whose line box was taller than the icon — measured 51x35.5 against
   their 40x31.3 in a 68px rail. */
.sidebar.collapsed .sidebar-utility-action.nav-item {
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  gap: 0;
  border: 0;
  justify-content: center;
}
.sidebar.collapsed .sidebar-utility-action .nav-icon { width: 22px; font-size: 0.95rem; }
/* `.nav-label` only loses its width when collapsed, and its line box was setting the height. The
   section buttons' own text is `display: none` there for the same reason. */
.sidebar.collapsed .sidebar-utility-action .nav-label { display: none; }

.sidebar.collapsed #global-search-sidebar-btn:hover::after { content: none; }

.global-search-sidebar-tooltip {
  position: fixed;
  z-index: 100020;
  width: max-content;
  max-width: min(18rem, calc(calc(100 * var(--vw)) - 1rem));
  padding: .4rem .55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sunken);
  color: var(--text);
  box-shadow: none;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-.2rem);
  transition: opacity .16s ease, transform .16s ease;
}

.global-search-sidebar-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sidebar.collapsed .sidebar-utility-group {
  margin: 0 8px 8px;
  padding-bottom: 8px;
}
.sidebar.collapsed .sidebar-utility-row { flex-direction: column; }
/* The section buttons' own collapsed padding and margin (FR-037). */
.sidebar.collapsed .sidebar-utility-action.nav-item { margin: 4px auto; padding: 9px; }

body.global-search-open { overflow: hidden; }

.global-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, calc(4 * var(--vw)), 48px);
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter: blur(12px) saturate(.78);
  -webkit-backdrop-filter: blur(12px) saturate(.78);
}

.global-search-overlay.is-closing { pointer-events: none; }

.global-search-dialog {
  --global-search-open-duration: 320ms;
  --global-search-close-duration: 210ms;
  width: min(46rem, 100%);
  /* Height is set inline once per open (FR-011); this cap only protects tiny viewports. */
  max-height: calc(calc(100 * var(--vh)) - 24px);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overflow: hidden;
  padding: .5rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  transform-origin: center;
}

.global-search-dialog.is-motion-active { will-change: width, height, transform, opacity; }

.global-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.global-search-actions:empty { display: none; }

.global-search-input-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .35rem;
  min-height: 3.25rem;
  padding: .25rem .375rem .25rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sunken);
  transition: border-color .18s ease, background-color .18s ease;
}

html[dir="rtl"] .global-search-input-shell { padding: .25rem .75rem .25rem .375rem; }
/* A quiet edge, not a gold ring: the palette used to show a brand border on the field at the same time
   as a brand border round the highlighted row, and the two competed (TASK-2026-028 FR-031). */
.global-search-input-shell:focus-within {
  border-color: var(--line);
  background: var(--surface);
}
.global-search-leading-icon { display: inline-flex; color: var(--muted); font-size: 1rem; }
.global-search-input-shell input {
  min-width: 0;
  height: 44px;
  padding: 0 4px;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: var(--text);
  font: 600 1rem/1.4 inherit;
}
.global-search-input-shell input::-webkit-search-cancel-button { display: none; }
.global-search-input-shell input::placeholder { color: var(--muted); font-weight: 500; }

.global-search-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.global-search-icon-button:hover,
.global-search-icon-button:focus-visible {
  border-color: var(--border-active);
  background: var(--tint);
  color: var(--text);
  outline: 0;
}
.global-search-close { width: 34px; height: 34px; border-radius: 2px; }

.global-search-guidance,
.global-search-status { color: var(--muted); font-size: .8rem; }
.global-search-guidance { padding: 4px 10px 6px; text-align: center; }
.global-search-status:empty { display: none; }
.global-search-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
/* `scrollbar-color` alone is not enough here: Chrome lets any matching `::-webkit-scrollbar` rule take
   precedence over the standard property, and the global rule at the top of this file matches every
   element — so the palette kept the brand-gold thumb the owner was looking at (TASK-2026-028 FR-031).
   Found by verifying the deployed build, not by reading the stylesheet. */
.global-search-results::-webkit-scrollbar { width: var(--scrollbar-size-inner); height: var(--scrollbar-size-inner); }
.global-search-results::-webkit-scrollbar-track { background: transparent; border-radius: 2px; }
.global-search-results::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 2px;
}
.global-search-results::-webkit-scrollbar-thumb:hover {
  background: var(--field);
  background-clip: padding-box;
}
.global-search-results:empty { display: none; }
.global-search-group + .global-search-group { margin-top: 8px; }
.global-search-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  color: var(--muted);
}
.global-search-group-header h3 { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.global-search-group-count {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--sunken);
  color: var(--muted);
  font-size: .68rem;
  text-align: center;
}

.global-search-result {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.global-search-result:hover,
.global-search-result.is-active {
  border-color: transparent;
  background: var(--tint);
}
/* The keyboard's place in the list is one bar on the leading edge — it reads at a glance without adding
   a second ring to the dialog (TASK-2026-028 FR-031). */
.global-search-result.is-active::before {
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 0;
  inline-size: 3px;
  border-radius: 2px;
  background: var(--brand);
  content: '';
}
.global-search-result-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--sunken);
  color: var(--brand);
}
.global-search-result-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.global-search-result-title,
.global-search-result-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result-title { font-size: .86rem; }
.global-search-result-subtitle { color: var(--muted); font-size: .72rem; font-weight: 500; }
.global-search-result-arrow { display: inline-flex; color: var(--text-muted); }
html[dir="rtl"] .global-search-result-arrow { transform: rotate(180deg); }

.global-search-view-more,
.global-search-retry {
  border: 0;
  background: transparent;
  color: var(--brand);
  font: 700 .75rem/1.4 inherit;
  cursor: pointer;
}
.global-search-view-more { width: 100%; padding: 8px; text-align: center; }
.global-search-view-more:hover,
.global-search-view-more:focus-visible,
.global-search-retry:hover,
.global-search-retry:focus-visible { text-decoration: underline; outline: 0; }

.global-search-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border-radius: 2px;
  text-align: center;
}
.global-search-loading { color: var(--muted); }
.global-search-error { border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--line)); background: var(--danger-tint); }
.global-search-request-id { color: var(--muted); font-size: .68rem; user-select: text; }

@media (max-width: 700px) {
  .global-search-overlay { align-items: center; padding: 12px; }
  .global-search-dialog { width: 100%; max-height: calc(calc(100 * var(--dvh)) - 24px); border-radius: 2px; padding: 8px; }
  .global-search-input-shell { min-height: 52px; padding-inline-start: 10px; }
  .global-search-leading-icon { display: none; }
  .global-search-input-shell { grid-template-columns: minmax(0, 1fr) auto auto; }
  .global-search-result { min-height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .global-search-input-shell,
  .global-search-result,
  .global-search-sidebar-tooltip { transition: none; }
}

/* TASK-2026-021 P2 — additive employment/compensation history workspace */
.employment-workspace { display: grid; gap: 1rem; }
.employment-toolbar,
.employment-content-heading,
.employment-history-heading,
.employment-history-actions,
.employment-form-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.employment-toolbar { padding: 1rem; }
.employment-toolbar h2,
.employment-action-form h3 { margin: 0; }
.employment-toolbar p { margin: .25rem 0 0; color: var(--muted); }
.employment-history-content { display: grid; gap: .75rem; }
.employment-content-heading { padding-inline: .25rem; }
.employment-history-record { padding: 1rem; display: grid; gap: 1rem; }
.employment-history-heading > div,
.employment-history-line { display: grid; gap: .25rem; }
.employment-history-heading span,
.employment-history-line small { color: var(--muted); }
.employment-history-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.employment-history-columns section { display: grid; align-content: start; gap: .6rem; min-width: 0; }
.employment-history-columns h4 { margin: 0; padding-block-end: .4rem; border-block-end: 1px solid var(--line); }
.employment-history-line { padding: .65rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.employment-action-form { padding: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.employment-action-form h3,
.employment-form-wide,
.employment-form-actions { grid-column: 1 / -1; }
.employment-components { display: grid; gap: .6rem; }
.employment-component-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; align-items: end; gap: .6rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.employment-action-form textarea { min-height: 5rem; resize: vertical; }

@media (max-width: 900px) {
  .employment-history-columns,
  .employment-action-form { grid-template-columns: 1fr; }
  .employment-component-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employment-action-form h3,
  .employment-form-wide,
  .employment-form-actions { grid-column: 1; }
}

@media (max-width: 540px) {
  .employment-component-row { grid-template-columns: 1fr; }
  .employment-history-actions .btn,
  .employment-form-actions .btn { flex: 1 1 auto; }
}

/* ── Shared combobox (TASK-2026-028 FR-003/FR-017) — tokens only ─────────── */
/* The list is placed by floating_ui.js: a modal body scrolls, and an absolutely positioned list inside it
   would be clipped at the first field. Fixed positioning also keeps it out of the page's scroll box. */
.combo { position: relative; }
/* A trigger is a button, not a field: it takes the same box as an input so a column of form controls still
   lines up, but it carries a caret and no cursor, so nothing about it invites typing (TASK-2026-034
   FR-006). The caret is drawn from borders rather than a glyph, so no font has to have it. */
.combo-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  height: var(--control);
  padding: 0 10px;
  background: var(--sunken);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .85rem;
  text-align: start;
  cursor: pointer;
}
.combo-trigger[aria-expanded="true"] { border-color: var(--border-active); }
.combo-trigger:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.combo-trigger-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-trigger-caret {
  flex: 0 0 auto;
  inline-size: 0;
  block-size: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid var(--muted);
}
.combo-list {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: var(--z-drawer);
  width: max-content;
  min-width: 220px;
  max-width: min(calc(92 * var(--vw)), 380px);
  max-height: min(calc(50 * var(--vh)), 260px);
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}
.combo-list[hidden] { display: none; }
.combo-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border-radius: var(--radius);
  font-size: .85rem;
  cursor: pointer;
}
.combo-list li:hover,
.combo-list li.is-active { background: var(--tint); }
.combo-list li.is-active { outline: 1px solid var(--border-active); outline-offset: -1px; }
.combo-primary { font-weight: 600; color: var(--text); }
.combo-meta { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.combo-list li.combo-empty { color: var(--text-muted); cursor: default; justify-content: flex-start; }
/* A chosen record, shown instead of the search box (POS pattern). */
.combo-chosen {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--control-sm, 36px);
  padding: 4px 6px 4px 12px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.combo-chosen-text { display: flex; flex-direction: column; min-width: 0; }
.combo-chosen-name { font-weight: 600; font-size: .85rem; }
.combo-chosen-meta { color: var(--muted); font-size: .75rem; }
.combo-clear {
  margin-inline-start: auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.combo-clear:hover { background: var(--tint); color: var(--danger); }
.form-hint { margin: 6px 0 0; font-size: .75rem; color: var(--text-muted); }
/* A confirmation that names its subject instead of pasting it into a sentence (FR-018). */
.confirm-subject {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: start;
}
.confirm-subject-name { font-weight: 700; font-size: .95rem; }
.confirm-subject-meta { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.confirm-subject-facts { display: flex; gap: 18px; margin: 8px 0 0; }
.confirm-subject-facts dt { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.confirm-subject-facts dd { margin: 2px 0 0; font-weight: 600; font-size: .85rem; }
.confirm-note { color: var(--muted); font-size: .82rem; text-align: start; }
.confirm-field-label { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; text-align: start; }
.alt-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.alt-field-head label { margin: 0; }
.alt-customer-field .combo.hidden,
.alt-customer-field .combo-chosen.hidden { display: none; }
/* ── end shared combobox ─────────────────────────────────────────────────── */

/* ── Shared filter bar (spec 004, FR-012…FR-015) — tokens only ───────────── */
.filter-bar {
  /* One floor for every button in the row. They used to size to their own label, so "Date" stood at
     40px beside an 80px "Add filter" — the erratic widths the owner reported (TASK-2026-036 FR-008). */
  --filter-control-min: 6.5rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
.filter-bar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.filter-bar .filter-q {
  flex: 0 1 25%;
  min-inline-size: 10rem;
  max-inline-size: 24rem;
  height: var(--control);
  padding: 0 12px;
  background: var(--sunken);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.filter-bar .filter-q:focus,
.filter-bar .filter-sort:focus,
.filter-bar .filter-date-chip:focus-visible,
.filter-bar .filter-add:focus-visible,
.filter-bar .filter-chip-remove:focus-visible,
.filter-menu [role="menuitem"]:focus-visible {
  outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width));
}
.filter-bar .filter-date-chip,
.filter-bar .filter-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-inline-size: var(--filter-control-min);
  max-inline-size: 16rem;
  height: var(--control);
  padding: 0 12px;
  background: var(--sunken);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* An explicit `display` beats the `hidden` attribute, and two pages hide the date chip because they have
   no date to filter by (Current Stock and Customers). Giving these buttons `display: inline-flex` for
   their centring therefore un-hid the chip on both — caught by looking at the screen, not by a test.
   Same trap this file has already had to patch for `.combo-list`, the dimension list and the nav
   flyouts, which is why there is now a test that walks every control the bar hides this way. */
.filter-bar .filter-date-chip[hidden],
.filter-bar .filter-add[hidden] { display: none; }
/* TASK-2026-123: Add filter is a quiet button, so it wears the system ghost look (transparent plate,
   secondary text, normal button type size) like Clear all beside it, not a private grey plate. */
.filter-bar .filter-add:not([aria-expanded="true"]) {
  background: transparent;
  font-size: 1rem;
  transition: var(--transition);
}
.filter-bar .filter-add:not([aria-expanded="true"]):hover {
  border-color: var(--muted);
  color: var(--text);
  background: var(--tint);
}
.filter-bar .filter-date-chip.is-active,
.filter-bar .filter-date-chip[aria-expanded="true"],
.filter-bar .filter-add[aria-expanded="true"] {
  background: var(--tint);
  color: var(--brand);
  border-color: var(--border-active);
}
/* width, not just height: the shared `select` rule sets width 100%, which took the whole bar and pushed
   the sort control and the clear button onto rows of their own (TASK-2026-028 FR-010). */
.filter-bar .filter-sort {
  flex: 0 0 auto;
  width: auto;
  min-width: 9rem;
  max-width: 14rem;
  height: var(--control);
  padding: 0 10px;
  background: var(--sunken);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* Always on the screen, on the owner's instruction (TASK-2026-036 FR-007). It used to be `hidden` with
   its box kept by `visibility`, which stopped the row jumping but still left the owner looking for a
   control that was not there. Disabled reads as "nothing to clear" and stays where the eye left it. */
.filter-bar .filter-clear {
  flex: 0 0 auto;
  min-inline-size: var(--filter-control-min);
  justify-content: center;
}
.filter-bar .filter-clear:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.filter-menu-host { position: relative; }
/* Anchored to the viewport by floating_ui.js: a fixed panel cannot widen the page's scroll box, which is
   what used to push the content sideways when a menu opened near the page edge (TASK-2026-028 FR-010). */
.filter-menu[role="menu"],
.filter-editor {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: var(--z-drawer);
  min-width: 220px;
  max-width: min(calc(92 * var(--vw)), 360px);
  max-height: min(calc(70 * var(--vh)), 520px);
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}
.filter-menu[hidden],
.filter-editor[hidden],
.filter-note[hidden],
.filter-custom-range[hidden],
.filter-dimension-list li[hidden] { display: none; }
.filter-menu .filter-menu-item,
.filter-dimension-list li {
  display: block;
  width: 100%;
  padding: 8px 10px;
  text-align: start;
  background: transparent;
  color: var(--text);
  border: 0;
  border-radius: var(--radius);
  font-size: 0.85rem;
  cursor: pointer;
}
.filter-menu .filter-menu-item:hover,
.filter-menu .filter-menu-item:focus,
.filter-dimension-list li:hover,
.filter-dimension-list li:focus { background: var(--tint); }
.filter-menu .filter-menu-item[aria-checked="true"] { color: var(--brand); font-weight: 700; }
.filter-dimension-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
/* The bar's own menus type into the same kind of field, so they take the same box (FR-001). */
.filter-dimension-search,
.filter-editor-input,
.filter-custom-range input {
  width: 100%;
  height: var(--control);
  padding: 0 10px;
  background: var(--sunken);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-sizing: border-box;
}
.filter-custom-range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
.filter-custom-range .filter-custom-apply { grid-column: 1 / -1; }
.filter-editor { display: grid; gap: 8px; }
.filter-editor-label { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.filter-lookup-results { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow-y: auto; }
.filter-lookup-results li { padding: 6px 8px; border-radius: var(--radius); cursor: pointer; }
.filter-lookup-results li:hover,
.filter-lookup-results li.is-active { background: var(--tint); }
.filter-lookup-results li.is-active { outline: 1px solid var(--border-active); outline-offset: -1px; }
/* The tags now have a row to themselves under the controls, on the owner's instruction
   (TASK-2026-036 FR-008). That retires the two problems the old shared row had: it no longer competes
   with the search box for width, and it no longer has to be held open by a flex basis to stop the
   controls beside it sliding sideways when the last tag goes. Empty it has no height, so the bar does
   not grow to keep an empty row — which is why there is still no `:empty { display: none }` here. */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; min-inline-size: 0; }
/* A tag is a control in the bar and takes the bar's height, from the same recipe as the buttons beside it.
   It used to be padding and a smaller font, which stood about ten pixels short of everything else and read
   as a different family of thing (TASK-2026-034 FR-001). */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  height: var(--control);
  padding: 0 4px 0 10px;
  background: var(--tint);
  color: var(--text);
  border: 1px solid var(--border-active);
  border-radius: var(--radius);
  font-size: 0.82rem;
}
.filter-chip-label { color: var(--muted); }
.filter-chip-value { font-weight: 600; }
.filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.filter-chip-remove:hover { background: var(--tint); color: var(--danger); }
.filter-note {
  padding: 6px 10px;
  background: var(--warning-tint);
  color: var(--warning);
  border-radius: var(--radius);
  font-size: 0.78rem;
}
/* What the last search found, under the bar (TASK-2026-038). A line, not a box: the count, the
   sentence, and the one button that widens the dates. */
.filter-result-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 6px 10px;
  background: var(--sunken);
  color: var(--muted);
  border-radius: var(--radius);
  font-size: 0.8rem;
}
.filter-result-note[hidden] { display: none; }
.filter-result-note .filter-widen { min-height: 0; padding: 3px 12px; font-size: 0.78rem; }
/* A row a page filtered away itself. A class, not the attribute: this codebase has no global
   [hidden] rule and an explicit display has beaten the attribute here before. */
tr.filter-row-hidden { display: none; }
@media (max-width: 768px) {
  .filter-bar .filter-q { flex-basis: 100%; }
}
/* ── end filter bar ───────────────────────────────────────────────────────── */

/* ── Sidebar sections and flyouts (spec 004 US1, FR-001/FR-001a) — tokens only ── */
.nav-section { position: relative; margin: 2px 0; }
.nav-section[hidden] { display: none; }
/* The pin sits INSIDE the button, next to the chevron.
 *
 * It is still a sibling of the label in the DOM, because a <button> inside a <button> is invalid and
 * unreachable by keyboard. Making it a flex sibling was the first attempt and the owner was right to
 * reject it: the pin took 26px out of every row, so every group button ended up narrower than the
 * search button above them. The pin is positioned absolutely over a reserved slot inside the label
 * instead. The label is the full width of the row again, and the slot means nothing moves when the pin
 * fades in (TASK-2026-036 FR-030).
 *
 * The four measurements below are shared by the slot, the pin and the label so the pin lands exactly on
 * its slot from one place rather than from a hardcoded offset. */
.nav-section-head {
  --nav-label-pad: 12px;
  --nav-label-gap: 10px;
  --nav-caret-size: 12px;
  --nav-pin-size: 20px;
  position: relative;
  display: block;
  /* 2px, the owner's measure (2026-09-21): the buttons reach the edges of the panel with just
     enough left for their own border to read as an edge rather than as a gap. Was 8px. The search
     button above takes the same change, so a group button and the search button stay the same
     width — FR-034 is about those two matching each other, not about the number they match at. */
  margin: 4px 2px;
}
.nav-section-label {
  display: flex;
  align-items: center;
  gap: var(--nav-label-gap);
  width: 100%;
  min-width: 0;
  padding: 9px var(--nav-label-pad);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.nav-section-label:hover,
.nav-section-head:hover > .nav-section-label,
.nav-section.is-open .nav-section-label { background: var(--tint); color: var(--text); }
.nav-section-label:focus-visible { outline: none; box-shadow: inset 0 0 0 0.125rem var(--focus); color: var(--text); }
.nav-section.active .nav-section-label { color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
html[dir="rtl"] .nav-section.active .nav-section-label { box-shadow: inset -3px 0 0 var(--brand); }
.nav-section.active .nav-section-label .nav-section-icon { color: var(--brand); }
/* The count on a nav section: the same number the sentence at the top of Shops uses
   (TASK-2026-046). Hidden by the attribute alone — never given an explicit display, which is the
   trap that has cost four outages. */
.nav-section-attention {
  margin-inline-start: auto;
  background: var(--danger);
  color: var(--on-fill);
  border-radius: 2px;
  min-width: 1.25rem;
  padding: 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav-section-icon {
  position: relative;
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.95rem;
  transition: transform 220ms var(--nav-ease, cubic-bezier(0.2, 0, 0, 1)), color 0.2s;
}
/* The group's own icon leans in when its panel is open. Small, and it makes the pair read as one thing
   with the panel that grows out from under it. */
.nav-section.is-open .nav-section-label .nav-section-icon { transform: scale(1.12); }
.nav-section-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── The caret ─────────────────────────────────────────────────────────────────
   Drawn from two borders, not written with a character, and this is why.

   It used to be `content: '›'` with `content: '‹'` in RTL, rotated 90deg when open. U+2039 and U+203A
   are **bidi-mirrored** characters: in an Arabic paragraph the browser paints `‹` as a right-pointing
   glyph, and rotating that by -90deg points it UP. That is the owner's report — "the indicator arrow
   currently points UP" — and it only happens in Arabic, which is why it survived.

   A glyph whose painted direction depends on the paragraph it sits in cannot be rotated reliably. Two
   borders can. The owner's rule (TASK-2026-036 FR-024): never up; closed points down; open points at the
   content, which is left in Arabic and right in English. */
.nav-section-caret {
  flex: 0 0 auto;
  inline-size: var(--nav-caret-size, 12px);
  block-size: var(--nav-caret-size, 12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}
/* Empty, and the whole point: it holds the pin's width open inside the button so the row never changes
   when the pin fades in or out. */
.nav-section-pin-slot {
  flex: 0 0 auto;
  inline-size: var(--nav-pin-size, 20px);
  block-size: var(--nav-pin-size, 20px);
}
.nav-section-caret::after {
  content: '';
  inline-size: 6px;
  block-size: 6px;
  /* PHYSICAL sides, deliberately, and this is the second half of the same lesson.
     `border-inline-end` flips to the left edge in Arabic, so the drawn corner is mirrored and the very
     same rotation then points somewhere else — the arrow read as a left chevron when closed and went
     back to pointing up when open. Caught in a screenshot, not in the computed transform, which was
     correct the whole time: the shape underneath it had changed. A logical property is
     direction-dependent by design, which is exactly what this was trying to escape.
     Right plus bottom is a corner whose tip points down-right in both languages, and only the rotation
     below decides where it ends up. */
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  /* Tip at down-right, plus 45 degrees, is straight down. */
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 220ms var(--nav-ease, cubic-bezier(0.2, 0, 0, 1));
}
/* Open: toward the content. `translate` is applied before `rotate` reads it, so each state is written
   out in full rather than composed. */
.nav-section.is-open .nav-section-label .nav-section-caret::after {
  transform: rotate(-45deg) translate(-1px, -1px);
}
html[dir="rtl"] .nav-section.is-open .nav-section-label .nav-section-caret::after {
  transform: rotate(135deg) translate(-1px, -1px);
}
/* A pinned group is permanently open, so a disclosure caret would be telling the reader nothing. The pin
   is the state. */
.nav-section.is-pinned .nav-section-caret { display: none; }

/* ── The pin ───────────────────────────────────────────────────────────────────
   Its box is reserved at all times, so revealing it on hover moves nothing — the owner asked for it
   "without altering or shifting the positions of adjacent elements". */
.nav-section-pin {
  /* Laid over its slot inside the label. The offset is the label's own padding, plus the caret, plus
     the gap between them — the same values the label uses, so the two cannot drift apart. */
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(var(--nav-label-pad) + var(--nav-caret-size) + var(--nav-label-gap));
  inline-size: var(--nav-pin-size);
  block-size: var(--nav-pin-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: 0.68rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.8);
  transition: opacity 180ms var(--nav-ease, cubic-bezier(0.2, 0, 0, 1)),
              transform 180ms var(--nav-ease, cubic-bezier(0.2, 0, 0, 1)),
              color 180ms ease, background-color 180ms ease;
}
/* Fades in on hover, and stays for a group that is actually pinned. `pointer-events` follows the
   opacity so an invisible pin cannot swallow a click meant for the button underneath it. */
.nav-section-head:hover .nav-section-pin,
.nav-section-head:focus-within .nav-section-pin,
.nav-section.is-pinned .nav-section-pin {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}
.nav-section-pin:hover { color: var(--text); background: var(--tint); }
/* No ring on this one, and it needs `!important` to say so.
 *
 * The application draws every focused button with a 1px ring plus a glow, declared `!important` under
 * "UNIVERSAL GOLD ACCESSIBILITY FOCUS HIGHLIGHT SYSTEM", and it keys on plain `:focus` — which a mouse
 * click sets. So clicking the pin left a box drawn around it that stayed until something else was
 * clicked. Measured: `box-shadow: rgba(9,105,218,.5) 0 0 0 1px, rgba(9,105,218,.12) 0 0 3px`, with
 * `:focus` matching and `:focus-visible` not. That is the border the owner reported
 * (TASK-2026-036 FR-033). A ring inside another button reads as a box in a box in any case.
 *
 * Keyboard focus still has to be visible, so it takes the same plate the pointer gets. One indicator,
 * not a second outline nested inside a button.
 *
 * 2026-09-21: the global rule stopped keying on plain `:focus`, so half of this went with it — a
 * pointer no longer leaves anything to suppress. The `:focus-visible` half stays: a keyboard user
 * still reaches this button, the global ring still matches it, and a ring inside another button is
 * still a box in a box. */
.nav-section-pin:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.nav-section-pin:focus-visible {
  color: var(--text) !important;
  background: var(--tint) !important;
}
/* Pinned reads as driven home: upright, in the active colour. Unpinned sits at an angle, as a pin does
   when it is only resting there. */
.nav-section-pin i { transition: transform 220ms var(--nav-ease, cubic-bezier(0.2, 0, 0, 1)); transform: rotate(35deg); }
.nav-section.is-pinned .nav-section-pin { color: var(--brand); opacity: 1; }
.nav-section.is-pinned .nav-section-pin i { transform: rotate(0deg); }
/* A pinned group's pin moves out to the far edge of its button: the far left in Arabic, the far right in
   English (TASK-2026-036 FR-035). `inset-inline-end` is that edge in both languages without naming
   either.
 *
 * It lands exactly where the caret sits on every other row, because a pinned group has no caret — so the
 * pins and the carets share one vertical line down the sidebar, and the pin is still over its own
 * reserved slot, which has become the last thing in the row now the caret is gone. */
.nav-section.is-pinned .nav-section-pin { inset-inline-end: var(--nav-label-pad); }
.nav-flyout[hidden] { display: none; }
.nav-flyout { display: block; padding: 2px 0 6px; }
.nav-flyout .nav-item[role="menuitem"] { outline: none; }
.nav-flyout .nav-item.hidden { display: none !important; }
/* While a flyout is open the sidebar rises above .main-wrapper (z-index 200) so the anchored menu is never painted
   behind page content; modals (z-index 1000) still win. */
.sidebar.has-open-flyout { z-index: var(--z-drawer); }
.nav-flyout.is-anchored {
  position: fixed;
  z-index: var(--z-drawer);
  min-width: 220px;
  max-width: 280px;
  max-height: calc(calc(100 * var(--vh)) - 16px);
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}
.nav-flyout.is-anchored .nav-item { border-left: 0; border-right: 0; border-radius: var(--radius); padding: 9px 12px; }
.nav-flyout.is-anchored .nav-item.active { box-shadow: inset 3px 0 0 var(--brand) !important; }
html[dir="rtl"] .nav-flyout.is-anchored .nav-item.active { box-shadow: inset -3px 0 0 var(--brand) !important; }

/* ── Opening a group ──────────────────────────────────────────────────────────
   "appearing as a coherent group expanding from the parent icon" — so the panel grows from the corner
   nearest its own label rather than fading in place, and the items arrive in order just behind it.

   `transform-origin` is written per direction: in Arabic the panel hangs off the label's left edge, in
   English its right. `will-change` is deliberately absent — seven of these would each hold a
   compositing layer for the life of the page, for an animation that lasts a fifth of a second. */
.nav-flyout.is-opening { animation: navFlyoutOpen 200ms var(--nav-ease, cubic-bezier(0.2, 0, 0, 1)) both; }
.nav-flyout.is-anchored.is-opening { transform-origin: left top; }
html[dir="rtl"] .nav-flyout.is-anchored.is-opening { transform-origin: right top; }
/* A group near the bottom grows upwards, so it has to grow from its bottom corner or the motion reads
   as coming from the wrong end of the panel (TASK-2026-036 FR-032). */
.nav-flyout.is-anchored.is-opening[data-placement="top"] { transform-origin: left bottom; }
html[dir="rtl"] .nav-flyout.is-anchored.is-opening[data-placement="top"] { transform-origin: right bottom; }
.nav-flyout.is-opening .nav-item { animation: navItemArrive 220ms var(--nav-ease, cubic-bezier(0.2, 0, 0, 1)) both; }
/* Nine is the largest group. A tenth item simply arrives with the ninth. */
.nav-flyout.is-opening .nav-item:nth-child(1) { animation-delay: 30ms; }
.nav-flyout.is-opening .nav-item:nth-child(2) { animation-delay: 50ms; }
.nav-flyout.is-opening .nav-item:nth-child(3) { animation-delay: 70ms; }
.nav-flyout.is-opening .nav-item:nth-child(4) { animation-delay: 90ms; }
.nav-flyout.is-opening .nav-item:nth-child(5) { animation-delay: 110ms; }
.nav-flyout.is-opening .nav-item:nth-child(6) { animation-delay: 130ms; }
.nav-flyout.is-opening .nav-item:nth-child(7) { animation-delay: 150ms; }
.nav-flyout.is-opening .nav-item:nth-child(8) { animation-delay: 170ms; }
.nav-flyout.is-opening .nav-item:nth-child(n+9) { animation-delay: 190ms; }

@keyframes navFlyoutOpen {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes navItemArrive {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* A page icon leans in as the pointer passes, which is the only motion the items carry once they have
   arrived. */
.nav-flyout .nav-item .nav-icon { transition: transform 180ms var(--nav-ease, cubic-bezier(0.2, 0, 0, 1)); }
.nav-flyout .nav-item:hover .nav-icon { transform: scale(1.14); }

/* ── A pinned group stays open in the sidebar ─────────────────────────────────
   Inline, in its own place in the list — the owner was explicit that a pinned group does not jump to the
   top. So it is never anchored beside the sidebar; it is part of it. */
.nav-section.is-pinned .nav-flyout {
  display: block;
  position: static;
  inline-size: auto;
  min-width: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  padding: 2px 0 6px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  inset: auto;
}
.nav-section.is-pinned .nav-flyout[hidden] { display: block; }
/* A pinned group's items are inline in the sidebar, so they line up with the group button above them
   rather than spanning the whole rail. Same inset as the head, from the same number. */
.nav-section.is-pinned .nav-flyout { margin-inline: 2px; }

/* ── The alert dot ────────────────────────────────────────────────────────────
   It replaced a warning triangle that was appended to the Settings row with `margin-left: auto`, which
   pushed it to the far end and opened the wide gap the owner reported. This is drawn on the icon, out of
   flow, so it cannot move anything: no gap, no reflow, nothing to distort.

   Closed, the dot sits on the group's icon. Open, it hands over to the item that actually carries the
   warning, which is the transition the owner asked for. */
.nav-section-icon::after,
.nav-flyout .nav-item .nav-icon::after {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline-end: -2px;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--warning);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 200ms ease, transform 200ms var(--nav-ease, cubic-bezier(0.2, 0, 0, 1));
  pointer-events: none;
}
.nav-flyout .nav-item .nav-icon { position: relative; }
/* Exactly one dot is on at a time, and it changes hands when the group opens. The item's dot is gated on
   the group being open rather than left permanently on: a hidden panel would hide it anyway, but then it
   would already be at full opacity when the panel arrives, and the handover the owner asked for would not
   be a handover at all. */
.nav-section.has-alert:not(.is-open):not(.is-pinned) .nav-section-label .nav-section-icon::after,
.nav-section.is-open .nav-flyout .nav-item.has-alert .nav-icon::after,
.nav-section.is-pinned .nav-flyout .nav-item.has-alert .nav-icon::after { opacity: 1; transform: scale(1); }

/* Collapsed sidebar: icon-only section label, panel opens inline under it. The pin belongs to the
   expanded sidebar only, on the owner's instruction, so there is no room to find for it here. */
/* The head is a block now, so it is shrunk to the icon button and centred rather than flex-aligned. */
.sidebar.collapsed .nav-section-head { margin: 4px auto; inline-size: fit-content; }
.sidebar.collapsed .nav-section-label { width: auto; margin: 0; padding: 9px; justify-content: center; }
.sidebar.collapsed .nav-section-text,
.sidebar.collapsed .nav-section-pin,
.sidebar.collapsed .nav-section-pin-slot,
.sidebar.collapsed .nav-section-caret { display: none; }
.sidebar.collapsed .nav-flyout .nav-item { padding: 9px 0; justify-content: center; }
.sidebar.collapsed .nav-section.active .nav-section-label { box-shadow: inset 0 -2px 0 var(--brand); }
@media (max-width: 768px) {
  .sidebar.mobile-open .nav-section-head { margin: 4px 12px; inline-size: auto; }
  .sidebar.mobile-open .nav-section-label { width: 100%; margin: 0; justify-content: flex-start; }
  .sidebar.mobile-open .nav-section-text,
  .sidebar.mobile-open .nav-section-caret,
  .sidebar.mobile-open .nav-section-pin-slot { display: inline-flex; }
  .sidebar.mobile-open .nav-section-pin { display: inline-flex; }
  .sidebar.mobile-open .nav-flyout .nav-item { padding: 9px 16px 9px 20px; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-flyout.is-opening,
  .nav-flyout.is-opening .nav-item { animation: none; }
  .nav-section-icon,
  .nav-section-caret::after,
  .nav-section-pin,
  .nav-section-pin i,
  .nav-flyout .nav-item .nav-icon { transition: none; }
}
/* ── end sidebar sections ── */

/* ── Command palette rows (spec 004 US2): commands, pins, secondary actions — tokens only ── */
.global-search-command-row { display: flex; align-items: center; gap: 4px; }
.global-search-command-row .global-search-result { flex: 1 1 auto; min-width: 0; }
.gs-breadcrumb { color: var(--muted); }
.gs-pin,
.gs-secondary {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--sunken);
  color: var(--muted);
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
}
.gs-pin { width: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.gs-pin:hover, .gs-secondary:hover { background: var(--tint); color: var(--text); }
.gs-pin[aria-pressed="true"] { color: var(--brand); border-color: var(--border-active); background: var(--tint); }
.gs-pin:focus-visible, .gs-secondary:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.global-search-types-help, .global-search-degraded { padding: 6px 10px; }
/* ── end command palette rows ── */

/* ── Stock selection tools, transfer hint and inventory reports (spec 004 US7) — tokens only ── */
.stock-selection-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 10px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); }
.stock-selection-tools select { height: var(--control-sm, 36px); padding-block: 0; padding-inline: 10px 36px; background-color: var(--sunken); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); max-width: 220px; }
.inventory-transfer-hint { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius); background: var(--warning-tint); color: var(--warning); font-size: .8rem; }
.inventory-transfer-hint[hidden] { display: none; }
.transfer-error { padding: 8px 12px; border-radius: var(--radius); background: var(--danger-tint); color: var(--danger); font-size: .82rem; }
.transfer-error[hidden] { display: none; }
.inventory-transfer-items tr[data-over="1"] td { background: var(--danger-tint); }
.inventory-transfer-items tr[data-over="1"] input { border-color: var(--danger); }
.inventory-reports { display: grid; gap: 12px; }
.inventory-reports-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.inventory-reports-title { margin: 0; font-size: 1.1rem; }
.inventory-reports-subtitle { margin: 4px 0 0; font-size: .82rem; }
.inventory-reports-actions { display: flex; gap: 8px; }
.inventory-reports-tabs { flex-wrap: wrap; }
.inventory-reports-panel { display: grid; gap: 10px; }
.inventory-reports-note:empty { display: none; }
.inventory-reports-note { margin: 0; font-size: .8rem; }
.inv-report-table th.text-end, .inv-report-table td.text-end { text-align: end; }
.inv-report-table .inventory-reports-totals td { font-weight: 700; background: var(--sunken); }
.inv-report-table .value-diff[data-sign="1"] { color: var(--success); }
.inv-report-table .value-diff[data-sign="-1"] { color: var(--danger); }
.inventory-reports-footer { font-size: .78rem; color: var(--muted); }
@media (max-width: 768px) {
  .stock-selection-tools select { max-width: 100%; flex: 1 1 100%; }
  .inventory-reports-header { flex-direction: column; }
}
@media print {
  .inventory-reports .filter-bar, .inventory-reports-actions, .inventory-reports-tabs, .sidebar, .top-header { display: none !important; }
  .inventory-reports-table-wrap { overflow: visible; }
}
/* One height for every control in the two stock bars, and rows that fill the width evenly
   (TASK-2026-028 FR-026). */
.inventory-command-bar > .inventory-command-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inventory-command-bar .btn,
.stock-selection-tools .btn {
  min-height: var(--control-sm, 36px);
  white-space: nowrap;
}
.stock-selection-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stock-selection-tools #ic-selection-count { margin-inline-start: auto; }
@media (max-width: 640px) {
  .inventory-command-bar .btn, .stock-selection-tools .btn { flex: 1 1 auto; }
  .stock-selection-tools #ic-selection-count { margin-inline-start: 0; }
}
/* ── end US7 ── */

/* ── Page shell for the shared filter bar (spec 004 US3) ── */
.page-filter-host:empty { display: none; }
.page-filter-host { min-width: 0; }
.page-filter-host .filter-bar { margin-bottom: 12px; }
.filter-bar, .filter-bar-controls, .filter-chips { min-width: 0; max-width: 100%; }
.inventory-tab-toolbar#ic-filter-host { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inventory-tab-toolbar#ic-filter-host .filter-bar { flex: 1 1 100%; margin-bottom: 0; }
/* ── end page shell ── */

/* ── Reports catalogue, chart of accounts and journal (spec 004 US4) — tokens only ── */
.reports-catalog { display: grid; gap: 28px; }
.reports-catalog-header { padding-block-end: 16px; border-block-end: 1px solid var(--line); }
.reports-catalog-header h2 { margin: 0 0 6px; font-size: 1.35rem; }
.reports-catalog-header p { margin: 0; font-size: .9rem; }
.report-area h3 { margin: 0 0 12px; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
/* Wider cards on a larger gap: at 220px the titles wrapped onto two lines and the grid read as a wall. */
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 14px; }
/* `align-content: start` keeps every card's content on the same baselines when the grid stretches a row to
   the tallest card in it, which is what made the rows look ragged. */
.report-card-wrap { position: relative; display: grid; align-content: start; gap: 12px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); transition: var(--transition); box-shadow: var(--card-shadow); }
.report-card-wrap:hover { border-color: var(--border-active); background: var(--tint); }
.report-card { display: grid; grid-template-columns: 2.75rem 1fr; grid-template-rows: auto auto; gap: 4px 14px; align-items: center; color: var(--text); text-decoration: none; }
.report-card-icon { grid-row: 1 / span 2; inline-size: 2.75rem; block-size: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--sunken); color: var(--brand); font-size: 1.1rem; }
.report-card-title { align-self: end; font-weight: 700; font-size: 1rem; line-height: 1.3; padding-inline-end: 2.25rem; }
.report-period-kind { align-self: start; font-size: .76rem; color: var(--muted); }
.report-variants { display: flex; flex-wrap: wrap; gap: 6px; }
.report-variant { padding: 4px 10px; border-radius: var(--radius); background: var(--sunken); border: 1px solid var(--line); color: var(--muted); font-size: .76rem; text-decoration: none; }
.report-variant:hover { color: var(--text); border-color: var(--border-active); background: var(--tint); }
.report-pin { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; inline-size: 2rem; block-size: 2rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--text-muted); cursor: pointer; }
.report-pin:hover { background: var(--sunken); color: var(--muted); }
.report-pin[aria-pressed="true"] { color: var(--brand); }
.report-pin:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
/* The pinned row used to be a dashed gold frame on a gold wash, which is the same noise the owner has now
   asked to be taken out twice (TASK-2026-028 FR-031, FR-038). It stays distinct on a quieter surface. */
.report-pinned { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.coa-intro { margin: 0 0 8px; font-size: .82rem; }
.coa-mapping-title { margin: 16px 0 4px; font-size: .95rem; }
.coa-table .coa-class-row td { background: var(--sunken); font-weight: 700; text-transform: uppercase; font-size: .75rem; letter-spacing: .05em; }
.coa-table .coa-header-row td { font-weight: 700; }
.coa-table .coa-locked { font-size: .7rem; }
.coa-mapping .coa-unmapped td { background: var(--warning-tint); }
.journal-filter-host .filter-bar { margin-bottom: 8px; }
.journal-note { margin: 0 0 8px; font-size: .82rem; }
.journal-actions { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.journal-table td.text-end, .journal-table th.text-end { text-align: end; }
.journal-table .journal-entry-start td { border-top: 2px solid var(--line); }
.journal-table .journal-sums td { font-weight: 700; background: var(--sunken); }
.journal-table .journal-sums[data-balanced="0"] td { color: var(--danger); }
.journal-footer { font-size: .78rem; margin-top: 6px; }
/* ── end US4 ── */

/* ── Bank page (spec 004 US5) — tokens only ── */
.bank-page { display: grid; gap: 14px; }
/* No page heading and no description here. The application header already names the page, so a title and
   a sentence restating it cost a band of the screen and told the reader nothing they had not just read
   (TASK-2026-034 FR-004). The three rules that styled them went with them. */
/* One action bar for the page, and the five actions share the row equally rather than clustering at one
   end around a spacer (FR-005). `flex: 1 1 0` gives each the same share whatever its label costs; they
   keep their own colours, because Record Deposit is not the same kind of thing as Print. */
.bank-action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
.bank-action-bar > .btn { flex: 1 1 0; min-width: 0; min-height: var(--control-sm, 36px); }
.bank-accounts-card .card-header, .bank-ledger-card .card-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.bank-deposit-blocked { font-size: .85rem; color: var(--muted); margin-bottom: 14px; }
.bank-ledger-note { font-size: .78rem; }
.bank-accounts td.text-end, .bank-accounts th.text-end, .bank-ledger td.text-end, .bank-ledger th.text-end { text-align: end; }
.bank-ledger tr[data-reversed="1"] td { color: var(--text-muted); text-decoration: line-through; }
.bank-ledger tr[data-reversed="1"] td .bank-reversed-link { text-decoration: none; }
.bank-ledger tr.is-highlighted td { background: var(--tint); }
.bank-ledger .bank-amount-out { color: var(--danger); }
.bank-ledger .bank-amount-in { color: var(--success); }
.bank-ledger .bank-ledger-totals td { font-weight: 700; background: var(--sunken); font-size: .8rem; }
.bank-ledger-footer { font-size: .78rem; padding: 6px 0; }
.bank-reversal-link, .bank-reversed-link { color: var(--brand); font-size: .75rem; }
.bank-withdrawal-note { font-size: .78rem; }
.bank-page-link-card .bank-page-link { justify-content: center; }
#bank-filter-host .filter-bar { margin: 0 0 8px; }
/* Five equal shares of a phone's width leaves nothing but initials, so they wrap into rows that are still
   equal to one another (FR-005). */
@media (max-width: 768px) { .bank-action-bar > .btn { flex: 1 1 45%; } }
/* Transfer dialog (TASK-2026-037 slice 2). The notices are the point of the dialog, not
   decoration: they say which half of a movement will not be written down, before it is saved.
   Logical sides only, so the accent bar sits on the reading edge in Arabic too. */
/* The transfer dialog is a slip, not a column: 640px wide, three rows of two fields, the notice
   and the buttons across the full width beneath. Vertical rhythm is tightened to 12px between
   rows so the whole thing sits on one desktop screen without scrolling. */
.bank-slip-card { max-width: 640px; }
/* Own grid class, not .form-row: the site-wide rule folds every .form-row to one column under an
   1100px SCREEN, which would stack this 640px dialog on any laptop. The dialog folds on its own
   width instead. */
.bank-slip-form { container-type: inline-size; }
.bank-slip-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@container (max-width: 520px) { .bank-slip-row { grid-template-columns: 1fr; } }
.bank-slip-span { grid-column: 1 / -1; }
.bank-slip-form .form-group { margin-bottom: 12px; min-width: 0; }
/* One size for every field on a slip. Left alone, a date box came out 47px, a text box 45, the
   account dropdown 37 and a notes box 68, and the rows read as a jumble. `--bank-slip-field` is
   the height for all of them; the notes box starts at that height and can still be pulled taller. */
.bank-slip-form { --bank-slip-field: var(--control); --field-height: var(--bank-slip-field); }   /* TASK-2026-163 S3: the slip's one field height is the 40px control */  /* spec 010 US1: `.modal-card input` asks --field-height and outranked the slip, so text boxes stood 47px beside 44px ones */
.bank-slip-form .form-group select,
.bank-slip-form .form-group textarea,
.bank-slip-form .form-group input:not([type="checkbox"]),
.bank-slip-form .combo-trigger {
  width: 100%;
  box-sizing: border-box;
  height: var(--bank-slip-field);
  min-height: var(--bank-slip-field);
  padding-block: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.bank-slip-form .form-group textarea { height: var(--bank-slip-field); padding-block: var(--space-2); line-height: 1.6; resize: vertical; }
.bank-slip-form .combo { width: 100%; }
.bank-slip-primary { padding-block-end: 10px; margin-block-end: 2px; border-block-end: 1px solid var(--line); }
.bank-slip-form .modal-footer { margin: 12px calc(-1 * var(--pad)) calc(-1 * var(--pad)); }
.bank-slip-notices:empty { display: none; }
.bank-slip-notices { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.bank-slip-notice {
  border-inline-start: 3px solid var(--warning);
  background: var(--sunken);
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 2px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.bank-slip-notice.is-info { border-inline-start-color: var(--info, var(--warning)); }
.bank-slip-notice.is-error {
  border-inline-start-color: var(--danger);
  color: var(--text);
}
.bank-transfer-override { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.bank-transfer-override input { margin-block-start: 3px; }

/* Statement import (TASK-2026-037 slice 3). Tokens and logical sides only, so the wizard reads
   the same in all five themes and mirrors correctly in Arabic. */
.statement-import-error,
.statement-import-note {
  border-inline-start: 3px solid var(--danger);
  background: var(--sunken);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 2px;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-block-end: 12px;
}
.statement-import-note {
  border-inline-start-color: var(--warning);
  color: var(--muted);
}

/* The sample is a glance, not a spreadsheet: narrow cells, the bank's own heading over each column,
   and the whole thing scrolls inside its wrapper rather than stretching the dialog to the screen. */
.statement-import-sample {
  width: 100%;
  font-size: 0.74rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  border-collapse: collapse;
  margin-block-end: 12px;
}
.statement-import-sample th,
.statement-import-sample td {
  padding: 3px 6px;
  border-block-end: 1px solid var(--line);
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.statement-import-sample td { color: var(--muted); text-align: start; }
.statement-import-sample th {
  font-size: 0.68rem;
  font-weight: 600;
  text-align: start;
  color: var(--text);
  background: var(--sunken);
}
.statement-import-colno {
  display: inline-block;
  min-width: 1.1em;
  margin-inline-end: 4px;
  color: var(--muted);
  font-weight: 400;
}

.statement-import-mapping {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-block-end: 8px;
  align-items: end;
}
.statement-import-mapping label { white-space: nowrap; }

/* The pager is a bar under the table, not two buttons loose in a corner: the count at the start,
   the page and its buttons at the end, both on one padded line. */
.bank-ledger-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); }
.bank-ledger-count { font-size: .82rem; color: var(--muted); }
.bank-ledger-pager { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 100%; gap: 8px; }   /* wraps instead of overflowing a narrow page (text size 20 at 375px, TASK-2026-163) */
.bank-ledger-pager .btn { min-width: 96px; justify-content: center; }
.bank-ledger-pageno { min-width: 56px; text-align: center; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bank-ledger .bank-running-balance { color: var(--muted); }
.bank-ledger .bank-ledger-totals td.bank-amount-in, .bank-ledger .bank-ledger-totals td.bank-amount-out { font-weight: 700; }
.statement-import-map { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }

/* The counts are the answer to "what will this do to my books", so they are the biggest thing on
   the step that asks for approval. */
.statement-import-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  margin-block-end: 14px;
}
.statement-import-count {
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 10px;
  text-align: center;
}
.statement-import-count-value { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.statement-import-count-label { font-size: 0.72rem; color: var(--muted); }
.statement-import-count.is-good { border-color: var(--success); }
.statement-import-count.is-warn { border-color: var(--warning); }

.statement-import-history { width: 100%; font-size: 0.85rem; }
.statement-import-history tr.is-undone td { opacity: 0.55; text-decoration: line-through; }

/* An imported line is the bank's word, not the shop's. It has to be tellable apart from a row
   somebody here typed, or the comparison this page exists for cannot be made. */
.bank-ledger tr[data-statement="1"] td { background: var(--sunken); }
.bank-from-statement { font-size: 0.68rem; text-transform: lowercase; }
.bank-balance-parts { font-size: 0.7rem; color: var(--muted); font-weight: 400; }

.bank-balance-statement { font-size: 0.7rem; color: var(--muted); font-weight: 400; }
.bank-balance-difference { font-size: 0.7rem; color: var(--warning); font-weight: 600; }
.bank-balance-difference.is-zero { color: var(--success); }
.bank-ledger-totals.is-statement td { color: var(--muted); font-weight: 400; }

/* ── end US5 ── */


/* Spec 010 US1 (approved mockup M5): the Vendor Ledger */
/* The picker at the start and the three buttons at the end of one toolbar, three figures, and a statement drawn on the bank
   ledger's own table classes (the + and − columns, the running balance, the totals row, the struck-through reversed row, the
   pager). The page folds on its own width. Nothing here is toggled with the hidden attribute: the picker menu and the dialogs
   are added and removed, so no rule below needs a [hidden] companion. Sides are logical throughout. */
.vl-page { container-type: inline-size; display: flex; flex-direction: column; gap: 14px; }
.vl-toolbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.vl-toolbar-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.vl-picker { position: relative; width: 340px; max-width: 100%; }
.vl-picker label { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.vl-picker-trigger { width: 100%; height: 44px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding-inline: 12px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text);
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; text-align: start; }
.vl-picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-picker-trigger .vl-picker-bal { margin-inline-start: auto; font-weight: 600; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vl-picker-trigger .vl-caret { color: var(--text-muted); font-size: .7rem; }
.vl-picker-menu { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: var(--z-dropdown, 20); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-float); padding: 6px; max-height: 340px; overflow-y: auto; }
.vl-picker-menu input { width: 100%; height: 40px; box-sizing: border-box; margin-bottom: 6px; }
.vl-picker-opt { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: var(--text); font: inherit;
  padding: 8px 10px; border-radius: var(--radius); cursor: pointer; text-align: start; }
.vl-picker-opt:hover, .vl-picker-opt[aria-selected="true"] { background: var(--tint); }
.vl-picker-opt small { display: block; color: var(--muted); font-size: .72rem; }
.vl-picker-opt .vl-picker-bal { margin-inline-start: auto; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.vl-picker-none { padding: 10px; color: var(--text-muted); font-size: .82rem; text-align: center; }
.vl-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vl-kpis .kpi-card { padding: 14px 16px; }
.vl-kpis .kpi-card:hover { transform: none; }
.vl-kpis .kpi-value { font-size: 1.35rem; margin: 6px 0; font-variant-numeric: tabular-nums; }
.vl-kpis .kpi-label { text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--muted); }
.vl-kpi-cap { font-size: .72rem; color: var(--text-muted); }
.vl-kpis .kpi-card.is-owed .kpi-value { color: var(--danger); }
.vl-statement-card { padding: 0; overflow: hidden; }
.vl-statement-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.vl-statement-head h3 { margin: 0; font-size: .95rem; }
.vl-period-text { font-size: .78rem; color: var(--muted); unicode-bidi: isolate; }
.vl-period { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; font-size: .8rem; color: var(--muted); }
.vl-period select { height: 36px; min-width: 170px; padding-block: 0; }   /* the form-control padding clipped an Arabic label at 36px */
.vl-statement-card .table-wrapper { border: 0; border-radius: 0; box-shadow: none; }
table.vl-statement { width: 100%; border-collapse: collapse; font-size: .8rem; }
table.vl-statement th, table.vl-statement td { padding: 9px 10px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.vl-statement th { font-size: .74rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
table.vl-statement .vl-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.vl-statement .vl-date, table.vl-statement .vl-ref { unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.vl-statement .vl-ref { font-family: ui-monospace, monospace; font-size: .76rem; }
table.vl-statement tr.vl-opening td { background: var(--sunken); font-weight: 600; }
table.vl-statement tr.vl-none td { text-align: center; color: var(--text-muted); padding-block: 18px; }
table.vl-statement .vl-notes { min-width: 150px; }
table.vl-statement .vl-notes .btn { margin-inline-start: 6px; }
table.vl-statement .vl-method { color: var(--muted); white-space: nowrap; }
/* An inline-block is not given its row's line-through, so "reversed by #id" stays readable on a struck-out row. */
table.vl-statement .vl-link { display: inline-block; color: var(--brand); font-size: .74rem; margin-inline-start: 4px; white-space: nowrap; }
.vl-quiet { color: var(--muted); font-size: .8rem; }
.vl-empty { padding: 36px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vl-empty-icon { font-size: 2rem; color: var(--text-muted); }
.vl-empty p { margin: 0; }
.vl-empty .vl-empty-sub { color: var(--muted); font-size: .85rem; }
@container (max-width: 760px) { .vl-kpis { grid-template-columns: 1fr; } .vl-picker { width: 100%; } .vl-toolbar-acts { margin-inline-start: 0; } }
/* The Pay supplier slip: the four ways the money leaves, as four buttons of the slip's own field height; two a row when the
   slip itself is narrow. */
.vl-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@container (max-width: 520px) { .vl-methods { grid-template-columns: 1fr 1fr; } }
.vl-method-btn { height: var(--bank-slip-field, 44px); box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--sunken); color: var(--text); font: inherit; font-size: .8rem; padding-inline: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; line-height: 1.2; min-width: 0; }
.vl-method-btn[aria-pressed="true"] { border-color: var(--border-active); background: var(--tint); font-weight: 700; }
.vl-method-btn:disabled { opacity: .5; cursor: not-allowed; }
.vl-method-btn:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.vl-method-label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.vl-rev-summary { font-size: .85rem; line-height: 1.6; padding: 10px 12px; border-radius: var(--radius); background: var(--sunken); margin-bottom: 12px; }
.vl-dialog .bank-slip-form input[readonly] { color: var(--muted); }
/* The slip's footer pulls itself 22px into the form's bottom padding, but a later site-wide rule set that padding to 14px,
   so every slip scrolled by 8px and showed a scrollbar. Here the footer meets the padding that is actually there. */
.vl-dialog .bank-slip-form .modal-footer { margin-block-end: -14px; }
/* ── end Spec 010 US1 ── */

/* ── Dashboard period control (spec 004 US6) — tokens only ── */
/* Spec 010 S0 (approved mockup M7): the owner's notice strip, above the period bar. One row per notice: a tag carrying a word
   and a shape, the words, one button; the start edge carries the severity colour. The strip folds on its own width. */
.owner-notices { container-type: inline-size; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.owner-notice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--info); border-radius: var(--radius); }
.owner-notice.is-danger { border-inline-start-color: var(--danger); }
.owner-notice.is-warning { border-inline-start-color: var(--warning); }
.owner-notice-text { min-width: 0; line-height: 1.55; }
.owner-notice-text b { display: block; font-size: .9rem; }
.owner-notice-text > span { display: block; color: var(--muted); font-size: .82rem; }
.owner-notice-act { display: flex; gap: 6px; align-items: center; }
.owner-notice-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 4px 2px; }
.owner-notice-more { align-self: flex-start; }
.owner-notice-flash { font-size: .8rem; color: var(--muted); padding: 6px 12px; margin-bottom: 12px; border: 1px dashed var(--line); border-radius: var(--radius); }
@container (max-width: 700px) {
  .owner-notice { grid-template-columns: minmax(0, 1fr); }
  .owner-notice-act { justify-content: flex-start; }
}
.dashboard-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow); }
.dashboard-period-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.period-preset { height: var(--control-sm, 36px); padding: 0 12px; border-radius: 2px; border: 1px solid var(--line); background: var(--sunken); color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.period-preset[aria-checked="true"] { background: var(--tint); color: var(--brand); border-color: var(--border-active); }
.period-preset:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.dashboard-period-custom { display: flex; gap: 6px; }
.dashboard-period-custom[hidden] { display: none; }
.dashboard-period-custom input { height: var(--control-sm, 36px); padding: 0 10px; background: var(--sunken); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); }
.dashboard-period-nav { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
#period-label { font-size: .82rem; font-weight: 600; color: var(--text); min-width: 12ch; text-align: center; }
.kpi-delta { font-size: .72rem; font-weight: 700; padding: 1px 6px; border-radius: 2px; background: var(--sunken); color: var(--muted); vertical-align: middle; }
.kpi-delta[data-direction="up"] { color: var(--success); background: var(--success-tint); }
.kpi-delta[data-direction="down"] { color: var(--danger); background: var(--danger-tint); }
.kpi-card[data-point-in-time="1"] .kpi-caption { font-size: .68rem; color: var(--text-muted); margin-top: 4px; }
.dashboard-empty { padding: 10px 12px; margin-bottom: 12px; border-radius: var(--radius); background: var(--info-tint); color: var(--info); font-size: .82rem; }
@media (max-width: 768px) { .dashboard-period-nav { margin-inline-start: 0; width: 100%; justify-content: space-between; } }
/* ── end US6 ── */

/* ── Alterations board restyle (spec 004 US8) — tokens only ── */
.alterations-board .kanban-board { gap: 12px; min-height: 0; }
.alterations-board .kanban-column { flex: 1 1 240px; max-height: none; background: var(--card); }
.alterations-board .kanban-cards { padding: 10px; gap: 10px; }
.alterations-board .alt-card { display: grid; gap: 6px; padding: 12px; border-radius: var(--radius); background: var(--surface); }
.alterations-board .alt-card .kanban-card-title { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: .9rem; }
.alterations-board .alt-card .kanban-card-meta { display: grid; gap: 3px; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.alterations-board .alt-card .kanban-card-tags .badge { font-size: .7rem; }
.alt-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 2px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
.alt-status[data-status="at-tailor"] { color: var(--info); background: var(--info-tint); }
.alt-status[data-status="ready"] { color: var(--brand); background: var(--tint); border-color: var(--border-active); }
.alt-status[data-status="completed"] { color: var(--success); background: var(--success-tint); }
@media (max-width: 400px) {
  .alterations-board .kanban-board { flex-direction: column; overflow-x: hidden; }
  .alterations-board .kanban-column { flex: 1 1 auto; width: 100%; }
  .alterations-board .alt-card .kanban-card-title { flex-direction: column; align-items: flex-start; }
}
/* ── end US8 ── */
/* Spec 010 US9 (approved mockup M9 v2): the alterations board, its dialogs, the archive view and the category tree */
/* Sides are logical throughout. The old kanban rule paints a card's edge stripe with border-left, which
   mirrors wrongly in Arabic; the alteration card paints it on the inline-start side instead. The card's
   menu is toggled with the hidden attribute and carries a display, so it has the companion rule. The
   80 mm ticket's own styles live in the print window alterations.js builds, not here. */
.alt-board-head { display: flex; gap: 12px; flex-wrap: wrap; margin-block-end: 12px; }
.alt-board-head .btn { flex: 1 1 150px; justify-content: center; }
.alterations-board .alt-card { position: relative; cursor: pointer; border-inline: 1px solid var(--line); border-inline-start-width: 3px; }
.alterations-board .col-pending .alt-card { border-inline-start-color: var(--text-muted); }
.alterations-board .col-at-tailor .alt-card { border-inline-start-color: var(--info); }
.alterations-board .col-ready .alt-card { border-inline-start-color: var(--brand); }
.alterations-board .col-completed .alt-card { border-inline-start-color: var(--success); }
.alterations-board .alt-card:hover { transform: none; }
.alterations-board .kanban-col-title, .alterations-board .alt-status { text-transform: none; letter-spacing: 0; }
.alt-card-btns { display: inline-flex; gap: 2px; align-items: center; flex: none; }
.alt-card-btns .btn-icon { width: 30px; height: 30px; font-size: .85rem; }
.alt-card-btns .btn-icon[aria-expanded="true"] { background: var(--tint); }
.alt-card-menu {
  position: absolute; inset-block-start: 40px; inset-inline-end: 8px; z-index: 3; min-width: 176px;
  display: flex; flex-direction: column; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-float);
}
.alt-card-menu[hidden] { display: none; }
.alt-card-menu button {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: none; border: 0; border-radius: var(--radius);
  color: var(--text); font: inherit; font-size: .82rem; cursor: pointer; text-align: start;
}
.alt-card-menu button:hover, .alt-card-menu button:focus-visible { background: var(--tint); }
.alt-card-menu button i { width: 16px; text-align: center; color: var(--muted); }
.alt-card-menu .alt-card-menu-sep { height: 1px; background: var(--line); margin: 4px 2px; }
.alt-card-menu button.is-danger, .alt-card-menu button.is-danger i { color: var(--danger); }
.alt-ref { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.alt-no-customer { color: var(--text-muted); font-style: italic; }
.alt-col-empty { font-size: .76rem; color: var(--text-muted); padding: 10px 4px; text-align: center; line-height: 1.5; }
.alt-card-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.alt-card-foot .kanban-card-tags { flex: 1 1 auto; min-width: 0; }
.alt-card-foot .alt-archive-btn { flex: none; }
/* A long adjustment line wraps inside its card instead of stretching its column across the board. */
.alterations-board .alt-card .kanban-card-tags .badge { white-space: normal; overflow-wrap: anywhere; justify-content: flex-start; text-align: start; max-width: 100%; min-width: 0; }
.alterations-board .kanban-column { min-width: 180px; }

/* The alteration slip: one field height for every box (the slip contract). */
.alt-edit-card { max-width: 900px; --alt-field: 44px; }
.alt-edit-card .alt-slip input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.alt-edit-card .alt-slip select { height: var(--alt-field); box-sizing: border-box; }
.alt-edit-card .alt-slip textarea { min-height: var(--alt-field); box-sizing: border-box; }
.alt-adj-rows { display: flex; flex-direction: column; gap: 8px; }
.alt-customer-kept { font-size: .74rem; color: var(--muted); margin-block-start: 6px; display: flex; gap: 6px; align-items: center; }
.alt-customer-kept i { color: var(--success); }
.alt-foot { flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.alt-foot .btn { min-width: 104px; justify-content: center; }
.alt-foot-start, .alt-foot-end { display: flex; gap: 8px; flex-wrap: wrap; }
.alt-foot-start { margin-inline-end: auto; }

/* Delete: the app's own password re-check, drawn after the password prompt in templates/index.html. */
.alt-pw-card .modal-body p { margin: 0 0 12px; line-height: 1.6; }
.alt-pw-input {
  text-align: center; font-size: 1.5rem; letter-spacing: .5rem; background: var(--sunken); border: 1.5px solid var(--line);
  color: var(--text); border-radius: var(--radius); padding: 8px; width: 100%; height: 44px; box-sizing: border-box; margin-block-start: 12px;
}
.alt-pw-foot { display: flex; gap: 12px; }
.alt-pw-foot .btn { flex: 1 1 0; min-height: 42px; font-weight: 600; justify-content: center; }
.alt-refuse-why { margin: 0; line-height: 1.7; }

/* The archive view: search, ten rows a page, the columns the mockup drew. */
.alt-archive-card { max-width: 1000px; max-height: calc(85 * var(--vh)); display: flex; flex-direction: column; }
.alt-archive-card > .modal-body { padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.alt-archive-tools { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-block-end: 1px solid var(--line); flex-wrap: wrap; }
.alt-archive-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.alt-archive-search i { position: absolute; inset-inline-start: 12px; inset-block-start: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .8rem; }
.alt-archive-search input { width: 100%; height: 44px; box-sizing: border-box; padding-inline-start: 34px; }
.alt-archive-count { font-size: .78rem; color: var(--muted); margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.alt-archive-tablewrap { overflow-x: auto; }
.alt-archive-tablewrap .data-table { min-width: 720px; width: 100%; }
.alt-archive-tablewrap th, .alt-archive-tablewrap td { text-align: start; font-size: .8rem; padding: 9px 12px; white-space: nowrap; }
.alt-archive-page { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.alt-archive-card .empty-state { padding: 28px 16px; }

/* An old link to the archive, opened by someone without the line. */
.alt-refusal { padding: 36px 24px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.alt-refusal p { margin: 0; font-size: .9rem; }
.alt-refusal i { font-size: 1.6rem; color: var(--text-muted); }

/* The category tree (M9, Categories part, approved in v1). */
.cat-head { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-block-end: 12px; }
.cat-quiet { margin-inline-end: auto; display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: .8rem; }
.cat-body { padding: 8px; }
.category-tree .tree-node-row { min-height: 40px; }
.category-tree .tree-children { padding: 0; padding-inline-start: 24px; list-style: none; margin: 0; }
.category-tree .tree-name { display: flex; align-items: baseline; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cat-leaf { visibility: hidden; }
.cat-path { font-size: .72rem; color: var(--text-muted); margin-inline-start: 6px; }
.cat-desc { font-size: .75rem; color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.cat-row-actions { display: inline-flex; gap: 4px; margin-inline-start: auto; flex: none; }
.cat-row-actions .btn { min-width: 34px; justify-content: center; }
.cat-row-actions .cat-delete-btn:hover { color: var(--danger); border-color: var(--danger); }
.cat-slip-card { max-width: 640px; width: 100%; }
.cat-slip-card .bank-slip-form .modal-footer { margin-block-end: -14px; }
.cat-confirm-body p { margin: 0 0 6px; line-height: 1.6; }
@media (max-width: 760px) { .cat-desc { display: none; } }
/* ── end Spec 010 US9 ── */
/* ── TASK-2026-102 (approved mockups M3, M4, M5, owner 2026-10-02): the alterations board quieter and draggable, settle with tailor,
   the cancelled-sales archive tabs, the (i) button and the Undo note. Tokens only; sides logical; small text in --text-secondary
   (--text-muted fails contrast in Executive and GitHub dark). ── */

.undo-toast { position: fixed; inset-block-end: 24px; inset-inline-start: 50%; translate: -50% 0; z-index: 100000; max-inline-size: calc(calc(100 * var(--vw)) - 32px); display: flex; align-items: center; gap: 20px; padding: 13px 18px 15px; background: var(--text); color: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow-float); font-size: .88rem; line-height: 1.6; overflow: hidden; }
html[dir="rtl"] .undo-toast { translate: 50% 0; }
.undo-toast-btn { flex: none; border: 0; background: none; padding: 2px 4px; font: inherit; font-weight: 700; color: var(--brand); cursor: pointer; }
.undo-toast-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.undo-toast-btn:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.undo-toast-time { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; background: color-mix(in srgb, currentColor 25%, transparent); }
.undo-toast-time span { display: block; block-size: 100%; inline-size: 100%; background: var(--brand); }

/* the board: four quiet columns, white cards, one accent for the drop line */
.alt-board-head { align-items: center; }
.alt-board-head .btn { flex: 0 0 auto; }
.alt-board-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.alt-board-end label { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.alt-board-end select { height: var(--control, 40px); min-inline-size: 150px; padding-block: 0; padding-inline: 10px 36px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface); color: var(--text); font: inherit; font-size: .88rem; }
.alterations-board .kanban-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; overflow: visible; flex-direction: row; }
.alterations-board .kanban-column { flex: none; min-width: 0; max-height: none; background: none; border: 0; border-radius: 0; }
.alterations-board .kanban-col-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px 10px; margin-block-end: 12px; border-block-end: 1px solid var(--line); }
.alterations-board .kanban-col-title { margin: 0; font-size: .9rem; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: 0; }
.alterations-board .kanban-col-count { background: none; padding: 0; border-radius: 0; font-size: .82rem; font-weight: 400; color: var(--muted); }
.alterations-board .kanban-cards { display: flex; flex-direction: column; gap: 10px; min-height: 160px; padding: 4px; margin: -4px; border-radius: var(--radius); }
.alterations-board .kanban-cards.is-target { background: var(--tint); }
.alterations-board .alt-card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: none; }
.alterations-board .alt-card.can-drag { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.alterations-board .kanban-column .alt-card { border-inline: 1px solid var(--line); }   /* no coloured edge per column (M3) */
.alterations-board .alt-card:hover { transform: none; box-shadow: none; border-color: var(--muted); }
.alterations-board .alt-card.is-lifted { opacity: .35; }
.alt-card-ref { font-size: .76rem; color: var(--muted); padding-inline-end: 28px; text-align: start; }
.alt-card-name { margin: 2px 0 0; font-size: .95rem; font-weight: 700; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.alt-card-item { font-size: .86rem; color: var(--muted); line-height: 1.5; }
.alt-card-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 8px; font-size: .8rem; color: var(--muted); }
.alt-card-meta > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.alt-card-meta i { font-size: .72rem; }
.alt-card-more { position: absolute; inset-block-start: 6px; inset-inline-end: 4px; inline-size: 28px; block-size: 28px; padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; font-size: .85rem; }
.alt-card-more:hover, .alt-card-more[aria-expanded="true"] { background: var(--tint); color: var(--text); }
.alt-card-more:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.alt-ghost { position: fixed; z-index: 5000; pointer-events: none; margin: 0; opacity: .9; box-shadow: var(--shadow-float); border-color: var(--brand) !important; cursor: grabbing; }
html.alt-dragging, html.alt-dragging * { cursor: grabbing !important; user-select: none; }
.alt-drop-line { position: relative; block-size: 2px; margin-block: -6px; background: var(--brand); border-radius: 2px; flex: none; }
.alt-drop-line::before { content: ""; position: absolute; inset-inline-start: -3px; inset-block-start: -3px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--brand); }
.alterations-board .alt-col-empty { padding: 6px 2px; font-size: .84rem; color: var(--muted); text-align: start; }
.alt-card-menu { inset-block-start: 36px; inset-inline-end: 4px; }
@media (max-width: 1100px) { .alterations-board .kanban-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } }
@media (max-width: 560px) {
  .alterations-board .kanban-board { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .alterations-board .kanban-cards { min-height: 64px; }
  .alt-board-head .btn { flex: 1 1 auto; }
  .alt-board-head .btn-primary { flex-basis: 100%; }
  .alt-board-end { margin-inline-start: 0; inline-size: 100%; justify-content: space-between; }
}

/* the dialogs of the board: which tailor, settle with tailor */
.alt-dlg-label { display: block; margin-block: 12px 6px; font-size: .86rem; font-weight: 600; color: var(--text); }
.alt-dlg-select { inline-size: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; box-sizing: border-box; }
.alt-dlg-error { min-height: 0; margin: 6px 0 0; font-size: .84rem; color: var(--danger); }
.alt-dlg-error:empty { display: none; }
.alt-dlg-head-end { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.alt-settle-card { max-width: 720px; }
.alt-settle-tailor { max-inline-size: 300px; }
.alt-settle-tablewrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.alt-settle-table th, .alt-settle-table td { padding: 9px 12px; white-space: nowrap; }
.alt-settle-table tr.is-on td { background: var(--tint); }
.alt-settle-tick { inline-size: 18px; }
.alt-settle-tick input, .alt-settle-fee input { accent-color: var(--brand); }
.alt-settle-fee { text-align: end; inline-size: 132px; }
.alt-settle-fee input { inline-size: 120px; block-size: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; text-align: end; font-variant-numeric: tabular-nums; box-sizing: border-box; }
.alt-settle-empty { margin: 18px 0 6px; font-size: .9rem; color: var(--muted); }
.alt-settle-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.alt-settle-sum { display: flex; flex-direction: column; gap: 2px; margin-inline-end: auto; min-width: 0; }
.alt-settle-count { font-size: .9rem; font-weight: 700; }
.alt-settle-drawer { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); }
.alt-settle-total { display: flex; flex-direction: column; align-items: flex-end; }
.alt-settle-total span { font-size: .8rem; color: var(--muted); }
.alt-settle-total b { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.alt-settle-acts { display: flex; gap: 10px; }
.alt-settle-why { flex-basis: 100%; margin: -4px 0 0; display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-size: .82rem; color: var(--muted); }
.alt-settle-why:empty { display: none; }
.alt-settled-title { display: flex; align-items: center; gap: 10px; }
.alt-settled-title i { color: var(--success); }
.alt-settled-facts { margin: 0; display: flex; flex-direction: column; }
.alt-settled-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-block-end: 1px solid var(--line); }
.alt-settled-facts > div:last-child { border-block-end: 0; }
.alt-settled-facts dt { color: var(--muted); font-size: .86rem; }
.alt-settled-facts dd { margin: 0; font-weight: 700; text-align: end; }
.alt-archive-filter { display: flex; align-items: center; gap: 8px; }
.alt-archive-filter label { font-size: .84rem; color: var(--muted); white-space: nowrap; }
.alt-archive-filter select { height: 40px; padding-block: 0; padding-inline: 10px 36px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface); color: var(--text); font: inherit; }

/* Transactions: Current / Archived, and the Archive action inside the status cell of a cancelled sale */
.txn-views { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 12px; }
.txn-views .tab-bar { margin-block-end: 0; inline-size: min(400px, 100%); }
.txn-archived-count { font-variant-numeric: tabular-nums; opacity: .8; }
.txn-status-cell { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.txn-archive-btn { flex: none; }

/* Products & Variants: the bulk-add tick grid (which sizes each colour carries) and the colour
   dialog's removed-sizes strip (TASK-2026-040 slice 3). */
.variant-pick-grid-wrapper { overflow-x: auto; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.variant-pick-grid { border-collapse: collapse; font-size: 0.8rem; min-width: 100%; }
.variant-pick-grid th, .variant-pick-grid td { padding: 4px 10px; border-block-end: 1px solid var(--line); text-align: center; white-space: nowrap; }
.variant-pick-grid thead th { background: var(--sunken); position: sticky; top: 0; z-index: 1; }
.variant-pick-grid tbody th { text-align: start; font-weight: 600; background: var(--sunken); }
.variant-pick-grid input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.bc-removed-sizes { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; align-items: center; }
.bc-removed-size { display: inline-flex; align-items: center; gap: 6px; padding-block: 2px; padding-inline: 10px 4px; border: 1px dashed var(--line); border-radius: var(--radius); font-size: 0.8rem; color: var(--muted); }

/* Label designer: the strip a printer shift pushes off the label (TASK-2026-040 slice 5). */
.barcode-unprintable-band { position: absolute; pointer-events: none; z-index: 20; background: repeating-linear-gradient(45deg, rgba(220, 53, 69, 0.22) 0 6px, rgba(220, 53, 69, 0.04) 6px 12px); box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.55); }
.barcode-profile-note { font-size: 0.78rem; line-height: 1.4; }

/* Quick label panel (TASK-2026-040 slice 6). */
.barcode-quick-label-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: var(--barcode-space-2); }
.barcode-quick-label-row .form-group { margin-bottom: var(--barcode-space-2); min-width: 0; }
.barcode-quick-label-preview { display: flex; justify-content: center; padding: var(--barcode-space-2); margin-block: var(--barcode-space-2); background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius); direction: ltr; }
.barcode-quick-label-preview canvas { width: min(100%, 228px); height: auto; background: #fff; outline: 1px solid var(--brand); }

/* Products & Variants: the actions on a product row, a colour header, a size row and a cell stay out
   of the way until the pointer or the keyboard reaches what they belong to (owner's request,
   2026-09-13). The numbers, prices and colour names never fade — only the controls.

   `pointer-events: none` while hidden is not decoration. An element at opacity 0 still takes clicks,
   and these sit on top of a cell that has its own double-click and a row that expands, so without it
   a click meant for the cell could land on a button nobody can see.

   `:focus-within` is what keeps the page usable from the keyboard: tabbing into a hidden control
   reveals it. Without that the whole matrix would be unreachable without a mouse. */
.inv-hover-actions { opacity: 0; pointer-events: none; transition: opacity 140ms ease; }
.inv-hover-host:hover .inv-hover-actions,
/* An open product keeps its own buttons: by then the pointer has moved down into the sizes
   grid, so hover alone took the controls away from the very row being worked on (owner,
   2026-09-22). */
.inv-hover-host.is-expanded .inv-hover-actions,
.inv-hover-host:focus-within .inv-hover-actions { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .inv-hover-actions { transition: none; } }

/* ── A shape per status, not only a colour ────────────────────────────────────
   Measured on the brand palettes: danger and warning separate by dE 6.33 to a
   full-colour reader and by 1.40 to a deuteranope — indistinguishable. On the dark
   palette danger and success collapse too (5.99, against a target of 8).

   Every badge in the app already carries its word, so nothing here depends on colour
   alone today; this is redundancy so a glanced-at column still parts without reading.
   Drawn with clip-path rather than an icon glyph: no font dependency, and a screen
   reader ignores it instead of announcing "black circle" over the badge's own word. */
.badge-success::before,
.badge-warning::before,
.badge-danger::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-inline-end: 6px;
  background: currentColor;
}
.badge-success::before { border-radius: 50%; }                                   /* disc */
.badge-warning::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }         /* triangle */
.badge-danger::before  { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } /* diamond */
/* Spec 009 US2 (mockup M3): the Backup secret label carries a check mark glyph as its shape, so the disc would say it twice.
   Placed after the shapes on purpose: equal specificity, so the later rule wins. */
.backup-secret-state::before { content: none; }

/* ── Shift history: one action bar instead of five buttons per row ────────────
   Reported by the owner from a screenshot 2026-09-21: the row of buttons made the
   table wider than its card, so the figures scrolled out of sight sideways. */
.shift-action-bar {
  display: flex;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
/* The actions share the row evenly rather than huddling at one end. `min-width: 0` so a
   long Arabic label shrinks the button instead of pushing the row wider than its card —
   pushing the row wider is the whole reason these left the table in the first place. */
.shift-action-buttons {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px;
}
/* `auto`, not `0%`: at a zero basis the five buttons never wrap, and on a 375 px phone the row
   came out 5 px wider than its card, cutting Delete off at the edge (found on the walk,
   2026-09-24). At their own width they share the line while it fits and wrap when it does not. */
.shift-action-bar .btn {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  text-align: center;
}
/* A disabled action here says "pick a shift first", so it stays readable rather than
   fading to something nobody can see the label of. */
.shift-action-bar .btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.shift-history-selectable tr[data-id] { cursor: pointer; }
.shift-history-selectable tr[data-id]:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: -1px;
}

/* Every section on the page folds. Open by default, so the page reads exactly as before
   until somebody decides they have seen enough of a section. The summary keeps the card
   header's own look — this adds a control, it does not restyle anything.

   The marker is the browser's own triangle at the start of the line, the same one the
   audit trail and the receipt preview use (owner's choice, 2026-09-21). It was a drawn
   chevron pushed to the far end; two different disclosure marks on one page is one too
   many, and the native one already turns and already mirrors in Arabic by itself. */
.sd-section > summary {
  display: list-item;
  list-style: revert;
  cursor: pointer;
}
.sd-section > summary:focus-visible { outline: 1px solid var(--focus); outline-offset: -2px; }

/* A closed section is a bar, so it takes a bar's room. Open, the card keeps its own padding
   and the header keeps its divider; closed, both are dead space — the card padding wraps
   nothing and the divider separates the title from nothing. Measured: 68px and 98px closed
   against the 50px the audit-trail and receipt bars take. Same 50px now. */
.sd-section:not([open]) { padding-block: 0; }
.sd-section > summary { padding-inline: 16px; }   /* the fold bars' inset, so every marker lines up */
.sd-section:not([open]) > summary {
  padding-block: 12px;
  border-bottom: 0;
  /* The heading drops to the bar's own size so a closed section is exactly as tall as the
     audit-trail and receipt bars — 50px. Full size while open, where it is a section
     heading; bar size while closed, where it is a bar. */
  font-size: .85rem;
}
.sd-section:not([open]) > summary > h3 { font-size: inherit; }
/* The count badge rides the same line rather than setting the bar's height: at its normal
   padding it made the items bar 61px against everything else's 50. */
.sd-section:not([open]) > summary > .badge {
  font-size: .68rem;
  padding-block: 1px;
  min-width: 0;
}
/* The heading is a block; inline it so the title, its badge and the marker share one line. */
.sd-section > summary > h3 { display: inline; }
.sd-section > summary > .badge { margin-inline-start: 10px; vertical-align: middle; }

/* ── Dashboard, rebuilt on the theme (owner's approved design, 2026-09-21) ────
   Four sections instead of ten: how the shop is doing against its targets, the
   period's four figures, the three series over time, and what sold most. The two
   goal gauges became progress bars, and the chart lost its own date pickers so the
   page's period control is the only one. */
.dash-targets,
.dash-tiles { display: grid; }
.dash-targets { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dash-tiles   { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.dash-target,
.dash-tile { padding: 16px 20px; border-inline-end: 1px solid var(--line); }
.dash-target:last-child,
.dash-tile:last-child { border-inline-end: 0; }
.dash-target-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dash-target-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  font-weight: 700;
}
.dash-target-goal { font-size: .72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dash-target-value { font-size: 1.7rem; font-weight: 800; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.dash-target-note { font-size: .74rem; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
.dash-tile-value { font-size: 1.45rem; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dash-tile-sub { font-size: .74rem; color: var(--text-muted); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* The filled part is --accent-fill, the token for a block that carries meaning on both themes.
   The track behind it is a tint of the same accent rather than --bg-tertiary, which on the dark
   theme is the card's own colour — the track was invisible and a 0% bar looked like a missing
   element rather than an empty one. */
.dash-bar { height: 6px; background: rgba(var(--accent-rgb), 0.18); border-radius: 2px; overflow: hidden; }
.dash-bar > span { display: block; height: 100%; background: var(--fill); }

/* The trend chart's controls (TASK-2026-066, the owner's agreed money mockup, 2026-09-25): a pill per
   line hides and shows it and one line always stays; the view selector is the dashboard's own period
   pill; the tooltip is one card, the point on top, then a row a line with its value the strongest. */
.dash-trend-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 4px; }
.dash-trend-series,
.dash-trend-view { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-trend-series button {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--control-sm, 36px); padding: 0 12px;
  border-radius: 2px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.dash-trend-series button[aria-pressed="false"] { color: var(--text-muted); background: transparent; border-style: dashed; }
.dash-trend-series button[aria-pressed="false"] .dash-trend-key { opacity: .3; }
.dash-trend-series button[aria-disabled="true"] { cursor: default; }
.dash-trend-series button:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.dash-trend-key { width: 16px; height: 3px; border-radius: 2px; background: var(--trend-key); flex: none; }
.dash-tip {
  min-width: 200px; padding: 10px 12px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); box-shadow: none;
  color: var(--text); font-size: .8rem; line-height: 1.6;
}
.dash-tip-head { margin-bottom: 4px; color: var(--text-muted); font-size: .74rem; }
.dash-tip-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.dash-tip-name { color: var(--muted); }
.dash-tip-value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* The trend chart's plot. ECharts' own legend is hidden: the pills above are the legend. */
.dash-plot { height: 260px; margin-top: 14px; position: relative; }
.dash-caveat { font-size: .74rem; color: var(--text-muted); margin: 10px 0 0; }

/* The top sellers card (TASK-2026-066, the owner's approved mockup of 2026-09-25): one row of choices,
   then a plain ranked list. Theme tokens only, so it follows all seven themes: the bar is the theme's own
   accent, a thin mark with no text on it, and the small text is --text-secondary, the one grey that reads
   in every theme (--text-muted is 1.83:1 on the Executive card and 2.09:1 on GitHub dark). */
.dash-sellers-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dash-sellers-tools select { height: var(--control-sm, 36px); padding-block: 0; width: auto; min-width: 9.5rem; font-size: .82rem; }
.dash-sellers-tools .dash-trend-view { margin-inline-start: auto; }
.dash-sellers-list { list-style: none; margin: 0; padding: 4px 0; }
.dash-sellers-row { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; grid-template-areas: "rank name value" "rank meta sub" ". bar bar"; column-gap: 10px; row-gap: 2px; align-items: baseline; padding: 10px 16px 8px; }
.dash-sellers-rank { grid-area: rank; color: var(--muted); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-sellers-name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: .88rem; font-weight: 600; }
.dash-sellers-meta { grid-area: meta; min-width: 0; color: var(--muted); font-size: .75rem; }
.dash-sellers-value { grid-area: value; color: var(--text); font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.dash-sellers-sub { grid-area: sub; color: var(--muted); font-size: .72rem; text-align: end; white-space: nowrap; }
.dash-sellers-bar { grid-area: bar; display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--line); overflow: hidden; }
.dash-sellers-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--brand); }
.dash-sellers-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; line-height: 1.5; }
.dash-sellers-foot p { margin: 0; }
/* TASK-2026-078: a row sold without a cost says so in words, its profit is a dash, and its bar is hatched in the warning colour.
   Still tokens only. */
.dash-sellers-value.is-none, .dash-sellers-sub.is-none { color: var(--warning); font-weight: 700; }
.dash-sellers-bar.is-none > span { background: repeating-linear-gradient(45deg, var(--warning) 0 4px, transparent 4px 7px); }
.dash-sellers-foot .dash-uncosted-count { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Today's four figures, the analytics deck, the bar cards and the chart's filter bar — restored
   2026-09-22 at the owner's word after the rebuild took them off the page. */
.kpi-card[data-alarm="1"] { border-color: var(--danger-tint); }
.kpi-card[data-alarm="1"] .kpi-value { color: var(--danger); }

.bi-deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.bi-stat {
  background: var(--sunken);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}
.bi-stat-label { font-size: .72rem; color: var(--muted); letter-spacing: .04em; }
.bi-stat-value {
  font-size: 1.3rem;
  font-weight: 800;
  margin-top: 4px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Only the dead-stock count says good or bad; the rest are just figures. */
.bi-stat-value[data-tone="bad"] { color: var(--danger); }
.bi-stat-value[data-tone="good"] { color: var(--success); }
.bi-stat-unit { font-size: .8rem; font-weight: 500; }
.bi-stat-note { font-size: .68rem; color: var(--text-muted); margin-top: 4px; }

.dash-bars {
  height: 120px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding-bottom: 20px;
  position: relative;
}

.dash-chart-filters {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 16px;
  background: var(--sunken);
  padding: 12px;
  border-radius: var(--radius);
}
.dash-chart-filters .form-group { margin: 0; flex: 1; min-width: 150px; }
.dash-chart-filters label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}
.dash-chart-filters input,
.dash-chart-filters select { width: 100%; }
.dash-chart-filters .btn { flex: 0 0 auto; }

.dash-top-sub { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.dash-recent td { padding: 8px 10px; font-size: .85rem; }
.dash-recent .ref { font-family: var(--font-mono, monospace); font-size: .8rem; }
.dash-recent .ref a { color: var(--brand); text-decoration: underline; }
.dash-recent .amt { text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Refund details (2026-09-21) ──────────────────────────────────────────────
   Same shapes as sale details, so the two read as one family. What differs is
   what a refund is: the headline figure is money leaving the drawer, and the
   useful context is which sale it came out of rather than how it was paid. */
.sd-outflow { color: var(--danger); }
.rd-origin { font-size: .84rem; color: var(--muted); margin: 0 0 10px; }
.rd-origin a { color: var(--brand); font-weight: 700; }
.rd-net td { border-top: 1px solid var(--line); font-weight: 800; }
.rd-net .sd-amt { color: var(--danger); }
.rd-reason {
  font-style: italic;
  margin: 0;
  padding: 12px 14px;
  background: var(--sunken);
  /* The accent edge was `border-left`, so on an Arabic screen it sat at the end of the
     quotation instead of the start of it. */
  border-inline-start: 3px solid var(--line);
  border-radius: var(--radius);
}

/* ── Sale details, rebuilt 2026-09-21 (owner approved the mockup) ─────────────
   The page was eight equal-weight cards and seven buttons wrapping onto two rows.
   Four of those buttons were print/share variants, which is a menu; the total — the
   one figure the page exists to show — had no more weight than the shift number; and
   three sparse cards held facts that fit in one strip.

   The payment bar reuses --pay-1..3 from the day summary, so the two screens that
   show a payment mix show it the same way. */
/* What it is sits on its own line; what you can do with it gets the line under it, whole.
   The actions used to share a row with the title and wrapped onto a second line anyway. */
.sd-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 14px; }
.sd-title { font-size: 1.3rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 10px; }
/* The reference and the timestamp live behind this rather than on a line of their own. */
.sd-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface);
  font-size: .72rem;
  font-weight: 800;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;   /* an i that reads as an i at 22px */
  line-height: 1;
  cursor: help;
  padding: 0;
}
.sd-info { position: relative; display: inline-flex; }
.sd-info-btn:hover,
.sd-info-btn:focus-visible { color: var(--text); border-color: var(--border-active); }
.sd-info-btn:focus-visible { outline: 1px solid var(--focus); outline-offset: 2px; }
/* Shown on hover, and on keyboard focus so it is not mouse-only. */
/* Both classes sit on the same element and .sd-menu-panel is declared further down, so this
   needs the extra class to win rather than relying on source order. */
.sd-menu-panel.sd-info-panel { display: none; min-width: 340px; padding: 14px 16px; }
/* The labels are two words in Arabic and were breaking across lines while the value beside
   them sat on one; nothing here is long enough to need wrapping at this width. */
.sd-info-row > span { white-space: nowrap; }
.sd-info:hover > .sd-info-panel,
.sd-info:focus-within > .sd-info-panel { display: block; }
/* The reference is one token; breaking it across lines makes it harder to read back. */
.sd-info-row > strong { white-space: nowrap; }
.sd-info-row { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: .82rem; }
.sd-info-row > span { color: var(--muted); }
.sd-info-row > strong { color: var(--text); user-select: text; }
.sd-actions { display: flex; gap: 8px; width: 100%; }
/* `min-width: 0` so a long Arabic label shrinks its button instead of pushing the row
   wider than the card — the same reason the shift actions needed it. */
.sd-actions > .btn,
.sd-actions > .sd-menu { flex: 1 1 0%; min-width: 0; }
.sd-actions > .btn { justify-content: center; text-align: center; }
/* .card sets `isolation: isolate`, which makes every card its own stacking context — so an
   absolutely positioned panel inside one cannot paint over the cards that follow it, whatever
   z-index it carries. The panel was rendering behind the collapsed section bars. Lifting the
   card itself while a menu inside it is open is the fix that leaves the global rule alone. */
.card:has(.sd-menu[open]),
.card:has(.sd-info:hover),
.card:has(.sd-info:focus-within) { position: relative; z-index: var(--z-dropdown); }

/* Only the share menu in the action row stretches. Scoped, because the information button
   is also an .sd-menu and a 100% width inside a shrink-to-fit box collapsed it to the width
   of the letter it contains. */
.sd-actions > .sd-menu > summary { width: 100%; justify-content: center; }

/* One menu instead of four buttons for printing and sharing. */
.sd-menu { position: relative; }
.sd-menu > summary { list-style: none; cursor: pointer; }
.sd-menu > summary::-webkit-details-marker { display: none; }
.sd-menu-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: var(--z-dropdown);
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  padding: 5px;
}
.sd-menu-panel button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: start;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
  padding: 9px 11px;
  font: inherit;
  font-size: .85rem;
  border-radius: var(--radius);
}
.sd-menu-panel button:hover { background: var(--tint); }
.sd-menu-panel hr { border: 0; border-top: 1px solid var(--line); margin: 5px 0; }

/* The money band: the total, and how it was paid. */
.sd-money { display: grid; grid-template-columns: minmax(230px, 1.1fr) 2fr; }
.sd-total-cell {
  padding: 20px 22px;
  border-inline-end: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sd-total-label,
.sd-split-head,
.sd-fact-head {
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  font-weight: 700;
}
.sd-total-value {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.15;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.sd-total-sub { font-size: .78rem; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
.sd-split { padding: 18px 22px; }
.sd-split-head { margin-bottom: 10px; }
.sd-split table { width: 100%; font-size: .84rem; }
.sd-split td { padding: 4px 2px; }
.sd-split .sd-amt { text-align: end; font-variant-numeric: tabular-nums; font-weight: 700; }
.sd-split .sd-pct { text-align: end; color: var(--text-muted); width: 3.2rem; font-variant-numeric: tabular-nums; }

/* The facts, in one strip rather than three cards with four lines each. */
.sd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.sd-fact-group { padding: 16px 20px; border-inline-end: 1px solid var(--line); }
.sd-fact-group:last-child { border-inline-end: 0; }
.sd-fact-head { margin-bottom: 10px; }
.sd-fact-list { margin: 0; }
.sd-fact { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: .84rem; }
.sd-fact dt { color: var(--muted); margin: 0; }
.sd-fact dd { margin: 0; font-weight: 600; text-align: end; }
.sd-fact dd.sd-mono { font-variant-numeric: tabular-nums; }

/* The ledger. */
.sd-items .sd-amt { text-align: end; font-variant-numeric: tabular-nums; }
.sd-items tfoot td { font-weight: 800; }
.sd-items tfoot tr:first-child td { border-top: 2px solid var(--line); }
.sd-items .sd-grand { color: var(--brand); }
.sd-variant { font-size: .74rem; color: var(--text-muted); }

/* Opened only when wanted. */
.sd-fold { margin-bottom: 16px; }
.sd-fold > summary {
  cursor: pointer;
  font-size: .85rem;
  font-weight: 700;
  padding: 12px 16px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  list-style: revert;
}
.sd-fold > summary:focus-visible { outline: 1px solid var(--focus); outline-offset: 2px; }
.sd-fold[open] > summary { border-end-start-radius: 0; border-end-end-radius: 0; }
.sd-fold-body {
  border: 1px solid var(--line);
  border-top: 0;
  padding: 16px;
  border-end-start-radius: var(--radius);
  border-end-end-radius: var(--radius);
}

/* ── The day's takings by payment method (owner's option B, 2026-09-21) ───────
   Was a borderless table squeezed beside a single floating number, inside the same
   card as the day's KPI tiles. It is its own row now: the bar says what the mix was
   before any figure is read, and general expenses sits in its own card because it is
   a different kind of number and does not belong in that table.

   Colours come from --pay-1..3, which the two brand palettes set for their own
   surface. Every segment is named in the legend with its amount and share as well:
   the colour supports the reading, it does not carry it alone. */
.pay-row { align-items: start; }
.pay-bar {
  display: flex;
  gap: 2px;                 /* the required gap between adjacent fills */
  height: 12px;
  margin-bottom: 14px;
}
.pay-bar > span {
  border: 1px solid var(--pay-edge);
  min-width: 2px;           /* a method worth almost nothing still shows it exists */
}
.pay-bar > span:first-child { border-start-start-radius: 2px; border-end-start-radius: 2px; }
.pay-bar > span:last-child  { border-start-end-radius: 2px; border-end-end-radius: 2px; }
.pay-legend { font-size: .85rem; width: 100%; }
.pay-legend td { padding: 6px 4px; }
.pay-legend .pay-amount,
.pay-legend .pay-share { text-align: end; font-variant-numeric: tabular-nums; }
.pay-legend .pay-amount { font-weight: 700; }
.pay-legend .pay-share { color: var(--text-muted); width: 3.4rem; }
.pay-legend .pay-total td { border-top: 1px solid var(--line); font-weight: 800; }
.pay-legend .pay-total .pay-amount { color: var(--brand); }
.pay-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--pay-edge);
  margin-inline-end: 8px;
}
.pay-1 { background: var(--pay-1); }
.pay-2 { background: var(--pay-2); }
.pay-3 { background: var(--pay-3); }
.pay-general-value {
  font-size: 1.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pay-general-note { font-size: .78rem; color: var(--muted); margin: 8px 0 0; }
.pay-general-count { margin-top: 12px; font-size: .8rem; color: var(--text-muted); }

/* ══ Brand theme work, 2026-09-21: the light/dark switch, the Settings disclosure and
   the one-size control rules. Placed here rather than at the end of the file because the
   Team Administration region below runs to the "feature CSS lives ABOVE this line" marker,
   and its own tests read everything in between as belonging to it. ══ */

/* ── Light / dark switch in the sidebar footer ────────────────────────────────
   Only the two brand themes are offered here. Anyone on one of the five older
   palettes keeps it and changes theme in Settings, so flipping this can never
   quietly move them off the theme they chose — the switch is hidden for them.

   A sun and a moon rather than a word: nothing to translate, and it still reads
   at 68px when the sidebar is collapsed.

   The crossfade is plain CSS, not the View Transitions API. That API aborts when
   the tab is hidden or another transition is already running, and an abort rolls
   the DOM back — which would silently undo the theme the person just picked. The
   class is on only for the length of one swap; left on, it would also slow every
   hover and focus in the app to half a second. */
.theme-switch {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
}
.theme-switch[hidden] { display: none; }
.theme-switch-track {
  position: relative;
  display: block;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--tint);
  border: 1px solid var(--line);
  transition: background-color .4s cubic-bezier(.4, 0, .2, 1);
}
.theme-switch:hover .theme-switch-track { background: var(--tint); }

/* The icon rides inside the ball. It used to be two icons lying loose in the track, each as
   tall as the track itself, with the ball sliding over the top of them — at 22px that read as
   a smudge rather than a sun and a moon. One icon, on the moving part, stays legible. */
.theme-switch-ball {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* the filled-block accent, so the icon on it clears AA in both themes (6.03) */
  background: var(--fill);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  display: grid;
  place-items: center;
  /* overshoots a little and settles — the part that reads as motion rather than a jump */
  transition: transform .48s cubic-bezier(.34, 1.42, .64, 1);
}
.theme-switch-ico {
  grid-area: 1 / 1;
  font-size: 8.5px;
  line-height: 1;
  color: var(--on-fill);
  transition: opacity .3s ease, transform .3s ease;
}
/* Only ever one of them, cross-fading as the ball travels. */
.theme-switch-sun  { opacity: 1; transform: rotate(0); }
.theme-switch-moon { opacity: 0; transform: rotate(-90deg); }
html[data-theme="retailpower-dark"] .theme-switch-ball { transform: translateX(18px); }
html[data-theme="retailpower-dark"] .theme-switch-sun  { opacity: 0; transform: rotate(90deg); }
html[data-theme="retailpower-dark"] .theme-switch-moon { opacity: 1; transform: rotate(0); }
/* The ball travels towards the reader's end of the track in Arabic. */
html[dir="rtl"] .theme-switch-ball { left: auto; right: 2px; }
html[dir="rtl"][data-theme="retailpower-dark"] .theme-switch-ball { transform: translateX(-18px); }
.theme-switch:focus-visible .theme-switch-track {
  outline: 1px solid var(--focus);
  outline-offset: 2px;
}

/* Collapsed sidebar: the footer stacks so the switch keeps its full width. */
.sidebar.collapsed .sidebar-footer { flex-direction: column; gap: 10px; }

/* The whole page crossfades while a swap is in flight. */
html.theme-xfade,
html.theme-xfade *,
html.theme-xfade *::before,
html.theme-xfade *::after {
  transition: background-color .5s cubic-bezier(.4, 0, .2, 1),
              color .5s cubic-bezier(.4, 0, .2, 1),
              border-color .5s cubic-bezier(.4, 0, .2, 1),
              outline-color .5s cubic-bezier(.4, 0, .2, 1),
              box-shadow .5s cubic-bezier(.4, 0, .2, 1),
              fill .5s cubic-bezier(.4, 0, .2, 1),
              stroke .5s cubic-bezier(.4, 0, .2, 1) !important;
}
/* the ball is movement, not colour — it keeps its own curve */
html.theme-xfade .theme-switch-ball {
  transition: transform .48s cubic-bezier(.34, 1.42, .64, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch-ball, .theme-switch-track, .theme-switch-ico { transition: none; }
  html.theme-xfade,
  html.theme-xfade *,
  html.theme-xfade *::before,
  html.theme-xfade *::after { transition: none !important; }
}

/* The five earlier palettes in Settings, folded away. Reachable, not prominent. */
.theme-legacy { margin-top: 18px; }
.theme-legacy > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 0;
  list-style: revert;
}
.theme-legacy > summary:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: 2px;
}
.theme-legacy[open] > summary { margin-bottom: 4px; }

/* ── One size for the controls in a row (owner decision 2026-09-21) ───────────
   Buttons and status labels stop stretching to fit their word, so a toolbar and a
   status column line up instead of stepping. `min-width`, not `width`: Arabic sets
   the same label appreciably wider than English, and a fixed width would clip it.

   `.btn-xs` is excluded along with `.btn-sm` (owner, 2026-09-22: "they have too much width").
   It was missed when this rule went in, so the smallest size in the system was being held at
   132px — four size chips in a dialog each took a third of the row. A button that asks to be
   extra small is not in a toolbar row. */
.btn:not(.btn-sm):not(.btn-xs):not(.btn-icon):not(.btn-block) { min-width: 132px; }   /* TASK-2026-163 S3 left this owner decision of 2026-09-21 in place: the design draws a button at its label's width; see NOTES-s3.md */
/* A badge is one fixed box (see BADGES above); the old 104px floor and the dense-strip exception are gone. */

/* The spinner inside a button borrows the button's own text colour. Painted with the
   accent it was invisible on a primary button, which is an accent-coloured block. */
.btn .spinner { background-color: currentColor; }

/* ── The register's own words, and the shop's own expense categories (feature 008, mockup D) ──
   The six reasons the Cash In / Cash Out slip offered were six English strings inside shifts.js.
   They are rows in the shop's own list now, and a cashier may add one. That is why there are two
   controls and not one: a BUILT-IN reason is drawn translated and can never be removed, so it is a
   plain chip; a SHOP-ADDED reason is drawn exactly as it was typed and an admin may retire it, so
   it is a pill with room for the small remove button. Drawing both as one control is what would
   make a shop's own word get translated by accident.

   Logical sides only: the remove button sits on the reading END of the pill in both directions,
   and the hint sits under the field rather than to one physical side of it.

   The two add boxes are the only things here toggled with the `hidden` attribute, and both are
   given a `display`, so both carry the companion rule this stylesheet's first trap demands. */
.cash-reason-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cash-reason-chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding-inline: 13px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--sunken);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.cash-reason-chip:hover { color: var(--text); border-color: var(--border-active); }
.cash-reason-chip.is-on {
  background: var(--fill, var(--brand));
  border-color: var(--fill-hover);
  color: var(--on-fill);
}
/* Dashed, because it adds to the list rather than choosing from it. */
.cash-reason-chip.is-add { border-style: dashed; color: var(--text-muted); }
.cash-reason-chip.is-add:hover { color: var(--brand); border-color: var(--brand); }
.cash-reason-pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--sunken);
  overflow: hidden;
}
.cash-reason-pill.is-on {
  background: var(--fill, var(--brand));
  border-color: var(--fill-hover);
}
.cash-reason-pill-pick {
  height: 100%;
  padding-inline: 13px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.cash-reason-pill.is-on .cash-reason-pill-pick { color: var(--on-fill); }
.cash-reason-pill-x {
  width: 26px;
  height: 100%;
  border: 0;
  border-inline-start: 1px solid var(--line);
  background: transparent;
  /* --text-muted measures 1.65:1 on --bg-tertiary in the four older palettes and 2.56:1 in the
     default light theme, both under the 3:1 floor a control needs. --text-secondary is 4.22:1 at
     its worst. Measured 2026-09-22 with the sibling category control, not eyeballed. */
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.cash-reason-pill.is-on .cash-reason-pill-x {
  color: var(--on-fill);
  border-inline-start-color: color-mix(in srgb, var(--on-fill) 35%, transparent);
}
.cash-reason-pill-x:hover { color: var(--danger); background: var(--danger-tint); }
.cash-reason-add { display: flex; align-items: center; gap: 8px; margin-block-start: 8px; }
.cash-reason-add[hidden] { display: none; }
.cash-reason-add .btn { flex: 0 0 auto; }
/* The slip gives every field one height and full width; the box only has to agree to share the row. */
.bank-slip-form .cash-reason-add input { flex: 1 1 auto; min-width: 0; }
/* The confirm is one line inside the notices area, not a second dialog on top of the slip. */
.cash-reason-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cash-reason-confirm-text { flex: 1 1 220px; min-width: 0; }
.cash-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: var(--bank-slip-field, 44px); }
.cash-slip-hint { display: block; font-size: 0.7rem; color: var(--text-muted); margin-block-start: 6px; }
/* The arrow that says which way the money is going. Up and down are not mirrored by direction, so
   the same glyph means the same thing in Arabic. */
.cash-slip-dir {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-inline-end: 6px;
  border-radius: 2px;
  font-size: 0.8rem;
  font-weight: 800;
  vertical-align: middle;
}
.cash-slip-dir.is-in { background: var(--success-tint); color: var(--success); }
.cash-slip-dir.is-out { background: var(--warning-tint, var(--sunken)); color: var(--warning); }

/* The same add box beside an expense-category picker, on the Expenses page and the shift slip.
   Two fields, because a category has to say which family it belongs to or it lands on the
   unmapped account and its money is filed as unclassified. */
.expense-category-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block-start: 8px;
}
.expense-category-add[hidden] { display: none; }
.expense-category-add input { flex: 2 1 140px; min-width: 0; }
.expense-category-add select { flex: 1 1 120px; min-width: 0; }
.expense-category-add .btn { flex: 0 0 auto; }

/* ── The till pays a member of staff (feature 008, T037/T038, mockup C) ───────────────────────
   The Drawer Payout slip is the Cash In / Cash Out slip's own shape — same grid, same field
   height, same notices area — so there is almost nothing new here. What IS new is that three of
   its blocks are put away with the hidden attribute when the category is an ordinary expense, and
   one of the three is a .bank-slip-row, which carries display: grid.

   That is this stylesheet's first trap, and it has cost four outages: the attribute only works
   because the user agent's display: none is the weakest rule in the cascade, so the moment a
   selector is given a display of its own, every hidden on it stops working — silently, with
   nothing in any console and nothing in any test that does not look for it. Hence the two
   companion rules below. The drawer tick's own wrapper is deliberately given NO display at all,
   which is the other way of obeying the same rule. */
.bank-slip-row[hidden] { display: none; }
.payout-auth[hidden] { display: none; }
.payout-auth {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--muted);
  flex: 1 1 220px;
  min-width: 0;
}
/* The footer holds a sentence at the reading start and the two buttons at the reading end, and
   wraps rather than squeezing either when the slip is narrow. Logical sides throughout, so the
   sentence and the buttons swap ends in Arabic without a second rule. */
.payout-footer { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.payout-buttons { display: flex; gap: 10px; margin-inline-start: auto; }

/* The register line for a payout. A colour of its own, because the money did not buy anything for
   the shop and did not go to the safe: it went to a person, and a reader scanning the log should
   not have to read the words to see that. A cancelled one keeps its row and is dimmed rather than
   removed — both halves of a reversal stay on the register for ever. */
.shift-payout-row.is-cancelled td { opacity: 0.62; }
.shift-payout-row.is-cancelled td:nth-child(5) { text-decoration: line-through; }
.shift-payout-cancelled {
  display: inline-block;
  margin-inline-start: 8px;
  padding-inline: 7px;
  border-radius: 2px;
  background: var(--sunken);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
}
/* Where a deduction came from, under its type on the Employees page. Its own line rather than a
   parenthesis, so the Arabic screen does not have to nest one direction inside another. */
.adj-from-till {
  display: block;
  margin-block-start: 4px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ── Managing the shop's category list from inside the Drawer Payout slip (mockup C) ──────────
   Mockup C draws "+ Add a category" and a small × beside every category the shop itself added
   inside the picker. A <button> cannot live inside an <option>, so the picker stays the native
   <select> — which a touch till and both reading directions already handle for nothing — and the
   two controls sit beneath it. The add box itself is the Expenses page's own
   `.expense-category-add`, reused rather than drawn a second way.

   Sides are logical throughout, so the × sits at the reading END of its row and moves to the other
   side in Arabic with no second rule. The list is toggled with the `hidden` attribute AND is given
   a display, so it carries the companion rule — this stylesheet's oldest trap, four outages so
   far. `.category-manage` is deliberately never hidden by the attribute: a person who holds
   neither capability gets no such element at all. */
.category-remove-list[hidden] { display: none; }
.category-manage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block-start: 6px;
}
.category-remove-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-block-start: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sunken);
}
.category-remove-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 2px;
  padding-inline: 6px;
}
.category-remove-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.category-remove-x {
  flex: 0 0 auto;
  margin-inline-start: auto;
  inline-size: 24px;
  block-size: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  /* --text-secondary, not --text-muted: the × sits on --bg-tertiary, where muted measures 1.65:1
     in the four older palettes and 2.56:1 in the default light theme — under the 3:1 floor for a
     control somebody has to find and press. Secondary measures 4.22:1 at its worst. Measured
     2026-09-22 on scratch/category_controls_probe.html. */
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
}
.category-remove-x:hover,
.category-remove-x:focus-visible {
  color: var(--danger);
  border-color: var(--danger);
}
.category-remove-confirm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 4px;
  padding: 8px 6px 2px;
  border-block-start: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--text);
}
.category-remove-question { flex: 1 1 180px; min-width: 0; }

/* The Pay tab's commission summary: three cards that fold to fewer columns as the room shrinks.
   It was a fixed three-column `grid-3` moved over from the old Commissions page, and at phone
   width each card got 75 px for an amount like 2,029,019.00 EGP (found on the walk, 2026-09-24).
   `.kpi-grid` assumes four cards, so this is its own row. Sized by the room, not the screen.
   Never toggled with `hidden`, so its `display` needs no companion rule. */
.emp-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.emp-kpi-row .kpi-value { overflow-wrap: anywhere; }

/* A row of cards or fields that folds by the room it has. The fixed `.grid-3` / `.grid-4`
   utilities keep their columns at every width, so on a phone the last column ends up off the
   screen with nothing to scroll to (Month Management's returns table, found on the walk,
   2026-09-24). New layouts should use this instead. Never toggled with `hidden`. */
.fit-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
}

/* Month Management's period bar: the picker as wide as its longest month name needs (a select is
   as wide as its widest option), the status taking what is left, and the period buttons, up to
   five of them, wrapping at the end instead of running out of a one-column cell. As a four-column
   grid it gave the month 54 px for "September" in English (walk, 2026-09-24). Never hidden. */
.month-period-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}
.month-period-pick { flex: 0 0 auto; max-width: 100%; }
/* `auto`, not the app-wide 100%: at 100% the two lists split whatever width the label gave the
   group and "September" still came out cut (measured on the deployed test site, 2026-09-24). */
.month-period-pick select { width: auto; }
.month-period-state { flex: 1 1 160px; min-width: 0; }
.month-period-actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* ── The (i) button (spec 046, TASK-2026-089) ─────────────────────────────────
   The owner's rule of 2026-09-28: explanations live behind a small (i), never as a paragraph on the
   page. The look is the approved mockups' (scratch/mockups/046-brand.css): an 18 px ring in the
   accent line colour with a serif italic i, filled with the accent when open or hovered, and one
   floating card with an accent rule on its top edge. info_tip.js owns the behaviour.

   The card is toggled with the `hidden` attribute and is a plain div, so it carries NO display here
   (the 2026-09-09 trap). The button is a grid only to centre its letter and is never hidden. The
   invisible ::after widens the hit area to 34 px without moving anything. Sides are logical; the
   card's physical left and top are set by the module from the button's own rectangle. */
.info-tip {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  margin-inline-start: 6px;
  box-sizing: border-box;
  border-radius: var(--radius);
  border: var(--border-width) solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  font: 700 var(--fs-small)/1 var(--font-sans);   /* TASK-2026-163 S3: a 2px square with a 1px line, not a ring with a serif i */
  cursor: help;
  vertical-align: middle;
  transition: var(--transition);
}
.info-tip::after { content: ""; position: absolute; inset: -6px; }
.info-tip:hover,
.info-tip[aria-expanded="true"] { background: var(--surface); border-color: var(--brand); color: var(--brand); }
/* Focus (v15): the (i) button turns its own 1px border; no ring. */
.info-tip:focus-visible { outline: 0; border-color: var(--focus); }
/* On a filled or dark band. */
.info-tip.is-light { background: transparent; border-color: var(--on-fill); color: var(--on-fill); }
.info-tip.is-light:hover,
.info-tip.is-light[aria-expanded="true"] { background: var(--on-fill); border-color: var(--on-fill); color: var(--fill); }
.info-tip-card {
  position: fixed;
  /* Above every dialog: `.modal-overlay` stands at 99999, and an (i) inside the End employment dialog
     (spec 046 S2, TASK-2026-089) opened its card behind it at 4000. The cost-of-goods bubble uses the same. */
  z-index: 100001;
  box-sizing: border-box;
  width: max-content;
  max-width: 280px;
  padding: 10px 14px;
  text-align: start;
  background: var(--surface);
  color: var(--text);
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  font: 400 var(--fs-small)/1.6 var(--font-sans);
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}
/* A thumb needs a bigger ring on a phone. */
@media (max-width: 640px) {
  .info-tip { width: 28px; height: 28px; }
}

/* ── The Employees tab strip (spec 046, TASK-2026-089; approved mockup 046-m1) ──────────────────
   Drawn as the mockup draws it (scratch/mockups/046-brand.css, the e-tabs rules): no box around the
   tabs, one quiet line under them, each tab its own width, and the selected tab marked by a 3 px
   teal underline and bold, darker text. The tabs wrap rather than scroll, so the strip's arrows
   never have anything to show and stay hidden. On a phone they sit in a grid of four columns, two
   rows for the eight tabs.

   The colours follow the cost-of-goods precedent: the mockup's exact teal on the two brand themes,
   and the nearest existing token on the five older palettes.

   WHY THE IMPORTANT DECLARATIONS. The universal sub-tab rules give every tab bar a box, a padding,
   a gap, nowrap and a sideways scroll, and every tab button its flex, padding, weight, gap and an
   active look (fill, ring, border, pulse animation) — all declared important. Only another
   important declaration at a higher specificity beats them, so each one below does exactly that,
   and every selector starts with the Employees strip, so no other page's tabs change. */
:root {
  --emp-tab-fill: var(--accent-fill);
  --emp-tab-strong: var(--text-gold);
  --emp-tab-hover: var(--bg-hover);
}
html[data-theme="retailpower"] { --emp-tab-fill: #2C6B78; --emp-tab-strong: #034959; --emp-tab-hover: #EAF7F9; }
html[data-theme="retailpower-dark"] { --emp-tab-fill: #2C6B78; --emp-tab-strong: #D0EFF2; --emp-tab-hover: rgba(80, 180, 191, 0.07); }
.tab-strip[data-strip="employees"] .tab-strip-rail {
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-block-end: 1px solid var(--line) !important;
  border-radius: 0 !important;
}
.tab-strip[data-strip="employees"] .tab-bar .tab-btn {
  flex: 0 0 auto !important;
  gap: 8px !important;
  padding: 12px 18px 13px !important;
  margin: 0;
  margin-block-end: -1px;
  font-size: 15px;
  line-height: inherit;   /* the mockup sets font: inherit, so the page line height; the button default is taller */
  font-weight: 600 !important;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-block-end: 3px solid transparent;
  border-radius: 0;
  white-space: nowrap;
}
.tab-strip[data-strip="employees"] .tab-bar .tab-btn:hover { color: var(--text); background: var(--emp-tab-hover); }
.tab-strip[data-strip="employees"] .tab-bar .tab-btn.active {
  color: var(--emp-tab-strong) !important;
  background: transparent !important;
  border: 0 !important;
  border-block-end: 3px solid var(--emp-tab-fill) !important;
  box-shadow: none !important;
  animation: none !important;
  font-weight: 700 !important;
}
.tab-strip[data-strip="employees"] .tab-bar .tab-btn.active:hover { background: var(--emp-tab-hover) !important; }
.tab-strip[data-strip="employees"] .tab-bar .tab-btn:focus-visible {
  box-shadow: none !important;
  outline: 2px solid var(--focus) !important;
  outline-offset: -2px;
}
/* TASK-2026-089 (mockup 046-m1): the number after a tab's label, today the Leaves tab's requests waiting. */
.tab-strip[data-strip="employees"] .tab-strip-count { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 2px;
  display: inline-grid; place-items: center; font-family: 'Outfit', 'Cairo', sans-serif; font-size: 12px; font-weight: 700; line-height: 1;
  background: var(--warning); color: #fff; }
@media (max-width: 640px) {
  .tab-strip[data-strip="employees"] .tab-strip-rail {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 !important;
  }
  .tab-strip[data-strip="employees"] .tab-bar .tab-btn {
    min-width: 0 !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 10px 2px 11px !important;
    font-size: 13.5px;
    white-space: normal !important;
    text-align: center !important;
  }
  .tab-strip[data-strip="employees"] .tab-strip-count { min-width: 17px; height: 17px; padding: 0 4px; font-size: 11px; }
}

/* ── The Employees page's list contract (static/js/staff_list.js; TASK-2026-089, owner's walk 2026-09-30, item 5) ─────────────
   Every list and log on the page has the same bar above it (a search, its own filters, a date range where its rows have days,
   Clear) and the same pager under it (ten to a page). One block, so nine lists cannot look like nine things. A wide screen
   lays the bar out on one row; the search takes what is left; a narrow one wraps, and on a phone every control is a full row.
   Logical sides only. The Clear button and the "nothing matches" line are toggled with the `hidden` attribute, so each class
   that carries a `display` also carries its companion `[hidden]` rule; a row the pager leaves out carries `data-sl-off`, which
   no row class can outrank. */
.sl-wrap { margin-block: 0 10px; container-type: inline-size; }
/* A list that sits in a half-width section (the Leaves page's two columns) gets the bar inside its own padding, and the bar folds
   on the width of the place it is in, not the screen's: the search takes a row, then the filters and the dates share the next. */
.emp2-list > .sl-wrap { margin: 0; padding: 10px 14px; border-block-end: 1px solid var(--emp2-rule, var(--line)); }
@container (max-width: 900px) {
  .sl-search { flex: 1 1 100%; }
  .sl-bar select.sl-filter, .sl-date { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .sl-date .form-control { min-width: 0; flex: 1 1 auto; width: 100%; }
}
.sl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sl-bar .form-control { height: 38px; min-height: 38px; padding-block: 4px; font-size: 14px; width: auto; }
.sl-search { position: relative; flex: 1 1 220px; min-width: 180px; display: block; }
.sl-search > i { position: absolute; inset-block-start: 50%; inset-inline-start: 12px; translate: 0 -50%; color: var(--text-muted); font-size: 13px; pointer-events: none; }
.sl-search .form-control { width: 100%; padding-inline-start: 34px; }
.sl-bar select.sl-filter { flex: 0 1 180px; min-width: 130px; }
.sl-date { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.sl-date > span { line-height: 1.2; white-space: nowrap; }
.sl-date .form-control { min-width: 140px; }
.sl-clear { height: 38px; }
.sl-none { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 22px 16px; color: var(--muted); font-weight: 600; }
.sl-none[hidden] { display: none; }
.sl-foot { padding-inline: 4px; }
.sl-foot:empty { display: none; }
.sl-error { padding: 14px; }
[data-sl-off] { display: none !important; }
@media (max-width: 640px) {
  .sl-bar { flex-direction: column; align-items: stretch; }
  .sl-search, .sl-bar select.sl-filter { flex: 0 0 auto; width: 100%; }
  .sl-bar .form-control, .sl-date .form-control { width: 100%; }
  .sl-date { width: 100%; }
  .sl-clear { align-self: stretch; }
}

/* ── One honest cost of goods (TASK-2026-078, slices 3-4: the screens) ─────────────────────────────────────────────────
   Built from the owner's approved mockup (scratch/mockups/078-cogs-missing-cost.html, 95/100 on 2026-09-28, with its 6d and
   6e): the one line under a cost-of-goods figure, the (i) that carries every explanation, the price tag that says "no cost",
   and the page that lists the items without a cost. Its brand layer came from the 045 mockups; it lives here under the
   feature's own names. The --cogs-* tokens fall back to each theme's own accent and surfaces, and the two RetailPower themes
   carry the mockup's exact teal. Sizes are the mockup's pixels: the owner approved them at that size. */
:root {
  --cogs-fill: var(--accent-fill);
  --cogs-on-fill: var(--btn-primary-text);
  --cogs-line: var(--accent-gold);
  --cogs-text: var(--text-gold);
  --cogs-strong: var(--text-primary);
  --cogs-soft: var(--text-secondary);
  --cogs-surface: var(--accent-gold-bg);
  --cogs-surface-2: var(--bg-glass);
  --cogs-rule: var(--border-color);
  --cogs-card: var(--bg-card);
  --cogs-well: var(--bg-secondary);
  --cogs-ink: var(--text-primary);
  --cogs-ink-text: var(--bg-card);
  --cogs-summary: var(--bg-glass);
}
html[data-theme="retailpower"] {
  --cogs-fill: #2C6B78; --cogs-on-fill: #ffffff; --cogs-line: #2C6B78; --cogs-text: #034959;
  --cogs-strong: #034959; --cogs-soft: #2C5F6B; --cogs-surface: #D0EFF2; --cogs-surface-2: #EAF7F9; --cogs-rule: #C7E3E7;
  --cogs-card: #ffffff; --cogs-well: #F9F8F6; --cogs-ink: #034959; --cogs-ink-text: #ffffff; --cogs-summary: rgba(255, 255, 255, 0.5);
}
html[data-theme="retailpower-dark"] {
  --cogs-fill: #2C6B78; --cogs-on-fill: #ffffff; --cogs-line: #50B4BF; --cogs-text: #84D0D9;
  --cogs-strong: #D0EFF2; --cogs-soft: #A9DCE2; --cogs-surface: rgba(80, 180, 191, 0.13); --cogs-surface-2: rgba(80, 180, 191, 0.07);
  --cogs-rule: rgba(80, 180, 191, 0.28); --cogs-card: var(--bg-card); --cogs-well: var(--bg-secondary); --cogs-ink: #0E2A31; --cogs-ink-text: #ffffff;
  --cogs-summary: rgba(0, 0, 0, 0.14);
}
.cogs-num { font-family: 'Outfit', 'Cairo', sans-serif; font-variant-numeric: tabular-nums; }
.cogs-money { white-space: nowrap; }

/* the buttons of these screens: 15px and 44px tall */
.btn.cogs-fill, .btn.cogs-line { font-size: 15px; font-weight: 700; min-height: 44px; padding-block: 0; padding-inline: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; border-radius: 2px; }
.btn.cogs-fill { background: var(--cogs-fill); border: 1px solid var(--cogs-fill); color: var(--cogs-on-fill); }
.btn.cogs-fill:hover { filter: brightness(1.08); }
.btn.cogs-line { background: var(--cogs-card); border: 1px solid var(--cogs-line); color: var(--cogs-text); }
.btn.cogs-line:hover { background: var(--cogs-surface-2); }
.btn.cogs-fill:focus-visible, .btn.cogs-line:focus-visible, .cogs-link:focus-visible, .cogs-seg button:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.btn.cogs-fill[disabled], .btn.cogs-line[disabled] { opacity: .55; cursor: not-allowed; filter: none; }
.cogs-link { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; font-weight: 700; color: var(--cogs-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* the price tag: dashed and amber = no cost; filled = has a cost */
.cogs-tag { width: 44px; height: 44px; flex: none; display: block; }
.cogs-tag.is-sm { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; }

/* the (i): a small round button; its sentence opens on hover, on keyboard focus and on tap */
.cogs-i { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; margin: -6px 0; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--cogs-line); cursor: pointer; vertical-align: middle; font: inherit; line-height: 1; }
.cogs-i svg { width: 18px; height: 18px; display: block; }
.cogs-i svg circle { fill: transparent; stroke: currentColor; }
.cogs-i svg .cogs-i-dot, .cogs-i svg .cogs-i-stem { fill: currentColor; stroke: none; }
.cogs-i:hover svg circle { fill: var(--cogs-surface); }
.cogs-i.is-on svg circle { fill: var(--cogs-fill); stroke: var(--cogs-fill); }
.cogs-i.is-on svg .cogs-i-dot, .cogs-i.is-on svg .cogs-i-stem { fill: var(--cogs-on-fill); }
.cogs-i:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.cogs-i.is-warn { color: var(--warning); }
@media (pointer: coarse) { .cogs-i { width: 40px; height: 40px; margin: -12px -6px; } .cogs-i svg { width: 20px; height: 20px; } }
.cogs-tip[hidden] { display: none; }
.cogs-with-i { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cogs-bubble { position: fixed; z-index: 100001; top: 0; left: 0; box-sizing: border-box; max-width: min(340px, calc(calc(100 * var(--vw)) - 24px)); padding: 12px 14px;
  background: var(--cogs-ink); color: var(--cogs-ink-text); border: 1px solid var(--cogs-ink); border-radius: 2px; box-shadow: var(--shadow-float);
  font: 500 14px/1.75 'Cairo', sans-serif; pointer-events: none; text-align: start; }
html[data-theme="retailpower-dark"] .cogs-bubble { border-color: var(--cogs-rule); }
.cogs-bubble[hidden] { display: none; }
.cogs-bubble p { margin: 0; color: inherit; }
.cogs-bubble p + p { margin-top: 6px; }
.cogs-bubble .cogs-num, .cogs-bubble .cogs-money { color: inherit; }
/* the bubble's pointer is a drawn shape, so it keeps physical sides (it is placed by the pointer's own x in both directions) */
.cogs-bubble::before { content: ""; position: absolute; top: -5px; left: var(--cogs-ax, 50%); width: 8px; height: 8px; margin-left: -5px; background: inherit;
  border: inherit; border-width: 1px 0 0 1px; transform: rotate(45deg); }
.cogs-bubble.is-up::before { top: auto; bottom: -5px; border-width: 0 1px 1px 0; }

/* the missing-cost line, attached to the figures it qualifies (Finance Ledger, Month management) */
.cogs-miss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 18px 24px; margin: 0 0 16px;
  border: 1px solid var(--cogs-rule); border-radius: 2px; background: var(--cogs-card); }
.cogs-miss-text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cogs-miss-head { font-size: 17px; line-height: 1.5; font-weight: 700; color: var(--text); }
.cogs-miss.is-ok .cogs-miss-head { font-size: 16px; }
.cogs-miss .btn { white-space: nowrap; }
.cogs-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 16px 20px; margin: 0 0 16px;
  background: var(--cogs-card); border: 1px solid var(--line); border-inline-start: 3px solid var(--warning); border-radius: 2px; }
.cogs-note-ic { margin-top: 5px; color: var(--warning); }
.cogs-note-head { font-size: 15px; font-weight: 700; color: var(--text); }
.cogs-card-label { display: inline-flex; align-items: center; gap: 4px; }

/* the dashboard: the profit chart's footer line and the top sellers card's */
.dash-trend-uncosted { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px -20px -20px; padding: 14px 20px;
  border-top: 1px solid var(--line); background: var(--cogs-well); font-size: 14px; line-height: 1.7; color: var(--muted); }
.dash-trend-uncosted[hidden] { display: none; }
.dash-uncosted-count { flex: 1 1 260px; min-width: 0; }

/* ─────────── the items page (its own page, reached from the "See N items" buttons) ─────────── */
.cogs-page { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; font-size: 15px; }
.cogs-band { background: var(--cogs-surface); border: 1px solid var(--cogs-rule); border-radius: 2px; padding: 28px 32px 0; overflow: hidden; }
.cogs-band-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; }
.cogs-band-text { min-width: 0; flex: 1 1 360px; }
.cogs-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--cogs-soft); margin-bottom: 8px; }
.cogs-crumb a { color: var(--cogs-soft); text-decoration: none; }
.cogs-crumb a:hover { text-decoration: underline; }
.cogs-crumb i { font-size: 10px; }
html[dir="rtl"] .cogs-crumb i { transform: scaleX(-1); }
.cogs-h1 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 700; line-height: 1.35; color: var(--cogs-strong); }
.cogs-arch { flex: none; width: 26px; height: 16px; color: var(--cogs-line); }
.cogs-band-line { display: flex; align-items: flex-start; gap: 16px; margin-top: 14px; }
.cogs-band-line .cogs-tag { width: 40px; height: 40px; margin-top: 2px; }
.cogs-band-head { display: block; font-size: 18px; line-height: 1.55; color: var(--cogs-strong); font-weight: 700; }
.cogs-band-end-l { font-size: 13px; font-weight: 600; color: var(--cogs-soft); margin-bottom: 6px; display: block; }
.cogs-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 24px -32px 0; border-top: 1px solid var(--cogs-rule); background: var(--cogs-summary); }
.cogs-sum { display: flex; flex-direction: column; gap: 4px; padding: 16px 32px 18px; min-width: 0; }
.cogs-sum + .cogs-sum { border-inline-start: 1px solid var(--cogs-rule); }
.cogs-sum dt { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--cogs-soft); font-weight: 600; }
.cogs-sum dt .cogs-i { color: var(--cogs-soft); }
.cogs-sum dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-family: 'Outfit', 'Cairo', sans-serif; font-size: 26px; font-weight: 600; line-height: 1.3; color: var(--cogs-strong); }
.cogs-band .cogs-i { color: var(--cogs-soft); }
.cogs-band .cogs-band-line .cogs-i { color: var(--cogs-line); }

/* the period switch */
.cogs-seg { display: inline-flex; border: 1px solid var(--cogs-rule); border-radius: 2px; overflow: hidden; background: var(--cogs-card); }
.cogs-seg button { border: 0; background: var(--cogs-card); color: var(--muted); font: inherit; font-size: 15px; padding: 0 18px; height: 44px; cursor: pointer; }
.cogs-seg button + button { border-inline-start: 1px solid var(--cogs-rule); }
.cogs-seg button[aria-pressed="true"] { background: var(--cogs-fill); color: var(--cogs-on-fill); font-weight: 700; }

/* the progress bar in the header (6e) */
.cogs-prog { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.cogs-prog-l { font-size: 14px; font-weight: 600; color: var(--cogs-soft); }
.cogs-prog-bar { height: 10px; border-radius: 2px; background: var(--cogs-card); border: 1px solid var(--cogs-rule); overflow: hidden; }
.cogs-prog-fill { display: block; height: 100%; background: var(--cogs-fill); }

/* how it works: three short labels in order, joined by a chevron that points the reading way */
.cogs-steps { list-style: none; margin: 0; padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  background: var(--cogs-card); border: 1px solid var(--line); border-radius: 2px; }
.cogs-step { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.cogs-step + .cogs-step::before { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; color: var(--muted); margin-inline-end: 4px; }
html[dir="rtl"] .cogs-step + .cogs-step::before { transform: scaleX(-1); }
.cogs-step-ic { width: 36px; height: 36px; flex: none; box-sizing: border-box; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--cogs-line); color: var(--cogs-text); font-size: 14px; }

/* the list section: the biggest-first strip, the toolbar, the rows, the pager */
.cogs-sec { display: flex; flex-direction: column; gap: 16px; }
.cogs-big5 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 20px; background: var(--cogs-surface-2);
  border: 1px solid var(--cogs-rule); border-inline-start: 4px solid var(--cogs-line); border-radius: 2px; }
.cogs-big5-text { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 12px; }
.cogs-big5-head { font-size: 17px; line-height: 1.5; color: var(--cogs-strong); font-weight: 700; }
.cogs-big5-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--cogs-fill); color: var(--cogs-on-fill); font-size: 15px; }
.cogs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.cogs-search { position: relative; flex: 0 1 420px; min-width: 0; }
.cogs-search i { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 16px; color: var(--muted); font-size: 15px; pointer-events: none; }
.cogs-search input { width: 100%; box-sizing: border-box; height: 48px; font: inherit; font-size: 16px; padding-block: 0; padding-inline: 44px 16px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--cogs-card); color: var(--text); }
.cogs-search input:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.cogs-sort { margin: 0; font-size: 14px; color: var(--muted); }
.cogs-items { container-type: inline-size; background: var(--cogs-card); border: 1px solid var(--line); border-radius: 2px; }
.cogs-items-h { display: grid; grid-template-columns: 40px minmax(0, 1fr) 110px 170px 320px; gap: 0 20px; padding: 12px 24px; background: var(--cogs-well);
  border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
.cogs-items-h .is-n { text-align: end; }
.cogs-rows { list-style: none; margin: 0; padding: 0; }
.cogs-row { border-bottom: 1px solid var(--line); }
.cogs-row:last-child { border-bottom: 0; }
.cogs-row-main { display: grid; grid-template-columns: 40px minmax(0, 1fr) 110px 170px 320px; gap: 8px 20px; align-items: center; min-height: 64px; padding: 18px 24px; }
.cogs-row-main .cogs-tag { width: 40px; height: 40px; }
.cogs-row-id { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cogs-row-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 18px; font-weight: 700; line-height: 1.45; color: var(--text); }
.cogs-row-when { font-size: 14px; color: var(--muted); }
.cogs-fig { display: flex; flex-direction: column; align-items: flex-end; gap: 0; min-width: 0; }
.cogs-fig-v { font: 600 22px/1.3 'Outfit', 'Cairo', sans-serif; color: var(--text); white-space: nowrap; }
.cogs-fig-l { font-size: 13px; color: var(--muted); display: none; }
.cogs-row-acts { display: flex; gap: 10px; justify-content: flex-end; }
.cogs-row-acts .btn { height: 44px; padding: 0 16px; white-space: nowrap; }
.cogs-row.is-prod .cogs-row-main, .cogs-row.is-top .cogs-row-main, .cogs-row.is-edit .cogs-row-main { background: var(--cogs-surface-2); }
.cogs-row.is-top { box-shadow: inset 4px 0 0 var(--cogs-line); }
html[dir="rtl"] .cogs-row.is-top { box-shadow: inset -4px 0 0 var(--cogs-line); }
.cogs-top-n { font: 700 13px 'Outfit', 'Cairo', sans-serif; color: var(--cogs-strong); background: var(--cogs-surface); border: 1px solid var(--cogs-rule); border-radius: 2px; padding: 1px 8px; }
.cogs-pill { font-size: 13px; font-weight: 600; padding: 1px 8px; border-radius: 2px; background: var(--sunken); color: var(--muted); }
.cogs-pill.is-prod { background: var(--cogs-surface); color: var(--cogs-strong); }
.cogs-pill.is-gap { background: var(--warning-tint); color: var(--warning); }

/* the cost typed in the row itself (6d) */
.cogs-inl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cogs-inl-label { font-size: 13px; font-weight: 700; color: var(--text); margin: 0; text-transform: none; letter-spacing: normal; }
.cogs-inl-row { display: flex; gap: 8px; align-items: stretch; }
.cogs-inl-in { position: relative; flex: 1 1 140px; min-width: 0; }
.cogs-inl-in input { width: 100%; box-sizing: border-box; height: 44px; padding-block: 0; padding-inline: 12px 44px; font: 600 18px 'Outfit', 'Cairo', sans-serif;
  border: 2px solid var(--cogs-line); border-radius: 2px; background: var(--cogs-card); color: var(--text); }
.cogs-inl-in input:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.cogs-inl-unit { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 10px; font-size: 13px; font-weight: 600; color: var(--muted); pointer-events: none; }
.cogs-inl-x { width: 44px; height: 44px; flex: none; border: 1px solid var(--line); border-radius: 2px; background: var(--cogs-card); color: var(--muted); cursor: pointer; font-size: 16px; }
.cogs-inl-x:hover { background: var(--sunken); }
.cogs-inl-x:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.cogs-err { font-size: 13px; font-weight: 600; color: var(--danger); }
.cogs-err:empty { display: none; }
.cogs-after { margin: 0 24px 18px; margin-inline-start: 84px; display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.cogs-after:empty { display: none; }
.cogs-after-h { font-size: 14px; color: var(--muted); font-weight: 700; }
.cogs-effects { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 2px; background: var(--cogs-card); }
.cogs-effect { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.65; color: var(--text); }
.cogs-effect + .cogs-effect { border-top: 1px solid var(--line); }
.cogs-effect > i { margin-top: 5px; color: var(--cogs-line); text-align: center; }
.cogs-effect.is-lock { color: var(--muted); background: var(--cogs-well); }
.cogs-effect.is-lock > i { color: var(--muted); }

/* the spellings chip and its panel */
.cogs-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 2px; border: 1px solid var(--cogs-rule);
  background: var(--cogs-surface-2); color: var(--cogs-text); font: 600 13px 'Cairo', sans-serif; cursor: pointer; }
.cogs-chip:hover { background: var(--cogs-surface); }
.cogs-chip:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.cogs-chip i { font-size: 11px; }
.cogs-chip[aria-expanded="true"] i { transform: rotate(180deg); }
.cogs-spell { margin: 0 24px 18px; margin-inline-start: 84px; padding: 16px 20px; background: var(--cogs-well); border: 1px solid var(--line); border-radius: 2px;
  display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.cogs-spell-h { font-size: 14px; font-weight: 700; color: var(--text); }
.cogs-spell-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cogs-spell-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 180px; gap: 4px 20px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.cogs-spell-row:first-child { border-top: 0; padding-top: 0; }
.cogs-spell-n { font-size: 16px; font-weight: 700; color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cogs-spell-n q, .cogs-effect q { quotes: none; white-space: pre; }
.cogs-spell-q { font-size: 15px; color: var(--muted); white-space: nowrap; }
.cogs-spell .cogs-link { font-size: 14px; font-weight: 600; white-space: nowrap; }
.cogs-spell-main { font-size: 13px; color: var(--muted); white-space: nowrap; }

.cogs-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; font-size: 15px; color: var(--muted); }
.cogs-pager-nav { display: flex; align-items: center; gap: 12px; }
.cogs-pager .btn { height: 44px; min-width: 110px; }
.cogs-none { padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cogs-none-head { font-size: 17px; color: var(--text); font-weight: 700; }
.cogs-loading { padding: 24px; }

/* the toast with Undo */
.cogs-toast { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 100000; max-width: min(460px, calc(calc(100 * var(--vw)) - 32px));
  display: flex; gap: 12px; align-items: center; padding: 16px 20px; background: var(--cogs-fill); color: var(--cogs-on-fill); border-radius: 2px;
  box-shadow: var(--shadow-float); font-size: 15px; line-height: 1.6; }
.cogs-toast[hidden] { display: none; }
.cogs-undo { margin-inline-start: auto; flex: none; min-height: 36px; padding: 0 12px; border: 1px solid currentColor; border-radius: 2px; background: transparent; color: inherit;
  font: 700 15px 'Cairo', sans-serif; cursor: pointer; }
.cogs-undo:hover { background: var(--surface); }
.cogs-undo:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Make it a product: a small dialog over the page */
.modal-card.cogs-dlg { width: min(640px, calc(calc(100 * var(--vw)) - 32px)); max-width: none; container-type: inline-size; }
.cogs-dlg .modal-header h3 { font-size: 18px; }
.cogs-dlg .modal-body { display: flex; flex-direction: column; gap: 20px; padding: 24px; font-size: 15px; }
.cogs-dlg .modal-footer { padding: 16px 24px; gap: 12px; }
.cogs-dlg .modal-footer .btn { font-size: 15px; min-height: 44px; padding-inline: 18px; }
.cogs-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.cogs-field:first-child, .cogs-field.is-wide { grid-column: 1 / -1; }
.cogs-field.is-wide { padding-top: 16px; border-top: 1px solid var(--line); }
.cogs-field-lab { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.cogs-field-lab label, .cogs-field > label { display: inline-block; margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: normal; }
.cogs-field-lab label { margin: 0; }
.cogs-field input:not([type="checkbox"]), .cogs-field select { width: 100%; box-sizing: border-box; height: 48px; font: inherit; font-size: 16px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 2px; background-color: var(--cogs-card); color: var(--text); }
.cogs-field select { padding-inline-end: 36px; }   /* room for the dropdown arrow at the inline end */
/* the dialog rules of the app give a select its own field height later in this file; the slip keeps one height for all */
.cogs-dlg .cogs-field select, .cogs-dlg .cogs-field input:not([type="checkbox"]) { height: 48px; min-height: 48px; }
.cogs-field input.cogs-money-in { font-family: 'Outfit', 'Cairo', sans-serif; font-size: 22px; font-weight: 600; max-width: 260px; }
.cogs-opt { font-size: 13px; font-weight: 600; color: var(--muted); margin-inline-start: 8px; padding: 1px 8px; border-radius: 2px; background: var(--sunken); }
.cogs-field .cogs-err { display: block; margin-top: 8px; font-size: 14px; }

/* the list narrows: numbers go under the name, the two buttons share a row */
@container (max-width: 900px) {
  .cogs-items-h { display: none; }
  .cogs-row-main { grid-template-columns: 40px minmax(0, 1fr) auto auto; padding: 18px 20px; }
  .cogs-row-acts { grid-column: 2 / -1; justify-content: flex-start; }
  .cogs-fig-l { display: block; }
  .cogs-spell, .cogs-after { margin-inline-start: 80px; }
}
@container (max-width: 560px) {
  .cogs-row-main { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 16px; }
  .cogs-row-main .cogs-tag { width: 36px; height: 36px; align-self: start; }
  .cogs-row-id { grid-column: 2 / -1; }
  .cogs-fig { align-items: flex-start; }
  .cogs-fig.is-pcs { grid-column: 2; }
  .cogs-fig.is-val { grid-column: 3; }
  .cogs-fig-v { font-size: 19px; }
  .cogs-row-acts { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .cogs-row-acts .btn { padding: 0 10px; }
  .cogs-row-acts .btn i { display: none; }
  .cogs-row-acts .btn:only-child { grid-column: 1 / -1; }
  .cogs-row-acts.is-edit { display: block; }
  .cogs-row-name { font-size: 17px; }
  .cogs-spell { margin: 0 16px 16px; padding: 14px 16px; }
  .cogs-after { margin: 0 16px 16px; }
  .cogs-spell-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cogs-spell-row > :last-child { grid-column: 1 / -1; justify-self: start; }
}
@container (max-width: 540px) {
  .cogs-fields { grid-template-columns: minmax(0, 1fr); }
  .cogs-dlg .modal-footer { flex-wrap: wrap; }
  .cogs-dlg .modal-footer .btn { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .cogs-miss { padding: 16px; }
  .cogs-miss .btn { width: 100%; }
  .cogs-miss-head { font-size: 16px; }
  .cogs-page { gap: 16px; }
  .cogs-band { padding: 20px 16px 0; }
  .cogs-h1 { font-size: 22px; }
  .cogs-summary { margin: 20px -16px 0; grid-template-columns: minmax(0, 1fr); }
  .cogs-sum { padding: 12px 16px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .cogs-sum dd { font-size: 20px; }
  .cogs-sum + .cogs-sum { border-inline-start: 0; border-top: 1px solid var(--cogs-rule); }
  .cogs-steps { flex-direction: column; align-items: flex-start; padding: 14px 16px; }
  .cogs-step + .cogs-step::before { display: none; }
  .cogs-big5 { padding: 14px 16px; }
  .cogs-big5 .btn { width: 100%; }
  .cogs-band-line .cogs-tag { width: 32px; height: 32px; }
  .cogs-band-head { font-size: 16px; }
  .cogs-search { flex-basis: 100%; }
  .cogs-toast { inset-inline: 16px; }
}

/* ── The tab strip (spec 008, contracts/ui.md §1; static/js/tab_strip.js) ──────────────
   The look the owner approved on 2026-09-22 in mockup A, "Strip with arrows"
   (scratch/mockups/staff-employees-page.html), as the owner corrected it on 2026-09-24
   (scratch/mockups/staff-own-tabs.html): one line of tabs that share the whole width and never go
   narrower than their own name, a rail that scrolls sideways with no scrollbar showing when they do
   not fit, and a small arrow floating over each end that is shown only while there is more to see
   that way. It was a faded, dead box once its end was reached ("fix this"), and the two boxes took
   room the tabs could have filled.

   It sits ABOVE the Team Administration marker on purpose. Spec 007's own test reads everything
   between that marker and the "feature CSS lives ABOVE this line" marker as belonging to spec 007,
   so a block dropped in between would be claimed by it.

   Sides are logical throughout. The arrows are told apart by a `data-` attribute and by the glyph
   the module picks, never by `left`/`right`, so the strip reads correctly in Arabic without a
   mirrored rule. Nothing here is toggled with the `hidden` attribute except the strip as a whole,
   and that one carries a `display`, so it gets the companion rule — the 2026-09-09 trap. */
.tab-strip {
  position: relative;               /* the arrows float over the rail's two ends */
  display: flex;
  align-items: stretch;
  margin-block-end: 20px;
}
.tab-strip[hidden] { display: none; }

/* The rail is the app's own `.tab-bar`, so it keeps the underline look and the theme chrome. It
   gives up its bottom margin to the wrapper and is allowed to shrink below its content width —
   without `min-width: 0` a flex item refuses to go narrower than what is inside it and the arrows
   would be pushed off the page instead. */
.tab-strip .tab-strip-rail {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;            /* Firefox and the standard */
  -ms-overflow-style: none;
  margin-block-end: 0 !important;   /* beats `.tab-bar { margin-bottom: 20px !important }` */
}
.tab-strip .tab-strip-rail::-webkit-scrollbar { display: none; }  /* WebKit and Blink */

/* THIS IS AN `!important` RULE, and it cannot be avoided.
   `app.css:5646` gives every `.tab-btn` in the app `flex: 1 1 0% !important; width: 100%
   !important; min-width: 0 !important` — the full-width equal-distribution bar. That is exactly
   what squeezes seven labels until the words are clipped, and it is what this component exists to
   undo. An `!important` declaration can only be beaten by another `!important` declaration, so the
   value cannot be restored by a plain rule at any specificity. This one wins the way the cascade
   intends it to be won: same importance, higher specificity (0,3,0 against 0,1,0), and scoped to
   `.tab-strip` so it changes nothing anywhere else in the app.
   `flex: 1 0 auto`: each tab starts at its own width and the room left over is shared out, so the
   tabs fill the bar (owner, 2026-09-24: "make the tabs buttons bar fill the empty spaces"). Never
   shrinking is what `0` and `max-content` keep; when the tabs do not fit the rail scrolls instead. */
.tab-strip .tab-bar .tab-btn {
  flex: 1 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
}

/* The arrows float over the two ends of the rail rather than standing beside it, so they take no
   room from the tabs. Fixed width and `flex: none`, and no `display` of their own — a button
   centres its glyph already. An arrow that has nowhere left to go is hidden, not faded: the faded
   box at the end of the bar read as broken (owner, 2026-09-24). `visibility` keeps it out of the
   way of clicks as well as of sight, and changes no layout, so the rail never jumps. */
.tab-strip-arrow {
  position: absolute;
  inset-block: 0;
  z-index: 2;
  flex: none;
  width: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sunken);
  box-shadow: 0 0 12px 6px var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.tab-strip-arrow[data-strip-arrow="start"] { inset-inline-start: 0; }
.tab-strip-arrow[data-strip-arrow="end"] { inset-inline-end: 0; }
.tab-strip-arrow[disabled] {
  visibility: hidden;
  pointer-events: none;
}

/* ── Team Administration (spec 007) ───────────────────────────────────
   The look the owner approved on 2026-09-20 (scratch/mockups/team-administration-simple.html):
   one role dropdown, four ticks per screen, plain group bands, one save bar, one quiet line for who
   else may manage permissions. Less of everything was the brief, and it is the brief here too.

   The tick is the whole screen: 28 px so a thumb can reach it on the shop's touch machine, gold when
   the role holds it, a blue dot outside the top corner when it is not what the app shipped with, and
   a dashed outline OUTSIDE the circle while it is changed and unsaved. The outline sits outside on
   purpose — a dashed border would have to fight the gold fill for the same pixels, and in every one
   of the five themes the warning colour is within a shade of the gold.

   A tick nobody may change is disabled and stays visible, with the reason in its title. That is the
   2026-09-16 rule: hiding a control teaches nothing, and the same person may be given the permission
   later. Nothing here is toggled with the `hidden` attribute, so nothing here sets an explicit
   `display` — the 2026-09-09 trap. Sides are logical, so the table reads the same way in Arabic. */
/* Since spec 046 (TASK-2026-089) the roles are a row of buttons and the pages are laid out as area cards; the folding list of
   feature 008 and its role dropdown are gone, and their rules with them. The cards are the perm2- block below the Employment
   tab's emp2- block. What stays here is what every line of a card is made of. */
.perm-sec { padding-top: 8px; }
.perm-sec-title {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700; padding: 4px 0;
}
.perm-line { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.perm-line-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.84rem; }

.ta-tick {
  position: relative; width: 28px; height: 28px; min-width: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--sunken);
  color: transparent; font-size: 0.85rem; line-height: 1; cursor: pointer; padding: 0;
}
.ta-tick.is-on { background: var(--brand); border-color: var(--fill-hover); color: var(--bg); }
.ta-tick.is-changed { outline: 2px dashed var(--teal-400); outline-offset: 2px; }
.ta-tick.is-differs::after {
  content: ''; position: absolute; top: -3px; inset-inline-end: -3px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--teal-700); border: 2px solid var(--surface);
}
.ta-tick:disabled { cursor: not-allowed; opacity: 0.55; }
/* What somebody else changed, told afterwards rather than asked beforehand. A warning stripe down
   the logical start, the way every other notice in the app marks itself. */
.ta-notices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ta-notice {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-inline-start: 3px solid var(--warning);
  border-radius: var(--radius); background: var(--sunken); font-size: 0.82rem;
}
.ta-notice-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.ta-notice-text small { color: var(--muted); font-size: 0.74rem; }
.ta-notice-mark { font-size: 0.9rem; }

.ta-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ta-chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: 2px; padding: 4px 14px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.ta-chip.is-on { background: var(--brand); border-color: var(--fill-hover); color: var(--bg); }
.ta-chip:disabled { cursor: not-allowed; opacity: 0.55; }
.ta-save-bar {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 16px; padding: 10px 14px; border: 1px solid var(--brand);
  border-radius: var(--radius); background: var(--surface); font-size: 0.84rem;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.18);
}
.ta-save-spacer { flex: 1 1 auto; }

/* Who else may manage permissions: one line under the table, the way the mockup draws it. */
.ta-delegate-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; font-size: 0.82rem; color: var(--muted);
}
.ta-key { font-size: 0.9rem; }
.ta-delegate-line .form-control { width: auto; min-width: 170px; height: 30px; font-size: 0.78rem; }

/* The panel is the container the action row folds against. Its own width, never the screen's:
   the site-wide fold at 1100px is keyed on the window, so a narrow panel inside a wide laptop
   would never fold and a wide panel inside a narrow one would fold when it did not need to. */
.ta-person { margin-top: 16px; container-type: inline-size; }

/* THE WHOLE ROW IS THE CONTROL (mockup B, D8; FR-013). The dotted-underlined button that used to
   sit inside the first cell is gone, class and all: the `<tr>` itself carries `data-member`/`data-person`,
   `role="button"`, `tabindex="0"` and `aria-expanded`, so there is nothing small to aim at and
   the keyboard reaches the same toggle the mouse does. */
.ta-person-row { cursor: pointer; }
.ta-person-row:hover td { background: var(--tint); }
/* `:focus-visible`, not `:focus`: a mouse press must not leave a ring behind (app.css trap 9).
   `outline-offset` is negative so the ring is drawn inside the row and the table below it does
   not shift. */
.ta-person-row:focus-visible {
  outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width));
}
.ta-person-row.is-selected { background: var(--tint); }
/* The open row says how to shut it again, as the mockup draws it. Quiet, inline beside the name,
   and not a control of its own — a second button inside the cell would fire the row handler too. */
.ta-open-mark { color: var(--text-muted); font-size: 0.72rem; margin-inline-start: 8px; }
.ta-exception-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.ta-exception-add .form-control { max-width: 260px; }
.ta-exception-add #ta-exception-reason { flex: 1 1 200px; max-width: none; }

/* ── Recruitment & Employment ────────────────────────────────────────────────
   A status pill, a checklist and a timeline. The checkbox is square and the permission tick is
   round on purpose: one records that a thing was done, the other grants a power, and they must not
   be mistaken for each other on a screen that shows both. A step past its day is marked in the
   warning colour on the date rather than on the whole row, because a late filing is one fact about
   the step and not a judgement on the person. */
.ta-counts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ta-count { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted); }

.ta-person-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
/* ONE EVEN ROW OF BUTTONS (mockup B, D9; FR-014). `grid-auto-flow: column` with
   `grid-auto-columns: 1fr` gives every button the same slice of the row however many there are and
   however long their words, which is what the owner approved — and it is why Edit details could
   stop being a lone `.btn-sm` underneath and become an equal member of the row.

   It was `flex; flex-wrap: wrap`, and every `.btn` carries a 132px floor (app.css ~11899, the
   owner's decision of 2026-09-21 that stops a toolbar stepping). Four buttons at 132px each wrapped
   onto two ragged lines. That floor is NOT loosened anywhere: `min-width: 0` here is scoped to the
   buttons of this row, a higher specificity than the global rule, so nothing else in the app
   changes. Without it a grid item refuses to go narrower than its own minimum content and the row
   overflows instead of sharing itself out.

   The buttons grow taller rather than clipping, because Arabic sets these labels appreciably wider
   than English and "Days of pay charged per unexcused absence" is long in both. */
.ta-person-actions {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 8px; margin-bottom: 8px;
}
.ta-person-actions .btn {
  min-width: 0; white-space: normal; height: auto; min-height: 42px; line-height: 1.3;
}
/* On a narrow panel four equal columns are four unreadable slivers, so the row becomes a column.
   Keyed on `.ta-person`, the panel's own width. */
@container (max-width: 620px) {
  .ta-person-actions { grid-auto-flow: row; grid-auto-columns: auto; }
}

.ta-steps { display: flex; flex-direction: column; margin-bottom: 8px; }
.ta-step {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 0.84rem;
}
.ta-step-name { display: flex; flex-direction: column; gap: 1px; }
.ta-step-when { margin-inline-start: auto; font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.ta-step-when.is-late { color: var(--warning); font-weight: 600; }
.ta-box {
  width: 20px; height: 20px; min-width: 20px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--sunken);
  color: var(--bg); font-size: 0.72rem; line-height: 1; cursor: pointer; padding: 0;
}
.ta-box.is-done { background: var(--success); border-color: var(--success); }

.ta-events { display: flex; flex-direction: column; }
.ta-event {
  display: flex; align-items: baseline; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--line); font-size: 0.82rem;
}
.ta-event.is-corrected { opacity: 0.55; text-decoration: line-through; }
.ta-event-when { min-width: 110px; color: var(--muted); font-size: 0.76rem; }
.ta-event-what { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.ta-law-note { margin-top: 12px; }

/* The settlement: numbers at the logical end, tabular figures so the columns line up, and the
   typed lines in the same table as the computed ones so the owner reads one list and not two. */
.ta-settlement { margin-top: 16px; }
.ta-money td { padding: 7px 12px; }
.ta-money .ta-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ta-money tr.ta-total td { background: var(--sunken); border-top: 1px solid var(--line); }
.ta-num-input { max-width: 130px; text-align: end; }
.ta-money .form-control { height: 30px; font-size: 0.82rem; }
.ta-notice.is-late { border-inline-start-color: var(--danger); }

.ta-history { margin-top: 16px; }
.ta-panel-title {
  margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700;
}
.ta-quiet { color: var(--muted); font-size: 0.82rem; }

/* ── The Employment tab, drawn as mockup 046-m2 (spec 046 US6, TASK-2026-089) ──────────────────
   Built from the approved mockup (scratch/mockups/046-m2-employment.html and its 046-brand.css and
   045-brand.css): a teal header band, then one list of people with one next step each, and the
   person's details opening under their row. Since revision (b) (mockup 046b-m2, TASK-2026-089) the
   band holds six stage tiles and the people are cards (the block "Employment, revision (b)" below);
   the path of dots that stood here is gone with its rules. The mockup's
   e- and ot- classes live here as emp2-, the name its own stylesheet gave them. Sizes are the
   mockup's pixels, because the owner approved them at that size.

   The --emp2-* tokens fall back to each theme's own accent and surfaces; the two RetailPower themes
   carry the mockup's exact teal (the cost-of-goods precedent, TASK-2026-078). Nothing here is
   toggled with the `hidden` attribute, and every side is logical except the "just ended" bar,
   which is a drawn shape and says its side in both directions. */
:root {
  --emp2-fill: var(--accent-fill);
  --emp2-on-fill: var(--btn-primary-text);
  --emp2-line: var(--accent-gold);
  --emp2-text: var(--text-gold);
  --emp2-strong: var(--text-primary);
  --emp2-soft: var(--text-secondary);
  --emp2-mid: var(--accent-gold);
  --emp2-frost: var(--accent-gold-bg);
  --emp2-surface: var(--accent-gold-bg);
  --emp2-surface-2: var(--bg-glass);
  --emp2-rule: var(--border-color);
  --emp2-card: var(--bg-card);
  --emp2-well: var(--bg-secondary);
  --emp2-summary: var(--bg-glass);
  --emp2-label: var(--text-muted);
}
html[data-theme="retailpower"] {
  --emp2-fill: #2C6B78; --emp2-on-fill: #ffffff; --emp2-line: #2C6B78; --emp2-text: #034959;
  --emp2-strong: #034959; --emp2-soft: #2C5F6B; --emp2-mid: #50B4BF; --emp2-frost: #D0EFF2;
  --emp2-surface: #D0EFF2; --emp2-surface-2: #EAF7F9; --emp2-rule: #C7E3E7;
  --emp2-card: #ffffff; --emp2-well: #F9F8F6; --emp2-summary: rgba(255, 255, 255, 0.5); --emp2-label: #4A5E72;
}
html[data-theme="retailpower-dark"] {
  --emp2-fill: #2C6B78; --emp2-on-fill: #ffffff; --emp2-line: #50B4BF; --emp2-text: #84D0D9;
  --emp2-strong: #D0EFF2; --emp2-soft: #A9DCE2; --emp2-mid: #50B4BF; --emp2-frost: #D0EFF2;
  --emp2-surface: rgba(80, 180, 191, 0.13); --emp2-surface-2: rgba(80, 180, 191, 0.07); --emp2-rule: rgba(80, 180, 191, 0.28);
  --emp2-card: var(--bg-card); --emp2-well: var(--bg-secondary); --emp2-summary: rgba(0, 0, 0, 0.14); --emp2-label: #C9C4BD;
}

.emp2-tab { display: flex; flex-direction: column; gap: 20px; font-size: 15px; color: var(--text); --text-muted: var(--emp2-label); }
.emp2-num { font-family: 'Outfit', 'Cairo', sans-serif; font-variant-numeric: tabular-nums; }
.emp2-tab .btn[aria-disabled="true"], .emp2-drawer .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* the header band */
.emp2-band { background: var(--emp2-surface); border: 1px solid var(--emp2-rule); border-radius: 2px; padding: 24px 32px 0; overflow: hidden; }
.emp2-band-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.emp2-band-text { min-width: 0; flex: 1 1 360px; }
.emp2-h1 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 700; line-height: 1.35; color: var(--emp2-strong); }
.emp2-h1 .info-tip { margin-inline-start: 0; align-self: center; }
.emp2-arch { flex: none; width: 26px; height: 16px; color: var(--emp2-line); }
.emp2-band-end { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.emp2-band-end .btn-primary { background: var(--emp2-fill); border-color: var(--emp2-fill); color: var(--emp2-on-fill); }


/* the list: spacious rows, not a dense table */
.emp2-list { background: var(--emp2-card); border: 1px solid var(--line); border-radius: 2px; }
.emp2-list-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.emp2-list-h h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; }
.emp2-list-h small { font-size: 13px; color: var(--muted); font-weight: 500; }
.emp2-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--emp2-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.emp2-link:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.emp2-cols, .emp2-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(170px, auto);
  align-items: center; gap: 4px 20px; padding: 0 24px; }
.emp2-cols { min-height: 40px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--emp2-well); }
.emp2-cols .emp2-end { text-align: end; }
.emp2-row { min-height: 72px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 15px; }
.emp2-row:last-child { border-bottom: 0; }
.emp2-row:hover { background: var(--emp2-surface-2); }
.emp2-row.is-open { background: var(--emp2-surface-2); border-bottom-color: transparent; }
.emp2-row.is-new { box-shadow: inset 3px 0 0 var(--emp2-fill); }
html[dir="rtl"] .emp2-row.is-new { box-shadow: inset -3px 0 0 var(--emp2-fill); }
.emp2-act { display: flex; justify-content: flex-end; gap: 8px; }
.emp2-act .btn { min-width: 112px; justify-content: center; }
.emp2-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.emp2-who > div { min-width: 0; display: flex; flex-direction: column; }
.emp2-who b { font-size: 15px; font-weight: 700; line-height: 1.4; }
.emp2-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--emp2-surface); color: var(--emp2-strong); border: 1px solid var(--emp2-rule); }
.emp2-av.is-off { background: var(--sunken); color: var(--text-muted); border-color: var(--line); }
.emp2-date { font-size: 14px; color: var(--text); }
.emp2-sub { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; font-family: 'Cairo', sans-serif; }
.emp2-sub.emp2-owed { color: var(--warning); }
.emp2-quiet { font-size: 13px; color: var(--muted); }
.emp2-inline { display: inline-flex; align-items: center; gap: 6px; }
.emp2-inline .info-tip { margin-inline-start: 0; }
.emp2-amt { white-space: nowrap; }

/* a stage's word: colour, icon and word together */
.emp2-stage { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.emp2-stage i { font-size: 11px; }
.emp2-stage.is-active { color: var(--success); }
.emp2-stage.is-probation, .emp2-stage.is-hired_not_started { color: var(--emp2-text); }
.emp2-stage.is-on_notice { color: var(--warning); }
.emp2-stage.is-left { color: var(--text-muted); }
.emp2-stage.is-suspended { color: var(--danger); }

/* a button that stays on the screen and says who may use it (spec 046 US2 scenario 3) */
.emp2-locked { display: inline-flex; align-items: center; gap: 8px; }
.btn.emp2-btn-end { color: var(--danger); border: 1px solid var(--line); background: var(--emp2-card); font-weight: 700; }
.btn.emp2-btn-end:hover:not([aria-disabled="true"]) { border-color: var(--danger); background: var(--danger-tint); }
.emp2-tab .btn.emp2-btn-end[aria-disabled="true"], .emp2-drawer .btn.emp2-btn-end[aria-disabled="true"] { color: var(--text-muted); border-color: var(--line); background: var(--surface); opacity: 1; }

@media (max-width: 640px) {
  .emp2-tab { gap: 16px; }
  .emp2-band { padding: 18px 16px 0; }
  .emp2-h1 { font-size: 20px; }
  .emp2-band-end { width: 100%; }
  .emp2-band-end > * { flex: 1 1 auto; }
  .emp2-list-h { padding: 14px 16px; }
  .emp2-cols { display: none; }
  .emp2-row { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; gap: 8px 12px; min-height: 0; }
  .emp2-row > * { grid-column: 1 / -1; }
  .emp2-row > .emp2-who { grid-column: 1; }
  .emp2-row > .emp2-first { grid-column: 2; grid-row: 1; justify-self: end; }
  .emp2-act { justify-content: stretch; }
  .emp2-act > * { flex: 1 1 auto; }
  .emp2-act .btn { width: 100%; }
  .emp2-locked { width: 100%; }
  .emp2-locked .btn { flex: 1 1 auto; }
}

/* ── The Permissions tab, drawn as mockup 046-m4 (spec 046 US3, FR-009, SC-003; TASK-2026-089) ─────────────────────────
   Built from the approved mockup (scratch/mockups/046-m4-permissions.html and its 046-brand.css): the teal header band with
   the roles as a row of buttons, then one card per area in a grid across the width — 2 columns on a small computer, 3 from
   1100 px, 4 from 1400 px, 1 below 700 px — then the line of what exists today, then the dark save bar while anything is
   unsaved. The mockup's e- classes live here as perm2-, and the band reuses the Employment tab's emp2- band. Sizes are the
   mockup's pixels, because the owner approved them at that size.

   Every tick is still the `.ta-tick` button the page has always had — the same key, the same pending set, the same disabled
   state and title — restyled inside the grid as the mockup's square box on a 28 px target, and a page's door to the menu is
   the same button drawn as the mockup's switch. Nothing here is toggled with the `hidden` attribute, and every side is
   logical: the switch's knob moves from the start edge to the end edge, which is the right way round in both languages. */
:root {
  --perm2-ink: var(--accent-fill);
  --perm2-on-ink: var(--btn-primary-text);
  --perm2-flash: var(--accent-gold-bg);
}
html[data-theme="retailpower"], html[data-theme="retailpower-dark"] {
  --perm2-ink: #034959;
  --perm2-on-ink: #ffffff;
}
/* The drawing's flash of a line jumped to (revision (b)): the brand's light teal, softened on the dark theme. */
html[data-theme="retailpower"] { --perm2-flash: #84D0D9; }
html[data-theme="retailpower-dark"] { --perm2-flash: rgba(132, 208, 217, .35); }

.perm2-tab { display: flex; flex-direction: column; gap: 20px; font-size: 15px; color: var(--text); --text-muted: var(--emp2-label); }
.perm2-band { padding-bottom: 22px; }
.perm2-band .emp2-band-end .btn-neutral { background: var(--emp2-card); }
.perm2-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.perm2-role { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--emp2-rule); border-radius: 2px; background: var(--emp2-card); color: var(--emp2-strong); }
.perm2-role small { font-family: 'Outfit', 'Cairo', sans-serif; font-size: 12px; color: var(--emp2-soft); font-weight: 600; }
.perm2-role i { font-size: 11px; }
.perm2-role[aria-pressed="true"] { background: var(--emp2-fill); border-color: var(--emp2-fill); color: var(--emp2-on-fill); }
.perm2-role[aria-pressed="true"] small { color: var(--emp2-on-fill); opacity: .85; }
.perm2-role:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.perm2-legend { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.perm2-legend i { font-size: 11px; }
.perm2-legend .info-tip, .perm2-inline .info-tip, .perm2-tab .perm-line-name .info-tip, .perm2-save .info-tip { margin-inline-start: 0; }
.perm2-inline { display: inline-flex; align-items: center; gap: 6px; }
/* TASK-2026-089 (owner 2026-09-29): the chosen person was clipped to dots in the closed picker; give it room to show. */
.perm2-inline #ta-delegate-pick { height: auto; min-height: 36px; min-width: 200px; padding-block: 6px; line-height: 1.5; color: var(--text); }
/* TASK-2026-189 review M2: the Permissions tab's own Give to someone picker keeps the closed picker's room (its id differs from the window's). */
.perm2-inline #ta-delegate-pick-tab { height: auto; min-height: 36px; min-width: 200px; padding-block: 6px; line-height: 1.5; color: var(--text); }

/* ── Revision (b): the cards that open a window (spec 046 US3, RS9, T089; mockup 046b-m4b; TASK-2026-089) ─────────────────
   Ported from the approved drawing (scratch/mockups/046b-perm.css, "B, revision (d)" and "the columns"): its pb- and pk- classes
   live here as perm2-, its --b- and --ot- tokens as the --emp2- tokens. Six area cards in the shared card grid (emp2-card-grid
   is-3: three a row, two on a tablet, one on a phone); the line of quick filters joined under the band and pinned to the top
   while the page scrolls; the window of one area — 1080 px, at most 82% of the screen tall, the whole screen on a phone — with a
   one-line header, the filters under it, one column per page without a frame or a fill (set apart by space and a rule under
   each title), 30 px lines, and the save bar in its foot. Nothing here is toggled with the `hidden` attribute; every side is
   logical, and the switch's knob moves from the start edge to the end edge in both languages. */
.perm2-band { padding-bottom: 8px; border-bottom: 0; }
.perm2-tab > .perm2-qdock { position: sticky; top: 0; z-index: 20; margin-top: -20px; padding: 10px 32px 0; box-sizing: border-box;
  background: linear-gradient(var(--emp2-surface), var(--emp2-surface)), var(--bg); border: 1px solid var(--emp2-rule); border-top: 0;
  border-radius: 0 0 2px 2px; }
.perm2-tab > .perm2-qdock .perm2-qsearch { padding: 0 0 18px; }
.perm2-qsearch.is-inert { opacity: .55; }
.perm2-qbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; }
.perm2-qfilters { display: flex; flex-wrap: wrap; gap: 8px; }
.perm2-qchip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; color: var(--text); background: var(--emp2-card); border: 1px solid var(--emp2-rule); border-radius: 2px; white-space: nowrap; }
.perm2-qchip bdi { font-size: 12.5px; color: var(--muted); min-width: 16px; text-align: center; }
.perm2-qchip i { font-size: 11px; }
.perm2-qchip:hover { border-color: var(--emp2-line); }
.perm2-qchip[aria-pressed="true"] { background: var(--emp2-fill); border-color: var(--emp2-fill); color: var(--emp2-on-fill); }
.perm2-qchip[aria-pressed="true"] bdi { color: var(--emp2-on-fill); opacity: .85; }
.perm2-qchip:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.perm2-qstatus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0 0; font-size: 14px; color: var(--emp2-strong); }
.perm2-qstatus > i { color: var(--emp2-line); font-size: 12px; }
.perm2-qstatus > span:first-of-type { font-weight: 700; }
.perm2-qstatus-by { color: var(--emp2-soft); }

/* the six cards: the area, "18/30" with its bar, "2 changed" */
.emp2-card-grid.perm2-cards { gap: 14px; }
.perm2-card.is-dim { opacity: .55; }
.perm2-card .perm2-card-fig { min-width: 64px; }
.perm2-card .emp2-card-foot .perm2-chg { font-size: 13px; }
.perm2-card .emp2-card-foot .perm2-match { font-size: 12.5px; padding: 1px 8px; }
.perm2-meter { display: block; height: 6px; background: var(--sunken); border-radius: 2px; overflow: hidden; }
.perm2-meter i { display: block; height: 100%; background: var(--emp2-mid); border-radius: 2px; }
.emp2-card-body .perm2-meter { flex: 1 1 auto; min-width: 48px; background: var(--emp2-surface); }
.perm2-chg { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.perm2-chg.is-zero { color: var(--text-muted); font-weight: 500; }
.perm2-match { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--emp2-strong); background: var(--emp2-surface);
  padding: 2px 8px; border-radius: 2px; white-space: nowrap; }
.perm2-match.is-zero { color: var(--text-muted); background: var(--sunken); font-weight: 600; }
.perm2-frac { font-family: 'Outfit', 'Cairo', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; }

/* the window of one area */
.modal-overlay.perm2-overlay { padding: 20px; }
.modal-card.perm2-win { display: flex; flex-direction: column; width: min(1080px, calc(calc(100 * var(--vw)) - 64px)); max-width: none; height: min(calc(82 * var(--vh)), 780px);
  max-height: none; border-radius: 2px; overflow: hidden; background: var(--emp2-card); font-size: 15px; color: var(--text);
  --text-muted: var(--emp2-label); }
.modal-card.perm2-win .modal-header { flex: none; gap: 14px; padding: 12px 20px; align-items: center; background: var(--emp2-card); border-bottom: 1px solid var(--line); }
.modal-card.perm2-win .modal-header h3 { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 700; }
.modal-card.perm2-win .modal-header .emp2-card-ic { width: 32px; height: 32px; font-size: 13px; background: var(--emp2-fill); color: var(--emp2-on-fill); }
.perm2-win-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.perm2-win-counts .perm2-frac { font-size: 15px; }
.perm2-win-counts .perm2-meter { width: 88px; background: var(--emp2-surface); }
.perm2-win .perm2-qdock { flex: none; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--emp2-card); }
.perm2-win .perm2-qchip { height: 34px; padding: 0 11px; font-size: 13px; }
.perm2-win .perm2-qstatus { margin-top: 8px; font-size: 13px; }
.modal-card.perm2-win .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 20px 6px; background: var(--emp2-card); }
.modal-card.perm2-win .modal-footer { flex: none; padding: 10px 20px; gap: 10px; border-top: 1px solid var(--line); }
.modal-card.perm2-win .modal-footer .perm2-save { position: static; flex: 1 1 auto; box-shadow: none; padding: 10px 16px; }

/* one column per page: its switch on top, its ticks below (Q11) */
.perm2-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); grid-auto-rows: 4px; column-gap: 28px; align-items: start; }
.perm2-col { min-width: 0; }
.perm2-col.is-span { grid-column: span 2; }
.perm2-col.is-found > .perm2-col-in { outline: 2px solid var(--emp2-fill); outline-offset: 3px; }
.perm2-col-in.is-flash { background: var(--emp2-surface); }
.perm2-col-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 4px 0 7px; border-bottom: 1px solid var(--line); }
.perm2-col-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.perm2-col-t h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.45; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.perm2-col-t h3 .info-tip { margin-inline-start: 0; }
.perm2-col-t > span { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.perm2-col-t .perm2-frac { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.perm2-col.is-off .perm2-col-t h3 { color: var(--text-muted); }
.perm2-col.is-pending .perm2-col-t h3 { color: var(--emp2-strong); }
.perm2-from { font-size: 11.5px; font-weight: 700; padding: 0 6px; border-radius: 2px; color: var(--emp2-strong); background: var(--emp2-surface-2); }
.perm2-lines { padding: 4px 0 2px; }
.perm2-col.is-span .perm2-lines { columns: 2; column-gap: 10px; }
.perm2-win .perm-line.perm2-line, .perm2-other { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 2px; border-radius: 2px; break-inside: avoid; }
.perm2-other { justify-content: space-between; gap: 10px; min-height: 36px; font-size: 13.5px; color: var(--text); }
.perm2-other > span { display: inline-flex; align-items: center; gap: 6px; }
.perm2-win .perm2-line.is-found, .perm2-other.is-found { background: var(--emp2-surface); box-shadow: inset 0 0 0 2px var(--emp2-fill); }
.perm2-win .perm2-line.is-flash, .perm2-other.is-flash { background: var(--perm2-flash); }
.perm2-win .perm2-line .info-tip, .perm2-exc .info-tip { margin-inline-start: 0; }

/* the tick is the whole line: its box, then its name */
.perm2-win .ta-tick.perm2-tick { flex: 1 1 auto; min-width: 0; width: auto; height: auto; min-height: 30px; display: flex; align-items: center; gap: 9px;
  padding: 3px 0; margin: 0; border: 0; border-radius: 2px; background: none; font: inherit; font-size: 13.5px; line-height: 1.45; color: var(--text);
  text-align: start; cursor: pointer; outline: 0; }
.perm2-win .ta-tick.perm2-tick.is-differs::after { content: none; }
.perm2-win .ta-tick.perm2-tick:disabled { opacity: 1; cursor: default; }
.perm2-win .ta-tick.perm2-tick:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.perm2-box { flex: none; width: 18px; height: 18px; box-sizing: border-box; display: grid; place-items: center; border: 1.5px solid var(--emp2-label);
  border-radius: 2px; background: var(--emp2-card); color: var(--emp2-on-fill); font-size: 10.5px; }
.perm2-box i { visibility: hidden; }
.perm2-tick[aria-pressed="true"] .perm2-box { background: var(--emp2-fill); border-color: var(--emp2-fill); }
.perm2-tick[aria-pressed="true"] .perm2-box i { visibility: visible; }
.perm2-tick:hover:not([disabled]) .perm2-box { border-color: var(--emp2-fill); }
.perm2-name { min-width: 0; }
.perm2-line.is-locked .perm2-tick { color: var(--muted); }
.perm2-line.is-locked .perm2-tick[aria-pressed="true"] .perm2-box { background: var(--sunken); border-color: var(--line); color: var(--text-muted); }
.perm2-line.is-waiting .perm2-tick { color: var(--text-muted); }
.perm2-line.is-waiting .perm2-box { border-style: dashed; background: transparent; }
.perm2-line.is-pending .perm2-tick { color: var(--emp2-strong); font-weight: 700; }
.perm2-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--info); display: inline-block; }
.perm2-lock { flex: none; font-size: 11px; color: var(--text-muted); }
.perm2-exc { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding-inline: 7px 4px; font-size: 11.5px; font-weight: 700;
  color: var(--emp2-strong); border: 1px dashed var(--emp2-line); border-radius: 2px; white-space: nowrap; }
.perm2-exc i { font-size: 10px; }
.perm2-warn { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; padding: 8px 10px; font-size: 12.5px; line-height: 1.6; color: var(--text);
  background: var(--warning-tint); border-radius: 2px; }
.perm2-warn > i { color: var(--warning); }
.perm2-warn .info-tip { margin-inline-start: 2px; }
.perm2-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 0 4px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--muted); }
.perm2-scope label { flex: none; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: normal; }
.perm2-win select.perm2-select { flex: 1 1 120px; min-width: 0; width: auto; height: 32px; min-height: 32px; padding-block: 0; padding-inline: 8px 26px; margin: 0;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text); background-color: var(--emp2-card); border: 1px solid var(--line); border-radius: 2px; }
.perm2-win select.perm2-select:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.perm2-scope.is-pending select.perm2-select { border-color: var(--emp2-fill); color: var(--emp2-strong); }
.perm2-nomatch { display: flex; align-items: center; gap: 8px; margin: 0; padding: 18px 4px; font-size: 14px; color: var(--muted); }

/* the search: the one bold element of the page (RS10, T093; the drawing's ps- classes) */
.perm2-qanchor { position: relative; min-width: 0; }
.perm2-qbox { display: flex; align-items: center; gap: 12px; height: 52px; padding-inline: 16px 10px; box-sizing: border-box;
  background: var(--emp2-card); border: 1px solid var(--emp2-rule); border-radius: 2px; }
.perm2-qbox > i { color: var(--emp2-line); font-size: 16px; flex: none; }
.perm2-qbox:focus-within { border-color: var(--emp2-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--emp2-fill) 22%, transparent); }
.perm2-qbox input.perm2-qinput { flex: 1 1 auto; min-width: 0; width: auto; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; outline: 0; border-radius: 0;
  box-shadow: none; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.perm2-qbox input.perm2-qinput:focus { border: 0; box-shadow: none; outline: 0; background: transparent; }
.perm2-qinput::placeholder { color: var(--text-muted); opacity: 1; }
.perm2-qclear { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 2px; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 15px; }
.perm2-qclear:hover { background: var(--sunken); color: var(--text); }
.perm2-qclear:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.perm2-qkbd { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; box-sizing: border-box;
  font-family: 'Outfit', 'Cairo', sans-serif; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--sunken);
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 2px; direction: ltr; }
.perm2-qbox:focus-within .perm2-qkbd { display: none; }

/* the list under the box */
.perm2-qdrop { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 60; max-height: min(calc(64 * var(--vh)), 540px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--emp2-card); border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--shadow-float); text-align: start; }
.perm2-qdrop:empty { display: none; }
.perm2-qgroup + .perm2-qgroup { border-top: 1px solid var(--line); }
.perm2-qgroup-h { display: flex; align-items: center; gap: 8px; padding: 10px 16px 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.perm2-qgroup-h span { font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; color: var(--text-muted); }
.perm2-qopt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 7px 16px; box-sizing: border-box; cursor: pointer;
  border-inline-start: 3px solid transparent; }
.perm2-qopt:hover { background: var(--emp2-surface-2); }
.perm2-qopt.is-active { background: var(--emp2-surface); border-inline-start-color: var(--emp2-fill); }
.perm2-qopt-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 2px; background: var(--emp2-surface-2);
  color: var(--emp2-strong); font-size: 13px; }
.perm2-qopt.is-active .perm2-qopt-ic { background: var(--emp2-card); }
.perm2-qopt-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.perm2-qopt-t b { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.5; }
.perm2-qopt-t small { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.perm2-qsep { color: var(--text-muted); }
.perm2-qopt mark { padding: 0 1px; }
.perm2-qend { flex: none; display: inline-flex; align-items: center; gap: 10px; }
.perm2-qend-t { flex: none; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.perm2-qend-t.is-on { color: var(--emp2-strong); }
.perm2-qend-t .perm2-frac { font-size: 13px; font-weight: 600; color: var(--muted); }
.perm2-qgo { flex: none; color: var(--emp2-line); font-size: 13px; }
.perm2-qopt-all { min-height: 44px; font-size: 14px; font-weight: 700; color: var(--emp2-strong); border-top: 1px solid var(--line); gap: 10px; }
.perm2-qopt-all span { flex: 1 1 auto; }
.perm2-qopt-all bdi { font-weight: 600; color: var(--muted); }
.perm2-qkeys { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 16px; border-top: 1px solid var(--line);
  background: var(--emp2-well); font-size: 12.5px; color: var(--muted); }
.perm2-qkeys .info-tip { margin-inline-start: 0; }
.perm2-qnone { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 20px; }
.perm2-qnone > i { grid-row: span 2; font-size: 20px; color: var(--text-muted); margin-top: 3px; }
.perm2-qnone b { font-size: 15px; color: var(--text); }
.perm2-qnone-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.perm2-qswitch { position: relative; flex: none; width: 34px; height: 20px; padding: 0; border-radius: 10px; box-sizing: border-box; cursor: pointer;
  background: var(--sunken); border: 1px solid var(--emp2-label); }
.perm2-qswitch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.perm2-qswitch.is-on { background: var(--emp2-fill); border-color: var(--emp2-fill); }
.perm2-qswitch.is-on::after { inset-inline-start: auto; inset-inline-end: 2px; }
.perm2-qswitch[disabled] { cursor: default; }
.perm2-qswitch[disabled]:not(.is-on) { opacity: .6; }
.perm2-win .perm2-qbox { height: 40px; }
.perm2-win .perm2-qbox input.perm2-qinput { font-size: 15px; }

/* the person being read */
.perm2-person { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 20px; background: var(--emp2-card);
  border: 1px solid var(--emp2-rule); border-inline-start: 4px solid var(--emp2-fill); border-radius: 2px; }
.perm2-person > div { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.perm2-person b { font-size: 16px; color: var(--text); }
.perm2-person > div > span { font-size: 14px; color: var(--muted); }
.perm2-person .emp2-av { width: 36px; height: 36px; font-size: 14px; }
.perm2-win .perm2-person { margin-bottom: 14px; }

/* a page's door to the menu, as the drawn switch */
.perm2-win .ta-tick.perm2-switch { position: relative; flex: none; width: 40px; height: 24px; min-width: 40px; margin: 0; padding: 0; border-radius: 12px;
  box-sizing: border-box; cursor: pointer; background: var(--sunken); border: 1px solid var(--emp2-label); color: transparent; outline: 0; }
.perm2-win .ta-tick.perm2-switch > span { display: none; }
.perm2-win .ta-tick.perm2-switch::before { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.perm2-win .ta-tick.perm2-switch.is-on { background: var(--emp2-fill); border-color: var(--emp2-fill); }
.perm2-win .ta-tick.perm2-switch.is-on::before { inset-inline-start: auto; inset-inline-end: 3px; }
.perm2-win .ta-tick.perm2-switch.is-differs::after { content: none; }
.perm2-win .ta-tick.perm2-switch.is-changed { outline: 0; }
.perm2-win .ta-tick.perm2-switch:disabled { opacity: 1; cursor: default; }
.perm2-win .ta-tick.perm2-switch:disabled:not(.is-on) { opacity: .6; }
.perm2-win .ta-tick.perm2-switch:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }

/* under the grid: who manages permissions, exceptions per person, the change record */
.ta-delegate-line.perm2-foot { margin: 0; gap: 10px 24px; padding: 16px 20px; background: var(--emp2-card); border: 1px solid var(--line);
  border-radius: 2px; font-size: 14px; color: var(--muted); }
.perm2-foot i { font-size: 13px; }
.perm2-foot .form-control { width: auto; min-width: 170px; height: 32px; font-size: 13px; }

/* the dark save bar */
.ta-save-bar.perm2-save { position: sticky; bottom: 16px; margin: 0; gap: 10px 16px; padding: 14px 20px; border: 0; border-radius: 2px;
  background: var(--perm2-ink); color: var(--perm2-on-ink); box-shadow: var(--shadow-float); }
.perm2-save .ta-save-count { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.perm2-save .btn.perm2-save-discard { color: var(--perm2-on-ink); border: 1px solid rgba(255, 255, 255, .45); background: transparent; }
.perm2-save .btn.perm2-save-go { background: #fff; color: var(--perm2-ink); border: 0; font-weight: 700; }

@media (max-width: 640px) {
  .perm2-tab { gap: 16px; }
  .perm2-roles { gap: 6px; }
  .perm2-role { height: 36px; padding: 0 10px; font-size: 13px; }
  .perm2-legend { margin-inline-start: 0; }
  .ta-delegate-line.perm2-foot { padding: 14px 16px; }
  .ta-save-bar.perm2-save { bottom: 8px; padding: 12px 14px; }
  .perm2-save .btn { flex: 1 1 auto; }
  /* revision (b): the filters above the box, three equal buttons; the window fills the screen with one column */
  .perm2-qbox { height: 48px; padding-inline: 12px 6px; gap: 10px; }
  .perm2-qkbd { display: none; }
  .perm2-qdrop { max-height: calc(62 * var(--vh)); }
  .perm2-qopt { padding: 8px 12px; gap: 10px; }
  .perm2-qopt-ic, .perm2-qend-t, .perm2-qkeys { display: none; }
  .perm2-person { padding: 12px 14px; }
  .perm2-person .btn { flex: 1 1 auto; }
  .perm2-tab > .perm2-qdock { padding: 8px 16px 0; }
  .perm2-tab > .perm2-qdock .perm2-qsearch { padding: 0 0 14px; }
  .perm2-qfilters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .perm2-qbar .perm2-qfilters { order: -1; }
  .perm2-qchip { height: auto; min-height: 44px; padding: 6px; flex-direction: column; justify-content: center; gap: 0; font-size: 12.5px;
    white-space: normal; text-align: center; line-height: 1.35; }
  .perm2-qchip i { display: none; }
  .perm2-cols { grid-template-columns: minmax(0, 1fr); }
  .perm2-col.is-span .perm2-lines { columns: 1; }
  .modal-overlay.perm2-overlay { padding: 0; }
  .modal-card.perm2-win { width: 100%; height: 100%; margin: 0; border-radius: 0; border: 0; }
  .modal-card.perm2-win .modal-header { padding: 12px 16px; flex-wrap: wrap; }
  .modal-card.perm2-win .modal-header h3 { font-size: 17px; }
  .perm2-win-counts { order: 3; flex-basis: 100%; }
  .perm2-win .perm2-qdock { padding: 10px 16px; }
  .perm2-win .perm2-qchip { height: auto; min-height: 40px; padding: 4px 6px; font-size: 12.5px; }
  .modal-card.perm2-win .modal-body { padding: 12px 16px 2px; }
  .modal-card.perm2-win .modal-footer { padding: 10px 12px; }
}
@media (max-width: 1199px) {
  .perm2-qbar { grid-template-columns: minmax(0, 1fr); }
}

/* ── The Payroll tab, drawn as mockup 046-m5 (spec 046 US4, FR-010, SC-004; TASK-2026-089) ─────────────────────────────
   Built from the approved mockup (scratch/mockups/046-m5-payroll.html, 046-brand.css, 045-brand.css): the teal band with the
   month, the three large figures (total to pay, paid, still owed) and the bar of how much is paid. Revision (b) (mockup
   046b-m5, RS5, T074): the Salaries | Commissions switch under the band's title, the payday chip at its end, and one card per
   person (the shared emp2-card) instead of the rows; the band's figures follow the switch. The band and the dialog reuse the
   Employment tab's emp2- classes; what is the payroll's own is pay2-. Sizes are the mockup's pixels. Nothing here is toggled
   with the `hidden` attribute; the bar fills from the logical start edge. */
.pay2-select { font: inherit; font-size: 14px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--emp2-card); color: var(--text); min-width: 0; width: auto; }
.pay2-band .emp2-band-end { align-items: center; }

/* the three figures, across the band's foot */
.pay2-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 24px -32px 0; padding: 0;
  border-top: 1px solid var(--emp2-rule); background: var(--emp2-summary); }
.pay2-sum { display: flex; flex-direction: column; gap: 4px; padding: 16px 32px 18px; min-width: 0; }
.pay2-sum + .pay2-sum { border-inline-start: 1px solid var(--emp2-rule); }
.pay2-sum dt { font-size: 13px; color: var(--emp2-soft); font-weight: 600; }
.pay2-sum dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: 'Outfit', 'Cairo', sans-serif;
  font-size: 26px; font-weight: 600; line-height: 1.3; color: var(--emp2-strong); }
.pay2-sum.is-big dd { font-size: clamp(26px, calc(2.7 * var(--vw)), 36px); line-height: 1.15; }
.pay2-sum dd .emp2-cur { font-family: 'Cairo', sans-serif; font-size: 15px; font-weight: 600; color: var(--emp2-soft); }
.pay2-sum.is-paid dd { color: var(--success); }
.pay2-sum.is-owed dd { color: var(--danger); }
.pay2-sum-sub { font-size: 13px; color: var(--emp2-soft); }
.pay2-paidbar { display: flex; align-items: center; gap: 14px; padding: 12px 32px 16px; border-top: 1px solid var(--emp2-rule);
  font-size: 13px; color: var(--emp2-soft); }
.pay2-bar { position: relative; flex: 1 1 auto; height: 10px; min-width: 60px; border-radius: 2px; background: var(--sunken); overflow: hidden; }
.pay2-bar > span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 2px; background: var(--success); }

/* the band's end: the month and the commission payday (mockup 046b-m5 `sep30`; TASK-2026-089 RS5) */
.pay2-payday { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--emp2-strong); background: var(--emp2-card); border: 1px solid var(--emp2-rule); border-radius: 2px; cursor: pointer; white-space: nowrap; }
.pay2-payday > i { color: var(--emp2-line); font-size: 13px; }
.pay2-payday:hover { border-color: var(--emp2-line); }
.pay2-payday:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.pay2-payday.is-static { cursor: default; background: transparent; border-color: transparent; padding: 0 4px; }
.pay2-payday.is-static:hover { border-color: transparent; }
.pay2-payday.is-static > i { color: var(--text-muted); }
.pay2-payday .info-tip { margin-inline-start: 0; }
@media (min-width: 641px) { .pay2-band .emp2-band-end:has(.pay2-payday) { flex-wrap: nowrap; white-space: nowrap; } }

/* the switch: Salaries | Commissions. The side that is on is filled and ticked; each side says how many are unpaid. The
   tick is shown by `aria-pressed`, never by the `hidden` attribute. */
/* TASK-2026-089 (owner's walk 2026-09-30, item 6): the switch spans its row and each half takes an equal share, so it sits centred
   on the screen at any width; a flex row with a width, no `hidden` involved. */
.pay2-kind { display: flex; width: 100%; box-sizing: border-box; gap: 4px; margin-top: 20px; padding: 4px; background: var(--emp2-card); border: 1px solid var(--emp2-rule); border-radius: 2px; }
.pay2-kind-b { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 10px; height: 46px; min-width: 0; padding: 0 18px;
  box-sizing: border-box; font: inherit; font-size: 16px; font-weight: 600; color: var(--emp2-soft); background: transparent; border: 0;
  border-radius: 2px; cursor: pointer; white-space: nowrap; box-shadow: none; }
.pay2-kind-b > i { font-size: 15px; color: var(--emp2-line); }
.pay2-kind-b:hover { background: var(--emp2-surface-2); color: var(--emp2-strong); }
.pay2-kind-b:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.pay2-kind-b[aria-pressed="true"] { background: var(--emp2-fill); color: var(--emp2-on-fill); font-weight: 700; cursor: default; }
.pay2-kind-b[aria-pressed="true"] > i { color: var(--emp2-on-fill); }
.pay2-kind-tick { display: none; flex: none; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #fff; font-size: 10px; }
.pay2-kind-tick i { color: var(--emp2-fill); }
.pay2-kind-b[aria-pressed="true"] .pay2-kind-tick { display: inline-grid; }
.pay2-kind-n { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 2px;
  font-family: 'Outfit', 'Cairo', sans-serif; font-size: 13px; font-weight: 700; line-height: 1; background: var(--emp2-surface); color: var(--emp2-strong); }
.pay2-kind-b[aria-pressed="true"] .pay2-kind-n { background: rgba(255, 255, 255, 0.22); color: var(--emp2-on-fill); }
.pay2-kind-n.is-due, .pay2-kind-b[aria-pressed="true"] .pay2-kind-n.is-due { background: var(--warning); color: #fff; }
.pay2-kind-done { display: inline-flex; color: var(--success); font-size: 13px; }
.pay2-kind-b[aria-pressed="true"] .pay2-kind-done { color: var(--emp2-on-fill); }

/* the figures follow the switch; a commission not yet due is not late, so its "Still owed" is the brand colour, not red */
.pay2-sum.is-later dd { color: var(--emp2-strong); }
.pay2-sum.is-nil dd { color: var(--emp2-soft); }
.pay2-sum .emp2-due { font-size: 13px; }
.pay2-alldone { display: inline-flex; align-items: center; gap: 8px; height: 38px; font-size: 14px; font-weight: 700; color: var(--success); }

/* the commission's own marks on a card: shape + colour + word */
.emp2-due.is-today { color: var(--warning); }
.emp2-none { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.emp2-none i { font-size: 12px; }
.emp2-dash { font-family: 'Outfit', 'Cairo', sans-serif; color: var(--text-muted); }

/* the held confirmation: the days with no record, each a chip */
.pay2-held-l { font-size: 14px; font-weight: 700; color: var(--text); }
.pay2-days { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pay2-day { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; font-size: 14px; font-weight: 700; color: var(--warning);
  background: var(--warning-tint); border: 1px solid var(--warning); border-radius: 2px; white-space: nowrap; }
.pay2-owed-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 2px; font-size: 13px; color: var(--emp2-soft); }

/* Pay all (mockup 046b-m5 `allsal`, `allcom`; RS7): the head's count, then the window's people with who is left out */
.emp2-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 2px;
  font-family: 'Outfit', 'Cairo', sans-serif; font-size: 12.5px; font-weight: 700; background: var(--emp2-surface); color: var(--emp2-strong); line-height: 1; }
.modal-card.emp2-dlg.pay2-all-win { width: min(560px, calc(calc(100 * var(--vw)) - 32px)); }
.pay2-people { border: 1px solid var(--emp2-rule); border-radius: 2px; background: var(--emp2-card); }
.pay2-people-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: var(--emp2-surface);
  border-bottom: 1px solid var(--emp2-rule); }
.pay2-people-h b { font-size: 15px; color: var(--emp2-strong); }
.pay2-people-h > div > span { font-size: 13px; color: var(--emp2-soft); display: block; }
.pay2-people-h > div > span.emp2-due { display: inline-flex; margin-top: 2px; color: var(--emp2-text); }
.pay2-people-h .emp2-owed-big { font-size: 28px; }
.pay2-people ul { list-style: none; margin: 0; padding: 4px 18px 8px; max-height: calc(40 * var(--vh)); overflow-y: auto; }
.pay2-people li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.pay2-people li:last-child { border-bottom: 0; }
.pay2-people li .emp2-who { gap: 10px; }
.pay2-people li .emp2-av { width: 30px; height: 30px; font-size: 13px; }
.pay2-people li .emp2-who b { font-size: 14px; }
.pay2-people li .emp2-amt { font-size: 15px; }
.pay2-people-out { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 18px 12px; border-top: 1px solid var(--line);
  background: var(--emp2-well); font-size: 13px; color: var(--muted); }
.pay2-people-out .pay2-paid { font-size: 13px; }
.pay2-people-out b { color: var(--text); }
@media (max-width: 640px) {
  .pay2-people-h, .pay2-people ul { padding-inline: 14px; }
  .pay2-people-h { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pay2-people-h .emp2-owed-big { font-size: 26px; }
}

/* the payday window (mockup 046b-m5 `setting`; RS6): the day beside "of the next month", then the next due day it gives */
.pay2-dayfield { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.emp2-dlg .pay2-dayfield select.emp2-input { width: 110px; flex: none; height: 44px; font-size: 16px; font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; }
.pay2-dayfield span { font-size: 15px; color: var(--text); }
.pay2-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; background: var(--emp2-surface-2);
  border: 1px solid var(--emp2-rule); border-radius: 2px; font-size: 14px; color: var(--emp2-soft); }
.pay2-preview i { color: var(--emp2-line); }
.pay2-preview b { margin-inline-start: auto; font-size: 15px; font-weight: 700; color: var(--emp2-strong); }

.pay2-cell-label { display: none; }
.pay2-paid { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pay2-paid i { font-size: 12px; }
.pay2-paid.is-yes { color: var(--success); }
.pay2-paid.is-no { color: var(--danger); }
.pay2-paid.is-block { color: var(--warning); }
.pay2-paid .info-tip { margin-inline-start: 0; }

.emp2-lines .emp2-quiet { font-family: 'Cairo', sans-serif; font-weight: 500; }

@media (max-width: 640px) {
  .pay2-sum.is-big dd { font-size: 26px; }
  .pay2-summary { margin: 18px -16px 0; }
  .pay2-sum { padding: 14px 16px 16px; }
  .pay2-sum + .pay2-sum { border-inline-start: 0; border-top: 1px solid var(--emp2-rule); }
  .pay2-paidbar { padding: 12px 16px 14px; }
  .pay2-band .emp2-band-end > .pay2-select { flex: 1 1 auto; }
  .pay2-cell-label { display: inline; font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 500; color: var(--muted); }
  .pay2-band .emp2-band-end .pay2-payday { flex: 1 1 100%; justify-content: center; }
  .pay2-kind { display: flex; width: 100%; box-sizing: border-box; margin-top: 16px; }
  .pay2-kind-b { flex: 1 1 0; min-width: 0; height: 44px; padding: 0 6px; gap: 6px; font-size: 15px; }
  .pay2-kind-tick { width: 16px; height: 16px; font-size: 9px; }
  .pay2-kind-b > i.fa-money-bill-wave, .pay2-kind-b > i.fa-percent { display: none; }
  .emp2-dlg .emp2-owed-h { flex-direction: column; align-items: flex-start; gap: 4px; }
  .emp2-dlg .emp2-owed-h .emp2-owed-big { font-size: 26px; }
}

/* ── The Leaves tab, drawn as mockup 046-m6 (spec 046 US5, FR-011; TASK-2026-089) ───────────────────────────────────────
   Built from the approved mockup (scratch/mockups/046-m6-leaves.html and its 046-brand.css): the teal band with Record a
   leave and three figures (requests waiting, off today, leave days this month — the band's figures are the payroll's
   pay2-summary, which is the mockup's one summary strip); then the requests waiting beside who is off today, the annual
   balance as bars, and the leave already recorded. The band, lists, rows and dialog reuse the emp2- classes; what is the
   Leaves tab's own is lv2-. Sizes are the mockup's pixels. Nothing here is toggled with the `hidden` attribute; every bar
   fills from the logical start edge. */
.lv2-two { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.lv2-req { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: center; padding: 18px 24px;
  border-bottom: 1px solid var(--line); }
.lv2-req:last-child { border-bottom: 0; }
.lv2-req-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.lv2-req-when b { color: var(--text); font-weight: 700; }
.lv2-req-acts { display: flex; gap: 8px; }
.lv2-req-acts .btn { min-width: 96px; justify-content: center; }
.lv2-req-acts .btn-primary { background: var(--emp2-fill); border-color: var(--emp2-fill); color: var(--emp2-on-fill); }
.lv2-off { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.lv2-off:last-child { border-bottom: 0; }
.lv2-off > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lv2-off b { font-size: 15px; font-weight: 700; line-height: 1.4; }
.lv2-off > div > span { font-size: 13px; color: var(--muted); }
.lv2-empty { padding: 18px 24px; }
.lv2-empty .emp2-quiet { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }

/* the annual balance, one bar a person */
.lv2-bal { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(0, 2fr) auto; align-items: center; gap: 8px 20px;
  padding: 14px 24px; border-bottom: 1px solid var(--line); }
.lv2-bal:last-child { border-bottom: 0; }
.lv2-bal.is-new { background: var(--emp2-surface-2); }
.lv2-bal .n { font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; font-size: 15px; white-space: nowrap; text-align: end; }
.lv2-bal .n small { font-family: 'Cairo', sans-serif; font-weight: 500; font-size: 13px; color: var(--muted); }
.lv2-bal .n.is-over { color: var(--danger); }
.lv2-bal .n.lv2-unset { font-family: 'Cairo', sans-serif; font-size: 13px; color: var(--muted); justify-content: flex-end; justify-self: end; }
.lv2-bar { position: relative; height: 10px; min-width: 60px; border-radius: 2px; background: var(--sunken); overflow: hidden; }
.lv2-bar > span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 2px; background: var(--emp2-mid); }
.lv2-bar.is-strong > span { background: var(--emp2-fill); }
.lv2-bar.is-met > span { background: var(--success); }
.lv2-bar.is-low > span { background: var(--warning); }

/* the kind of leave, as a word on a tint */
.lv2-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 2px; font-size: 12px; font-weight: 700;
  white-space: nowrap; background: var(--emp2-surface); color: var(--emp2-strong); }
.lv2-tag.is-muted { color: var(--muted); background: var(--sunken); }
.lv2-tag.is-refused { color: var(--danger); background: var(--danger-tint); }

/* the leave already recorded */
@media (min-width: 641px) {
  .lv2-log-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.6fr) auto; }
}
.staff-pager { padding: 12px 24px; }

/* a segmented choice (the mockup's e-seg): the kind of leave, requested or approved; the kind of adjustment */
.emp2-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--emp2-card); }
.emp2-seg button { height: 36px; padding: 0 14px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 14px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-radius: 0; box-shadow: none; }
.emp2-seg button + button { border-inline-start: 1px solid var(--line); }
.emp2-seg button[aria-pressed="true"] { background: var(--emp2-surface); color: var(--emp2-strong); font-weight: 700; }
.emp2-seg button:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }

@media (max-width: 1000px) {
  .lv2-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .lv2-req { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .lv2-req-acts .btn { flex: 1 1 0; }
  .lv2-off { padding: 12px 16px; }
  .lv2-empty { padding: 16px; }
  .lv2-bal { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 16px; }
  .lv2-bal .lv2-bar { grid-column: 1 / -1; grid-row: 2; }
  .lv2-log-row .pay2-cell { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
  .staff-pager { padding: 12px 16px; }
  .emp2-seg { width: 100%; }
  .emp2-seg button { flex: 1 1 auto; justify-content: center; padding: 0 6px; }
}

/* ── The Adjustments tab, drawn as mockup 046-m7 (spec 046 US5, FR-012; TASK-2026-089) ──────────────────────────────────
   Built from the approved mockup (scratch/mockups/046-m7-adjustments.html and its 046-brand.css): the teal band with Add and
   the month's three totals, the filters (month, and the type as a segmented choice with the count of what is shown), then one
   list of bonuses, deductions and advances. A kind is told apart by colour, icon and word: a bonus green with a plus, a
   deduction red with a minus, an advance amber with two arrows. The band, list, rows and dialog reuse the emp2- and pay2-
   classes; what is the tab's own is adj2-. Sizes are the mockup's pixels; logical sides only. */
.adj2-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.adj2-field { display: flex; align-items: center; gap: 8px; }
.adj2-field label, .adj2-filter-l { font-size: 13px; font-weight: 600; color: var(--muted); }
.adj2-spacer { flex: 1 1 auto; }
.adj2-result { font-size: 13px; color: var(--muted); }
@media (min-width: 641px) {
  .adj2-cols, .adj2-row { grid-template-columns: minmax(0, 1.7fr) minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.7fr) minmax(0, .9fr) auto; }
}
.adj2-row .n { text-align: end; font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; font-size: 16px; }
.adj2-kind { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 2px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.adj2-kind.is-plus { color: var(--success); background: var(--success-tint); }
.adj2-kind.is-minus { color: var(--danger); background: var(--danger-tint); }
.adj2-kind.is-adv { color: var(--warning); background: var(--warning-tint); }
.adj2-amt { display: inline-flex; align-items: center; gap: 6px; font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; white-space: nowrap; }
.adj2-amt i { font-size: 13px; }
.adj2-amt.is-plus { color: var(--success); }
.adj2-amt.is-minus { color: var(--danger); }
.adj2-amt.is-adv { color: var(--warning); }
/* in a row the currency mark is the amount's own size and colour; in the band it is the band's quiet 14 px mark */
.adj2-row .adj2-amt .emp2-cur { font-family: 'Cairo', sans-serif; font-size: inherit; font-weight: 600; color: inherit; }
.adj2-band .pay2-sum dd .emp2-cur { font-size: 14px; }
.emp2-act .btn.adj2-icon-btn { min-width: 36px; width: 36px; padding: 0; color: var(--muted); justify-content: center; }
.emp2-act .btn.adj2-icon-btn:hover { color: var(--danger); }
@media (max-width: 640px) {
  .adj2-filters { gap: 10px; }
  .adj2-field { flex: 1 1 100%; justify-content: space-between; }
  .adj2-field .pay2-select { flex: 1 1 auto; }
  .adj2-spacer { display: none; }
  .adj2-row .n { text-align: start; }
  .adj2-row .pay2-cell { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
  .emp2-act .btn.adj2-icon-btn { width: 100%; }
}

/* ── The Commissions tab, drawn as mockup 046-m8 (spec 046 US5, FR-013; TASK-2026-089) ──────────────────────────────────
   Built from the approved mockup (scratch/mockups/046-m8-commissions.html and its 046-brand.css): the teal band with the
   month and, for somebody who may see pay terms, three figures (total commission, paid, not paid yet); then one card per
   salesperson read top to bottom: the person, the month's sales, the target bar (green once met, teal before, amber under
   half) with its share, and the commission earned with its mark. A commission not paid yet is an amber top edge, a tinted
   footer and "Not paid" with an empty circle; paid is a filled green circle. The per-sale commission column of "Recent sales"
   is not built (commission is monthly). The band, marks and bars reuse emp2-, pay2- and lv2-; what is the tab's own is com2-. */
.com2-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; }
.com2-card { display: flex; flex-direction: column; min-width: 0; background: var(--emp2-card); border: 1px solid var(--line); border-radius: 2px; cursor: pointer; }
.com2-card:hover { background: var(--emp2-surface-2); }
.com2-card:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.com2-card.is-unpaid { border-color: var(--warning); box-shadow: inset 0 3px 0 var(--warning); }
.com2-h { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; }
.com2-h > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* a name too long to sit beside "Target met" moves the mark under it instead of running into it */
.com2-h { flex-wrap: wrap; }
.com2-h > div { min-width: min(100%, 8ch); }
.com2-h b { overflow-wrap: anywhere; }
.com2-h b { font-size: 16px; font-weight: 700; line-height: 1.4; }
.com2-h > div > span { font-size: 13px; color: var(--muted); }
.com2-sales { display: flex; flex-direction: column; gap: 8px; padding: 0 20px 16px; }
.com2-row2 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--muted); }
.com2-row2 > b { font-family: 'Outfit', 'Cairo', sans-serif; font-size: 21px; font-weight: 600; color: var(--text); }
.com2-row2 .com2-pct { font-size: 15px; color: var(--text); }
.com2-f { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px;
  border-top: 1px solid var(--line); background: var(--emp2-well); }
.com2-card.is-unpaid .com2-f { background: var(--warning-tint); }
.com2-f dl { margin: 0; display: flex; flex-direction: column; }
.com2-f dt { order: 2; font-size: 12.5px; color: var(--muted); }
.com2-f dd { order: 1; margin: 0; font-family: 'Outfit', 'Cairo', sans-serif; font-size: 22px; font-weight: 600; color: var(--text); }
.com2-f dd .emp2-cur { font-family: 'Cairo', sans-serif; font-size: 13px; color: var(--muted); }
.com2-lines, .com2-recent { padding: 0; }
@media (max-width: 640px) {
  .com2-cards { grid-template-columns: minmax(0, 1fr); }
  .com2-band .emp2-band-end > .pay2-select { flex: 1 1 auto; }
}

/* ── Empty states, drawn as mockup 046-m9 (spec 046 FR-015, T035; TASK-2026-089) ──────────────────────────────────────
   Built from the approved mockup (scratch/mockups/046-m9-empty-states.html and the e-empty rules of its 046-brand.css): the
   dashed bag of spec 045's "add" door beside a short title whose (i) holds the explanation, and one next-step button under
   it. Built by static/js/staff_empty.js for Employment, Leaves, Adjustments, Commissions, Payroll and a Permissions role
   nobody holds. Nothing here is toggled with the `hidden` attribute; the only sides are logical. */
.emp2-empty { background: var(--emp2-card); border: 1px solid var(--line); border-radius: 2px; padding: 40px 32px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 32px; align-items: center; }
.emp2-empty-bag { display: block; flex: none; width: 96px; height: 110px; color: var(--emp2-line); }
.emp2-empty h3 { margin: 0 0 16px; font-size: 19px; font-weight: 700; line-height: 1.5; color: var(--text); }
.emp2-empty h3:last-child { margin-block-end: 0; }
.emp2-empty-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.emp2-empty-act .btn-primary { background: var(--emp2-fill); border-color: var(--emp2-fill); color: var(--emp2-on-fill); }
@media (max-width: 640px) {
  .emp2-empty { grid-template-columns: minmax(0, 1fr); padding: 24px 16px; justify-items: start; }
  .emp2-empty-bag { width: 64px; height: 74px; }
}
/* Revision (b), T099 (TASK-2026-089): the same empty state in the card look of Payroll, Employment and Permissions — one dashed
   card (the shared card's `is-none`) in the card grid's first place: the bag in its top band, the title with its (i), the
   one step in its foot. */
.emp2-empty.is-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 16px; padding: 0; background: transparent;
  border: 0; border-radius: 0; align-items: stretch; }
.emp2-empty-card .emp2-card-top { padding-top: 16px; }
.emp2-empty-card .emp2-empty-bag { width: 44px; height: 50px; }
.emp2-empty-card .emp2-card-body { justify-content: flex-start; padding-top: 10px; }
.emp2-empty-card h3 { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.45; color: var(--text); }
.emp2-empty-card .emp2-card-foot.emp2-empty-act { justify-content: flex-start; }
.emp2-empty-card .emp2-card-foot .btn { min-height: 32px; }
@media (max-width: 640px) {
  .emp2-empty.is-card { grid-template-columns: minmax(0, 1fr); padding: 0; }
}
/* TASK-2026-089 (owner's walk 2026-09-30, item 8): an empty tab's one button stands centred on the row, the first time the tab
   is drawn and every time its list empties again — both come through `staffEmpty`, so one rule holds for both. The row look is a
   centred column (the bag when there is one, the title with its (i), the button); the card look takes the whole row too, and
   centres what is in it. Item 7 (`is-plain`): no bag at all. The only sides are logical; nothing here is toggled with `hidden`. */
.emp2-empty:not(.is-card) { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-inline: 32px; }
.emp2-empty:not(.is-card) > div { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.emp2-empty:not(.is-card) .emp2-empty-act { justify-content: center; }
.emp2-empty.is-card { grid-template-columns: minmax(0, 1fr); }
.emp2-empty-card { align-items: center; text-align: center; }
.emp2-empty-card .emp2-card-top, .emp2-empty-card .emp2-card-body { justify-content: center; align-items: center; }
.emp2-empty-card .emp2-card-body h3 { justify-content: center; }
.emp2-empty-card .emp2-card-foot.emp2-empty-act { justify-content: center; }
.emp2-empty.is-plain { padding-block: 34px; }
@media (max-width: 640px) { .emp2-empty:not(.is-card) { padding-inline: 16px; } }

/* ── End employment, the three-step dialog drawn as mockup 046-m3 (spec 046 US2, TASK-2026-089) ──
   Reason and last day, then what is still owed, then the password; one dialog, so the act takes under
   a minute (SC-002). A slip: one field height (44 px, the textarea taller), and it folds on its OWN
   width with `@container`, never the screen's (rule 6). The red line along the top and the red
   last button keep the one name, End employment, from the first press to the last. The error line
   is shown and hidden with the `hidden` attribute and has no `display` of its own. */
.modal-card.emp2-dlg {
  --emp2-field-h: 44px;
  --field-height: var(--emp2-field-h);  /* the bank slip's precedent: `.modal-card input` asks --field-height */
  width: min(640px, calc(calc(100 * var(--vw)) - 32px)); max-width: none; container-type: inline-size; border-radius: 2px;
}
.emp2-dlg.is-danger .modal-header { box-shadow: inset 0 3px 0 var(--danger); }
.emp2-dlg .modal-header h3 { font-size: 18px; }
.emp2-dlg .modal-body { display: flex; flex-direction: column; gap: 20px; padding: 24px; font-size: 15px; }
.emp2-dlg .modal-footer { padding: 16px 24px; gap: 12px; }
.emp2-stepper { list-style: none; display: flex; margin: 0 0 4px; padding: 0; }
.emp2-stepper li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; margin: 0;
  font-size: 13px; color: var(--muted); text-align: center; }
.emp2-stepper li:not(:first-child)::before { content: ""; position: absolute; top: 17px; inset-inline-end: calc(50% + 22px); width: calc(100% - 44px);
  height: 2px; background: var(--line); }
.emp2-stepper li.is-on::before, .emp2-stepper li.is-done::before { background: var(--emp2-line); }
.emp2-stepper-n { width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line);
  background: var(--emp2-card); font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; font-size: 15px; color: var(--muted); position: relative; }
.emp2-stepper li.is-on .emp2-stepper-n { background: var(--emp2-fill); border-color: var(--emp2-fill); color: var(--emp2-on-fill); }
.emp2-stepper li.is-done .emp2-stepper-n { border-color: var(--emp2-line); color: var(--emp2-line); }
.emp2-stepper li.is-on .emp2-stepper-l { color: var(--emp2-strong); font-weight: 700; }
.emp2-dlg-for { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; color: var(--muted);
  background: var(--emp2-well); border: 1px solid var(--line); border-radius: 2px; }
.emp2-dlg-for b { font-size: 15px; color: var(--text); }
.emp2-dlg-set { margin: 0; font-size: 14px; font-weight: 700; color: var(--warning); }
.emp2-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.emp2-reasons legend { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; padding: 0; }
.emp2-reason { display: flex; margin: 0; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 2px; cursor: pointer; font-size: 15px; font-weight: 400; color: var(--text); background: var(--emp2-card); text-transform: none; letter-spacing: normal; }
.emp2-reason input { width: 18px; height: 18px; margin: 0; accent-color: var(--emp2-fill); flex: none; }
.emp2-reason:has(input:checked) { border-color: var(--emp2-line); box-shadow: inset 0 0 0 1px var(--emp2-line); background: var(--emp2-surface-2);
  font-weight: 700; color: var(--emp2-strong); }
.emp2-reason:focus-within { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.emp2-field2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.emp2-dlg-lbl { margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: normal; }
.emp2-input { width: 100%; box-sizing: border-box; height: var(--emp2-field-h); padding: 0 12px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--emp2-card); color: var(--text); }
textarea.emp2-input { height: 76px; padding: 10px 12px; resize: vertical; }
.emp2-input.is-pw { letter-spacing: 3px; font-family: 'Outfit', sans-serif; }
.emp2-input:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.emp2-dlg-error { margin: 0; padding: 10px 14px; font-size: 14px; color: var(--danger); background: var(--danger-tint);
  border: 1px solid var(--danger); border-radius: 2px; }
.emp2-summary-line { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--muted); }
.emp2-summary-line b { color: var(--text); }
.emp2-owed { border: 1px solid var(--emp2-rule); border-radius: 2px; background: var(--emp2-card); }
.emp2-owed-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: var(--emp2-surface);
  border-bottom: 1px solid var(--emp2-rule); }
.emp2-owed-h b { font-size: 15px; color: var(--emp2-strong); }
.emp2-owed-h div > span { font-size: 13px; color: var(--emp2-soft); }
.emp2-owed-big { white-space: nowrap; font-family: 'Outfit', 'Cairo', sans-serif; font-size: 30px; font-weight: 600; color: var(--emp2-strong); line-height: 1.1; }
.emp2-owed-big .emp2-cur { font-family: 'Cairo', sans-serif; font-size: 15px; font-weight: 600; color: var(--emp2-soft); }
.emp2-owed .emp2-quiet { padding: 14px 18px; margin: 0; }
.emp2-lines { margin: 0; padding: 4px 18px 14px; display: flex; flex-direction: column; }
.emp2-lines div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.emp2-lines dt { color: var(--muted); }
.emp2-lines dd { margin: 0; font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; color: var(--text); white-space: nowrap; }
.emp2-lines div.is-total { border-bottom: 0; border-top: 2px solid var(--text); margin-top: 4px; padding-top: 12px; }
.emp2-lines div.is-total dt { color: var(--text); font-weight: 700; font-size: 15px; }
.emp2-lines div.is-total dd { font-size: 20px; }
.emp2-lines .is-plus dd { color: var(--success); }
.emp2-lines .is-minus dd { color: var(--danger); }
.btn.emp2-btn-danger { background: var(--danger); border-color: var(--danger); color: #ffffff; }
.btn.emp2-btn-danger:hover:not(:disabled) { filter: brightness(1.08); }
@container (max-width: 540px) {
  .emp2-reasons, .emp2-field2 { grid-template-columns: minmax(0, 1fr); }
  .emp2-dlg .modal-footer .btn { flex: 1 1 auto; }
  .emp2-dlg .modal-body { padding: 20px 16px; }
}
@container (max-width: 460px) {
  .emp2-dlg .modal-footer { flex-wrap: wrap; }
}

/* ── Hiring somebody (T085) ────────────────────────────────────────────
   One long form, by the owner's answer on 2026-09-20 — not a sequence of steps — so the sections
   are headed bands inside one card rather than pages. Two columns on a wide screen, one on a
   narrow, decided by the CARD's width and not the window's: this sits inside the page's own
   column, and the site-wide `.form-row` rule that collapses under an 1100px screen would fold it
   while there is still room. */
.ta-hire {
  /* One height for every box on this form — the slip contract this app holds its dialogs to. */
  --ta-hire-field: 38px;
  /* The app-wide field height (`--field-height`, a floor on every `.form-group > input`) would hold each box at 47px and make the
     form tall; the card sets its own for its own boxes, so they still all agree with each other. */
  --field-height: var(--ta-hire-field);
  --control-line-height: 1.3;
  /* The container the grid below is measured against. It has to be the CARD and not the grid,
     because an element is never styled by its own container query — the query below would have
     done nothing at all had it stayed there. (The 0px columns I first blamed this for were the
     browser pane being hidden, which gives every page zero width and makes any layout measurement
     meaningless. Two different problems; only the first one was real.) */
  container-type: inline-size;
  /* TASK-2026-089 (owner's walk 2026-09-30, item 2): the brand's teal ramp, one step per section, for the heading bands. */
  --hire-step-1: var(--pay-1, #034959);
  --hire-step-2: #327C8C;
  --hire-step-3: var(--pay-2, #50B4BF);
  --hire-step-4: #84D0D9;
  --hire-step-5: #327C8C;
  /* Declared here so the stylesheet knows them; each section sets its own (its step of the ramp, its number of columns). */
  --step: var(--hire-step-1);
  --cols: 4;
}
/* The top of the card: Back at the inline start, the title beside it. Its (i) is the card's top inline-end corner
   (`info_corner.css`), so the title keeps that corner clear. */
.ta-hire-top { display: flex; align-items: center; gap: 14px; padding-block: 14px; }
.ta-hire-top .ta-panel-title { margin: 0; min-width: 0; font-size: 1.3rem; line-height: 1.3; text-transform: none; letter-spacing: 0; color: var(--text); }
.ta-hire-back { flex: none; }
/* A section is a band (its heading) over a compact grid of boxes. The band is the section's step of the teal ramp, softened
   into the card, with a stripe at the inline start in the step itself and a title larger than any label below it. */
.ta-hire-section { --step: var(--hire-step-1); min-width: 0; border-top: 1px solid var(--line); }
.ta-hire-section[data-n="2"] { --step: var(--hire-step-2); }
.ta-hire-section[data-n="3"] { --step: var(--hire-step-3); }
.ta-hire-section[data-n="4"] { --step: var(--hire-step-4); }
.ta-hire-section[data-n="5"] { --step: var(--hire-step-5); }
.ta-hire-head {
  margin: 0; padding: 9px 20px; font-size: 1.08rem; line-height: 1.3; font-weight: 700;
  color: var(--emp-tab-strong, var(--text));
  background: color-mix(in srgb, var(--emp-tab-fill, #2C6B78) 38%, var(--surface, transparent));
  border-inline-start: 6px solid var(--step);
  display: flex; align-items: center; gap: 8px;
}
.ta-hire-head .ta-quiet { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* The light brand theme: the palest step of the ramp is the band and the darkest is its words (the dark theme and the older palettes keep the tinted band above). */
html[data-theme="retailpower"] .ta-hire-head { background: #D0EFF2; color: #034959; }
.ta-hire-grid {
  display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 10px 16px; padding: 12px 20px 14px;
}
.ta-hire-wide { grid-column: 1 / -1; }
.ta-hire-span2 { grid-column: span 2; }
.ta-hire .form-group { min-width: 0; margin: 0; }
/* Revision (b), RB15 (TASK-2026-089): a field's hint is its (i), beside the label; the headings carry theirs the same way. */
.ta-hire-lbl { display: flex; align-items: center; gap: 6px; min-width: 0; margin-bottom: 4px; }
.ta-hire-lbl label { margin: 0; }
.ta-hire-lbl .info-tip, .ta-hire-head .info-tip, .ta-hire .ta-panel-title .info-tip { margin-inline-start: 0; }
/* Every box the same height, which is the slip contract this app holds its dialogs to. */
.ta-hire .form-control { height: var(--ta-hire-field); padding-block: 4px; }
.ta-hire textarea.form-control { height: auto; }
/* The two short sections (the trial period's one box and the login's three) stand side by side on the same four columns
   as everything above them, so they add one row to the form and not two. */
.ta-hire-pair { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ta-hire-pair .ta-hire-section.is-one { grid-column: span 1; --cols: 1; }
.ta-hire-pair .ta-hire-section.is-three { grid-column: span 3; --cols: 3; }
.ta-hire-foot {
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
  border-top: 1px solid var(--line); padding-block: 14px;
}
/* The note that says the contract is in Arabic in four copies. Physical sides would put the bar on
   the wrong edge in Arabic, so the side is logical. */
.ta-note {
  margin: 0 0 12px; padding: 9px 12px; font-size: 0.8rem; line-height: 1.55;
  color: var(--muted); background: var(--sunken);
  border-inline-start: 3px solid var(--teal-700);
  border-radius: 0 var(--radius) var(--radius) 0;
}
[dir="rtl"] .ta-note { border-radius: var(--radius) 0 0 var(--radius); }

/* The card's own width, not the window's: four boxes to a row on a computer, three when the card narrows, two on a tablet
   and one on a phone. Where the row is narrower than a wide box, the box takes the row. */
@container (max-width: 999px) {
  .ta-hire-section { --cols: 3; }
  .ta-hire-pair { grid-template-columns: minmax(0, 1fr); }
  .ta-hire-pair .ta-hire-section.is-one, .ta-hire-pair .ta-hire-section.is-three { grid-column: auto; --cols: 3; }
}
@container (max-width: 799px) {
  .ta-hire-section, .ta-hire-pair .ta-hire-section.is-one, .ta-hire-pair .ta-hire-section.is-three { --cols: 2; }
}
@container (max-width: 459px) {
  .ta-hire-section, .ta-hire-pair .ta-hire-section.is-one, .ta-hire-pair .ta-hire-section.is-three { --cols: 1; }
  .ta-hire-span2 { grid-column: auto; }
  .ta-hire-head, .ta-hire-grid { padding-inline: 16px; }
  .ta-hire-foot { flex-wrap: wrap; }
  .ta-hire-foot .btn { flex: 1 1 auto; }
}

/* ── A person's papers (T087): since spec 046 revision (b) (mockup 046b-m2, TASK-2026-089) they are the Papers window's,
   drawn by the "person panel and its small windows" block below (.emp2-files, .emp2-add). ── */

/* ── The shop's own file picker (TASK-2026-060) ────────────────────────────────────────────────
   A native <input type="file"> paints "Choose File" and "No file chosen" in the BROWSER's language,
   so it is hidden and driven from a button. Nothing here gives that input a `display`: an explicit
   `display` defeats the `hidden` attribute, which is this project's most repeated CSS trap. */
.file-picker { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.file-picker-name {
  color: var(--muted); font-size: 0.82rem;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The variant that stood where a full-width dashed box used to be, so those rows keep their shape. */
.file-picker-block {
  display: flex; width: 100%; box-sizing: border-box; padding: 8px 12px;
  background: var(--sunken); border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* The chosen file's name, because the native picker that used to announce it is now hidden. */
.ta-paper-chosen { flex: 1 1 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── The page's own dialog, replacing window.prompt and window.confirm (TASK-2026-060) ──────────
   Follows the slip contract: one field height across every control, and the form folds on ITS own
   width with a container query rather than on the screen's — the site-wide rule at 1100px would
   otherwise stack a 640px dialog on every laptop. */
.ta-ask-form {
  /* One height for every box on this form — the slip contract this app holds its dialogs to. */
  --ta-ask-field: 44px;
  container-type: inline-size;
  padding: 0 20px 4px;
}
.ta-ask-question { color: var(--muted); font-size: 0.88rem; margin: 0 0 14px; line-height: 1.6; }
.ta-ask-field { margin-bottom: 14px; }
.ta-ask-field label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; }
.ta-ask-form .form-control,
.ta-ask-form input:not([type="checkbox"]):not([type="radio"]),
.ta-ask-form select { height: var(--ta-ask-field); width: 100%; box-sizing: border-box; }
/* A textarea starts at the field height and may be pulled taller, per the slip contract. */
.ta-ask-form textarea { min-height: var(--ta-ask-field); width: 100%; box-sizing: border-box; }
/* A refusal has to say what is missing; a blocked button with no reason was the exact complaint. */
.ta-ask-notice { color: var(--danger); font-size: 0.85rem; margin: 0 0 12px; }

/* ── Company sign-in (spec 011 US1; approved mockup 011-m1) ────────────────────────────────────────────────
   Only in company mode, where it replaces the classic login card inside #login-overlay. Labels sit above fields;
   the store name is shown as part of the store's web address, so its box is always left-to-right. Inside it the
   logical sides are the physical ones, and the prefix stays on the left in both page directions. */
.company-signin { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; background: var(--bg); }
.company-signin-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 28px; }
.company-signin-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; color: var(--text); }
.company-signin-brand img { width: 30px; height: 30px; }
.company-signin-language { background: none; border: 0; color: var(--muted); font: inherit; font-size: .86rem; cursor: pointer; padding: 6px 4px; }
.company-signin-language:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.company-signin-main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: calc(6 * var(--vh)) 16px 32px; }
.company-signin-panel { width: 100%; max-width: 408px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 32px 28px; box-sizing: border-box; }
.company-signin-panel h2 { margin: 0 0 22px; font-size: 1.35rem; font-weight: 700; line-height: 1.4; color: var(--text); }
.company-signin-panel h2 + .company-signin-lead { margin-top: -16px; }
.company-signin-lead { margin: 0 0 22px; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.company-signin-form { display: flex; flex-direction: column; gap: 18px; }
.company-signin-field { display: flex; flex-direction: column; gap: 6px; }
.company-signin-field > label, .company-signin-label-row label { font-size: .86rem; font-weight: 600; color: var(--text); }
.company-signin-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.company-signin-panel .company-signin-input { height: 44px; width: 100%; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: .95rem; }
.company-signin-panel .company-signin-input:focus, .company-signin-store:focus-within { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus); }
.company-signin-store { display: flex; direction: ltr; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.company-signin-store.is-invalid { border-color: var(--danger); }
.company-signin-store-prefix { display: flex; align-items: center; padding-block: 0; padding-inline: 12px 10px; background: var(--surface); color: var(--text-muted); border-inline-end: 1px solid var(--line); font-size: .86rem; white-space: nowrap; font-family: 'Outfit', 'Cairo', sans-serif; }
.company-signin-panel .company-signin-store input { flex: 1; min-width: 0; height: auto; border: 0; outline: none; box-shadow: none; background: transparent; color: var(--text); padding: 0 12px; border-radius: 0; font: inherit; font-family: 'Outfit', 'Cairo', sans-serif; font-size: .98rem; font-weight: 600; letter-spacing: .03em; direction: ltr; text-align: start; }
.company-signin-help { margin: 0; font-size: .8rem; color: var(--text-muted); line-height: 1.6; }
.company-signin-help.is-error { color: var(--danger); }
.company-signin-link { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.company-signin-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.company-signin-password { position: relative; }
.company-signin-panel .company-signin-password .company-signin-input { padding-inline-end: 72px; }
.company-signin-password .company-signin-link { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); }
.company-signin-check { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--muted); }
.company-signin-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.company-signin-submit { height: 46px; font-size: .95rem; font-weight: 700; }
.company-signin-actions { display: flex; flex-direction: column; gap: 10px; }
.company-signin-foot { padding: 16px 28px 22px; text-align: center; font-size: .78rem; color: var(--text-muted); }
.company-signin-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); border-inline-start-width: 3px; background: var(--surface); margin-bottom: 20px; }
.company-signin-notice i { grid-row: span 2; margin-top: 3px; font-size: .9rem; }
.company-signin-notice b { font-size: .88rem; color: var(--text); }
.company-signin-notice small { font-size: .76rem; color: var(--text-muted); }
.company-signin-notice.is-danger { border-inline-start-color: var(--danger); background: var(--danger-tint); }
.company-signin-notice.is-danger i { color: var(--danger); }
.company-signin-notice.is-warning { border-inline-start-color: var(--warning); background: var(--warning-tint); }
.company-signin-notice.is-warning i { color: var(--warning); }
.company-signin-notice.is-info { border-inline-start-color: var(--brand); background: var(--tint); }
.company-signin-notice.is-info i { color: var(--brand); }
.company-store-badge { cursor: default; }
.user-store { display: block; font-size: .72rem; color: var(--muted); white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }   /* TASK-2026-087 (c): it now holds the store's and the branch's own names; let them wrap rather than clip */
@media (max-width: 520px) {
  .company-signin-top { padding: 14px 16px; }
  .company-signin-main { padding: 12px 12px 24px; }
  .company-signin-panel { padding: 24px 18px 22px; border-radius: var(--radius); }
  .company-signin-store-prefix { font-size: .8rem; padding: 0 8px; }
}

/* Spec 012 (approved mockup M1): the owner sign-in page reuses the company sign-in above; these are its own parts.
   The Google button follows Google's branding rules: its own mark, white on light themes, #131314 on dark ones. */
body.owner-page { margin: 0; min-height: calc(100 * var(--vh)); background: var(--bg); }
.owner-signin-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #747775; border-radius: var(--radius); background: #ffffff; color: #1f1f1f; font: inherit; font-size: .92rem; font-weight: 600; text-decoration: none; }
.owner-signin-google:hover { background: #f7f8f8; }
.owner-signin-google:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.owner-signin-google svg { width: 18px; height: 18px; flex: none; }
html[data-theme="retailpower-dark"] .owner-signin-google, html[data-theme="github-dark"] .owner-signin-google { background: #131314; border-color: #8e918f; color: #e3e3e3; }
html[data-theme="retailpower-dark"] .owner-signin-google:hover, html[data-theme="github-dark"] .owner-signin-google:hover { background: #1f1f20; }
.owner-signin-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-muted); font-size: .82rem; }
.owner-signin-or::before, .owner-signin-or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.company-signin-panel .owner-signin-code { font-size: 1.2rem; font-weight: 600; letter-spacing: .28em; text-align: center; }
.company-signin-panel input[dir="ltr"] { text-align: start; }
.company-signin-panel input.owner-signin-code { text-align: center; }
.owner-signin-resend { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; }
.owner-signin-resend .company-signin-help { font-variant-numeric: tabular-nums; }
.owner-signin-back { margin: 18px 0 0; }
.owner-signin-staff { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--muted); }
.owner-signin-phone { font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; color: var(--text); }
.company-signin-notice p { margin: 0; font-size: .84rem; color: var(--muted); line-height: 1.65; grid-column: 2; }

/* Spec 012 (approved mockup M4): the signed-in owner page — a slim top bar, the tabs My shops · Security, and My shops. */
.owner-page-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 28px; min-height: 56px; box-sizing: border-box; background: var(--surface); border-bottom: 1px solid var(--line); }
.owner-page-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; color: var(--text); min-width: 0; }
.owner-page-brand img { width: 28px; height: 28px; flex-shrink: 0; }
.owner-page-top-end { display: flex; align-items: center; gap: 14px; min-width: 0; }
.owner-page-name { font-size: .86rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.owner-page-language { background: none; border: 0; color: var(--muted); font: inherit; font-size: .86rem; cursor: pointer; padding: 6px 4px; white-space: nowrap; }
.owner-page-language:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.owner-page-main { width: 100%; max-width: 940px; margin: 0 auto; padding: 22px 24px 48px; box-sizing: border-box; }
.owner-page-main .settings-tabs-header { margin-bottom: 20px; }
.owner-page-pause { margin-bottom: 18px; }
.owner-security-sections { display: flex; flex-direction: column; gap: 16px; }
.owner-security-lead { margin: 4px 0 0; font-size: .86rem; color: var(--muted); line-height: 1.7; }
.owner-security-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.owner-security-row:last-child { border-bottom: 0; }
.owner-security-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.owner-security-row-label { font-size: .8rem; color: var(--text-muted); }
.owner-security-row-value { font-size: .92rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.owner-security-note { display: block; font-weight: 500; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.owner-security-row-action { display: flex; gap: 8px; flex-wrap: wrap; }
.owner-security-result.is-ok { color: var(--success); }
.owner-security-result.is-failed { color: var(--danger); }
.owner-security-pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; font-size: .84rem; color: var(--muted); }
.owner-security-qr { display: flex; justify-content: center; padding: 8px; margin: 0 0 12px; background: #ffffff; border-radius: var(--radius); }
.owner-security-qr svg { width: 176px; height: 176px; }
.owner-security-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 0 0 12px; padding-inline-start: 22px; font-family: 'Outfit', 'Cairo', monospace; font-size: .95rem; }
.owner-security-code-actions { display: flex; gap: 8px; }
.owner-recovery-options { margin-bottom: 4px; }
.owner-recovery-option { justify-content: flex-start; text-align: start; height: auto; min-height: 46px; white-space: normal; }
.owner-page-main .settings-tabs-header a.tab-btn { text-decoration: none; }
.owner-page-code { font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 700; letter-spacing: .03em; }
.owner-shops-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.owner-shops-head h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.owner-shops-head span { font-size: .86rem; color: var(--muted); }
.owner-shop-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.owner-shop-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.owner-shop-card.needs-attention { border-inline-start: 3px solid var(--warning); }
.owner-shop-card h3 { margin: 0 0 10px; font-size: 1.02rem; font-weight: 700; color: var(--text); }
.owner-shop-facts { display: flex; flex-wrap: wrap; gap: 6px 36px; margin: 0; }
.owner-shop-facts dt { font-size: .78rem; color: var(--text-muted); }
.owner-shop-facts dd { margin: 2px 0 0; font-size: .9rem; font-weight: 600; color: var(--text); }
.owner-shop-card .btn-primary { min-width: 104px; }
.owner-shop-attention { grid-column: 1 / -1; }
.owner-shop-attention .company-signin-notice { margin: 0; }
.owner-page-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.owner-page-section-head { padding: 18px 22px 0; }
.owner-page-section-head h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.owner-page-body { padding: 14px 22px 20px; }
.owner-page-body + .owner-page-body { border-top: 1px solid var(--line); padding-top: 18px; }
.owner-page-body h3 { margin: 0 0 8px; font-size: .95rem; font-weight: 700; color: var(--text); }
.owner-page-body p { margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.75; }
.owner-page-steps { margin: 0 0 10px; padding-inline-start: 20px; font-size: .88rem; line-height: 1.9; color: var(--text); }
.owner-page-later { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.owner-page-help { font-size: .82rem; color: var(--text-muted); }
/* Spec 012 (approved mockup M7): Settings › Owner account. The table turns into one block per account on a narrow screen. */
.owner-account-card-head { padding: 16px 24px; border-bottom: 1px solid var(--line); }
.owner-account-card-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.owner-account-card-body { padding: 20px 24px 24px; }
.owner-account-lead { margin: 0 0 18px; font-size: .9rem; line-height: 1.8; color: var(--muted); max-width: 62ch; }
.owner-account-empty { margin: 0 0 18px; padding: 14px 0; border-block: 1px solid var(--line); font-size: .88rem; color: var(--text-muted); }
.owner-account-table td bdi { font-family: 'Outfit', 'Cairo', sans-serif; white-space: nowrap; }
.owner-account-table th { text-transform: none; letter-spacing: 0; }
.owner-account-you { color: var(--text-muted); font-weight: 500; font-size: .8rem; margin-inline-start: 6px; }
.owner-account-table td.owner-account-actions { text-align: end; white-space: nowrap; }
.owner-account-remove { color: var(--danger); }
.owner-account-link-more { margin-top: 16px; }
.owner-account-text { margin: 0 0 14px; font-size: .9rem; line-height: 1.75; color: var(--text); }
.owner-account-text bdi { font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; }
.bank-slip-form .form-group label.owner-account-label { display: block; margin: 0 0 8px; font-size: .86rem; font-weight: 600; line-height: 1.6; color: var(--text); text-transform: none; letter-spacing: 0; }
.owner-account-help { margin: 6px 0 0; font-size: .8rem; color: var(--text-muted); line-height: 1.6; }
.owner-account-choices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.owner-account-choices .btn, .owner-account-choices .owner-signin-google { width: 100%; height: 44px; justify-content: center; cursor: pointer; }
.bank-slip-form .form-group input.owner-account-code { text-align: center; font-family: 'Outfit', 'Cairo', sans-serif; font-size: 1.25rem; letter-spacing: .5em; }
@media (max-width: 700px) {
  .owner-account-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .owner-account-table, .owner-account-table tbody, .owner-account-table tr, .owner-account-table td { display: block; width: 100%; box-sizing: border-box; }
  .owner-account-table tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .owner-account-table tr:last-child { border-bottom: 0; }
  .owner-account-table td { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 8px; padding: 5px 0; border: 0; text-align: start; }
  .owner-account-table td::before { content: attr(data-label); color: var(--muted); font-size: .8rem; }
  .owner-account-table td.owner-account-actions { display: block; text-align: start; padding-top: 8px; }
  .owner-account-table td.owner-account-actions::before { content: none; }
  .owner-account-table td bdi { white-space: normal; overflow-wrap: anywhere; }
}
/* Spec 012 (approved mockup M6): the Security Confirmation for a shop opened from the owner account. */
.owner-step-up-card { max-width: 440px; }
.bank-slip-form .form-group label.owner-step-up-label { display: block; margin: 0 0 10px; font-size: .9rem; font-weight: 500; line-height: 1.7; color: var(--text); text-transform: none; letter-spacing: 0; }
.owner-step-up-lead { margin: 0 0 14px; font-size: .9rem; line-height: 1.7; color: var(--text); }
.bank-slip-form .form-group input.owner-step-up-pin { text-align: center; font-family: 'Outfit', 'Cairo', sans-serif; font-size: 1.25rem; letter-spacing: .5em; }
.bank-slip-form .form-group input.owner-step-up-password { text-align: center; font-size: 1.1rem; letter-spacing: .3em; }
.owner-step-up-alternatives { display: flex; flex-direction: column; gap: 12px; margin: 2px 0 6px; }
.owner-step-up-alternatives .owner-signin-google { cursor: pointer; }
.owner-step-up-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.owner-step-up-help { margin: 2px 0 0; font-size: .8rem; color: var(--text-muted); line-height: 1.6; }

/* Spec 012 (approved mockup M4): the store name as a switcher, for a shop opened from the owner account. */
button.owner-shop-switch { cursor: pointer; font: inherit; font-size: .78rem; display: inline-flex; align-items: center; gap: 6px; }
button.owner-shop-switch i { font-size: .65rem; }
.owner-shop-switch-menu { position: fixed; min-width: 248px; max-width: calc(calc(100 * var(--vw)) - 16px); box-sizing: border-box; }
.owner-shop-switch-label { padding: 6px 11px 4px; font-size: .76rem; color: var(--text-muted); }
.owner-shop-switch-menu button { justify-content: space-between; }
.owner-shop-switch-menu button .owner-page-code { font-size: .78rem; color: var(--muted); font-weight: 600; }
.owner-shop-switch-menu button.is-all { justify-content: flex-start; }
@media (max-width: 520px) {
  .owner-page-top { padding: 10px 14px; }
  .owner-page-name { display: none; }
  .owner-page-main { padding: 16px 12px 32px; }
  .owner-shop-card { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .owner-shop-card .btn-primary { width: 100%; }
}

/* Spec 011 (FR-041; approved mockup 3): company mode's one Backup card. Copies are made by RetailPower, not the shop. */
.backup-health-card .card-body { padding: 12px 24px 6px; }
.backup-health-rows { display: flex; flex-direction: column; margin: 0; }
.backup-health-row { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); gap: 6px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.backup-health-row:last-child { border-bottom: 0; }
.backup-health-row dt { font-size: .9rem; color: var(--muted); }
.backup-health-row dd { margin: 0; font-size: .92rem; font-weight: 600; color: var(--text); }
.backup-health-row dd small { display: block; font-weight: 500; font-size: .82rem; margin-top: 2px; color: var(--muted); }
.backup-health-row dd small.is-success { color: var(--success); }
.backup-health-row dd small.is-warning { color: var(--warning); }
.backup-health-row dd small i { margin-inline-end: 5px; }
.backup-health-foot { padding: 14px 24px 18px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--muted); line-height: 1.8; }
.backup-health-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--line); border-inline-start: 3px solid var(--warning); background: var(--warning-tint); border-radius: var(--radius); }
.backup-health-notice i { color: var(--warning); margin-top: 4px; }
.backup-health-notice b { font-size: .9rem; }
@media (max-width: 640px) { .backup-health-row { grid-template-columns: minmax(0, 1fr); } }

/* ── The shared card of revision (b) (spec 046 RB7, T045; TASK-2026-089) ─────────────────────────────────────────────────
   One card for Payroll, Employment and Permissions, ported from the approved drawings (scratch/mockups/046b-payroll-
   employment.css, "the card" and "the small window"): the drawings' ec- classes live here as emp2-card-, their --b- and
   --ot- tokens as the --emp2- tokens above. A card is an article of three bands (who, the one figure, the status); one
   transparent button covers it and opens it (static/js/staff_card.js); an (i) or a next-step button sits above that button
   in .emp2-card-over. Cards at least 238 px wide fill each row: four at 1440, three at 1280, one on a phone; the is-3 grid
   (Permissions) is three, two on a tablet, one on a phone. Sizes are the drawing's pixels. Nothing here is toggled with the
   `hidden` attribute, and every side is logical. */
.emp2-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 40px; }
.emp2-card-head h2 { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 17px; font-weight: 700; color: var(--text); }
.emp2-card-head h2 small { font-size: 13px; font-weight: 500; color: var(--muted); }
.emp2-card-head-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.emp2-card-head-end .btn { gap: 8px; }
.emp2-card-section { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.emp2-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 16px; }
.emp2-card-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.emp2-card { position: relative; display: flex; flex-direction: column; min-width: 0; box-sizing: border-box;
  background: var(--emp2-card); border: 1px solid var(--line); border-radius: 2px; color: var(--text); }
.emp2-card-hit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-width: 0; margin: 0; padding: 0; background: transparent;
  border: 0; border-radius: 2px; cursor: pointer; }
.emp2-card-hit:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.emp2-card:has(> .emp2-card-hit:hover) { border-color: var(--emp2-line); }
.emp2-card:has(> .emp2-card-hit:hover) .emp2-card-cue { color: var(--emp2-line); }
.emp2-card-over { position: relative; z-index: 2; }
.emp2-card.is-sel { border-color: var(--emp2-fill); box-shadow: inset 0 0 0 1px var(--emp2-fill); }
.emp2-card.is-new { border-color: var(--success); box-shadow: inset 0 0 0 1px var(--success); }

.emp2-card-top { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px 0; }
.emp2-card-top .emp2-av { width: 36px; height: 36px; font-size: 14px; }
.emp2-card-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 2px; background: var(--emp2-surface); color: var(--emp2-strong); font-size: 14px; }
.emp2-card-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.emp2-card-id b { font-size: 15.5px; font-weight: 700; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp2-card-id span { font-size: 13px; line-height: 1.4; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp2-card-cue { flex: none; align-self: flex-start; margin-top: 4px; font-size: 11px; color: var(--text-muted); }

.emp2-card-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; padding: 12px 16px 14px; }
.emp2-card-body.is-row { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; }
.emp2-card-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; font-family: 'Outfit', 'Cairo', sans-serif; font-size: 24px; font-weight: 600;
  line-height: 1.15; color: var(--emp2-strong); white-space: nowrap; }
.emp2-card-fig .emp2-cur { font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 600; color: var(--emp2-soft); }
.emp2-card-fig.is-nil { color: var(--text-muted); }
.emp2-card-sub { font-size: 13px; color: var(--muted); line-height: 1.45; }

.emp2-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 42px; box-sizing: border-box;
  padding: 6px 16px; border-top: 1px solid var(--line); background: var(--emp2-well); }
.emp2-card-foot.is-end { justify-content: flex-end; }
.emp2-card-foot.is-warn { background: var(--warning-tint); border-top-color: color-mix(in srgb, var(--warning) 35%, var(--line)); }
.emp2-card-foot .pay2-paid, .emp2-card-foot .emp2-due, .emp2-card-foot .emp2-none, .emp2-card-foot .emp2-stage { font-size: 13px; }
.emp2-card-foot .emp2-quiet { font-size: 12.5px; }
.emp2-card-mark { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
.emp2-card-mark .info-tip { margin-inline-start: 0; }
.emp2-card-foot .btn { min-height: 32px; padding-block: 0; }

/* a card with nothing to open (no commission this month): its place is kept, quiet */
.emp2-card.is-none { background: transparent; border-style: dashed; }
.emp2-card.is-none .emp2-card-id b { color: var(--muted); font-weight: 600; }
.emp2-card.is-none .emp2-av { opacity: .6; }
.emp2-card.is-none .emp2-card-foot { background: transparent; border-top-style: dashed; }

/* the small window a card opens */
.modal-card.emp2-dlg.emp2-card-win { width: min(500px, calc(calc(100 * var(--vw)) - 32px)); }
/* TASK-2026-089 (owner 2026-09-29): a window foot never clips a button label; the buttons wrap to a second line instead. */
.emp2-card-win .modal-footer, .pay2-held-win .modal-footer { flex-wrap: wrap; row-gap: 8px; }
.emp2-card-win .modal-footer .btn, .pay2-held-win .modal-footer .btn { white-space: nowrap; flex: 0 0 auto; max-width: 100%; }
.emp2-card-win .modal-header { align-items: center; }
.emp2-card-win-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.emp2-card-win-who .emp2-av { width: 36px; height: 36px; font-size: 14px; }
.emp2-card-win-who > span { display: flex; flex-direction: column; min-width: 0; }
.emp2-card-win-who b { font-size: 17px; line-height: 1.35; }
.emp2-card-win-who small { font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1.4; }
.emp2-card-win .modal-body { gap: 16px; }
.emp2-card-sum { display: flex; flex-direction: column; gap: 6px; }
.emp2-card-sum-l { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: 13px; font-weight: 600; color: var(--emp2-soft); }
.emp2-card-sum .emp2-owed-big { font-size: 32px; }
.emp2-card-win .emp2-lines { padding: 2px 0 0; border-top: 1px solid var(--line); }
.emp2-card-win .emp2-lines div { padding: 8px 0; }
.emp2-card-win .emp2-lines div.is-total { margin-top: 2px; padding-top: 10px; border-top-width: 1px; }
.emp2-card-win .emp2-lines div.is-total dd { font-size: 17px; }
.emp2-card-win .emp2-lines div:has(+ div.is-total) { border-bottom: 0; }
.emp2-card-win .emp2-field2 { grid-template-columns: minmax(0, 1fr); }
.emp2-card-win .emp2-field2 > div:empty { display: none; }
.emp2-card-held { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 14px; border-radius: 2px;
  background: var(--warning-tint); }
.emp2-card-held .pay2-paid { font-size: 14px; }

@media (max-width: 900px) {
  .emp2-card-grid.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .emp2-card-grid, .emp2-card-grid.is-3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .emp2-card-top { padding: 14px 16px 0; }
  .emp2-card-body { padding: 10px 16px 14px; }
  .emp2-card-foot { padding: 7px 16px; }
  .emp2-card-head-end { width: 100%; }
  .emp2-card-head-end .btn, .emp2-card-head-end .emp2-locked { flex: 1 1 auto; justify-content: center; }
  .emp2-card-win .emp2-owed-big { font-size: 28px; }
}

/* ── Employment, revision (b): the stage tiles and the people cards (spec 046 US6, T050; TASK-2026-089) ─────────────────
   Drawn as the approved mockup 046b-m2 (scratch/mockups/046b-payroll-employment.css, "employment, revision (d)"): six large
   tiles in the band (All and the five stages), each the stage's symbol in its colour, the count large and the name; the
   pressed tile is filled in the brand colour with a tick. Six a row on a computer, three a row narrower and on a phone. The
   cards are the shared emp2-card with a person in them (.emp2-pcard). The tick is shown by `aria-pressed`, never by the
   `hidden` attribute; every side is logical. */
.emp2-band:has(.emp2-tiles) { padding-bottom: 24px; }
.emp2-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.emp2-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; min-height: 112px; padding: 14px 16px 14px;
  box-sizing: border-box; font: inherit; text-align: start; color: var(--emp2-strong); background: var(--emp2-card); border: 1px solid var(--emp2-rule); border-radius: 2px; cursor: pointer; }
.emp2-tile:hover { border-color: var(--emp2-line); }
.emp2-tile:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.emp2-tile-ic { display: inline-flex; align-items: center; height: 18px; font-size: 13px; color: var(--emp2-line); }
.emp2-tile[data-stage="active"] .emp2-tile-ic { color: var(--success); }
.emp2-tile[data-stage="on_notice"] .emp2-tile-ic { color: var(--warning); }
.emp2-tile[data-stage="left"] .emp2-tile-ic { color: var(--text-muted); }
.emp2-tile b { margin-top: auto; font-family: 'Outfit', 'Cairo', sans-serif; font-size: 36px; font-weight: 600; line-height: 1.05; }
.emp2-tile > span:last-child { font-size: 14px; font-weight: 700; color: var(--emp2-soft); line-height: 1.35; }
.emp2-tile.is-zero b { color: var(--text-muted); }
.emp2-tile-tick { display: none; flex: none; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #fff; color: var(--emp2-fill); font-size: 10px; }
.emp2-tile-tick i { color: var(--emp2-fill); }
.emp2-tile[aria-pressed="true"] { background: var(--emp2-fill); border-color: var(--emp2-fill); color: var(--emp2-on-fill); cursor: default; }
.emp2-tile[aria-pressed="true"] > span:last-child, .emp2-tile[aria-pressed="true"] .emp2-tile-ic,
.emp2-tile[aria-pressed="true"].is-zero b { color: var(--emp2-on-fill); }
.emp2-tile[aria-pressed="true"] .emp2-tile-tick { display: inline-grid; position: absolute; top: 12px; inset-inline-end: 12px; }

/* a person card's body: the stage, then its date */
.emp2-pcard .emp2-card-body { gap: 3px; }
.emp2-pcard .emp2-card-body .emp2-stage { font-size: 14px; }
.emp2-pcard .emp2-locked .btn, .emp2-pcard .emp2-card-foot .btn { white-space: nowrap; }
.emp2-pcard .emp2-card-foot .emp2-quiet { font-size: 13px; }
/* TASK-2026-089 (owner's walk 2026-09-30, item 3): the next-step button fills the card's foot and is centred in it, the same
   size on every card whatever its words (Start, End employment, Rehire, Bring them back, a lock). The layer above the covering
   button carries the whole row, so the button has the full width to fill; a locked step's (i) stays beside its button. */
.emp2-pcard .emp2-card-foot { justify-content: center; }
.emp2-pcard .emp2-card-foot .emp2-card-over { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.emp2-pcard .emp2-card-foot .emp2-card-over > .btn,
.emp2-pcard .emp2-card-foot .emp2-card-over > .emp2-locked { flex: 1 1 auto; min-width: 0; }
.emp2-pcard .emp2-card-foot .emp2-locked { display: flex; align-items: center; justify-content: center; gap: 8px; }
.emp2-pcard .emp2-card-foot .emp2-locked .btn { flex: 1 1 auto; }
.emp2-pcard .emp2-card-foot .btn { width: 100%; height: 34px; min-height: 34px; padding-inline: 12px; font-size: 14px; justify-content: center; text-align: center; }
.emp2-pcard .emp2-card-foot .emp2-locked .btn { width: auto; }
.emp2-pcard .emp2-card-foot .emp2-inline { flex: 1 1 auto; justify-content: center; }

@media (max-width: 1100px) {
  .emp2-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .emp2-tile { min-height: 96px; }
}
@media (max-width: 640px) {
  .emp2-band:has(.emp2-tiles) { padding-bottom: 16px; }
  .emp2-tiles { gap: 8px; margin-top: 18px; }
  .emp2-tile { min-height: 88px; padding: 10px 12px; }
  .emp2-tile b { font-size: 28px; }
  .emp2-tile > span:last-child { font-size: 12.5px; }
  .emp2-tile[aria-pressed="true"] .emp2-tile-tick { top: 8px; inset-inline-end: 8px; width: 16px; height: 16px; font-size: 9px; }
}

/* ── Employment, revision (b): the person panel and its small windows (spec 046 US6, T059; TASK-2026-089) ───────────────
   Drawn as the approved mockup 046b-m2 (scratch/mockups/046b-payroll-employment.css, "the person panel, revision (d)"):
   a side panel on a computer — one header (the initial, the name, the role with the stage, Close; then the next step and
   More), one scroll (the six facts, the settlement, the record) — and a full-screen sheet on a phone, where the next step
   and More are two equal buttons. The drawing's eb- classes live here as emp2-. The panel and its scrim stand on the
   shell's drawer layer (--z-drawer), under the small windows (.modal-overlay) and the messages (--z-toast), which is the
   drawing's order. Nothing here is toggled with the `hidden` attribute; every side is logical. */
.emp2-scrim { position: fixed; inset: 0; z-index: var(--z-drawer); background: rgba(3, 73, 89, 0.30); }
html[data-theme="retailpower-dark"] .emp2-scrim { background: rgba(0, 0, 0, 0.55); }
.emp2-drawer { position: fixed; z-index: var(--z-drawer); inset-block: 0; inset-inline-end: 0; width: min(560px, calc(calc(100 * var(--vw)) - 96px)); box-sizing: border-box;
  display: flex; flex-direction: column; background: var(--bg); border-inline-start: 1px solid var(--emp2-rule); box-shadow: var(--shadow-float);
  color: var(--text); font-size: 15px; --text-muted: var(--emp2-label); }
.emp2-dh { flex: none; background: var(--emp2-surface); border-bottom: 1px solid var(--emp2-rule); }
.emp2-dh-top { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px 14px; }
.emp2-dh-top .emp2-av { width: 48px; height: 48px; font-size: 19px; background: var(--emp2-card); }
.emp2-dh-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.emp2-dh-id h2 { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--emp2-strong); }
.emp2-dh-id > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; color: var(--emp2-soft); }
.emp2-dh .modal-close { flex: none; margin-top: -2px; width: 36px; height: 36px; font-size: 24px; color: var(--emp2-soft); border-radius: 2px; }
.emp2-dh .modal-close:hover { background: var(--emp2-card); color: var(--emp2-strong); }
.emp2-dh-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 24px 18px; padding-inline-start: 86px; }
.emp2-dh-acts .btn { white-space: nowrap; gap: 8px; }
.emp2-dh-acts > .emp2-quiet { font-size: 13px; }
.emp2-more { position: relative; }
.btn.emp2-more-b { background: var(--emp2-card); }
.emp2-more-b .fa-chevron-down { font-size: 10px; color: var(--emp2-line); }
.emp2-more-b .emp2-tcount { margin-inline-start: 2px; }
.emp2-menu { position: absolute; z-index: 30; top: calc(100% + 6px); inset-inline-start: 0; min-width: 250px; padding: 6px 0; margin: 0; list-style: none;
  background: var(--emp2-card); border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--shadow-float); }
.emp2-menu li { margin: 0; }
.emp2-mi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 16px; box-sizing: border-box; font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--text); text-align: start; background: transparent; border: 0; cursor: pointer; white-space: nowrap; }
.emp2-mi > i { width: 16px; font-size: 13px; color: var(--emp2-line); text-align: center; }
.emp2-mi > span:not(.emp2-tcount) { flex: 1 1 auto; }
.emp2-mi:hover { background: var(--emp2-surface-2); }
.emp2-mi:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.emp2-menu li + li.is-sep { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.emp2-tcount { font-family: 'Outfit', 'Cairo', sans-serif; font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
  border-radius: 2px; display: inline-grid; place-items: center; background: var(--warning); color: #fff; }
.emp2-db { flex: 1 1 auto; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; }

/* panel blocks */
.emp2-block { background: var(--emp2-card); border: 1px solid var(--line); border-radius: 2px; }
.emp2-block-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.emp2-block-h h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.emp2-block-h h3 .info-tip { margin-inline-start: 0; }
.emp2-block-h small { font-size: 13px; color: var(--muted); font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; }
.emp2-pfacts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.emp2-pfacts > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 20px; min-width: 0; border-bottom: 1px solid var(--line); }
.emp2-pfacts > div:nth-child(odd) { border-inline-end: 1px solid var(--line); }
.emp2-pfacts > div:nth-last-child(-n+2) { border-bottom: 0; }
.emp2-pfacts dt { font-size: 13px; color: var(--muted); }
.emp2-pfacts dd { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.emp2-pfacts dd .emp2-amt { font-size: 16px; }
.emp2-pfacts dd .pay2-paid, .emp2-pfacts dd .emp2-due { font-size: 13.5px; }
.emp2-fact-go { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 0; font: inherit; font-size: 16px; font-weight: 700; text-align: start;
  color: var(--text); background: none; border: 0; cursor: pointer; text-decoration: none; }
.emp2-fact-go:hover > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.emp2-fact-go:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); border-radius: 2px; }
.emp2-fact-go .pay2-paid, .emp2-fact-go .emp2-due { font-size: 13px; white-space: normal; }
.emp2-fact-go.is-warn .pay2-paid { color: var(--warning); }
.emp2-due { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--emp2-text); }
.emp2-due i { font-size: 12px; }

/* the record: newest first, one line each */
.emp2-tl { list-style: none; margin: 0; padding: 8px 20px 12px; }
.emp2-tl li { position: relative; display: grid; grid-template-columns: 14px minmax(110px, auto) minmax(0, 1fr); align-items: baseline; gap: 4px 14px; padding: 12px 0; margin: 0; }
.emp2-tl li + li { border-top: 1px dashed var(--line); }
.emp2-tl-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--emp2-line); background: var(--emp2-card); align-self: center; box-sizing: border-box; }
.emp2-tl li.is-shop .emp2-tl-dot { border-style: dashed; }
.emp2-tl li.is-first .emp2-tl-dot { background: var(--emp2-fill); border-color: var(--emp2-fill); }
.emp2-tl time { font-size: 14px; color: var(--muted); white-space: nowrap; }
.emp2-tl-what { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; min-width: 0; }
.emp2-tl-what b { font-size: 15px; font-weight: 700; color: var(--text); }
.emp2-tl-what span { font-size: 13px; color: var(--muted); }
.emp2-tl li.is-corrected .emp2-tl-what b { text-decoration: line-through; color: var(--text-muted); }

/* papers: the checklist, then the files (their own window, from More) */
.emp2-steps { list-style: none; margin: 0; padding: 6px 20px 10px; }
.emp2-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: 46px; padding: 6px 0; margin: 0; }
.emp2-steps li + li { border-top: 1px dashed var(--line); }
.emp2-box { width: 22px; height: 22px; min-width: 0; box-sizing: border-box; display: grid; place-items: center; border: 2px solid var(--emp2-line); border-radius: 2px;
  background: var(--emp2-card); color: #fff; font-size: 11px; padding: 0; cursor: pointer; }
.emp2-box.is-done { background: var(--emp2-fill); border-color: var(--emp2-fill); }
.emp2-box:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.emp2-steps li b { font-size: 14.5px; font-weight: 600; color: var(--text); }
.emp2-steps li.is-done b { color: var(--muted); font-weight: 500; }
.emp2-step-when { font-size: 13px; color: var(--muted); white-space: nowrap; text-align: end; }
.emp2-steps li.is-late .emp2-step-when { color: var(--danger); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.emp2-files { list-style: none; margin: 0; padding: 4px 20px 8px; }
.emp2-files li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 10px 0; margin: 0; }
.emp2-files li + li { border-top: 1px dashed var(--line); }
.emp2-files li > i { width: 36px; height: 40px; display: grid; place-items: center; background: var(--emp2-surface-2); color: var(--emp2-strong); border: 1px solid var(--emp2-rule); border-radius: 2px; }
.emp2-files b { display: block; font-size: 14.5px; font-weight: 600; }
.emp2-files span { display: block; font-size: 13px; color: var(--muted); }
.emp2-add { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--emp2-well); }
.emp2-add .form-control, .emp2-add .btn { height: 40px; box-sizing: border-box; }
.emp2-add .form-control { width: 100%; font-size: 14px; }
.emp2-file { min-width: 0; }
.emp2-file .file-picker { flex: 1 1 auto; min-width: 0; }
.emp2-file .file-picker-open { border-style: dashed; border-color: var(--emp2-line); color: var(--emp2-text); font-weight: 600; }

/* settlement */
.emp2-settle .emp2-lines { padding: 4px 20px 6px; }
.emp2-settle .emp2-lines div.is-zero dd { color: var(--text-muted); font-weight: 500; }
.emp2-settle .emp2-lines div.is-typed { align-items: center; }
.emp2-settle .emp2-lines div.is-typed dt { color: var(--text); }
.emp2-typed { width: 130px; height: 36px; box-sizing: border-box; padding: 0 10px; text-align: end; font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; font-size: 15px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--emp2-card); color: var(--text); direction: ltr; }
.emp2-typed.is-name { width: 100%; max-width: 240px; text-align: start; font-family: inherit; direction: inherit; }
.emp2-typed:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.emp2-settle .emp2-lines div.emp2-add-line { display: block; padding: 10px 0; border-bottom: 0; }
.emp2-settle .emp2-lines div.is-total { padding-bottom: 14px; }
.emp2-settle-f { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--emp2-well); }

/* the small windows opened from the panel */
/* As drawn: the End employment dialog's 640 px (760 for Papers and Edit), 24 px inside, the 045 dialog's labels, a textarea
   of three lines. The shell's late `.modal-card .modal-body` padding and `.modal-card textarea` height are answered here on
   purpose, with one more class than theirs. */
.modal-card.emp2-dlg.emp2-win.emp2-wide { width: min(760px, calc(calc(100 * var(--vw)) - 32px)); }
.modal-card.emp2-win .modal-body { gap: 20px; padding: 24px; }
.modal-card.emp2-win .modal-footer { padding: 16px 24px; }
.modal-card.emp2-win label.emp2-dlg-lbl { font-size: .86rem; font-weight: 600; }
.modal-card.emp2-win textarea.emp2-input { height: 76px; }
.emp2-win .emp2-block-h, .emp2-win .emp2-steps, .emp2-win .emp2-files, .emp2-win .emp2-add { padding-inline: 16px; }
.emp2-win select.emp2-input { font-size: 15px; }
.emp2-win label.emp2-dlg-lbl.emp2-inline { display: flex; width: fit-content; max-width: 100%; }
.emp2-sec { display: flex; flex-direction: column; gap: 12px; }
.emp2-sec + .emp2-sec { padding-top: 18px; border-top: 1px solid var(--line); }
.emp2-sec h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--emp2-strong); }
.emp2-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.emp2-grid2 .is-wide { grid-column: 1 / -1; }
.modal-card.emp2-win .emp2-grid2 .emp2-dlg-lbl { font-size: 13.5px; font-weight: 600; }
.emp2-grid2 .emp2-input { height: 42px; }
.emp2-input.is-num { text-align: end; font-family: 'Outfit', 'Cairo', sans-serif; }

@container (max-width: 540px) {
  .emp2-grid2 { grid-template-columns: minmax(0, 1fr); }
  .emp2-add { grid-template-columns: minmax(0, 1fr); }
}

/* The Edit details window, shorter (TASK-2026-089, the owner's walk of 2026-09-29: "too tall"). At most 82vh, the body
   scrolls inside and the header and the Save/Cancel foot never leave the screen. Three columns on a wide window, two on a
   tablet, one on a phone — by the window's OWN width (rule 6), so each fold is its own `@container` rule of this block's
   specificity. Tighter rows: 38 px fields, 12 px between sections. */
.modal-card.emp2-dlg.emp2-win.emp2-wide.emp2-edit-win { width: min(1040px, calc(calc(100 * var(--vw)) - 32px)); max-height: calc(82 * var(--vh)); --emp2-field-h: 38px; }
.modal-card.emp2-edit-win .modal-header, .modal-card.emp2-edit-win .modal-footer { flex: none; }
.modal-card.emp2-win.emp2-edit-win .modal-header { padding: 12px 20px; }
.modal-card.emp2-win.emp2-edit-win .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; gap: 12px; padding: 14px 20px; }
.modal-card.emp2-win.emp2-edit-win .modal-footer { padding: 12px 20px; }
.emp2-edit-win .ta-edit { display: flex; flex-direction: column; gap: 12px; }
.emp2-edit-win .emp2-sec { gap: 8px; }
.emp2-edit-win .emp2-sec + .emp2-sec { padding-top: 12px; }
.emp2-edit-win .emp2-grid2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.emp2-edit-win .emp2-grid2 .is-wide { grid-column: span 2; }
.emp2-edit-win .emp2-grid2 .emp2-input { height: 38px; }
.modal-card.emp2-win.emp2-edit-win .emp2-grid2 .emp2-dlg-lbl { font-size: 13px; margin-bottom: 4px; }
.emp2-edit-win .emp2-dlg-for { padding-block: 8px; }
@container (max-width: 820px) {
  .emp2-edit-win .emp2-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 540px) {
  .emp2-edit-win .emp2-grid2 { grid-template-columns: minmax(0, 1fr); }
  .emp2-edit-win .emp2-grid2 .is-wide { grid-column: 1 / -1; }
}
/* The Branches section of Edit details, company mode only (spec 046 Session 2026-09-29 (g), TASK-2026-089): one tick per
   branch, each a box of the same field height and the same three/two/one columns as the fields above it. */
.emp2-branch-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.emp2-branch-opt { display: flex; align-items: center; gap: 10px; min-width: 0; height: var(--emp2-field-h); padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 2px; background: var(--emp2-card); color: var(--text); cursor: pointer; }
.emp2-branch-opt input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--fill); cursor: pointer; }
.emp2-branch-opt bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp2-branch-opt:has(input:focus-visible) { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.emp2-branch-all { margin: 0; color: var(--muted); }
@container (max-width: 820px) {
  .emp2-branch-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 540px) {
  .emp2-branch-pick { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* the panel becomes a full-screen sheet */
  .emp2-scrim { display: none; }
  .emp2-drawer { inset: 0; width: 100%; border: 0; box-shadow: none; }
  .emp2-dh-top { padding: 12px 16px 10px; gap: 12px; align-items: center; }
  .emp2-dh-top .emp2-av { width: 40px; height: 40px; font-size: 16px; }
  .emp2-dh-id h2 { font-size: 18px; }
  .emp2-dh-id > span { font-size: 13px; }
  .emp2-dh-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0 16px 14px; }
  .emp2-dh-acts > .btn, .emp2-dh-acts > .emp2-locked, .emp2-dh-acts > .emp2-quiet, .emp2-more, .btn.emp2-more-b { width: 100%; min-width: 0; justify-content: center; }
  .emp2-dh-acts > .emp2-locked .btn { flex: 1 1 auto; justify-content: center; }
  .emp2-menu { inset-inline: auto 0; min-width: 0; width: max(100%, 240px); }  /* TASK-2026-089: one shorthand, so the filter bar's RTL-flip pin stays true */
  .emp2-db { padding: 16px; gap: 16px; }
  .emp2-pfacts > div { padding: 12px 14px; }
  .emp2-block-h { padding-inline: 14px; }
  .emp2-tl { padding-inline: 14px; }
  .emp2-tl li { grid-template-columns: 14px minmax(0, 1fr); }
  .emp2-tl li time, .emp2-tl li .emp2-tl-what { grid-column: 2; }
  .emp2-steps, .emp2-files { padding-inline: 14px; }
  .emp2-add { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .emp2-settle .emp2-lines { padding-inline: 14px; }
  .emp2-typed { width: 110px; }
  .emp2-settle-f { padding: 14px; }
  .emp2-settle-f .btn { flex: 1 1 auto; }
}

/* TASK-2026-089 (owner 2026-09-29): the Permissions area window redraws in place after a tick, with no opening animation. */
.perm2-overlay.is-redraw, .perm2-overlay.is-redraw .modal-card { animation: none !important; transition: none !important; }

/* ── Settings > Appearance (TASK-2026-163 S1b) ──────────────────────────────────────────────────
   The look (three radios) and the text size (a range from 10 to 20 in steps of 2). The card's (i) stands in its
   top inline-end corner, placed with logical sides only. */
.rp-appearance-card { position: relative; }
.rp-appearance-card > .card-header { padding-inline-end: 40px; }
.rp-appearance-card > .card-header .info-tip {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  margin: 0;
}
.rp-appearance-row { flex-wrap: wrap; gap: 12px 24px; }
.rp-look-group { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.rp-appearance-row .rp-look-option { display: inline-flex; align-items: center; flex: none; gap: 8px; font-weight: 400; cursor: pointer; }
.rp-size-control { display: flex; align-items: center; gap: 16px; inline-size: 100%; max-inline-size: 360px; }
.rp-size-control input[type="range"] { flex: 1 1 auto; min-inline-size: 0; }
.rp-size-readout { flex: none; min-inline-size: 4.5em; text-align: end; font-variant-numeric: tabular-nums; }

/* ── Settings > Receipts > Printing width (TASK-2026-176, approved mockup section 4) ─────────────────
   One card: the width select and the test-strip button. The card's (i) stands in its top inline-end corner, placed with logical sides only. */
.rp-print-width-card { position: relative; margin-block-end: 16px; }
.rp-print-width-card > .card-header { padding-inline-end: 40px; }
.rp-print-width-card > .card-header .info-tip {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  margin: 0;
}
.rp-print-width-card .setting-control { inline-size: 100%; max-inline-size: 280px; }
.rp-print-width-card #print-strip-btn { margin-block-start: 16px; }

/* ═════════════════════════════════════════════════════════════════════════════════════════════════
   DS S3 BASE COMPONENTS (TASK-2026-163 S3) - begin
   Buttons, fields, cards, tables, dialogs, badges, tabs, toasts and focus in the brand. The base rules themselves were
   edited where they stand (BUTTONS, FORMS, CARDS, TABLES, MODALS, BADGES, TOASTS, TABS above); this block holds what has to
   come late to win: the one-line focus, the long-name rule for tables and the till, and the stock table's overrides.
   ═════════════════════════════════════════════════════════════════════════════════════════════════ */

/* The browser's own widgets (scrollbars, date pickers, the open list of a select) follow the look. */
html[data-theme="retailpower"] { color-scheme: light; }
html[data-theme="retailpower-dark"] { color-scheme: dark; }

/* ── Focus (design system v15): ONE 1px line on the control's own edge. No gap, no second ring, no glow. ──
   The default: a 1px outline drawn INSIDE the box (offset minus one width), which is what tabs, chips, links and rows get.
   Buttons and the (i) button have no outline: they turn their own 1px border to the focus colour (the filled button to the
   on-fill colour, because the focus colour would melt into its fill). Fields do the same on focus. Every button has a 1px
   border at rest, so focus never moves the layout by a pixel. `:focus-visible` keeps a mouse click from leaving a line. */
:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: calc(-1 * var(--focus-width));
}
.btn:focus-visible:not(:disabled),
.btn-icon:focus-visible,
.info-tip:focus-visible,
.help-inline:focus-visible,
.modal-close:focus-visible,
.combo-trigger:focus-visible {
  outline: 0;
  border-color: var(--focus);
}
.btn-primary:focus-visible:not(:disabled),
.checkout-btn:focus-visible:not(:disabled) { outline: 0; border-color: var(--focus-on-fill); }
.filter-bar .filter-q:focus,
.filter-bar .filter-sort:focus,
.cogs-search input:focus-visible,
.emp2-input:focus-visible,
.emp2-typed:focus-visible {
  outline: 0;
  border-color: var(--focus);
}

/* ── Tables: the stock table takes the same head, row and hover as every table (its own palette declared another). ── */
.inventory-data-table-wrap { border-color: var(--line); border-radius: var(--radius); }
.inventory-data-table th {
  height: 40px;
  padding: 0 var(--space-4);
  background: var(--card);
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.inventory-data-table td { height: var(--row); padding: 0 var(--space-4); font-size: var(--fs-body); }
.inventory-data-table tbody tr:hover { background: var(--tint); }
.inventory-data-table tbody tr.is-selected { background: var(--tint-strong); }
/* Figures end-align, in the table's own direction. */
td.num, th.num, td.rp-n, th.rp-n, td.text-num, th.text-num { text-align: end; }

/* ── A long name is cut with an ellipsis at every text size, and the full name shows on hover (owner, 2026-10-13). ──
   A table cell holding only text (no button, field, badge or menu inside, which an overflow clip could cut) is held to
   --cell-max and shows "…"; a block inside it (a name over a code, say) does the same on its own line. The full text is the
   cell's or the element's own title attribute: a module that writes none has no hover text, and is listed in NOTES-s3.md for the page
   lanes. A wide table still scrolls sideways inside its own wrapper, which is allowed. */
:root {
  --cell-max: 24rem;
}
td:not(:has(button, input, select, textarea, details, .btn, .badge, .info-tip, .table-actions, [role="menu"], [role="listbox"], .combo)) {
  max-width: var(--cell-max);
  overflow: hidden;
  text-overflow: ellipsis;
}
td:not(:has(button, input, select, textarea, details, .btn, .badge, .info-tip, .table-actions, [role="menu"], [role="listbox"], .combo)) > :is(div, p, strong, b, small) {
  overflow: hidden;
  text-overflow: ellipsis;
}
td.wrap-text, td[style*="white-space:normal"], td[style*="white-space: normal"] { max-width: none; overflow: visible; text-overflow: clip; }

/* ── The till: the cart's name cell gives way, so the totals and the checkout button always stay on screen. ──
   The cart is a table with fixed column widths on every column but the first, which takes what is left and is cut with "…". */
.cart-container, .cart-items { min-width: 0; }
.cart-items > table { table-layout: fixed; width: 100%; }
.cart-items > table th { padding-inline: var(--space-2); height: 36px; }
.cart-items > table td:first-child { max-width: none; overflow: hidden; }
.cart-items > table td:first-child > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-items > table td { height: 56px; white-space: nowrap; }
.cart-qty-input, .cart-disc-input { height: var(--control-sm) !important; }

/* DS S3 BASE COMPONENTS - end */

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   DS lane W1 (TASK-2026-163): the brand lockup, the roomy density, the sign-in card, the company and owner sign-in pages and the owner page - begin
   One block, between the S3 components and the lane anchors, so no page lane's append touches it. Everything here is drawn from tokens.css:
   a colour is a token, a size is a token or a step of the 4px scale, a corner is the 2px radius, a line is 1px, nothing carries a shadow.
   The Google sign-in button keeps the colours Google's branding rules ask for (its rules above are left alone, except its focus line).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* The roomy density (brand book, Spacing): the website, sign-in and the owner page read these four. The shop itself stays compact. */
[data-density="roomy"], .login-card, .company-signin, .owner-page-top, .owner-page-main {
  --rp-control: var(--control-roomy);
  --rp-row: var(--row-roomy);
  --rp-pad: var(--pad-roomy);
  --rp-header: var(--header-roomy);
}

/* The logo lockup (static/js/brand_lockup.js draws it): the mark on the physical right in both languages, the name beside it, the tagline under it at the name's width.
   The drawing is a left-to-right SVG, so the page's direction can never move the mark. */
[data-lockup] { display: inline-block; flex: none; height: 48px; max-width: 100%; font-family: var(--font-sans); line-height: 0; direction: ltr; }
[data-lockup] svg { display: block; height: 100%; width: auto; max-width: 100%; }
.rp-lk-fallback { display: inline-flex; align-items: center; gap: var(--space-2); direction: ltr; height: 100%; line-height: 1; }
.rp-lk-fallback-name { font-weight: 700; font-size: var(--fs-body-lg); color: var(--wordmark); }
.rp-lk-fallback-mark { height: 100%; width: auto; aspect-ratio: 1; }
.rp-lk-fallback-mark .rp-b1 { fill: var(--mark); }
.rp-lk-fallback-mark .rp-b2 { fill: var(--mark-2); }

/* ── The sign-in card (templates/index.html, #login-overlay) ─────────────────────────────────────────────────── */
.login-overlay { background: var(--bg); padding: var(--space-4); box-sizing: border-box; overflow-y: auto; align-items: safe center; }
.login-bg-anim { display: none; }   /* the old glow and blue wash: gradients and glows are not in the brand */
.login-card { background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius); padding: var(--rp-pad); max-width: 440px; box-shadow: none; backdrop-filter: none;
  animation-duration: var(--duration-calm); animation-timing-function: var(--ease-standard); }
.login-logo { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; margin-bottom: var(--space-8); }
.login-app-name { margin: 0; font-size: inherit; font-weight: 400; line-height: 0; color: inherit; background: none; -webkit-text-fill-color: currentColor; background-clip: border-box; }
.login-lockup { height: 64px; }   /* a mark 64px tall: the long tagline */
.login-card .login-logo-img { width: 72px !important; height: 72px !important; max-width: 72px !important; max-height: 72px !important; border-radius: var(--radius) !important; }
.login-card .login-logo-img:not([data-shown]) { display: none !important; }   /* brand_lockup.js sets data-shown while the shop has its own logo; the app's display rule on this picture carries !important */
.login-form { gap: var(--space-5); }
.login-error { background: var(--danger-tint); border: var(--border-width) solid var(--danger-line); color: var(--danger); padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-size: var(--fs-body); }
.login-hint { color: var(--muted); font-size: var(--fs-small); }
/* The floating label becomes a plain label above its field (brand book: label to control 6px; no capitals, no tracking). The label stays after the field in the markup. */
.login-card .login-form .form-group.floating { display: flex; flex-direction: column; }
.login-card .login-form .form-group.floating input + label,
.login-card .login-form .form-group.floating input:focus + label,
.login-card .login-form .form-group.floating input:not(:placeholder-shown) + label { position: static !important; order: -1; margin: 0 0 var(--space-2); font-size: var(--fs-small); font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; transition: none; }
.login-card .login-form .form-group.floating input { height: var(--rp-control); padding-block: 0; }
.login-card .login-form .btn-lg { height: var(--rp-control); }
/* The app's narrow-screen rule shrinks every .btn to 0.76rem (10.64px), under the 12px floor: the sign-in and owner pages keep the body size at every width. */
.login-card .btn, .company-signin .btn, body.owner-page .btn { font-size: var(--fs-body); padding: 0 var(--space-5); }
.login-card .btn-lg, .company-signin .company-signin-submit { font-size: var(--fs-body-lg); }
body.owner-page .btn-sm, body.owner-page .btn-xs { font-size: var(--fs-small); padding: 0 var(--space-3); }

/* ── The company and owner sign-in pages (company_signin.js, static/js/account/*) ────────────────────────────── */
.company-signin { background: var(--bg); }
.company-signin-top { padding: 0 var(--space-8); min-height: var(--rp-header); box-sizing: border-box; }
.company-signin-brand { display: flex; align-items: center; color: var(--text); }
.company-signin-lockup { height: 40px; }   /* a lockup with its tagline is never under 40px */
.company-signin-language { display: inline-flex; align-items: center; block-size: var(--control); padding: 0 var(--space-3); border: var(--border-width) solid transparent; border-radius: var(--radius); background: none; color: var(--muted); font: inherit; font-size: var(--fs-body); cursor: pointer; }
.company-signin-language:hover { color: var(--brand); background: var(--tint); text-decoration: none; }
.company-signin-language:focus-visible { outline: 0; border-color: var(--focus); }
.company-signin-main { padding: var(--space-16) var(--space-4) var(--space-8); }
.company-signin-panel { max-width: 440px; background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius); padding: var(--rp-pad); box-shadow: none; }
.company-signin-panel h2 { margin: 0 0 var(--space-5); font-size: var(--fs-heading); font-weight: 700; line-height: 1.4; color: var(--text); }
.company-signin-panel h2 + .company-signin-lead { margin-top: calc(-1 * var(--space-3)); }
.company-signin-lead { margin: 0 0 var(--space-5); color: var(--muted); font-size: var(--fs-body); line-height: 1.7; }
.company-signin-form { gap: var(--space-5); }
.company-signin-field > label, .company-signin-label-row label { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.company-signin-panel .company-signin-input { height: var(--rp-control); padding: 0 var(--space-3); border: var(--border-width) solid var(--field); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-body); }
.company-signin-panel .company-signin-input:focus, .company-signin-store:focus-within { outline: 0; border-color: var(--focus); box-shadow: none; }
.company-signin-store { height: var(--rp-control); border: var(--border-width) solid var(--field); border-radius: var(--radius); background: var(--surface); }
.company-signin-store.is-invalid { border-color: var(--danger); }
.company-signin-store-prefix { background: var(--sunken); color: var(--muted); border-inline-end: var(--border-width) solid var(--line); font-family: inherit; font-size: var(--fs-small); }
.company-signin-panel .company-signin-store input { font-family: inherit; font-size: var(--fs-body); font-weight: 700; letter-spacing: 0; }
.company-signin-help { font-size: var(--fs-small); color: var(--muted); }
.company-signin-help.is-error { color: var(--danger); }
.company-signin-link { color: var(--brand); font-size: var(--fs-small); font-weight: 700; border: var(--border-width) solid transparent; border-radius: var(--radius); }
.company-signin-link:focus-visible { outline: 0; border-color: var(--focus); }
.company-signin-check { font-size: var(--fs-body); color: var(--muted); }
.company-signin-check input { accent-color: var(--fill); color: var(--text); }
.company-signin-submit { height: var(--rp-control); font-size: var(--fs-body-lg); font-weight: 700; }
.company-signin-foot { font-size: var(--fs-small); color: var(--muted); }
.company-signin-foot .signin-legal a { color: var(--muted); font-size: var(--fs-small); }   /* the selector is longer than the later spec 018 rule it must beat */
.company-signin-foot .signin-legal a:hover { color: var(--brand); }
.company-signin-shop-logo img { border-radius: var(--radius); }
/* A notice is a tinted box with a 1px line on every side; the tone is in its icon and its tint, never a stripe down one side. */
.company-signin-notice { border: var(--border-width) solid var(--line-strong); border-radius: var(--radius); background: var(--sunken); }
.company-signin-notice b { font-size: var(--fs-body); font-weight: 700; color: var(--text); }
.company-signin-notice small, .company-signin-notice p { font-size: var(--fs-small); color: var(--muted); }
.company-signin-notice.is-danger { border-color: var(--danger-line); background: var(--danger-tint); }
.company-signin-notice.is-warning { border-color: var(--warning-line); background: var(--warning-tint); }
.company-signin-notice.is-info { border-color: var(--tint-strong); background: var(--tint); }
.company-signin-notice.is-info i { color: var(--brand); }
.owner-signin-google { height: var(--rp-control); font-weight: 400; }
.owner-signin-google:focus-visible { outline: 0; box-shadow: none; border-color: var(--focus); }
.owner-signin-or { color: var(--muted); font-size: var(--fs-small); }
.owner-signin-or::before, .owner-signin-or::after { border-top-color: var(--line); }
.company-signin-panel .owner-signin-code { font-size: var(--fs-heading); font-weight: 700; letter-spacing: 0; }
.owner-signin-resend .company-signin-help { font-variant-numeric: normal; }
.owner-signin-staff { border-top-color: var(--line); font-size: var(--fs-body); color: var(--muted); }
.owner-signin-phone { font-family: inherit; font-weight: 700; color: var(--text); }

/* ── The owner page (static/js/account/main.js: My shops, Security) ──────────────────────────────────────────── */
body.owner-page { background: var(--bg); }
.owner-page-top { padding: 0 var(--space-8); min-height: var(--rp-header); background: var(--surface); border-bottom: var(--border-width) solid var(--line); }
.owner-page-brand { color: var(--text); }
.owner-page-lockup { height: 40px; }
.owner-page-name { font-size: var(--fs-body); font-weight: 700; }
.owner-page-language { display: inline-flex; align-items: center; block-size: var(--control); padding: 0 var(--space-3); border: var(--border-width) solid transparent; border-radius: var(--radius); background: none; color: var(--muted); font: inherit; font-size: var(--fs-body); cursor: pointer; }
.owner-page-language:hover { color: var(--brand); background: var(--tint); text-decoration: none; }
.owner-page-language:focus-visible { outline: 0; border-color: var(--focus); }
.owner-page-main { padding: var(--space-8) var(--space-6) var(--space-16); }
.owner-page-main .settings-tabs-header { margin-bottom: var(--space-6); overflow-x: visible !important; overflow-y: visible !important; }   /* two tabs never overflow, and the strip's scroll box (an !important rule above) clipped the selected tab's lower line */
.owner-shops-head h2 { font-size: var(--fs-title); }
.owner-shops-head span { font-size: var(--fs-body); color: var(--muted); }
.owner-shop-list { gap: var(--space-4); }
.owner-shop-card { gap: var(--space-4) var(--space-6); padding: var(--rp-pad); background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius); }
.owner-shop-card.needs-attention { border: var(--border-width) solid var(--warning-line); }
.owner-shop-card h3 { font-size: var(--fs-body-lg); font-weight: 700; color: var(--text); }
.owner-shop-facts dt { font-size: var(--fs-small); color: var(--muted); }
.owner-shop-facts dd { font-size: var(--fs-body); font-weight: 700; color: var(--text); }
.owner-page-section { background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius); }
.owner-page-section-head { padding: var(--space-5) var(--rp-pad) 0; }
.owner-page-section-head h2 { font-size: var(--fs-body-lg); }
.owner-page-body { padding: var(--space-4) var(--rp-pad) var(--space-5); }
.owner-page-body + .owner-page-body { border-top-color: var(--line); }
.owner-page-body h3 { font-size: var(--fs-body); font-weight: 700; }
.owner-page-body p { font-size: var(--fs-body); color: var(--muted); }
.owner-page-steps { font-size: var(--fs-body); }
.owner-page-help { font-size: var(--fs-small); color: var(--muted); }
.owner-page-code { font-family: inherit; font-weight: 700; letter-spacing: 0; }
.owner-security-lead { font-size: var(--fs-body); color: var(--muted); }
.owner-security-row { padding: var(--space-3) 0; border-bottom-color: var(--line); }
.owner-security-row-label { font-size: var(--fs-small); color: var(--muted); }
.owner-security-row-value { font-size: var(--fs-body); font-weight: 700; }
.owner-security-note { font-weight: 400; font-size: var(--fs-small); color: var(--muted); }
.owner-security-result.is-ok { color: var(--success); }
.owner-security-result.is-failed { color: var(--danger); }
.owner-security-pager { font-size: var(--fs-small); color: var(--muted); }
.owner-security-qr { background: var(--paper); border-radius: var(--radius); }   /* a QR code is read by a camera: it stays dark on white in both looks */
.owner-security-codes { font-family: inherit; font-size: var(--fs-body); }
@media (max-width: 520px) {
  .company-signin-top, .owner-page-top { padding: 0 var(--space-4); }
  /* the lockup keeps its 40px (a lockup with its tagline is never smaller), so the language and sign-out buttons drop to a second line rather than push past the screen */
  .owner-page-top { flex-wrap: wrap; row-gap: var(--space-1); padding-block: var(--space-2); }
  .owner-page-top-end { margin-inline-start: auto; }
  .company-signin-main { padding: var(--space-6) var(--space-3) var(--space-6); }
  .company-signin-panel { padding: var(--space-6) var(--space-5); }
  .login-card { padding: var(--space-6) var(--space-5); }
  .owner-page-main { padding: var(--space-5) var(--space-3) var(--space-10); }
}
/* DS lane W1 - end */

/* DS lane anchors (TASK-2026-163 S1a): each page lane appends its new rules under its own anchor, nowhere else. */
/* ── The responsible-salesperson choice (TASK-2026-164) ───────────────────────────────────────────────────────────────────────────────
   One select on the Sales Report and Transactions bars (pinned in filter_bar.js) and beside the dashboard's period bar. The mockup's look is
   not copied: this only places the choice with the classes the page already has (the brand restyle is TASK-2026-163). Sides are logical; nothing
   here is toggled with the `hidden` attribute; a select keeps its own room for the arrow at the inline end (TASK-2026-157), so only the start
   padding is set. */
.sf-has-corner, .dashboard-period, .sd-section { position: relative; }
.sf-corner { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; margin: 0; z-index: 3; }
.dashboard-period:has(> .sf-corner), .filter-bar.sf-has-corner { padding-inline-end: 44px; }
.sd-section:has(> .sf-corner) > summary { padding-inline-end: 44px; }
.sf-table-card { position: relative; padding-top: 30px; }
.sf-table-card > .sf-corner { inset-block-start: 4px; inset-inline-end: 4px; }
.dashboard-period-seller { display: flex; align-items: center; gap: 8px; }
.dashboard-period-seller label { font-size: .78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.dashboard-period-seller select { width: auto; min-width: 11rem; max-width: 16rem; height: var(--control-sm, 36px); padding-block: 0; padding-inline-start: 10px; font-size: .82rem; border-radius: var(--radius); }
.dashboard-period-seller select.is-set { border-color: var(--border-active); color: var(--brand); }
.filter-bar .filter-pinned { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; }
.filter-bar .filter-pinned-label { font-size: .78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.filter-bar .filter-pinned-select { width: auto; min-width: 10rem; max-width: 16rem; height: var(--control); padding-block: 0; padding-inline-start: 10px; font-size: .82rem; border-radius: var(--radius); }
.seller-scope { white-space: nowrap; }
.seller-empty { display: grid; justify-items: center; gap: 6px; padding: 24px 16px; text-align: center; }
.seller-empty-title { margin: 0; font-weight: 700; color: var(--text); }
.seller-empty-detail { margin: 0; max-width: 52ch; color: var(--muted); font-size: .85rem; }
.seller-empty-detail:empty { display: none; }
.seller-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
@media (max-width: 768px) {
  .dashboard-period-seller, .filter-bar .filter-pinned { flex: 1 1 100%; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; }
  .dashboard-period-seller select, .filter-bar .filter-pinned-select { width: 100%; min-width: 0; max-width: none; }
}
/* ── end responsible salesperson ── */

/* DS lane: sell */
/* DS lane: stock */
/* DS lane: money */
/* DS lane: people */
/* DS lane: reports */
/* DS lane: admin */
/* DS lane: branches */
/* DS lane: widgets */
/* ── The password prompt and the text prompt (TASK-2026-169) ───────────────────────────────────────────────────────
   Both fields were styled inline (`border: 1.5px solid var(--line)` and a background), and an inline border outranks the one-line focus every
   other field draws (`input:focus { border-color: var(--focus) }`), so a focused prompt field looked exactly like an unfocused one: the only sign of the cursor
   was a caret blinking on and off, which read as the cursor leaving. They are the design system's field now, with nothing inline; only the password
   field keeps what is its own, the large centred dots. */
input.prompt-field-secret { text-align: center; font-size: 1.5rem; letter-spacing: 0.5rem; }
/* ── The one password field and the password dialogs (TASK-2026-163; static/js/password_field.js; the owner-approved password mockup) ──
   One field, drawn the same wherever a password is typed: the eye inside the field at the inline end, as tall as the field; the Caps Lock
   line and the error line under it; optional live rule checks, each an icon plus words (never colour alone). The field takes its height from
   the screen's density: the control token in the shop, the roomy control on the sign-in pages (--rp-control, set by the roomy density rule).
   Every side is logical. The two message lines are filled to show and emptied to hide (no hidden attribute), so an empty one is not drawn. Tokens only. */
.rp-pw-field { display: grid; gap: 6px; align-content: start; min-width: 0; margin: 0; }
.rp-pw-field__label { font-size: var(--fs-small); font-weight: 400; line-height: 1.5; color: var(--text); text-transform: none; letter-spacing: 0; }
.rp-pw-field__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.company-signin-panel .rp-pw-field__label { color: var(--muted); }   /* beside the sign-in page's other labels, which are the muted colour */
.rp-pw { position: relative; display: block; min-width: 0; }
.rp-pw .rp-pw__input { padding-inline: var(--space-3) var(--rp-control, var(--control)); }
.rp-pw__eye {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  display: grid; place-items: center; width: var(--rp-control, var(--control)); padding: 0;
  border: var(--border-width) solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; transition: var(--transition);
}
.rp-pw__eye:hover, .rp-pw__eye[aria-pressed="true"] { color: var(--brand); }
.rp-pw__eye:focus-visible { outline: 0; border-color: var(--focus); }
.rp-pw__icon { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.rp-pw__help { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); }
.rp-pw__help:empty { display: none; }
.rp-pw__help .rp-pw__icon { margin-block-start: 1px; }
.rp-pw__help--error { color: var(--danger); }
.rp-pw__help--warn { color: var(--warning); }
.rp-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--fs-caption); line-height: 1.5; }
.rp-rules li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.rp-rules li.is-met { color: var(--success); }
.rp-rules li.is-fail { color: var(--danger); }

/* The two password dialogs (Change my password, Set staff password): one column, the explanation behind the (i) beside Close, a secondary
   Cancel and a primary button at least 132px wide. The dialog is the app's own modal card, 480px (--dialog-w) wide. */
.modal-card.pw-dialog { max-width: var(--dialog-w); }
.pw-dialog .modal-header { gap: var(--space-2); }
.pw-dialog .modal-header h3 { flex: 1; }
.pw-dialog .modal-header .info-tip { margin-inline-start: 0; width: var(--info-button); height: var(--info-button); }
.pw-dialog .modal-close { display: grid; place-items: center; width: var(--control-sm); padding: 0; }
.pw-dialog .modal-close:hover { background: var(--tint); color: var(--brand); }
.pw-dialog__form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pw-dialog .modal-body { display: grid; gap: var(--space-4); align-content: start; }
.pw-dialog__sep { height: var(--border-width); margin: 0; border: 0; background: var(--line); }
.pw-dialog__who { display: flex; justify-content: space-between; gap: var(--space-4); margin: 0; padding: var(--space-3); background: var(--sunken); border-radius: var(--radius); font-size: var(--fs-small); }
.pw-dialog__who dt { color: var(--muted); }
.pw-dialog__who dd { margin: 0; font-weight: 700; }
.pw-dialog__notices:empty { display: none; }
.pw-dialog .modal-footer { flex-wrap: wrap; }
.pw-dialog .modal-footer .btn { min-width: 132px; }
@media (max-width: 480px) {
  .pw-dialog .modal-footer .btn { flex: 1 1 132px; }
}
/* ── end the one password field ── */

/* ── Spec 062 slice 1: the six shared pieces (TASK-2026-177) ──────────────────────────────────────────────────────
   Built from the approved mockup scratch/062-shared-pieces.html (artifact 8VckF2MzcPhCnS2LpuBEgw, owner 7.8/10,
   2026-10-18). Modules: hint.js, row_action_bar.js, status_badge.js, page_bar.js, fold_line.js, quiet_field.js (pinned here as ./quiet_field.js?v=1.0.0 until a page imports it). No page
   uses them yet; each page group adopts them in its own slice after its own mockup. Every class toggled with `hidden`
   that is given a display here has its [hidden] guard beside it (tests/test_hidden_attribute_actually_hides.py). */

/* FR-001 the Style C hint: the icon at the inline-end, the stripe on the start edge. */
.hint {
  --hint-fill: transparent; --hint-ring: var(--muted); --hint-glyph: var(--muted);
  position: relative; flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px;
  padding: 0; margin: 0; border: 0; border-radius: var(--radius); background: none; cursor: help; vertical-align: middle;
}
.hint::after { content: ""; position: absolute; inset: -4px; }
.hint svg { width: 16px; height: 16px; display: block; }
.hint:hover { background: var(--sunken); }
.hint:focus-visible { outline: var(--border-width) solid var(--focus); outline-offset: 0; }
.hint--warn { --hint-fill: var(--warning-solid); --hint-ring: transparent; --hint-glyph: #151C1E; }
.hint--ok { --hint-fill: var(--success-solid); --hint-ring: transparent; --hint-glyph: #FFFFFF; }
.hint__disc { fill: var(--hint-fill); stroke: var(--hint-ring); stroke-width: 1.2; }
.hint__mark { fill: none; stroke: var(--hint-glyph); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hint__dot { fill: var(--hint-glyph); }
@media (pointer: coarse) { .hint { width: 32px; height: 32px; } }
/* The (i) card takes the open hint's colour on its start edge. */
body:has(.hint--warn[aria-expanded="true"]) .info-tip-card { border-color: var(--warning-line); border-inline-start: 3px solid var(--warning-solid); }
body:has(.hint--ok[aria-expanded="true"]) .info-tip-card { border-color: var(--success-line); border-inline-start: 3px solid var(--success-solid); }
.tone-warn { --tone-stripe: var(--warning-solid); }
.tone-ok { --tone-stripe: var(--success-solid); }
.tone-info { --tone-stripe: var(--line-strong); }
tbody tr:is(.tone-warn, .tone-ok, .tone-info) > td:first-child { border-inline-start: 3px solid var(--tone-stripe, transparent); }
tbody tr.selected-row .hint--info { --hint-ring: var(--on-fill); --hint-glyph: var(--on-fill); }
tbody tr.selected-row .hint:hover { background: rgba(255, 255, 255, 0.12); }

/* FR-002 the always-visible row action bar: above the list, on a phone too. */
.row-bar {
  position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  min-height: 56px; padding: var(--space-2) var(--space-5); background: var(--surface); border-block: var(--border-width) solid var(--line);
}
.row-bar__sel { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 200px; min-width: 0; }
.row-bar__hint, .row-bar__key { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.row-bar__ref { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.row-bar__sub { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.row-bar__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.row-bar__btns .btn { min-width: 0; }
/* A greyed action keeps its hover look quiet, and still takes focus and a tap so it can say why. */
.row-bar .btn[aria-disabled="true"]:hover { border-color: var(--line-strong); color: inherit; }
.row-bar .btn-primary[aria-disabled="true"]:hover { background: var(--fill); color: var(--on-fill); border-color: transparent; }
[data-row-id] { cursor: pointer; }
tbody tr[data-row-id]:focus-visible { outline: var(--border-width) solid var(--focus); outline-offset: calc(-1 * var(--border-width)); }

/* FR-003 the five shared states; draft, submitted and completed (done) are the badges above. */
.badge-partial   { --b-fg: var(--warning); --b-bg: var(--warning-tint); --b-ln: var(--warning-line); }
.badge-cancelled { --b-fg: var(--muted); --b-bg: transparent; --b-ln: var(--line); opacity: .75; }
tbody tr.selected-row > td .badge-cancelled { opacity: 1; }

/* FR-004 the bottom bar of a working page: status at the start, total in the middle, one main button at the end. */
.page-bar {
  position: sticky; bottom: 0; z-index: 8; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-6); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: var(--border-width) solid var(--line-strong); box-shadow: 0 -6px 16px -10px rgba(3, 73, 89, .35);
}
.page-bar__status { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.page-bar__count { color: var(--muted); white-space: nowrap; }
.page-bar__total { display: grid; justify-items: center; line-height: 1.3; }
.page-bar__label { color: var(--muted); font-size: var(--fs-small); }
.page-bar__figure { font-size: 1.4286rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-bar__main { justify-self: end; }
.page-bar__main .btn { min-width: 180px; }

/* FR-005 the folded line: one summary line each, one open. */
.fold-list { display: grid; gap: var(--space-2); }
.fold-line { min-width: 0; background: var(--surface); border: var(--border-width) solid var(--line); border-inline-start: 3px solid var(--tone-stripe, var(--line-strong)); border-radius: var(--radius); }
.fold-line__row { display: flex; align-items: center; min-width: 0; padding-inline-end: var(--space-2); }
.fold-line__sum {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-4); flex: 1 1 auto; min-width: 0; min-height: var(--row);
  padding: 6px var(--space-3); border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.fold-line__sum:hover { background: var(--tint); }
.fold-line__sum:focus-visible { outline: var(--border-width) solid var(--focus); outline-offset: calc(-1 * var(--border-width)); }
.fold-line__chev { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform 150ms; }
.fold-line__sum[aria-expanded="true"] .fold-line__chev { transform: rotate(180deg); }
.fold-line__name { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 200px; min-width: 0; }
.fold-line__name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-line__code { color: var(--muted); font-size: var(--fs-caption); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.fold-line__qty { min-width: 72px; color: var(--muted); }
.fold-line__amount { min-width: 96px; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fold-line__body { display: grid; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-5); border-top: var(--border-width) solid var(--line); }
.fold-line__body[hidden] { display: none; }
.fold-line__foot { display: flex; justify-content: flex-end; }

/* FR-006 the quiet extra field: one line with Change, or only "+ Add". */
.quiet-field { display: grid; border-top: var(--border-width) solid var(--line); }
.quiet-field[hidden] { display: none; }
.quiet-field__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); min-height: var(--row); }
.quiet-field__line[hidden] { display: none; }
.quiet-field__label { flex: 0 0 150px; color: var(--muted); font-size: var(--fs-small); }
.quiet-field__value { flex: 1 1 160px; min-width: 0; font-weight: 700; }
.quiet-field__line .btn-ghost { margin-inline-start: auto; }
.quiet-field__edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); padding-block: var(--space-3); }
.quiet-field__edit[hidden] { display: none; }
.quiet-field__edit > :first-child { flex: 1 1 220px; max-width: 360px; min-width: 0; }
.quiet-field-adds { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); border-top: var(--border-width) solid var(--line); }
.quiet-field__plus { width: 16px; height: 16px; flex: none; }

@media (max-width: 600px) {
  .row-bar { padding-inline: var(--space-4); }
  .row-bar__btns { width: 100%; }
  .row-bar__btns .btn { flex: 1 1 auto; }
  .page-bar { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--space-4); }
  .page-bar__total { justify-items: end; }
  .page-bar__main { grid-column: 1 / -1; justify-self: stretch; }
  .page-bar__main .btn { width: 100%; }
  .fold-line__body { padding: var(--space-3) var(--space-4) var(--space-4); }
  .fold-line__qty { min-width: 0; }
  .quiet-field__label { flex-basis: 100%; }
}
/* ── end spec 062 slice 1 ── */


/* ── Spec 062 Stock: cats (TASK-2026-178) ── the Categories page: a row action bar over a tree drawn as rows. ── */
.cat-card .cat-card__top { min-block-size: 48px; }
.cat-card .cat-body { padding: 0; }
.cat-card .cat-table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.cat-table .tree-name { display: flex; align-items: center; gap: var(--space-2); flex: 0 1 auto; min-width: 0; padding-inline-start: calc(var(--cat-depth, 0) * 28px); overflow-wrap: anywhere; }
.cat-table .cat-desc-cell { color: var(--muted); }
.cat-table tbody tr.selected-row .cat-desc-cell { color: inherit; }
.cat-table .cat-desc { display: block; max-inline-size: 48ch; font-size: inherit; color: inherit; }
.cat-table .tree-toggle { color: inherit; }
.cat-head .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* ── Spec 062 Stock: po (TASK-2026-178) ── the purchase-order list: the bar above the rows, the card's (i) in the corner. */
.po062-card .table-wrapper { border: 0; border-radius: 0; box-shadow: none; }
.po062-card .row-bar { padding-inline-end: var(--corner-i-reserve); }
.po062-th-i { display: inline-flex; align-items: center; gap: 2px; }
.po062-hint-col { width: 48px; text-align: end; }
.po062-ph-only { display: none; }
@media (max-width: 600px) {
  .po062-wide { display: none; }
  .po062-ph-only { display: block; color: var(--muted); font-size: var(--fs-caption); }
}
/* ── end spec 062 Stock: po ── */

/* ── Spec 062 Stock: codes (TASK-2026-178) ── The Barcodes page, Select and print mode: the always-visible print bar, the product
   fold lines and the (i) in a card's top inline-end corner. The design canvas is untouched. */
.bc062-bar { min-width: 0; }
.bc062-bar .row-bar { border: var(--border-width) solid var(--line); border-radius: var(--radius); }
.bc062-bar .row-bar__ref { direction: inherit; }   /* a counted phrase reads in the page's direction, not as a code */
.barcode-selector-panel, .barcode-quick-label-panel { position: relative; }
.bc062-corner { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); z-index: 3; }
.barcode-selector-panel .barcode-selector-header { padding-inline-end: calc(var(--space-3) + 28px); }
.barcode-quick-label-panel > .section-title { padding-inline-end: calc(var(--space-3) + 28px); }
.fold-list > .barcode-product-group { border: 0; border-radius: 0; overflow: visible; }
.fold-line__row > .product-select-all-cb { flex: none; margin-inline: var(--space-2); }
.variant-row.has-hint { grid-template-columns: minmax(0, 1fr) auto auto; }
/* ── end Spec 062 Stock: codes ── */
/* ── Spec 062 Stock: prices (TASK-2026-178) ─────────────────────────────────────────────────────────────────────────
   The Prices page adopts the shared pieces (hint, row action bar, five states). What the pieces do not cover: the page's main
   button at the end of its heading, the room the card's (i) keeps above the bar, the (i) beside the Status heading, and the
   narrow Notes column that holds the row's hints. Logical sides only; nothing here is toggled with [hidden]. */
.pl-head-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pl-card-top { min-block-size: 52px; }
.th-i { display: inline-flex; align-items: center; gap: var(--space-1); }
.bx-table th.c-hint, .bx-table td.c-hint { inline-size: 1%; padding-inline: var(--space-2); text-align: end; white-space: nowrap; }
.bx-table td.c-hint .hint + .hint { margin-inline-start: var(--space-1); }
.pl-card > .row-bar, .pb-lists > .row-bar { border-inline: 0; }
.pb-tab-end .hint { margin-inline-start: var(--space-1); }
/* The page's own words for a state are longer than the fixed badge width: the badge grows, never clips. */
.pl-card .badge, .pb-lists .badge, .pb-detail .badge { width: auto; min-width: var(--badge-w); max-width: 100%; padding-inline: var(--space-3); }
/* The picked row inverts (owner 2026-09-21): the muted second lines and the progress bar of these tables follow it. */
.bx-table tbody tr.selected-row :is(small, .bx-muted, .bx-code, .pl-delta, .pb-delta) { color: inherit; opacity: .85; }
.bx-table tbody tr.selected-row td::before { color: inherit; opacity: .8; }
.bx-table tbody tr.selected-row .bx-prog-bar { background: rgba(255, 255, 255, 0.3); }
.bx-table tbody tr.selected-row .bx-prog-bar > span { background: var(--on-fill); }
/* ── end spec 062 Stock: prices ── */

/* ── Spec 062 Stock: tr (TASK-2026-178) ── Transfers between branches: the card strip that holds the (i) and the On the road value, the hint column and the
   status legend of the list. The bar, hints and badges are slice 1's; the table is branch_transfers.css's. Logical properties only. */
.tr062-strip { display: flex; align-items: center; justify-content: flex-end; min-height: 52px; padding: var(--space-3) var(--space-5); padding-inline-end: 56px; }
.tr062-fig { display: grid; text-align: end; }
.tr062-fig span { color: var(--muted); font-size: var(--fs-small); }
.tr062-fig b { font-size: 1.4286rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tr062-table th .th-i { display: inline-flex; align-items: center; gap: 2px; }
.tr062-table th, .tr062-table td { padding-inline: 10px; }
.tr062-table .bx-prog { min-inline-size: 100px; gap: 8px; }
.tr062-table th.c-hint, .tr062-table td.c-hint { inline-size: 48px; text-align: end; }
.tr062-table tbody tr[data-row-id] { cursor: pointer; }
.rcv-why-hint { display: inline-flex; align-items: center; }
/* On the inverted selected row the reference, the branch route and the date take the row's own colour. */
.tr062-table tbody tr.selected-row > td :is(.bx-ref, .bx-sub, .trf-route, .trf-arrow, .bx-n) { color: inherit; }
.tr062-table tbody tr.selected-row > td.bx-sub { color: inherit; opacity: .85; }
@container bx (max-width: 700px) {
  .tr062-strip { padding: var(--space-3) var(--space-4); padding-inline-end: 56px; }
  .tr062-fig { text-align: start; }
  /* a phone row: reference, status and hint on the first line (as the mockup draws it), the rest as label and value under it */
  .bx-table.tr062-table.is-stack tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px var(--space-2); }
  .bx-table.tr062-table.is-stack td { grid-column: 1 / -1; inline-size: auto; padding: 2px 0; }
  .bx-table.tr062-table.is-stack td:first-child { grid-column: 1; grid-row: 1; justify-content: flex-start; font-weight: 700; }
  .bx-table.tr062-table.is-stack td.c-st { grid-column: 2; grid-row: 1; }
  .bx-table.tr062-table.is-stack td.c-hint { grid-column: 3; grid-row: 1; }
  .bx-table.tr062-table.is-stack td:first-child::before, .bx-table.tr062-table.is-stack td.c-st::before { content: none; }
  .bx-table.tr062-table.is-stack td.c-hint:empty { display: none; }
  .bx-table.tr062-table.is-stack tbody tr.selected-row > td::before { color: inherit; opacity: .8; }
}
/* ── end spec 062 Stock: tr ── */
/* ── Spec 062 Stock: products (TASK-2026-178) ─────────────────────────────────────────────────────────────────────────
   Products and sizes as the approved Stock mockup draws them (scratch/062-stock.html, owner "build" 2026-10-18): the list's
   action bar replaces the hover buttons, the opened product's colours are fold lines below the list, each with a size table.
   The shared pieces (hint, row action bar, fold line) carry their own CSS in the "Spec 062 slice 1" block; only what they do
   not cover is here. Logical sides only; a class given a display and toggled with `hidden` has its [hidden] guard beside it. */

/* the list card's (i) is the corner (i) of the filter panel (.fx-info-corner); the sort line and the import notice (i) leave it room */
.stock062-products .fx-info-corner { inset-block-start: 0; inset-inline-end: 0; }
.stock062-products .fx-summary { padding-inline-end: calc(var(--info-button) + 8px); }
.stock062-products .fx-results:has(> .import-corner-tip) .fx-summary { padding-inline-end: calc(2 * var(--info-button) + 16px); }
.stock062-products .import-corner-tip { inset-block-start: 0; inset-inline-end: calc(var(--info-button) + 4px); }
.stock062-products .fx-results > .row-bar { margin-block-end: var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius); }
.stock062-products .stock062-hint-col, .stock062-products .stock062-hint-cell { width: 48px; text-align: end; }
.stock062-products .product-row > td.stock062-hint-cell { padding-inline-end: var(--space-3); }
/* The wide-list rule (TASK-2026-127) keeps the last column of a table whose last cell holds a button stuck at the edge, with a card colour of
   its own. Here the last cell is only a hint, and it must take its row's colour (the picked row is inverted), so the sticky look is switched off for
   these two tables; the ids carry the weight that rule's :has() selector has. */
#products-table :is(th, td):last-child, #sizes-body .stock062-size-table :is(th, td):last-child { position: static; border-inline-start: 0; }
#products-table tbody tr > td:last-child, #sizes-body .stock062-size-table tbody tr > td:last-child { z-index: auto; background-color: inherit; background-image: none; }

/* the opened product: the colours and sizes card below the list */
.stock062-sizes { margin-block-start: var(--space-6); }
.stock062-sizes[hidden] { display: none; }
.stock062-sizes-h { margin: 0; font-size: var(--fs-body-lg); font-weight: 700; }
.stock062-sizes > .card-body { display: grid; gap: var(--space-3); min-width: 0; }
.stock062-sizes-wait { padding-block: var(--space-2); }
.stock062-sizes .row-bar { position: static; border: var(--border-width) solid var(--line); border-radius: var(--radius); }
.stock062-none { padding-block: var(--space-6); text-align: center; }
.stock062-none h3 { margin: 0; color: var(--muted); font-size: var(--fs-body); font-weight: 600; }
.stock062-size-table { width: 100%; }
.stock062-size-table th.text-end, .stock062-size-table td.text-end { text-align: end; }
.stock062-size-table td { vertical-align: middle; }
.stock062-size-table .stock062-hint-col, .stock062-size-table .stock062-hint-cell { width: 48px; text-align: end; }
.stock062-size-row .matrix-qty-display { display: inline-block; min-width: 2ch; font-weight: 700; font-variant-numeric: tabular-nums; }
.stock062-size-row.saving .matrix-qty-display { opacity: .55; }
.stock062-off { color: var(--success); font-size: var(--fs-caption); }
tbody tr.selected-row .stock062-off { color: inherit; opacity: .85; }
.stock062-qty-input {
  box-sizing: border-box; width: 64px; height: 30px; padding: 2px 6px; text-align: center; font-weight: 700;
  background: var(--surface); color: var(--text); border: var(--border-width) solid var(--brand); border-radius: var(--radius);
}

/* the colours and sizes grid: a caption became a hint, kept at the end of its line */
.vg-note-line { display: flex; justify-content: flex-end; }
.vg-cell-hint { display: flex; justify-content: center; }
.variant-grid-notices:has(> .hint) { align-items: flex-end; }

@media (max-width: 768px) {
  .stock062-products .fx-table > tbody > tr.product-row > td.stock062-hint-cell:empty { display: none; }
  .stock062-products .fx-table > tbody > tr.product-row > td.stock062-hint-cell { width: auto; }
  .stock062-products #products-table > tbody > tr.product-row > td { height: auto; }
  .stock062-size-table th, .stock062-size-table td { padding-inline: var(--space-2); }
  .stock062-size-table th { white-space: normal; line-height: 1.3; }
}
/* ── end Spec 062 Stock: products ── */
/* ── Spec 062 Stock: stock (TASK-2026-178) ───────────────────────────────────────────────────────────────────────────
   Stock tracking and the stock count, drawn from the approved mockup (scratch/062-stock.html: pageStock, pageCount, countBar),
   built on the six shared pieces of the block above. Only what the pieces do not cover is here: the card's corner (i), four
   KPI cards, bare header buttons, the hint column, and the count's working page. Logical properties only; nothing here gives a
   display to something the code toggles with the hidden attribute (the transfer hint keeps its own guard above). ── */
.inventory-control-card { position: relative; }
.stock-corner { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; margin: 0; z-index: 3; }
.inventory-control-card .inventory-tabs { padding-inline-end: 52px; }

/* The header: bare buttons at the end, Manage locations at the start (no box round each group). */
.inventory-command-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 0; border: 0; background: transparent; }
.inventory-command-bar > .inventory-command-primary { margin-inline-end: auto; }
.inventory-command-bar .inventory-command-group,
html[data-theme^="retailpower"] .inventory-command-bar .inventory-command-group { padding: 0; border: 0; background: transparent; }
.inventory-transfer-hint { padding: 0; background: transparent; }

/* Four figures, none twice. */
.inventory-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 680px) { .inventory-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The selection tools are plain buttons above the action bar; the bar says how many rows are ticked. */
.inventory-tab-content .stock-selection-tools,
html[data-theme^="retailpower"] .inventory-tab-content .stock-selection-tools { padding: 0 0 8px; margin: 0; border: 0; background: transparent; }
.inventory-tab-content > .row-bar { margin-block-end: 8px; }

/* The Status heading carries the legend's (i); the last column carries a row's hint. */
.stock-th-i { display: inline-flex; align-items: center; gap: 4px; }
.inventory-data-table .stock-hint-cell, .inventory-count-table .stock-count-mark { width: 40px; text-align: end; }
.stock-ok-line { display: flex; align-items: center; gap: 8px; padding-block: 8px; }

/* Dialogs: a hint beside a title, a field label or an option; the dynamic hints of the count setup sit at the footer's start. */
.stock-count-dialog-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.stock-count-dialog-title h3 { margin: 0; }
.stock-count-setup-hints { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: auto; }
.stock-scope-opt { display: flex; align-items: center; gap: 6px; }
.stock-scope-opt > label { flex: 1 1 auto; min-width: 0; }
.stock-label-row { display: flex; align-items: center; gap: 6px; margin-block-end: 6px; }
.stock-label-row > label { margin-block-end: 0; }
.stock-opt { position: relative; }
.stock-opt > button { width: 100%; padding-inline-end: 36px; }
.stock-opt > .hint { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; }

/* The count's working page: the title and its two header actions, one card of folded products, the bottom bar. */
.stock-count-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.stock-count-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.stock-count-id h2 { margin: 0; font-size: 1.25rem; font-weight: 800; }
.stock-count-meta { color: var(--muted); }
.stock-count-card { padding: 14px; }
.stock-count-card-h { display: flex; align-items: center; min-height: 32px; margin-block-end: 10px; padding-inline-end: 40px; }
.stock-count-card-h h3 { margin: 0; font-size: 1rem; }
.stock-count-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.stock-count-sizes .form-group { margin: 0; }
.stock-count-sizes .form-label small { display: block; }
.stock-count-sizes .inventory-count-qty { width: 100%; }
@media (max-width: 600px) { .stock-count-head .page-header-actions { width: 100%; } .stock-count-head .page-header-actions .btn { flex: 1 1 auto; } }
/* ── end spec 062 stock ── */

/* ── Day and shift flow (TASK-2026-179 slice 2, static/js/day_shift_flow.js): built from the owner-approved mockup scratch/day-shift-flow.html (v2). ──
   Logical sides only. The panel slides in from the inline-end edge. Nothing here sets `display` on a control the code toggles with `hidden`
   without a companion rule for the attribute. */
.dsf-money, .dsf-time, .dsf-date { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.dsf-money { white-space: nowrap; }
.dsf-dash { color: var(--muted); }
.dsf-hint { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9286rem; }
.dsf-hint svg, .dsf-hint i { color: var(--warning); }
.dsf-ph { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.dsf-l { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.dsf-date { color: var(--muted); font-size: .9286rem; }
.dsf-quick { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); }
[dir="rtl"] .dsf-dir { transform: scaleX(-1); }
.dsf-bar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dsf-card { margin-bottom: 16px; }
.dsf-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.dsf-badge { display: inline-flex; align-items: center; justify-content: center; inline-size: 120px; block-size: 24px; border: 1px solid; border-radius: var(--radius); font-size: .9286rem; line-height: 1; flex: none; }
.dsf-badge.is-open { color: var(--info); background: var(--info-tint); border-color: var(--info-line); }
.dsf-badge.is-closed { color: var(--warning); background: var(--warning-tint); border-color: var(--warning-line); }
.dsf-badge.is-verified { color: var(--success); background: var(--success-tint); border-color: var(--success-line); }
.dsf-badge.is-neutral { color: var(--muted); background: var(--sunken); border-color: var(--line); }
.dsf-dm { display: inline-flex; vertical-align: middle; }
.dsf-dm.is-ok { color: var(--success); }
.dsf-dm.is-off { color: var(--warning); }

/* the quiet "Close the day now?" banner */
.dsf-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--sunken); border: 1px solid var(--line); border-inline-start: 3px solid var(--brand); border-radius: var(--radius); padding-block: 8px; padding-inline: 12px 8px; margin-bottom: 16px; }
.dsf-banner > i, .dsf-banner > svg { color: var(--success); }
.dsf-bn-t { flex: 1; min-inline-size: 200px; }
.dsf-bn-x { inline-size: 32px; block-size: 32px; border: 1px solid transparent; background: transparent; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); }
.dsf-bn-x:hover { background: var(--tint); }

/* shift rows */
.dsf-rows { display: flex; flex-direction: column; }
.dsf-rowx, .dsf-rowh { display: grid; grid-template-columns: minmax(0, 1.3fr) 120px repeat(2, minmax(0, 1fr)) repeat(3, minmax(0, 1fr)); gap: 16px; align-items: center; padding-inline: 20px; }
.dsf-rowh { min-block-size: 40px; font-size: .9286rem; color: var(--muted); border-block-end: 1px solid var(--line-strong); }
.dsf-rowx { min-block-size: 64px; padding-block: 8px; border-block-end: 1px solid var(--line); border-inline-start: 3px solid transparent; text-align: start; transition: background-color 150ms var(--ease-standard); }
.dsf-rowx:last-child { border-block-end: 0; }
.dsf-rowx.is-act { cursor: pointer; }
.dsf-rowx.is-act:hover { background: var(--tint); }
.dsf-rowx.is-flag { border-inline-start-color: var(--warning-solid); }
.dsf-rowx:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--focus); }
.dsf-emp, .dsf-who { display: flex; flex-direction: column; line-height: 1.4; }
.dsf-emp small, .dsf-who small, .dsf-rsn, .dsf-lbl { color: var(--muted); }
.dsf-fig { text-align: end; }
.dsf-lbl { display: none; font-size: .8571rem; }
.dsf-whos, .dsf-figs { display: contents; }
.dsf-dv { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.4; }
.dsf-dline, .dsf-diffline { display: inline-flex; align-items: center; gap: 6px; }
.dsf-rsn { font-size: .8571rem; max-inline-size: 100%; overflow-wrap: anywhere; }

/* the shift card */
.dsf-vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
.dsf-val small { display: block; color: var(--muted); line-height: 1.5; }
.dsf-val b { font-size: 1.4286rem; line-height: 1.4; font-weight: 700; }
.dsf-val b.is-t { font-size: 1rem; font-weight: 400; }

/* closing settings */
.dsf-setrow { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding-block: 16px; border-block-end: 1px solid var(--line); }
.dsf-setrow:first-child { padding-block-start: 0; }
.dsf-setrow:last-of-type { border-block-end: 0; padding-block-end: 0; }
.dsf-sd { flex: 1; min-inline-size: 0; }
.dsf-sd b { display: block; font-weight: 700; }
.dsf-sd small { display: block; color: var(--muted); line-height: 1.5; }
.dsf-ctl { display: flex; align-items: center; gap: 12px; flex: none; }
.dsf-swl { min-inline-size: 48px; color: var(--muted); font-size: .9286rem; }
.dsf-sw { inline-size: 44px; block-size: 24px; padding: 2px; display: flex; align-items: center; justify-content: flex-start; background: var(--surface); border: 1px solid var(--field); border-radius: var(--radius); cursor: pointer; }
.dsf-sw span { inline-size: 18px; block-size: 18px; background: var(--field); border-radius: var(--radius); transition: background-color 150ms var(--ease-standard); }
.dsf-sw[aria-checked="true"] { background: var(--fill); border-color: var(--fill); justify-content: flex-end; }
.dsf-sw[aria-checked="true"] span { background: var(--on-fill); }
.dsf-sw:disabled { opacity: .5; cursor: not-allowed; }
.dsf-sw:focus-visible, .dsf-seg button:focus-visible, .dsf-bn-x:focus-visible, .dsf-x:focus-visible, .dsf-pr-head:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.dsf-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); max-inline-size: 100%; }
.dsf-seg button { border: 0; background: transparent; min-block-size: 32px; padding: 4px 12px; cursor: pointer; font-size: .9286rem; border-radius: 0; line-height: 1.4; color: var(--text); }
.dsf-seg button + button { border-inline-start: 1px solid var(--line); }
.dsf-seg button[aria-pressed="true"] { background: var(--tint-strong); color: var(--brand); font-weight: 700; }
.dsf-seg button:disabled { cursor: not-allowed; opacity: .6; }
.dsf-setnote { margin: 12px 0 0; }
.dsf-diff { margin-block-start: 4px; }
.dsf-follow .checkbox-group { margin-block-end: 4px; }

/* the sticky bottom bar */
.dsf-bottom { position: sticky; inset-block-end: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 12px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; z-index: 5; margin-block: 16px; }
.dsf-st-line { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-inline-size: 180px; }
.dsf-st-line > i, .dsf-st-line > svg { color: var(--warning); }
.dsf-st-line.is-good > i, .dsf-st-line.is-good > svg { color: var(--success); }
.dsf-tot small { display: block; color: var(--muted); line-height: 1.3; }
.dsf-tot b { font-size: 1.4286rem; line-height: 1.3; }

/* count form */
.dsf-cg-head, .dsf-cg-row { display: grid; grid-template-columns: 1fr 88px 1fr; gap: 12px; align-items: center; }
.dsf-cg-head { font-size: .9286rem; color: var(--muted); padding-block-end: 4px; border-block-end: 1px solid var(--line-strong); }
.dsf-cg-head span:nth-child(n+2) { text-align: end; }
.dsf-cg-row { min-block-size: 44px; border-block-end: 1px solid var(--line); }
.dsf-qty { inline-size: 88px; block-size: 32px; border: 1px solid var(--field); background: var(--surface); color: var(--text); border-radius: var(--radius); padding: 0 8px; text-align: end; direction: ltr; box-sizing: border-box; }
.dsf-sub { text-align: end; }
.dsf-qty:focus, .dsf-reason-in:focus, .dsf-float-in:focus { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.dsf-cg-sum { display: grid; gap: 12px; margin-block-start: 16px; padding: 12px; background: var(--sunken); border-radius: var(--radius); }
.dsf-cg-sum small { display: block; color: var(--muted); line-height: 1.4; }
.dsf-cg-sum b { font-size: 1.1429rem; }
.dsf-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; color: var(--muted); font-size: .9286rem; }
.dsf-note > i, .dsf-note > svg { margin-block-start: 3px; color: var(--info); }
.dsf-float { margin-block-start: 16px; padding: 12px; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); }
.dsf-float-in, .dsf-reason-in { inline-size: 100%; block-size: 40px; border: 1px solid var(--field); background: var(--surface); color: var(--text); border-radius: var(--radius); padding: 0 12px; box-sizing: border-box; }
.dsf-float-in { text-align: end; }
.dsf-float-in[aria-invalid="true"] { border-color: var(--danger); }
.dsf-fhint { display: block; margin-block-start: 6px; color: var(--muted); }
.dsf-fhint.is-bad { color: var(--danger); }
.dsf-rbox { margin-block-start: 16px; padding: 12px; border: 1px solid var(--warning-line); background: var(--warning-tint); border-radius: var(--radius); }
.dsf-rl { display: block; font-weight: 700; margin-block-end: 6px; }
.dsf-req { color: var(--danger); }
.dsf-rerr { display: block; margin-block-start: 6px; color: var(--warning); }
.dsf-rdone { margin-block-start: 16px; padding: 12px; background: var(--sunken); border-radius: var(--radius); }
.dsf-rdone small { display: block; color: var(--muted); }
.dsf-vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px; background: var(--sunken); border-radius: var(--radius); margin-block-start: 8px; }
.dsf-vgrid small { display: block; color: var(--muted); line-height: 1.4; }
.dsf-vgrid b { font-size: 1.1429rem; }
.dsf-pr-act { display: flex; justify-content: flex-end; margin-block-start: 16px; }

/* the overlays: one scrim, the side panel, the dialog */
.dsf-scrim { position: fixed; inset: 0; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 250ms var(--ease-standard); z-index: 1200; }
.dsf-scrim.is-on { opacity: 1; pointer-events: auto; }
.dsf-sheet { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(520px, calc(100 * var(--vw))); background: var(--surface); border-inline-start: 1px solid var(--line-strong); box-shadow: var(--shadow-float); z-index: 1210; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 250ms var(--ease-standard); visibility: hidden; }
[dir="rtl"] .dsf-sheet { transform: translateX(-100%); }
.dsf-sheet.is-on { transform: none; visibility: visible; }
.dsf-sheet-h { min-block-size: 56px; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-block-end: 1px solid var(--line); }
.dsf-sheet-h h2 { margin: 0; font-size: 1.1429rem; line-height: 1.4; }
.dsf-x { inline-size: 32px; block-size: 32px; border: 1px solid transparent; background: transparent; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); }
.dsf-x:hover { background: var(--tint); }
.dsf-sheet-b { padding: 16px 20px; overflow-y: auto; flex: 1; }
.dsf-sheet-f { padding: 16px 20px; border-block-start: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.dsf-sheet-f.is-end { justify-content: flex-end; }
.dsf-psum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px; background: var(--sunken); border-radius: var(--radius); margin-block-end: 16px; }
.dsf-psum small { display: block; color: var(--muted); line-height: 1.4; }
.dsf-psum b { font-size: 1.0714rem; line-height: 1.4; }
.dsf-prog { color: var(--muted); font-size: .9286rem; margin-block-end: 12px; }
.dsf-pr { border: 1px solid var(--line); border-radius: var(--radius); margin-block-end: 8px; background: var(--card); }
.dsf-pr.is-open { border-color: var(--line-strong); background: var(--surface); }
.dsf-pr.is-lock { background: var(--sunken); }
.dsf-pr-head { inline-size: 100%; border: 1px solid transparent; background: transparent; color: var(--text); min-block-size: 56px; padding: 8px 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; text-align: start; cursor: pointer; border-radius: var(--radius); }
.dsf-pr-head:disabled { cursor: default; }
.dsf-pr-head:hover:not(:disabled) { background: var(--tint); }
.dsf-pr-head .dsf-emp { flex: 1 1 150px; min-inline-size: 0; }
.dsf-pr-head .dsf-badge, .dsf-pr-head .badge { inline-size: 96px; justify-content: center; }
.dsf-pr-head .dsf-emp small { display: block; }
.dsf-pact { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-inline-size: 84px; block-size: 32px; padding: 0 12px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--radius); font-size: .9286rem; line-height: 1; white-space: nowrap; }
.dsf-pact.is-go { background: var(--fill); border-color: var(--fill); color: var(--on-fill); font-weight: 700; }
.dsf-pact.is-done { border-color: transparent; background: transparent; color: var(--success); }
.dsf-pact.is-wait { border-color: transparent; background: transparent; color: var(--muted); }
.dsf-pr-body { padding: 4px 12px 16px; }
.dsf-ck { display: flex; align-items: center; gap: 12px; min-block-size: 48px; border-block-end: 1px solid var(--line); cursor: pointer; }
.dsf-ck input { inline-size: 16px; block-size: 16px; accent-color: var(--fill); }
.dsf-dlg { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; z-index: 1220; }
.dsf-dlg.is-on { display: flex; }
.dsf-dlg-in { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-float); inline-size: min(520px, 100%); max-block-size: calc(100 * var(--vh) - 32px); display: flex; flex-direction: column; }
@media (prefers-reduced-motion: reduce) { .dsf-scrim, .dsf-sheet, .dsf-rowx, .dsf-sw span { transition-duration: .01ms; } }
@media (max-width: 760px) {
  .dsf-rowh { display: none; }
  .dsf-rowx { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 12px; }
  .dsf-whos, .dsf-figs { display: flex; flex-direction: column; gap: 4px; }
  .dsf-whos > div, .dsf-figs > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: start; }
  .dsf-lbl { display: block; }
  .dsf-vals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsf-bottom { padding: 12px 16px; }
  .dsf-bottom .btn { flex: 1; }
  .dsf-setrow { flex-direction: column; align-items: stretch; }
  .dsf-ctl { justify-content: space-between; }
  .dsf-setrow .dsf-seg { flex-direction: column; inline-size: 100%; }
  .dsf-setrow .dsf-seg button + button { border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .dsf-psum, .dsf-vgrid { grid-template-columns: minmax(0, 1fr); }
  .dsf-banner .btn { flex: 1; }
}

/* ── TASK-2026-194: the state menu of an Attendance day cell, and the Detailed / Compact switch of the cashier shift screen — tokens only, logical sides ── */
.att-cell-menu { position: fixed; z-index: var(--z-toast); display: grid; gap: 2px; min-inline-size: 11rem; max-inline-size: calc(100 * var(--vw, 1vw) - 24px); padding: var(--space-1); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.att-cell-menu__item { display: flex; align-items: center; gap: var(--space-2); inline-size: 100%; padding: 6px var(--space-2); border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-small); text-align: start; cursor: pointer; }
.att-cell-menu__item:hover, .att-cell-menu__item:focus-visible { background: var(--sunken); }
.att-cell-menu__item:focus-visible { outline: var(--focus-width, 2px) solid var(--focus); outline-offset: -2px; }
.att-cell-menu__item[aria-checked="true"] { font-weight: 700; }
.att-cell-menu__item .stf-mxb { flex: none; }
.att-cell-menu__more { margin-block-start: var(--space-1); border-block-start: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); color: var(--muted); }
button.stf-mxb[aria-expanded="true"] { border-color: var(--line-strong); box-shadow: 0 0 0 2px var(--focus); }
.shift-layout-bar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-3); }
.shift-layout-label { color: var(--muted); font-size: var(--fs-small); }
.shift-layout-switch { display: inline-flex; gap: var(--space-1); }
.shift-layout-switch .btn[aria-pressed="true"] { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.shift-detail-who { margin: 0 0 var(--space-3); display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.shift-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); }
.shift-detail-card { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.shift-detail-card.is-expectation { border-style: dashed; border-color: var(--line-strong); }
.shift-detail-icon { position: absolute; inset-block-start: var(--space-3); inset-inline-end: 2.75rem; color: var(--muted); }
.shift-detail-icon i, .shift-detail-icon svg { font-size: 1.1rem; inline-size: 1.1rem; block-size: 1.1rem; }
.shift-detail-label { color: var(--muted); font-size: var(--fs-small); padding-inline-end: 4.25rem; }
.shift-detail-card .shift-detail-tip, .shift-detail-panel .shift-detail-tip { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); }
.shift-detail-panel.is-tipped { position: relative; }
.shift-detail-panel.is-tipped h4 { padding-inline-end: 2rem; }
.shift-detail-value { font-size: var(--fs-title); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.shift-detail-sub { color: var(--muted); font-size: var(--fs-small); }
.shift-detail-pay { margin-block-start: var(--space-4); }
.shift-detail-panel { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); }
.shift-detail-panel h4 { margin: 0 0 var(--space-2); font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.shift-detail-none { margin: 0; }
/* ── end TASK-2026-194 ── */

/* TASK-2026-189: the staff group's blocks stand here, above the Sales group's, because test_187_till_actions reads everything from lane T3's block to the spec 004 line and wants no `!important` in it; the staff rules need theirs to beat the shared selected-row rules. */
/* ===== TASK-2026-189 lane P0: the staff group's shared bottom bar, card corner, group rows and chips (spec 062 FR-011) ===== */
/* the bottom bar: the picked row on the start side, its buttons, then the page's one main button (staff_parts.js staffBarHtml) */
.stf-bar { position: sticky; inset-block: auto 0; z-index: 20; justify-content: space-between; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--card); border: var(--border-width) solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-float); }
.stf-bar .stf-sel { min-height: 44px; padding-inline-start: var(--space-3); border-inline-start: 3px solid var(--tone-stripe, var(--line-strong)); }
.stf-bar .stf-sel { flex: 1 1 200px; }
.stf-bar .stf-sel.is-empty { border-inline-start-color: var(--line); }
.stf-bar .stf-sel .row-bar__ref > span:first-child { overflow-wrap: anywhere; }
.stf-bar .stf-row { flex: 0 1 auto; justify-content: flex-end; }
.stf-bar .stf-main .btn-primary { min-width: 160px; }
.stf-bar .btn-primary[aria-disabled="true"] { opacity: .45; }

/* a card of the staff pages: its (i) sits in the top inline-end corner, the heading keeps clear of it */
.stf-card { position: relative; }
.stf-card > .card-header { padding-inline-end: var(--corner-i-reserve, 44px); }
.stf-card > .stf-corner { position: absolute; inset-block-start: var(--corner-i-inset, 10px); inset-inline-end: var(--corner-i-inset, 10px); margin: 0; z-index: 3; }

/* list rows: the picked row fills to its last cell even when that cell holds a hint button */
.table-wrapper table.mr-tbl tbody tr.selected-row > td:last-child { background-color: var(--fill) !important; }
.mr-tbl tbody tr.selected-row .stf-chipn { color: var(--on-fill); }

/* branch groups inside a selectable list */
.mr-tbl tr.stf-grp > th { background: var(--sunken) !important; padding: .55rem .75rem; text-align: start; font-size: .85rem; font-weight: 700; color: var(--text); border-block-end: 1px solid var(--line); white-space: normal; text-transform: none; letter-spacing: 0; }
.mr-tbl tr.stf-grp > th { position: static !important; }
.mr-tbl tr.stf-grp th > .mb-gbtn { margin-inline-end: var(--space-2); }

/* the person cell: the app's avatar, the name, the login under it */
.stf-who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.stf-who > span:last-child { display: grid; min-width: 0; }
.stf-who b { overflow-wrap: anywhere; }
.stf-nm { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--space-2); }
.stf-nm .badge { width: auto; font-size: 12px; }

/* a chip's count, quiet beside its words */
.stf-chipn { margin-inline-start: var(--space-2); font-size: 12px; font-weight: 400; opacity: .85; }
.btn[aria-pressed="true"] .stf-chipn { opacity: 1; }

/* a label above a segmented choice in a window */
.stf-lbl { display: block; font-size: var(--fs-small); line-height: 1.5; color: var(--text); margin-bottom: 6px; }
.stf-seg { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.stf-seg .btn[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); border-color: transparent; font-weight: 700; }

@media (max-width: 768px) {
  .stf-bar .stf-row { flex: 1 1 100%; justify-content: flex-start; }
  .stf-bar .stf-row .btn { flex: 1 1 auto; }
  .stf-bar .stf-main .btn-primary { min-width: 0; }
}
/* ===== end TASK-2026-189 lane P0 ===== */
/* ===== TASK-2026-189 lane A1: the Attendance page (spec 062 FR-011) ===== */
.stf-now { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.stf-now .form-group { margin-bottom: 0; }
.stf-now select { width: 100%; }
.stf-att td .stf-dash { color: var(--text-muted); }
@media (max-width: 768px) {
  .stf-now { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}
/* ===== end TASK-2026-189 lane A1 ===== */

/* ===== TASK-2026-189 lane S1: the Tasks page (todos.js) ===== */
.sa-fbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.sa-fbar .mb-chips { margin-inline-start: 0; }
.stf-prog { margin-inline-start: auto; color: var(--muted); font-size: var(--fs-small); }
.stf-per { display: inline-flex; align-items: center; gap: var(--space-2); }
.stf-per > i { color: var(--muted); font-size: 12px; width: 14px; text-align: center; }
.mr-tbl tbody tr.selected-row .stf-per > i { color: var(--on-fill); }
.mr-tbl td.stf-tt { white-space: normal; min-width: 14rem; overflow-wrap: anywhere; }
.sa-fbar .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.stf-q { display: grid; gap: var(--space-1); margin: 0; }
.stf-q > span { color: var(--muted); font-size: var(--fs-small); }
/* ===== end TASK-2026-189 lane S1 ===== */

/* ===== TASK-2026-189 lane T1: the Permissions and Employment tabs as the approved staff mockup (spec 062 FR-011) ===== */
/* the two tabs: cards stacked, the bottom bar sticking to the foot of the screen like the other staff pages */
.stf-perm, .stf-emp-t1 { display: grid; gap: var(--space-4); }
.stf-perm > .stf-card, .stf-emp-t1 > .stf-card { margin: 0; }

/* Permissions: the roles with the symbols' (i), the search and quick filters kept in the card (no longer pinned to the page top), the six area tiles */
.stf-roles-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-3); }
.stf-roles-row .mb-chips { margin-inline-start: 0; }
.stf-roles-row .perm2-legend { margin-inline-start: auto; }
.stf-roles .btn { gap: var(--space-1); }
.stf-perm .perm2-qdock { margin-block-end: var(--space-3); }
.stf-perm .perm2-person { margin-block-end: var(--space-3); }
.stf-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stf-area.is-dim { opacity: .5; }
.stf-area > small { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.stf-track { position: relative; display: block; inline-size: 100%; block-size: 8px; margin-block-start: var(--space-2); background: var(--sunken); border-radius: 2px; }
.stf-track > b { position: absolute; inset-block: 0; inset-inline-start: 0; display: block; background: var(--chart-1, var(--brand)); border-radius: 2px; }
.stf-pp { margin-block-start: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.stf-pp .ta-panel-title { margin-block-start: 0; }
.stf-give { margin-block-start: var(--space-4); }
.perm2-win .stf-give { padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); }

/* Employment: six stage tiles, the list, the settlement card with the employment record in a fold, the More menu above the bar */
.stf-stg { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.moa-cat.is-zero:not([aria-pressed="true"]) > b { color: var(--muted); }
.stf-gap { block-size: var(--space-3); }
.stf-rec { position: relative; }
.stf-rec-i { display: flex; justify-content: flex-end; margin-block-end: var(--space-2); }
.stf-setc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-3); }
.stf-emp-t1 .mr-fold { margin-block-start: var(--space-3); }
.stf-emp-t1 > .mr-fold-p { padding-block: var(--space-3); }
.stf-menu { inset-block: auto calc(100% + 6px); inset-inline-end: auto; min-inline-size: 240px; max-inline-size: calc(100vw - 2 * var(--space-4)); }
.stf-menu .emp2-mi { min-block-size: 40px; }
@media (max-width: 1100px) {
  .stf-stg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stf-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .stf-stg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stf-roles-row .perm2-legend { margin-inline-start: 0; }
}
@media (max-width: 560px) {
  .stf-areas { grid-template-columns: minmax(0, 1fr); }
}
/* ===== end TASK-2026-189 lane T1 ===== */

/* ===== TASK-2026-189 lane E1: Employees, Directory, Attendance matrix, Leaves, Adjustments (spec 062 FR-011, mockup scratch/staff.html) ===== */
.kpi-grid.mr-kpis.stf-k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid.mr-kpis.stf-k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stf-dirtab > .kpi-grid.mr-kpis, .stf-lvtab > .kpi-grid.mr-kpis { margin-block-end: var(--space-4); }

/* the picked row on the bar: the name with its badge, the detail under it, in the page's own direction (a name is words, not a code) */
.stf-bar .stf-sel:not(.is-empty) { display: grid; gap: 2px; align-content: center; }
.stf-bar .row-bar__ref { direction: inherit; white-space: normal; display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.stf-bar .row-bar__sub { white-space: normal; }

/* the filter line above a list: search, selects, chips */
.stf-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.stf-fbar .mb-chips { margin-inline-start: 0; }
.stf-fbar select { width: auto; min-width: 11rem; max-width: 100%; }
.stf-fq { flex: 1 1 14rem; min-width: 0; }
.stf-fq input { width: 100%; }
/* the day range of a list's filter row (From, To) and its Clear: the same height as the selects beside them */
.stf-fbar .sl-date .form-control { width: auto; min-width: 9.5rem; }
.stf-fbar .stf-fclear { align-self: center; }

/* the directory: a picked person's details open beneath the row, with no button inside */
.mr-tbl tr.stf-detail > td { padding: var(--space-3) var(--space-4) var(--space-4); background: var(--surface) !important; white-space: normal; border-inline-start: 3px solid var(--fill); }
.stf-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mr-tbl.stf-dir td.mb-c-name { min-width: 14rem; }
.mr-tbl tbody tr.selected-row .emp-dir-av { background: transparent; border-color: var(--on-fill); color: var(--on-fill); }
.mr-tbl tbody tr.selected-row .emp-dir-role { border-color: var(--on-fill); color: var(--on-fill); }
.mr-tbl tbody tr.selected-row :is(.emp-dir-cur, .emp2-cur) { color: var(--on-fill); }
.mr-tbl tbody tr.selected-row .badge { background: transparent; border-color: var(--on-fill); color: var(--on-fill); opacity: 1; }

/* the type of an adjustment: its icon and its word */
.stf-per { display: inline-flex; align-items: center; gap: var(--space-2); }
.stf-per > i { color: var(--muted); font-size: 12px; width: 14px; text-align: center; }
.mr-tbl tbody tr.selected-row .stf-per > i { color: var(--on-fill); }
.stf-adjk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stf-gap { height: var(--space-3); }

/* the attendance matrix: a quiet mark per day, one colour per state */
.stf-legend { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-small); color: var(--muted); }
.stf-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.stf-mxw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.stf-mx { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: var(--fs-small); }
.stf-mx th, .stf-mx td { padding: 4px 2px; border-bottom: 1px solid var(--line); text-align: center; }
.stf-mx thead th { color: var(--muted); font-weight: 400; background: var(--surface); }
.stf-mx th.stf-mxd { min-width: 30px; }
.stf-mx th.stf-mxd.is-today { color: var(--brand); font-weight: 700; }
.stf-mx th.stf-mxn { position: sticky; inset-inline-start: 0; z-index: 1; min-width: 10.5rem; padding-inline: var(--space-3); text-align: start; background: var(--card); border-inline-end: 1px solid var(--line); font-weight: 400; }
.stf-mx th.stf-mxn b { display: block; font-weight: 700; color: var(--text); }
.stf-mx th.stf-mxn .stf-mxn-who { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.stf-mx th.stf-mxn .stf-mxn-name { min-inline-size: 0; }
.stf-mx th.stf-mxn .mr-sub { display: block; color: var(--muted); font-size: 12px; }
.stf-mx tr.stf-mxg > th { padding: var(--space-2) var(--space-3); text-align: start; background: var(--sunken); color: var(--text); font-weight: 700; }
.stf-mx tr.stf-mxg > th > span { position: sticky; inset-inline-start: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); }
.stf-mx tr.stf-mxg > th i { color: var(--muted); font-size: 12px; }
.stf-mx tr[data-sl-off], .stf-mx tr.attendance-row-hidden { display: none; }
.stf-mxb { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; }
span.stf-mxb { cursor: default; }
.stf-mxc.is-future > span { display: none; }
button.stf-mxb:hover { border-color: var(--line-strong); }
button.stf-mxb:focus-visible { outline: var(--focus-width, 2px) solid var(--focus); outline-offset: 1px; }
.stf-mxb.is-p { background: transparent; border-color: var(--line); color: var(--success); }
.stf-mxb.is-a { background: var(--warning-tint); border-color: var(--warning-line); color: var(--warning); }
.stf-mxb.is-x, .stf-mxb.is-l { background: var(--info-tint); border-color: var(--info-line); color: var(--info); }
.stf-mxb.is-n { border-style: dashed; border-color: var(--line-strong); color: var(--text); }
.stf-mxb.is-o { background: var(--sunken); border-color: transparent; color: var(--muted); font-weight: 400; }
button.stf-mxb.selected-row { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.attendance-hidden-strip.stf-hid { margin: var(--space-3) 0 0; padding: 0; background: none; }

/* the windows: the quiet "+ Add a note" and the note it opens */
.stf-note { padding-top: var(--space-3); }

/* the annual balance, folded under the leave list */
.stf-lvtab .mr-card .mr-fold { margin-block-start: var(--space-4); }

@media (max-width: 1100px) {
  /* the site-wide rule folds every .kpi-grid to one column here; two or three cards still sit side by side down to a phone */
  .kpi-grid.mr-kpis.stf-k3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .kpi-grid.mr-kpis.stf-k2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stf-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .kpi-grid.mr-kpis.stf-k3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpi-grid.mr-kpis.stf-k3 > .kpi-card:last-child:nth-child(3) { grid-column: 1 / -1; }
  .kpi-grid.mr-kpis .kpi-value { white-space: normal; overflow-wrap: anywhere; font-size: var(--fs-body); }
  .stf-fbar select { min-width: 0; flex: 1 1 100%; }
  .stf-fbar .sl-date { flex: 1 1 100%; }
  .stf-fbar .sl-date .form-control { flex: 1 1 auto; min-width: 0; }
  /* stacked rows: a group's head and a person's details are full lines, not cards with a pick */
  .mb-stack tbody tr.stf-grp, .mb-stack tbody tr.stf-detail { display: block; padding: 0; background: transparent; }
  .mb-stack tbody tr.stf-grp > th { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .mb-stack tbody tr.stf-detail > td { display: block; padding: var(--space-3) !important; background: var(--surface) !important; border-inline-start: 3px solid var(--fill) !important; }
  .stf-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mr-tbl.stf-dir td.mb-c-name { min-width: 0; }
  .stf-adjk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .stf-adjk { grid-template-columns: minmax(0, 1fr); }
  .stf-fields { grid-template-columns: minmax(0, 1fr); }
}
/* ===== end TASK-2026-189 lane E1 ===== */

/* ===== TASK-2026-189 lane E2: Employees, Commissions and Payroll (spec 062 FR-011, mockup scratch/staff.html) ===== */
.stf-comtab > .kpi-grid.mr-kpis, .stf-paytab > .kpi-grid.mr-kpis { margin-block-end: var(--space-4); }

/* commissions: one card per salesperson, picked like a row (the card is not a button; the bar's Details opens it) */
.stf-ccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-3); }
.stf-ccard { display: grid; gap: var(--space-3); align-content: start; min-width: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-align: start; cursor: pointer; }
.stf-ccard:hover { border-color: var(--line-strong); }
.stf-ccard:focus-visible { outline: var(--focus-width, 2px) solid var(--focus); outline-offset: 1px; }
.stf-ccard.selected-row { border-color: var(--fill); box-shadow: inset 0 0 0 1px var(--fill); background: var(--tint); }
.stf-cc-h { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.stf-cc-n { display: grid; flex: 1 1 auto; min-width: 0; }
.stf-cc-n b { overflow-wrap: anywhere; }
.stf-cc-n small, .stf-cc-r small { color: var(--muted); font-size: var(--fs-small); }
.stf-cc-r { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.stf-ccard .badge { width: auto; flex: none; }
.stf-pcw { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.stf-pcw > b { min-width: 3.5ch; text-align: end; font-weight: 700; }
.stf-track { position: relative; display: block; flex: 1 1 auto; min-width: 64px; height: 8px; background: var(--sunken); border-radius: 2px; }
.stf-track > b { position: absolute; inset-block: 0; inset-inline-start: 0; display: block; background: var(--chart-1, var(--brand)); border-radius: 2px; }
.stf-track.is-done > b { background: var(--success); }

/* payroll: the commission payday is a quiet line under the filters; the payroll log folds under the table */
.stf-paytab .stf-fbar + .mb-quiet { margin-block-end: var(--space-3); }
.stf-paytab .mr-card .mr-fold { margin-block-start: var(--space-4); }
.stf-paytab .mr-fold-p .emp-filter-row { margin-block-start: var(--space-3); }

@media (max-width: 768px) {
  .stf-ccards { grid-template-columns: minmax(0, 1fr); }
}
/* ===== end TASK-2026-189 lane E2 ===== */

/* ── Sales group, lane T2 (TASK-2026-187): the target screens — the Targets card, By salesman, the salesman's own card, the Set targets window ── */
.st-track { position: relative; display: block; flex: 1 1 auto; min-width: 64px; height: 8px; background: var(--sunken); border-radius: 2px; }
.st-track > b { position: absolute; inset-block: 0; inset-inline-start: 0; display: block; background: var(--chart-1, var(--brand)); border-radius: 2px; }
.st-track.is-done > b { background: var(--success); }
.st-track > i { position: absolute; inset-block: -4px; width: 0; border-inline-start: 2px dashed var(--chart-ref, var(--muted)); }
.st-pcw { display: flex; align-items: center; gap: var(--space-3); min-width: 9rem; }
.st-pcw > b { min-width: 3.5ch; text-align: end; font-weight: 700; }
.mr-tbl td.st-pc { min-width: 11rem; }
.mr-tbl tbody tr.selected-row .st-track { background: color-mix(in srgb, var(--on-fill) 30%, transparent); }
.mr-tbl tbody tr.selected-row .st-track > b { background: var(--on-fill); }
.mr-tbl tbody tr.selected-row .st-track > i { border-color: var(--on-fill); }
.st-foot { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--fs-small); margin-inline-end: auto; }
.mr-card .card-footer:has(.st-foot) { justify-content: flex-start; }
.st-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.st-fbar .mb-chips { margin-inline-start: 0; }
/* the salesman's own dashboard */
.st-mygrid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.st-my { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.st-my-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.st-my-v { font-size: var(--fs-display-s, 2.2857rem); font-weight: 700; line-height: 1.2; }
.st-my-of { color: var(--muted); font-size: var(--fs-small); }
.st-my-bar { display: flex; align-items: center; gap: var(--space-3); }
.st-my-bar .st-track { height: 12px; }
.st-my-bar > b { font-weight: 700; min-width: 4ch; text-align: end; }
.st-mycard.is-done { border-inline-start: 3px solid var(--success); }
.st-list { list-style: none; margin: 0; padding: 0; display: grid; }
.st-list > li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 48px; padding-block: var(--space-2); }
.st-list > li + li { border-top: 1px solid var(--line); }
.st-list > li > span:first-child { display: grid; min-width: 0; }
.st-list small { color: var(--muted); font-size: var(--fs-small); }
.st-list > li > .mr-num { font-weight: 700; }
/* the Set targets window */
.st-dtop { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.st-dtop .form-group { margin-bottom: 0; }
.st-dtop select { width: auto; min-width: 12rem; max-width: 100%; }
.st-dbr { display: grid; gap: 2px; min-height: var(--control); align-content: end; }
.st-dbr small { color: var(--muted); font-size: var(--fs-small); }
.st-tgl { list-style: none; margin: 0; padding: 0; display: grid; }
.st-tgl > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 12rem) 28px; align-items: center; gap: var(--space-3); min-height: 56px; padding-block: var(--space-2); padding-inline-start: var(--space-3); border-inline-start: 3px solid transparent; }
.st-tgl > li + li { border-top: 1px solid var(--line); }
.st-tgl label { display: grid; gap: 2px; margin: 0; min-width: 0; }
.st-tgl label small { color: var(--muted); font-size: var(--fs-small); font-weight: 400; }
.st-tgi { display: flex; min-width: 0; }
.st-tgi input { flex: 1 1 auto; min-width: 0; text-align: end; border-start-end-radius: 0; border-end-end-radius: 0; }
.st-tgi > span { flex: none; display: grid; place-items: center; min-width: 48px; height: var(--control); padding-inline: var(--space-3); border: var(--border-width) solid var(--field); border-inline-start: 0; border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); background: var(--sunken); color: var(--muted); font-size: var(--fs-small); }
.st-slot { display: grid; place-items: center; width: 28px; }
.st-why { margin: var(--space-3) 0 0; }
.st-why input { width: 100%; }
.st-dsum { display: inline-flex; align-items: baseline; gap: var(--space-2); margin-inline-end: auto; }
.st-dsum small { color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 1100px) {
  .st-mygrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .st-tgl > li { grid-template-columns: minmax(0, 1fr) 28px; }
  .st-tgl > li > .st-tgi { grid-column: 1; grid-row: 2; }
  .st-tgl > li > :last-child { grid-column: 2; grid-row: 1 / 3; }
  .st-dtop select { min-width: 0; width: 100%; }
  .st-dtop .form-group { flex: 1 1 100%; }
  .mr-tbl td.st-pc { min-width: 0; }
  .st-pcw { min-width: 0; }
}
/* TASK-2026-188: a retired menu link stays hidden (placed here so the till block below keeps no !important) */
.nav-item[data-retired] { display: none !important; }   /* a menu link kept only so an old address still has a door; the shell forwards the address */
/* ── Sales group, lane T3: the till and the returns (TASK-2026-187, spec 062) ──────────────────────────────────────────────────────────────
   The till keeps its approved layout. What changes is how it is drawn: Edit and Remove stand in one bar above the lines, "Complete the sale" says why it waits through a (!)
   beside it, the order note and the bill discount are quiet lines, and the returns list has its bar and its bottom bar. Tokens and logical sides only. */
.sl-cartbar { padding: var(--space-3) var(--pad) var(--space-2); border-block-end: var(--border-width) solid var(--line); }
.sl-cartbar > .row-bar { margin: 0; }
.sl-till-act { display: flex; align-items: center; gap: var(--space-2); }
.sl-till-act > .btn { flex: 1 1 auto; }
.sl-till-why:empty { display: none; }
.sl-till-notes .quiet-field { border-top: 0; }
.sl-stack > [data-sl-bill] { border-block-end: var(--border-width) solid var(--line); }
.returns-actions { margin-block-end: var(--space-3); }
.returns-actions > .row-bar { border: var(--border-width) solid var(--line); border-radius: var(--radius); }
.returns-table tbody tr[data-row-id] { cursor: pointer; }
.returns-type, .returns-tier { color: var(--muted); }
.returns-tier { text-transform: capitalize; }
.returns-way { color: var(--muted); font-size: var(--fs-small); }
.returns-hint-cell { width: 40px; text-align: end; }
.returns-table tbody tr.selected-row :is(.returns-type, .returns-way) { color: inherit; opacity: .85; }
@media (max-width: 600px) {
  .sl-till-act { flex-wrap: wrap; justify-content: flex-end; }
}
/* TASK-2026-187 (lane T4): Sales history, the Sales report and its By salesman tab, as the approved mockups. The list, its bar, the badges
   and the bottom bar are the 062 pieces; this adds only what is particular to these pages. */
.txn187-card { overflow: visible; }
.txn187-card .table-wrapper { border: 0; border-radius: 0; box-shadow: none; }
.txn187-card .row-bar { padding-inline-end: var(--corner-i-reserve); }
.txn187-sub { display: block; color: var(--muted); font-size: var(--fs-caption); }
.txn187-type { color: var(--muted); }
.txn187-th-i { display: inline-flex; align-items: center; gap: 2px; }
.txn187-hint-col { width: 48px; text-align: end; }
.rep187-tabs { margin-block-end: var(--space-3); }
.rep187-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .rep187-kpis { grid-template-columns: minmax(0, 1fr); }
}
/* TASK-2026-187 lane T5 (approved mockup sales-b, Alterations): the board with its action bar, quiet column badges, a late stripe and the smoother drag */
.alt-bar-sep { display: inline-block; align-self: center; inline-size: 1px; block-size: 24px; margin-inline: var(--space-1); background: var(--line-strong); }
.row-bar .alt-bar-always { align-items: center; }
.alt-board-head { justify-content: flex-end; }
.alt-board-head .alt-board-end { margin-inline-start: 0; }
.alterations-board .kanban-col-title .badge { font-size: var(--fs-small); }
.alterations-board .alt-card { touch-action: manipulation; }
/* a card is picked by its name button, which covers the whole card; the late hint sits in the corner the menu button had */
.alt-pick { display: inline; min-height: 0; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; text-align: start; cursor: inherit; }
.alt-pick::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: var(--radius); }
.alt-pick:focus-visible { outline: none; }
.alterations-board .alt-card:has(.alt-pick:focus-visible) { outline: var(--focus-width, 2px) solid var(--focus); outline-offset: 2px; }
.alt-card-hint { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 1; }
.alterations-board .alt-card[data-tone="warn"] { border-inline-start: 3px solid var(--warning); }
.alterations-board .alt-card.is-sel { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.alterations-board .alt-card.is-sel :is(.alt-card-name, .alt-card-ref, .alt-card-item, .alt-card-meta, .alt-no-customer) { color: var(--on-fill); }
.alterations-board .alt-card.is-sel :is(.alt-card-ref, .alt-card-item, .alt-card-meta) { opacity: .85; }
/* the drag: the column it would land in lights up; a dotted gap the size of the card holds the place */
.alterations-board .kanban-cards { transition: background-color .15s ease, box-shadow .15s ease; }
.alterations-board .kanban-column.is-over .kanban-cards,
.alterations-board.is-kb .kanban-column:has(.is-kblift) .kanban-cards { background: var(--tint); box-shadow: inset 0 0 0 2px var(--tint-strong, var(--brand)); }
.alt-gap { flex: none; box-sizing: border-box; border: 2px dashed var(--brand); border-radius: var(--radius); background: color-mix(in srgb, var(--brand) 6%, transparent); }
.kanban-cards:has(.alt-gap) .alt-col-empty { display: none; }
.alterations-board .alt-card.alt-hidden { display: none; }
/* the lifted card follows the pointer with a shadow and a slight tilt, then glides into the gap */
.alt-flyer { position: fixed; z-index: 5000; margin: 0; pointer-events: none; transform-origin: 50% 40%; transition: transform .14s ease-out; }
.alt-flyer .alt-card { margin: 0; border-color: var(--brand); box-shadow: var(--shadow-float, 0 12px 28px rgba(0, 0, 0, .18)); cursor: grabbing; }
.alt-flyer.is-up { transform: rotate(-1.5deg) scale(1.03); }
html[dir="rtl"] .alt-flyer.is-up { transform: rotate(1.5deg) scale(1.03); }
.alt-flyer.is-drop { transform: none; transition: left .2s cubic-bezier(.2, .8, .2, 1), top .2s cubic-bezier(.2, .8, .2, 1), transform .2s ease; }
/* lifted by the keyboard: raised in place */
.alterations-board .alt-card.is-kblift { z-index: 2; border-color: var(--brand); box-shadow: var(--shadow-float, 0 12px 28px rgba(0, 0, 0, .18)); transform: translateY(-2px); }
.alterations-board .alt-card.is-kblift.is-sel { border-color: var(--brand); }
/* the bottom bar: fittings today, late jobs */
.alt-bar-fit { font-weight: 600; }
.alt-bar-late { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--fs-small); }
@media (prefers-reduced-motion: reduce) {
  .alt-flyer, .alt-flyer.is-drop, .alterations-board .alt-card, .alterations-board .kanban-cards { transition: none; }
  .alt-flyer.is-up, html[dir="rtl"] .alt-flyer.is-up { transform: none; }
}
/* ── end TASK-2026-187 lane T5 ── */
/* ── TASK-2026-187 lane T6: Shifts in the five shared colours (mockup sales-b, Shifts) ─────────────────────────────── */
.dsf-card .card-header h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dsf-st .badge, .dsf-val .badge { min-inline-size: 96px; justify-content: center; }
.shift-since { font-weight: 400; }
.shift-drawer-bar { align-items: center; }
.shift-day-rows { margin: 0; display: grid; gap: 0; }
.shift-day-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-block-end: 1px solid var(--line); }
.shift-day-row:last-child { border-block-end: 0; }
.shift-day-row dt { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 400; color: var(--text); }
.shift-day-row dd { margin: 0; font-variant-numeric: tabular-nums; }
#shift-history-tbody .badge { white-space: nowrap; }
#shift-history-tbody .hint { margin-inline-start: 6px; vertical-align: middle; }
#shift-register-fold-card .fold-line__body .table-wrapper { margin-block-start: 8px; }
/* ── TASK-2026-187 lane T7 (Sales group, approved mockup sales-b): Customers bar and Quick lookup rows ─────────────────────────────────────────── */
.cust-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-3); }
.cust-bar__start { display: flex; align-items: center; gap: var(--space-2); }
.cust-bar__import:empty { display: none; }
.cust-bar > .row-bar { flex: 1 1 360px; position: static; border: var(--border-width) solid var(--line); border-radius: var(--radius); }
.cust-level { color: var(--muted); }
.cust-sub { display: block; color: var(--muted); font-size: var(--fs-small); }
.cust-table th:nth-child(n+3), .cust-table td:nth-child(n+3) { text-align: end; }
.lookup-fold-btn { display: inline-flex; align-items: flex-start; gap: var(--space-2); max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.lookup-fold-btn:focus-visible { outline: var(--border-width) solid var(--focus); outline-offset: 2px; }
.lookup-chev { flex: none; width: 16px; height: 16px; margin-block-start: 2px; color: var(--muted); }
.lookup-fold-btn[aria-expanded="true"] .lookup-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) { .lookup-chev { transition: transform 120ms ease; } }
.product-row[data-tone="warn"] > td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
[dir="rtl"] .product-row[data-tone="warn"] > td:first-child { box-shadow: inset -3px 0 0 var(--warning); }
.lookup-qty-low { color: var(--warning); font-weight: 700; }
.lookup-qty-ok { font-weight: 700; }
.lookup-qty-zero { color: var(--muted); }
.lookup-price-note { display: block; color: var(--muted); font-size: var(--fs-small); }
.fx-table th.num, .fx-table td.num { text-align: end; font-variant-numeric: tabular-nums; }

/* ── TASK-2026-187 gap closing (approved mockups sales-a and sales-b) ── */
.row-bar__sep { display: inline-block; align-self: center; inline-size: 1px; block-size: 24px; margin-inline: var(--space-1); background: var(--line-strong); }
.shift-now-rows .shift-day-row dd { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; font-weight: 700; }
.shift-now-rows .shift-day-row dd small { font-weight: 400; }
.shift-blind-note { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-small, .8rem); }
.loyalty-tabnote { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.credit-return .credit-card-title .hint { margin-inline-start: 8px; vertical-align: middle; }
/* ── Money group, lane F1 (TASK-2026-188; approved mockup scratch/money-a.html): Day management, the three tabs ── */
/* the bar at the foot sits in a host the page draws beside the content; the host steps aside so the bar sticks to the page, not to its own box */
.md-bottom-host { display: contents; }
/* month and state chips above a list */
.md-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.md-fbar .mb-chips { margin-inline-start: 0; }
/* the day's head: the date and its one state, the page tools at the end */
.moa-head { align-items: center; }
.moa-head .mb-ptitle b { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.moa-head .mb-ptitle b .badge { font-size: var(--fs-small); font-weight: 400; }
/* the quiet, dismissible "close the day now?" line */
.moa-ban { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3); border-inline-start: 3px solid var(--success); background: var(--success-tint); border-radius: var(--radius); }
.moa-ban-t { flex: 1 1 14rem; min-width: 0; font-weight: 700; }
.moa-ban-x { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: var(--radius); }
.moa-ban-x:hover { color: var(--text); }
.moa-ban-x:focus-visible { outline: var(--focus-width, 2px) solid var(--focus); outline-offset: 0; }
.moa-more { display: flex; justify-content: flex-end; padding-top: var(--space-2); }
.moa-rules { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.moa-rules > b { font-size: var(--fs-small); font-weight: 700; }
.mb-ticks > li > .info-tip { flex: none; }
/* lists: the five shared states keep one badge width per list; a cancelled row stays, faded */
.mr-tbl.md-dsh, .mr-tbl.md-dep, .mr-tbl.md-hist { --badge-w: 11rem; }
.mr-tbl tr[data-tone="void"] > td:not(.mb-pick) { opacity: .6; }
.mr-card .bx-pager { padding-inline: 0; padding-block-end: 0; }
/* the window "View the day" */
.md-sec { display: grid; gap: var(--space-2); }
.md-sec > h4 { margin: var(--space-3) 0 0; font-size: var(--fs-body); font-weight: 700; }
/* the step a close-shift form shows while an expense waits for the cashier's answer */
.dsf-waiting { display: grid; gap: var(--space-2); margin-block: var(--space-3); padding: var(--space-3); border: 1px solid var(--warning-line); border-inline-start: 3px solid var(--warning); border-radius: var(--radius); background: var(--warning-tint); }
.dsf-waiting-t { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: 700; }
.dsf-waiting-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.dsf-waiting-d { display: grid; flex: 1 1 10rem; min-width: 0; }
.dsf-waiting-d small { color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 768px) {
  .moa-head .mb-abg { inline-size: 100%; }
  .moa-head .mb-abg .btn { flex: 1 1 auto; }
  /* stacked rows on a phone: two cells a line, so a badge takes its own words' width; the state takes a whole line */
  .mr-card .mr-tbl.mb-stack { --badge-w: auto; }
  .mr-card .mr-tbl.mb-stack .badge { max-inline-size: 100%; }
  .mb-stack td.md-st { grid-column: 1 / -1; }
}
/* ===== TASK-2026-188 lane F2: the Expenses page and its windows (approved mockup money-a; moa- = money group, part a) ===== */
/* the month by category: one quiet tile per category; a pressed tile filters the list */
.moa-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.moa-cat { display: grid; gap: 2px; align-content: start; min-width: 0; min-height: 76px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.moa-cat:hover { border-color: var(--line-strong); }
.moa-cat:focus-visible { outline: var(--focus-width, 2px) solid var(--focus); outline-offset: 1px; }
.moa-cat[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); border-color: transparent; }
.moa-cat-n { display: flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--muted); font-size: var(--fs-small); }
.moa-cat-n > span { min-width: 0; overflow-wrap: anywhere; }
.moa-cat-n > i { flex: none; width: 14px; text-align: center; }
.moa-cat > b { font-size: var(--mr-fs-val); }
.moa-cat > small { color: var(--muted); font-size: var(--fs-small); }
.moa-cat[aria-pressed="true"] :is(.moa-cat-n, small, .mr-muted) { color: var(--on-fill); opacity: .85; }
/* the list: the five shared states keep one badge width; the longest English word here needs a little more than the default */
.mr-card .mr-tbl { --badge-w: 11rem; }
.mr-tbl td.moa-desc { min-width: 12rem; max-width: 20rem; white-space: normal; overflow-wrap: anywhere; }
.mr-card .bx-pager { padding-inline: 0; padding-bottom: 0; }
/* a cancelled expense stays in the list, faded */
.mr-tbl tbody tr[data-state="cancelled"]:not(.selected-row) > td { opacity: .6; }
/* the expense window: where it was paid from, and what stops the main button */
.moa-src { margin: 0; padding: 0; border: 0; min-width: 0; }
.moa-src legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--fs-small); color: var(--muted); }
.moa-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.moa-opts .mr-opt { align-items: center; }
.moa-opts .mr-opt > span { flex: 1 1 auto; min-width: 0; }
.moa-opts .mr-opt input { margin-top: 0; }
.moa-opts .mr-opt .info-tip { flex: none; }
.mr-modal-why { display: inline-flex; align-items: center; margin-inline-end: auto; }
@media (max-width: 1100px) {
  .moa-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .moa-opts { grid-template-columns: minmax(0, 1fr); }
  .mb-stack td.moa-desc { max-width: none; }
  /* stacked rows on a phone: two cells a line, so a badge takes its own words' width */
  .mr-card .mr-tbl.mb-stack { --badge-w: auto; }
  .mr-card .mr-tbl.mb-stack .badge { max-width: 100%; }
  .mb-stack td.moa-st { grid-column: 1 / -1; }
}

/* ── TASK-2026-188 lane F3 (Money group, approved mockup money-b): the Accounts page, its three tabs, its one bar at the foot and its windows ── */
.acc188-page { display: grid; gap: var(--space-3); align-content: start; }
.acc188-tab { display: grid; gap: var(--space-4); align-content: start; }
.acc188-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-block-end: var(--space-3); }
.acc188-fbar .mb-chips { margin-inline-start: 0; }
.acc188-fbar select { width: auto; min-width: 12rem; max-width: 100%; }
.acc188-search { flex: 1 1 220px; }
.acc188-fbar .bank-import-host:empty { display: none; }
/* the one bar at the foot of the page: the shared row bar, pinned to the bottom of the screen */
.row-bar.acc188-foot-bar { position: sticky; inset-block: auto 0; z-index: 20; margin-block-start: var(--space-2); background: var(--card); border: var(--border-width) solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-float); }
.acc188-amt { font-variant-numeric: tabular-nums; }
.acc188-amt.is-in { color: var(--success); }
.mr-tbl tbody tr.selected-row .acc188-amt.is-in { color: var(--on-fill); }
.acc188-tab .mr-tbl tbody tr.selected-row .badge { background: transparent; border-color: var(--on-fill); color: var(--on-fill); opacity: 1; }
.acc188-tab .mr-tbl tbody tr.selected-row .mb-tag { background: transparent; border-color: var(--on-fill); color: var(--on-fill); }
.acc188-mov td.acc188-date { white-space: nowrap; }
.acc188-mov tr.acc188-reversed td { opacity: .6; }
.acc188-mov tr.acc188-reversed .acc188-amt { text-decoration: line-through; }
.acc188-tab .mb-c-name .mb-tag { margin-inline-start: var(--space-2); }
.acc188-quiet-change { margin-inline-start: var(--space-2); }
.acc188-tab .mr-card .mb-sum { margin-block-start: var(--space-2); }
.acc188-tab .mr-card .mr-fold { margin-block-start: var(--space-4); }
/* the windows: a field with its hint at the control's inline end, the amount with its currency, the foot with Stop beside Save */
.acc188-fi { display: flex; align-items: center; gap: var(--space-2); }
.acc188-fi > :first-child { flex: 1 1 auto; min-width: 0; }
.acc188-fh { flex: none; display: inline-flex; }
.acc188-amtin { display: flex; min-width: 0; }
.acc188-amtin input { flex: 1 1 auto; min-width: 0; text-align: end; border-start-end-radius: 0; border-end-end-radius: 0; }
.acc188-amtin > span { flex: none; display: grid; place-items: center; min-width: 48px; height: var(--control); padding-inline: var(--space-3); border: var(--border-width) solid var(--field); border-inline-start: 0; border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); background: var(--sunken); color: var(--muted); font-size: var(--fs-small); }
.acc188-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); inline-size: 100%; }
.acc188-foot .mr-fa { display: flex; gap: var(--space-2); margin-inline-start: auto; flex-wrap: wrap; }
.bx-dlg .mr-rows dd small { display: block; color: var(--muted); font-weight: 400; }
@media (max-width: 768px) {
  /* a phone: the bar stays one slim line of buttons that scrolls sideways, under the picked row's name */
  .row-bar.acc188-foot-bar .row-bar__btns { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-block-end: 2px; }
  .row-bar.acc188-foot-bar .row-bar__btns .btn { flex: none; }
  .row-bar.acc188-foot-bar .row-bar__sep { display: none; }
}
/* ===== Money group, lane F4 (TASK-2026-188; approved mockup money-b): the Suppliers page and the supplier ledger panel ===== */
.mob-sep { display: inline-block; align-self: center; inline-size: 1px; block-size: 24px; margin-inline: var(--space-1); background: var(--line-strong); }
.mob-bar.is-empty .mr-bar-st { border-inline-start-color: var(--line); }
.mob-bar .mr-bar-a .btn-primary { min-width: 0; }
.mob-bar .mr-bar-t > span { overflow-wrap: anywhere; }
.mob-imp { display: inline-flex; align-items: center; }
.mob-amt { font-variant-numeric: tabular-nums; }
.mr-tbl td s, .mr-tbl td s .mr-num { color: var(--muted); font-weight: 400; }
.mr-tbl tbody tr.selected-row td s { color: var(--on-fill); }
.mr-tbl td.mob-c-date { white-space: nowrap; }
.mr-tbl tbody tr.selected-row .badge { background: transparent; border-color: var(--on-fill); color: var(--on-fill); opacity: 1; }
.mob-page .mr-card .mb-sum { margin-top: var(--space-2); }
.mr-row dd .info-tip { margin: 0; }
/* a window's field with its hint at the control's inline end */
.mob-fi { display: flex; align-items: center; gap: var(--space-2); }
.mob-fi > :first-child { flex: 1 1 auto; min-width: 0; }
.mob-fh { flex: none; display: inline-flex; }
.mob-amtin { display: flex; min-width: 0; }
.mob-amtin input { flex: 1 1 auto; min-width: 0; text-align: end; border-start-end-radius: 0; border-end-end-radius: 0; }
.mob-amtin > span { flex: none; display: grid; place-items: center; min-width: 48px; height: var(--control); padding-inline: var(--space-3); border: var(--border-width) solid var(--field); border-inline-start: 0; border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); background: var(--sunken); color: var(--muted); font-size: var(--fs-small); }
.mob-kv .mr-row { align-items: flex-start; }
.mob-kv .mr-row dt { flex: 0 0 auto; }
.mob-kv .mr-row dd { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-end; gap: 0; overflow-wrap: anywhere; }
.modal-card .mb-quiet .info-tip { margin: 0; }
/* the supplier ledger: a side panel over the page, its own bar at its foot */
/* the shell's overlay already dims the page; the scrim is only the click target that closes the panel */
.modal-overlay.mob-ovl { padding: 0; }
.mob-scrim { position: fixed; inset: 0; z-index: 1; background: transparent; }
.mob-panel { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 2; display: flex; flex-direction: column; inline-size: min(640px, 100vw); background: var(--surface); border-inline-start: 1px solid var(--line-strong); box-shadow: var(--shadow-float); }
.mob-ph { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.mob-pt { display: grid; gap: 2px; min-width: 0; }
.mob-pt h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-title); overflow-wrap: anywhere; }
.mob-pt .mr-sub { color: var(--muted); font-size: var(--fs-small); }
.mob-ph .modal-close { flex: none; }
.mob-pb { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5); display: grid; grid-auto-rows: max-content; align-content: start; gap: var(--space-4); }
.mob-pb .mob-led td { white-space: normal; }
.mob-pb .mob-led td:has(.mr-sub) { min-width: 0; }
.mob-panel .mob-pbar .mr-bar-st { flex: 0 1 auto; min-width: 0; }
.mob-pb > .mb-chips { margin-inline-start: 0; }
.mob-pb .table-wrapper > .mr-tbl { min-width: 0; }
.mob-owed { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.mob-owed > span { flex: 1 1 100%; color: var(--muted); font-size: var(--fs-small); }
.mob-owed > b { font-size: var(--fs-display-s, 2.2857rem); line-height: 1.2; font-variant-numeric: tabular-nums; }
.mob-panel .mob-pbar { position: static; margin: 0; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; box-shadow: none; }
@media (max-width: 768px) {
  .mob-ph { padding: var(--space-3) var(--space-4); }
  .mob-pb { padding: var(--space-3) var(--space-4); }
  /* a phone: the bar stays one slim line of buttons that scrolls sideways, under the picked row's name */
  .mob-bar.is-empty { flex-wrap: nowrap; }
  .mob-bar.is-empty .mr-bar-st { flex: none; }
  .mob-bar .mr-bar-a { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; padding-block-end: 2px; }
  .mob-bar .mr-bar-a .btn { flex: none; }
  .mob-bar:not(.is-empty) .mr-bar-a { flex-basis: 100%; }
  .mob-sep { display: none; }
}
/* TASK-2026-188 lane F5: an unmapped row on the chart of accounts carries Style C's start stripe (physical sides; RTL flips the edge). */
.coa-unmapped[data-tone="warn"] > td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
[dir="rtl"] .coa-unmapped[data-tone="warn"] > td:first-child { box-shadow: inset -3px 0 0 var(--warning); }


/* ===== TASK-2026-190 lane P0: the Reports group's shared pieces (rpd- and rpi- classes that both report pages use; report_parts.js) ===== */
.rpd-page { display: grid; gap: var(--space-5); padding-block-end: var(--space-6); min-width: 0; }
.rpd-page > .card, .rpd-grid > .card { margin: 0; }
.rpd-grid { gap: var(--space-5); }
.rpd-page .mr-card > .card-header { padding: var(--space-4) var(--space-5) var(--space-2); border-bottom: 0; }
.rpd-page .mr-card > .card-header h3 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; font-size: var(--fs-body-lg, 1.0714rem); }
.rpd-page .mr-card > .card-body { padding: var(--space-3) var(--space-5) var(--space-5); }
.rpd-page .mr-card > .card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-5); }

/* tiles: one number, the comparison under it, the (i) in the top inline-end corner */
.mr-kpis.rpd-kpis { display: grid; margin: 0; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mr-kpis.rpd-kpis.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mr-kpis.rpd-kpis.is-1 { grid-template-columns: minmax(0, 1fr); }
.rpd-tile { position: relative; padding: var(--space-4); padding-inline-end: calc(var(--space-4) + 24px); min-width: 0; }
.rpd-tile > .info-tip { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; margin: 0; }
.rpd-tile .kpi-value { overflow-wrap: anywhere; white-space: normal; }
.rpd-tile[data-tone="warn"] { border-inline-start: 3px solid var(--warning); }
.rpd-tile .mr-kpi-sub { padding-top: var(--space-2); }
.rpd-now { display: inline-flex; align-items: center; color: var(--muted); font-size: var(--fs-small); }

/* a folded figure line: the mark and the summary sit on one line */
.rpd-fold:first-child .mr-fold { border-top: 0; margin-top: 0; }
.rpd-fold .mr-fold { min-height: 52px; }
.rpd-fold .mr-fold-m { display: inline-flex; align-items: center; }

/* the totals footer under a list: small grey label, the value leads */
.rpi-card .card-footer { padding-block: var(--space-3); }
.rpi-tot { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: 0; }
.rpi-tot > div { display: grid; gap: 2px; min-width: 0; }
.rpi-tot dt { font-size: var(--fs-small); color: var(--muted); font-weight: 400; }
.rpi-tot dd { margin: 0; font-weight: 700; }

/* a tab or page the person does not hold */
.rpi-refusal .empty-state { display: grid; justify-items: center; gap: var(--space-3); }
.rpi-refusal .empty-state p { margin: 0; }

@media (max-width: 1100px) {
  .mr-kpis.rpd-kpis:not(.is-1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* a row of tiles keeps two across (the mockup), a lone tile one */
}
@media (max-width: 768px) {
  .rpd-page { gap: var(--space-4); }
  .mr-kpis.rpd-kpis { gap: var(--space-2); }
  .mr-kpis.rpd-kpis.is-1 { grid-template-columns: minmax(0, 1fr); }
  .rpd-tile { padding: var(--space-3); padding-inline-end: calc(var(--space-3) + 24px); }
  .rpi-tot { gap: var(--space-3) var(--space-4); }
  .rpi-tot > div { flex: 1 1 40%; }
}

/* ===== TASK-2026-190 lane D: the Dashboard, Version B of the approved mockup (reports-dash, 8.5/10 on 2026-10-20; rpd- classes, logical sides only) ===== */
/* the period bar: the app's own, a little more air */
.rpd-period { padding: var(--space-3) var(--space-4); margin-block-end: var(--space-5); padding-inline-end: 48px; gap: var(--space-3) var(--space-4); }
.rpd-period #period-label { min-width: 9rem; text-align: center; font-weight: 700; }
.rpd-period .dashboard-period-seller label { color: var(--muted); font-size: var(--fs-small); margin: 0; white-space: nowrap; }
.rpd-period .dashboard-period-seller select { min-width: 12rem; }
.rpd-hide { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-block: calc(-1 * var(--space-2)) var(--space-5); padding: var(--space-2) var(--space-3); border-inline-start: 3px solid var(--info, var(--brand)); background: var(--sunken); border-radius: var(--radius); }
.rpd-hide > i { color: var(--muted); }
.rpd-hide > span { font-weight: 700; }
.rpd-hide > .btn { margin-inline-start: auto; }

/* the headline row: four tiles, one number each, the comparison under it */
.rpd-vs { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.rpd-vs .kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; }
.rpd-vs .kpi-delta i { font-size: 9px; }
.rpd-heads .rpd-head4 .kpi-value { font-size: var(--fs-display-s, 1.85rem); line-height: 1.2; }
.rpd-heads .rpd-tile { padding-block: var(--space-5); }
.rpd-empty { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-4); padding: var(--space-2) var(--space-3); border-inline-start: 3px solid var(--warning); background: var(--warning-tint); border-radius: var(--radius); font-weight: 700; }
.rpd-tile .kpi-caption { padding-block-start: var(--space-2); }

/* grids and the targets mount: a lone card takes the whole row, a mount point stretches its card */
.rpd-grid.is-one { grid-template-columns: minmax(0, 1fr); }
#sales-targets-mount { display: flex; flex-direction: column; min-width: 0; }
#sales-targets-mount > .card { flex: 1 1 auto; margin: 0; }

/* the trend card: the filters sit behind "Change" */
.rpd-tquiet { margin-block-end: var(--space-2); }
.rpd-tfilt { margin-block-end: var(--space-4); align-items: flex-end; }
.rpd-tctl { margin-block-end: var(--space-4); }
.rpd-ccard .rp-chart-plot { margin-block-start: var(--space-3); }

/* single figures in a card, and label/value rows */
.rpd-rows { margin-block-start: var(--space-4); }
.rpd-rows .mr-row dt .info-tip { margin-inline-start: var(--space-1); }
.rpd-dd { display: grid; justify-items: end; gap: 2px; font-weight: 700; }
.rpd-page .rpd-dd > small { margin: 0; }

/* top sellers: the existing list inside the card shell */
.rpd-topc .rpd-ttools { padding: 0 0 var(--space-4); border-bottom: 0; }
.rpd-topc .dash-sellers-list { padding: 0; }
.rpd-topc .dash-sellers-foot { padding-inline: 0; }

/* the More figures card: folded parts */
.rpd-morec > .card-body { padding-block-start: 0; }
.rpd-fold .mr-fold-p { padding-block: var(--space-2) var(--space-4); }
.rpd-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
/* REVIEW-190 L6: the second column exists only once the owed lines are drawn (a shop that never sold on account keeps one full column, not an empty two thirds) */
.rpd-two.rpd-two-owed { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.rpd-owe { position: relative; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.rpd-owe .credit-bare-tip { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; margin: 0; }
.credit-owe-bare { display: grid; gap: var(--space-3); padding-inline-end: 28px; }
.credit-owe-bare .credit-card-actions { margin-block-start: var(--space-1); }

/* recent transactions */
.rpd-recc .table-wrapper > .mr-tbl { min-width: 0; }
.rpd-ref { font-size: inherit; }

/* a cashier: the page does not open */
.rpd-noaccess { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-inline-start: 3px solid var(--warning); border-radius: var(--radius); background: var(--card); }
.rpd-na-t { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 16rem; min-width: 0; }
.rpd-na-t b { overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .rpd-two, .rpd-two.rpd-two-owed { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .rpd-period { padding-inline-end: 44px; }
  .rpd-period .dashboard-period-seller { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .rpd-period .dashboard-period-seller select { min-width: 0; width: 100%; flex: none; }
  .rpd-tile .kpi-value .mr-num { white-space: normal; }
  .rpd-heads .rpd-head4 .kpi-value { font-size: var(--fs-body-lg, 1.15rem); }
  .rpd-heads .rpd-tile { padding-block: var(--space-3); }
  .rpd-page .mr-card > .card-header { padding: var(--space-3) var(--space-3) var(--space-1); }
  .rpd-page .mr-card > .card-body { padding: var(--space-2) var(--space-3) var(--space-3); }
  .rpd-page .mr-card > .card-footer { padding: var(--space-2) var(--space-3); }
  .rpd-topc .dash-sellers-tools select { flex: 1 1 10rem; min-width: 0; }
  .rpd-topc .dash-sellers-tools .dash-trend-view { margin-inline-start: 0; }
}
/* ===== TASK-2026-190 lane I: Inventory reports as the approved mockup draws them (rpi- classes; the printed paper) ===== */
.rpi-inv { display: grid; gap: var(--space-4); }
.rpi-inv > #inv-panel > .card { margin-bottom: 0; }
.rpi-strip { display: flex; align-items: center; gap: var(--space-3); }
.rpi-strip > .tab-strip { flex: 1 1 auto; min-width: 0; margin-block-end: 0; }
.rpi-strip > .info-tip { flex: none; }

/* the list */
.rpi-sku { font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.rpi-nm { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--space-2); }
.rpi-nm .badge { width: auto; font-size: 12px; }
.mr-tbl.rpi-tbl td.mb-c-name { min-width: 12rem; }
.mr-tbl.rpi-tbl td.rpi-when { white-space: nowrap; }
.mr-tbl tbody tr.selected-row .rpi-sku { color: var(--on-fill); }
.rpi-tbl .value-diff[data-sign="1"] { color: var(--success); }
.rpi-tbl .value-diff[data-sign="-1"] { color: var(--danger); }

/* the one piece the Movements tab was asked about, and the way out of an empty list */
.rpi-vchip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--tint); }
.rpi-widen { display: inline-flex; align-items: center; gap: var(--space-2); }

/* the other branches window */
.rpi-dlg-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin: 0 0 var(--space-3); }
.rpi-dlg-h .mr-sub { display: inline; color: var(--muted); }
.mr-tbl.rpi-brt tr.rpi-here > td { background: var(--tint); }

/* the paper: the whole report, every row, as the printed page; never on the screen */
.inv-print-only { display: none; }

@media (max-width: 768px) {
  .mr-tbl.rpi-tbl td.mb-c-name { min-width: 0; }
  .mr-tbl.rpi-tbl td.rpi-when { white-space: normal; }
  /* a long reference takes the whole line of the stacked row, and wraps only if even that is too narrow */
  .mb-stack td.rpi-ref { grid-column: 1 / -1; }
  .mb-stack .rpi-sku { white-space: normal; overflow-wrap: anywhere; }
  .rpi-strip { align-items: flex-start; }
  /* the picked row's buttons stay on one line and scroll sideways, as the app's own foot bar does (row-bar__btns) */
  .rpi-inv .stf-bar .stf-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-block-end: 2px; }
  .rpi-inv .stf-bar .stf-row .btn { flex: none; }
  .rpi-inv .stf-bar .mr-bar-a { flex-wrap: nowrap; }
  .rpi-inv .stf-bar .mr-bar-a .btn { flex: 1 1 0; min-width: 0; }
}
@media print {
  .rpi-inv #inv-strip, .rpi-inv #inv-panel, .rpi-inv #inv-refusal, .rpi-inv #inv-bar-host { display: none; }
  .rpi-inv .inv-print-only { display: block; }
}

/* ===== TASK-2026-191 lane P0: the Settings group's shared pieces (set- classes; settings_parts.js; logical sides only) ===== */
.set-page { display: grid; gap: var(--space-4); }
.set-panel { display: grid; gap: var(--space-4); min-width: 0; }
.set-panel > .card, .set-col > .card { margin-bottom: 0; }
.set-strip { margin-block-end: 0; }
.set-tabs { margin-block-end: 0; }
.set-tabs .tab-btn .tab-icon { display: inline-flex; margin-inline-end: 2px; color: var(--muted); }
.set-tabs .tab-btn.active .tab-icon { color: inherit; }
.set-mc .card, .set-card { margin-bottom: 0; }
.set-mc > .card + .mr-bar, .set-panel > .card + .card { margin-top: 0; }
.set-mc > .kpi-grid + .card, .set-mc > .card + .card { margin-top: var(--space-4); }

/* two calm columns, as the General tab draws them today */
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.set-col { display: grid; gap: var(--space-4); min-width: 0; align-content: start; }

/* one field: the small grey label above, the value leads, the (i) or (!) at the inline end, a start stripe when it matters */
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: var(--space-2) var(--space-3); padding-block: var(--space-3); padding-inline-start: var(--space-3); border-inline-start: 3px solid transparent; }
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-row[data-tone="warn"] { border-inline-start-color: var(--warning); }
.set-row[data-tone="ok"] { border-inline-start-color: var(--success); }
.set-row.is-chg:not([data-tone="warn"]) { border-inline-start-color: var(--brand); }
.set-main { display: grid; gap: 6px; min-width: 0; }
.set-main > .form-control, .set-main > select, .set-main > textarea, .set-main > .set-unit { max-width: 360px; width: 100%; }
.set-main textarea.form-control { min-height: 64px; resize: vertical; }
.set-lbl { display: block; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); font-weight: 400; margin: 0; }
.set-h { display: flex; align-items: center; justify-content: center; min-height: 24px; }
.set-check { display: flex; align-items: center; gap: var(--space-3); margin: 0; cursor: pointer; font-weight: 400; color: var(--text); min-height: 32px; }
.set-check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--brand); }
.set-check > span { min-width: 0; overflow-wrap: anywhere; }
.set-unit { display: flex; align-items: center; gap: var(--space-2); }
.set-unit input { flex: 1 1 auto; min-width: 0; }
.set-unit > span { flex: none; color: var(--muted); font-size: var(--fs-small); }
.set-main .form-control[aria-invalid="true"] { border-color: var(--warning); }
.set-none { margin: 0; padding: var(--space-3); }

/* the quiet "Change" line that holds the rarely changed fields */
.set-more { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 0; border-top: 1px dashed var(--line-strong); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-small); text-align: start; cursor: pointer; }
.set-more:focus-visible .set-more-t { text-decoration: underline; }
.set-more:focus-visible { outline: var(--focus-width, 2px) solid var(--focus); outline-offset: 1px; }
.set-more-m { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.set-more-c { flex: none; color: var(--brand); font-weight: 700; }
.set-more-t { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--brand); font-weight: 700; }
.set-more-t i { font-size: 11px; transition: transform .2s; }
.set-more[aria-expanded="true"] .set-more-t i { transform: rotate(180deg); }
.set-more .mr-ic { flex: none; }
.set-more-p:not([hidden]) { display: grid; margin-top: var(--space-1); padding-inline: var(--space-2); border-radius: var(--radius); background: var(--sunken); }


.set-radios { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.set-radio { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: 400; color: var(--text); cursor: pointer; min-height: 32px; }

.set-dl { display: grid; gap: var(--space-3); margin: 0; }
.set-dl > div { display: grid; gap: 2px; min-width: 0; }
.set-dl dt { font-size: var(--fs-small); color: var(--muted); font-weight: 400; }
.set-dl dd { margin: 0; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); overflow-wrap: anywhere; min-width: 0; }
.set-dl dd .badge { width: auto; font-weight: 700; }

.set-code { font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.mr-tbl tbody tr.selected-row .set-code { color: var(--on-fill); }
.mr-tbl.set-tbl td.mb-c-name { min-width: 11rem; }
.mr-tbl.set-tbl td.set-wrap { white-space: normal; min-width: 12rem; overflow-wrap: anywhere; }
.mr-tbl.set-tbl td .badge { width: auto; }
.set-two { display: inline-grid; justify-items: end; }
.set-figs { margin-bottom: var(--space-4); }
.set-detail .set-facts { gap: var(--space-3) var(--space-6); }
.set-detail .set-facts dd { font-weight: 400; }

.set-mc .badge, .modal-card .badge { width: auto; min-width: 4.5rem; max-width: none; padding-inline: 8px; white-space: nowrap; }
.set-bar .badge { min-width: 0; }

.set-page, .set-panel { grid-template-columns: minmax(0, 1fr); }
.set-page > *, .set-panel > *, .set-dz > *, .set-col > * { min-width: 0; }

.set-dlg-p { margin: 0; }
.set-chl { margin: 0; padding-inline-start: var(--space-5); color: var(--text); display: grid; gap: 2px; }

@media (max-width: 1100px) {
  .set-grid { grid-template-columns: minmax(0, 1fr); }
  .set-dz { grid-template-columns: minmax(0, 1fr); }
  .set-dz-p { position: static; }
}

/* the shared track and the filter bar the group's tables and meters use */
.sa-track { position: relative; display: block; flex: 1 1 auto; min-width: 64px; height: 8px; background: var(--sunken); border-radius: 2px; }
.sa-track > b { position: absolute; inset-block: 0; inset-inline-start: 0; display: block; background: var(--chart-1, var(--brand)); border-radius: 2px; }
.sa-track.is-done > b { background: var(--success); }
.sa-track > i { position: absolute; inset-block: -4px; width: 0; border-inline-start: 2px dashed var(--chart-ref, var(--muted)); }
.sa-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.sa-fbar .mb-chips { margin-inline-start: 0; }

/* ===== TASK-2026-191 lane O: Offline tills and Faults (set- classes; shops.js, problems.js; logical sides only) ===== */
.set-dl.is-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.set-code.is-small { font-size: var(--fs-small); }
.set-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.set-pick select { width: auto; min-width: 16rem; max-width: 100%; }
.set-pick-v { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.set-gaps { margin: 0; }
.set-gap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.set-card .card-footer { display: flex; align-items: center; gap: var(--space-2) var(--space-4); flex-wrap: wrap; }
.shops-page .set-detail .set-dl dd .btn { margin-inline-start: var(--space-2); }
.set-inh { display: flex; align-items: center; gap: var(--space-2); }
.set-inh .form-control { flex: 1 1 auto; min-width: 0; }
.set-inh .info-tip, .set-inh .hint { flex: none; }
.set-steps { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-small); color: var(--muted); }
.set-steps li { display: inline-flex; align-items: center; gap: var(--space-2); }
.set-steps li > span { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 12px; }
.set-steps li.is-on { color: var(--text); font-weight: 700; }
.set-steps li.is-on > span { background: var(--fill); color: var(--on-fill); border-color: transparent; }
.set-steps li.is-done > span { color: var(--success); border-color: var(--success-line); }
.set-hand { display: grid; gap: var(--space-3); }
.set-hand-r { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); }
.set-hand-r > div { display: grid; gap: 4px; min-width: 0; }
.set-hand-r .set-code { white-space: normal; overflow-wrap: anywhere; }
.shops-page .set-detail td, .problems-page .mr-tbl td.set-wrap { overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .set-pick select { min-width: 0; flex: 1 1 100%; }
  .mr-tbl.set-tbl td.mb-c-name, .mr-tbl.set-tbl td.set-wrap { min-width: 0; }
  .mb-stack td.set-wrap { grid-column: 1 / -1; }
  .mb-stack .set-code { white-space: normal; overflow-wrap: anywhere; }
  .shops-page .stf-bar .stf-row, .problems-page .stf-bar .stf-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-block-end: 2px; }
  .shops-page .stf-bar .stf-row .btn, .problems-page .stf-bar .stf-row .btn { flex: none; }
  .set-hand-r { flex-wrap: wrap; }
}

/* ===== TASK-2026-191 lane T: Backup, Owner account, Subscription, Your data (logical sides only) ===== */
.set-sub { margin-top: 0; gap: var(--space-4); }
.set-sub .sub-pane:not([hidden]) { display: grid; gap: var(--space-4); min-width: 0; }
.set-sub > .tab-strip { margin-block-end: 0; }
.set-dl.is-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.set-plan { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.set-plan > div:first-child { display: grid; gap: 2px; }
.set-plan-n { font-size: var(--fs-title); }
.set-plan .badge { width: auto; }
.set-meters { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; }
.set-meters > li { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(5rem, auto) minmax(0, 1fr) 28px; align-items: center; gap: var(--space-3); min-height: 48px; padding-inline-start: var(--space-3); border-inline-start: 3px solid transparent; }
.set-meters > li + li { border-top: 1px solid var(--line); }
.set-meters > li[data-tone="warn"] { border-inline-start-color: var(--warning); }
.set-meter-n { color: var(--muted); }
.set-meters .sa-track { max-width: 280px; }
.set-dates { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.set-dates input { width: auto; }
.set-you { display: inline; }
.set-owner .set-two, .set-data .set-two { justify-items: start; }
@media (max-width: 768px) {
  .set-meters > li { grid-template-columns: minmax(0, 1fr) auto 28px; }
  .set-meters > li > .sa-track, .set-meters > li > .mr-sub { grid-column: 1 / -1; grid-row: 2; max-width: none; }
}

/* ===== TASK-2026-191 lane G: Settings General, Receipts and Appearance - the payment methods card, the printer and design cards, the law box, the one Save bar's place (logical sides only) ===== */
.set-strip > .settings-tabs-header { flex: 1 1 auto; min-width: 0; margin-block-end: 0; }
.set-save-host { order: 99; min-width: 0; }
.set-slot { display: contents; }
.set-slot > .set-row { border-top: 1px solid var(--line); }
.set-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
.set-col > .shl-host { margin-block-end: 0; }
.set-col .shl-split { grid-template-columns: minmax(0, 1fr); }

/* payment methods to accounts */
.set-pmac .card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.set-pma { border-top: 1px solid var(--line); }
.set-pma > .set-row:first-child { border-top: 0; }
.set-pma-st { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--fs-small); }
.set-pmac .mb-rs { margin-top: var(--space-1); }
.set-help { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* receipts: the printer card and the design card */
.set-cta { padding-top: var(--space-3); }
.set-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.set-logo-prev { max-height: 32px; max-width: 100px; object-fit: contain; padding: 2px; border: 1px solid var(--line); border-radius: 2px; background: white; }
.set-dz-ctl { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-3); }
.set-dz-ctl > div { display: grid; gap: 6px; }
.set-seg .btn[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); border-color: transparent; font-weight: 700; }
.set-dz { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-5); align-items: start; margin-top: var(--space-3); }
.set-dz-f { min-width: 0; }
.set-dz-p { position: sticky; top: var(--space-3); display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius); background: var(--sunken); min-width: 0; }
.set-dz-pw { max-width: 100%; overflow-x: auto; }
.set-law { padding: var(--space-3); margin-bottom: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); }
.set-law-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-small); font-weight: 700; color: var(--text); }
.set-law-h > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.set-law-h i { color: var(--muted); font-size: 12px; }
.set-law-l { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; }
.set-law-l > li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 36px; padding-inline-start: var(--space-2); border-inline-start: 3px solid transparent; }
.set-law-l > li + li { border-top: 1px solid var(--line); }
.set-law-l > li[data-tone="warn"] { border-inline-start-color: var(--warning); }
.set-law-n { display: inline-flex; align-items: center; gap: var(--space-2); }
.set-law-n i { color: var(--success); font-size: 11px; }
.set-law-slot { display: flex; align-items: center; min-width: 0; }
.set-law-v { color: var(--muted); font-size: var(--fs-small); min-width: 0; overflow-wrap: anywhere; text-align: end; }
#b-lock-payments-columns .set-law-n i { color: var(--muted); }

/* appearance */
.set-radio input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.set-range { display: flex; align-items: center; gap: var(--space-3); max-width: 360px; }
.set-range input { flex: 1 1 auto; min-width: 0; accent-color: var(--brand); }
.set-range .rp-size-readout { flex: none; min-width: 4.5rem; color: var(--text); font-weight: 700; }

@media (max-width: 1100px) {
  .set-dz { grid-template-columns: minmax(0, 1fr); }
  .set-dz-p { position: static; }
}
@media (max-width: 768px) {
  .set-dz-ctl { gap: var(--space-3); }
  .set-dz-p { padding: var(--space-3); }
}

/* TASK-2026-208: the store's own address, chosen when it first pays (static/js/subscription_address.js). The name and its fixed ".domain" always read left to right, in both directions. */
.sub-addr {font-weight: 700; word-break: break-all;}
.sub-addr-input {display: flex; align-items: center; gap: 8px; direction: ltr;}
.sub-addr-input input {flex: 1 1 auto; min-width: 0;}
.sub-addr-suffix {flex: none; color: var(--muted, var(--text)); font-weight: 600;}
.sub-addr-status {min-height: 1.5rem; margin-top: 6px; font-size: .9rem; font-weight: 600;}
.sub-addr-status.is-ok {color: var(--success);}
.sub-addr-status.is-bad {color: var(--danger);}
.sub-addr-status.is-wait {color: var(--warning);}

/* TASK-2026-210: Subscribe by InstaPay: add-ons, the server's total, the terms tick, the InstaPay block */
.sub-addons {display: grid; gap: 8px; margin-block-start: 16px;}
.sub-addons h4 {margin: 0; font-size: .95rem;}
.sub-addon {display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; align-items: center; gap: 12px;}
.sub-addon input {inline-size: 84px; min-block-size: var(--control-h, 40px); text-align: center;}
.sub-addon-price small {color: var(--text-muted);}
.sub-up-sum {margin-block-start: 16px;}
.sub-up-lines {display: grid; gap: 4px; margin: 0 0 8px; font-size: .9rem;}
.sub-up-lines div {display: flex; justify-content: space-between; gap: 12px;}
.sub-up-lines dt {color: var(--muted);}
.sub-up-lines dd {margin: 0;}
.sub-up-saved {margin: 6px 0 0; font-size: .85rem; color: var(--success);}
.sub-terms {margin-block-start: 16px; padding-block-start: 12px; border-block-start: 1px solid var(--line);}
.sub-terms label {display: flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.7;}
.sub-terms input {flex: none; margin-block-start: 6px;}
.sub-instapay {display: grid; gap: 12px; margin-block: 12px;}
.sub-instapay .btn-primary {justify-self: start;}
@media (max-width: 560px) {
  .sub-addon {grid-template-columns: minmax(0, 1fr) 84px;}
  .sub-addon-price {grid-column: 1 / -1; grid-row: 2;}
}

/* ===== TASK-2026-191 lane L: Session logs (the filter row, the dates and the status column; logical sides only) ===== */
.set-lfbar select, .set-lfbar .form-control { inline-size: auto; min-inline-size: 11rem; }
.set-lfbar .rpi-dates { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.mr-tbl.set-logt td.mb-c-meta.moa-st { white-space: nowrap; }

/* ── Store shell refresh (spec 004): feature CSS lives ABOVE this line. The appended fragments below
   (R3 commissions, R4 scoped payments, R6 employees workspace) are hash- and scope-tested; never append after them. ── */

/* The close dialog's notes carry the hidden attribute and the rule above gives them a display, so the attribute needs its companion here (TASK-2026-179; kept outside the
   Team Administration block, whose test reads that block for any hidden toggle). */
.dsf-note[hidden] { display: none; }

/* ── Variant grid modal (mockup 7.5) ─────────────────────────────────────────
   Colours across, sizes down, one quantity per cell. The cell states are the
   whole design: gold means this cell will be sent, plain means it is left
   exactly as it is, hatched means it is not carried and will never be created.
   Nothing here is toggled with the `hidden` attribute, so nothing here sets an
   explicit `display` on such an element (app.css trap, four outages).          */
.variant-grid-card { container-type: inline-size; }
.variant-grid-heading h3 { margin: 0; }
.variant-grid-from { display: block; margin-top: 2px; font-size: 0.7rem; color: var(--muted); }
.variant-grid-form { display: flex; flex-direction: column; gap: 14px; }
.variant-grid-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* Colours, sizes, and the fill control on one row. The third column takes only the width its own
   words need, so the row has no dead end. */
.variant-grid-form > .variant-grid-row:first-child { grid-template-columns: 1fr 1fr auto; align-items: start; }
/* The first-child rule above is more specific than a bare `.variant-grid-row`, and a container
   query adds no specificity of its own, so the fold has to name that row too or the accelerator
   stays in two 128px columns on a phone. */
@container (max-width: 560px) {
  .variant-grid-row,
  .variant-grid-form > .variant-grid-row:first-child { grid-template-columns: 1fr; }
  .variant-grid-card .modal-footer { flex-wrap: wrap; }
  .variant-grid-summary { flex-basis: 100%; margin-inline-end: 0; }
}
/* The presets are the app's own buttons (owner, 2026-09-22). They were a bespoke pill at a 999px
   radius beside a field at 2px, which is the one thing on this dialog that looked borrowed. */
.variant-grid-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.variant-grid-presets-label { font-size: 0.72rem; color: var(--muted); }
.variant-grid-preset { font-size: 0.72rem; }
.variant-grid-fill { min-width: 0; }
.variant-grid-fill-controls { display: flex; align-items: center; gap: 8px; }
.variant-grid-fill input { width: 66px; }
.variant-grid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.variant-grid-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 420px; font-size: 0.82rem; }
.variant-grid-table th, .variant-grid-table td { border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line); text-align: center; padding: 6px; }
.variant-grid-table thead th { background: var(--sunken); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
/* Size down the side, colour across the top, both centred (owner, 2026-09-19). */
.variant-grid-table tbody th { background: var(--sunken); font-weight: 700; text-align: center; min-width: 64px; }
.vg-colour { font-weight: 700; font-size: 0.82rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.vg-colour.is-new { color: var(--brand); }
.vg-tag { display: inline-block; margin-inline-start: 5px; font-size: 0.6rem; color: var(--brand); border: 1px dashed var(--brand); border-radius: 2px; padding: 0 5px; text-transform: uppercase; letter-spacing: 0.05em; }
/* A cell reads across: what the shop carries, how many, and what may be done to it. The controls
   were 13px glyphs in the corners, sitting over the box, and the remove one was invisible until a
   mouse hovered — unreachable on a phone (owner, 2026-09-19). They are 30px targets standing beside
   the box now, which costs the cell width and no height at all. */
.variant-grid-cell { position: relative; min-width: 134px; }
.vg-cell-row { display: flex; align-items: center; justify-content: center; gap: 2px; }
.vg-tick, .vg-del, .vg-lock, .vg-cell-spacer {
  flex: none; width: 30px; height: 30px; display: inline-grid; place-items: center;
  border: 0; background: none; padding: 0; border-radius: var(--radius); line-height: 1;
}
.vg-qty { width: 64px; height: 30px; border-radius: 2px; background: transparent; border: 1px solid transparent; color: var(--muted); text-align: center; font: inherit; font-variant-numeric: tabular-nums; }
.variant-grid-cell.is-touched .vg-qty { border-color: var(--brand); background: var(--tint); color: var(--text); }
.variant-grid-cell.is-off { background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 255, 255, 0.03) 6px 12px); }
.variant-grid-cell.is-off .vg-qty { opacity: 0.3; }
.variant-grid-cell.is-out .vg-qty { color: var(--danger); }
.variant-grid-cell.is-removed { background: var(--danger-tint); }
.variant-grid-cell.is-removed .vg-qty { text-decoration: line-through; opacity: 0.6; }
.variant-grid-cell small { display: block; font-size: 0.62rem; color: var(--text-muted); margin-top: 2px; }
/* An order's cell is always typed into, so its box reads as a field rather than as the ghosted
   figure a stock cell shows until it is touched, and what the shop holds today sits under it. */
.variant-grid-cell.is-order .vg-qty { border-color: var(--line); background: var(--sunken); color: var(--text); }
.vg-new-cell { color: var(--brand); }
/* The order form's summary of what the grid picked: one row per colour, its own prices editable. */
.po-picked { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.po-picked th, .po-picked td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: start; }
.po-picked thead th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.po-picked td input { width: 92px; }
.po-picked .po-picked-sizes { color: var(--muted); font-size: 0.74rem; }
.po-picked-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
/* The quantity is what a cell is for, so the controls beside it get out of the way entirely and come
   back when the cell is under the pointer (owner, 2026-09-19: a full fade, "to make the cells more
   clearer"). Colours are the theme's own: gold for the tick that says the shop carries this cell and
   for the lock that explains why one cannot be removed, and a quiet mark for the remove control that
   turns to the danger colour only when it is actually being reached for — a red mark in every cell
   reads as a warning about the cell, which it is not. */
.vg-tick { font-size: 1rem; color: var(--muted); cursor: pointer; }
.vg-tick[aria-pressed="true"] { color: var(--brand); }
.vg-lock { color: var(--brand); }
.vg-del { color: var(--muted); }
.vg-del:hover, .vg-del:focus-visible { color: var(--danger); }

.vg-tick, .vg-del, .vg-lock { transition: opacity 180ms ease-in-out, color 180ms ease-in-out; }

/* Fading to nothing is only safe where something can hover. A finger cannot, and the remove control
   is the only way to take a cell out, so on a touch screen they stay where they are. */
@media (hover: hover) and (pointer: fine) {
  .vg-tick, .vg-del, .vg-lock { opacity: 0; }
  .variant-grid-cell:hover .vg-tick,
  .variant-grid-cell:hover .vg-del,
  .variant-grid-cell:hover .vg-lock,
  .variant-grid-cell:focus-within .vg-tick,
  .variant-grid-cell:focus-within .vg-del,
  .variant-grid-cell:focus-within .vg-lock,
  .vg-tick:focus-visible, .vg-del:focus-visible { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-tick, .vg-del, .vg-lock { transition: none; }
}
.vg-del { font-size: 0.9rem; cursor: pointer; }
/* A cell marked for removal keeps its control lit wherever the pointer is: it is the way back, and
   nothing else on the cell says the removal can be undone. */
.variant-grid-cell.is-removed .vg-del { opacity: 1; color: var(--danger); }
.vg-lock { font-size: 0.85rem; cursor: help; }
.variant-grid-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.7rem; color: var(--muted); }
.vg-key::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 5px; vertical-align: -1px; border: 1px solid var(--line); }
.vg-key-save::before { background: var(--tint); border-color: var(--brand); }
.vg-key-off::before { background: repeating-linear-gradient(45deg, transparent 0 2px, rgba(255, 255, 255, 0.15) 2px 4px); }
.variant-grid-empty { text-align: center; padding: 26px 16px; color: var(--muted); font-size: 0.82rem; }
.variant-grid-empty h4 { margin: 0 0 4px; color: var(--text); font-size: 0.95rem; }
.variant-grid-summary { font-size: 0.78rem; color: var(--muted); margin-inline-end: auto; }
.variant-grid-summary b { color: var(--text); }
/* `:empty` rather than the `hidden` attribute, so no element here needs a display rule undone. */
.variant-grid-notices { display: flex; flex-direction: column; gap: 6px; }
.variant-grid-notices:empty { display: none; }
.variant-grid-notice { padding: 8px 10px; border-radius: var(--radius); background: var(--sunken); border: 1px solid var(--line); border-inline-start: 3px solid var(--danger); font-size: 0.78rem; }
.variant-grid-notice.is-info { border-inline-start-color: var(--brand); }

/* ── Products & Variants matrix, mockup 6.1 (items 6.2–6.4) ─────────────────
   The colour pill carries its own count (White · 59) instead of a badge under
   it, sits centred in its column with nothing beside it, and the reorder
   toggle lives in each cell's hover where the quantity it guards is.          */
.matrix-color-bulk-btn {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-weight: 700; padding: 6px 12px; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  cursor: pointer; transition: background 140ms ease, border-color 140ms ease;
}
.matrix-color-bulk-btn.is-readonly { background: transparent; border-color: transparent; cursor: default; }
.matrix-color-bulk-btn:hover:not(.is-readonly) { border-color: var(--brand); background: var(--tint); }
.matrix-color-count { font-weight: 600; font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.matrix-color-count::before { content: "\00B7"; margin-inline-end: 5px; }
/* 6.4: the row under the pointer keeps full contrast and its neighbours step back,
   so the eye lands where the hand is. Hover only — nothing is hidden from a reader. */
.variant-matrix tbody:hover tr:not(:hover) { opacity: 0.72; }
.variant-matrix tbody tr { transition: opacity 140ms ease; }
@media (prefers-reduced-motion: reduce) {
  .variant-matrix tbody tr { transition: none; }
  .variant-matrix tbody:hover tr:not(:hover) { opacity: 1; }
}

/* Item 6.6: the totals row reads as a total, not another row of data. */
.inventory-totals-row td { background: var(--sunken); font-weight: 600; border-top: 2px solid var(--line); }
.inventory-totals-row .text-center strong { font-variant-numeric: tabular-nums; }
/* Q1: money at the end of the row, in figures that line up down the column. */
.product-stock-value { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Return / exchange journey (item 3.5, shape A) ──────────────────────────
   Four numbered steps. The one you are on is lit, the ones behind are ticked,
   the ones ahead are dimmed and say why. Step 3 is struck through on a refund.  */
.return-stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; }
.return-step { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sunken); font-size: 0.78rem; opacity: 0.55; }
.return-step small { display: block; font-size: 0.66rem; color: var(--text-muted); }
.return-step-n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.7rem; font-weight: 700; border: 1px solid var(--line); }
.return-step.is-done { opacity: 1; }
.return-step.is-done .return-step-n { background: var(--success-tint, var(--surface)); color: var(--success); border-color: var(--success); }
.return-step.is-now { opacity: 1; border-color: var(--brand); background: var(--tint); }
.return-step.is-now .return-step-n { background: var(--brand); color: #111; border-color: var(--brand); }
.return-step.is-skipped { opacity: 0.4; text-decoration: line-through; }
.return-step.is-skipped small { text-decoration: none; }
.return-type-choice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.return-type-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.return-type-cards { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.return-type-card { flex: 1 1 150px; text-align: start; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--sunken); color: var(--text); cursor: pointer; font: inherit; }
.return-type-card b { display: block; font-size: 0.82rem; }
.return-type-card small { display: block; font-size: 0.66rem; color: var(--text-muted); }
.return-type-card.is-on { border-color: var(--brand); background: var(--tint); }
/* The type must stay changeable while the dialog is open. Hiding the other two once an invoice
   loaded meant the only way to switch was to close and start again (owner, 2026-09-19). */
.return-type-choice.is-settled .return-type-card:not(.is-on) { opacity: 0.6; }
.return-step-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; margin-inline-end: 6px; font-size: 0.66rem; background: var(--sunken); border: 1px solid var(--line); }
/* Dimmed, never dead. `pointer-events: none` here made every control in a section the journey
   thought was ahead — including the row X — do nothing at all, with no way to tell why
   (owner, 2026-09-19). Guidance must not be a lock. */
.return-step-section.is-locked { opacity: 0.55; }
/* It is prepended into its section, and one of those sections is a two-column grid, so it must
   span rather than take a cell — that is what left the summary alone in half a row with the
   reconciliation pushed beneath it (owner, 2026-09-19). */
.return-step-why { grid-column: 1 / -1; margin: 0 0 6px; font-size: 0.72rem; color: var(--text-muted); font-style: italic; }
@container (max-width: 640px) { .return-stepper { grid-template-columns: repeat(2, 1fr); } }

/* ── The alteration slip (item 4.2, shape A) ────────────────────────────────
   Four groups instead of eleven fields in a column. The dialog folds on its own
   width, never the screen's: `.form-row` would collapse under an 1100px screen
   with `!important` and stack a 900px dialog on every laptop.                   */
.alt-slip { display: flex; flex-direction: column; gap: 12px; container-type: inline-size; }
.alt-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--sunken); }
.alt-group-title { margin: 0 0 8px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.alt-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.alt-group-head .alt-group-title { margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.alt-group-dash { color: var(--text-muted); }
/* The field's own name, on the group's line. Still a label, so clicking it reaches the field. */
.alt-group-field { text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600; cursor: pointer; }
/* Fill the row rather than pair off. Two fixed columns left a dead cell wherever a
   group had an odd number of fields — the whole band beside "the status" was empty at
   1040px wide (owner, 2026-09-19) — and made a short field as tall as the tallest one
   beside it. The row takes as many columns as it has room for, and each field is only
   as tall as it needs to be. */
.alt-group-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; align-items: start; }
.alt-group-body > .alt-span { grid-column: 1 / -1; }
@container (max-width: 560px) { .alt-group-body { grid-template-columns: 1fr; } }
/* Five quick dates have to fit one line beside two other fields, so the chips are as
   small as a thumb still allows and the row they sit on is tight. */
.alt-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
.alt-chip { font-size: 0.68rem; padding: 3px 7px; border-radius: 2px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; }
/* The date and the day it lands on read as one fact, so they share a line. */
.alt-fitting-line { display: flex; align-items: center; gap: 8px; }
.alt-fitting-line input { flex: 1 1 auto; min-width: 0; }
.alt-fitting-line small { flex: 0 0 auto; font-weight: 600; color: var(--muted); }
.alt-chip.is-on { border-color: var(--brand); color: var(--brand); background: var(--tint); }
.alt-adj-row { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); }
.alt-adj-parts { display: grid; grid-template-columns: 1fr 1fr 80px 1.4fr; gap: 6px; }
@container (max-width: 560px) { .alt-adj-parts { grid-template-columns: 1fr 1fr; } }
.alt-adj-line { display: flex; gap: 8px; align-items: center; }

/* ── One height for the fields and buttons a person fills in ────────────────
   The rule the project already states: every field in a dialog is the same
   height. It was not true — a select stood 8px taller than the input beside it,
   because a select has an intrinsic height and nothing made the two agree, and
   the POS search boxes were pinned at `44px !important`, which no font-size
   setting could move. Both are expressed from the same token now, so they agree
   with each other and still grow when the shop scales its type.

   Scoped to dialogs and form groups on purpose: an inline control inside a table
   cell or a toolbar is deliberately smaller, and this must not inflate it.      */
:root {
  /* TASK-2026-163 S3: a field and a button in a dialog are the fixed control height (40px), whatever the text size. */
  --field-height: var(--control);
}
.modal-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.modal-card select,
.form-group > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-group > select {
  line-height: var(--control-line-height);
  min-height: var(--field-height);
}
/* A select, a date and a time are sized by their own box rather than by their text,
   so they need the height rather than a floor or they stand a little taller than
   every input beside them. */
.modal-card select,
.modal-card input[type="date"],
.modal-card input[type="time"],
.modal-card input[type="datetime-local"],
.form-group > select,
.form-group > input[type="date"],
.form-group > input[type="time"],
.form-group > input[type="datetime-local"] {
  height: var(--field-height);
}
/* A textarea starts at the field height and may be pulled taller; it is the one
   control whose height is the person's to choose. */
.modal-card textarea,
.form-group > textarea {
  line-height: var(--control-line-height);
  min-height: var(--field-height);
}
/* The POS search bar keeps its own width and icon padding; only its hard-coded
   height goes, so it matches the controls it sits beside. */
.pos-search-input,
.pos-cust-search-input {
  height: var(--field-height) !important;
}
/* Buttons in a dialog's footer sit beside those fields and share their height. */
.modal-footer > .btn,
.modal-footer > div > .btn {
  min-height: var(--field-height);
}

/* ── In-cell actions: small, even, and they fade ────────────────────────────
   A row's actions belong to the row the pointer is on. They were already faded
   on the product matrix; this makes every table agree, including on a keyboard,
   where they appear on focus rather than never.                                */
.data-table .btn-icon,
.inventory-data-table .btn-icon,
.return-items-table .btn-icon,
table .btn-icon {
  inline-size: var(--control-sm);
  block-size: var(--control-sm);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: var(--radius);
  line-height: 1;
  opacity: 0.55;
  transition: opacity 140ms ease, background-color 140ms ease, color 140ms ease;
}
table tr:hover .btn-icon,
table .btn-icon:focus-visible,
table .btn-icon:hover {
  opacity: 1;
}
table .btn-icon:hover { background: var(--tint, rgba(255, 255, 255, 0.06)); }
@media (prefers-reduced-motion: reduce) {
  table .btn-icon { transition: none; }
}

/* ── Calmer modals ─────────────────────────────────────────────────────────
   A dialog was stretching because three paddings stacked: the body's own, each
   group's, and a gap between them. The body gives a little back; nothing is
   hidden and nothing scrolls that did not scroll before.                       */
.modal-body { padding-block: var(--pad); }
.modal-body > .form-group + .form-group { margin-block-start: 10px; }

/* ── A dialog's vertical rhythm, paid for once ──────────────────────────────
   Every `.form-group` carried a 16px margin below it, including inside grids
   and columns that already set their own `gap`, so the space between two fields
   was charged twice. The gap owns the spacing now; the margin is only there for
   the places that have no gap of their own.                                     */
.modal-card .modal-header { padding-block: var(--space-2); }   /* TASK-2026-163 S3: 56px header, 20px body, 16px footer, as the dialog is drawn */
.modal-card .modal-body { padding-block: var(--pad); }
.modal-card .modal-footer { padding-block: var(--space-4); }
.modal-card .form-group { margin-bottom: 10px; }
.modal-card .form-row > .form-group,
.modal-card [style*="display:grid"] > .form-group,
.modal-card [style*="display: grid"] > .form-group,
.alt-group-body > .form-group,
.variant-grid-row > .form-group { margin-bottom: 0; }

/* A control inside a table cell is not a field: it is part of a row, and the row's
   height is the table's business. Without this the grid modal's quantity boxes grew
   from 30px to 47px and took every row of the grid with them. */
.modal-card td input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.modal-card th input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.modal-card td select,
.modal-card th select {
  /* Only the floor is lifted. Each cell control keeps whatever height it set for
     itself, which is the point: the row decides, not the dialog. */
  min-height: 0;
  line-height: normal;
}

/* One height, including the textarea and every button in the dialog. A textarea
   opens at the height of the field above it and is still the person's to drag
   taller; a button that sits beside a field matches it. */
.modal-card textarea,
.form-group > textarea { height: var(--field-height); resize: vertical; }
.modal-card .btn { min-height: var(--field-height); }
.modal-card .btn-sm,
.modal-card .btn-xs,
.modal-card .btn-icon { min-height: var(--control-sm); }

/* ── The adjustment row reads across, not down ──────────────────────────────
   Its four parts and the line they compose were stacked, so one adjustment cost
   two rows of height. With the wider dialog they fit on one.                    */
@container (min-width: 720px) {
  .alt-adj-row { flex-direction: row; align-items: center; gap: 8px; }
  .alt-adj-parts { flex: 1 1 auto; grid-template-columns: 1fr 1fr 78px 1.2fr; }
  .alt-adj-line { flex: 1 1 40%; }
}

/* ── The return dialog, shorter ─────────────────────────────────────────────
   The same fact was stated four times — the hero, a green bar, and a two-line
   note — and each restatement cost height. The hero is the answer, `Remaining`
   is the action, and the green bar is now a thin strip rather than a panel.     */
.return-summary-hero { min-height: 0; padding: 8px; }
.return-summary-hero-value { margin-top: 2px; font-size: 1.45rem; }
.return-summary-direction { min-height: 0; margin-top: 2px; }
.return-summary-metrics { gap: 6px; }
.return-summary-status { padding-block: 4px; font-size: 0.72rem; }
.return-tender-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.return-tender-amounts .form-group { margin: 0; }
.return-tender-amounts label { font-size: 0.7rem; margin-bottom: 1px; }
.return-tender-amounts input { padding: 2px 6px; font-size: 0.78rem; }
.return-exchange-empty { margin: 0; padding: 6px 2px; font-size: 0.75rem; color: var(--text-muted); }
/* The page's own action closes the filter row, pushed to its end. */
.filter-bar-action { margin-inline-start: auto; display: flex; }
.filter-bar-action > .btn { min-height: var(--control); white-space: nowrap; }
#exchange-items-list { max-height: 150px; }

/* The one-exchange rule, said where the invoice would have appeared. Nothing here is toggled by a
   class, so the `hidden` attribute keeps working: no `display` is set on this element. */
.return-lookup-refusal {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--radius);
  background: var(--warning-tint, var(--sunken));
  border: 1px solid var(--warning);
  border-inline-start-width: 3px;
  font-size: 0.82rem;
}

/* ── The value at cost is behind a curtain ───────────────────────
   The Owner and the Admin are the only people the server sends this figure to,
   and even for them it is blurred, because they work at the same desk as the
   staff (owner, 2026-09-19). A hover clears one cell; a tap does the same where
   there is no mouse, and a second tap puts it back.

   The blur is on an inner span rather than the cell, so the cell keeps a sharp
   edge and the column does not shimmer as the curtain lifts.                  */
.cost-private { cursor: pointer; }
.cost-private .cost-private-value {
  display: inline-block;
  filter: blur(5px);
  transition: filter 160ms ease-in-out;
  user-select: none;
}
.cost-private:hover .cost-private-value,
.cost-private:focus-visible .cost-private-value,
.cost-private[data-revealed="true"] .cost-private-value {
  filter: blur(0);
  user-select: text;
}
@media (prefers-reduced-motion: reduce) {
  .cost-private .cost-private-value { transition: none; }
}

/* The same curtain over a field you type into (owner, 2026-09-19). Focus lifts it as well as a
   hover, so clicking in to type clears it — which is also what a tap does, where there is no mouse. */
.cost-private-field {
  filter: blur(5px);
  transition: filter 160ms ease-in-out;
}
.cost-private-field:hover,
.cost-private-field:focus,
.cost-private-field:focus-visible,
.cost-private-field[data-revealed="true"] { filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .cost-private-field { transition: none; } }

/* With cost hidden, the grid's price row carries two fields, not three. */
.variant-grid-row.is-two-up { grid-template-columns: repeat(2, 1fr); }

/* A cell that was just saved glows once, so the eye finds what moved without the page reloading
   underneath it (owner, 2026-09-19). */
@keyframes vg-just-saved {
  from { background: var(--success-tint, var(--tint)); }
  to { background: transparent; }
}
.variant-grid-cell.is-just-saved { animation: vg-just-saved 1.8s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .variant-grid-cell.is-just-saved { animation: none; background: var(--success-tint, var(--tint)); }
}

/* Spec 010 US2 + US10 (approved mockups M1, M2) */
/* US2 (FR-009, M1 proposal 4): all seven tiers from the theme's own tokens. The four older fixed-hex rules above drew silver
   unreadable on the light theme and gold teal; ".badge.tier-x" outranks ".tier-x" wherever this block lands. */
.badge.tier-wood     { background: color-mix(in srgb, var(--warning) 6%, transparent); color: color-mix(in srgb, var(--warning) 55%, var(--muted)); border: 1px solid var(--line); }
.badge.tier-iron     { background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
.badge.tier-bronze   { background: var(--warning-tint); color: color-mix(in srgb, var(--warning) 75%, var(--danger)); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
.badge.tier-silver   { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--text-muted) 45%, transparent); }
.badge.tier-gold     { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); }
.badge.tier-platinum { background: var(--tint); color: var(--teal-200); border: 1px solid color-mix(in srgb, var(--teal-200) 35%, transparent); }
.badge.tier-diamond  { background: var(--info-tint); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 40%, transparent); }

/* US2 (M1 proposal 2): the quiet tag on each saved rule, and the rule's text beside it. */
.loyalty-how { margin: 0; line-height: 1.8; }
.loyalty-rule-desc { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.loyalty-rule-tag { font-size: .66rem; font-weight: 600; padding: 2px 8px; border-radius: 2px; background: var(--sunken);
  color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }

/* US10 (FR-034): one unticked box with the wording and its version. The checkbox keeps its own size (never the slip's field). */
.consent-slot:empty { display: none; }
.consent-slot { margin-block-end: 12px; }
.consent-box { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); cursor: pointer; line-height: 1.6; font-size: .84rem; }
.consent-box input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--fill); cursor: pointer; }
.consent-box-version { display: block; font-size: .7rem; color: var(--text-muted); margin-block-start: 2px; }
.consent-offline, .consent-quiet { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.consent-agreed { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); font-size: .84rem; }
.consent-spacer { flex: 1 1 auto; }
.consent-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 10px 12px; margin-block-end: 12px;
  border-radius: var(--radius); background: var(--sunken); font-size: .82rem; }
.consent-facts small { flex-basis: 100%; color: var(--muted); }

/* Status per channel: the word always says it, the colour only repeats it. */
.consent-status { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px 12px; align-items: center; font-size: .84rem; margin-block-end: 12px; }
.consent-when { color: var(--muted); font-size: .76rem; white-space: nowrap; }   /* a date never breaks inside itself */
.badge.consent-badge-none { background: var(--sunken); color: var(--muted); border: 1px dashed var(--line); }
.consent-sub { margin: 0 0 8px; font-size: .9rem; }

/* The register tab (M2 proposal 2): its "New" mark, the counted sentences, the filter row and the empty state. */
.customers-tabs { margin-block-end: 12px; }
.consent-new { font-size: .62rem; font-weight: 700; padding: 1px 6px; border-radius: 2px; background: var(--tint); color: var(--text); margin-inline-start: 4px; }
.consent-register { display: flex; flex-direction: column; gap: 12px; }
.consent-counts { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.consent-counts b { font-size: .92rem; }
.consent-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block-end: 12px; }
.consent-filter input, .consent-filter select { height: 40px; box-sizing: border-box; }
.consent-filter input { flex: 1 1 220px; min-width: 0; }
.consent-filter select { flex: 0 1 240px; width: auto; min-width: 0; }   /* the app's selects are full width; this one sits beside its label */
.consent-filter label { font-size: .8rem; color: var(--muted); }
.consent-name-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; text-align: start;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.consent-name-btn:hover { color: var(--brand); }
.consent-empty { padding: 36px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.consent-empty i { font-size: 2rem; color: var(--text-muted); }
.consent-empty h3 { margin: 0; font-size: 1rem; }
.consent-empty p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.7; max-width: 56ch; }
/* A customer found by the phone: their stored name and address are shown read-only (M2 proposal 4). */
.consent-slip input[readonly] { background: var(--sunken); color: var(--muted); }

/* Spec 010 US3, US4, US8, US11 (approved mockups M3, M4, M7, M8) */

/* US3 (M3) — Settings › General: the shop's identity lines. The missing sentence is toggled with the `hidden` attribute, so it
   carries no `display` of its own (css-traps §1). The accent stripe sits on the reader's start edge in both directions. */
.settings-identity-missing {
  margin-block-start: 6px;
  padding: 8px 10px;
  border-inline-start: 3px solid var(--warning);
  background: var(--warning-tint);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.6;
}
.settings-identity-missing[hidden] { display: none; }

/* US3 (M3) — the receipt designer: the lines the law names, ticked and locked, with the reason and where each line's words
   come from. */
.receipt-law-lines {
  padding: 12px 14px;
  border: 1px solid var(--border-active);
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--radius);
  background: var(--surface);
}
.receipt-law-line {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text);
}
.receipt-law-row input[type="checkbox"][disabled] { cursor: not-allowed; opacity: 0.75; }
.receipt-law-row .receipt-law-label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: default; }
.receipt-law-source { color: var(--muted); font-size: 0.74rem; line-height: 1.5; overflow-wrap: anywhere; }
.receipt-law-source.is-missing { color: var(--warning); }
.receipt-builder-aside { margin-inline-start: auto; color: var(--muted); font-size: 0.74rem; }
.receipt-tax-card-hint { font-size: 0.72rem; line-height: 1.5; margin-top: 4px; }

/* US4 (M4) — the cashier return window: the minimum and maximum under the field, the law on its own line across the row, and
   the refusal beside the field and above Save. */
.settings-return-window-cap { margin-block-start: 6px; font-size: 0.74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.settings-return-window-cap.is-refused { color: var(--danger); font-weight: 700; }
#settings-general-tab .settings-return-window-row .settings-return-window-law { grid-column: 1 / -1; }
.settings-return-window-law {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 12px;
  border-inline-start: 3px solid var(--info);
  background: var(--sunken);
  border-radius: var(--radius);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--muted);
}
.settings-return-window-law.is-refused { border-inline-start-color: var(--danger); background: var(--danger-tint); color: var(--text); }
.settings-return-window-law-mark { font-weight: 700; }
#settings-general-tab .setting-control > input.settings-field-refused {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}
.settings-save-refusal {
  margin-block-end: 10px;
  padding: 8px 12px;
  border-inline-start: 3px solid var(--danger);
  background: var(--danger-tint);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.6;
}
.settings-save-refusal[hidden] { display: none; }

/* US11 (M7) — Settings › Backup: the last automatic run, one line above the cards. It wraps by its own content, so no screen
   width is assumed; the tone stripe is on the start edge. */
.backup-last-run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--line);
  border-radius: var(--radius);
}
.backup-last-run.is-success { border-inline-start-color: var(--success); }
.backup-last-run.is-danger { border-inline-start-color: var(--danger); }
.backup-last-run.is-warning { border-inline-start-color: var(--warning); }
.backup-last-run-text { flex: 1 1 20rem; min-width: 0; }
.backup-last-run-main { font-size: 0.95rem; font-weight: 600; color: var(--text); line-height: 1.6; }
.backup-last-run-outcome.is-success { color: var(--success); }
.backup-last-run-outcome.is-danger { color: var(--danger); }
.backup-last-run-outcome.is-warning { color: var(--warning); }
.backup-last-run-sub { font-size: 0.82rem; color: var(--muted); margin-block-start: 4px; line-height: 1.6; }
.backup-last-run-action { flex: 0 0 auto; }

/* US8 (M8) — Inventory Reports: the out-of-stock word beside its 0, a thin red edge on the row's start, and the empty result
   with its one way out. */
.inventory-reports-stock { display: inline-flex; align-items: center; gap: 8px; }
.inventory-reports-oos { letter-spacing: 0; text-transform: none; }
.inv-report-table tr.inventory-reports-oos-row > td:first-child { border-inline-start: 3px solid var(--danger); }
.inventory-reports-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 8px;
  white-space: normal;
}
.inventory-reports-empty p { margin: 0; color: var(--text); font-weight: 600; }
.inventory-reports-empty small { color: var(--muted); }

/* ═══════════════════════════════════════════════════ SPEC 016: IMPORT / EXPORT (TASK-2026-081, lane U5)
   Ported from the approved mockups (scratch/mockups/016-01 .. 016-04, owner 2026-10-04). Every class is import-*; nothing else is restyled.
   Filled blocks use --accent-fill, never --accent-gold. Logical sides only; the arrow glyph is isolated, never its button. Nothing here gives an
   explicit display to an element the page toggles with the hidden attribute. */
:root { --import-well: var(--bg-secondary); --import-field: 44px; }
html[data-theme="retailpower"] { --import-well: #F9F8F6; }
html[data-theme="retailpower-dark"] { --import-well: var(--bg-secondary); }

.import-ico { inline-size: 16px; block-size: 16px; flex: none; display: inline-block; vertical-align: -3px; }
.import-ico.is-sm { inline-size: 14px; block-size: 14px; }
.import-ico.is-lg { inline-size: 20px; block-size: 20px; }
.import-ico.is-xl { inline-size: 28px; block-size: 28px; }
html[dir="rtl"] .import-ico.is-dir { transform: scaleX(-1); }
.import-ico.is-back { transform: scaleX(-1); }
html[dir="rtl"] .import-ico.is-dir.is-back { transform: none; }

/* the control: one button, its menu, and the reason beside it when a plan limit pauses it */
.import-control { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.import-menu-wrap { position: relative; display: inline-flex; }
.import-menu { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 70; min-inline-size: 250px; padding: 6px 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-float); }
.import-menu button { display: flex; align-items: center; gap: 12px; inline-size: 100%; padding: 10px 16px; border: 0; background: none; font-size: .92rem; color: var(--text); text-align: start; cursor: pointer; }
.import-menu button:hover, .import-menu button:focus-visible { background: var(--tint); outline: none; }
.import-menu button .import-ico { color: var(--text-muted); }
.import-menu-sep { block-size: 1px; background: var(--line); margin: 6px 0; }
.import-reason { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .86rem; color: var(--muted); max-inline-size: 420px; }
.import-reason .import-ico { color: var(--warning); }
.import-caret { inline-size: 7px; block-size: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); margin-inline-start: 4px; opacity: .7; }
.import-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--brand); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.import-link:hover { color: var(--accent-fill-hover, var(--brand)); }
.import-danger-text { color: var(--danger); }
.import-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 56px 20px; }
.import-empty-mark { inline-size: 44px; block-size: 50px; color: var(--text-muted); opacity: .7; }
.import-empty h3 { font-size: 1.05rem; }
.table-wrapper:has(> table > tbody .import-empty) > table > thead { display: none; }
.import-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }

/* the notice above the list and its twin on the dashboard */
.import-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--warning); border-radius: var(--radius); }
.import-strip-ico { color: var(--warning); flex: none; display: inline-flex; }
.import-strip-text { flex: 1 1 260px; min-inline-size: 0; font-weight: 600; font-size: .95rem; }

/* a message inside the dialog */
.import-msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; border: 1px solid var(--line);
  border-inline-start: 3px solid var(--brand); border-radius: var(--radius); background: var(--import-well); }
.import-msg > .import-ico { margin-top: 4px; color: var(--brand); }
.import-msg-title { font-weight: 700; font-size: .95rem; color: var(--text); }
.import-msg-body { grid-column: 2; font-size: .9rem; line-height: 1.75; color: var(--muted); }
.import-msg-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.import-msg.is-bad { border-inline-start-color: var(--danger); background: var(--danger-tint); }
.import-msg.is-bad > .import-ico { color: var(--danger); }
.import-msg.is-warn { border-inline-start-color: var(--warning); background: var(--warning-tint); }
.import-msg.is-warn > .import-ico { color: var(--warning); }
.import-msg.is-ok { border-inline-start-color: var(--success); background: var(--success-tint); }
.import-msg.is-ok > .import-ico { color: var(--success); }

/* the dialog: one card, five steps, full screen on a phone */
.import-card { --import-field: 44px; display: flex; flex-direction: column; inline-size: 100%; max-block-size: calc(calc(100 * var(--vh)) - 48px); container-type: inline-size; }
.import-card.modal-md { max-inline-size: 720px; }
.import-card.modal-lg { max-inline-size: 1000px; }
.import-card .modal-header { align-items: center; gap: 12px; }
.import-card .modal-header > div:first-child { min-inline-size: 0; flex: 1 1 auto; }
.import-sub { font-size: .86rem; color: var(--muted); font-weight: 500; margin-top: 2px; }
.import-head-end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.import-body { padding: 22px 24px; overflow-y: auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: 20px; min-block-size: 0; }
.import-body > * { flex-shrink: 0; }
.import-card .modal-footer { flex-wrap: wrap; }
.import-card input:not([type="checkbox"]):not([type="radio"]), .import-card select { block-size: auto; min-block-size: var(--import-field); box-sizing: border-box; }
/* a dropdown is never given a fixed height: its line is `normal` (the base rule says why) and a fixed 44px left 22px for a 25px Arabic line, so the value was cropped top and bottom */
.import-card select { padding-block: 8px; }
.import-field { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.import-label { font-size: .86rem; font-weight: 600; color: var(--text); }
.import-hint { font-size: .82rem; color: var(--text-muted); }
.import-sub-text { font-size: .86rem; color: var(--muted); }
.import-steps { list-style: none; margin: -4px 0 0; padding: 0 0 16px; display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
.import-steps li { flex: 1 1 0; display: flex; align-items: center; gap: 8px; min-inline-size: 0; font-size: .86rem; color: var(--text-muted); font-weight: 600; }
.import-steps li + li::before { content: ""; flex: 0 0 18px; block-size: 1px; background: var(--line); }
.import-step-n { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font-size: .82rem; flex: none; background: var(--surface); }
.import-step-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.import-steps li.is-now { color: var(--text); }
.import-steps li.is-now .import-step-n { background: var(--fill); border-color: var(--fill); color: #fff; }
.import-steps li.is-done { color: var(--muted); }
.import-steps li.is-done .import-step-n { color: var(--brand); border-color: var(--border-active); }
.import-step-sm { display: none; font-size: .88rem; font-weight: 700; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-top: -6px; }
.import-busy { display: flex; flex-direction: column; gap: 10px; padding: 18px 0; }
.import-busy progress, .import-progress progress { inline-size: 100%; block-size: 12px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 2px; background: var(--sunken); overflow: hidden; }
.import-busy progress::-webkit-progress-bar, .import-progress progress::-webkit-progress-bar { background: var(--sunken); border-radius: 2px; }
.import-busy progress::-webkit-progress-value, .import-progress progress::-webkit-progress-value { background: var(--fill); border-radius: 2px; }
.import-busy progress::-moz-progress-bar, .import-progress progress::-moz-progress-bar { background: var(--fill); border-radius: 2px; }

/* source cards, the drop zone, the file row, sheets, the date question */
.import-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.import-source-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.import-source-card:hover { border-color: var(--text-muted); }
.import-source-card.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--tint); }
.import-source-card input { margin: 4px 0 0; inline-size: 18px; block-size: 18px; accent-color: var(--fill); }
.import-source-card b { font-size: 1rem; }
.import-source-sub { grid-column: 2; font-size: .86rem; color: var(--muted); }
.import-source-extra { grid-column: 2; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.import-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--import-well); text-align: center; }
.import-drop.is-over { border-color: var(--brand); background: var(--tint); }
.import-drop .import-ico { inline-size: 30px; block-size: 30px; color: var(--text-muted); }
.import-drop-title { font-size: 1.02rem; font-weight: 700; }
.import-drop-limits { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: .86rem; color: var(--muted); }
.import-file-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.import-file-row .import-ico { color: var(--success); }
.import-file-row b { overflow-wrap: anywhere; }
.import-file-row .btn { margin-inline-start: auto; }
.import-sheet-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.import-sheet-list li { border-bottom: 1px solid var(--line); }
.import-sheet-list li:last-child { border-bottom: 0; }
.import-sheet-list label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; }
.import-sheet-list input { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--fill); }
.import-date-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.import-date-option { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.import-date-option.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.import-date-option .import-check { font-weight: 700; }
.import-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .92rem; }
.import-check input { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--fill); flex: none; }
.import-date-example { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: .9rem; margin: 0; }
.import-date-example dt { color: var(--muted); }
.import-date-example dd { margin: 0; font-weight: 600; }
.import-matching-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.import-matching-head .import-sub-text { font-size: .9rem; }

/* the matching table */
.import-table td { white-space: normal; vertical-align: middle; }
.import-col { display: flex; flex-direction: column; gap: 4px; min-inline-size: 170px; }
.import-col b { font-size: .95rem; }
.import-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: .82rem; color: var(--muted); }
.import-sample-sep { display: inline-block; inline-size: 1px; block-size: 11px; background: var(--line); margin-inline: 8px; }
.import-arrow-cell { color: var(--text-muted); inline-size: 1%; padding-inline: 0 !important; }
.import-table select { min-inline-size: 190px; inline-size: auto; max-inline-size: 100%; }          /* as wide as its longest option, so a value is never cropped by a narrow cell */
.import-fixed { display: flex; flex-direction: column; gap: 2px; min-inline-size: 190px; }
.import-fixed b { font-size: .9rem; }
.import-fixed span { font-size: .82rem; color: var(--muted); }
.import-state-cell { inline-size: 1%; white-space: nowrap !important; }
.import-state { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; }
.import-row.is-ok .import-state { color: var(--success); }
.import-row.is-preset .import-state { color: var(--brand); }
.import-row.is-warn .import-state { color: var(--warning); }
.import-row.is-warn select { border-color: var(--warning); }
.import-row.is-off .import-state { color: var(--text-muted); }
.import-row.is-off .import-col b { color: var(--muted); }
.import-row.is-bad .import-state, .import-row.is-bad .import-fixed b, .import-row.is-bad .import-fixed span { color: var(--danger); }

/* the check: counts, decisions, rejected rows */
.import-card-box { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-inline-size: 0; }
.import-card-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; padding-inline-end: 52px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.import-card-head h4 { font-size: 1.02rem; font-weight: 700; }
.import-card-box .info-tip { position: absolute; inset-block-start: 12px; inset-inline-end: 14px; }
.import-card-box .table-wrapper { border: 0; border-radius: 0; box-shadow: none; }
.import-summary th:not(:first-child), .import-summary td:not(:first-child) { text-align: end; }
.import-summary td { font-variant-numeric: tabular-nums; }
.import-summary .is-zero { color: var(--text-muted); }
.import-summary .is-rejected { color: var(--danger); font-weight: 700; }
.import-confirms { display: flex; flex-direction: column; gap: 10px; }
.import-confirms h4, .import-rejected-head h4 { font-size: .95rem; font-weight: 700; }
.import-confirm { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--line); border-inline-start: 3px solid var(--brand); border-radius: var(--radius); background: var(--import-well); }
.import-confirm p { flex: 1 1 280px; margin: 0; font-size: .94rem; font-weight: 600; }
.import-confirm.is-done { border-inline-start-color: var(--success); }
.import-confirm.is-done .badge { margin-inline-start: auto; }
.import-rejected { display: flex; flex-direction: column; gap: 10px; }
.import-rejected-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.import-rejected-head .btn { margin-inline-start: auto; }
.import-rejected td.is-wrap { white-space: normal; min-inline-size: 260px; }
.import-rowno { color: var(--muted); font-variant-numeric: tabular-nums; }
.import-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); }
.import-pager-count { font-size: .82rem; color: var(--muted); }
.import-pager-nav { display: inline-flex; align-items: center; gap: 8px; }
.import-pager-nav .btn { min-inline-size: 96px; justify-content: center; }
.import-pager-no { min-inline-size: 56px; text-align: center; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* progress, the end, history, undo */
.import-progress { display: flex; flex-direction: column; gap: 12px; padding: 22px 0 6px; }
.import-progress-title { font-size: 1.05rem; font-weight: 700; }
.import-result-head { display: flex; align-items: flex-start; gap: 14px; }
.import-result-head .import-ico { inline-size: 28px; block-size: 28px; color: var(--success); flex: none; margin-top: 2px; }
.import-result-head.is-part .import-ico { color: var(--warning); }
.import-result-head h4 { font-size: 1.1rem; margin: 0; }
.import-result-head p { color: var(--muted); margin: 4px 0 0; }
.import-result-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.import-result-list li { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.import-result-list li:last-child { border-bottom: 0; }
.import-result-list .import-link { margin-inline-start: auto; }
.import-undo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.import-undo-grid section { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.import-undo-grid h4 { font-size: .92rem; margin: 0 0 8px; }
.import-undo-grid ul { margin: 0; padding-inline-start: 18px; line-height: 1.9; font-size: .92rem; }
.import-undo-grid .is-keep { border-inline-start: 3px solid var(--warning); }
.import-undo-grid .is-gone { border-inline-start: 3px solid var(--danger); }
.import-history-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.import-history-toolbar input { flex: 1 1 260px; }
.import-history-toolbar select { flex: 0 1 200px; }
.import-history-status { white-space: nowrap; }
.import-history-actions { display: flex; gap: 8px; justify-content: flex-end; }
.import-history th, .import-history td { padding: 10px 10px; }
.import-history td { white-space: normal; vertical-align: middle; }
.import-history td.import-history-status, .import-history td:nth-child(1), .import-history td:nth-child(2) { white-space: nowrap; }
.import-history .import-link { text-align: start; overflow-wrap: anywhere; }
/* Account Management's import (spec 016, lane ACC; mockup 016-m6): the one button joins the page's action bar like its siblings; the date of the balances and the sample link sit above and below the drop zone. */
.bank-import-host { flex: 1 1 0; min-width: 0; display: flex; }
.bank-import-host .import-control, .bank-import-host .import-menu-wrap { flex: 1 1 auto; min-width: 0; display: flex; }
.bank-import-host .import-menu-wrap > .btn { flex: 1 1 auto; padding: 5px 12px; font-size: 0.78rem; min-height: var(--control-sm, 36px); }
.import-accounts-date { max-inline-size: 18rem; margin-block-end: 14px; }
.import-accounts-date .import-label { display: inline-flex; align-items: center; gap: 6px; }
.import-sample-link { margin-block-start: 12px; }
.import-summary .is-money { white-space: nowrap; }

@media (max-width: 760px) {
  .import-steps { display: none; }
  .import-step-sm { display: block; }
  .import-table thead { display: none; }
  .import-table, .import-table tbody, .import-table tr, .import-table td { display: block; inline-size: 100%; }
  .import-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .import-table td { padding: 4px 0 !important; border: 0 !important; }
  .import-arrow-cell { display: none !important; }
  .import-table select, .import-fixed, .import-col { min-inline-size: 0; }
  .import-table select { inline-size: 100%; }
}
/* the matching table folds into cards on a tablet too: a select is as wide as its longest option (never cropped), and three columns of that do not fit 720 px */
@media (min-width: 761px) and (max-width: 900px) {
  .import-table thead { display: none; }
  .import-table, .import-table tbody, .import-table tr, .import-table td { display: block; inline-size: 100%; }
  .import-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .import-table td { padding: 4px 0 !important; border: 0 !important; }
  .import-arrow-cell { display: none !important; }
  .import-table select { inline-size: 100%; }
  .import-table select, .import-fixed, .import-col { min-inline-size: 0; }
}
@media (max-width: 600px) {
  .modal-overlay.import-overlay { padding: 0; align-items: stretch; }
  .import-menu { min-inline-size: min(250px, calc(calc(100 * var(--vw)) - 32px)); }
  .import-card { max-block-size: none; block-size: 100%; margin: 0; border-radius: 0; border: 0; }
  .import-card .modal-header { padding: 14px 16px; }
  .import-body { padding: 18px 16px; }
  .import-card .modal-footer { padding: 12px 16px; }
  .import-summary th, .import-summary td { padding-inline: 8px; white-space: normal; }
  .import-card .modal-footer .btn { flex: 1 1 auto; }
  .import-history td.import-history-status, .import-history td:nth-child(1), .import-history td:nth-child(2) { white-space: normal; }
  .import-stack thead { display: none; }
  .import-stack, .import-stack tbody, .import-stack tr, .import-stack td { display: block; inline-size: 100%; }
  .import-stack tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .import-stack tbody tr:last-child { border-bottom: 0; }
  .import-stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0 !important; border: 0 !important; white-space: normal; min-inline-size: 0 !important; text-align: end; }
  .import-stack td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .84rem; font-weight: 600; text-align: start; flex: none; max-inline-size: 45%; }
  .import-stack td:not([data-label]) { justify-content: flex-end; }
}
/* a dialog folds on ITS OWN width, not the screen's */
@container (max-width: 560px) {
  .import-source-grid, .import-date-options, .import-undo-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── SPEC 016 · 2026-10-12 (lane UI): the owner's answers as the redrawn mockups draw them. Real controls only (buttons, inputs, selects, checkboxes, radios, tables);
   every new class is import-*; sides are logical; nothing toggled with the hidden attribute is given a display. ───────────────────────────────────────────────── */
.import-checklist { list-style: none; margin: 0; padding: 4px 0; }
.import-checklist li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: .94rem; }
.import-checklist li:last-child { border-bottom: 0; }
.import-checklist li > span { flex: 1 1 auto; min-inline-size: 0; }
.import-checklist .import-ico { color: var(--success); }
.import-checklist .info-tip { position: static; flex: none; }          /* the (i) of a line stays beside its line, not in the card's corner */
.import-corner-tip { position: absolute; inset-block-start: 12px; inset-inline-end: 14px; z-index: 3; }
.fx-results:has(> .import-corner-tip) { position: relative; }
.fx-results:has(> .import-corner-tip) .fx-summary { padding-inline-end: 34px; }          /* the page's own sort line leaves the corner to the plan's (i) */

/* the two accepted layouts, drawn small */
.import-mini-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.import-mini-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-inline-size: 0; overflow: hidden; }
.import-mini-box h4 { margin: 0; padding: 10px 14px; font-size: .9rem; font-weight: 700; border-bottom: 1px solid var(--line); }
.import-mini-box .table-wrapper { border: 0; border-radius: 0; box-shadow: none; }
.import-mini { font-size: .82rem; }
.import-mini th, .import-mini td { padding: 6px 10px; white-space: nowrap; }

/* the size columns of the second layout: a real checkbox for each column that could be a size */
.import-size-picker > td { padding-block-start: 0 !important; }
.import-size-picker fieldset { margin: 0; padding: 8px 14px 12px; border: 1px dashed var(--line); border-radius: var(--radius); min-inline-size: 0; }
.import-size-picker legend { padding-inline: 6px; font-size: .84rem; font-weight: 600; color: var(--muted); }
.import-size-picks { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* the date of an opening balance: one date, or a date column of the file */
.import-balance-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.import-balance-line { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 1.2fr); gap: 8px 16px; align-items: center; }
.import-balance-field { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-inline-size: 0; }
.import-balance-field label { font-size: .86rem; color: var(--muted); }
.import-balance-field input, .import-balance-field select { flex: 1 1 160px; min-inline-size: 0; max-inline-size: 100%; }
.import-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 16px 20px; }
.import-balances dt { font-size: .84rem; color: var(--muted); }
.import-balances dd { margin: 4px 0 0; }
.import-money { font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* the check: the body can be read again quietly, the Free plan's list, the same phone, the decisions */
.import-check-body { display: flex; flex-direction: column; gap: 20px; min-inline-size: 0; }
.import-check-body[inert] { opacity: .55; }
.import-body > progress { inline-size: 100%; block-size: 6px; flex: none; appearance: none; -webkit-appearance: none; border: 0; border-radius: 2px; background: var(--sunken); overflow: hidden; }
.import-body > progress::-webkit-progress-bar { background: var(--sunken); border-radius: 2px; }
.import-body > progress::-webkit-progress-value { background: var(--fill); border-radius: 2px; }
.import-body > progress::-moz-progress-bar { background: var(--fill); border-radius: 2px; }
.import-choose-count { padding: 12px 20px; font-size: .92rem; font-weight: 600; border-bottom: 1px solid var(--line); }
.import-pick { inline-size: 1%; }
.import-pick input { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--fill); cursor: pointer; }
.import-choose .is-num, .import-choose th.is-num { text-align: end; font-variant-numeric: tabular-nums; }
.import-choose tr.is-waiting td { color: var(--muted); }
.import-same td { white-space: normal; vertical-align: middle; }
.import-confirms-sub { display: contents; }
.import-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* the new colour and size names, one by one */
.import-names { display: flex; flex-direction: column; gap: 14px; }
.import-names-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
.import-names-head h4 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.import-choices { display: flex; flex-direction: column; gap: 10px; }
.import-choice { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.import-choice.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.import-choice select { inline-size: 100%; min-inline-size: 0; }
.import-undo-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.import-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 16px 20px; }
.import-tiles dt { font-size: .84rem; color: var(--muted); }
.import-tiles dd { margin: 4px 0 0; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.import-ba { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.import-before { color: var(--text-muted); text-decoration: line-through; }
.import-pad { padding: 12px 20px; margin: 0; }
.import-changes td { white-space: normal; vertical-align: middle; }
@container (max-width: 560px) {
  .import-mini-pair, .import-balances, .import-balance-line { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   SPEC 015 (TASK-2026-080): the barcode screens, drawn as the approved mockups MK-1 to MK-5 (scratch/mockups/015-mk*).
   Shared pieces first (the notice box, the scan field, the (i) corner of a card), then each screen's own block.
   Nothing here is toggled with the `hidden` attribute, so nothing here gives such an element an explicit display.
   Sides are logical; the few physical ones are a code that is always read left to right, and say so.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --code-well: var(--bg-secondary); --code-num-font: "Segoe UI", "Cairo", "Noto Sans", Tahoma, Arial, sans-serif; }
html[data-theme="retailpower"] { --code-well: #F9F8F6; }
html[data-theme="retailpower-dark"] { --code-well: var(--bg-secondary); }

.code-ltr { font-family: var(--code-num-font); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; unicode-bidi: isolate; white-space: nowrap; }
.code-num { font-family: var(--code-num-font); font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.code-ico { inline-size: 16px; block-size: 16px; flex: none; display: inline-block; vertical-align: -3px; }
.code-ico.is-sm { inline-size: 14px; block-size: 14px; }
.code-ico.is-lg { inline-size: 20px; block-size: 20px; }
.code-hint { font-size: .82rem; color: var(--text-muted); }

/* a labelled field: the label is plain text above the control, never upper-cased (the generic form-group label is) */
.code-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.code-field > label, .code-label { display: block; margin: 0; font-size: .86rem; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
.code-field input:not([type="checkbox"]):not([type="radio"]),
.code-field select { inline-size: 100%; min-width: 0; box-sizing: border-box; block-size: var(--field-height); min-block-size: var(--field-height); padding: 0 12px;
  background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font-size: .9rem; }
.code-field input:not([type="checkbox"]):not([type="radio"]):focus, .code-field select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint); outline: none; }
.code-field input.is-bad { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); }
.code-field input[dir="ltr"] { text-align: start; }
html[dir="rtl"] .code-field input[dir="ltr"] { text-align: right; }   /* physical on purpose: the text is left to right, the page is not */
.code-scan { position: relative; }
.code-scan .code-ico { position: absolute; inset-inline-start: 14px; inset-block-start: 50%; translate: 0 -50%; color: var(--text-muted); pointer-events: none; }
.code-scan input { font-family: var(--code-num-font); letter-spacing: .02em; }
/* the field's text is left to right and its picture sits at the page's start edge, so the room for the picture is given per direction */
html[dir="ltr"] .code-field .code-scan input { padding-left: 42px; }
html[dir="rtl"] .code-field .code-scan input { padding-right: 42px; }

/* a notice: a title, one sentence, at most two actions (inside a dialog or under a field) */
.code-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; border: 1px solid var(--line);
  border-inline-start: 3px solid var(--brand); border-radius: var(--radius); background: var(--code-well); }
.code-notice > .code-ico { margin-block-start: 4px; color: var(--brand); }
.code-notice-title { font-weight: 700; font-size: .95rem; color: var(--text); overflow-wrap: anywhere; }
.code-notice-body { grid-column: 2; font-size: .9rem; line-height: 1.75; color: var(--muted); }
.code-notice-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 8px; }
.code-notice.is-bad { border-inline-start-color: var(--danger); background: var(--danger-tint); }
.code-notice.is-bad > .code-ico { color: var(--danger); }
.code-notice.is-warn { border-inline-start-color: var(--warning); background: var(--warning-tint); }
.code-notice.is-warn > .code-ico { color: var(--warning); }
.code-notice.is-ok { border-inline-start-color: var(--success); background: var(--success-tint); }
.code-notice.is-ok > .code-ico { color: var(--success); }
/* a kind badge names what a code is, not a status: plain case, no status shape in front of it (the mockups draw it so) */
.badge.code-kind { gap: 6px; padding: 2px 9px; border-radius: var(--radius); font-size: .78rem; letter-spacing: 0; text-transform: none; line-height: 1.7; }
.badge.code-kind::before { content: none; }
.code-btn-danger { background: transparent; border-color: var(--line); color: var(--danger); }
.code-btn-danger:hover:not(:disabled) { background: var(--danger-tint); border-color: var(--danger); color: var(--danger); }
.code-empty-mark { inline-size: 30px; block-size: 34px; flex: none; color: var(--text-muted); opacity: .7; }
.code-pager { border-top: 1px solid var(--line); }

/* ── MK-1: a variant's codes ───────────────────────────────────────────────────────────────────────────────────── */
.modal-card.variant-codes-card { max-width: 720px; background: var(--surface); }
.variant-codes-heading { min-width: 0; }
.variant-codes-for { margin-block-start: 2px; font-size: .86rem; font-weight: 500; color: var(--muted); overflow-wrap: anywhere; }
.variant-codes-head-end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.variant-codes-head-end .info-tip { margin-inline-start: 0; }
.variant-codes-body { display: flex; flex-direction: column; gap: 20px; }
.variant-codes-section { display: flex; flex-direction: column; gap: 10px; }
.variant-codes-h3 { margin: 0; font-size: .95rem; font-weight: 700; color: var(--text); }
.variant-codes-below:empty { display: none; }
.variant-codes-below { display: flex; flex-direction: column; gap: 14px; }
.variant-codes-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.variant-codes-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.variant-codes-row:last-child { border-bottom: 0; }
.variant-codes-row.is-main { background: var(--code-well); }
.variant-codes-row.is-new { background: var(--tint); box-shadow: inset 3px 0 0 var(--brand); }
html[dir="rtl"] .variant-codes-row.is-new { box-shadow: inset -3px 0 0 var(--brand); }
.variant-codes-row.is-retired .variant-codes-code { text-decoration: line-through; color: var(--text-muted); }
.variant-codes-top { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; min-width: 0; }
.variant-codes-code { font-size: 1.05rem; font-weight: 700; }
.variant-codes-label { font-size: .84rem; color: var(--muted); font-weight: 600; }
.variant-codes-meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: .84rem; color: var(--muted); }
.variant-codes-act { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; align-items: center; }
.variant-codes-confirm { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-block-start: 10px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.variant-codes-confirm p { flex: 1 1 240px; margin: 0; font-size: .9rem; font-weight: 600; }
.variant-codes-new { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px 16px; align-items: end; padding: 16px;
  border: 1px solid var(--border-active); border-radius: var(--radius); background: var(--tint); }
.variant-codes-new-code { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.variant-codes-new-code .variant-codes-code { font-size: 1.2rem; }
.variant-codes-new-act { display: flex; gap: 8px; }
.variant-codes-empty { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: .95rem; }
.variant-codes-foot-start { margin-inline-end: auto; font-size: .88rem; color: var(--muted); }
.variant-codes-toggle { background: none; border: 0; padding: 0; cursor: pointer; color: var(--brand); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.variant-codes-toggle:hover { color: var(--text); }
.variant-codes-body .bank-ledger-footer { border: 1px solid var(--line); border-radius: var(--radius); }
/* the codes button in each cell of the product's variant matrix: a scan mark and how many codes the cell has */
.matrix-codes-row { display: flex; justify-content: center; margin-block-start: 6px; }
.matrix-codes-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--muted); font-size: .78rem; line-height: 1.4; cursor: pointer; }
.matrix-codes-btn:hover, .matrix-codes-btn:focus-visible { color: var(--brand); border-color: var(--border-active); }
.matrix-codes-btn .code-ico { inline-size: 14px; block-size: 14px; }
@media (max-width: 600px) {
  .modal-overlay#variant-codes-modal { padding: 0; align-items: stretch; }
  .modal-card.variant-codes-card { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .variant-codes-row { grid-template-columns: minmax(0, 1fr); }
  .variant-codes-act { grid-column: 1; grid-row: auto; margin-block-start: 6px; }
  .variant-codes-new { grid-template-columns: minmax(0, 1fr); }
  .variant-codes-new-act .btn { flex: 1 1 auto; }
  .variant-codes-card .modal-footer .btn { flex: 1 1 auto; }
}

/* ── Spec 015 US3 (TASK-2026-080): the colour x size picker, the till's scan outcomes, "Which one?", "Link to an item", the unknown-tags strip.
   Drawn as MK-3 and MK-5. The picker's cells are real buttons; a disabled one is dashed and says why in words. ───────────────────────────── */
.code-swatch { inline-size: 12px; block-size: 12px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text) 40%, transparent); display: inline-block; flex: none; vertical-align: -1px; }
.code-swatch.is-none { background: transparent; }

.cell-picker-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.cell-picker { border-collapse: separate; border-spacing: 0; inline-size: 100%; font-size: .9rem; }
.cell-picker th { padding: 10px 12px; font-weight: 700; font-size: .84rem; color: var(--muted); background: var(--surface); text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line); text-transform: none; letter-spacing: 0; }
.cell-picker thead th:first-child { text-align: start; position: sticky; inset-inline-start: 0; z-index: 1; }
.cell-picker td { padding: 6px; text-align: center; border-bottom: 1px solid var(--line); }
.cell-picker tbody tr:last-child td, .cell-picker tbody tr:last-child th { border-bottom: 0; }
.cell-picker tbody th { text-align: start; font-weight: 700; padding-inline: 12px; background: var(--surface); color: var(--text); font-size: .9rem; position: sticky; inset-inline-start: 0; z-index: 1; white-space: nowrap; }
.cell-picker-none { color: var(--text-muted); }
.cell-picker-cell { inline-size: 100%; min-inline-size: 76px; min-block-size: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 4px 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; color: var(--text); font-size: .88rem; }
.cell-picker-cell:hover:not(:disabled) { border-color: var(--brand); background: var(--tint); }
.cell-picker-cell small { font-size: .76rem; color: var(--text-muted); font-weight: 500; }
.cell-picker-cell[aria-pressed="true"] { border-color: var(--fill); background: var(--fill); color: #fff; }
.cell-picker-cell[aria-pressed="true"] small { color: rgba(255, 255, 255, .85); }
.cell-picker-cell:disabled { cursor: not-allowed; background: var(--surface); color: var(--text-muted); border-style: dashed; }
.cell-picker-cell:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* the till: the one sentence a scan leaves under the search box, and the box itself marked */
.pos-scan-outcome:empty { display: none; }
.pos-scan-outcome .code-notice-title { font-size: 1rem; }
.pos-search-input.is-bad { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); }
.modal-card.pos-which-one-card { max-width: 460px; background: var(--surface); }
.modal-card.pos-link-card, .modal-card.unknown-tags-link-card { max-width: 720px; background: var(--surface); }
.pos-which-one-heading { min-width: 0; }
.pos-which-one-heading h3 { margin: 0; }
.pos-which-one-for { margin-block-start: 2px; font-size: .86rem; font-weight: 500; color: var(--muted); overflow-wrap: anywhere; }
.pos-which-one-head-end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.pos-which-one-head-end .info-tip { margin-inline-start: 0; }
.pos-which-one-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.pos-which-one-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; inline-size: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line);
  background: var(--surface); color: var(--text); text-align: start; cursor: pointer; font-size: .95rem; }
.pos-which-one-list li:last-child .pos-which-one-row { border-bottom: 0; }
.pos-which-one-row:hover:not(:disabled) { background: var(--tint); }
.pos-which-one-row.is-focus { outline: 2px solid var(--brand); outline-offset: -2px; background: var(--tint); }
.pos-which-one-row:disabled { cursor: not-allowed; color: var(--text-muted); background: var(--surface); }
.pos-which-one-v { font-weight: 700; }
.pos-which-one-stock { font-size: .86rem; color: var(--muted); white-space: nowrap; }
.pos-which-one-row:disabled .pos-which-one-stock { color: var(--danger); font-weight: 600; }
.pos-link-body { display: flex; flex-direction: column; gap: 16px; }
.pos-link-step { font-size: .84rem; color: var(--muted); font-weight: 600; }
.pos-link-results { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.pos-link-results button { display: flex; justify-content: space-between; align-items: center; gap: 14px; inline-size: 100%; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--line);
  background: var(--surface); color: var(--text); text-align: start; cursor: pointer; }
.pos-link-results li:last-child button { border-bottom: 0; }
.pos-link-results button:hover { background: var(--tint); }
.pos-link-sub { font-size: .84rem; color: var(--muted); }
.pos-link-none { padding: 18px 14px; color: var(--muted); }
.pos-link-product { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pos-link-back { background: none; border: 0; padding: 0; cursor: pointer; color: var(--brand); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pos-link-below:empty { display: none; }
.pos-link-foot-start { margin-inline-end: auto; font-size: .88rem; color: var(--muted); }

/* MK-5: the strip and the list on Products & Variants */
.unknown-tags-host:empty { display: none; }
.unknown-tags-host { display: flex; flex-direction: column; gap: 14px; margin-block-end: 14px; }
.unknown-tags-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--warning); border-radius: var(--radius); }
.unknown-tags-strip > .code-ico { color: var(--warning); }
.unknown-tags-strip-text { flex: 1 1 260px; min-width: 0; font-weight: 600; font-size: .95rem; }
.unknown-tags-panel { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.unknown-tags-panel > .info-tip { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; margin: 0; z-index: 3; }
.unknown-tags-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; padding-inline-end: 52px; border-bottom: 1px solid var(--line); }
.unknown-tags-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.unknown-tags-panel .table-wrapper { border: 0; border-radius: 0; box-shadow: none; }
.unknown-tags-table { inline-size: 100%; border-collapse: collapse; font-size: .92rem; }
.unknown-tags-table th { padding: 11px 16px; text-align: start; font-size: .82rem; font-weight: 700; color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--line); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.unknown-tags-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.unknown-tags-table tbody tr:last-child td { border-bottom: 0; }
.unknown-tags-acts { display: flex; gap: 8px; justify-content: flex-end; }
.unknown-tags-when { white-space: nowrap; }
.unknown-tags-link-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
@media (max-width: 600px) {
  .modal-overlay#pos-which-one-modal { padding: 0; }
  .modal-card.pos-which-one-card { margin: auto 16px; max-width: none; width: auto; }
  .pos-which-one-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pos-which-one-price { grid-column: 2; grid-row: 2; }
  .modal-overlay#pos-link-modal, .modal-overlay#unknown-tags-link-modal { padding: 0; align-items: stretch; }
  .modal-card.pos-link-card, .modal-card.unknown-tags-link-card { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .unknown-tags-link-row { grid-template-columns: minmax(0, 1fr); }
  .unknown-tags-table thead { display: none; }
  .unknown-tags-table, .unknown-tags-table tbody, .unknown-tags-table tr, .unknown-tags-table td { display: block; inline-size: 100%; }
  .unknown-tags-table tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .unknown-tags-table tbody tr:last-child { border-bottom: 0; }
  .unknown-tags-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border: 0; white-space: normal; text-align: end; }
  .unknown-tags-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .84rem; font-weight: 600; text-align: start; flex: none; max-inline-size: 45%; }
  .unknown-tags-table td:not([data-label]) { justify-content: flex-end; }
  .modal-card.pos-link-card .modal-footer .btn, .modal-card.unknown-tags-link-card .modal-footer .btn { flex: 1 1 auto; }
}

/* ── Spec 015 US2 (TASK-2026-080): the receive dialog's scan field and "Learn this code?", drawn as MK-2. ─────────────────────────────────── */
.po-receive-head-end { display: flex; align-items: center; gap: 8px; flex: none; }
.po-receive-head-end .info-tip { margin-inline-start: 0; }
.po-receive-scan-bar { position: sticky; inset-block-start: -22px; z-index: 3; margin-block-start: -22px; margin-block-end: 16px; display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--code-well); }
.po-receive-scan-status:empty, #po-receive-scan-extra:empty { display: none; }
.po-receive-status { display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 600; }
.po-receive-status.is-ok { color: var(--success); }
.po-receive-status.is-known { color: var(--brand); }
.po-receive-status.is-bad { color: var(--danger); }
.po-receive-scan-bar .code-field input.is-bad { border-color: var(--danger); }
.v-size-box.is-known { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--tint); background: var(--tint) !important; }
.modal-card.po-learn-card { max-width: 720px; background: var(--surface); }
.po-learn-body { display: flex; flex-direction: column; gap: 16px; }
.po-learn-code { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 1.35rem; font-weight: 700; }
.po-learn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
.po-learn-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .92rem; }
.po-learn-check input { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--fill); flex: none; }
.rcv-product-name { font-weight: 700; margin-block: 6px 4px; }
@media (max-width: 600px) {
  .po-receive-scan-bar { inset-block-start: -18px; margin-block-start: -18px; }
  .modal-overlay#po-learn-modal { padding: 0; align-items: stretch; }
  .modal-card.po-learn-card { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .po-learn-row { grid-template-columns: minmax(0, 1fr); }
  .modal-card.po-learn-card .modal-footer .btn { flex: 1 1 auto; }
}

/* ── Spec 015 US5 (TASK-2026-080): Settings > Variant options, drawn as MK-4. ───────────────────────────────────────────────────────────────── */
.variant-options-page { display: flex; flex-direction: column; gap: 22px; }
.variant-options-top { display: flex; justify-content: flex-end; margin-block-end: 18px; }
.variant-options-page { margin-block-start: 0; }
.variant-options-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; margin-block-end: 22px; }
.variant-options-card > .info-tip { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; margin: 0; z-index: 3; }
.variant-options-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; padding-inline-end: 52px; border-bottom: 1px solid var(--line); }
.variant-options-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.variant-options-sub { font-size: .86rem; color: var(--muted); }
.variant-options-head-btn { margin-inline-start: auto; }
.variant-options-card .table-wrapper { border: 0; border-radius: 0; box-shadow: none; }
.variant-options-table { inline-size: 100%; border-collapse: collapse; font-size: .92rem; }
.variant-options-table th { padding: 11px 16px; text-align: start; font-size: .82rem; font-weight: 700; color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--line); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.variant-options-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.variant-options-table tbody tr:last-child td { border-bottom: 0; }
.variant-options-narrow { inline-size: 1%; }
.variant-options-end { text-align: end; }
.variant-options-name b { display: block; }
.variant-options-name span { font-size: .84rem; color: var(--muted); }
.variant-options-preview { max-inline-size: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.variant-options-hidden td, .variant-options-hidden .variant-options-label { color: var(--text-muted); }
.variant-options-acts { display: flex; gap: 6px; justify-content: flex-end; }
.variant-options-handle { inline-size: 32px; block-size: 32px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text-muted); cursor: grab; padding: 0; }
.variant-options-handle:hover { background: var(--tint); color: var(--text); border-color: var(--line); }
.variant-options-foot { padding: 16px 20px; border-top: 1px solid var(--line); }
.variant-options-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px auto; gap: 12px; align-items: end; }
.variant-options-err { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; color: var(--danger); font-weight: 600; }
.variant-options-err:empty { display: none; }
.variant-options-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 56px 20px; }
.variant-options-empty h3 { margin: 0; font-size: 1.05rem; }
.variant-options-empty .code-empty-mark { inline-size: 44px; block-size: 50px; }
.variant-options-empty-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-block-start: 6px; }
.modal-card.variant-options-dialog { max-width: 720px; background: var(--surface); }
.variant-options-body { display: flex; flex-direction: column; gap: 18px; }
.variant-options-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
.variant-options-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.variant-options-sizes-wrap { display: flex; flex-direction: column; gap: 8px; }
.variant-options-sizes { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.variant-options-size { display: grid; grid-template-columns: auto 34px minmax(0, 1fr) auto auto; align-items: center; gap: 10px 14px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.variant-options-sizes > li:last-child .variant-options-size { border-bottom: 0; }
.variant-options-size.is-focus, .variant-options-size:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; background: var(--tint); }
.variant-options-pos { font-family: var(--code-num-font); color: var(--text-muted); font-size: .84rem; text-align: center; }
.variant-options-label { background: none; border: 0; padding: 0; cursor: text; font-weight: 700; font-family: var(--code-num-font); color: var(--text); text-align: start; }
.variant-options-rename { max-inline-size: 180px; block-size: 36px; }
.variant-options-rename.is-bad { border-color: var(--danger); }
.variant-options-used { font-size: .84rem; color: var(--muted); white-space: nowrap; }
.variant-options-confirm { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; margin-block-start: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.variant-options-confirm p { flex: 1 1 260px; margin: 0; font-size: .9rem; }
.variant-options-live { margin: 0; font-size: .88rem; color: var(--brand); font-weight: 600; min-block-size: 1.4em; }
.variant-options-addsize { display: flex; gap: 10px; align-items: flex-start; }
.variant-options-addsize .code-field { flex: 1; }
.variant-options-addsize .btn { margin-block-start: 26px; }
.variant-options-chipline { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-options-chip { min-inline-size: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: center; font-weight: 700; font-family: var(--code-num-font); }
.variant-options-how { border: 0; padding: 0; margin: 0; }
.variant-options-radio { display: flex; gap: 18px; flex-wrap: wrap; margin-block-start: 8px; }
.variant-options-adds { margin: 0; font-weight: 700; }
@media (max-width: 760px) {
  .variant-options-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .variant-options-add .btn { grid-column: 1 / -1; }
  .variant-options-preview { display: none; }
  .variant-options-size { grid-template-columns: auto 28px minmax(0, 1fr) auto; }
  .variant-options-size .variant-options-used { grid-column: 3; grid-row: 2; }
}
@media (max-width: 600px) {
  .variant-options-grid3, .variant-options-grid2 { grid-template-columns: minmax(0, 1fr); }
  .modal-overlay:has(> .variant-options-dialog) { padding: 0; align-items: stretch; }
  .modal-card.variant-options-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .modal-card.variant-options-dialog .modal-footer .btn { flex: 1 1 auto; }
}

/* ── Spec 015 US6 (TASK-2026-080): the variant grid speaks the shop's lists, drawn as MK-5. ───────────────────────────────────────────────── */
.vg-prompt { margin-block-start: 10px; }
#vg-lists-note:empty, #vg-prompt:empty, #vg-suggest:empty { display: none; }
#vg-lists-note { margin-block-start: 10px; }
.vg-suggest-wrap { position: relative; }
.vg-suggest { position: absolute; inset-block-start: calc(100% + 4px); inset-inline: 0; z-index: 30; list-style: none; margin: 0; padding: 4px 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-float); }
.vg-suggest li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; font-size: .92rem; }
.vg-suggest li:hover, .vg-suggest li.is-active { background: var(--tint); }
.vg-suggest-other { margin-inline-start: auto; font-size: .84rem; color: var(--muted); }

/* ── Spec 015 US7 (TASK-2026-080): Product Lookup finds an item by any code; the scanned variant is marked in its matrix. ──────────────────── */
.lookup-scan-outcome:empty { display: none; }
.lookup-scan-outcome { margin-block-end: 14px; }
.lookup-scanned-cell { background: var(--tint); box-shadow: inset 0 0 0 2px var(--brand); }

/* ── spec 018 U3 begin: help-panel ── */
/* Spec 018 (T033, T034; approved mockup M1): the help panel, the header "?" and the in-form "?". The panel sits on the edge opposite the
   sidebar (inset-inline-end), under the header so it never covers the header's controls, and the page behind it does not move. */
.help-btn { font-weight: 700; }
.help-btn[hidden] { display: none; }
.help-btn[aria-expanded="true"] { background: var(--fill); color: #fff; border-color: var(--fill); }
html[data-theme="retailpower"] .help-panel { --text-muted: #5B6F84; }
.help-panel { position: fixed; inset-block: var(--header-height) 0; inset-inline-end: 0; z-index: 100005; inline-size: 400px; max-inline-size: calc(100 * var(--vw));
  box-sizing: border-box; display: flex; flex-direction: column; background: var(--surface); border-inline-start: 1px solid var(--line);
  box-shadow: var(--shadow-float); font-size: 14px; }
.help-panel[hidden] { display: none; }
.help-panel:focus { outline: none; }
.help-panel-h { display: flex; align-items: flex-start; gap: 12px; padding-block: 20px 16px; padding-inline: 24px 16px; border-bottom: 1px solid var(--line); flex: none; }
.help-panel-h small { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 2px; }
.help-panel-h h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.45; }
.help-close { inline-size: 32px; block-size: 32px; padding: 0; border: 0; border-radius: 2px; background: none; color: var(--muted); cursor: pointer;
  display: inline-grid; place-items: center; font-size: 15px; margin-inline-start: auto; flex: none; }
.help-close:hover { background: var(--tint); color: var(--text); }
.help-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.help-panel-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 24px; }
.help-purpose { margin: 0 0 18px; font-size: 14px; line-height: 1.85; color: var(--muted); }
.help-answers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.help-answer { border-bottom: 1px solid var(--line); }
.help-answer > button { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 12px; align-items: start; inline-size: 100%; padding: 14px 2px; border: 0; background: none;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text); text-align: start; cursor: pointer; line-height: 1.6; }
.help-answer > button:hover { color: var(--brand); }
.help-answer > button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* a drawn caret: two logical borders, rotated, so the rotation is flipped by one rule for the reading direction and it points the same way in both */
.help-caret { inline-size: 7px; block-size: 7px; margin-top: 8px; border-inline-end: 2px solid var(--text-muted); border-block-end: 2px solid var(--text-muted); transform: rotate(45deg); justify-self: center; }
html[dir="rtl"] .help-caret { transform: rotate(-45deg); }
.help-answer > button[aria-expanded="true"] .help-caret { transform: rotate(-135deg); margin-top: 12px; }
html[dir="rtl"] .help-answer > button[aria-expanded="true"] .help-caret { transform: rotate(135deg); }
.help-answer-a { padding: 0 2px 16px; font-size: 14px; line-height: 1.85; color: var(--muted); }
.help-answer-a[hidden] { display: none; }
.help-answer-a p { margin: 0 0 10px; color: inherit; line-height: 1.85; }
.help-answer-a p:last-child { margin-bottom: 0; }
.help-answer-a strong { color: var(--text); }
.help-answer-a a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.help-answer.is-target { box-shadow: inset 3px 0 0 var(--brand); }
html[dir="rtl"] .help-answer.is-target { box-shadow: inset -3px 0 0 var(--brand); }
.help-answer.is-target > button, .help-answer.is-target .help-answer-a { padding-inline-start: 14px; }
.help-empty { display: flex; gap: 14px; align-items: flex-start; padding: 8px 0 4px; color: var(--muted); line-height: 1.8; }
.help-empty b { display: block; color: var(--text); font-size: 15px; }
.help-bag { inline-size: 30px; block-size: 34px; flex: none; color: var(--text-muted); }
.help-foot { flex: none; border-top: 1px solid var(--line); padding: 14px 24px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.help-foot-acts { display: flex; flex-direction: column; gap: 8px; }
.help-foot-acts .btn { inline-size: 100%; justify-content: center; min-width: 0; }
.help-foot-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.help-foot-row a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.help-foot-row a:hover { color: var(--text); }
.help-id { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.help-id bdi { font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 700; font-size: 14px; color: var(--text); letter-spacing: .02em; }
.help-copy { margin-inline-start: auto; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand); padding: 4px 6px; cursor: pointer; }
.help-copy:hover { text-decoration: underline; text-underline-offset: 3px; }
.help-copy:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.help-unset { margin: 0; font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.help-unset i { color: var(--warning); }
/* an in-form "?" beside a hard choice */
.help-inline { inline-size: 24px; block-size: 24px; padding: 0; border-radius: var(--radius); border: var(--border-width) solid var(--line-strong); background: var(--surface); color: var(--muted);
  font: inherit; font-size: var(--fs-small); font-weight: 700; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; flex: none; margin-inline-start: 6px; vertical-align: middle; }
.help-inline:hover { background: var(--surface); border-color: var(--brand); color: var(--brand); }
.help-inline:focus-visible { outline: 0; border-color: var(--focus); }
/* a dialog that is open when the panel opens slides aside so it stays fully visible; a sheet opened FROM the panel sits above it */
@media (min-width: 769px) { html.has-help .modal-overlay { padding-inline-end: 420px !important; } }
html .modal-overlay.is-help-top, html.has-help .modal-overlay.is-help-top { z-index: 100008 !important; padding-inline-end: 20px !important; }
/* the (i) card opens above the panel and any sheet opened from it */
.info-tip-card { z-index: 100012; }
@media (max-width: 768px) {
  .help-panel { inline-size: calc(100 * var(--vw)); border-inline-start: 0; box-shadow: none; }
  .help-panel-h { padding-inline: 16px 10px; }
  .help-panel-body { padding: 16px 16px 24px; }
  .help-foot { padding: 12px 16px 16px; }
}
.help-foot-acts .btn-neutral { background: var(--surface); }
.help-foot-acts .btn-neutral:hover:not(:disabled) { background: var(--tint); }
/* ── spec 018 U3 end: help-panel ── */

/* ── spec 018 U3 begin: support-sheet ── */
/* Spec 018 (T039, T040; approved mockup M2): the WhatsApp preview sheet and "Need help?" on the sign-in screens. */
html[data-theme="retailpower"] .support-sheet { --text-muted: #5B6F84; }
.modal-card.support-sheet { background: var(--surface); border-radius: 2px; max-width: 460px; box-shadow: var(--shadow-float); }
.support-sheet .modal-header { padding: 18px 24px; gap: 12px; }
.support-sheet .modal-header h3 { font-size: 17px; font-weight: 700; }
.support-sheet-end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.support-sheet-x { inline-size: 32px; block-size: 32px; padding: 0; border: 0; border-radius: 2px; background: none; color: var(--muted); cursor: pointer;
  display: inline-grid; place-items: center; font-size: 15px; }
.support-sheet-x:hover { background: var(--tint); color: var(--text); }
.support-sheet-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.support-sheet .modal-body { padding: 20px 24px; font-size: 14px; display: flex; flex-direction: column; gap: 18px; }
.support-sheet .modal-footer { padding: 16px 24px; gap: 12px; flex-wrap: wrap; }
.support-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.support-msg-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.support-msg { margin: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); font: inherit; font-size: 14px;
  line-height: 1.9; white-space: pre-wrap; color: var(--text); overflow-wrap: anywhere; }
.support-hours { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; font-size: 13.5px; line-height: 1.7; }
.support-hours > i { margin-top: 5px; color: var(--text-muted); }
.support-hours span { grid-column: 2; color: var(--muted); }
/* the sign-in screens: "Need help?" under the form */
.signin-help-row { margin: 18px 0 0; text-align: center; }
.signin-help-row .company-signin-link { font-size: .86rem; }
.support-sheet .btn-neutral { background: var(--surface); }
.support-sheet .btn-neutral:hover:not(:disabled) { background: var(--tint); }
.company-signin-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.signin-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.signin-legal a { color: var(--muted); font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; }
.signin-legal a:hover { color: var(--text); }
/* ── spec 018 U3 end: support-sheet ── */

/* ── spec 018 U3 begin: feedback ── */
/* Spec 018 (T053, T046; approved mockup M10): the Report a problem or send feedback page. Own container so the two columns fold on the page's width, not the screen's. */
html[data-theme="retailpower"] .feedback-page { --text-muted: #5B6F84; }
.main-content.feedback-root { padding: 0; }
.feedback-page { container-type: inline-size; container-name: feedback; max-inline-size: 1180px; margin: 0 auto; padding: 12px 16px 64px; box-sizing: border-box; display: flex; flex-direction: column; gap: 22px; font-size: 14px; }
.feedback-page > * { flex: none; min-width: 0; }
.feedback-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.feedback-grid > * { min-width: 0; }
@container feedback (max-width: 860px) { .feedback-grid { grid-template-columns: minmax(0, 1fr); } }
.feedback-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; min-width: 0; }
.feedback-card-h { display: flex; align-items: center; gap: 12px; min-block-size: 24px; padding-block: 16px 14px; padding-inline: 20px 52px; border-bottom: 1px solid var(--line); }
.feedback-card-h h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.feedback-count { font-size: 13px; color: var(--text-muted); }
.feedback-card-b { padding: 20px; }
.feedback-corner { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; }
.feedback-form { display: flex; flex-direction: column; gap: 22px; }
.feedback-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feedback-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: normal; }
.feedback-opt { font-weight: 400; color: var(--text-muted); }
.feedback-counter { margin-inline-start: auto; font-size: 12.5px; color: var(--text-muted); font-weight: 400; }
.feedback-input, .feedback-textarea { inline-size: 100%; box-sizing: border-box; font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--text); }
.feedback-input { block-size: 44px; padding: 0 12px; }
.feedback-input[readonly] { background: var(--bg); color: var(--muted); }
.feedback-textarea { min-block-size: 132px; padding: 10px 12px; line-height: 1.7; resize: vertical; }
.feedback-input:focus-visible, .feedback-textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--brand); }
.feedback-textarea.is-invalid, .feedback-input[aria-invalid="true"] { border-color: var(--danger); }
.feedback-err { margin: 0; font-size: 13px; color: var(--danger); line-height: 1.6; }
.feedback-hint { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.feedback-choice { display: inline-flex; flex-wrap: wrap; align-self: flex-start; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--surface); }
.feedback-choice button { border: 0; background: none; font: inherit; font-size: 14px; color: var(--muted); padding: 0 18px; block-size: 42px; cursor: pointer; }
.feedback-choice button + button { border-inline-start: 1px solid var(--line); }
.feedback-choice button[aria-pressed="true"] { background: var(--fill); color: #fff; font-weight: 700; }
.feedback-choice button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.feedback-shot { gap: 10px; }
.feedback-attach { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.feedback-attach .btn { min-width: 0; }
.feedback-preview { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); }
.feedback-preview img { inline-size: 112px; block-size: 70px; object-fit: cover; border: 1px solid var(--line); border-radius: 2px; background: #fff; display: block; }
.feedback-preview b { display: block; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.feedback-preview span { font-size: 12.5px; color: var(--text-muted); }
.feedback-preview .btn { min-width: 0; }
@container feedback (max-width: 460px) { .feedback-preview { grid-template-columns: 84px minmax(0, 1fr); } .feedback-preview img { inline-size: 84px; block-size: 54px; } .feedback-preview .btn { grid-column: 1 / -1; justify-self: start; } }
.feedback-warn { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--warning); line-height: 1.6; }
.feedback-warn i { margin-top: 4px; }
.feedback-send { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.feedback-send .btn-primary { min-width: 160px; justify-content: center; }
.feedback-phone { display: flex; gap: 10px; align-items: center; }
.feedback-phone .feedback-input { flex: 1; min-width: 0; }
.feedback-phone .btn { min-width: 0; flex: none; }
.feedback-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.feedback-legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.feedback-legal a:hover { color: var(--text); }
.feedback-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; border: 1px solid var(--line); border-inline-start: 3px solid var(--brand); border-radius: 2px; background: var(--bg); }
.feedback-notice:focus { outline: none; }
.feedback-notice > i { margin-top: 5px; color: var(--brand); }
.feedback-notice b { font-size: 14px; color: var(--text); }
.feedback-notice p { grid-column: 2; margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--muted); }
.feedback-notice.is-bad { border-inline-start-color: var(--danger); background: var(--danger-tint); }
.feedback-notice.is-bad > i { color: var(--danger); }
.feedback-notice.is-warn { border-inline-start-color: var(--warning); background: var(--warning-tint); }
.feedback-notice.is-warn > i { color: var(--warning); }
.feedback-notice.is-ok { border-inline-start-color: var(--success); background: var(--success-tint); }
.feedback-notice.is-ok > i { color: var(--success); }
.feedback-ref { font-family: 'Outfit', 'Cairo', sans-serif; font-variant-numeric: tabular-nums; }
.feedback-dl { display: grid; grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); gap: 12px 18px; margin: 0; font-size: 13.5px; }
.feedback-dl dt { color: var(--muted); }
.feedback-dl dd { margin: 0; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.feedback-tablewrap { overflow-x: auto; min-width: 0; position: relative; }
.feedback-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.feedback-table th { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 10px 16px; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; }
.feedback-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle; white-space: nowrap; }
.feedback-table tbody tr:last-child td { border-bottom: 0; }
.feedback-table .is-wrap { white-space: normal; min-inline-size: 240px; max-inline-size: 420px; line-height: 1.6; }
.feedback-ref-cell { font-size: 13.5px; }
.feedback-row-new td { background: var(--tint); }
.feedback-state { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--muted); }
.feedback-state::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; flex: none; }
.feedback-state.is-ok { color: var(--success); }
.feedback-state.is-wait { color: var(--warning); }
.feedback-state.is-wait::before { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.feedback-state.is-info { color: var(--brand); }
.feedback-empty { display: flex; align-items: center; gap: 16px; padding: 32px 20px; font-size: 14px; color: var(--muted); }
.feedback-empty b { display: block; color: var(--text); font-size: 15px; margin-bottom: 2px; }
.feedback-bag { inline-size: 30px; block-size: 34px; flex: none; color: var(--text-muted); }
.feedback-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.feedback-pager-btns { display: inline-flex; align-items: center; gap: 10px; }
.feedback-pager-btns .btn { min-width: 92px; justify-content: center; }
/* the quiet button of this page: the card colour, so it reads as a button on the card and not as the page's own filled blue */
.feedback-page .btn-neutral { background: var(--surface); }
.feedback-page .btn-neutral:hover:not(:disabled) { background: var(--tint); }
/* ── spec 018 U3 end: feedback ── */

/* ── welcome screen (spec 013 T092, mockup 5) ── begin */
.ws-page, .ws-menu {
  --ws-ink: #034959; --ws-brand: #327C8C; --ws-mid: #50B4BF; --ws-light: #84D0D9; --ws-frost: #D0EFF2;
  --ws-fill: #2C6B78; --ws-line: #2C6B78; --ws-text: #034959; --ws-tint: #EEF7F8; --ws-tint-2: #E2F2F4; --ws-rule: #C7E3E7;
  --ws-surface: #D0EFF2; --ws-surface-2: #EAF7F9; --ws-strong: #034959; --ws-soft: #2C5F6B; --ws-label: #4A5E72;
  --ws-card: var(--surface); --ws-well: #F9F8F6; --ws-paper: #F1F8F9; --ws-shadow: 0 1px 2px rgba(3, 73, 89, .06), 0 18px 40px -22px rgba(3, 73, 89, .28);
  --ws-r1: 2px; --ws-r2: 2px; --ws-r3: 2px;
}
html[data-theme="retailpower-dark"] .ws-page, html[data-theme="retailpower-dark"] .ws-menu, html[data-theme="github-dark"] .ws-page, html[data-theme="github-dark"] .ws-menu {
  --ws-line: #50B4BF; --ws-text: #84D0D9; --ws-tint: rgba(80, 180, 191, 0.07); --ws-tint-2: rgba(80, 180, 191, 0.13); --ws-rule: rgba(80, 180, 191, 0.28);
  --ws-surface: rgba(80, 180, 191, 0.13); --ws-surface-2: rgba(80, 180, 191, 0.07); --ws-strong: #D0EFF2; --ws-soft: #A9C7CD; --ws-label: #A9C7CD;
  --ws-well: var(--surface); --ws-paper: #0B2027; --ws-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px -22px rgba(0, 0, 0, .6);
}
.ws-num {font-variant-numeric: tabular-nums;}
.ws-num {font-family: 'Outfit', 'Cairo', sans-serif;}
.ws-arch {flex: none; width: 18px; height: 11px; color: var(--ws-line);}
.ws-pill {display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; font-size: .74rem; font-weight: 600; border-radius: 2px;
  color: var(--ws-text); background: var(--ws-tint-2); line-height: 1.7;}
.ws-pill.is-muted {color: var(--muted); background: var(--sunken);}
.ws-bag {width: 56px; height: 64px; display: block; flex: none;}
.ws-pill {font-size: 12px; font-weight: 700; padding: 2px 8px; background: var(--ws-surface); color: var(--ws-strong);}
.ws-tag {position: relative; display: inline-flex; flex-direction: column; gap: 2px; min-width: 176px; padding: 34px 22px 16px; color: #fff; background: var(--ws-fill);
  clip-path: polygon(0 20px, 20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); text-align: start;}
.ws-tag small {font-size: .74rem; color: var(--ws-frost); opacity: .9; font-weight: 600;}
.ws-tag b {font-family: 'Outfit', sans-serif; font-size: 1.6rem; line-height: 1.2; font-weight: 600; letter-spacing: .04em;}
.ws-tag-hole {position: absolute; inset-block-start: 12px; inset-inline-start: 50%; width: 12px; height: 12px; margin-inline-start: -6px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18);}
.ws-tag.is-lg {min-width: 240px; padding: 40px 30px 20px;}
.ws-tag.is-lg b {font-size: 2.2rem;}
.ws-page .btn-secondary {background: var(--ws-card); color: var(--ws-text); border: 1px solid var(--ws-line);}
.ws-page .btn-secondary:hover {background: var(--ws-tint-2);}
.ws-tag.is-long b {font-size: 1.25rem;}
.ws-tag.is-xl b {font-size: .95rem;}
.ws-tag.is-lg.is-long b {font-size: 1.65rem;}
.ws-tag.is-lg.is-xl b {font-size: 1.15rem;}
.ws-tag b {overflow-wrap: anywhere;}
.ws-page {--text-muted: var(--ws-label);}
.ws-hero {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: center; padding: 36px 40px; background: var(--ws-surface); border: 1px solid var(--ws-rule); border-radius: 2px;}
.ws-hero-t {display: flex; flex-direction: column; gap: 28px; min-width: 0;}
.ws-h1 {margin: 0; display: flex; align-items: center; gap: 12px; font-size: 30px; line-height: 1.4; font-weight: 800; color: var(--ws-strong);}
.ws-h1 .ws-arch {width: 28px; height: 18px; color: var(--ws-line); flex: none;}
.ws-trial {display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 18px; background: var(--ws-card); border: 1px solid var(--ws-rule); border-radius: 2px; align-self: flex-start; max-width: 100%; box-sizing: border-box;}
.ws-trial-l {font-weight: 700; color: var(--ws-soft); font-size: .92rem;}
.ws-trial b {font-size: 1.05rem; color: var(--ws-strong);}
.ws-slots {display: inline-flex; gap: 3px; direction: ltr;}
html[dir="rtl"] .ws-slots {direction: rtl;}
.ws-slots i {width: 11px; height: 22px; border-radius: 2px; border: 1.5px solid var(--ws-line); background: transparent;}
.ws-slots i.on {background: var(--ws-fill); border-color: var(--ws-fill);}
.ws-trial.is-low {border-color: var(--warning); background: var(--warning-tint);}
.ws-trial.is-low .ws-slots i {border-color: var(--warning);}
.ws-trial.is-low .ws-slots i.on {background: var(--warning);}
.ws-trial.is-low b {color: var(--warning);}
.ws-trial.is-free {padding: 10px 14px;}
.ws-tagcard {display: flex; flex-direction: column; align-items: center; gap: 16px;}
.ws-tagcard .ws-tag {transform: rotate(-2deg); transform-origin: 50% 0;}
html[dir="rtl"] .ws-tagcard .ws-tag {transform: rotate(2deg);}
.ws-tagcard .ws-tag-hole {background: var(--ws-surface);}
.ws-tagact {display: flex; align-items: center; gap: 8px;}
.ws-tagact .btn {min-height: 44px; padding-inline: 24px;}
.ws-sell {display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; padding: 24px 32px; background: var(--ws-card); border: 1px solid var(--line); border-radius: 2px;}
.ws-sell .ws-bag {width: 44px; height: 50px; opacity: .5;}
.ws-sell.is-ready {border-color: var(--ws-line); box-shadow: inset 0 0 0 1px var(--ws-line);}
.ws-sell.is-ready .ws-bag {opacity: 1;}
.ws-sell-t {display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;}
.ws-sell-t .btn {min-height: 54px; padding-inline: 34px; font-size: 1.05rem;}
.ws-sell-end {margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap;}
.ws-menu {position: absolute; z-index: 30; inset-inline: 12px; bottom: 84px; background: var(--ws-card); border: 1px solid var(--ws-rule); border-top: 3px solid var(--ws-fill); border-radius: 2px; box-shadow: var(--shadow-float); display: flex; flex-direction: column; color: var(--text);}
.ws-menu-tag {padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px;}
.ws-menu-tagrow {display: flex; align-items: center;}
.ws-menu-l {font-size: .78rem; font-weight: 700; color: var(--muted);}
.ws-menu-store {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.ws-menu-store b {font-family: 'Outfit', sans-serif; font-size: 1.1rem; letter-spacing: .05em;}
.ws-menu-trial {padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; border-bottom: 1px solid var(--line);}
.ws-menu-trial b {font-size: .95rem;}
.ws-menu-i {display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: transparent; border: 0; font: inherit; font-weight: 600; font-size: .92rem; color: var(--text); cursor: pointer; text-align: start;}
.ws-menu-i:hover {background: var(--tint);}
.ws-menu-i .ws-ic {color: var(--ws-line);}
.ws-menu-i + .ws-menu-i {border-top: 1px solid var(--line);}
@media (max-width: 1000px) {
  .ws-hero {grid-template-columns: minmax(0, 1fr);}
  .ws-tagcard {align-items: flex-start;}
}
@media (max-width: 768px) {
  .ws-menu {position: fixed; inset-inline: 12px; bottom: 12px; z-index: 60;}
}
@media (max-width: 640px) {
  .ws-hero {padding: 24px 20px; gap: 24px;}
  .ws-h1 {font-size: 24px;}
  .ws-sell {padding: 20px;}
  .ws-sell-end {margin-inline-start: 0;}
  .ws-sell-t .btn {width: 100%;}
}
.ws-menu .btn-secondary {background: var(--ws-card); color: var(--ws-text); border: 1px solid var(--ws-line);}
.ws-menu .btn-secondary:hover {background: var(--ws-tint-2);}
.ws-setup {display: flex; flex-direction: column; gap: 22px;}
.ws-setup-h {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;}
.ws-setup-h h2 {margin: 0; font-size: 1.35rem; font-weight: 800; display: flex; align-items: center; gap: 6px;}
.ws-prog {display: flex; align-items: center; gap: 16px;}
.ws-prog b {font-size: 1rem; white-space: nowrap; color: var(--ws-strong);}
.ws-segs {display: inline-flex; gap: 4px;}
.ws-segs i {width: 20px; height: 8px; border-radius: 2px; background: var(--ws-rule);}
.ws-segs i.on {background: var(--ws-fill);}
.ws-segs i.skip {background: repeating-linear-gradient(135deg, var(--ws-rule) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--ws-rule);}
.ws-grps {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;}
.ws-grp {background: var(--ws-card); border: 1px solid var(--line); border-radius: var(--ws-r2); overflow: hidden;}
.ws-grp > header {display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line);}
.ws-grp h3 {margin: 0; flex: 1 1 auto; font-size: 1.05rem; font-weight: 800;}
.ws-cnt {font-size: .86rem; font-weight: 700; color: var(--muted);}
.ws-grp ul {list-style: none; margin: 0; padding: 0;}
.ws-row {display: flex; align-items: center; gap: 12px; padding: 13px 22px; min-height: 60px; box-sizing: border-box;}
.ws-row + .ws-row {border-top: 1px solid var(--line);}
.ws-st {flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ws-rule); color: #fff;}
.ws-st .ws-ic {width: 14px; height: 14px;}
.ws-st.is-done {background: var(--ws-fill); border-color: var(--ws-fill);}
.ws-st.is-skip {border-style: dashed; color: var(--text-muted);}
.ws-lab {font-weight: 700; font-size: .98rem;}
.ws-row.is-done .ws-lab, .ws-row.is-skip .ws-lab {color: var(--muted); font-weight: 600;}
.ws-end {margin-inline-start: auto; display: flex; align-items: center; gap: 10px;}
.ws-end .btn-sm {min-height: 36px; padding-inline: 18px;}
.ws-link {appearance: none; background: none; border: 0; padding: 6px 4px; font: inherit; font-size: .86rem; font-weight: 700; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center;}
.ws-link:hover {color: var(--ws-text);}
.ws-link .ws-ic {width: 16px; height: 16px;}
.ws-setup.is-all {flex-direction: row; align-items: center; gap: 14px; padding: 22px 26px; background: var(--ws-tint); border: 1px solid var(--ws-line); border-radius: var(--ws-r2);}
.ws-all-i {display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ws-fill); color: #fff;}
.sub-note {display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 20px; padding: 10px 14px; background: var(--sub-card, var(--surface)); border: 1px solid var(--sub-rule, var(--line)); border-inline-start: 3px solid var(--warning); border-radius: var(--radius); font-size: .9rem; font-weight: 600; line-height: 1.6;}
.sub-note i {flex: none; margin-top: 4px; color: var(--warning);}
.sub-note.is-info {border-inline-start-color: var(--info, var(--sub-line));}
.sub-note.is-info i {color: var(--info, var(--sub-line));}
.ws-note {display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 16px; background: var(--ws-card); border: 1px solid var(--ws-rule); border-inline-start: 3px solid var(--warning); border-radius: 2px; font-size: .9rem; font-weight: 600; color: var(--ws-strong);}
.ws-note .ws-ic {width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--warning);}
.ws-help {display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; font-size: .86rem; color: var(--muted); font-weight: 600;}
.ws-help .ws-ic {width: 18px; height: 18px; color: var(--ws-line);}
.ws-help bdi {font-family: 'Outfit', sans-serif; letter-spacing: .02em;}
@media (max-width: 1000px) {
  .ws-grps {grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 640px) {
  .ws-row {padding-inline: 16px; gap: 8px;}
  .ws-grp > header {padding-inline: 16px;}
  .ws-segs i {width: 14px;}
  .ws-lab {flex: 1 1 auto; min-width: 0; font-size: .92rem;}
  .ws-end {margin-inline-start: 0; gap: 6px;}
  .ws-end .ws-pill {display: none;}
  .ws-end .btn-sm {padding-inline: 14px;}
}
.ws-ico {flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--ws-r2); background: var(--ws-tint-2); color: var(--ws-text);}
.ws-ico .ws-ic {width: 20px; height: 20px;}
html[data-theme="retailpower-dark"] .ws-ico {background: rgba(80, 180, 191, .14);}
.ws-page .btn {border-radius: var(--ws-r1); background-image: none; box-shadow: none; font-weight: 700;}
.ws-page .btn-primary {background: var(--ws-fill); border-color: var(--ws-fill); color: #fff;}
.ws-page .btn-primary:hover:not([aria-disabled="true"]) {background: var(--ws-ink); border-color: var(--ws-ink); transform: none;}
.ws-hero, .ws-sell, .ws-trial, .ws-menu {border-radius: var(--ws-r2);}
.ws-hero {padding: 44px 48px;}
.ws-h1 {font-size: 2rem;}
@media (max-width: 1000px) {
  .ws-hero {padding: 32px 28px;}
}
@media (max-width: 640px) {
  .ws-hero {padding: 24px 20px;}
}
.ws-ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.ws-page .btn-lg { min-height: 52px; }
.ws-page .btn-ghost { background: transparent; color: var(--ws-text); }
.ws-page .btn-ghost:hover { background: var(--ws-tint-2); }
.ws-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ws-page .btn[aria-disabled="true"] { opacity: 1; cursor: not-allowed; background: color-mix(in srgb, var(--ws-fill) 28%, var(--ws-card)); border-color: transparent; color: color-mix(in srgb, var(--ws-fill) 55%, var(--ws-card)); }
.ws-page .info-tip { margin-inline-start: 8px; }
/* the account menu sits over the sidebar's foot, placed by welcome.js from the user block's own rectangle */
.ws-menu { position: fixed; inset-inline-end: auto; width: min(320px, calc(calc(100 * var(--vw)) - 24px)); }
.ws-wait { color: var(--muted); }
/* the shop sign-in's status cards (spec 013 US8): the panel gives up its own card so the family's card is the only one */
.company-signin-panel.is-status { max-width: 640px; background: transparent; border: 0; padding: 0; }
/* ── welcome screen (spec 013 T092, mockup 5) ── end */

/* ── subscription tab (spec 014 T044, mockup 2) ── begin */
.sub-page, #sub-up, #sub-ns {
  --sub-ink: #034959; --sub-fill: #2C6B78; --sub-line: #2C6B78; --sub-text: #034959; --sub-tint: #EEF7F8; --sub-tint-2: #E2F2F4; --sub-rule: #C7E3E7;
  --sub-surface: #D0EFF2; --sub-surface-2: #EAF7F9; --sub-strong: #034959; --sub-label: #4A5E72; --sub-card: var(--surface); --sub-well: #F9F8F6; --sub-frost: #D0EFF2; --sub-light: #84D0D9; --sub-mid: #50B4BF;
}
html[data-theme="retailpower-dark"] .sub-page, html[data-theme="retailpower-dark"] #sub-up, html[data-theme="retailpower-dark"] #sub-ns {
  --sub-line: #50B4BF; --sub-text: #84D0D9; --sub-tint: rgba(80, 180, 191, 0.07); --sub-tint-2: rgba(80, 180, 191, 0.13); --sub-rule: rgba(80, 180, 191, 0.28);
  --sub-surface: rgba(80, 180, 191, 0.13); --sub-surface-2: rgba(80, 180, 191, 0.07); --sub-strong: #D0EFF2; --sub-label: #A9C7CD; --sub-well: var(--surface);
}
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}
.sub-page {display: flex; flex-direction: column; gap: 16px; margin-top: 20px;}
.sub-ro {margin: 0; padding: 8px 12px; border-inline-start: 3px solid var(--info); background: var(--sunken); border-radius: 2px; font-size: .84rem;}
.sub-top {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 16px;}
.sub-card {background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0;}
.sub-card-head {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 20px; border-bottom: 1px solid var(--line);}
.sub-card-head h3 {margin: 0; font-size: .98rem; font-weight: 700;}
.sub-card-body {padding: 16px 20px 18px;}
.sub-card-body > p {margin: 0 0 8px; font-size: .88rem; line-height: 1.7; color: var(--muted);}
.sub-plan-name {margin: 0 0 4px !important; font-size: 1.15rem !important; font-weight: 700; color: var(--text) !important;}
.sub-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 14px;}
.sub-cmp-frame {overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);}
.sub-cmp-table {width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; font-size: .84rem;}
.sub-cmp-table thead {position: static;}
.sub-cmp-table th, .sub-cmp-table td {padding: 9px 12px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle;}
.sub-cmp-table .sub-cmp-feat {position: sticky; inset-inline-start: 0; z-index: 1; text-align: start; min-width: 190px; background: var(--surface); border-inline-end: 1px solid var(--line); font-weight: 500;}
.sub-cmp-table thead th {background: var(--surface); vertical-align: top; padding-block: 14px;}
.sub-cmp-table thead .sub-cmp-feat {font-size: .74rem; color: var(--muted); font-weight: 600;}
.sub-cmp-table th.is-current, .sub-cmp-table td.is-current {background: var(--sunken);}
.sub-cmp-name {display: block; font-size: .95rem; font-weight: 700;}
.sub-cmp-price {display: block; margin-top: 6px; font-size: 1.05rem; font-weight: 700;}
.sub-cmp-price small {font-size: .74rem; font-weight: 500; color: var(--muted);}
.sub-cmp-year {display: block; min-height: 2.6em; margin-top: 2px; font-size: .74rem; color: var(--muted); line-height: 1.5;}
.sub-tag {display: inline-block; margin-top: 8px; font-size: .74rem; font-weight: 600; color: var(--muted);}
.sub-yes {color: var(--text);}
.sub-no {color: var(--text-muted);}
.sub-cmp-group td {background: var(--sunken); text-align: start; font-size: .74rem; font-weight: 700; color: var(--muted); padding-block: 6px;}
.sub-cmp-group td.sub-cmp-feat {background: var(--sunken);}
.sub-period {display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;}
.sub-period button {border: 0; background: var(--surface); color: var(--text); font: inherit; font-size: .82rem; padding: 6px 14px; cursor: pointer;}
.sub-period button + button {border-inline-start: 1px solid var(--line);}
.sub-period button[aria-pressed="true"] {background: var(--fill); color: var(--on-fill); font-weight: 700;}
.sub-pills {display: inline-flex; flex-wrap: wrap; gap: 4px;}
.sub-empty {padding: 12px 0 4px; font-size: .9rem; line-height: 1.8; color: var(--muted);}
.sub-empty p {margin: 0 0 12px;}
.sub-dl {display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: .88rem; line-height: 1.7;}
.sub-dl dt {color: var(--muted);}
.sub-dl dd {margin: 0; min-width: 0; overflow-wrap: anywhere;}
.sub-dl dd small {display: block; color: var(--text-muted); font-size: .78rem;}
.sub-succ {margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);}
.sub-succ h4 {margin: 0 0 10px; font-size: .9rem; font-weight: 700;}
.sub-up-plans {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0;}
.sub-up-plans legend {font-size: .84rem; font-weight: 700; margin-bottom: 8px; padding: 0;}
.sub-up-plan {display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;}
.sub-up-plan.is-picked {border-color: var(--focus); background: var(--tint);}
.sub-up-head {display: flex; align-items: center; gap: 8px; font-weight: 700;}
.sub-up-price {font-size: .9rem;}
.sub-up-plan dl {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; margin: 0; font-size: .8rem;}
.sub-up-plan dt {color: var(--muted);}
.sub-up-plan dd {margin: 0; text-align: end;}
.sub-below {color: var(--danger); font-weight: 600;}
.sub-up-quote {margin: 12px 0 0; font-size: .84rem; color: var(--muted);}
.sub-up-quote button {background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;}
.sub-up-body {container-type: inline-size;}
.sub-dlg-reason {flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--muted); text-align: start;}
@media (max-width: 900px) {
  .sub-top {grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 700px) {
  .sub-card-body {padding: 14px;}
  .sub-card-head {padding: 12px 14px;}
  .sub-dl {grid-template-columns: minmax(0, 1fr); gap: 2px;}
  .sub-dl dd {margin-bottom: 8px;}
  .sub-cmp-table .sub-cmp-feat {min-width: 140px;}
}
.sub-page {gap: 24px; margin-top: 24px; font-size: 15px; --text-muted: var(--sub-label);}
.sub-card {background: var(--sub-card); border-radius: 2px;}
.sub-card-head {padding: 16px 24px;}
.sub-card-head h3 {font-size: 1.05rem; display: flex; align-items: center; gap: 10px;}
.sub-card-body {padding: 20px 24px 22px;}
.sub-band .sub-h1 .ot-tag {font-size: 13px;}
.sub-band-end .btn-primary {background: var(--sub-fill); border-color: var(--sub-fill); color: #fff;}
.sub-band-end .btn {min-height: 44px; padding-inline: 22px; font-size: 15px; font-weight: 700;}
.sub-ro {display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--sub-soft);}
.sub-meters {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none;}
.sub-meter {padding: 18px 20px 16px; border: 1px solid var(--line); border-radius: 2px; background: var(--sub-card); display: flex; flex-direction: column; gap: 8px; min-width: 0;}
.sub-meter-h {display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted);}
.sub-meter-n {font-family: 'Outfit', 'Cairo', sans-serif; font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--text);}
.sub-meter-n small {font-size: 16px; font-weight: 500; color: var(--muted);}
.sub-meter-n .is-word {font-family: 'Cairo', sans-serif; font-size: 20px; font-weight: 700;}
.sub-bar {height: 10px; border-radius: 2px; background: var(--sunken); overflow: hidden;}
.sub-bar i {display: block; height: 100%; background: var(--sub-fill);}
.sub-meter.is-near .sub-bar i {background: var(--warning);}
.sub-meter.is-full .sub-bar i {background: var(--danger);}
.sub-meter .sub-st {font-size: 13px;}
.sub-meter.is-open .sub-bar {background: repeating-linear-gradient(90deg, var(--sub-rule) 0 6px, transparent 6px 10px);}
.sub-band .sb-tip {color: var(--sub-soft);}
.sub-card .badge {border-radius: 2px;}
.sub-cmp-table .cmp-btn.btn-primary {background: var(--sub-fill); border-color: var(--sub-fill); color: #fff;}
.sub-cmp-table th.is-current, .sub-cmp-table td.is-current {background: var(--sub-tint);}
@media (max-width: 700px) {
  .sub-meters {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .sub-meter-n {font-size: 24px;}
  .sub-band {padding: 20px 16px 0;}
  .sub-summary {margin-inline: -16px;}
  .sub-sum {padding: 12px 16px;}
}
.sub-band-end .btn-secondary {background: var(--sub-card); color: var(--sub-text); border: 1px solid var(--sub-rule);}
.sub-band-end .btn-danger {background: var(--sub-card); color: var(--danger); border: 1px solid var(--danger);}
.sub-num {font-variant-numeric: tabular-nums;}
.sub-num {font-family: 'Outfit', 'Cairo', sans-serif;}
.sub-crumb {display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .8rem; color: var(--text-muted); margin-bottom: 6px;}
.sub-crumb a {color: var(--muted); text-decoration: none;}
.sub-crumb i {font-size: .6rem;}
.sub-h1 {margin: 0; font-size: 1.75rem; line-height: 1.3; font-weight: 700; color: var(--text);}
.sub-stats {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); margin: 0;}
.sub-stat {padding: 14px 24px; display: flex; flex-direction: column; gap: 2px;}
.sub-stat + .sub-stat {border-inline-start: 1px solid var(--line);}
.sub-stat dt {font-size: .76rem; color: var(--text-muted); order: 2;}
.sub-stat dd {margin: 0; font-family: 'Outfit', 'Cairo', sans-serif; font-size: 1.55rem; font-weight: 600; line-height: 1.25; color: var(--text); order: 1;}
.sub-stat dd.is-text {font-family: 'Cairo', sans-serif; font-size: 1rem; padding-block: 4px;}
.sub-st {display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; white-space: nowrap;}
.sub-st i {font-size: .6rem;}
.sub-st.is-ok {color: var(--success);}
.sub-st.is-wait {color: var(--warning);}
.sub-st.is-bad {color: var(--danger);}
.sub-st.is-bad i {font-size: .74rem;}
.sub-st.is-off {color: var(--text-muted);}
.sub-st.is-off i {font-size: .72rem;}
.sub-steps {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;}
.sub-step {display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 6px 16px; position: relative; padding-bottom: 24px;}
.sub-step:last-child {padding-bottom: 0;}
.sub-step::before {content: ""; position: absolute; inset-inline-start: 15px; top: 36px; bottom: 4px; border-inline-start: 1px solid var(--line);}
.sub-step:last-child::before {display: none;}
.sub-step-n {width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; font-family: 'Outfit', 'Cairo', sans-serif;
  font-weight: 600; font-size: .9rem; border: 1px solid var(--sub-line); color: var(--sub-text); background: var(--sub-card);}
.sub-step.is-blocked .sub-step-n {border-color: var(--line); color: var(--text-muted);}
.sub-step.is-done .sub-step-n {background: var(--sub-fill); border-color: var(--sub-fill); color: #fff;}
.sub-step h3 {margin: 4px 0 0; font-size: .98rem; font-weight: 700; color: var(--text);}
.sub-step.is-blocked h3 {color: var(--muted);}
.sub-step-b {grid-column: 2; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; min-width: 0;}
.sub-step-b p {margin: 0; font-size: .86rem; line-height: 1.75; color: var(--muted); max-width: 60ch;}
.sub-stepper {display: flex; list-style: none; margin: -4px 0 0; padding: 0; border-bottom: 1px solid var(--line);}
.sub-stepper li {flex: 1; padding: 8px 4px 10px; font-size: .8rem; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; text-align: center;}
.sub-stepper li b {font-family: 'Outfit', 'Cairo', sans-serif; margin-inline-end: 6px;}
.sub-stepper li.is-on {color: var(--sub-text); font-weight: 700; border-bottom-color: var(--sub-line);}
.sub-stepper li.is-done {color: var(--muted);}
@media (max-width: 640px) {
  .sub-h1 {font-size: 1.4rem;}
  .sub-stat {padding: 12px 14px;}
  .sub-stat dd {font-size: 1.3rem;}
}
.sub-band {background: var(--sub-surface); border: 1px solid var(--sub-rule); border-radius: 2px; padding: 28px 32px 0; overflow: hidden;}
.sub-band-top {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px;}
.sub-band-text {min-width: 0; flex: 1 1 360px;}
.sub-band .sub-crumb {font-size: 13px; color: var(--sub-soft); margin-bottom: 8px;}
.sub-band .sub-crumb a {color: var(--sub-soft);}
.sub-band .sub-h1 {display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 700; color: var(--sub-strong); line-height: 1.35;}
.sub-band .sub-h1 .ot-arch {width: 26px; height: 16px; color: var(--sub-line);}
.sub-band-bag {width: 36px; height: 41px; flex: none;}
.sub-band .ot-lede {font-size: 15px; color: var(--sub-soft); margin-top: 6px;}
.sub-band-end {display: flex; gap: 8px; flex-wrap: wrap;}
.sub-band-end .btn {background: var(--sub-card);}
.sub-summary {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 24px -32px 0; border-top: 1px solid var(--sub-rule);}
html[data-theme="retailpower"] .sub-summary {background: rgba(255, 255, 255, 0.5);}
html[data-theme="retailpower-dark"] .sub-summary {background: rgba(0, 0, 0, 0.14);}
.sub-sum {display: flex; flex-direction: column; gap: 4px; padding: 16px 32px 18px; min-width: 0;}
.sub-sum + .sub-sum {border-inline-start: 1px solid var(--sub-rule);}
.sub-sum dt {font-size: 13px; color: var(--sub-soft); font-weight: 600;}
.sub-sum dd {margin: 0; display: flex; align-items: center; gap: 10px; font-family: 'Outfit', 'Cairo', sans-serif; font-size: 26px; font-weight: 600; line-height: 1.3; color: var(--sub-strong);}
.sub-sum dd .sub-st {font-family: 'Cairo', sans-serif; font-size: 16px; font-weight: 700;}
.sub-sum dd bdi:not(.sub-num) {font-family: 'Cairo', sans-serif; font-size: 18px; font-weight: 700;}
.sub-sum dd.is-text, .sub-sum dd:not(:has(.sub-num)) {font-family: 'Cairo', sans-serif; font-size: 18px; font-weight: 700;}
.sub-sum-sub {font-size: 13px; color: var(--sub-soft);}
.sub-sum.is-bad {background: var(--danger-tint);}
.sub-steps .sub-step {grid-template-columns: 40px minmax(0, 1fr); gap: 8px 20px; padding-bottom: 32px;}
.sub-steps .sub-step:last-child {padding-bottom: 0;}
.sub-steps .sub-step::before {inset-inline-start: 19px; top: 46px; bottom: 6px; border-inline-start-width: 2px;}
.sub-steps .sub-step-n {width: 40px; height: 40px; font-size: 16px; border-width: 2px;}
.sub-step.is-current .sub-step-n {background: var(--sub-fill); border-color: var(--sub-fill); color: #fff;}
.sub-steps h3 {font-size: 17px; margin-top: 8px;}
.sub-step-b p {font-size: 15px;}
.sub-step-b.ot-wide {align-items: stretch;}
.sub-status-panel {display: flex; gap: 14px; align-items: flex-start; width: 100%; box-sizing: border-box; padding: 16px 18px; background: var(--sub-surface-2);
  border: 1px solid var(--sub-rule); border-radius: 2px;}
.sub-status-panel > i {font-size: 18px; color: var(--sub-line); margin-top: 3px;}
.sub-status-panel b {display: block; font-size: 15px; color: var(--sub-strong);}
.sub-status-panel span {display: block; font-size: 14px; color: var(--muted); margin-top: 2px;}
.sub-stepper {border-bottom: 0; margin: 0 0 4px;}
.sub-stepper li {position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; margin: 0; font-size: 13px; color: var(--muted);}
.sub-stepper li:not(:first-child)::before {content: ""; position: absolute; top: 17px; inset-inline-end: calc(50% + 22px); width: calc(100% - 44px); height: 2px; background: var(--line);}
.sub-stepper li.is-on::before, .sub-stepper li.is-done::before {background: var(--sub-line);}
.sub-stepper-n {width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line);
  background: var(--sub-card); font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; font-size: 15px; color: var(--muted); position: relative;}
.sub-stepper li.is-on .sub-stepper-n {background: var(--sub-fill); border-color: var(--sub-fill); color: #fff;}
.sub-stepper li.is-done .sub-stepper-n {border-color: var(--sub-line); color: var(--sub-line);}
.sub-stepper li.is-on .sub-stepper-l {color: var(--sub-strong); font-weight: 700;}
@media (max-width: 640px) {
  .sub-band {padding: 20px 16px 0;}
  .sub-band .sub-h1 {font-size: 22px;}
  .sub-summary {margin: 20px -16px 0; grid-template-columns: minmax(0, 1fr);}
  .sub-sum {padding: 12px 16px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;}
  .sub-sum dd {font-size: 20px;}
  .sub-sum-sub {flex-basis: 100%;}
  .sub-sum + .sub-sum {border-inline-start: 0; border-top: 1px solid var(--sub-rule);}
}
.sub-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--sub-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sub-wait { color: var(--muted); }

/* the plan strip (spec 014 T042, mockup 3): part of the page above the content, one at a time */
.plan-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 16px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 3px solid var(--info); border-radius: var(--radius); font-size: .86rem; line-height: 1.6; }
.plan-strip.is-slim { padding-block: 5px; font-size: .82rem; border-inline-start-color: var(--line); }
.plan-strip.is-warning { border-inline-start-color: var(--warning); }
.plan-strip.is-danger { border-inline-start-color: var(--danger); }
.plan-strip > i { color: var(--text-muted); }
.plan-strip.is-warning > i { color: var(--warning); }
.plan-strip.is-danger > i { color: var(--danger); }
.plan-strip-text { flex: 1 1 240px; min-width: 0; }
.plan-strip-text b { font-weight: 700; }
.plan-strip-close { background: none; border: 0; padding: 0 6px; font-size: 1.2rem; line-height: 1; color: var(--text-muted); cursor: pointer; }
.plan-strip-close:hover { color: var(--text); }
#plan-strip:empty { display: none; }
.plan-limit-reason { margin: 6px 0 0; font-size: .85rem; line-height: 1.6; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.plan-limit-reason i { color: var(--text-muted); margin-inline-end: 4px; }
.plan-limit-reason > span { flex: 0 1 auto; min-width: 0; }
.plan-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.plan-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* ── subscription tab (spec 014 T044, mockup 2) ── end */

/* ── subscription tab: invoices, one invoice, billing details, the printed slip (spec 014 T095, T096; mockup 2; lane H) ── */
table.sub-table {width: 100%; border-collapse: collapse; font-size: .84rem;}
table.sub-table thead {position: static;}
table.sub-table th, table.sub-table td {padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle;}
table.sub-table th {font-size: .76rem; color: var(--muted); font-weight: 700; white-space: nowrap; background: var(--sunken);}
table.sub-table td.sub-num {white-space: nowrap;}
table.sub-table .sub-open {background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;}
table.sub-table .sub-open:focus-visible {outline: 2px solid var(--focus); outline-offset: 2px;}
.inv-back {display: inline-flex; align-items: center; gap: 6px;}
.inv-back-arrow {unicode-bidi: isolate;}
.inv-head {display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;}
.inv-head h3 {margin: 0; font-size: 1.02rem; font-weight: 700;}
.inv-facts {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; margin: 0 0 18px;}
.inv-facts dt {font-size: .76rem; color: var(--muted);}
.inv-facts dd {margin: 2px 0 0; font-size: .9rem; font-weight: 600;}
.inv-totals {margin: 12px 0 0; margin-inline-start: auto; max-width: 420px; font-size: .88rem;}
.inv-totals div {display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line);}
.inv-totals div.is-total {font-weight: 700; font-size: .98rem;}
.sub-card-body > p.inv-vat {margin: 10px 0 0; font-size: .8rem;}
.inv-notices {display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px;}
.inv-notices:empty {display: none;}
.inv-notices .bank-slip-notice strong {display: block; color: var(--text);}
.bank-slip-notice.is-success {border-inline-start-color: var(--success); color: var(--text);}
.inv-btns {display: flex; flex-wrap: wrap; gap: 10px; align-items: center;}
.inv-btn-reason {flex-basis: 100%; font-size: .82rem; color: var(--muted);}
.sub-pills {display: inline-flex; flex-wrap: wrap; gap: 4px;}
.sub-card .badge {border-radius: 2px;}
.sub-wait {margin: 0; padding: 24px 0; color: var(--muted);}
.sub-dlg-p {margin: 0 0 12px; font-size: .9rem; line-height: 1.8;}
.sub-dlg-help {margin: 6px 0 0; font-size: .78rem; color: var(--text-muted); line-height: 1.6;}
.modal-footer.has-reason {flex-wrap: wrap;}
.sub-slip {position: fixed; inset: 0; z-index: 12000; background: rgba(0, 0, 0, .55);}
.sub-slip-frame {display: block; width: 100%; height: 100%; border: 0; background: #d9dce1;}
@media (max-width: 900px) {.inv-facts {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 700px) {
  table.sub-table thead {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);}
  table.sub-table, table.sub-table tbody, table.sub-table tr, table.sub-table td {display: block; width: 100%; box-sizing: border-box;}
  table.sub-table tr {padding: 8px 0; border-bottom: 1px solid var(--line);}
  table.sub-table td {display: block; padding: 3px 0; border: 0; white-space: normal;}
  table.sub-table td.sub-num {white-space: normal;}
  table.sub-table td::before {content: attr(data-label); display: block; color: var(--muted); font-size: .76rem;}
  .inv-totals {max-width: none;}
}
/* ── subscription tab: invoices ── end */

/* ── subscription tab: paying by card and the saved card (spec 014 T106; lane H) ── */
.sub-consent {display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-size: .88rem; line-height: 1.7; cursor: pointer;}
.sub-consent input {flex: none; margin-top: 5px; width: 18px; height: 18px;}
.sub-card-line {display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: .92rem;}
.sub-card-id {display: inline-flex; align-items: center; gap: 8px;}
.sub-card-id i {color: var(--text-muted);}
.sub-card-exp {color: var(--muted);}
.sub-card-note {margin: 12px 0 0; font-size: .84rem; line-height: 1.7; color: var(--muted);}
.sub-card-body .inv-notices {margin-bottom: 14px;}
/* ── subscription tab: paying by card ── end */

/* ── settings: Your data, the export (spec 014 T115, T119; mockup 4; lane H) ── */
.exp-page {display: flex; flex-direction: column; gap: 16px; margin-top: 20px; max-width: 1080px;}
.exp-card {background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0;}
.exp-card-head {padding: 14px 20px; border-bottom: 1px solid var(--line);}
.exp-card-head h3 {margin: 0; font-size: 1rem; font-weight: 700;}
.exp-card-body {padding: 18px 20px 20px;}
.exp-card-body > p {margin: 0 0 10px; font-size: .88rem; line-height: 1.8; color: var(--muted); max-width: 80ch;}
.exp-card-body > p.exp-every {color: var(--text); font-weight: 600;}
.exp-range {margin: 16px 0 0; padding: 0; border: 0; min-width: 0;}
.exp-range legend {font-size: .86rem; font-weight: 700; margin-bottom: 8px; padding: 0;}
.exp-range-opts {display: flex; flex-wrap: wrap; gap: 8px 20px;}
.exp-range-opts label {display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; cursor: pointer;}
.exp-dates {display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px 16px; margin-top: 12px;}
.exp-dates .form-group {margin: 0;}
.exp-dates label {display: block; font-size: .8rem; font-weight: 600; margin-bottom: 4px;}
.exp-dates input {width: 100%; box-sizing: border-box; height: 42px;}
.exp-range-note {margin: 8px 0 0; font-size: .8rem; color: var(--text-muted); line-height: 1.7;}
.exp-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 16px;}
.exp-reason {font-size: .82rem; color: var(--muted);}
.exp-err {margin: 10px 0 0;}
.exp-status {margin: 16px 0 0;}
.exp-status .bank-slip-notice strong {display: block; color: var(--text);}
.exp-status .bank-slip-notice .btn {margin-top: 10px;}
.exp-contents {margin: 8px 0 0; padding-inline-start: 18px; columns: 2; column-gap: 32px; font-size: .84rem; line-height: 1.9; color: var(--muted);}
.exp-contents li {break-inside: avoid;}
.exp-details {margin-top: 14px; font-size: .86rem;}
.exp-details summary {cursor: pointer; font-weight: 700;}
.exp-empty {padding: 6px 0; font-size: .88rem; line-height: 1.8; color: var(--muted);}
.exp-empty p {margin: 0 0 6px;}
.exp-empty > p:first-child {color: var(--text); font-weight: 700;}
.exp-empty > p.exp-empty-h {margin-top: 12px; color: var(--text); font-weight: 700;}
table.exp-table {width: 100%; border-collapse: collapse; font-size: .84rem;}
table.exp-table thead {position: static;}
table.exp-table th, table.exp-table td {padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle;}
table.exp-table th {font-size: .76rem; color: var(--muted); font-weight: 700; white-space: nowrap; background: var(--sunken);}
table.exp-table td.exp-num {white-space: nowrap;}
@media (max-width: 700px) {
  .exp-card-body {padding: 14px;}
  .exp-card-head {padding: 12px 14px;}
  .exp-dates {grid-template-columns: minmax(0, 1fr);}
  .exp-contents {columns: 1;}
  .exp-actions .btn {flex: 1 1 100%; justify-content: center;}
  table.exp-table thead {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);}
  table.exp-table, table.exp-table tbody, table.exp-table tr, table.exp-table td {display: block; width: 100%; box-sizing: border-box;}
  table.exp-table tr {padding: 8px 0; border-bottom: 1px solid var(--line);}
  table.exp-table td {display: block; padding: 3px 0; border: 0; white-space: normal;}
  table.exp-table td.exp-num {white-space: normal;}
  table.exp-table td::before {content: attr(data-label); display: block; color: var(--muted); font-size: .76rem;}
}
/* ── settings: Your data ── end */

/* ── what a plan leaves out: the locked page, the lock on a tab, the analysis teaser (spec 014 T043, T068; mockup 3; lane H) ── */
.plan-locked {max-width: 520px; margin: 40px auto; padding: 28px 24px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);}
.plan-locked > i {font-size: 1.2rem; color: var(--text-muted);}
.plan-locked h3 {margin: 10px 0 4px; font-size: 1rem; font-weight: 700;}
.plan-locked p {margin: 0; font-size: .86rem; color: var(--muted);}
.plan-locked p.plan-locked-sub {margin-top: 12px;}
.plan-locked-actions {display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px;}
.tab-btn .plan-tab-lock {font-size: .72rem; color: var(--text-muted); margin-inline-start: 4px;}
.plan-tease {position: relative; min-width: 0;}
.plan-tease-blur {filter: blur(5px); pointer-events: none;}
.plan-tease-over {position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; text-align: center;}
.plan-tease-box {display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);}
.plan-tease-over b {font-size: .92rem;}
.plan-tease-p {font-size: .82rem; color: var(--muted);}
.plan-tease-grid {display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 12px; align-items: stretch;}
.plan-tease-grid .bi-deck {grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));}
.plan-tease-grid .bi-deck.plan-tease-one {grid-template-columns: minmax(0, 1fr);}
@media (max-width: 640px) {.plan-tease-grid {grid-template-columns: minmax(0, 1fr);}}
@media (max-width: 700px) {.plan-locked {margin: 16px auto; padding: 22px 16px;}}
.plan-lock-badge {display: inline-flex; align-items: center; gap: 5px;}
.plan-lock-note {display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 12px 16px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 3px solid var(--info); border-radius: var(--radius);}
.plan-lock-note > i {color: var(--info); margin-top: 4px;}
.plan-lock-note b {font-size: .9rem;}
.plan-lock-note p {margin: 2px 0 0; font-size: .84rem; color: var(--muted); line-height: 1.7;}
.plan-lock-note .plan-lock-actions {grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;}
.backup-restore-line {display: flex; align-items: flex-start; gap: 8px; margin: -12px 0 0; font-size: .86rem; line-height: 1.7; color: var(--muted);}
.backup-restore-line i {margin-top: 5px; color: var(--text-muted);}
/* ── what a plan leaves out ── end */

/* ── TASK-2026-120: Help and support card in Settings > General ── */
.settings-help-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.settings-help-card .card-header { padding: 16px 24px; border-bottom: 1px solid var(--line); }
.settings-help-card .card-header h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.settings-help-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 24px; }
/* ── Help and support card end */

/* ── TASK-2026-120: the merged Branches page (branches_page.js): the branch cards, each carrying its own offline tills in a collapsible zone ── */
.branches-merged { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.branches-merged > * { min-width: 0; }
.branches-merged .ot-page.ot-in-notes { padding: 0; max-width: none; margin: 0; gap: 12px; }
.ot-in-notes .ot-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; background: var(--ot-surface); border: 1px solid var(--ot-rule); border-radius: 2px; }
.ot-in-notes .ot-strip .ot-summary { margin: 0; border: 0; background: transparent; grid-template-columns: minmax(0, 1fr); flex: 1 1 260px; }
.ot-in-notes .ot-strip .ot-store { padding: 0 20px; }
.br-tills { min-width: 0; }
.br-tills .ot-page.ot-in-card { padding: 0; max-width: none; margin: 0; gap: 0; }
.br-tills [data-ot-detail]:not(:empty) { margin-block-end: 12px; }
.br-tills .ot-fold { border-block-start: 1px solid var(--line); padding-block-start: 12px; }
.br-tills .ot-fold > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 700; min-height: 32px; }
.br-tills .ot-fold > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.br-tills .ot-fold-n { color: var(--muted); font-weight: 600; }
.br-tills .ot-fold-tools { display: flex; margin-block: 10px; }
.br-tills .ot-fold .ot-tiles { margin-block-start: 10px; }
.ot-tile.is-target { border-color: var(--ot-line); box-shadow: inset 0 0 0 2px var(--ot-line); }
/* TASK-2026-121: a till's own page opens INSIDE its branch card. The card is one track of the auto-fill card grid (about 340px), so the page was squeezed into it:
   a card that holds an open till page takes the whole row, and the page folds on the width of its own slot (a container), not the screen's. */
.br-card:has([data-ot-detail]:not(:empty)) { grid-column: 1 / -1; }
.br-tills [data-ot-detail] { container: ot-detail / inline-size; }
.br-tills .ot-till-grid { grid-template-columns: minmax(0, 1fr); }
@container ot-detail (min-width: 720px) { .br-tills .ot-till-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
@container ot-detail (max-width: 719px) {
  .br-tills .ot-band-end, .br-tills .ot-step-b .ot-row { width: 100%; }
  .br-tills .ot-band-end .btn, .br-tills .ot-step-b .ot-row > .btn { flex: 1 1 100%; justify-content: center; max-width: 100%; box-sizing: border-box; }
}
@container ot-detail (max-width: 560px) {
  .br-tills .ot-band { padding: 20px 16px 0; }
  .br-tills .ot-h1 { font-size: 22px; }
  .br-tills .ot-summary { margin: 20px -16px 0; grid-template-columns: minmax(0, 1fr); }
  .br-tills .ot-sum { padding: 12px 16px; }
  .br-tills .ot-sum + .ot-sum { border-inline-start: 0; border-top: 1px solid var(--ot-rule); }
  .br-tills .ot-panel { padding: 20px 16px; }
  .br-tills .ot-step { grid-template-columns: 32px minmax(0, 1fr); gap: 8px 12px; }
  .br-tills .ot-step-n { width: 32px; height: 32px; }
  .br-tills .ot-step::before { inset-inline-start: 15px; top: 38px; }
  .br-tills .ot-code-panel { padding: 16px; }
  .br-tills .ot-ch { width: 26px; height: 38px; font-size: 17px; }
}
/* ── merged Branches page end */

/* ── TASK-2026-120, lane N2: seven Permissions cards (the Branches card is the owner's seventh). The grid is three a row, two on a tablet, one on a phone; with seven
   the last card would stand alone on a short row, so the odd one out at the end takes the whole row instead of leaving a gap. Six cards (a shop that holds none of the
   Branches lines) fill their rows and match neither rule. ── */
.emp2-card-grid.is-3.perm2-cards > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .emp2-card-grid.is-3.perm2-cards > :last-child:nth-child(3n+1) { grid-column: auto; }
  .emp2-card-grid.is-3.perm2-cards > :last-child:nth-child(2n+1) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .emp2-card-grid.is-3.perm2-cards > :last-child { grid-column: auto; }
}
/* ── seven Permissions cards end */

/* ═══════════════════════════════════════════════════ TASK-2026-127: LAPTOP SCREENS - NOTHING HIDDEN
   The tester had to zoom the browser out to reach buttons. Three causes, all measured on a real run:
   the page pane lost its own class (fixed in app.js), the 960px minimum width made every page scroll
   sideways at 1280px, and the till's right column was cut off below 650px of height. */
.main-content > *:not(.loading-screen):not(.modal-overlay) { min-width: min(960px, 100%); }

/* Wide lists (suppliers, session logs, inventory, customers, employees) scroll sideways inside their own
   wrapper on a laptop, and the row buttons sit in the last column - hidden until the list is dragged.
   The last column, when it holds buttons, now stays at the edge the reader's eye ends on. */
@media (max-width: 1700px) {
  .table-wrapper table:has(tbody td:last-child :is(.btn, button, .table-actions)) :is(th, td):last-child {
    position: sticky; inset-inline-end: 0; border-inline-start: 1px solid var(--line);
  }
  .table-wrapper table:has(tbody td:last-child :is(.btn, button, .table-actions)) th:last-child { z-index: 6; }
  .table-wrapper table:has(tbody td:last-child :is(.btn, button, .table-actions)) tbody tr:not(.is-selected) > td:last-child {
    z-index: 1; background-color: var(--table-sticky-bg, var(--card));
  }
  .table-wrapper table:has(tbody td:last-child :is(.btn, button, .table-actions)) tbody tr:not(.is-selected):hover > td:last-child {
    background-image: linear-gradient(var(--tint), var(--tint));
  }
  .card .table-wrapper, .table-wrapper.card { --table-sticky-bg: var(--card); }
}

/* The bank page is a one-column grid whose column grew to its widest table in English, pushing the page 18px
   past the pane at 1280px; the column may now shrink and the table scrolls in its own wrapper. */
.bank-page { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1101px) {
  /* The right column of the till scrolls on its own when the screen is short, and the checkout button
     stays at its bottom edge, so it is never pushed out of the frame (the shell hides what overflows). */
  .pos-terminal-shell .pos-right { overflow-y: auto; scrollbar-width: thin; padding-block-end: 2px; }
  .pos-terminal-shell .pos-right > * { flex-shrink: 0; }
  .pos-terminal-shell .pos-right > .checkout-btn { position: sticky; inset-block-end: 0; z-index: 2; }
}

@media (min-width: 769px) and (max-width: 1100px) {
  /* Folded to one column, the summary used to float over the search boxes (about 400px of a 700px
     screen). It now sits under the cart; only the checkout button follows the screen. */
  .pos-right { position: static !important; margin-top: 0 !important; padding: 0 !important; border-top: 0 !important;
    box-shadow: none !important; background: transparent !important; }
  .pos-right > .checkout-btn { position: sticky; inset-block-end: 8px; z-index: 5; }
}

/* TASK-2026-130: THE SHOP'S LOGO IN THE APP. Sidebar header: a fixed box, contain, 2px corners; folded, the logo alone (24px) with the toggle under it.
   The name is clipped with an ellipsis; `.logo-text[hidden]` has no display rule on purpose. Sign-in: centred above the title in a fixed 72px box. */
.sidebar .sidebar-logo { min-width: 0; }
.sidebar .sidebar-logo .sidebar-logo-img { border-radius: 2px !important; }
.sidebar .sidebar-logo .logo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.sidebar.collapsed .sidebar-header { flex-direction: column; gap: 4px; justify-content: center; }
.sidebar.collapsed .sidebar-logo .logo-text { display: none; }
.sidebar.collapsed .sidebar-logo .sidebar-logo-img { height: 24px !important; width: 24px !important; max-height: 24px !important; max-width: 24px !important; }
.sidebar.collapsed .sidebar-header .sidebar-toggle { width: 22px; height: 22px; font-size: 0.8rem; }
.login-logo-img[data-shop-logo], .mobile-header-logo[data-shop-logo] { border-radius: 2px !important; }
.company-signin-shop-logo { display: flex; justify-content: center; margin-bottom: 18px; }
.company-signin-shop-logo img { width: 72px; height: 72px; max-width: 100%; object-fit: contain; border-radius: 2px; display: block; }

/* The applied-on line at the top of Settings > Colours and sizes (spec 017, V8; TASK-2026-135): what the first-day wizard added, behind an (i), and the Categories button. */
.setup-applied-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px 14px; padding: 14px 18px; margin-block-end: 18px; border: 1px solid var(--rp-rule);
  border-inline-start: 3px solid var(--rp-fill); background: var(--rp-tint); border-radius: 2px; }
.setup-applied-line > i { color: var(--rp-fill); }
html[data-theme="retailpower-dark"] .setup-applied-line > i { color: var(--brand); }
.setup-applied-line b { font-size: 14px; color: var(--text); line-height: 1.6; }
@media (max-width: 720px) {
  .setup-applied-line { grid-template-columns: auto minmax(0, 1fr) auto; }
  .setup-applied-line .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ── subscription tab: the primary Owner and the successor (spec 014 T044's remainder; mockup 2; TASK-2026-138) ── */
.sub-succ {display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .88rem;}
.sub-succ b {color: var(--text);}
.sub-succ span {color: var(--muted); display: inline-flex; align-items: center; gap: 6px;}
.sub-succ .btn {margin-inline-start: auto;}
.sub-succ small {font-weight: 400; color: var(--muted);}
/* ── subscription tab: the primary Owner and the successor ── end */

/* ── The Employees directory: five columns and rows that open (static/js/employees_directory.js; TASK-2026-146) ─────────────────
   Built from the owner's approved mockup of 2026-10-11, option A (scratch/mockups/emp-dir.css). The card is its own container: below
   44rem of room the same rows are drawn as cards (a phone, or a laptop with the font enlarged), whatever the screen's width. The first
   column is sticky as a safeguard between the two. Logical sides only; the chevron is a drawn shape, so it keeps physical borders and
   one rotation per direction. A row the pager or the search leaves out carries `data-sl-off` (staff_list.js), and its detail row,
   which follows it in the markup, goes with it through the sibling rule below. Nothing here is toggled with the `hidden` attribute. */
.emp-dir { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; container-name: emp-dir; container-type: inline-size; }
.emp-dir-h { display: flex; align-items: baseline; gap: .75rem; padding: .85rem 1.1rem; padding-inline-end: calc(var(--corner-i-reserve, 44px) + .25rem); border-block-end: 1px solid var(--line); background: var(--surface); }
.emp-dir-h h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.emp-dir-count { font-size: .8rem; color: var(--text-muted); }
.emp-dir > .info-tip { position: absolute; inset-block-start: var(--corner-i-inset, 10px); inset-inline-end: var(--corner-i-inset, 10px); margin: 0; z-index: 3; }
.emp-dir-kpis { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.emp-dir-scroll { overflow-x: auto; }
.emp-dir-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; table-layout: auto; }
.emp-dir-table thead { position: static; background: transparent; }
.emp-dir-table th { background: var(--surface) !important; box-shadow: none !important; text-transform: none; letter-spacing: 0; font-size: .78rem; padding: .6rem .75rem; text-align: start; border-block-end: 1px solid var(--line); white-space: nowrap; }
.emp-dir-table td { padding: .65rem .75rem; border-block-end: 1px solid var(--line); vertical-align: middle; white-space: nowrap; background: var(--surface); }
.emp-dir-table tbody tr:last-child td { border-block-end: 0; }
.emp-dir-table tbody tr.emp-row-item:hover > td { background: var(--tint); }
.emp-dir-table .emp-dir-num, .emp-dir-table th.emp-dir-num { text-align: end; font-variant-numeric: tabular-nums; }
.emp-dir-table th.emp-dir-c-name, .emp-dir-table td.emp-dir-c-name { position: sticky; inset-inline-start: 0; z-index: 2; }
.emp-dir-table th.emp-dir-c-name { z-index: 12; }
.emp-dir-table td.emp-dir-c-name { padding-inline-start: .5rem; }
.emp-dir-table tbody tr.emp-row-item.is-open > td { background: var(--surface); border-block-end-color: transparent; }
.emp-dir-table tr[data-sl-off] + .emp-detail-row { display: none !important; }
.emp-row-item { cursor: pointer; }
.emp-dir-name { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.emp-dir-av { flex: none; display: inline-grid; place-items: center; inline-size: 2.15rem; block-size: 2.15rem; border-radius: 50%; background: var(--sunken); border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: .9rem; line-height: 1; }
.emp-dir-who { display: grid; min-width: 0; line-height: 1.35; }
.emp-dir-who b { font-weight: 700; color: inherit; white-space: normal; overflow-wrap: anywhere; }
.emp-dir-who small { font-size: .74rem; color: var(--text-muted); unicode-bidi: isolate; text-align: start; overflow: hidden; text-overflow: ellipsis; }
.emp-dir-toggle { appearance: none; background: transparent; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 0; flex: none; inline-size: 1.9rem; block-size: 1.9rem; display: inline-grid; place-items: center; border-radius: var(--radius); }
.emp-dir-toggle:hover { background: var(--tint); color: var(--text); }
.emp-dir-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.emp-dir-chev { display: inline-block; inline-size: .5rem; block-size: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
/* closed: points toward the end side; open: points down */
html[dir="ltr"] .emp-dir-chev { transform: rotate(-45deg); }
html[dir="rtl"] .emp-dir-chev { transform: rotate(135deg); }
html .emp-row-item.is-open .emp-dir-chev { transform: rotate(45deg) translate(-1px, -1px); }
.emp-dir-role { display: inline-block; padding: .1rem .55rem; font-size: .78rem; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 2px; line-height: 1.5; white-space: nowrap; }
.emp-dir-money { unicode-bidi: isolate; font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; }
.emp-dir-cur { font-size: .74rem; color: var(--text-muted); margin-inline-start: .25rem; font-weight: 600; }
.emp-dir-dash { color: var(--text-muted); }
.emp-dir-isolate { unicode-bidi: isolate; font-family: 'Outfit', 'Cairo', sans-serif; }
.emp-dir-status { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.emp-dir-status .badge { white-space: nowrap; }
.emp-dir-status .plan-lock-badge { display: inline-flex; align-items: center; gap: .3rem; }
/* the row that opens */
.emp-dir-table tr.emp-detail-row > td { padding: 0 0 .25rem; background: var(--surface); white-space: normal; border-block-end: 1px solid var(--line); }
.emp-dir-table tr.emp-detail-row:last-child > td { border-block-end: 0; }
.emp-dir-panel { display: grid; gap: .9rem; padding: .9rem 1.1rem 1rem; border-inline-start: 3px solid var(--fill); }
.emp-dir-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem 1.5rem; margin: 0; }
.emp-dir-fields > div { min-width: 0; }
.emp-dir-fields dt { margin: 0; font-size: .75rem; font-weight: 600; color: var(--text-muted); }
.emp-dir-fields dd { margin: .1rem 0 0; font-size: .95rem; font-weight: 600; color: var(--text); min-width: 0; }
.emp-dir-fields dd .btn { margin-block: .1rem; }
.emp-dir-fields .view-sales-link { font-weight: 700; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.emp-dir-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, max-content)); gap: .5rem; padding-block-start: .85rem; border-block-start: 1px solid var(--line); align-items: center; }
.emp-dir-actions .btn { justify-content: center; min-inline-size: 10rem; }
.emp-dir-why { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); margin: 0; }
.emp-dir-why i { color: var(--text-muted); font-size: .8rem; }
.emp-dir-lockline { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; }
.emp-dir > .sl-none, .emp-dir > .bank-ledger-footer { background: var(--surface); }
.emp-dir > .bank-ledger-footer { padding: .65rem 1.1rem; border-block-start: 1px solid var(--line); }
.emp-dir > .bank-ledger-footer .bank-ledger-pager .btn { min-width: 6rem; }
/* The list bar is the shared filter bar, drawn above the card as in the mockup (option A); the card keeps its own corners. */
.emp-dir-bar { min-width: 0; }
.emp-dir-bar .filter-bar { margin-block-end: .75rem; }
.emp-dir-bar .filter-bar-controls { align-items: center; }
.emp-dir-bar .filter-q { flex: 1 1 14rem; max-inline-size: 26rem; }
.emp-dir-bar .filter-clear { min-block-size: var(--control); }
.emp-dir-bar .emp-dir-add { justify-content: center; min-inline-size: 9rem; }
@media (max-width: 640px) {
  .emp-dir-bar .filter-bar-controls > * { flex: 1 1 calc(50% - 8px); min-inline-size: 0; max-inline-size: none; }
  .emp-dir-bar .filter-bar-controls > .filter-q { flex-basis: 100%; }
  .emp-dir-bar .filter-bar-controls > .filter-bar-action { margin-inline-start: 0; }
  .emp-dir-bar .filter-bar-action > .btn, .emp-dir-bar .filter-add, .emp-dir-bar .filter-sort, .emp-dir-bar .filter-clear { inline-size: 100%; max-inline-size: none; }
}
/* below 44rem of room: every row is a card (name and status, then role, salary and the month's sales) */
@container emp-dir (max-width: 44rem) {
  .emp-dir-scroll { overflow-x: visible; }
  .emp-dir-table, .emp-dir-table tbody, .emp-dir-table tr, .emp-dir-table td { display: block; }
  .emp-dir-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .emp-dir-table tr.emp-row-item { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: .4rem .6rem; padding: .8rem .85rem; background: var(--surface); border-block-end: 1px solid var(--line); }
  .emp-dir-table tr.emp-row-item.is-open { background: var(--surface); }
  .emp-dir-table tr.emp-row-item > td, .emp-dir-table tbody tr.emp-row-item:hover > td, .emp-dir-table tbody tr.emp-row-item.is-open > td { padding: 0; border: 0; background: transparent; white-space: normal; }
  .emp-dir-table td.emp-dir-c-name { position: static; padding-inline-start: 0; grid-column: 1 / span 4; grid-row: 1; }
  .emp-dir-table td.emp-dir-c-status { grid-column: 5 / span 2; grid-row: 1; justify-self: end; }
  .emp-dir-table td.emp-dir-meta { grid-column: span 2; text-align: start; font-size: .82rem; font-weight: 600; }
  .emp-dir-table.no-salary td.emp-dir-meta { grid-column: span 3; }
  .emp-dir-table td.emp-dir-meta::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 600; color: var(--text-muted); }
  .emp-dir-table tr.emp-detail-row > td { display: block; }
  .emp-dir-panel { padding: .75rem .85rem 1rem; }
  .emp-dir-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emp-dir-actions { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
  .emp-dir-actions .btn { min-inline-size: 0; }
  .emp-dir > .bank-ledger-footer { justify-content: center; }
  .emp-dir > .bank-ledger-footer .bank-ledger-pager .btn { min-width: 5rem; }
}
/* emp-dir end */
/* ═══ TASK-2026-145 (owner-approved mockups of 2026-10-11): upload limits, the kept-login swap, the setup wizard's last states. Feature CSS lives ABOVE the spec 017 marker below. ═══ */
/* ── upload limits (mockup states-upload-limits): the strip that says why a control is blocked, the meter, the shop logo card ── */
.pus-note { flex: 1 1 260px; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 10px 14px; border: 1px solid var(--warning);
  border-inline-start-width: 3px; background: var(--warning-tint); border-radius: 2px; font-size: .86rem; line-height: 1.75; color: var(--text); }
.pus-note > i { margin-top: 5px; color: var(--warning); }
.pus-note.is-info { border-color: var(--rp-rule, var(--line)); border-inline-start-color: var(--brand); background: var(--rp-tint, var(--tint)); }
.pus-note.is-info > i { color: var(--brand); }
.pus-tail { grid-column: 2; font-size: .84rem; }
.pus-ask { color: var(--muted); font-weight: 600; }
.pus-link { font-weight: 700; }
.pus-meter { display: grid; gap: 6px; min-width: 0; }
.pus-meter-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .84rem; color: var(--muted); }
.pus-meter-row b { color: var(--text); font-size: .92rem; }
.pus-meter-track { block-size: 8px; background: var(--sunken); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.pus-meter-fill { block-size: 100%; background: var(--fill); }
.pus-meter.is-warn .pus-meter-fill, .pus-meter.is-full .pus-meter-fill { background: var(--warning); }
.pus-num { font-variant-numeric: tabular-nums; }
.pus-corner { position: absolute; inset-block-start: var(--corner-i-inset, 10px); inset-inline-end: var(--corner-i-inset, 10px); margin: 0; z-index: 3; }
.sub-card:has(> .pus-corner) { position: relative; }
.sub-card:has(> .pus-corner) .sub-card-head { padding-inline-end: var(--corner-i-reserve, 44px); }
.emp2-add.pus-add > .pus-meter, .emp2-add.pus-add > .pus-note { grid-column: 1 / -1; }
.emp2-add.pus-add > .pus-note { flex: none; }
.shl-host:empty { display: none; }
.shl-host { margin-block-end: 20px; }
.shl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 20px; align-items: start; }
.shl-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; min-width: 0; }
.shl-head { display: flex; align-items: center; padding: 14px 20px; padding-inline-end: 54px; border-bottom: 1px solid var(--line); min-block-size: 54px; }
.shl-head h3 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.shl-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.shl-foot { padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface); }
.shl-foot .pus-meter { max-inline-size: 420px; }
.shl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.shl-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.shl-tile { flex: none; inline-size: 84px; block-size: 84px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--text-muted); overflow: hidden; }
.shl-tile.is-empty { border-style: dashed; background: var(--surface); }
.shl-tile.is-dim { opacity: .5; }
.shl-tile img { inline-size: 80%; block-size: 80%; object-fit: contain; }
.shl-status { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.shl-status b { color: var(--text); }
.shl-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.shl-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.shl-paper { background: var(--surface); overflow-x: auto; align-items: center; }
.shl-receipt { margin-inline: auto; background: #fff; color: #1D2D3E; box-shadow: none; }
.shl-mark { text-align: center; font-size: .78rem; color: var(--text-muted); }
@media (max-width: 1100px) { .shl-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .shl-upload > .btn { inline-size: 100%; } .shl-body { padding: 16px; } .shl-tile { inline-size: 72px; block-size: 72px; } }
/* ── the kept-login swap (mockup states-kept-swap): the strip, the summary bar, the window of switches, the audit line ── */
.lsw-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 14px 18px; margin-block-end: 16px; border: 1px solid var(--line); border-inline-start: 3px solid var(--brand); background: var(--surface); border-radius: 2px; }
.lsw-notice > i { margin-top: 5px; color: var(--brand); }
.lsw-notice b { font-size: .95rem; }
.lsw-notice p { margin: 2px 0 0; font-size: .88rem; line-height: 1.75; color: var(--muted); }
.lsw-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lsw-who b { display: block; line-height: 1.4; }
.lsw-who small { color: var(--muted); font-size: .8rem; }
.lsw-av { flex: none; inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--on-fill, #fff); font-weight: 700; font-size: .85rem; }
.lsw-av.is-off { background: var(--sunken); color: var(--muted); }
.lsw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-block-start: 16px; padding-block-start: 14px; border-top: 1px solid var(--line); }
.lsw-count { flex: 1 1 220px; max-inline-size: 360px; display: grid; gap: 6px; min-width: 0; }
.lsw-count-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .84rem; color: var(--muted); }
.lsw-count-row b { color: var(--text); font-size: .92rem; }
.lsw-acts { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.lsw-acts .pus-note { flex: 1 1 260px; }
.lsw-dots { display: flex; gap: 5px; }
.lsw-dots i { inline-size: 22px; block-size: 8px; border-radius: 2px; background: var(--sunken); border: 1px solid var(--line); }
.lsw-dots i.is-on { background: var(--fill); border-color: var(--fill); }
.lsw-audit { display: flex; align-items: center; gap: 8px; margin-block-start: 12px; font-size: .84rem; color: var(--muted); }
.lsw-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 16px; margin-block-end: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; }
.lsw-plan { font-size: .84rem; color: var(--muted); }
.lsw-big { display: flex; align-items: baseline; gap: 8px; }
.lsw-big b { font-size: 1.6rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.lsw-head-r { margin-inline-start: auto; display: grid; gap: 6px; justify-items: end; }
.lsw-free { font-size: .82rem; color: var(--muted); }
#sub-swap .pus-note { margin-block-end: 14px; flex: none; }
.lsw-list { background: var(--surface); border: 1px solid var(--line); border-radius: 2px; }
.lsw-person { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.lsw-person:last-child { border-bottom: 0; }
.lsw-person .lsw-who { flex: 1 1 220px; }
.lsw-person.is-chg { background: var(--rp-tint, var(--tint)); }
.lsw-ctl { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.lsw-fx { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-muted); }
.lsw-why { flex: 1 1 100%; display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; font-size: .84rem; line-height: 1.7; border: 1px solid var(--warning); border-inline-start-width: 3px; background: var(--warning-tint); border-radius: 2px; }
.lsw-why > i { margin-top: 4px; color: var(--warning); }
.lsw-sw { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; font: inherit; font-size: .88rem; color: var(--muted); cursor: pointer; }
.lsw-sw:disabled { cursor: not-allowed; }
.lsw-sw:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.lsw-track { inline-size: 42px; block-size: 24px; flex: none; display: flex; align-items: center; padding: 2px; border: 1.5px solid var(--text-muted); border-radius: 12px; background: var(--sunken); }
.lsw-knob { inline-size: 17px; block-size: 17px; border-radius: 50%; background: var(--surface); box-shadow: none; }
.lsw-sw[aria-checked="true"] { color: var(--text); font-weight: 600; }
.lsw-sw[aria-checked="true"] .lsw-track { background: var(--fill); border-color: var(--fill); justify-content: flex-end; }
.lsw-sw[aria-checked="true"] .lsw-knob { background: #fff; }
.lsw-sw:disabled .lsw-track { opacity: .6; border-color: var(--line); }
.lsw-nochange { font-size: .84rem; color: var(--text-muted); margin-inline-end: auto; }
.lsw-foot-end { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.lsw-field { display: flex; flex-direction: column; gap: 6px; margin-block-end: 14px; }
.lsw-lab { font-size: .86rem; font-weight: 600; }
.lsw-chg { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 2px; }
.lsw-chg > div { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: .9rem; }
.lsw-chg > div + div { border-top: 1px solid var(--line); }
.lsw-chg .is-open > i { color: var(--success); }
.lsw-chg .is-lock > i { color: var(--warning); }
.lsw-k { color: var(--muted); min-inline-size: 72px; font-size: .84rem; }
@media (max-width: 640px) { .lsw-acts .btn { inline-size: 100%; } .lsw-head-r { margin-inline-start: 0; justify-items: start; } }
/* ── the setup wizard's last states (mockup states-wizard): the brand name's tag, a branch that uses the shop's logo, the disabled upload with its reason ── */
.setup-brand-tag { display: inline-flex; padding: 0 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 2px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.setup-brand-tag.is-own { border-color: var(--brand); color: var(--brand); }
.setup-logo.is-inherit { border-style: dashed; }
.setup-logo-box.is-dim { opacity: .5; border-style: dashed; background: var(--surface); }
.setup-logo.is-off { flex-wrap: wrap; align-items: flex-start; }
.setup-logo.is-off .setup-logo-t { flex: 1 1 260px; }
.setup-logo.is-off .pus-note { flex: none; margin-block-start: 4px; }
.setup-logo.is-off > .btn { margin-inline-start: 0; }
.setup-logo-t .setup-err { display: inline; }
.owner-step-up-card .bank-slip-notice strong + span { margin-inline-start: .4em; }   /* a second line under "The password is incorrect." (TASK-2026-145) */
/* ═══ TASK-2026-145 end ═══ */







/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   SPEC 048: SMARTER SEARCH (TASK-2026-147). Filters with counts (S4), suggestions while typing (S5), highlighting (S6).
   Built as the owner approved the mockups of 2026-10-11 (scratch/mockups/048-*.html). Class names carry the prefix fx- (find and filter);
   tokens only, the four surface levels of the app (page --bg-primary, panel --bg-secondary, card and table body --bg-card, controls --bg-tertiary),
   the theme's own corners, logical sides everywhere. The explanations sit behind the app's (i) button (info_tip.js), never as a paragraph.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --fx-mark-bg: rgba(var(--accent-rgb), .20); --fx-mark-line: var(--accent-gold); --fx-sheet-veil: rgba(0, 0, 0, .5); --fx-focus: var(--border-focus); }
html[data-theme="retailpower"] { --fx-mark-bg: rgba(44, 107, 120, 0.17); --fx-mark-line: #2C6B78; --fx-sheet-veil: rgba(29, 45, 62, 0.42); --fx-focus: #2C6B78; }
html[data-theme="retailpower-dark"] { --fx-mark-bg: rgba(80, 180, 191, 0.30); --fx-mark-line: #84D0D9; --fx-sheet-veil: rgba(0, 0, 0, 0.6); --fx-focus: #84D0D9; }

/* ── S6: the part of a result that matched. A bare mark used to draw a thin outline with no fill (the old "dynamic highlight" rule, which is now only for
      .search-highlight and .btn-highlight); a mark is a tinted block, a word the search forgave a letter for is dashed underneath instead. */
mark { background-color: var(--fx-mark-bg) !important; color: inherit !important; box-shadow: none !important; font-weight: 700; border-radius: var(--radius); padding: 0 1px; margin: 0 -1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
mark.fx-mark.is-fuzzy { background-color: rgba(var(--accent-rgb), .07) !important; font-weight: inherit; text-decoration: underline dashed var(--fx-mark-line); text-decoration-thickness: 2px; text-underline-offset: .28em; }
.is-selected mark.fx-mark, .is-selected mark { background-color: rgba(255, 255, 255, .26) !important; color: var(--on-fill) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .85) !important; }
.is-selected mark.fx-mark.is-fuzzy { background-color: rgba(255, 255, 255, .1) !important; box-shadow: none !important; text-decoration-color: rgba(255, 255, 255, .9); }
.global-search-result.is-active mark.fx-mark, .fx-sug-item.is-active mark.fx-mark { background-color: rgba(var(--accent-rgb), .26) !important; }

/* ── shared small pieces */
.fx-badge { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.25rem; block-size: 1.25rem; padding: 0 .35rem; border-radius: 2px; background: var(--fill); color: var(--on-fill); font-size: .68rem; font-weight: 700; }
.fx-badge.is-quiet { background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
.fx-link { appearance: none; border: 0; background: transparent; color: var(--brand); font: inherit; font-size: .78rem; font-weight: 700; padding: 2px 4px; cursor: pointer; border-radius: 2px; }
.fx-link:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.fx-link:disabled { color: var(--text-muted); cursor: default; opacity: .7; }
.fx-link:focus-visible, .fx-more:focus-visible, .fx-group-h:focus-visible, .fx-chip:focus-visible { outline: 2px solid var(--fx-focus); outline-offset: 1px; }
.fx-code { font-family: 'Cairo', sans-serif; font-size: .78rem; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--muted); unicode-bidi: isolate; }
.fx-has-info { position: relative; }
.fx-info-corner { position: absolute; inset-block-start: .55rem; inset-inline-end: .55rem; z-index: 3; margin: 0; }

/* ── the toolbar of the two product pages: the search box, then what the page adds, then (on a phone) the filters button */
.fx-page { min-width: 0; }
.fx-toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.fx-search { position: relative; flex: 1; min-width: 0; }
.fx-search-i { position: absolute; inset-inline-start: .9rem; inset-block-start: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .95rem; pointer-events: none; z-index: 2; }
.fx-search .fx-search-input { width: 100%; height: 44px; box-sizing: border-box; padding-block: 0; padding-inline: 2.6rem 2.5rem; font-size: .95rem; background: var(--sunken); border: 1px solid var(--line); border-radius: 2px; color: var(--text); }
.fx-search .fx-search-input:focus { border-color: var(--border-active); box-shadow: 0 0 0 3px transparent; background: var(--surface); }
.fx-search-x { position: absolute; inset-inline-end: .35rem; inset-block-start: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border: 0; border-radius: 2px; background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
.fx-search-x[hidden] { display: none; }
.fx-search-x:hover { background: var(--tint); color: var(--text); }
.fx-add { height: 44px; white-space: nowrap; }
.fx-filter-btn { display: none; height: 44px; white-space: nowrap; align-items: center; gap: .5rem; }

/* ── the filter panel and the results beside it */
.fx-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.fx-panel { position: sticky; inset-block-start: 0; max-height: calc(calc(100 * var(--vh)) - var(--header-height) - 2.5rem); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; min-width: 0; }
.fx-panel-head { display: flex; align-items: center; gap: .5rem; padding-block: .7rem .6rem; padding-inline: .9rem 2.6rem; border-block-end: 1px solid var(--line); flex: 0 0 auto; }
.fx-panel-title { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; margin-inline-end: auto; }
.fx-panel-body { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-block: .1rem; }
.fx-panel-off { margin: 0; padding: 1rem .9rem; font-size: .8rem; color: var(--muted); }
.fx-sheet-x, .fx-sheet-foot, .fx-sheet-veil { display: none; }
.fx-group { border-block-end: 1px solid var(--line); padding-block: .15rem .45rem; }
.fx-group:last-child { border-block-end: 0; }
.fx-group-h { appearance: none; width: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: .8rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; cursor: pointer; text-align: start; }
.fx-group-h:hover { background: var(--tint); }
.fx-group-h > span:first-child { margin-inline-end: auto; }
.fx-chev { inline-size: .5rem; block-size: .5rem; border-inline-end: 2px solid var(--text-muted); border-block-end: 2px solid var(--text-muted); transform: rotate(45deg) translate(-1px, -1px); transition: transform .15s ease; flex: 0 0 auto; margin-inline: .2rem; }
.fx-group.is-closed .fx-chev { transform: rotate(-45deg); }
html[dir="rtl"] .fx-group.is-closed .fx-chev { transform: rotate(135deg); }
.fx-group.is-closed .fx-group-b { display: none; }
.fx-group-b { padding: 0 .55rem; }
.fx-opt { position: relative; display: flex; align-items: center; gap: .55rem; min-height: 2.05rem; padding: .15rem .35rem; border-radius: 2px; cursor: pointer; font-size: .82rem; color: var(--text); }
.fx-opt:hover { background: var(--tint); }
.fx-opt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-opt-n { margin-inline-start: auto; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.fx-opt.is-on { font-weight: 700; }
.fx-opt.is-on .fx-opt-n { color: var(--text); }
.fx-opt.is-zero { cursor: default; color: var(--text-muted); }
.fx-opt.is-zero:hover { background: transparent; }
.fx-opt.is-zero .fx-opt-n { color: var(--text-muted); }
.fx-sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.fx-box { flex: 0 0 auto; inline-size: 1rem; block-size: 1rem; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--text-muted); border-radius: 2px; background: var(--surface); color: transparent; font-size: .58rem; }
.fx-opt.is-on .fx-box { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.fx-opt.is-zero .fx-box { border-color: var(--line); }
.fx-radio .fx-box { border-radius: 50%; }
.fx-radio.is-on .fx-box { box-shadow: inset 0 0 0 3px var(--surface); }
.fx-opt:has(input:focus-visible) .fx-box, .fx-opt:has(input:focus-visible) .fx-track { outline: 2px solid var(--fx-focus); outline-offset: 2px; }
.fx-switch .fx-track { flex: 0 0 auto; inline-size: 2rem; block-size: 1.1rem; border-radius: 2px; background: var(--sunken); border: 1.5px solid var(--text-muted); position: relative; transition: background .15s; }
.fx-switch .fx-knob { position: absolute; inset-block: 2px; inset-inline-start: 2px; inline-size: .7rem; border-radius: var(--radius); background: var(--text-muted); transition: inset-inline-start .15s, background .15s; }
.fx-switch.is-on .fx-track { background: var(--fill); border-color: var(--fill); }
.fx-switch.is-on .fx-knob { inset-inline-start: calc(100% - .7rem - 2px); background: var(--on-fill); }
.fx-more { appearance: none; border: 0; background: transparent; color: var(--brand); font: inherit; font-size: .76rem; font-weight: 700; padding: .35rem .35rem .2rem; cursor: pointer; }
.fx-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.fx-range { display: grid; grid-template-columns: 1fr 1fr auto; gap: .45rem; align-items: end; padding: .5rem .35rem .2rem; }
.fx-range-f { display: flex; flex-direction: column; gap: 2px; font-size: .7rem; color: var(--muted); font-weight: 600; min-width: 0; }
.fx-range-f input { height: 2.2rem; padding: 0 .55rem; font-size: .82rem; text-align: start; background: var(--sunken); border: 1px solid var(--line); border-radius: 2px; min-width: 0; }
.fx-range .btn { height: 2.2rem; padding: 0 .7rem; }
.fx-panel .code-swatch { margin-inline-end: -.15rem; }

.fx-results { min-width: 0; }
.fx-notice { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .9rem; margin-block-end: .75rem; background: var(--surface); border: 1px solid var(--line); border-inline-start: 3px solid var(--brand); border-radius: 2px; font-size: .84rem; }
.fx-notice > i { color: var(--brand); }
.fx-notice > span { flex: 1 1 14rem; }
.fx-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-end: .75rem; }
.fx-chip { appearance: none; display: inline-flex; align-items: center; gap: .5rem; height: 1.9rem; padding-block: 0; padding-inline: .65rem .5rem; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--text); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.fx-chip i { font-size: .65rem; color: var(--text-muted); }
.fx-chip:hover { border-color: var(--border-active); }
.fx-chip:hover i { color: var(--text); }
.fx-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: .6rem; min-height: 1.9rem; }
.fx-count { font-weight: 700; font-size: .95rem; }
.fx-sort { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--muted); }
.fx-matched { margin-top: .15rem; font-size: .72rem; color: var(--muted); font-weight: 600; }
.fx-empty { padding: 2.2rem 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.fx-empty-t { font-weight: 700; font-size: .95rem; color: var(--text); }
.fx-empty-h { font-size: .8rem; color: var(--muted); }
.fx-pager { background: var(--surface); }
.fx-pager .btn { gap: .4rem; display: inline-flex; align-items: center; }
.fx-pager .btn i { font-size: .7rem; }
.fx-filter-page .bank-ledger-pageno { font-size: .8rem; color: var(--muted); min-width: 3rem; text-align: center; }
.fx-filter-page .table-wrapper tr.product-row .fx-code { color: var(--text-muted); font-size: .72rem; }
@media (prefers-reduced-motion: reduce) { .fx-chev, .fx-switch .fx-track, .fx-switch .fx-knob { transition: none; } }

/* ── narrow screens (under 1260 px, where the table would be left too little room beside the panel): the panel becomes a sheet from the bottom edge, opened by the filters button */
@media (max-width: 1259px) {
  .fx-filter-btn { display: inline-flex; }
  .fx-layout { grid-template-columns: minmax(0, 1fr); }
  .fx-panel { position: fixed; inset-inline: 0; inset-block: auto 0; z-index: 1300; max-height: calc(86 * var(--vh)); height: auto; border-radius: 2px 2px 0 0; border-inline-width: 0; border-block-end-width: 0; transform: translateY(105%); visibility: hidden; transition: transform .2s ease, visibility .2s; box-shadow: var(--shadow-float); background: var(--surface); }
  .fx-panel.is-sheet-open { transform: none; visibility: visible; }
  .fx-sheet-veil { display: block; position: fixed; inset: 0; z-index: 1250; background: var(--fx-sheet-veil); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .fx-panel.is-sheet-open + .fx-sheet-veil { opacity: 1; pointer-events: auto; }
  .fx-sheet-x { display: inline-flex; position: absolute; inset-block-start: .5rem; inset-inline-end: 2.4rem; width: 1.9rem; height: 1.9rem; border: 0; background: transparent; color: var(--muted); align-items: center; justify-content: center; border-radius: 2px; cursor: pointer; }
  .fx-panel-head { padding-inline-end: 5rem; }
  .fx-sheet-foot { display: block; padding: .7rem .9rem; border-block-start: 1px solid var(--line); background: var(--surface); }
  .fx-sheet-apply { width: 100%; height: 2.8rem; }
  body.fx-sheet-lock { overflow: hidden; }
}
@media (max-width: 1259px) and (prefers-reduced-motion: reduce) { .fx-panel, .fx-sheet-veil { transition: none; } }
/* ── phone */
@media (max-width: 768px) {
  .fx-toolbar { gap: .5rem; flex-wrap: wrap; }
  .fx-toolbar .fx-search { flex: 1 1 100%; order: 1; }
  .fx-add { order: 3; flex: 1; }
  .fx-filter-btn { order: 2; flex: 1; justify-content: center; }
  .fx-toolbar > #import-control-host { order: 4; flex: 1 1 100%; }
  .fx-toolbar > #import-control-host:empty { display: none; }
  .fx-summary { flex-wrap: wrap; }
  .fx-range { grid-template-columns: 1fr 1fr; }
  .fx-range .btn { grid-column: 1 / -1; }
}

/* ── the two product tables beside the panel. With the panel taking its column the table has about two thirds of the page, so the cells are a little tighter and the
      hover actions of the Products page (the variant and edit buttons, shown when the pointer is on the row) float over the end of the row instead of taking a column. */
.fx-filter-page .fx-table th, .fx-filter-page .fx-table td { padding-inline: .6rem; }
.fx-filter-page .fx-table th { white-space: normal; }
.fx-table.fx-row-actions > thead > tr > th:last-child { width: 0; padding-inline: 0; overflow: hidden; font-size: 0; color: transparent; }
.fx-table.fx-row-actions > tbody > tr.product-row > td:last-child { width: 0; padding: 0; position: relative; overflow: visible; }
.fx-table.fx-row-actions > tbody > tr.product-row > td:last-child .table-actions { position: absolute; inset-inline-end: .4rem; inset-block-start: 50%; transform: translateY(-50%); display: inline-flex; gap: .35rem; padding: .2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--shadow-float); z-index: 3; white-space: nowrap; }

/* ── phone: each row of the two tables folds into a card (the name above, then each figure with its own label) */
@media (max-width: 768px) {
  .fx-filter-page .table-wrapper { overflow: visible; }
  .fx-filter-page .fx-table > thead { display: none; }
  .fx-filter-page .fx-table, .fx-filter-page .fx-table > tbody { display: block; }
  .fx-filter-page .fx-table > tbody > tr.product-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; padding: .75rem .9rem; border-block-end: 1px solid var(--line); }
  .fx-filter-page .fx-table > tbody > tr.product-row > td { display: block; padding: 0; border: 0; white-space: normal; text-align: start; }
  .fx-filter-page .fx-table > tbody > tr.product-row > td:first-child { grid-column: 1 / -1; }
  .fx-filter-page .fx-table > tbody > tr.product-row > td[data-label]:not(:first-child)::before { content: attr(data-label) ': '; font-size: .7rem; color: var(--text-muted); font-weight: 600; }
  .fx-filter-page .fx-table > tbody > tr.product-row > td.text-center, .fx-filter-page .fx-table > tbody > tr.product-row > td.text-end { white-space: nowrap; }
  .fx-filter-page .fx-table.fx-row-actions > tbody > tr.product-row > td:last-child { grid-column: 1 / -1; width: auto; }
  .fx-filter-page .fx-table.fx-row-actions > tbody > tr.product-row > td:last-child .table-actions { position: static; transform: none; box-shadow: none; border: 0; padding: .25rem 0 0; background: transparent; }
  .fx-filter-page .fx-table > tbody > tr:not(.product-row), .fx-filter-page .fx-table > tbody > tr:not(.product-row) > td { display: block; }
  .fx-filter-page .fx-table > tbody > tr.product-row > td.fx-td-last { grid-column: 1 / -1; }
  .fx-filter-page .variant-matrix-wrapper, .fx-filter-page .matrix-card .table-wrapper { overflow-x: auto; }
}

/* ── S5: suggestions while typing. The till's list (the dropdown the till always had, now drawn as the approved mockup draws it) and the top bar's dialog. */
.fx-tag { display: inline-flex; align-items: center; margin-inline-start: .5rem; padding: 0 .4rem; border: 1px solid var(--brand); border-radius: 2px; font-size: .66rem; font-weight: 700; color: var(--brand); line-height: 1.55; vertical-align: middle; white-space: nowrap; }
.fx-size { display: inline-flex; align-items: center; padding: 0 .4rem; border: 1px solid var(--line); border-radius: 2px; font-size: .7rem; font-weight: 600; color: var(--muted); background: var(--sunken); line-height: 1.5; }
.fx-keys kbd, kbd.fx-kbd { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.4rem; block-size: 1.4rem; padding: 0 .3rem; border: 1px solid var(--line); border-block-end-width: 2px; border-radius: 2px; background: var(--sunken); color: var(--muted); font: 600 .66rem 'Cairo', sans-serif; }
.fx-keys kbd i { font-size: .6rem; }
.fx-keys { display: flex; align-items: center; gap: 1.1rem; padding: .5rem .9rem; border-block-start: 1px solid var(--line); background: var(--surface); font-size: .72rem; color: var(--muted); }
.fx-keys > span { display: inline-flex; align-items: center; gap: .35rem; }
.fx-info-inline { margin-inline-start: auto; }

.pos-search-field { position: relative; flex: 1; min-width: 0; }
.search-dropdown.fx-sug { inset-inline-start: 0; inset-inline-end: auto; inline-size: max(100%, 31rem); max-inline-size: calc(calc(100 * var(--vw)) - 2rem); max-height: none; overflow: visible; background: var(--surface); box-shadow: var(--shadow-float); }
.search-dropdown.fx-sug.hidden { display: none; }
.fx-sug-note { display: flex; align-items: center; gap: .6rem; padding-block: .5rem; padding-inline: .9rem .55rem; background: var(--surface); border-block-end: 1px solid var(--line); font-size: .8rem; color: var(--muted); border-radius: 2px 2px 0 0; }
.fx-sug-note > span:not(.fx-info-inline) { flex: 1; }
.fx-sug-note.is-dym { color: var(--text); font-weight: 600; border-inline-start: 3px solid var(--brand); }
.fx-sug-note.is-dym > i { color: var(--brand); }
.fx-sug-list { max-height: 21rem; overflow-y: auto; scrollbar-width: thin; padding: 4px; }
.search-item.fx-sug-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .55rem .75rem; border-radius: 2px; border-block-end: 0; cursor: pointer; }
.fx-sug-item + .fx-sug-item { border-block-start: 1px solid var(--line); }
.search-item.fx-sug-item.is-keyboard-selected, .search-item.fx-sug-item.is-keyboard-selected:hover { background: var(--tint); outline: 0; }
.fx-sug-item.is-keyboard-selected::before { content: ''; position: absolute; inset-block: 8px; inset-inline-start: 0; inline-size: 3px; border-radius: 2px; background: var(--brand); }
.fx-sug-item.is-keyboard-selected mark { background-color: rgba(var(--accent-rgb), .26) !important; }
.fx-sug-name { font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.fx-sug-meta { display: flex; align-items: center; gap: .5rem; margin-top: .2rem; font-size: .76rem; color: var(--muted); min-width: 0; flex-wrap: wrap; }
.fx-sug-end { text-align: end; display: flex; flex-direction: column; gap: 1px; }
.fx-sug-price { font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.fx-sug-stock { font-size: .72rem; color: var(--muted); }
.fx-sug-empty { padding: 1.1rem 1rem; text-align: center; font-weight: 700; font-size: .88rem; }
.fx-sug-empty-h { font-weight: 500; font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.search-dropdown.fx-sug .fx-keys { border-radius: 0 0 2px 2px; }

/* the top bar's dialog: the (i) beside the close button, the line that says what was searched for, the price at the end of a product, the keys at the foot */
.fx-info-gs { margin-inline-start: 0; }
.global-search-input-shell .fx-info-gs { inline-size: 1.7rem; block-size: 1.7rem; font-size: .9rem; }
.fx-gs-dym { display: flex; align-items: center; gap: .6rem; margin: .15rem .15rem .35rem; padding: .55rem .75rem; background: var(--surface); border: 1px solid var(--line); border-inline-start: 3px solid var(--brand); border-radius: 2px; font-size: .82rem; font-weight: 600; color: var(--text); }
.fx-gs-dym > i { color: var(--brand); }
.fx-gs-end { display: inline-flex; align-items: center; gap: .8rem; }
.fx-gs-price { font-size: .8rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.global-search-result-title .fx-tag { vertical-align: middle; }
.global-search-result-subtitle .fx-code { font-size: inherit; color: inherit; }
.fx-gs-foot { border: 1px solid var(--line); border-radius: 2px; }
.global-search-actions .global-search-view-more { font-weight: 700; }
@media (max-width: 768px) {
  .fx-keys { display: none; }
  .search-dropdown.fx-sug { inline-size: 100%; }
  .search-item.fx-sug-item { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .fx-sug-end { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .fx-sug-list { max-height: calc(50 * var(--vh)); }
  .fx-gs-price { display: none; }
  /* the till's search row stacks, so the list can use the whole width */
  .pos-search-bar { flex-wrap: wrap; }
  .pos-search-bar > .pos-search-field { flex: 1 1 100%; }
  .pos-search-bar > #pos-quick-add-btn { flex: 1 1 100%; }
}

/* ═══ END OF SPEC 048: SMARTER SEARCH ═══ */

/* ═══ THE CHART LOOK (TASK-2026-164) ═══════════════════════════════════════════════════════════════════════════════════════════
   One look for every chart in the app, from the owner's approved chart style spec (scratch/seller-filter.html, version 2). static/js/chart_style.js
   reads these tokens (never a colour of its own) and reads them again when the look changes. Series: chart-1, the hovered mark chart-1-hi,
   the comparison line chart-ref; chart-2 and chart-3 are the second and third line of a chart that has them (profit, expenses): the blue and the purple the trio
   was validated with (dataviz validator, 2026-10-14: colour-blind separation 9.2 and 12.0, normal-vision 15.3 and 19.3; the brand teal itself is
   below the validator's chroma floor, which the approved spec accepts, so every line is also named and legend-keyed). */
:root {
  --chart-1: #2C6B78;
  --chart-1-hi: #034959;
  --chart-ref: #7E888B;
  --chart-2: #3F5FD0;
  --chart-3: #A84F9B;
  --chart-grid: #D0DADD;
  --chart-zero: #B5C1C5;
  --chart-label: #4F595C;
  --chart-text: var(--text-primary);
  --chart-surface: var(--bg-card);
  --chart-surface-line: var(--chart-zero);
  --chart-card: var(--bg-card);
  --chart-track: var(--bg-tertiary);
  --chart-shadow: var(--shadow-float, var(--shadow-lg));
  --chart-good: var(--color-success);
  --chart-bad: var(--color-danger);
  --chart-warn: var(--color-warning);
}
html[data-theme="retailpower-dark"] {
  --chart-1: #63B6C9;
  --chart-1-hi: #B8E1EC;
  --chart-ref: #A9B3B6;
  --chart-grid: #222A2D;
  --chart-zero: #343C3F;
  --chart-label: #A9B3B6;
  --chart-2: #6A62D0;
  --chart-3: #CC5F93;
}
.rp-chart:focus-visible { outline: var(--focus-width, 1px) solid var(--focus, var(--brand)); outline-offset: 0; }
.rp-chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 0 0; font-size: .8571rem; color: var(--chart-label); }
.rp-chart-key { display: inline-flex; align-items: center; gap: 6px; }
.rp-chart-sw { --sw: currentColor; display: inline-block; flex: none; }
.rp-chart-sw.is-square { width: 8px; height: 8px; background: var(--sw); border-radius: var(--radius); }
.rp-chart-sw.is-line { width: 14px; height: 0; border-top: 2px solid var(--sw); }
.rp-chart-sw.is-ref { width: 14px; height: 0; border-top: 2px dashed var(--sw); }
.rp-chart-tip { font-size: 14px; line-height: 1.5; white-space: nowrap; color: var(--chart-text); }
.rp-chart-tip-head { color: var(--chart-label); font-size: 12px; }
.rp-chart-tip-row { display: flex; align-items: center; gap: 6px; }
.rp-chart-tip-row b { margin-inline-start: auto; padding-inline-start: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-chart-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--chart-label); font-size: .8571rem; }
.rp-chart-table { margin-top: 8px; max-height: 280px; overflow: auto; border: 1px solid var(--chart-grid); }
.rp-chart-data { width: 100%; border-collapse: collapse; }
.rp-chart-data th,
.rp-chart-data td { padding: 6px 10px; text-align: start; border-bottom: 1px solid var(--chart-grid); white-space: nowrap; }
.rp-chart-data th { color: var(--chart-label); font-weight: 400; }
.rp-chart-data .rp-chart-num { text-align: end; font-variant-numeric: tabular-nums; }
.rp-chart-plot { position: relative; height: 220px; margin-top: 12px; }
.rp-chart-card-body { padding: 0 var(--pad, 20px) 12px; }

/* ── The Dashboard centred on a salesperson (TASK-2026-164 part 3) ────────────────────────────────────────────────────────────────────
   The note that says the shop's cards are hidden, the three cards of the person, and their bars. Tokens only, logical sides, nothing toggled with
   `hidden`. The bars are the chart look's: 12px on a track, the series colour from the inline-start edge, the comparison grey. */
.seller-hide-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 16px; padding-inline: 4px; color: var(--muted); font-size: .85rem; }
.seller-hide-ic { display: inline-flex; color: var(--text-muted); }
.seller-hide-ic svg { width: 16px; height: 16px; }
.seller-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.seller-card { min-width: 0; margin: 0; }
.seller-big { font-size: 1.7rem; font-weight: 800; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; }
.seller-sub { margin-top: 4px; color: var(--text-muted); font-size: .8rem; }
.seller-num { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.seller-kv { margin: 12px 0 0; display: grid; }
.seller-kv > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-block: 8px; border-top: 1px solid var(--chart-grid); }
.seller-kv dt { min-width: 0; color: var(--muted); }
.seller-kv dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.seller-hbar { display: block; height: 12px; background: var(--chart-track); border-radius: var(--radius); overflow: hidden; }
.seller-hbar > span { display: block; height: 100%; background: var(--chart-1); border-radius: var(--radius); }
.seller-hbar.is-ref > span { background: var(--chart-ref); }
.seller-share-bar { margin-top: 12px; }
.seller-hrow { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 10px; font-size: .85rem; }
.seller-hrow-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.seller-hrow-value { text-align: end; font-variant-numeric: tabular-nums; }
.seller-cmp + .seller-cmp { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--chart-grid); }
.seller-cmp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; font-size: .85rem; }
.seller-cmp-label { font-weight: 700; font-size: .95rem; }
.seller-delta { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
.seller-rank { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; }
.seller-rank svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
@media (max-width: 1100px) { .seller-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .seller-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* ── The four money cards of the Dashboard (TASK-2026-164 part 4) ─────────────────────────────────────────────────────────────────────
   Payment mix, refunds and discounts, expenses, cash drawer (static/js/dashboard_money_cards.js; the owner-approved mockup scratch/seller-filter.html v2).
   Tokens only, logical sides, nothing toggled with `hidden`. The bars are the salesperson cards' (`.seller-hbar`): 12px on a track, from the inline-start edge. */
.mc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.mc-grid--full { grid-template-columns: minmax(0, 1fr); }
.mc-card { min-width: 0; margin: 0; }
.mc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mc-list-spaced { margin-top: 16px; }
.mc-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.mc-row-head > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 4px; color: var(--text-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.mc-big { font-size: 1.7rem; font-weight: 800; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-note { margin: 16px 0 0; color: var(--text-muted); font-size: .85rem; }
.mc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--chart-grid); }
.mc-tile { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 16px 20px 18px; background: var(--surface); }
.mc-tile-l { color: var(--muted); font-size: .85rem; }
.mc-tile-v { font-size: 1.45rem; font-weight: 800; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-tile-s { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--text-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.mc-foot { margin: 0; padding: 12px 20px; border-top: 1px solid var(--chart-grid); color: var(--text-muted); font-size: .85rem; }
@media (max-width: 768px) {
  .mc-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mc-tile { padding: 12px 12px 14px; }
  .mc-tile-v { font-size: 1.15rem; }
  .mc-big { font-size: 1.45rem; }
  .mc-foot { padding-inline: 16px; }
}

/* ═══════════════════════════════════════════════════ SPEC 017: THE FIRST-DAY SETUP WIZARD (TASK-2026-082)
   Ported from the approved version 2 mockups (scratch/mockups/017-v2-brand.css, owner 2026-10-04). Every class is setup-* or sample-*; nothing else is restyled. */
html[data-theme="retailpower"] {
  --rp-fill: #2C6B78; --rp-fill-hover: #21525C; --rp-well: #F9F8F6; --rp-tint: #EEF7F8; --rp-rule: #C7E3E7;
  --rp-veil: rgba(29, 45, 62, 0.34); --rp-paper-shadow: 0 1px 2px rgba(29, 45, 62, 0.06), 0 12px 32px rgba(29, 45, 62, 0.10);
  --sample-bg: #FBF3E6; --sample-rule: #E9CFA6; --sample-ink: #7A4A0B;
}
html[data-theme="retailpower-dark"] {
  --rp-fill: #2C6B78; --rp-fill-hover: #327C8C; --rp-well: var(--bg-secondary); --rp-tint: rgba(80, 180, 191, 0.08); --rp-rule: rgba(80, 180, 191, 0.28);
  --rp-veil: rgba(0, 0, 0, 0.55); --rp-paper-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 36px rgba(0, 0, 0, 0.45);
  --sample-bg: #33291C; --sample-rule: #5A4526; --sample-ink: #F0C27E;
}
/* the other themes have no brand tokens: the setup rules fall back to the app's own */
:root { --rp-fill: var(--accent-gold, #2C6B78); --rp-fill-hover: var(--accent-gold, #21525C); --rp-well: var(--bg-secondary, #F9F8F6); --rp-tint: var(--accent-gold-bg, #EEF7F8);
  --rp-rule: var(--border-color, #C7E3E7); --rp-veil: rgba(0, 0, 0, 0.45); --rp-paper-shadow: var(--shadow-md, none);
  --sample-bg: #FBF3E6; --sample-rule: #E9CFA6; --sample-ink: #7A4A0B; }

.setup-page, .setup-check { container: rp / inline-size; }
.setup-page { max-width: 1240px; margin-inline: auto; padding: 28px 32px 64px; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; font-size: 14px; }
.setup-page > * { flex: none; min-width: 0; }
.setup-h1 { margin: 0; font-size: 22px; line-height: 1.4; font-weight: 700; color: var(--text); }
.setup-panel { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; min-width: 0; }
.setup-corner { position: absolute; top: 14px; inset-inline-end: 14px; }
.setup-tipwrap { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
.setup-bag { width: 28px; height: 32px; flex: none; color: var(--text-muted); }
.setup-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; border: 1px solid var(--line);
  border-inline-start: 3px solid var(--brand); border-radius: 2px; background: var(--rp-well); }
.setup-notice > i { margin-top: 5px; color: var(--brand); }
.setup-notice b { font-size: 14px; color: var(--text); }
.setup-notice p { grid-column: 2; margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--muted); }
.setup-notice .setup-notice-act { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.setup-notice.is-bad { border-inline-start-color: var(--danger); background: var(--danger-tint); }
.setup-notice.is-bad > i { color: var(--danger); }
.setup-notice.is-ok { border-inline-start-color: var(--success); background: var(--success-tint); }
.setup-notice.is-ok > i { color: var(--success); }
.setup-x { margin-inline-start: auto; inline-size: 32px; block-size: 32px; border: 0; background: none; color: var(--text-muted); cursor: pointer; border-radius: 2px; font-size: 15px; }
.setup-x:hover { background: var(--tint); color: var(--text); }
.setup-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.setup-table th { text-transform: none; letter-spacing: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 10px 16px;
  border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; }
.setup-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle; white-space: nowrap; }
.setup-table tbody tr:last-child td { border-bottom: 0; }
.setup-table .is-end { text-align: end; }
.setup-n { font-family: 'Outfit', 'Cairo', sans-serif; font-variant-numeric: tabular-nums; }
.setup-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ═══════════════ setup-*: the wizard ═══════════════ */
.setup-page { max-width: 1240px; }
.setup-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.setup-head .setup-h1 { margin-inline-end: auto; }
.setup-head-count { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.setup-body { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 28px; align-items: start; }

/* the rail: the six steps on the reading-start side */
.setup-rail { list-style: none; margin: 0; padding: 0; position: relative; }
.setup-rail li { position: relative; }
/* the line that joins the markers: a layout line, so it sits on the logical side */
.setup-rail li + li::before { content: ""; position: absolute; inset-inline-start: 25px; inset-block-start: -10px; block-size: 20px; inline-size: 2px; background: var(--line); }
.setup-rail li.is-done + li::before { background: var(--brand); }
.setup-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 2px 14px; inline-size: 100%; padding: 10px 12px; margin: 0 0 4px;
  border: 0; border-radius: 2px; background: none; font: inherit; text-align: start; color: var(--muted); cursor: pointer; }
.setup-step:hover { background: var(--tint); color: var(--text); }
.setup-step:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.setup-step[aria-current="step"] { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.setup-step-l { font-size: 14px; font-weight: 600; line-height: 1.6; padding-top: 2px; }
.setup-step[aria-current="step"] .setup-step-l { font-weight: 700; }
.setup-step-s { grid-column: 2; font-size: 12.5px; line-height: 1.4; }
.setup-step-s.is-skip { color: var(--warning); }
.setup-mark { inline-size: 28px; block-size: 28px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
  font-family: 'Outfit', 'Cairo', sans-serif; font-size: 13px; font-weight: 600; border: 1.5px solid var(--line); background: var(--bg); color: var(--muted); }
.setup-mark.is-current { border: 2px solid var(--brand); color: var(--brand); background: var(--surface); }
.setup-mark.is-done { border-color: var(--fill); background: var(--fill); color: #fff; font-size: 12px; }
.setup-mark.is-skip { border-style: dashed; border-color: var(--warning); color: var(--warning); }

/* the step card */
.setup-card { padding: 0; container-type: inline-size; container-name: card; }
.setup-card-h { display: flex; align-items: flex-start; gap: 12px; padding: 22px 28px 18px; padding-inline-end: 16px; border-bottom: 1px solid var(--line); }
.setup-card-h > div:first-child { min-width: 0; margin-inline-end: auto; }
.setup-card-n { display: block; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.setup-card-h h2 { margin: 2px 0 0; font-size: 19px; line-height: 1.45; font-weight: 700; color: var(--text); }
.setup-card-tools { display: flex; align-items: center; gap: 12px; flex: none; }
.setup-help { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--brand); text-decoration: none; white-space: nowrap; }
.setup-help:hover { text-decoration: underline; text-underline-offset: 3px; }
.setup-help:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.setup-card-b { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 28px; }
.setup-card-b > * { min-width: 0; }
.setup-card-f { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 28px; border-top: 1px solid var(--line); background: var(--rp-well); }
.setup-card-f .setup-f-end { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.setup-status { flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--danger); display: flex; align-items: center; gap: 8px; }
.setup-status:empty { display: none; }

/* sections and fields inside a step */
.setup-sec { display: flex; flex-direction: column; gap: 16px; }
.setup-sec + .setup-sec { padding-top: 28px; border-top: 1px solid var(--line); }
.setup-sec-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.setup-sec-h h3 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--text); margin-inline-end: auto; }
.setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.setup-grid .is-wide { grid-column: 1 / -1; }
.setup-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.setup-f > label, .setup-f > .setup-lab { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); margin: 0; text-transform: none; letter-spacing: normal; }
.setup-req { color: var(--danger); font-weight: 700; }
.setup-opt { font-weight: 400; color: var(--text-muted); font-size: 12.5px; }
.setup-in { block-size: 44px; inline-size: 100%; box-sizing: border-box; font: inherit; font-size: 14.5px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 2px; background: var(--surface); color: var(--text); min-width: 0; }
.setup-in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px transparent; }
.setup-in[readonly] { background: var(--surface); color: var(--muted); }
.setup-in.is-bad { border-color: var(--danger); }
.setup-in[dir="ltr"] { text-align: start; }
html[dir="rtl"] .setup-in[dir="ltr"] { text-align: right; }
.setup-err { margin: 0; font-size: 13px; color: var(--danger); display: flex; gap: 6px; align-items: center; }
.setup-hint { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.7; }
.setup-hint b { color: var(--text); }
.setup-read { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; background: var(--rp-well); border: 1px solid var(--line); border-radius: 2px; font-size: 13.5px; color: var(--muted); }
.setup-read b { color: var(--text); font-family: 'Outfit', 'Cairo', sans-serif; letter-spacing: .02em; }

/* the searchable list (combobox) */
.setup-combo { position: relative; }
.setup-combo .setup-in { padding-inline-end: 36px; }
.setup-combo > i { position: absolute; inset-inline-end: 12px; inset-block-start: 15px; font-size: 12px; color: var(--text-muted); pointer-events: none; }
.setup-combo-list { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: 4px 0; max-block-size: 232px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px; box-shadow: none; }
.setup-combo-list button { display: flex; justify-content: space-between; gap: 12px; inline-size: 100%; padding: 8px 14px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); text-align: start; cursor: pointer; }
.setup-combo-list button:hover, .setup-combo-list button[aria-selected="true"] { background: var(--tint); }
.setup-combo-list button span { color: var(--text-muted); font-size: 12.5px; }

/* tick chips: one per thing the shop sells, one per option value */
.setup-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-chip { display: inline-flex; align-items: center; gap: 8px; min-block-size: 38px; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 2px;
  background: var(--surface); color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; line-height: 1.4; }
.setup-chip:hover { border-color: var(--text-muted); color: var(--text); }
.setup-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.setup-chip i { font-size: 11px; inline-size: 12px; color: transparent; }
.setup-chip[aria-pressed="true"] { border-color: var(--brand); background: var(--tint); color: var(--text); font-weight: 600; }
.setup-chip[aria-pressed="true"] i { color: var(--brand); }
.setup-chip.is-new { border-style: dashed; }
.setup-chip.is-off { color: var(--text-muted); border-style: dashed; background: transparent; }
.setup-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.setup-kinds .setup-chip { justify-content: flex-start; }
.setup-chip.is-lg { min-block-size: 46px; padding: 0 18px; font-size: 14px; }
.setup-chip.is-add { color: var(--brand); border-style: dashed; }
.setup-chip.is-add i { color: var(--brand); }

/* the option lists of step 2 */
.setup-lists { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 2px; }
.setup-list { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px 24px; padding: 16px 18px; }
.setup-list + .setup-list { border-top: 1px solid var(--line); }
.setup-list-h { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.setup-list-h label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; line-height: 1.5; }
.setup-list-h small { display: block; font-weight: 400; font-size: 12.5px; color: var(--text-muted); }
.setup-list.is-off .setup-list-h label { color: var(--text-muted); }
.setup-cb { inline-size: 18px; block-size: 18px; margin: 2px 0 0; accent-color: var(--rp-fill); cursor: pointer; flex: none; }
.setup-list-tag { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.setup-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px 16px; margin-top: 4px; background: var(--rp-well); border: 1px solid var(--line); border-radius: 2px; }
.setup-range .setup-f { inline-size: 104px; }
.setup-range-prev { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--muted); }
.setup-range-prev bdi { padding: 2px 8px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--text); }

/* the summary before applying, the result after */
.setup-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 2px; background: var(--rp-well); }
.setup-sum-n { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--muted); }
.setup-sum-n b { font-size: 20px; font-family: 'Outfit', 'Cairo', sans-serif; color: var(--text); font-weight: 700; }
.setup-sum-x { margin-inline-start: auto; font-size: 13.5px; color: var(--success); display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* switches and yes / no */
.setup-rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 2px; }
.setup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 18px; min-block-size: 40px; }
.setup-row + .setup-row { border-top: 1px solid var(--line); }
.setup-row > .setup-seg, .setup-row > .setup-switch, .setup-row > .setup-row-s { margin-inline-start: auto; }
.setup-row-l { display: flex; align-items: center; gap: 12px; min-width: 0; margin-inline-end: auto; font-size: 14.5px; font-weight: 600; color: var(--text); }
.setup-row-l > i { inline-size: 20px; text-align: center; color: var(--text-muted); }
.setup-row-s { font-size: 13px; color: var(--muted); font-weight: 400; display: inline-flex; align-items: center; gap: 6px; }
.setup-switch { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.setup-switch-track { inline-size: 42px; block-size: 24px; box-sizing: border-box; border-radius: 12px; border: 1.5px solid var(--line); background: var(--sunken);
  display: flex; align-items: center; justify-content: flex-start; padding: 2px; }
.setup-switch-ball { inline-size: 17px; block-size: 17px; border-radius: 50%; background: var(--surface); box-shadow: none; }
.setup-switch[aria-checked="true"] .setup-switch-track { justify-content: flex-end; background: var(--fill); border-color: var(--fill); }
.setup-switch[aria-checked="true"] .setup-switch-ball { background: #fff; }
.setup-switch[aria-checked="true"] { color: var(--text); font-weight: 600; }
.setup-switch:disabled { cursor: not-allowed; opacity: .75; }
.setup-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 12px; }
.setup-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--surface); }
.setup-seg button { border: 0; background: none; padding: 0 18px; min-block-size: 38px; font: inherit; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.setup-seg button + button { border-inline-start: 1px solid var(--line); }
.setup-seg button[aria-checked="true"] { background: var(--fill); color: #fff; font-weight: 700; }
.setup-seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* the branch picker of steps that write per branch */
.setup-branch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border: 1px solid var(--rp-rule); background: var(--rp-tint); border-radius: 2px; }
.setup-branch label { font-size: 13.5px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
.setup-branch select { block-size: 40px; min-inline-size: 200px; max-inline-size: 100%; font: inherit; font-size: 14px; padding-block: 0; padding-inline: 10px 36px; border: 1px solid var(--line); border-radius: 2px; background-color: var(--surface); color: var(--text); }
.setup-branch .setup-branch-state { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.setup-branch .setup-tipwrap { margin-inline-start: auto; }

/* step 1: the form beside the live receipt */
.setup-split { display: grid; grid-template-columns: minmax(0, 1fr) 302px; gap: 28px; align-items: start; }
.setup-split > :first-child { container-type: inline-size; container-name: formcol; }
@container formcol (max-width: 460px) { .setup-grid { grid-template-columns: minmax(0, 1fr); } }
@container card (max-width: 660px) { .setup-split { grid-template-columns: minmax(0, 1fr); } .setup-preview { position: static; } }
@container card (max-width: 560px) { .setup-print { grid-template-columns: minmax(0, 1fr); } .setup-list { grid-template-columns: minmax(0, 1fr); } }
.setup-preview { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; }
.setup-preview-h { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.setup-preview-h .setup-tipwrap { margin-inline-start: auto; }
.setup-logo { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 2px; }
.setup-logo-box { inline-size: 56px; block-size: 56px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 2px; background: var(--rp-well); color: var(--text-muted); }
.setup-logo.is-off { background: var(--surface); }
.setup-logo-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13.5px; color: var(--muted); }
.setup-logo-t b { color: var(--text); font-size: 14px; }

/* the paper: receipts and labels are white in both themes */
.setup-paper { background: #fff; color: #111; box-shadow: var(--rp-paper-shadow); box-sizing: border-box; margin-inline: auto; font-family: 'Cairo', sans-serif; }
.setup-paper h4, .setup-paper b, .setup-paper strong, .setup-paper span, .setup-paper div { color: inherit; }
.setup-receipt { inline-size: 302px; padding: 18px 16px 20px; font-size: 12px; line-height: 1.55; }
.setup-receipt.is-58 { inline-size: 220px; font-size: 11px; padding: 14px 10px 16px; }
.setup-receipt.is-cut { clip-path: inset(0 0 0 0); position: relative; }
.setup-receipt-sample { display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0; padding: 3px 0; margin-bottom: 10px; border: 1px dashed #777; color: #444; }
.setup-receipt-logo { display: grid; place-items: center; margin: 0 auto 6px; inline-size: 44px; block-size: 44px; border: 1.5px solid #222; border-radius: 50%; font-weight: 800; font-size: 15px; }
.setup-receipt-mark { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 6px; font-size: 11px; font-weight: 700; color: #333; }
.setup-receipt-mark img { inline-size: 18px; block-size: 18px; }
.setup-receipt h4 { margin: 0; text-align: center; font-size: 15px; font-weight: 800; line-height: 1.4; }
.setup-receipt .setup-r-c { text-align: center; color: #333; }
.setup-receipt .setup-r-empty { color: #999; }
.setup-receipt hr { border: 0; border-top: 1px dashed #888; margin: 8px 0; }
.setup-r-line { display: flex; justify-content: space-between; gap: 10px; }
.setup-r-line span:first-child { min-width: 0; }
.setup-r-tot { display: flex; justify-content: space-between; font-weight: 800; font-size: 13.5px; }
.setup-r-meta { display: flex; justify-content: space-between; gap: 8px; color: #333; font-size: 11px; }
.setup-paper.is-flash { outline: 2px solid var(--brand); outline-offset: 4px; }

/* step 4: the print answer */
.setup-print { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 32px; align-items: start; }
.setup-print-q { display: flex; flex-direction: column; gap: 14px; }
.setup-answers { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-label { inline-size: 190px; block-size: 125px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; line-height: 1.3; }
.setup-label b { font-size: 11px; }
.setup-bars { display: block; block-size: 40px; inline-size: 100%; }
.setup-skipline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px; background: var(--rp-well); font-size: 14px; color: var(--muted); }
.setup-skipline b { color: var(--text); margin-inline-end: auto; }

/* step 5: logins */
.setup-allow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.setup-allow-n { font-size: 15px; color: var(--muted); }
.setup-allow-n b { font-size: 22px; font-family: 'Outfit', 'Cairo', sans-serif; color: var(--text); }
.setup-slots { display: inline-flex; gap: 4px; }
.setup-slots i { inline-size: 12px; block-size: 22px; border-radius: 2px; border: 1.5px solid var(--line); box-sizing: border-box; }
.setup-slots i.is-on { background: var(--fill); border-color: var(--fill); }
.setup-pw { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; align-items: center; padding: 18px 20px; border: 1px solid var(--rp-rule); background: var(--rp-tint); border-radius: 2px; }
.setup-pw dt { font-size: 13px; color: var(--muted); margin: 0; }
.setup-pw dd { margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.setup-pw dd b { font-family: 'Outfit', 'Cairo', sans-serif; font-size: 17px; letter-spacing: .03em; color: var(--text); }
.setup-wa { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); font-size: 13.5px; line-height: 1.9; color: var(--text); white-space: pre-line; }

/* step 6: the three ways in */
.setup-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.setup-way { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); min-width: 0; }
.setup-way h3 { margin: 0; padding-inline-end: 32px; font-size: 16px; line-height: 1.5; font-weight: 700; color: var(--text); }
.setup-way-ico { color: var(--brand); font-size: 18px; }
.setup-way .btn { align-self: flex-start; margin-top: auto; }
.setup-way.is-off { background: var(--surface); }
.setup-way.is-off h3 { color: var(--muted); }
.setup-way-why { margin: 0; font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.setup-contains { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; font-size: 13.5px; }
.setup-contains dt { color: var(--muted); margin: 0; }
.setup-contains dd { margin: 0; text-align: end; color: var(--text); font-weight: 600; }
.setup-soon { display: inline-flex; align-self: flex-start; font-size: 12px; font-weight: 700; padding: 2px 10px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); }

/* ═══════════════ the checklist card (dashboard, welcome) ═══════════════ */
.setup-check { padding: 0; }
.setup-check-h { display: flex; align-items: center; gap: 18px; padding: 20px 24px; padding-inline-end: 52px; }
.setup-check-h h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.setup-check-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-inline-end: auto; }
.setup-check-t span { font-size: 13.5px; color: var(--muted); }
.setup-ring { inline-size: 56px; block-size: 56px; flex: none; }
.setup-ring .setup-ring-track { stroke: var(--line); }
.setup-ring .setup-ring-val { stroke: var(--brand); }
.setup-ring text { fill: var(--text); font-family: 'Outfit', 'Cairo', sans-serif; font-size: 15px; font-weight: 700; }
.setup-check-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setup-check-items li { display: flex; align-items: center; gap: 12px; padding: 13px 24px; border-bottom: 1px solid var(--line); min-width: 0; }
.setup-check-items li:nth-child(odd) { border-inline-end: 1px solid var(--line); }
.setup-check-items li:last-child { border-bottom: 0; }
.setup-check-items li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.setup-check-items .setup-mark { inline-size: 22px; block-size: 22px; font-size: 11px; }
.setup-ci-l { font-size: 14px; color: var(--text); margin-inline-end: auto; min-width: 0; }
.setup-ci-l.is-done { color: var(--muted); }
.setup-ci-s { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.setup-ci-skip { font-size: 12.5px; color: var(--warning); white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.setup-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.setup-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.setup-check-items li.is-next { background: var(--rp-tint); }
.setup-check-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 20px; padding-inline-end: 52px; }
.setup-check-bar b { font-size: 14.5px; }
.setup-check-bar .setup-ci-s { margin-inline-end: auto; font-size: 13.5px; color: var(--muted); }
.setup-check-bar .setup-ring { inline-size: 32px; block-size: 32px; }
.setup-ready { display: flex; align-items: center; gap: 16px; padding: 22px 24px; padding-inline-end: 52px; }
.setup-ready i.setup-ready-i { inline-size: 40px; block-size: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: #fff; font-size: 16px; flex: none; }
.setup-ready h2 { margin: 0; font-size: 17px; font-weight: 700; }
.setup-ready span { font-size: 13.5px; color: var(--muted); }

/* dashboard tiles, as the app's dash-tiles row */
.setup-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.setup-tile { padding: 18px 22px; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.setup-tile:last-child { border-inline-end: 0; }
.setup-tile small { font-size: 13px; color: var(--muted); }
.setup-tile b { font-size: 22px; font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 700; color: var(--text); }
.setup-tile.is-empty b { color: var(--text-muted); }
.setup-tile em { font-style: normal; font-size: 12.5px; color: var(--text-muted); }
.setup-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.setup-empty { display: flex; align-items: center; gap: 14px; padding: 28px 22px; font-size: 14px; color: var(--muted); }
.setup-empty .setup-bag { inline-size: 26px; block-size: 30px; }
.setup-period { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--surface); }
.setup-period button { border: 0; background: none; padding: 6px 14px; font: inherit; font-size: 13px; color: var(--muted); }
.setup-period button + button { border-inline-start: 1px solid var(--line); }
.setup-period button[aria-pressed="true"] { background: var(--tint); color: var(--brand); font-weight: 700; }

/* the 013 welcome screen, with the card in place of its three links */
.setup-welcome { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding: 30px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; }
.setup-welcome h1 { margin: 0; font-size: 26px; line-height: 1.4; font-weight: 800; }
.setup-welcome-trial { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.setup-welcome-trial b { color: var(--text); }
.setup-tag { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 2px; background: var(--rp-well); }
.setup-tag small { font-size: 12.5px; color: var(--muted); }
.setup-tag b { font-family: 'Outfit', 'Cairo', sans-serif; font-size: 20px; letter-spacing: .04em; }
.setup-sell { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 18px 24px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); }
.setup-sell .setup-way-why { margin-inline-end: auto; }

/* settings → general: where the checklist lives afterwards */
.setup-setlist { list-style: none; margin: 0; padding: 0; }
.setup-setlist li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.setup-setlist li:last-child { border-bottom: 0; }
.setup-setlist li > span { font-size: 14px; font-weight: 600; margin-inline-end: auto; }
.setup-setlist li > em { font-style: normal; font-size: 13px; color: var(--muted); }
.setup-setlist li.is-here { background: var(--rp-tint); border-inline-start: 3px solid var(--brand); }

/* the sidebar while setup is unfinished */
.setup-nav-count { margin-inline-start: auto; font-size: 11.5px; font-family: 'Outfit', 'Cairo', sans-serif; padding: 0 7px; border-radius: 2px; background: var(--tint); color: var(--brand); font-weight: 700; line-height: 1.6; }
.sidebar .nav-item.setup-nav { display: flex; align-items: center; }
.sidebar .nav-item.setup-nav.active { color: var(--brand); }

/* ═══════════════ sample-*: the sample shop ═══════════════ */
.sample-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 32px; background: var(--sample-bg); border-bottom: 1px solid var(--sample-rule); color: var(--sample-ink); font-size: 14px; }
.sample-strip .setup-bag { inline-size: 18px; block-size: 21px; color: var(--sample-ink); }
.sample-strip b { font-weight: 700; }
.sample-strip span { margin-inline-end: auto; min-width: 0; }
.sample-strip .btn { background: var(--surface); }
.sample-badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 2px; border: 1px solid var(--sample-rule); background: var(--sample-bg); color: var(--sample-ink); white-space: nowrap; line-height: 1.6; }
.sample-incl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sample-ink); background: var(--sample-bg); border: 1px solid var(--sample-rule); padding: 3px 10px; border-radius: 2px; }
.sample-counts { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--line); border-radius: 2px; }
.sample-counts dt, .sample-counts dd { margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.sample-counts dd { text-align: end; font-weight: 700; }
.sample-counts dt:nth-last-of-type(1), .sample-counts dd:last-child { border-bottom: 0; }
.sample-docs { margin: 0; padding-inline-start: 18px; font-size: 13.5px; line-height: 1.9; }

/* the till, drawn quietly (pos.js today) */
.setup-pos { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.setup-pos-l, .setup-pos-r { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.setup-pos-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; block-size: 46px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--text-muted); font-size: 14px; }
.setup-cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 18px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.setup-cart-line:last-child { border-bottom: 0; }
.setup-cart-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setup-cart-n b { font-size: 14.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.setup-cart-n small { font-size: 12.5px; color: var(--muted); }
.setup-qty { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.setup-tot { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.setup-tot-l { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); }
.setup-tot-g { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 700; }
.setup-tot-g b { font-size: 24px; }
.setup-pay { display: flex; flex-direction: column; gap: 12px; }
.setup-pay-block { padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px; background: var(--rp-well); display: flex; flex-direction: column; gap: 10px; }
.setup-pay-block-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.setup-pay-block-h i { color: var(--text-muted); inline-size: 18px; }
.setup-pay-block-h .setup-pay-q { margin-inline-start: auto; display: flex; gap: 6px; }
.setup-pay-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px; }
.setup-pay-sum small { display: block; font-size: 12.5px; color: var(--muted); }
.setup-pay-sum b { font-size: 22px; }
@container (max-width: 440px) { .setup-pay-sum { grid-template-columns: minmax(0, 1fr); } .setup-pay-block-h .setup-pay-q { margin-inline-start: 0; inline-size: 100%; } }
.setup-pay-why { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--sample-ink); background: var(--sample-bg); border: 1px solid var(--sample-rule); padding: 10px 12px; border-radius: 2px; }
.setup-pay-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; inline-size: 100%; }
.setup-pay-foot .btn { flex: 1 1 140px; justify-content: center; }
.setup-pay-foot .setup-pay-why { flex-basis: 100%; }

/* ─────────────── narrow screens (the page's own width, never the window's) ─────────────── */
@container rp (max-width: 1060px) {
  .setup-pos { grid-template-columns: minmax(0, 1fr); }
}
@container rp (max-width: 900px) {
  .setup-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* the rail runs across the top: the markers in a row, the current step's name under them */
  .setup-rail { display: flex; justify-content: space-between; gap: 0; padding: 4px 2px 0; }
  .setup-rail li { flex: 1 1 0; display: flex; justify-content: center; }
  .setup-rail li + li::before { inset-block-start: 17px; inset-inline-start: calc(-50% + 18px); inline-size: calc(100% - 36px); block-size: 2px; }
  .setup-step { display: flex; justify-content: center; inline-size: auto; padding: 4px; margin: 0; }
  .setup-step[aria-current="step"] { box-shadow: none; background: none; }
  .setup-step .setup-step-l, .setup-step .setup-step-s { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .setup-mark { inline-size: 32px; block-size: 32px; }
  .setup-ways { grid-template-columns: minmax(0, 1fr); }
  .setup-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-tile:nth-child(2) { border-inline-end: 0; }
  .setup-tile:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .setup-two { grid-template-columns: minmax(0, 1fr); }
  .setup-check-items { grid-template-columns: minmax(0, 1fr); }
  .setup-check-items li:nth-child(odd) { border-inline-end: 0; }
  .setup-check-items li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }
}
@container rp (max-width: 600px) {
  .setup-h1 { font-size: 19px; }
  .setup-card-h { padding: 18px 18px 14px; padding-inline-end: 12px; flex-wrap: wrap; }
  .setup-card-b { padding: 20px 18px 24px; gap: 24px; }
  .setup-card-f { padding: 14px 18px; }
  .setup-card-f .setup-f-end { margin-inline-start: 0; inline-size: 100%; }
  .setup-card-f .btn { flex: 1 1 auto; justify-content: center; }
  .setup-card-f .btn-primary { order: -1; flex-basis: 100%; }
  .setup-card-f > .btn { order: 2; }
  .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .setup-list { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .setup-print { grid-template-columns: minmax(0, 1fr); }
  .setup-pw { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .setup-pw dd + dt { margin-top: 10px; }
  .setup-check-h { padding: 16px 18px; padding-inline-end: 48px; gap: 14px; }
  .setup-check-items li { padding: 12px 18px; }
  .setup-check-h .setup-btn-t { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .setup-check-bar { padding: 12px 16px; padding-inline-end: 48px; }
  .setup-check-bar .btn { flex-basis: 100%; justify-content: center; }
  .setup-welcome { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .setup-welcome h1 { font-size: 21px; }
  .sample-strip { padding: 10px 16px; }
  .setup-sum-x { margin-inline-start: 0; }
  .setup-branch select { min-inline-size: 0; inline-size: 100%; }
  .setup-branch .setup-tipwrap { margin-inline-start: 0; }
  .setup-dlg .modal-header, .setup-dlg .modal-body, .setup-dlg .modal-footer { padding-inline: 18px; }
  .setup-dlg .modal-footer .btn { flex: 1 1 auto; justify-content: center; }
}


/* ═══════════════ version 2: three steps, the optional items, the Team step's five fields ═══════════════ */

/* the three steps across the top: one bar of three cells; the current one carries a line on its top edge */
.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px; }
.setup-steps li { min-width: 0; }
.setup-steps li + li { border-inline-start: 1px solid var(--line); }
.setup-steps-b { display: flex; align-items: center; gap: 14px; inline-size: 100%; block-size: 100%; box-sizing: border-box; padding: 16px 20px; border: 0; background: none;
  font: inherit; text-align: start; color: var(--muted); cursor: pointer; }
.setup-steps-b:hover { background: var(--tint); }
.setup-steps-b:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.setup-steps li.is-cur .setup-steps-b { box-shadow: inset 0 3px 0 var(--brand); color: var(--text); }
.setup-steps-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setup-steps-t b { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.5; }
.setup-steps-t small { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.setup-steps-t small.is-skip { color: var(--warning); }

/* step 1 */
.setup-form { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.setup-read-sep { inline-size: 1px; block-size: 16px; background: var(--line); margin-inline: 4px; }
.setup-read .setup-tipwrap { margin-inline-start: auto; }
.setup-read .setup-code { font-family: 'Outfit', 'Cairo', sans-serif; }
.setup-f > .setup-lab .setup-tipwrap { margin-inline-start: auto; }
.setup-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-kinds.is-bad .setup-chip { border-color: var(--danger); }
.setup-combo-none { display: block; padding: 8px 14px; }
.setup-logo .btn { margin-inline-start: auto; }
.setup-logo-l { font-size: 20px; color: var(--text); }
.setup-rest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.setup-rest-l { font-size: 13.5px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.setup-rest .setup-link { margin-inline-start: auto; }

/* step 2 */
.setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.setup-pwrow { display: flex; gap: 8px; min-width: 0; }
.setup-pwrow .setup-in { flex: 1 1 auto; }
.setup-pwrow .btn { flex: none; white-space: nowrap; }
.setup-in-pw, .setup-pw-v { font-family: 'Outfit', 'Cairo', sans-serif; letter-spacing: .04em; }
.setup-in-pin { letter-spacing: .4em; text-align: center !important; font-size: 18px; }
.setup-in:disabled { background: var(--surface); color: var(--text-muted); cursor: not-allowed; }
.setup-notice-i { grid-column: 2; }
.setup-sec-h .setup-allow { margin-inline-start: auto; }
.setup-later { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; padding: 18px 20px;
  border: 1px solid var(--rp-rule); border-inline-start: 3px solid var(--rp-fill); background: var(--rp-tint); border-radius: 2px; }
.setup-later-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.setup-later-h > i { color: var(--rp-fill); }
html[data-theme="retailpower-dark"] .setup-later-h > i { color: var(--brand); }
.setup-later-h b { font-size: 14.5px; color: var(--text); line-height: 1.6; }
.setup-later-h .setup-tipwrap { margin-inline-start: 4px; }
.setup-later-tags { grid-column: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.setup-later-tags li { font-size: 12.5px; line-height: 1.6; padding: 2px 10px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--muted); }
.setup-later-tags li.is-more { border-style: dashed; color: var(--text-muted); }
.setup-later > .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
.setup-dlg-i { margin-inline-start: auto; }
.setup-dlg-i + .setup-x { margin-inline-start: 4px; }
.setup-link-start { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; }

/* step 3 */
.setup-way-acts { margin-top: auto; }
.setup-way-acts .btn { margin-top: 0; }
.setup-dd-quiet { font-weight: 400; }
.setup-freeline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--line); background: var(--rp-well); border-radius: 2px; font-size: 14px; }
.setup-freeline > i { color: var(--text-muted); }
.setup-sumline { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--muted); }
.setup-sumline b { color: var(--text); }
.setup-table td.setup-td-wrap { white-space: normal; min-width: 180px; }

/* the optional items' dialogs */
.setup-print-paper { min-width: 0; }
.setup-foot-why { flex-basis: 100%; margin: 0; order: 3; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.setup-split.is-dlg { grid-template-columns: minmax(0, 1fr) 302px; }
.setup-dlg .modal-body { container-type: inline-size; }
@container (max-width: 700px) { .setup-split.is-dlg { grid-template-columns: minmax(0, 1fr); } .setup-print { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 460px) { .setup-dlg .setup-grid { grid-template-columns: minmax(0, 1fr); } }
.setup-row-l .setup-tipwrap { margin-inline-start: 6px; }

/* the checklist card: the three steps, and the optional items beside them */
.setup-check-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-top: 1px solid var(--line); }
.setup-check-g { min-width: 0; }
.setup-check-g + .setup-check-g { border-inline-start: 1px solid var(--line); }
.setup-check-gh { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 24px 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.setup-check-gh .setup-tipwrap { margin-inline-start: auto; }
.setup-check-cols .setup-check-items { display: block; border-top: 0; }
.setup-check-cols .setup-check-items li { border-inline-end: 0 !important; border-bottom: 1px solid var(--line); }
.setup-check-cols .setup-check-items li:last-child { border-bottom: 0; }
.setup-check-items li.is-flash, .setup-opt-items li.is-flash { outline: 2px solid var(--brand); outline-offset: -2px; }
.setup-opt-items { list-style: none; margin: 0; padding: 0; }
.setup-opt-items li { display: flex; align-items: center; gap: 14px; padding: 12px 24px; border-bottom: 1px solid var(--line); min-width: 0; }
.setup-opt-items li:last-child { border-bottom: 0; }
.setup-opt-ico { inline-size: 32px; block-size: 32px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 2px; background: var(--rp-well); color: var(--muted); font-size: 13px; }
.setup-opt-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-inline-end: auto; }
.setup-opt-t b { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.5; }
.setup-opt-t small { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.setup-opt-tag { flex: none; font-size: 12px; line-height: 1.6; padding: 1px 8px; border-radius: 2px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.setup-opt-tag.is-done { border-color: transparent; color: var(--success); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.setup-opt-items .btn { flex: none; }


@container rp (max-width: 900px) {
  .setup-check-cols { grid-template-columns: minmax(0, 1fr); }
  .setup-check-g + .setup-check-g { border-inline-start: 0; border-top: 1px solid var(--line); }
}
@container rp (max-width: 600px) {
  .setup-steps-b { flex-direction: column; justify-content: flex-start; gap: 6px; padding: 12px 6px 10px; text-align: center; }
  .setup-steps-t { align-items: center; }
  .setup-steps-t b { font-size: 14px; }
  .setup-check-gh { padding: 12px 18px 4px; }
  .setup-opt-items li { padding: 12px 18px; flex-wrap: wrap; gap: 8px 12px; }
  .setup-opt-t { flex: 1 1 calc(100% - 46px); margin-inline-end: 0; }
  .setup-opt-items li .setup-opt-tag { margin-inline-start: 44px; }
  .setup-opt-items li .btn { margin-inline-start: auto; }
  .setup-later { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .setup-later > .btn { grid-column: 1; grid-row: auto; justify-self: start; }
  .setup-pwrow { flex-wrap: wrap; }
  .setup-pwrow .btn { flex: 1 1 100%; justify-content: center; }
  .setup-rest .setup-link { margin-inline-start: 0; flex-basis: 100%; text-align: start; }
}
@container (max-width: 480px) {
}
/* every field the same look: the app paints inputs and selects alike (bg-tertiary); .setup-in must not single out the select */
select.setup-in { background-color: var(--sunken); }
.setup-f > .setup-seg, .setup-f > .setup-answers { align-self: flex-start; }
.setup-opt-t small.is-done { color: var(--success); font-weight: 600; }
.setup-opt-ico.is-done { border-color: var(--fill); background: var(--fill); color: #fff; }
.setup-nav-count { margin-inline-start: auto; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 2px; background: var(--fill, var(--brand)); color: #fff; font-variant-numeric: tabular-nums; }
.setup-card-slot:empty { display: none; }
.setup-card-slot { margin-block-end: 16px; }
.setup-setlist-row[hidden] { display: none; }
.setup-setrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 0; border-block-end: 1px solid var(--line, var(--line)); inline-size: 100%; }
.setup-setrow-l { font-weight: 600; margin-inline-end: auto; }
.setup-setrow-v { font-style: normal; font-size: 0.85rem; color: var(--muted); }
.nav-item[data-setup-nav][hidden], [data-setup-nav-row]:has(> [data-setup-nav][hidden]) { display: none; }
.setup-muted { color: var(--text-muted); }
.setup-tablewrap { overflow-x: auto; min-width: 0; }
.setup-dt { white-space: nowrap; }
.form-group[data-tender][hidden] { display: none; }
.modal-card.setup-dlg { background: var(--surface); container-type: inline-size; --rp-field: 44px; box-shadow: var(--shadow-float); width: 100%; max-height: calc(calc(100 * var(--vh)) - 32px); overflow: auto; }
.setup-dlg.is-sm { max-width: 460px; }
.setup-dlg.is-md { max-width: 640px; }
.setup-dlg.is-lg { max-width: 920px; }
.setup-dlg .modal-header { padding: 18px 24px; gap: 12px; }
.setup-dlg .modal-header h3 { font-size: 17px; font-weight: 700; margin: 0; }
.setup-dlg .modal-body { padding: 20px 24px; font-size: 14px; display: flex; flex-direction: column; gap: 18px; }
.setup-dlg .modal-footer { padding: 16px 24px; gap: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; }

/* Spec 017 part B (TASK-2026-082): the sample shop's note beside page titles, the practice cart's reason, the strip's host. */
.sample-incl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 12px; }
.sample-incl-row:not(:has(.sample-incl)) { display: none; }
.setup-pay-why[hidden] { display: none; }
#sample-strip-host:empty { display: none; }
.setup-logo-img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.setup-rcpt-logo { display: block; margin: 8px auto; max-block-size: 48px; max-inline-size: 60%; object-fit: contain; }

/* ── subscription page as redrawn and approved on 2026-10-12 (spec 014 T044 and T076, mockup 2) ── begin
   Two tabs (Plan, Invoices); a plan card with its (i) in the top inline-end corner; the saved card; Usage and Billing details beside the Logins as rows;
   the Upgrade dialog is one table. Logical sides only; nothing here gives an explicit display to anything toggled with the hidden attribute. */
.sub-head {display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;}
.sub-head h2 {margin: 0; font-size: 1.35rem; font-weight: 700;}
.sub-tabs {display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line);}
.sub-tab {appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: 10px 18px; min-height: 44px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer;}
.sub-tab:hover {color: var(--text);}
.sub-tab[aria-selected="true"] {color: var(--sub-text); border-bottom-color: var(--sub-line);}
.sub-tab:focus-visible {outline: 2px solid var(--focus); outline-offset: -2px;}
.sub-stack {display: flex; flex-direction: column; gap: 16px; min-width: 0;}
.sub-stack > :empty {display: none;}
.sub-grid2 {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 16px; align-items: start;}
.sub-grid2 > * {min-width: 0;}
.sub-hero {position: relative; background: var(--sub-surface); border-color: var(--sub-rule); padding: 20px 24px;}
.sub-hero-main {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-inline-end: var(--corner-i-reserve, 44px);}
.sub-hero-text {min-width: 0; flex: 1 1 280px;}
.sub-hero .sub-h1 {display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 1.5rem; color: var(--sub-strong);}
.sub-hero-s {margin: 6px 0 0; font-size: .95rem; color: var(--muted);}
.sub-hero-a {display: flex; flex-wrap: wrap; gap: 8px;}
.sub-hero-f {display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sub-rule); font-size: .88rem; color: var(--muted);}
.sub-hero-f b {color: var(--text);}
.sub-hero .sub-note {margin: 14px 0 0;}
.sub-meter-f {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;}
.sub-meter-when {font-size: .78rem; color: var(--text-muted);}
.sub-llist {display: flex; flex-direction: column;}
.sub-lrow {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0;}
.sub-lrow + .sub-lrow {border-top: 1px solid var(--line);}
.sub-lrow.is-locked .sub-lname {color: var(--muted);}
.sub-lname {display: flex; flex-direction: column; min-width: 0;}
.sub-lname b {font-weight: 700; line-height: 1.4;}
.sub-lname small {color: var(--muted); font-size: .8rem;}
.sub-lstatus {flex: none;}
.sub-lrow.sub-succ {margin-top: 6px; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex;}
.sub-lrow.sub-succ .btn {margin-inline-start: 0;}
.sub-ro {white-space: nowrap;}
#sub-up .modal-card {max-inline-size: 760px;}
.sub-up-body {display: flex; flex-direction: column; gap: 14px;}
.sub-up-frame {overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);}
.sub-up-table {inline-size: 100%; min-inline-size: 34rem; border-collapse: separate; border-spacing: 0; font-size: .88rem;}
.sub-up-table th, .sub-up-table td {padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: top;}
.sub-up-table tbody tr:last-child th, .sub-up-table tbody tr:last-child td {border-bottom: 0;}
.sub-up-table thead th {background: var(--surface); vertical-align: top;}
.sub-up-table th:first-child {text-align: start; font-weight: 600; color: var(--muted);}
.sub-up-table .is-picked {background: var(--sub-tint);}
.sub-up-table .is-current {box-shadow: inset 0 3px 0 var(--sub-line);}
.sub-up-name, .sub-up-price {display: block;}
.sub-up-name {font-weight: 700;}
.sub-up-price {margin: 4px 0 8px; font-size: .85rem; font-weight: 600;}
.sub-up-use {color: var(--muted);}
.sub-up-table .sub-below {display: block; margin-top: 4px; font-size: .74rem;}
.sub-up-total {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: 1rem;}
.sub-gold {display: inline-block; padding: 1px 8px; border-radius: 2px; background: var(--sub-tint-2); color: var(--sub-text); font-size: .72rem; font-weight: 700;}
@media (max-width: 640px) {
  .sub-hero {padding: 16px;}
  .sub-tab {padding-inline: 12px;}
}
/* ── subscription page as redrawn and approved on 2026-10-12 ── end */

/* ── Selling on account at the till (spec 051 S4, TASK-2026-156; the approved mockup 051-m1-till and the owner's fixes of 2026-10-13) ──────────────────────
   The block under Cash, Card and InstaPay in the payment window, and the three small slips over it (the cashier's limit dialog, the manager's tick, the manager's approval).
   Only layout lives here: every button, field and notice is the app's own class. The explanation is an (i) in the card's top inline-end corner (info_tip.js), never a paragraph.
   Sides are logical. `.on-acct` is toggled with the `hidden` attribute, so it carries NO display (the 2026-09-09 trap). */
.on-acct {
  position: relative;
  margin: 0;
  padding: 12px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.on-acct > .info-tip { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; margin: 0; z-index: 2; }
.on-acct-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-block-end: 8px; padding-inline-end: 2rem; }
.on-acct-title { margin: 0; font-size: .95rem; font-weight: 700; color: var(--text); }
.on-acct-acts { display: inline-flex; gap: 6px; }
.on-acct-note { color: var(--muted); font-size: .9rem; }
.on-acct-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; margin: 0 0 8px; }
.on-acct-fact { min-width: 0; }
.on-acct-facts dt { font-size: .75rem; color: var(--text-muted); }
.on-acct-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.on-acct-late { margin-block-end: 8px; color: var(--danger); font-size: .85rem; }
.on-acct .form-group { margin: 0; }
.on-acct-input { width: 100%; box-sizing: border-box; font-size: 1.25rem; font-weight: 700; text-align: center; }
.on-acct-after { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-block-start: 8px; font-size: .88rem; color: var(--muted); }
.on-acct-after:empty { display: none; }

/* the slips: the same bank-slip card, narrower; the (i) sits beside the close button so the close button keeps the very corner */
.credit-slip { background: var(--scrim) !important; backdrop-filter: none !important; }
.credit-slip-card { max-width: 560px; }
.credit-slip-card.credit-slip-sm { max-width: 460px; }
.credit-slip-card.credit-slip-lg { max-width: 600px; }   /* the payment slip: two columns of fields need more than the 520px the bank slip folds at */
.credit-slip-end { display: inline-flex; align-items: center; gap: 10px; }
.credit-slip-end .info-tip { margin: 0; }
.credit-lines { display: grid; margin-block-end: 14px; }
.credit-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .45rem; border-block-end: 1px dashed var(--line); }
.credit-line:last-child { border-block-end: 0; }
.credit-line > span:first-child { color: var(--muted); }
.credit-line.is-total { border-block-start: 1px solid var(--line); border-block-end: 0; padding-block-start: .7rem; font-weight: 800; }
.credit-line.is-total > span:first-child { color: var(--text); }
/* numbered steps: a ring with the number, then the step's own control */
.credit-steps { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 14px; }
.credit-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; }
.credit-step-n { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--on-fill); font-weight: 700; font-size: .85rem; }
.credit-step .btn { inline-size: 100%; }
.credit-step .form-group { margin: 0; }
.credit-step:has(.form-group) { align-items: end; }
.credit-step:has(.form-group) .credit-step-n { margin-block-end: 8px; }
.credit-slip .checkbox-group { margin-block-end: 4px; }

@media (max-width: 640px) {
  .on-acct-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Receiving a customer's payment (spec 051 S5, TASK-2026-156; the approved mockup 051-m2-customer as drawn in commit 3a34c455) ───────────────────────
   The slip is the bank slip (`.bank-slip-card`, `.bank-slip-row`, one field height); only the customer line, the quick amounts, the receipt paper and the bar on the customer page live here.
   Sides are logical. The slip folds on ITS OWN width (the form is a size container), never the screen's. The paper is white with dark ink in every theme, like every paper the app prints. */
.credit-pay-facts { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: .5rem 1rem; align-items: end; padding-block-end: .75rem; margin-block-end: 14px; border-block-end: 1px solid var(--line); }
.credit-pay-id { display: grid; gap: .1rem; min-width: 0; }
.credit-pay-id b { overflow-wrap: anywhere; }
.credit-pay-id small { color: var(--text-muted); }
.credit-pay-facts dl { margin: 0; display: grid; gap: .1rem; min-width: 0; }
.credit-pay-facts dt { font-size: .75rem; color: var(--text-muted); }
.credit-pay-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.credit-pay-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 6px; }
.credit-pay-quick .btn { white-space: nowrap; }
.credit-pay-done { display: grid; gap: 12px; min-width: 0; }
.credit-pay-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-block-end: 14px; }
.credit-pay-bar-owes { display: grid; gap: .1rem; }
.credit-pay-bar-owes small { font-size: .75rem; color: var(--text-muted); }
.credit-pay-bar-owes b { font-size: 1.1rem; }
@container (max-width: 520px) {
  .credit-pay-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credit-pay-id { grid-column: 1 / -1; }
}
.credit-pay-paper-wrap { overflow-x: auto; padding-block: .25rem; }
.credit-pay-paper { color-scheme: light; box-sizing: border-box; inline-size: 302px; max-inline-size: 100%; margin-inline: auto; padding: 14px 12px; background: var(--paper); color: var(--ink); border: 1px solid var(--neutral-300); box-shadow: none; font-size: 12.5px; line-height: 1.55; }
.credit-pay-paper h4 { margin: 0; text-align: center; font-size: 15px; color: var(--ink); }
.credit-pay-paper p { margin: 0; color: var(--ink); }
.credit-pay-paper .credit-pay-c { text-align: center; color: var(--neutral-700); }
.credit-pay-paper hr { border: 0; border-block-start: 1px dashed var(--ink); margin: 8px 0; }
.credit-pay-logo { text-align: center; margin-block-end: 4px; }
.credit-pay-logo img { display: inline-block; max-block-size: 32px; max-inline-size: 100%; }
.credit-pay-row { display: flex; justify-content: space-between; gap: 8px; color: var(--ink); }
.credit-pay-row > span:first-child { overflow-wrap: anywhere; color: var(--ink); }
.credit-pay-row bdi { white-space: nowrap; }
.credit-pay-row.is-total { font-weight: 800; font-size: 14px; }

/* The customer page, the Overdue tab and the dashboard card (spec 051 S6; TASK-2026-156; the approved mockups 051-m2-customer and 051-m3-lists).
   The app's own .card, .form-group, .table-wrapper, .badge and the bank ledger's pager; only the arrangement is new. Logical sides only. The (i) stands in the card's top inline-end corner, like the
   till's block. Nothing here sets a display on anything the page toggles with the hidden attribute (the dashboard's slot is a plain block). */
.credit-page { display: grid; gap: 1rem; min-width: 0; }
.credit-page-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; min-width: 0; }
.credit-page-name { margin: 0; font-size: 1.35rem; font-weight: 800; overflow-wrap: anywhere; }
.credit-page-phone { color: var(--text-muted); }
.credit-page-grow { flex: 1 1 auto; }
.credit-page-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .credit-page-cols { grid-template-columns: minmax(0, 1fr); } }
.credit-card { position: relative; min-width: 0; }
.credit-card > .info-tip { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; margin: 0; z-index: 2; }
.credit-card-title { margin: 0 0 .75rem; font-size: .95rem; font-weight: 700; color: var(--text); padding-inline-end: 2rem; }
.credit-page-big { font-size: 1.9rem; font-weight: 800; line-height: 1.2; margin-block-end: .5rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.credit-page-count { font-size: .9rem; font-weight: 500; }
.credit-muted { color: var(--text-muted); }
.credit-terms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0 14px; }
.credit-card-actions { display: flex; justify-content: flex-end; margin-block-start: .5rem; }
.credit-card .credit-lines { margin-block-end: 0; }
.credit-card .table-wrapper { margin-block-end: 0; }
.credit-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; }
.credit-fig { display: grid; gap: .2rem; min-width: 0; padding: 10px 16px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius); }
.credit-fig > span { font-size: .75rem; color: var(--muted); }
.credit-fig > b { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.credit-filter { max-inline-size: 16rem; }
.credit-row-acts { display: inline-flex; gap: 6px; }
.credit-owe .credit-line > span:first-child { overflow-wrap: anywhere; }

/* ── The reminder and the statement (spec 051 S7, TASK-2026-156; the approved mockup 051-m4-docs, drawn with the owner's rules of 2026-10-13) ───────────────────────────────────────────────────
   The reminder is a slip (the S4 shell): the customer line, one notice, a radio list, the text. A slip with three actions wraps them (plan risk 13: the real `.modal-footer` does not wrap).
   The statement paper is the stock count sheet's template (a4_paper.js `a4PrintCss`: the same measurements in the same order, the text at 1.25 times for a paper that is read), always white
   with dark ink, in the light and the dark theme. Sides are logical. */
.credit-opt-t { display: grid; gap: 2px; min-inline-size: 0; }
.credit-stmt-lines { min-inline-size: 0; }   /* the lines card is redrawn inside this wrapper; a grid item that holds a table must be allowed to be narrower than the table, which then scrolls in its own wrapper */
.credit-slip .import-sheet-list label:has(input:checked) { background: var(--sunken); }
.credit-slip .import-sheet-list input:disabled + .credit-opt-t { opacity: .5; }
.credit-slip .modal-footer:has(> .btn:nth-child(3)) { flex-wrap: wrap; }   /* three actions: they wrap instead of running off a phone's edge */
.credit-slip .modal-footer:has(> .btn:nth-child(3)) > .btn { flex: 1 1 auto; }
/* the one field that is a message to edit, not a value: it keeps the slip's width and takes lines (the slip's one-height rule is for fields that hold a value) */
.credit-slip .bank-slip-form .form-group textarea.credit-remind-text { inline-size: 100%; block-size: 9rem; min-block-size: 9rem; line-height: 1.6; }
.credit-slip .form-group { margin-block-end: 12px; }
.a4-sheet-wrap { overflow-x: auto; padding-block: .25rem; }
.a4-sheet { --k: 1.25; box-sizing: border-box; color-scheme: light; inline-size: 794px; min-inline-size: 794px; margin-inline: auto; background: var(--paper); color: var(--ink); border: 1px solid var(--neutral-300); box-shadow: none; font-family: Cairo, 'Segoe UI', Arial, sans-serif; line-height: 1.5; }
.a4-sheet *, .a4-sheet *::before, .a4-sheet *::after { box-sizing: border-box; }
.a4-sheet.a4-sheet h1, .a4-sheet.a4-sheet p, .a4-sheet.a4-sheet small, .a4-sheet.a4-sheet b, .a4-sheet.a4-sheet span, .a4-sheet.a4-sheet div, .a4-sheet.a4-sheet bdi { color: var(--ink); background: transparent; text-transform: none; letter-spacing: 0; }
.a4-sheet .page { padding: 7mm 8mm; }
.a4-sheet .header { display: grid; grid-template-columns: 105px 1fr 105px; align-items: center; border-block-end: 1.5px solid var(--ink); padding-block-end: 3px; margin-block-end: 4px; min-block-size: 34px; }
.a4-sheet .logo { text-align: center; }
.a4-sheet .logo img { display: inline-block; max-block-size: 31px; max-inline-size: 96px; }
.a4-sheet .title { text-align: center; }
.a4-sheet.a4-sheet .title h1 { margin: 0 0 1px; font-size: calc(15px * var(--k)); line-height: 1.2; font-weight: 700; }
.a4-sheet.a4-sheet .title p { display: inline; margin: 0; font-size: calc(7px * var(--k)); color: var(--neutral-700); }
.a4-sheet.a4-sheet .brand { text-align: center; font-weight: 700; font-size: calc(11px * var(--k)); line-height: 1.2; }
.a4-sheet.a4-sheet .brand small { display: block; margin-block-start: 2px; font-weight: 400; font-size: calc(6.5px * var(--k)); color: var(--neutral-700); }
.a4-sheet .meta { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--neutral-300); margin-block-end: 4px; }
.a4-sheet.a4-sheet .meta div { padding: 2px 5px; border-inline-end: 1px solid var(--neutral-300); font-size: calc(7.5px * var(--k)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a4-sheet .meta div:last-child { border: 0; }
.a4-sheet.a4-sheet .meta b { display: inline; margin-inline-end: 4px; font-size: calc(7px * var(--k)); color: var(--neutral-700); }
.a4-sheet table { inline-size: 100%; border-collapse: collapse; table-layout: fixed; font-size: calc(8px * var(--k)); background: var(--paper); color: var(--ink); }
.a4-sheet table thead, .a4-sheet table tbody, .a4-sheet table tr { background: var(--paper); color: var(--ink); }
.a4-sheet table th, .a4-sheet table td { border: 1px solid var(--neutral-400); padding: 1.6mm 1.8mm; text-align: start; vertical-align: top; overflow: hidden; background: var(--paper); color: var(--ink); font-size: inherit; line-height: 1.45; text-transform: none; letter-spacing: 0; }
.a4-sheet table th, .a4-sheet table thead th { background: var(--neutral-100) !important; color: var(--ink) !important; font-weight: 700; block-size: 5.5mm; box-shadow: none; }
.a4-sheet table tr { break-inside: avoid; page-break-inside: avoid; }
.a4-sheet table .num { text-align: end; white-space: nowrap; inline-size: 13%; }
.a4-sheet table .c-date { inline-size: 13%; }
.a4-sheet table .c-ref { inline-size: 15%; }
.a4-sheet table td small { display: block; color: var(--neutral-700); font-size: .88em; overflow-wrap: anywhere; }
.a4-sheet table.a4-totals { inline-size: 46%; margin-inline-start: auto; margin-block-start: 6px; }
.a4-sheet table.a4-totals th { inline-size: 45%; }
.a4-sheet table.a4-totals .num { inline-size: auto; }
.a4-sheet table.a4-totals tr.grand th, .a4-sheet table.a4-totals tr.grand td { font-weight: 700; border-block-start: 1.5px solid var(--ink); }
.a4-sheet.a4-sheet .note { margin: 6px 0 0; font-size: calc(7.5px * var(--k)); color: var(--neutral-700); }
.a4-sheet .footer { display: flex; justify-content: space-between; border-block-start: 1px solid var(--neutral-300); margin-block-start: 5px; padding-block-start: 3px; }
.a4-sheet.a4-sheet .footer span { font-size: calc(6.5px * var(--k)); color: var(--neutral-700); }

/* ── Returns of credit sales (spec 051 S8, TASK-2026-156; the approved mockup 051-m5-return, drawn with the owner's rules of 2026-10-13) ───────────────────────────────────────────────────
   One card above the payment boxes of the return window, asked at every return from a sale that was on account: the app's own radio list, one field, the summary lines, the (i) in the card's top
   inline-end corner (`.credit-card > .info-tip`). Its host is shown and hidden with the `hidden` attribute and has no `display` of its own. Sides are logical. */
.credit-return { margin-block-end: 12px; }
.credit-return .credit-return-body { display: grid; gap: 12px; min-width: 0; }
.credit-return .import-sheet-list label:has(input:checked) { background: var(--sunken); }
.credit-return .credit-opt-t > small { color: var(--text-muted); font-size: .8rem; }
.credit-return .credit-lines, .credit-return .form-group { margin-block-end: 0; }

/* === R3_COMMISSIONS_APPENDED_CSS_FRAGMENT === */

.payroll-v2-commissions-panel {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

.payroll-v2-commissions-panel .pv2-commission-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

.payroll-v2-commissions-panel .pv2-commission-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  border-block-end: 1px solid var(--border-subtle);
  padding-block-end: 1rem;
}

.payroll-v2-commissions-panel .pv2-commission-header-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.payroll-v2-commissions-panel .pv2-commission-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}

.payroll-v2-commissions-panel .pv2-commission-subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.payroll-v2-commissions-panel .pv2-commission-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.payroll-v2-commissions-panel .pv2-commission-create-disabled-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  max-width: 24rem;
}

.payroll-v2-commissions-panel .pv2-commission-summary-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  width: 100%;
}

.payroll-v2-commissions-panel .pv2-commission-summary-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.payroll-v2-commissions-panel .pv2-commission-summary-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.payroll-v2-commissions-panel .pv2-commission-summary-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.payroll-v2-commissions-panel .pv2-commission-summary-draft {
  color: var(--color-warning);
}

.payroll-v2-commissions-panel .pv2-commission-summary-approved {
  color: var(--color-success);
}

.payroll-v2-commissions-panel .pv2-commission-summary-rejected {
  color: var(--color-danger);
}

.payroll-v2-commissions-panel .pv2-commission-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.payroll-v2-commissions-panel .pv2-commission-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 12rem;
  min-width: 10rem;
}

.payroll-v2-commissions-panel .pv2-commission-filter-label,
.payroll-v2-commission-modal .pv2-commission-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.payroll-v2-commissions-panel .pv2-commission-filter-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-block-start: 0.25rem;
}

.payroll-v2-commissions-panel .pv2-commission-input,
.payroll-v2-commissions-panel .pv2-commission-select,
.payroll-v2-commission-modal .pv2-commission-input,
.payroll-v2-commission-modal .pv2-commission-select,
.payroll-v2-commission-modal .pv2-commission-textarea {
  width: 100%;
  box-sizing: border-box;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.payroll-v2-commissions-panel .pv2-commission-input:hover,
.payroll-v2-commissions-panel .pv2-commission-select:hover,
.payroll-v2-commission-modal .pv2-commission-input:hover,
.payroll-v2-commission-modal .pv2-commission-select:hover,
.payroll-v2-commission-modal .pv2-commission-textarea:hover {
  border-color: var(--border-active);
}

.payroll-v2-commissions-panel .pv2-commission-input:focus,
.payroll-v2-commissions-panel .pv2-commission-select:focus,
.payroll-v2-commission-modal .pv2-commission-input:focus,
.payroll-v2-commission-modal .pv2-commission-select:focus,
.payroll-v2-commission-modal .pv2-commission-textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px var(--accent-gold-glow);
}

.payroll-v2-commission-modal .pv2-commission-textarea {
  min-height: 4.5rem;
  resize: vertical;
}

.payroll-v2-commissions-panel .pv2-commission-btn,
.payroll-v2-commission-modal .pv2-commission-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  transition: var(--transition);
}

.payroll-v2-commissions-panel .pv2-commission-btn-primary,
.payroll-v2-commission-modal .pv2-commission-btn-primary {
  background-color: var(--accent-blue);
  border-color: var(--accent-blue);
  color: var(--text-primary);
}

.payroll-v2-commissions-panel .pv2-commission-btn-primary:hover:not(:disabled),
.payroll-v2-commission-modal .pv2-commission-btn-primary:hover:not(:disabled) {
  background-color: var(--accent-blue-light);
  border-color: var(--accent-blue-light);
}

.payroll-v2-commissions-panel .pv2-commission-btn-primary:active:not(:disabled),
.payroll-v2-commission-modal .pv2-commission-btn-primary:active:not(:disabled) {
  background-color: var(--accent-blue);
  border-color: var(--border-active);
}

.payroll-v2-commissions-panel .pv2-commission-btn-secondary,
.payroll-v2-commission-modal .pv2-commission-btn-secondary {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.payroll-v2-commissions-panel .pv2-commission-btn-secondary:hover:not(:disabled),
.payroll-v2-commission-modal .pv2-commission-btn-secondary:hover:not(:disabled) {
  background-color: var(--bg-hover);
  border-color: var(--border-active);
}

.payroll-v2-commissions-panel .pv2-commission-btn-danger,
.payroll-v2-commission-modal .pv2-commission-btn-danger {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.payroll-v2-commissions-panel .pv2-commission-btn-danger:hover:not(:disabled),
.payroll-v2-commission-modal .pv2-commission-btn-danger:hover:not(:disabled) {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--text-primary);
}

.payroll-v2-commissions-panel .pv2-commission-btn-sm,
.payroll-v2-commission-modal .pv2-commission-btn-sm {
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  font-size: 0.75rem;
}

.payroll-v2-commissions-panel .pv2-commission-btn:disabled,
.payroll-v2-commissions-panel .pv2-commission-btn[disabled],
.payroll-v2-commission-modal .pv2-commission-btn:disabled,
.payroll-v2-commission-modal .pv2-commission-btn[disabled],
.payroll-v2-commissions-panel .pv2-commission-input:disabled,
.payroll-v2-commissions-panel .pv2-commission-select:disabled,
.payroll-v2-commission-modal .pv2-commission-input:disabled,
.payroll-v2-commission-modal .pv2-commission-select:disabled,
.payroll-v2-commission-modal .pv2-commission-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
  border-color: var(--border-subtle);
}

.payroll-v2-commissions-panel .pv2-commission-btn:focus-visible,
.payroll-v2-commissions-panel .pv2-commission-input:focus-visible,
.payroll-v2-commissions-panel .pv2-commission-select:focus-visible,
.payroll-v2-commission-modal .pv2-commission-btn:focus-visible,
.payroll-v2-commission-modal .pv2-commission-input:focus-visible,
.payroll-v2-commission-modal .pv2-commission-select:focus-visible,
.payroll-v2-commission-modal .pv2-commission-textarea:focus-visible,
.payroll-v2-commission-modal .pv2-commission-modal-close:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.payroll-v2-commissions-panel .pv2-commission-content {
  width: 100%;
}

.payroll-v2-commissions-panel .pv2-commission-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
}

.payroll-v2-commissions-panel .pv2-commission-table {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
  font-size: 0.875rem;
}

.payroll-v2-commissions-panel .pv2-commission-th {
  padding-block: 0.75rem;
  padding-inline: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background-color: var(--bg-secondary);
  border-block-end: 1px solid var(--border-color);
  white-space: nowrap;
}

.payroll-v2-commissions-panel .pv2-commission-td {
  padding-block: 0.75rem;
  padding-inline: 1rem;
  border-block-end: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

.payroll-v2-commissions-panel .pv2-commission-row:hover {
  background-color: var(--bg-hover);
}

.payroll-v2-commissions-panel .pv2-commission-th-amount,
.payroll-v2-commissions-panel .pv2-commission-td-amount {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.payroll-v2-commissions-panel .pv2-commission-th-actions,
.payroll-v2-commissions-panel .pv2-commission-td-actions {
  text-align: end;
  white-space: nowrap;
}

.payroll-v2-commissions-panel .pv2-commission-emp-name {
  display: block;
  font-weight: 500;
  color: var(--text-primary);
}

.payroll-v2-commissions-panel .pv2-commission-rel-id {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.payroll-v2-commissions-panel .pv2-commission-badge {
  display: inline-flex;
  align-items: center;
  padding-block: 0.125rem;
  padding-inline: 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
}

.payroll-v2-commissions-panel .pv2-commission-badge-draft {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.payroll-v2-commissions-panel .pv2-commission-badge-approved {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success);
}

.payroll-v2-commissions-panel .pv2-commission-badge-rejected {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.payroll-v2-commissions-panel .pv2-commission-action-readonly {
  color: var(--text-muted);
  padding-inline: 0.25rem;
}

.payroll-v2-commissions-panel .pv2-commission-loading,
.payroll-v2-commissions-panel .pv2-commission-empty,
.payroll-v2-commissions-panel .pv2-commission-error,
.payroll-v2-commissions-panel .pv2-commission-unauthorized {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem;
  text-align: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-card);
}

.payroll-v2-commissions-panel .pv2-commission-loading-message,
.payroll-v2-commissions-panel .pv2-commission-empty-message {
  margin: 0;
  font-size: 1rem;
  color: var(--text-muted);
}

.payroll-v2-commissions-panel .pv2-commission-error-message,
.payroll-v2-commission-modal .pv2-commission-form-error {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-danger);
  background-color: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
}

.payroll-v2-commissions-panel .pv2-commission-unauthorized-message {
  margin: 0;
  font-size: 1rem;
  color: var(--color-warning);
  background-color: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding-block: 1rem;
  padding-inline: 1.5rem;
}

.payroll-v2-commission-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dialog-viewport-gutter);
  background-color: var(--bg-glass);
  box-sizing: border-box;
}

.payroll-v2-commission-modal .pv2-commission-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--dialog-inline-size-compact);
  max-height: var(--dialog-max-block-size);
  overflow-y: auto;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  box-sizing: border-box;
}

.payroll-v2-commission-modal .pv2-commission-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
  padding-inline: 1.25rem;
  border-block-end: 1px solid var(--border-subtle);
}

.payroll-v2-commission-modal .pv2-commission-modal-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.payroll-v2-commission-modal .pv2-commission-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.payroll-v2-commission-modal .pv2-commission-modal-close:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.payroll-v2-commission-modal .pv2-commission-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.payroll-v2-commission-modal .pv2-commission-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 1rem;
  padding-inline: 1.25rem;
}

.payroll-v2-commission-modal .pv2-commission-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.payroll-v2-commission-modal .pv2-commission-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-block: 1rem;
  padding-inline: 1.25rem;
  border-block-start: 1px solid var(--border-subtle);
  background-color: var(--bg-secondary);
}

.payroll-v2-commissions-panel .pv2-commission-d-none,
.payroll-v2-commission-modal .pv2-commission-d-none {
  display: none !important;
}

body.payroll-v2-commission-modal-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .payroll-v2-commissions-panel .pv2-commission-header {
    flex-direction: column;
    align-items: stretch;
  }

  .payroll-v2-commissions-panel .pv2-commission-header-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .payroll-v2-commissions-panel .pv2-commission-summary-bar {
    grid-template-columns: 1fr 1fr;
  }

  .payroll-v2-commissions-panel .pv2-commission-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .payroll-v2-commissions-panel .pv2-commission-filter-group {
    width: 100%;
    min-width: 0;
  }

  .payroll-v2-commissions-panel .pv2-commission-filter-actions {
    width: 100%;
    justify-content: stretch;
  }

  .payroll-v2-commissions-panel .pv2-commission-filter-actions .pv2-commission-btn {
    flex: 1 1 auto;
  }

  .payroll-v2-commission-modal .pv2-commission-modal {
    max-width: 100%;
    margin-inline: 0.5rem;
  }

  .payroll-v2-commission-modal .pv2-commission-modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .payroll-v2-commission-modal .pv2-commission-modal-footer .pv2-commission-btn {
    width: 100%;
  }
}

.payroll-v2-commissions-panel[dir="rtl"] .pv2-commission-table,
.payroll-v2-commissions-panel [dir="rtl"] .pv2-commission-table {
  text-align: start;
}

.payroll-v2-commissions-panel[dir="rtl"] .pv2-commission-th-amount,
.payroll-v2-commissions-panel[dir="rtl"] .pv2-commission-td-amount,
.payroll-v2-commissions-panel [dir="rtl"] .pv2-commission-th-amount,
.payroll-v2-commissions-panel [dir="rtl"] .pv2-commission-td-amount {
  text-align: end;
}

.payroll-v2-commissions-panel[dir="rtl"] .pv2-commission-th-actions,
.payroll-v2-commissions-panel[dir="rtl"] .pv2-commission-td-actions,
.payroll-v2-commissions-panel [dir="rtl"] .pv2-commission-th-actions,
.payroll-v2-commissions-panel [dir="rtl"] .pv2-commission-td-actions {
  text-align: end;
}

.payroll-v2-commission-modal[dir="rtl"] .pv2-commission-modal-footer,
.payroll-v2-commission-modal [dir="rtl"] .pv2-commission-modal-footer {
  justify-content: flex-start;
}

@media (prefers-reduced-motion: reduce) {
  .payroll-v2-commissions-panel,
  .payroll-v2-commissions-panel .pv2-commission-btn,
  .payroll-v2-commissions-panel .pv2-commission-input,
  .payroll-v2-commissions-panel .pv2-commission-select,
  .payroll-v2-commission-modal,
  .payroll-v2-commission-modal .pv2-commission-modal,
  .payroll-v2-commission-modal .pv2-commission-modal-close,
  .payroll-v2-commission-modal .pv2-commission-btn,
  .payroll-v2-commission-modal .pv2-commission-input,
  .payroll-v2-commission-modal .pv2-commission-select,
  .payroll-v2-commission-modal .pv2-commission-textarea {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* R4_SCOPED_PAYMENTS_APPENDED_CSS_FRAGMENT */

.modal-backdrop-payment {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 300);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dialog-viewport-gutter);
  background: color-mix(in srgb, var(--bg-primary) 58%, transparent);
  backdrop-filter: blur(12px) saturate(.78);
  -webkit-backdrop-filter: blur(12px) saturate(.78);
}

.pv2-modal-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--dialog-inline-size-compact);
  max-height: var(--dialog-max-block-size);
  overflow-y: auto;
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  box-sizing: border-box;
}

.pv2-payment-scope {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.pv2-payment-scope:hover {
  border-color: var(--border-active);
}

.pv2-payment-scope:focus,
.pv2-payment-scope:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px var(--accent-gold-glow);
}

.pv2-btn-retry-load {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-danger);
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
  transition: var(--transition);
}

.pv2-btn-retry-load:hover {
  background-color: var(--color-danger);
  color: var(--btn-primary-text);
}

.pv2-btn-retry-load:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.modal-backdrop-payment button:focus-visible,
.modal-backdrop-payment input:focus-visible,
.modal-backdrop-payment select:focus-visible,
.pv2-modal-dialog button:focus-visible,
.pv2-modal-dialog input:focus-visible,
.pv2-modal-dialog select:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .modal-backdrop-payment {
    padding: var(--dialog-viewport-gutter-mobile);
  }

  .pv2-modal-dialog {
    max-width: 100%;
    max-height: calc(100vh - (var(--dialog-viewport-gutter-mobile) * 2));
  }
}

[dir="rtl"] .modal-backdrop-payment,
.modal-backdrop-payment[dir="rtl"],
[dir="rtl"] .pv2-modal-dialog,
.pv2-modal-dialog[dir="rtl"] {
  direction: rtl;
  text-align: start;
}

[dir="rtl"] .pv2-payment-scope,
.pv2-payment-scope[dir="rtl"] {
  text-align: start;
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop-payment,
  .pv2-modal-dialog,
  .pv2-payment-scope,
  .pv2-btn-retry-load {
    transition: none;
    animation: none;
  }
}

/* R5B_WORK_ENTRY_ABSENCE_UI */
.work-entries-workspace .d-none {
  display: none !important;
}

.work-entries-workspace .we-absence-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.work-entries-workspace .we-absence-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.work-entries-workspace .we-absence-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 600;
}

.work-entries-workspace .we-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.work-entries-workspace .we-grid-col-6 {
  grid-column: span 6;
}

.work-entries-workspace .we-grid-col-12 {
  grid-column: span 12;
}

.work-entries-workspace .we-select,
.work-entries-workspace .we-input {
  width: 100%;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
}

.work-entries-workspace .we-select:focus-visible,
.work-entries-workspace .we-input:focus-visible {
  outline: none;
  border-color: var(--border-focus);
}

.work-entries-workspace .we-select:disabled,
.work-entries-workspace .we-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.work-entries-workspace .we-relationship-status {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.work-entries-workspace .we-form-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.work-entries-workspace .we-capability-warning {
  border-inline-start: 4px solid var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .work-entries-workspace .we-absence-card {
    padding: 0.75rem;
  }
  .work-entries-workspace .we-grid-col-6 {
    grid-column: span 12;
  }
  .work-entries-workspace .d-flex.gap-3 {
    gap: 0.75rem !important;
  }
}

@media (max-width: 390px) {
  .work-entries-workspace .we-form-actions {
    flex-direction: column-reverse;
  }
  .work-entries-workspace .we-form-actions .btn {
    width: 100%;
  }
}

html[dir="rtl"] .work-entries-workspace .text-end {
  text-align: left !important;
}

html[dir="rtl"] .work-entries-workspace .we-form-actions {
  justify-content: flex-start;
}

@media (prefers-reduced-motion: reduce) {
  .work-entries-workspace * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* R5C_PAYROLL_READINESS_UI */
.payroll-v2-workspace .pv2-readiness-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}

.payroll-v2-workspace .pv2-readiness-alert {
  border-inline-start: 4px solid var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
}

.payroll-v2-workspace .pv2-ack-modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.payroll-v2-workspace .pv2-ack-modal-card textarea {
  width: 100%;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
}

.payroll-v2-workspace .pv2-ack-modal-card textarea:focus-visible {
  outline: none;
  border-color: var(--border-focus);
}

.payroll-v2-workspace .pv2-ack-modal-card textarea:disabled,
.payroll-v2-workspace .pv2-ack-confirm:disabled,
.payroll-v2-workspace .pv2-btn-open-ack:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.payroll-v2-workspace .pv2-ack-notice {
  min-height: 1rem;
}

.payroll-v2-workspace .pv2-ack-reason-text {
  color: var(--text-primary);
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .payroll-v2-workspace .pv2-readiness-card {
    padding: 0.75rem;
  }
  .payroll-v2-workspace .pv2-ack-modal-card {
    width: 95%;
    margin: 0 auto;
  }
}

@media (max-width: 390px) {
  .payroll-v2-workspace .modal-footer {
    flex-direction: column-reverse;
  }
  .payroll-v2-workspace .modal-footer .btn {
    width: 100%;
  }
}

html[dir="rtl"] .payroll-v2-workspace .text-end {
  text-align: left !important;
}

html[dir="rtl"] .payroll-v2-workspace .modal-footer {
  justify-content: flex-start;
}

@media (prefers-reduced-motion: reduce) {
  .payroll-v2-workspace * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}


/* R6_EMPLOYEES_WORKSPACE_UI */
.employees-workspace { width: 100%; }
.employees-workspace .emp-page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
/* The four toolbars that used to carry a heading repeating their own tab name are gone, and so is the
   rule that laid them out. */
.employees-workspace .emp-actions-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; width: 100%; }
.employees-workspace .emp-kpi-grid { display: flex; gap: 10px; flex-wrap: wrap; align-content: center; }
.employees-workspace .emp-stat-card { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 12px 16px; min-width: 120px; text-align: center; }
.employees-workspace .emp-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.employees-workspace .emp-stat-label { font-size: .75rem; text-transform: uppercase; color: var(--text-secondary); margin-top: 4px; }
.employees-workspace .emp-section-title { font-size: .85rem; color: var(--text-secondary); margin-bottom: 8px; display: flex; justify-content: space-between; }
.employees-workspace .emp-row-between-sm { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: .85rem; color: var(--text-secondary); }
.employees-workspace .emp-flex-fill { flex: 1; min-width: 0; }
.employees-workspace .emp-dflex { display: flex; gap: 12px; width: 100%; }
.employees-workspace .emp-input-wrap { position: relative; display: flex; align-items: center; }
.employees-workspace .emp-clear-btn { position: absolute; inset-inline-end: 8px; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 6px; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; }
.employees-workspace .emp-strong { font-weight: 700; }
.employees-workspace .emp-text-success { color: var(--color-success); font-weight: 700; }
.employees-workspace .emp-text-danger { color: var(--color-danger); font-weight: 500; }
.employees-workspace .emp-text-muted { color: var(--text-secondary); font-size: .82rem; }
.employees-workspace .emp-text-accent { color: var(--accent-gold); }
.employees-workspace .emp-text-secondary { color: var(--text-secondary); }
.employees-workspace .emp-text-danger-plain { color: var(--color-danger); }
.employees-workspace .emp-text-success-plain { color: var(--color-success); }
.employees-workspace .emp-semibold { font-weight: 600; }
.employees-workspace .emp-w-full { width: 100%; }
.employees-workspace .emp-m0 { margin: 0; }
.employees-workspace .emp-stat-tile { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 10px 16px; flex: 1; min-width: 110px; text-align: center; }
.employees-workspace .emp-actions-card { width: 100%; border: 1px solid var(--border-color); background: var(--bg-secondary); padding: 14px 18px; border-radius: var(--radius-lg); }
.employees-workspace .emp-actions-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.employees-workspace .emp-actions-title { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.employees-workspace .emp-selected-name { color: var(--accent-gold); font-size: 1.05rem; font-weight: 800; }
.employees-workspace .emp-note-sm { font-size: 0.8rem; color: var(--text-secondary); }
.employees-workspace .emp-muted-note { font-size: .82rem; color: var(--text-secondary); font-style: italic; }
.employees-workspace .emp-center-cell { width: 100%; height: 42px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.employees-workspace .emp-text-center { text-align: center; }
.employees-workspace .emp-cell-boxed { text-align: center; padding: 4px; border: 1px solid var(--border-color); vertical-align: middle; }
.employees-workspace .emp-scroll-box { max-height: 550px; overflow: auto; }
.employees-workspace .emp-mt-md { margin-top: 12px; }
.employees-workspace .emp-empty-pad { padding: 40px; }
.employees-workspace .emp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: end; padding: 16px; }
.employees-workspace .emp-input-block { padding: 8px; width: 100%; box-sizing: border-box; }
.employees-workspace .emp-progress-track { background: var(--bg-tertiary); border-radius: var(--radius-md); height: 10px; overflow: hidden; margin-bottom: 12px; }
@media (max-width: 768px) {
  .employees-workspace .emp-page-head, .employees-workspace .emp-actions-bar { flex-direction: column; align-items: stretch; }
  .employees-workspace .emp-kpi-grid { gap: 8px; }
}
@media (max-width: 390px) {
  .employees-workspace .emp-stat-card { min-width: 100%; }
  .employees-workspace .emp-scroll-box { max-height: 420px; }
}
.employees-workspace .emp-progress-track:focus-within,
.employees-workspace button:focus-visible, .employees-workspace a:focus-visible,
.employees-workspace input:focus-visible, .employees-workspace select:focus-visible,
.employees-workspace textarea:focus-visible { outline: 2px solid var(--accent-gold-glow, var(--accent-gold)); outline-offset: 2px; }
.employees-workspace button:disabled { opacity: .6; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .employees-workspace * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}.employees-workspace .emp-pad-8 { padding: 8px; }
.employees-workspace .emp-pad-20 { padding: 20px; }
.employees-workspace .emp-overline { font-size: 0.8rem; text-transform: uppercase; color: var(--text-secondary); }
.employees-workspace .emp-stat-value-accent { font-size: 1.4rem; font-weight: 900; color: var(--accent-gold); margin-top: 4px; }
.employees-workspace .emp-input-search-pad { padding-inline-end: 40px; width: 100%; }
.employees-workspace .emp-grid-end { padding: 16px; align-items: end; }
.employees-workspace .emp-filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); align-items: end; gap: 12px; }
.employees-workspace .emp-filter-row .form-group { margin-bottom: 0; }
.employees-workspace .emp-filter-row .btn { min-block-size: var(--control-height); }
/* `emp-input-block` gives these 8px of padding on top of the shared field rule, so they stood 48px against
   the button's 42px in the same row. Ending on a common baseline was the visible half of FR-006; standing
   the same height is the other half. */
.employees-workspace .emp-filter-row select,
.employees-workspace .emp-filter-row input { block-size: var(--control-height); padding-block: 0; }
.employees-workspace .emp-kpi-auto150 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; width: 100%; }
.employees-workspace .emp-form-span-all { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.employees-workspace .emp-link-accent { font-weight: 700; text-decoration: underline; color: var(--accent-gold); }
.employees-workspace .emp-text-dim { color: var(--text-muted); }
.employees-workspace .emp-row-item { cursor: pointer; }