/*
 * Flame & Finish — Inventory Design System
 *
 * Design standard: Refactoring UI hierarchy, spacing, typography, restrained
 * color. Brand: Burnt Umber #a03d22, warm surfaces, Syne/Avenir/system stack.
 * Target: premium inventory tooling, not marketing site.
 */

/* ─── Reset & box model ─────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ─── Design tokens ─────────────────────────────────────────────────────── */

:root {
  /* Brand */
  --color-umber:        #a03d22;
  --color-umber-dark:   #7c2e18;
  --color-umber-light:  #f5ece8;
  --color-umber-tint:   #faf3f1;

  /* Neutrals */
  --color-ink:          #1a1a1a;
  --color-ink-muted:    #4a4a4a;
  --color-ink-faint:    #6f6f6f;   /* AA on all nine declared surfaces */
  --color-surface:      #faf8f6;   /* warm paper */
  --color-surface-alt:  #f3ede9;   /* warm rule background */
  --color-border:       #ddd6d0;
  --color-border-light: #eee9e4;

  /* Feedback */
  --color-success:      #1f6b34;
  --color-success-bg:   #edf7f0;
  --color-error:        #a4261d;   /* oxide red — error is feedback, umber is brand */
  --color-error-bg:     #fdf0ec;
  --color-warning:      #7a5a00;
  --color-warning-bg:   #fdf8e7;
  --color-info-bg:      #eef4fb;

  /* Typography — Flame & Finish brand: Archivo (display + body),
     IBM Plex Mono for figures. System stacks are graceful fallbacks. */
  --font-sans:   "Archivo", -apple-system, "Avenir Next", "Avenir", Arial, sans-serif;
  --font-display:"Archivo", -apple-system, "Avenir Next", "Avenir", Arial, sans-serif;
  --font-mono:   "IBM Plex Mono", "SF Mono", "Fira Code", "Courier New", monospace;

  /* Scale (8pt base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Content width */
  --content-max:     1200px;
  --content-narrow:   720px;
  --content-board:   1600px;

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg: 10px;

  /* Surfaces */
  --color-surface-white: #ffffff;

  /* Type scale (partial — full scale lands with the component vocabulary) */
  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.8125rem;  /* 13px */
  --font-size-md:   0.875rem;   /* 14px */
  --font-size-base: 0.9375rem;  /* 15px */
  --font-size-lg:   1rem;       /* 16px */
  --font-size-3xl:  1.1875rem;  /* 19px */
  --font-size-5xl:  1.625rem;   /* 26px */
  --font-size-6xl:  1.75rem;    /* 28px */

  /* Weights */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Borders */
  --border-width-thin:    1px;
  --border-width-default: 1.5px;
  --border-width-strong:  2px;

  /* Focus */
  --shadow-focus: 0 0 0 2px var(--color-surface-white), 0 0 0 4px var(--color-umber);

  /* Motion */
  --motion-base: 0.15s;
  --motion-ease-out: ease-out;
}

/* ─── Base ──────────────────────────────────────────────────────────────── */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: #fff;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

.inv-skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-3);
  z-index: 1000;
  transform: translateY(-200%);
  background: #fff;
  color: var(--color-umber);
  border: 2px solid var(--color-umber);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-weight: 700;
  text-decoration: none;
}

.inv-skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
}

/* ─── Page shell ────────────────────────────────────────────────────────── */

.inv-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-6);
}

.inv-page--narrow {
  max-width: var(--content-narrow);
}

/* Column boards (shipments, tasks) — the one page type whose job is to show
   as many columns at once as the screen allows, so the reading-width shell
   works against it: at --content-max the content box is 1136px and four
   280px task columns need 1168px, missing by exactly one gap. Capped rather
   than full-bleed so a 1920px monitor widens the columns to ~372px instead
   of ~452px. Deliberately NOT named `--wide`: `inv-page--wide` is already
   referenced by inventory/daily_sales_entry.html and has no rule, so
   defining that name would silently resize an unrelated page. */
.inv-page--board {
  max-width: var(--content-board);
}

/* ─── Top navigation bar ────────────────────────────────────────────────── */

.inv-topnav {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 58px;
  padding: var(--space-2) var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-surface);
  margin-bottom: var(--space-6);
}

/* Hamburger (mobile only) */
.inv-topnav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0 9px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.inv-topnav__toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--color-ink-muted);
  transition: transform 0.18s, opacity 0.18s;
}

.inv-topnav--open .inv-topnav__toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.inv-topnav--open .inv-topnav__toggle-bar:nth-child(2) { opacity: 0; }
.inv-topnav--open .inv-topnav__toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Desktop: the menu wrapper is layout-transparent */
.inv-topnav__menu {
  display: contents;
}

.inv-topnav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  flex-wrap: wrap;
}

.inv-topnav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color 0.15s, background-color 0.15s;
}

.inv-topnav__link:hover,
.inv-topnav__link:focus-visible {
  color: var(--color-umber);
  background: var(--color-umber-tint);
  outline: none;
}

.inv-topnav__link--active {
  color: var(--color-umber);
  background: var(--color-umber-light);
  font-weight: 600;
}

.inv-topnav__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  margin-left: var(--space-2);
  padding: 0 var(--space-1);
  border-radius: 999px;
  background: var(--color-umber);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.inv-topnav__badge--dot {
  min-width: 8px;
  width: 8px;
  height: 8px;
  margin-left: var(--space-1);
  padding: 0;
}

/* Grouped dropdown navigation (native <details>, JS-enhanced) */
.inv-nav-group {
  position: relative;
}

.inv-nav-group__summary {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color 0.15s, background-color 0.15s;
  user-select: none;
  -webkit-user-select: none;
}

.inv-nav-group__summary::-webkit-details-marker {
  display: none;
}

/* Chevron */
.inv-nav-group__summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.55;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s;
  flex-shrink: 0;
}

.inv-nav-group[open] > .inv-nav-group__summary::after {
  transform: translateY(2px) rotate(225deg);
}

.inv-nav-group__summary:hover,
.inv-nav-group__summary:focus-visible {
  color: var(--color-umber);
  background: var(--color-umber-tint);
  outline: none;
}

.inv-nav-group[open] > .inv-nav-group__summary,
.inv-nav-group__summary--active {
  color: var(--color-umber);
  background: var(--color-umber-light);
  font-weight: 600;
}

.inv-nav-group__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 14rem;
  padding: var(--space-2);
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(26, 26, 26, 0.12), 0 2px 8px rgba(26, 26, 26, 0.06);
  animation: inv-nav-panel-in 0.14s ease-out;
}

@keyframes inv-nav-panel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.inv-nav-group__panel--right {
  left: auto;
  right: 0;
}

.inv-nav-group__panel .inv-topnav__link {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.inv-nav-group__panel .inv-topnav__link:hover,
.inv-nav-group__panel .inv-topnav__link:focus-visible {
  background: var(--color-umber-light);
}

.inv-nav-group__divider {
  height: 1px;
  margin: var(--space-1) var(--space-2);
  background: var(--color-border-light);
}

.inv-nav-group__label {
  font-size: 0.78rem;
  color: var(--color-ink-faint);
  padding: var(--space-1) var(--space-3) var(--space-2);
  white-space: nowrap;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Back link variant */
.inv-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.875rem;
  color: var(--color-ink-muted);
  text-decoration: none;
  margin-bottom: var(--space-5);
}

.inv-back::before {
  content: "←";
}

.inv-back:hover,
.inv-back:focus-visible {
  color: var(--color-umber);
  outline: none;
}

/* ─── Page header ───────────────────────────────────────────────────────── */

.inv-header {
  margin-bottom: var(--space-6);
}

.inv-header__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-umber);
  margin: 0 0 var(--space-2) 0;
  line-height: 1.2;
}

.inv-header__subtitle {
  font-size: 0.9375rem;
  color: var(--color-ink-muted);
  margin: 0;
}

/* ─── Messages / alerts ─────────────────────────────────────────────────── */

.inv-messages {
  list-style: none;
  margin: 0 0 var(--space-5) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.inv-messages li {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  border-left: 3px solid currentColor;
}

.inv-messages li.error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.inv-messages li.success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.inv-messages li.warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.inv-messages li.info {
  background: var(--color-info-bg);
  color: var(--color-ink-muted);
}

/* Fallback for untagged messages */
.inv-messages li:not([class]),
.inv-messages li[class=""] {
  background: var(--color-info-bg);
  color: var(--color-ink-muted);
}

/* ─── Card / panel ──────────────────────────────────────────────────────── */

.inv-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* ─── Dashboard tile grid ───────────────────────────────────────────────── */

.inv-dashboard__header {
  margin-bottom: var(--space-6);
}

.inv-dashboard__title {
  margin: 0 0 var(--space-2);
}

.inv-dashboard__lede {
  margin: 0;
  color: var(--color-ink-muted);
}

.inv-dashboard__section + .inv-dashboard__section {
  margin-top: var(--space-7, 2.5rem);
}

.inv-dashboard__section-title {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
}

.inv-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-4);
}

.inv-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.inv-tile:hover,
.inv-tile:focus-visible {
  border-color: var(--color-umber);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  outline: none;
}

.inv-tile__title {
  font-weight: 700;
  color: var(--color-umber);
}

.inv-tile__desc {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-ink-muted);
}

/* ─── Filter bar ────────────────────────────────────────────────────────── */

.inv-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.inv-filters__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.inv-filters__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink-muted);
  letter-spacing: 0.02em;
}

.inv-filters__input,
.inv-filters__select {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  min-width: 180px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.inv-filters__input:focus,
.inv-filters__select:focus {
  outline: 2px solid transparent;
  border-color: var(--color-umber);
  box-shadow: var(--shadow-focus);
}

/* ─── Table wrapper (responsive scroll) ────────────────────────────────── */

.inv-table-wrap {
  /* Containing block for absolutely positioned descendants (.inv-sr-only
     spans); without it they escape the scroller's clip and widen the page. */
  position: relative;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border-light);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin-bottom: 0;
  padding-bottom: var(--space-1);
  overscroll-behavior-x: contain;
  scrollbar-color: var(--color-umber) var(--color-surface-alt);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
}

.inv-table-wrap:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

.inv-table-wrap.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.inv-table-wrap::-webkit-scrollbar {
  height: 12px;
}

.inv-table-wrap::-webkit-scrollbar-track {
  background: var(--color-surface-alt);
  border-radius: 999px;
}

.inv-table-wrap::-webkit-scrollbar-thumb {
  background: var(--color-umber);
  border: 3px solid var(--color-surface-alt);
  border-radius: 999px;
}

.inv-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--color-umber-dark);
}

.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.inv-table thead th {
  background: var(--color-surface-alt);
  color: var(--color-ink-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.inv-table thead th.inv-table__qty {
  text-align: right;
}

.inv-table tbody tr {
  border-bottom: 1px solid var(--color-border-light);
  transition: background 0.1s;
}

.inv-table tbody tr:last-child {
  border-bottom: none;
}

.inv-table tbody tr:hover {
  background: var(--color-surface);
}

.inv-table td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-ink);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}

/* Financial statement table: label on the left, figure on the right,
   monospaced and decimal-aligned so columns of money scan cleanly. */
.inv-table--statement th {
  text-align: left;
  font-weight: 500;
  color: var(--color-ink);
}
.inv-table--statement td {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.inv-table--statement tr.is-total th,
.inv-table--statement tr.is-total td {
  border-top: 2px solid var(--color-border);
  font-size: 1.05rem;
}

/* Negative money (a loss / cash out) reads in the brand umber. */
.inv-neg { color: var(--color-umber); }

/* Right-aligned money cell for list tables (amounts, totals). */
.inv-table td.inv-table__money,
.inv-table th.inv-table__money {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inv-table td.inv-table__qty {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.inv-table__type-label {
  font-size: 0.875rem;
}

.inv-table__type-key {
  display: block;
  font-size: 0.75rem;
  color: var(--color-ink-faint);
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* ─── Empty state ───────────────────────────────────────────────────────── */

.inv-empty {
  padding: var(--space-8) var(--space-6);
  text-align: center;
  color: var(--color-ink-faint);
  font-size: 0.9375rem;
}

.inv-empty__heading {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-2) 0;
}

.inv-empty__body {
  margin: 0;
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */

.inv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.inv-btn:focus-visible {
  /* One focus token across the app (2px white + 2px umber, 6.6:1 on white).
     The transparent outline is the forced-colors fallback: box-shadow is
     dropped in Windows High Contrast, the outline is repainted visible. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

/* Primary — burnt umber fill */
.inv-btn--primary {
  background: var(--color-umber);
  color: #fff;
  border-color: var(--color-umber);
}

.inv-btn--primary:hover {
  background: var(--color-umber-dark);
  border-color: var(--color-umber-dark);
}

/* Secondary — outlined */
.inv-btn--secondary {
  background: transparent;
  color: var(--color-umber);
  border-color: var(--color-umber);
}

.inv-btn--secondary:hover {
  background: var(--color-umber-light);
}

/* Ghost — neutral outlined */
.inv-btn--ghost {
  background: transparent;
  color: var(--color-ink-muted);
  border-color: var(--color-border);
}

.inv-btn--ghost:hover {
  background: var(--color-surface);
  color: var(--color-ink);
}

/* Small variant */
.inv-btn--sm {
  font-size: 0.8125rem;
  padding: var(--space-1) var(--space-3);
}

/* Approve button — prominent but not reckless */
.inv-btn--approve {
  background: var(--color-umber);
  color: #fff;
  border-color: var(--color-umber);
  font-size: 0.8125rem;
  padding: var(--space-1) var(--space-3);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.inv-btn--approve:hover {
  background: var(--color-umber-dark);
  border-color: var(--color-umber-dark);
}

/* Inline form wrapper (approve form inside table cell) */
.inv-inline-form {
  display: inline;
}

.inv-approve-form {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin-right: var(--space-2);
  margin-bottom: var(--space-2);
}

.inv-approval-confirm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-ink-muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

.inv-approval-confirm input {
  margin: 0;
  accent-color: var(--color-umber);
}

/* Bulk "Approve all" banner at the top of the pending queue. */
.inv-approve-all {
  border-left: 4px solid var(--color-umber);
}

.inv-approve-all .inv-approve-form {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

.inv-approve-all .inv-approval-confirm {
  font-size: 0.8125rem;
}

/* ─── Form layout ───────────────────────────────────────────────────────── */

.inv-form {
  margin-top: var(--space-5);
}

.inv-form__field {
  margin-bottom: var(--space-5);
  max-width: 40rem;
}

.inv-form__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-1);
  letter-spacing: 0.01em;
}

.inv-form__input,
.inv-form input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.inv-form select,
.inv-form textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-ink);
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.inv-form__input:focus,
.inv-form input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):focus,
.inv-form select:focus,
.inv-form textarea:focus {
  outline: 2px solid transparent;
  border-color: var(--color-umber);
  box-shadow: var(--shadow-focus);
}

.inv-form__help {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-ink-faint);
  margin-top: var(--space-1);
}

.inv-form__errors {
  list-style: none;
  margin: var(--space-1) 0 0 0;
  padding: 0;
}

.inv-form__errors li {
  font-size: 0.8125rem;
  color: var(--color-error);
  margin-top: 2px;
}

.inv-form__errors--panel {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-error-bg);
  border: 1px solid #f5b7a8;
  border-radius: var(--radius-md);
}

.inv-form__errors--panel li {
  margin-top: 0;
}

.inv-form__actions {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* Page-level action/link row (not a form submit bar) */
.inv-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  margin: var(--space-4) 0 var(--space-5);
}

/* ─── Status badge ──────────────────────────────────────────────────────── */

.inv-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.inv-badge--contention {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.inv-badge--warn {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

/* Quantity cell whose available-after-pending balance is oversubscribed —
   pending outgoing demand exceeds approved on-hand stock. */
.inv-qty-warn {
  color: var(--color-error);
  font-weight: 700;
}

/* ─── Confirmation / success page ───────────────────────────────────────── */

.inv-confirm {
  max-width: 540px;
}

.inv-confirm__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}

.inv-confirm__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-umber);
  margin: 0 0 var(--space-3) 0;
}

.inv-confirm__body {
  font-size: 0.9375rem;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-2) 0;
}

.inv-confirm__links {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Approvals table: keep the quantity visible before action controls */

.inv-table--approvals {
  min-width: max-content;
}

.inv-table--approvals .inv-table__qty {
  min-width: 4.5rem;
  padding-right: var(--space-4);
  text-align: right;
}

.inv-table--approvals .inv-table__action-cell,
.inv-table--approvals .inv-table__action-head {
  min-width: 17rem;
  white-space: nowrap;
}

/* Tighter cells on wide data tables */
.inv-table--dense thead th,
.inv-table--dense td {
  padding: var(--space-2) var(--space-3);
}

/* UUID summary toggle (progressive disclosure) */
.inv-uuid-detail summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-faint);
  list-style: none;
  user-select: none;
}

.inv-uuid-detail summary::-webkit-details-marker { display: none; }

.inv-uuid-detail[open] summary {
  color: var(--color-ink-muted);
  margin-bottom: 2px;
}

.inv-uuid-full {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-ink-faint);
  word-break: break-all;
  white-space: normal;
  max-width: 200px;
}

.inv-text-muted  { color: var(--color-ink-muted); }
.inv-text-sm     { font-size: 0.875rem; }
.inv-mono        { font-family: var(--font-mono); }
.inv-sr-only {
  position: absolute;
  /* Anchor to the containing block's left edge so that, even with no
     positioned ancestor, the span can never sit at its static position inside
     an overflow scroller and widen the page. Do not remove. */
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Reject form ───────────────────────────────────────────────────────── */

/* Reject button — subdued, destructive intent but not alarming */
.inv-btn--reject {
  background: transparent;
  color: var(--color-ink-muted);
  border-color: var(--color-border);
  font-size: 0.8125rem;
  padding: var(--space-1) var(--space-3);
  font-weight: 500;
}

.inv-btn--reject:hover {
  background: var(--color-error-bg);
  color: var(--color-umber);
  border-color: var(--color-umber);
}

/* Reject form layout inside action cell */
.inv-reject-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.inv-reject-reason {
  font: inherit;
  font-size: 0.8125rem;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  width: 180px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.inv-reject-reason:focus {
  outline: 2px solid transparent;
  border-color: var(--color-umber);
  box-shadow: var(--shadow-focus);
}

.inv-reject-reason::placeholder {
  color: var(--color-ink-faint);
}

/* ─── Logo nav: home link + logo image ─────────────────────────────────── */

.inv-topnav__home {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  margin-right: var(--space-2);
  padding-right: var(--space-4);
  border-right: 1px solid var(--color-border-light);
}

.inv-topnav__logo {
  display: block;
  height: 32px;
  width: auto;
}

/* ─── Nav user area (avatar menu) ───────────────────────────────────────── */

.inv-topnav__user {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

.inv-topnav__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-umber);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.inv-topnav__username {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

/* No chevron on the user menu: the avatar is the affordance */
.inv-nav-group__summary--user::after {
  display: none;
}

/* Tight desktop widths: avatar only, full name lives in the panel */
@media (min-width: 721px) and (max-width: 1080px) {
  .inv-topnav__username {
    display: none;
  }
}

.inv-nav-group__summary--user {
  padding: var(--space-1) var(--space-2);
}

.inv-topnav__signout {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  width: 100%;
  text-align: left;
}

.inv-topnav__logout-form {
  margin: 0;
  display: flex;
}

/* ─── Confirm page: request ID reference line ───────────────────────────── */
/* ─── Confirm page: request ID reference line ───────────────────────────── */

.inv-confirm__ref {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
}


/* ─── Small-screen resilience ───────────────────────────────────────────── */

/* ─── Daily sales review ────────────────────────────────────────────────── */

.inv-header--split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}

.inv-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.inv-metric-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 1px 2px rgba(68, 32, 20, 0.04);
}

.inv-metric-card__label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-ink-faint);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inv-metric-card__value {
  color: var(--color-ink);
  font-size: 1.15rem;
  font-weight: 700;
}

.inv-metric-card__hint {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-ink-faint);
  font-size: 0.8125rem;
  font-weight: 600;
}

.inv-review-stack {
  display: grid;
  gap: var(--space-5);
}

.inv-review-card {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(68, 32, 20, 0.06);
}

.inv-review-card__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  background: linear-gradient(135deg, #fff7f3 0%, #fff 100%);
  border-bottom: 1px solid var(--color-border-light);
}

.inv-review-card__eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-ink-faint);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inv-review-card__title {
  margin: 0;
  color: var(--color-umber);
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.inv-review-card__customer {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-muted);
  font-weight: 600;
}

.inv-review-card__totals {
  display: grid;
  gap: var(--space-1);
  justify-items: end;
  align-content: start;
  color: var(--color-ink);
}

.inv-review-card__status-totals {
  display: grid;
  gap: 2px;
  justify-items: end;
  color: var(--color-ink-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.inv-review-card__line-count {
  color: var(--color-ink-faint);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
}

.inv-review-item__name,
.inv-review-item__finish,
.inv-uuid-short {
  display: block;
}

.inv-review-item__name {
  margin-top: 2px;
  font-weight: 600;
}

.inv-review-item__finish {
  color: var(--color-ink-faint);
  font-size: 0.8125rem;
}

.inv-uuid-short {
  margin-top: 2px;
  color: var(--color-ink-faint);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.inv-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px var(--space-2);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.inv-status--pending {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.inv-status--approved {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.inv-status--rejected,
.inv-status--voided {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.inv-table--sales-review {
  min-width: 900px;
}

@media (max-width: 720px) {
  .inv-topnav {
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: 52px;
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-4);
    position: static;
  }

  .inv-topnav__home {
    border-right: none;
    padding-right: 0;
  }

  .inv-topnav__toggle {
    display: inline-flex;
  }

  .inv-topnav__menu {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-2) 0 var(--space-3);
  }

  .inv-topnav--open .inv-topnav__menu {
    display: flex;
  }

  .inv-topnav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
  }

  .inv-nav-group {
    width: 100%;
  }

  .inv-nav-group__summary {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-3);
  }

  .inv-topnav__links > .inv-topnav__link,
  .inv-nav-group__panel .inv-topnav__link {
    padding: var(--space-3);
  }

  .inv-nav-group__panel {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 var(--space-1) var(--space-4);
    min-width: 0;
    animation: none;
  }

  .inv-topnav__user {
    width: 100%;
    margin-left: 0;
  }

  .inv-nav-group__summary--user {
    width: 100%;
  }

  .inv-nav-group__summary--user .inv-topnav__username {
    flex: 1;
    text-align: left;
    max-width: none;
  }

  .inv-nav-group__label {
    white-space: normal;
  }


  .inv-page {
    padding: var(--space-5) var(--space-4);
  }

  .inv-header {
    margin-bottom: var(--space-5);
  }

  .inv-header__title {
    font-size: 1.45rem;
  }

  .inv-filters {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }

  .inv-filters__input,
  .inv-filters__select,
  .inv-filters .inv-btn {
    width: 100%;
    min-width: 0;
  }

  .inv-scroll-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .inv-scroll-actions {
    width: 100%;
  }

  .inv-scroll-btn {
    flex: 1 1 0;
  }

  .inv-header--split {
    flex-direction: column;
  }

  .inv-metrics {
    grid-template-columns: 1fr;
  }

  .inv-review-card__head {
    flex-direction: column;
  }

  .inv-review-card__totals {
    justify-items: start;
  }

  .inv-table-wrap {
    border-radius: var(--radius-sm);
  }

  .inv-table {
    font-size: 0.875rem;
  }

  .inv-table thead th,
  .inv-table td,
  .inv-table--dense thead th,
  .inv-table--dense td {
    padding: var(--space-2);
  }

  .inv-table--approvals .inv-table__action-cell,
  .inv-table--approvals .inv-table__action-head {
    position: static;
    border-left: 0;
  }

  .inv-reject-form {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  .inv-reject-reason {
    width: 100%;
    min-width: 12rem;
  }

  .inv-form__actions,
  .inv-confirm__links {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-2);
  }

  .inv-form__actions .inv-btn,
  .inv-confirm__links .inv-btn {
    width: 100%;
  }

  .inv-confirm {
    max-width: none;
  }
  .inv-table--stock-inquiry thead {
    display: none;
  }

  .inv-table--stock-inquiry tbody tr {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
  }

  .inv-table--stock-inquiry td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border: 0;
    padding: var(--space-1) 0;
    text-align: right;
  }

  .inv-table--stock-inquiry td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-ink-faint);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    margin-right: var(--space-3);
    text-align: left;
  }

  .inv-table--stock-inquiry td.inv-table__qty {
    font-size: 1.125rem;
    font-weight: 700;
  }

}

/* ---------------------------------------------------------------------------
   Pagination controls — review queue page navigation
   --------------------------------------------------------------------------- */
.inv-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.inv-pagination__status {
  font-size: 0.875rem;
  color: var(--color-ink-muted);
}

.inv-pagination__disabled {
  opacity: 0.45;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .inv-scroll-btn:active:not(:disabled) {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Movement history table — wide layout + voided/direction affordances
   --------------------------------------------------------------------------- */
.inv-table-wrap--history {
  overflow-x: auto;
  scrollbar-gutter: stable;
}

.inv-row--voided {
  opacity: 0.6;
}

.inv-direction--in {
  color: var(--color-success);
  font-weight: 600;
}

.inv-direction--out {
  color: var(--color-ink-muted);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Mobile staff workflow polish — product quick-search + recent-submission
   panels + sticky form actions. Used by stock_request and daily_sales_entry.
   --------------------------------------------------------------------------- */

/* Search box injected above a <select data-product-search> by
   product_search.js. It inherits the base `.inv-form input` styling; this
   only adds the gap between the filter box and the native dropdown. */
.inv-product-search {
  margin-bottom: var(--space-2);
}

.inv-recent {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.inv-recent__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--color-umber);
  margin: 0 0 var(--space-4);
}

.inv-recent__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.inv-recent__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.inv-recent__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.inv-recent__product {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-ink);
}

.inv-recent__status {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted);
  background: var(--color-surface-alt);
}

.inv-recent__status--pending {
  color: var(--color-warning);
  background: var(--color-warning-bg);
}

.inv-recent__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-3) 0 0;
}

.inv-recent__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inv-recent__meta-item dt {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
}

.inv-recent__meta-item dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-ink);
}

.inv-recent__time {
  display: block;
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  color: var(--color-ink-faint);
}

/* Sticky action bar — keeps Submit/Cancel reachable while a mobile operator
   scrolls a long form. Desktop layout is untouched. */
@media (max-width: 720px) {
  .inv-form__actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding: var(--space-3) 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 8px rgba(26, 26, 26, 0.06);
  }

  .inv-form__actions .inv-btn {
    flex: 1;
    width: auto;
  }

  .inv-recent__meta {
    gap: var(--space-2) var(--space-4);
  }
}

/* ─── Wide table scroll affordances ─────────────────────────────────────── */
.inv-scroll-panel {
  position: relative;
  margin-bottom: var(--space-5);
  display: grid;
  gap: var(--space-2);
}

.inv-scroll-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-2) var(--space-3);
}

.inv-scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-ink-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.inv-scroll-hint::before {
  content: "↔";
  color: var(--color-umber);
  font-size: 1rem;
}

.inv-scroll-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

.inv-scroll-btn {
  appearance: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-umber);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  box-shadow: 0 1px 2px rgba(68, 32, 20, 0.08);
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s, transform 0.15s;
}

.inv-scroll-btn:hover,
.inv-scroll-btn:focus-visible {
  border-color: var(--color-umber);
  outline: none;
}

.inv-scroll-btn:hover:not(:disabled) {
  color: var(--color-umber);
}

.inv-scroll-btn:focus-visible {
  color: var(--color-umber);
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
}

.inv-scroll-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.inv-scroll-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@media (min-width: 900px) {
  .inv-scroll-toolbar {
    display: none;
  }
}

@media (max-width: 768px) {
  .inv-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  .inv-scroll-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------------
   Section card — title + vertical rhythm
   Defines the inv-card__title / inv-card--section components referenced by the
   owner cockpit and approvals hub. Both were previously unstyled, so stacked
   section cards rendered flush with default-h2 headings.
   --------------------------------------------------------------------------- */

.inv-card__title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-umber);
  margin: 0 0 var(--space-3);
}

/* Section cards stack with breathing room; the last one needs no trailing gap. */
.inv-card--section {
  margin-bottom: var(--space-5);
}

.inv-card--section:last-child {
  margin-bottom: 0;
}

/* Watch accent — a restrained left rule flags "keep an eye on this" sections
   (dead stock, FX margin-at-risk) without shouting. */
.inv-card--watch {
  border-left: 3px solid var(--color-warning);
}

/* ---------------------------------------------------------------------------
   Owner cockpit — headline KPI band
   The money numbers an importer-owner glances at first: large, scannable stat
   cards in a grid that wraps gracefully (auto-fill keeps a lone trailing card
   from stretching across a full row). "Watch" numbers (dead-stock capital,
   overdue receivables, FX-at-risk) and a negative net cash position carry a
   tasteful warning/alert accent — colored value plus a left rule, no loud fills.
   --------------------------------------------------------------------------- */

.inv-cockpit-kpis {
  margin-bottom: var(--space-6);
}

.inv-cockpit-kpis__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

/* Lightweight uppercase section heading sitting above the KPI grid. */
.inv-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-bottom: var(--space-4);
}

.inv-section-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.inv-section-head__meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-ink-faint);
}

.inv-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-4);
}

.inv-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(68, 32, 20, 0.04);
}

.inv-stat__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.inv-stat__value {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* Currency code rides smaller and muted so the number itself dominates. */
.inv-stat__unit {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink-faint);
}

.inv-stat__hint {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-faint);
}

/* Watch — amber caution (locked capital, overdue AR, FX margin-at-risk). */
.inv-stat--watch {
  border-left-color: var(--color-warning);
}

.inv-stat--watch .inv-stat__value {
  color: var(--color-warning);
}

/* Alert — stronger umber, reserved for a negative net cash position. */
.inv-stat--alert {
  border-left-color: var(--color-error);
}

.inv-stat--alert .inv-stat__value {
  color: var(--color-error);
}

/* ---------------------------------------------------------------------------
   Owner cockpit — "Awaiting your approval" action callout
   A single prominent card directly under the KPI band: big count, breakdown,
   and a primary CTA to the approvals hub. Calms to a success tone when clear.
   --------------------------------------------------------------------------- */

.inv-cockpit-approvals {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-umber-tint);
  border: var(--border-width-default) solid var(--color-umber);
  border-radius: var(--radius-lg);
}

.inv-cockpit-approvals--clear {
  background: var(--color-success-bg);
  border-color: var(--color-success);
}

.inv-cockpit-approvals__count {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-umber);
  font-variant-numeric: tabular-nums;
}

.inv-cockpit-approvals--clear .inv-cockpit-approvals__count {
  color: var(--color-success);
}

.inv-cockpit-approvals__body {
  flex: 1 1 14rem;
}

.inv-cockpit-approvals__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-ink);
}

.inv-cockpit-approvals__detail {
  margin: var(--space-1) 0 0;
  font-size: 0.875rem;
  color: var(--color-ink-muted);
}

.inv-cockpit-approvals__cta {
  flex-shrink: 0;
}

/* ─── Cockpit small-screen polish ───────────────────────────────────────── */
@media (max-width: 720px) {
  .inv-stat-grid {
    grid-template-columns: 1fr;
  }

  .inv-stat__value {
    font-size: 1.5rem;
  }

  .inv-cockpit-approvals__cta {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Approvals decision ledger
   Queue scope tabs, the bulk-approval panel, and the per-request decision
   rows. Ported from prototypes/approvals-a-decision-ledger.html. All rules
   consume design tokens only. The old approval-table and scroll rules stay
   in place for the unconverted surfaces.
   --------------------------------------------------------------------------- */

/* Queue scope tabs: All / Stock / Invoices. The active tab carries a strong
   umber underline, the rest sit muted with a transparent one of equal width. */
.inv-scope-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  border-bottom: var(--border-width-thin) solid var(--color-border);
}

.inv-scope-tabs a {
  min-height: var(--space-7);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-4);
  color: var(--color-ink-muted);
  text-decoration: none;
  border-bottom: var(--border-width-strong) solid transparent;
  transition: color var(--motion-base) var(--motion-ease-out),
    border-color var(--motion-base) var(--motion-ease-out);
}

.inv-scope-tabs a:hover {
  color: var(--color-umber);
}

.inv-scope-tabs a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
}

.inv-scope-tabs a[aria-current="page"] {
  color: var(--color-umber);
  border-bottom-color: var(--color-umber);
  font-weight: var(--font-weight-semibold);
}

.inv-scope-tabs small {
  margin-inline-start: var(--space-2);
  color: var(--color-ink-muted);
}

/* Invoice approvals use one ledger at every width. Desktop keeps the quick
   column scan; narrow screens recompose the same item into a decision card,
   so no field or action moves behind a horizontal scroll. */
.inv-approval-section {
  margin-bottom: var(--space-6);
}

.inv-approval-section > .inv-approve-all {
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-umber-tint);
}

.inv-approval-section > .inv-approve-all .inv-approval-confirm {
  min-height: var(--space-7);
  padding: var(--space-2);
  cursor: pointer;
}

.inv-approval-section > .inv-approve-all .inv-approval-confirm input {
  width: var(--space-5);
  height: var(--space-5);
  flex: 0 0 auto;
}

.inv-approval-ledger {
  overflow: hidden;
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-white);
}

.inv-approval-ledger__head,
.inv-approval-item {
  display: grid;
  grid-template-columns:
    minmax(9rem, 1fr)
    minmax(10rem, 1.15fr)
    minmax(7rem, 0.65fr)
    minmax(17rem, 1.45fr);
  gap: var(--space-4);
}

.inv-approval-ledger__head {
  padding: var(--space-2) var(--space-4);
  color: var(--color-ink-muted);
  background: var(--color-surface-alt);
  border-bottom: var(--border-width-thin) solid var(--color-border);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inv-approval-item {
  align-items: start;
  padding: var(--space-4);
}

.inv-approval-item + .inv-approval-item {
  border-top: var(--border-width-thin) solid var(--color-border-light);
}

.inv-approval-item > * {
  min-width: 0;
}

.inv-approval-item__primary h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: 1.3;
}

.inv-approval-item__primary h3 a {
  color: var(--color-ink);
  text-decoration: none;
}

.inv-approval-item__primary h3 a:hover,
.inv-approval-item__primary h3 a:focus-visible {
  color: var(--color-ink);
  text-decoration: underline;
}

.inv-approval-item__primary time {
  display: block;
  color: var(--color-ink-muted);
  font-size: var(--font-size-md);
  font-variant-numeric: tabular-nums;
}

.inv-approval-item__detail-link {
  display: inline-block;
  min-height: 44px;
  padding-block: var(--space-3);
  font-size: var(--font-size-md);
  color: var(--color-umber);
  font-weight: var(--font-weight-semibold);
  text-underline-offset: 0.2em;
}

.inv-approval-item__detail-link:hover {
  color: var(--color-umber-dark);
}

.inv-approval-item__detail-link:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

.inv-approval-item__customer,
.inv-approval-item__total {
  overflow-wrap: anywhere;
}

.inv-approval-item__total strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inv-approval-item__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inv-approval-item__actions {
  align-self: stretch;
  grid-column: 4;
  grid-row: 1;
}

.inv-approval-item__lines {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}

/* A decision result shown at the row the approver landed on takes the first
   grid row; the pinned actions and line items move down one, so the flash
   sits above the row's own number and controls (the narrow layout below
   flows in source order and needs none of this). */
.inv-approval-item--flash > .inv-decision-flash {
  grid-row: 1;
}

.inv-approval-item--flash > .inv-approval-item__actions {
  grid-row: 2;
}

.inv-approval-item--flash > .inv-approval-item__lines {
  grid-row: 3;
}

.inv-approval-item__lines > .inv-release-lines {
  border: var(--border-width-thin) solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.inv-approval-item__lines > p {
  margin: 0;
}

.inv-approval-item--payment .inv-approval-item__customer-name {
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.inv-approval-item--payment .inv-approval-item__meta {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-md);
}

.inv-payment-confirm .inv-form__field {
  margin-bottom: var(--space-3);
  max-width: none;
}

.inv-payment-confirm .inv-form__actions {
  margin-top: 0;
}

.inv-payment-confirm__submit {
  width: 100%;
  min-height: 44px;
  white-space: normal;
  text-align: center;
}

/* A release request is one decision card: identity, goods, blocker (if any),
   then the confirmation and commit action. The goods list deliberately uses
   normal-flow grid rows instead of a table with a scrolling wrapper. */
.inv-release-approval {
  overflow: hidden;
  margin-bottom: var(--space-5);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-white);
}

/* Result of the previous decision at the card the approver lands on (F1). */
.inv-release-approval > .inv-release-approval__flash {
  margin: 0;
  padding: var(--space-3) var(--space-4) 0;
  background: var(--color-surface);
}

.inv-release-approval__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface);
}

.inv-release-approval__header > div {
  min-width: 0;
}

.inv-release-approval__header h3 {
  margin: 0 0 var(--space-1);
  color: var(--color-umber);
  font-size: var(--font-size-lg);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.inv-release-approval__header p {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-md);
}

.inv-release-approval__review {
  flex: 0 0 auto;
  min-height: 44px;
}

.inv-release-lines {
  border-top: var(--border-width-thin) solid var(--color-border-light);
  border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.inv-release-lines__head,
.inv-release-line {
  display: grid;
  grid-template-columns: minmax(12rem, 1.5fr) minmax(5rem, 0.45fr) minmax(5rem, 0.45fr) minmax(9rem, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.inv-release-lines--compact .inv-release-lines__head,
.inv-release-lines--compact .inv-release-line {
  grid-template-columns: minmax(12rem, 1.5fr) minmax(5rem, 0.45fr) minmax(5rem, 0.45fr);
}

.inv-release-lines__head {
  padding: var(--space-2) var(--space-4);
  color: var(--color-ink-muted);
  background: var(--color-surface-alt);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inv-release-lines__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.inv-release-line {
  padding: var(--space-3) var(--space-4);
}

.inv-release-line + .inv-release-line {
  border-top: var(--border-width-thin) solid var(--color-border-light);
}

.inv-release-line > * {
  min-width: 0;
}

.inv-release-line__identity strong,
.inv-release-line__identity span {
  display: block;
  overflow-wrap: anywhere;
}

.inv-release-line__identity strong,
.inv-release-line__value strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.inv-release-line__identity span,
.inv-release-line__source {
  color: var(--color-ink-muted);
  font-size: var(--font-size-md);
}

.inv-release-line__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inv-release-approval__notice {
  margin: var(--space-4) var(--space-4) 0;
  padding: var(--space-3);
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border: var(--border-width-thin) solid var(--color-warning);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
}

.inv-release-approval__action {
  padding: var(--space-4);
}

.inv-release-approval__action .inv-approve-all {
  border-left: 0;
}

.inv-release-approval__action .inv-approve-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin: 0;
}

.inv-release-approval__action .inv-approval-confirm {
  min-height: var(--space-7);
  padding: var(--space-2);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  cursor: pointer;
}

.inv-release-approval__action .inv-approval-confirm input {
  width: var(--space-5);
  height: var(--space-5);
  flex: 0 0 auto;
}

.inv-release-approval__action .inv-approval-confirm:focus-within {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
}

.inv-release-approval__action .inv-btn {
  min-height: var(--space-7);
}

/* Bulk "Approve all pending stock" panel. Umber-tint surface, one section
   per queue. The included bulk_approve form is restyled to the panel's
   vertical rhythm; the umber fill stays on the bulk submit only. */
.inv-bulk-stock {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-umber-tint);
}

.inv-bulk-stock h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-3xl);
  line-height: 1.25;
}

.inv-bulk-stock__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-5);
  align-items: start;
}

.inv-bulk-stock__magnitude {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-muted);
}

.inv-bulk-stock__magnitude strong {
  color: var(--color-ink);
}

.inv-bulk-stock__note {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}

/* The panel hosts the shared bulk_approve include; drop the old left-stripe
   banner treatment and stack the confirm row above the umber submit. */
.inv-bulk-stock .inv-approve-all {
  border-left: 0;
}

.inv-bulk-stock .inv-approve-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin: 0;
}

.inv-bulk-stock .inv-approve-form .inv-btn {
  min-height: var(--space-7);
  padding: var(--space-2) var(--space-4);
}

/* The bulk confirmation gets the row-confirm target: 24px box inside a 48px
   bordered label, with the shared focus ring on the whole label. */
.inv-bulk-stock .inv-approval-confirm {
  min-height: var(--space-7);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  color: var(--color-ink);
  background: var(--color-surface-white);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  cursor: pointer;
}

.inv-bulk-stock .inv-approval-confirm input {
  width: var(--space-5);
  height: var(--space-5);
  margin: 0;
  accent-color: var(--color-umber);
  flex: 0 0 auto;
}

.inv-bulk-stock .inv-approval-confirm:focus-within {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
}

/* Contention warning inside the bulk panel: error text on the error tint,
   thin error border. */
.inv-contention-summary {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--color-error);
  background: var(--color-error-bg);
  border: var(--border-width-thin) solid var(--color-error);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
}

/* Queue heading row: section title plus the "Showing N of M" summary. */
.inv-queue-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.inv-queue-heading h2,
.inv-queue-heading p {
  margin-bottom: 0;
}

/* The section gap above comes from the preceding block (bulk panel, filters);
   no extra heading margin, so the first decision sits higher (F12). */
.inv-queue-heading h2 {
  margin-top: 0;
}

.inv-queue-heading p {
  color: var(--color-ink-muted);
  font-size: var(--font-size-md);
}

/* Decision list: the bordered container holding contention groups and
   decision items. Rows below carry their own light rules. */
.inv-decision-list {
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}

/* Decision item: identity, movement, balance, actions. Four columns on
   desktop, each minmax(0, …) so long mono strings cannot blow the row out. */
.inv-decision-item {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(240px, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.inv-decision-list > .inv-decision-item:last-child {
  border-bottom: 0;
}

.inv-decision-item h3,
.inv-decision-item h4 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-lg);
  line-height: 1.3;
}

.inv-decision-item__identity,
.inv-decision-item__movement,
.inv-decision-item__balance {
  min-width: 0;
}

/* SKU: mono, umber, medium weight. Shared by decision items and contention
   group identity lines. */
.inv-decision-item__sku {
  display: block;
  color: var(--color-umber);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.inv-decision-item__finish {
  color: var(--color-ink-muted);
  font-size: var(--font-size-md);
}

/* Quantity figure inside the movement sentence. */
.inv-decision-item__figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Movement type, stated before the figure. A sale, a sample, a damage
   report and a loss all move stock out and must not read alike. */
.inv-decision-item__kind {
  display: inline-block;
  margin-right: var(--space-1);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inv-decision-item__request {
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-semibold);
}

.inv-decision-item__reason {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-md);
}

/* Balance: the large mono result figure with the on-hand/pending meta. */
.inv-decision-item__balance strong {
  display: block;
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.inv-decision-item__meta {
  display: block;
  color: var(--color-ink-muted);
  font-size: var(--font-size-md);
}

/* Decision controls: two equal tracks. The row confirm and the reject
   disclosure each span the full width of the cell. */
.inv-decision-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: start;
}

.inv-decision-actions > .inv-row-confirm {
  grid-column: 1 / -1;
}

.inv-decision-actions .inv-approve-form {
  display: contents;
}

/* Row confirm: the full-width review checkbox. 48px minimum, 24px checkbox,
   umber accent. Ported from the prototype's .row-confirm; also upgrades the
   shared .inv-approval-confirm label when rendered inside the decision cell. */
.inv-row-confirm,
.inv-decision-actions .inv-approval-confirm {
  min-height: var(--space-7);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  color: var(--color-ink-muted);
  background: var(--color-surface);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.inv-decision-actions .inv-approval-confirm {
  grid-column: 1 / -1;
}

.inv-decision-actions .inv-approve-form .inv-btn {
  grid-column: 1;
}

.inv-decision-actions > .inv-reject-disclosure {
  grid-column: 2;
}

.inv-row-confirm input,
.inv-decision-actions .inv-approval-confirm input {
  width: var(--space-5);
  height: var(--space-5);
  margin: 0;
  accent-color: var(--color-umber);
  flex: 0 0 auto;
}

.inv-row-confirm:focus-within,
.inv-decision-actions .inv-approval-confirm:focus-within {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
}

/* Decision buttons inside the cell: full width of their track, 48px minimum.
   Approve loses the umber fill here (umber stays reserved for bulk) so the
   two controls read as equal-height, equal-weight decisions. */
.inv-decision-actions .inv-btn {
  white-space: normal;
  overflow-wrap: anywhere;
  padding-inline: var(--space-2);
  min-height: var(--space-7);
  width: 100%;
}

.inv-decision-actions .inv-btn--approve {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-border);
  padding: var(--space-2) var(--space-4);
  font-size: inherit;
  letter-spacing: inherit;
}

/* Reject (the disclosure summary and the "Confirm rejection" submit) carries
   the same size and weight as Approve: the decision is neutral. */
.inv-decision-actions .inv-btn--reject {
  padding: var(--space-2) var(--space-4);
  color: var(--color-ink);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: inherit;
}

/* Reject disclosure: the Reject summary renders as the neutral decision
   button; opening it reveals the typed reason and the confirm submit. */
.inv-reject-disclosure {
  min-width: 0;
}

.inv-reject-disclosure summary {
  list-style: none;
}

.inv-reject-disclosure summary::-webkit-details-marker {
  display: none;
}

.inv-decision-actions > .inv-reject-disclosure[open] {
  grid-column: 1 / -1;
}

.inv-reject-disclosure[open] .inv-reject-form {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.inv-reject-disclosure .inv-reject-reason {
  box-sizing: border-box;
  resize: vertical;
  width: 100%;
  min-width: 0;
  min-height: var(--space-7);
}

.inv-reject-disclosure .inv-reject-reason:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
}

.inv-reject-disclosure .inv-reject-form .inv-btn {
  min-height: var(--space-7);
}

/* Request details: native disclosure with a wrap-around definition list.
   Ported from the prototype's .on-demand. */
.inv-request-details {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
}

.inv-request-details summary {
  min-height: var(--space-7);
  display: inline-flex;
  align-items: center;
  color: var(--color-umber);
  cursor: pointer;
  font-size: var(--font-size-md);
}

.inv-request-details summary::-webkit-details-marker {
  display: none;
}

.inv-request-details summary:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
}

.inv-request-details dl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
}

.inv-request-details dt {
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}

.inv-request-details dd {
  margin: 0;
  font-size: var(--font-size-md);
}

/* Contention group: warning tint behind the competing requests, a warning
   bottom rule under its header, and the shortfall balances in error red. */
.inv-contention-group {
  border-bottom: var(--border-width-thin) solid var(--color-border);
  background: var(--color-warning-bg);
}

/* Two lines (F12): title, then SKU and source; the stock equation sits
   beside both as one row, so a leading group does not push the first
   Approve below a 900px viewport. */
.inv-contention-group__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-thin) solid var(--color-warning);
}

.inv-contention-group__header h3 {
  grid-column: 1;
  margin: 0;
  color: var(--color-error);
  font-size: var(--font-size-lg);
  line-height: 1.3;
}

.inv-contention-group__header p {
  grid-column: 1;
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-md);
}

.inv-contention-group__stock .inv-decision-item__sku {
  display: inline;
  margin-right: var(--space-1);
}

.inv-contention-group .inv-decision-item {
  background: var(--color-warning-bg);
}

.inv-decision-item__balance strong.is-shortfall {
  color: var(--color-error);
}

/* Stock equation: the on-hand / pending / after-pending triple inside the
   contention header, one compact row of label + figure cells (wrapping on
   narrow screens). Shortfall cell reads in error red. */
.inv-stock-equation {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.inv-stock-equation div {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  border: var(--border-width-thin) solid var(--color-border-light);
  border-radius: var(--radius-sm);
}

.inv-stock-equation dt {
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}

.inv-stock-equation dd {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.inv-stock-equation .is-shortfall dd {
  color: var(--color-error);
}

/* Below this the title column gets too narrow beside the equation: stack it. */
@media (max-width: 960px) {
  .inv-contention-group__header {
    grid-template-columns: minmax(0, 1fr);
  }

  .inv-stock-equation {
    grid-column: 1;
    grid-row: auto;
  }
}

/* The invoice decision grid needs 768px including its gaps and padding. The
   page shell reaches that limit before the global phone breakpoint, so the
   item adopts its card reading order on small tablets as well as phones. */
@media (max-width: 840px) {
  .inv-approval-ledger {
    display: grid;
    gap: var(--space-3);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .inv-approval-ledger__head {
    display: none;
  }

  .inv-approval-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3) var(--space-4);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-white);
  }

  .inv-approval-item + .inv-approval-item {
    border-top: var(--border-width-thin) solid var(--color-border);
  }

  .inv-approval-item__primary,
  .inv-approval-item__lines,
  .inv-approval-item__actions,
  .inv-approval-item--flash > .inv-decision-flash,
  .inv-approval-item--flash > .inv-approval-item__lines,
  .inv-approval-item--flash > .inv-approval-item__actions {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .inv-approval-item__label {
    display: block;
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 var(--space-1);
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .inv-approval-item__actions {
    padding-top: var(--space-3);
    border-top: var(--border-width-thin) solid var(--color-border-light);
  }

  .inv-approval-item--payment .inv-approval-item__customer,
  .inv-approval-item--payment .inv-approval-item__total {
    grid-column: 1 / -1;
  }

  .inv-approval-item--payment .inv-approval-item__customer .inv-approval-item__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .inv-approval-item--payment .inv-approval-item__total .inv-approval-item__label {
    display: inline;
    position: static;
    width: auto;
    height: auto;
    margin: 0 var(--space-2) 0 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    letter-spacing: normal;
    text-transform: none;
  }

  .inv-approval-item--payment .inv-approval-item__total strong {
    font-size: var(--font-size-lg);
  }
}

@media (min-width: 841px) {
  .inv-approval-item--payment .inv-approval-item__meta {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  .inv-approval-item--payment .inv-approval-item__lines {
    grid-column: 1 / 4;
    grid-row: 3;
  }

  .inv-approval-item--payment .inv-approval-item__actions {
    grid-column: 4;
    grid-row: 1 / span 3;
    align-self: start;
  }

  /* A landed payment row (F1): the result takes row 1, the row moves down. */
  .inv-approval-item--payment.inv-approval-item--flash > .inv-approval-item__primary {
    grid-column: 1;
    grid-row: 2;
  }

  .inv-approval-item--payment.inv-approval-item--flash > .inv-approval-item__customer {
    grid-column: 2;
    grid-row: 2;
  }

  .inv-approval-item--payment.inv-approval-item--flash > .inv-approval-item__total {
    grid-column: 3;
    grid-row: 2;
  }

  .inv-approval-item--payment.inv-approval-item--flash > .inv-approval-item__meta {
    grid-row: 3;
  }

  .inv-approval-item--payment.inv-approval-item--flash > .inv-approval-item__lines {
    grid-row: 4;
  }

  .inv-approval-item--payment.inv-approval-item--flash > .inv-approval-item__actions {
    grid-row: 2 / span 3;
  }
}

/* Decision ledger, small screens: single-column rows, tabs stretch evenly,
   the bulk panel tightens, and the stock equation stacks. */
@media (max-width: 720px) {
  .inv-scope-tabs a {
    flex: 1 1 auto;
    justify-content: center;
    padding-inline: var(--space-2);
  }

  .inv-scope-tabs small {
    display: none;
  }

  .inv-approval-section > .inv-approve-all {
    padding: var(--space-3);
  }

  .inv-approval-section > .inv-approve-all .inv-approve-form {
    align-items: stretch;
    flex-direction: column;
  }

  .inv-approval-section > .inv-approve-all .inv-btn {
    min-height: var(--space-7);
    width: 100%;
  }

  .inv-release-approval__header {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }

  .inv-release-approval__review {
    align-self: stretch;
    width: 100%;
  }

  .inv-release-lines__head {
    display: none;
  }

  .inv-release-line {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3) var(--space-4);
    align-items: start;
  }

  .inv-release-lines--compact .inv-release-line {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .inv-release-line__identity,
  .inv-release-line__source {
    grid-column: 1 / -1;
  }

  .inv-release-line__label {
    display: block;
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 var(--space-1);
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .inv-release-line__source {
    padding-top: var(--space-2);
    border-top: var(--border-width-thin) solid var(--color-border-light);
  }

  .inv-release-approval__action .inv-approve-form {
    grid-template-columns: 1fr;
  }

  .inv-release-approval__action .inv-btn {
    width: 100%;
  }

  .inv-bulk-stock {
    padding: var(--space-4);
  }

  .inv-bulk-stock__grid {
    grid-template-columns: 1fr;
  }

  .inv-queue-heading {
    display: block;
  }

  .inv-queue-heading h2 {
    margin-bottom: var(--space-1);
  }

  .inv-decision-item {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .inv-decision-actions {
    grid-template-columns: 1fr 1fr;
  }


  .inv-request-details {
    grid-column: 1;
  }

  .inv-release-lines--inline-qty .inv-release-line {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: var(--space-1);
    align-items: baseline;
  }

  .inv-release-lines--inline-qty .inv-release-line__identity {
    grid-column: 1;
    padding-inline-end: var(--space-3);
  }

  .inv-release-lines--inline-qty .inv-release-line__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .inv-release-lines--inline-qty .inv-release-line__value {
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
   Owner cockpit, ledger sheet
   One 900px viewport: the approvals banner, the two-figure owner position,
   the attention ledger, and the handoff footer. Ported from
   prototypes/cockpit-a-ledger-sheet.html. All rules consume design tokens.
   --------------------------------------------------------------------------- */

/* The sheet: two columns between default-width block rules. */
.inv-cockpit-sheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-4);
  border-block: var(--border-width-default) solid var(--color-border);
}

/* Owner position column: two figure tracks plus a full-width calculation
   line, divided from the attention column by a default-width rule. */
.inv-cockpit-position {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  border-right: var(--border-width-default) solid var(--color-border);
}

/* Column heading: 12px bold uppercase with wide letter-spacing. Stays a real
   heading in the markup for aria-labelledby; the text transforms visually. */
.inv-cockpit-section-title {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-thin) solid var(--color-border-light);
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Reference figures: label, mono value, and note. The two figures in a
   position share a thin rule between them. */
.inv-cockpit-figure {
  min-width: 0;
  padding: var(--space-4);
}

.inv-cockpit-figure + .inv-cockpit-figure {
  border-left: var(--border-width-thin) solid var(--color-border-light);
}

.inv-cockpit-figure__label {
  display: block;
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.inv-cockpit-figure__value {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inv-cockpit-figure__note {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}

/* Calculation line: label with small caveat on the left, mono figure on the
   right, thin rule above. A negative net reads in error red. */
.inv-cockpit-calc {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-top: var(--border-width-thin) solid var(--color-border-light);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.inv-cockpit-calc small {
  display: block;
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}

.inv-cockpit-calc strong {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.inv-cockpit-calc--negative strong {
  color: var(--color-error);
}

/* Attention ledger: definition-list rows, each with a bold label plus a
   muted sub-line and a right-aligned status. */
.inv-cockpit-ledger {
  margin: 0;
  min-width: 0;
}

.inv-cockpit-ledger__row {
  display: grid;
  grid-template-columns: minmax(calc(var(--space-8) * 2), 1fr) auto;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.inv-cockpit-ledger__row:last-child {
  border-bottom: 0;
}

.inv-cockpit-ledger__row dt {
  font-weight: var(--font-weight-semibold);
}

.inv-cockpit-ledger__row dt span {
  display: block;
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
}

.inv-cockpit-ledger__row dd {
  margin: 0;
  text-align: right;
}

/* Ledger statuses: semibold tabular figures. Review is the umber link,
   clear reads success; the detail line rides small and muted below. */
.inv-cockpit-status,
.inv-cockpit-status--review,
.inv-cockpit-status--clear {
  display: block;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.inv-cockpit-status--review {
  color: var(--color-umber);
  text-decoration: none;
}

.inv-cockpit-status--review:hover {
  color: var(--color-umber-dark);
  text-decoration: underline;
}

.inv-cockpit-status--review:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
}

.inv-cockpit-status--clear {
  color: var(--color-success);
}

.inv-cockpit-status-detail {
  display: block;
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
}

/* Sheet footer: muted handoff line plus the related-report link nav. */
.inv-cockpit-sheet-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.inv-cockpit-sheet-footer p {
  margin: 0;
}

.inv-cockpit-sheet-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.inv-cockpit-sheet-footer__links a {
  font-weight: var(--font-weight-semibold);
  text-underline-offset: var(--space-1);
}

.inv-cockpit-sheet-footer__links a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
}

/* Ledger sheet, small screens: single column, the position rule becomes a
   bottom border, and money figures wrap instead of overflowing. */
@media (max-width: 720px) {
  .inv-cockpit-sheet {
    grid-template-columns: 1fr;
  }

  .inv-cockpit-position {
    border-right: 0;
    border-bottom: var(--border-width-default) solid var(--color-border);
  }

  .inv-cockpit-figure {
    padding: var(--space-3);
  }

  .inv-cockpit-figure__value {
    font-size: var(--font-size-3xl);
    white-space: normal;
  }

  .inv-cockpit-calc {
    align-items: start;
    flex-direction: column;
    gap: var(--space-1);
    padding-inline: var(--space-3);
  }

  .inv-cockpit-section-title,
  .inv-cockpit-ledger__row {
    padding-inline: var(--space-3);
  }

  .inv-cockpit-ledger__row {
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
  }

  .inv-cockpit-sheet-footer {
    align-items: start;
    flex-direction: column;
  }
}

/* Review evidence and batch preview remain readable at narrow widths. */
.inv-request-details__notes { flex-basis: 100%; }
.inv-request-details dd { overflow-wrap: anywhere; }
.inv-bulk-order { margin-bottom: var(--space-4); }
.inv-bulk-order summary { cursor: pointer; min-height: 44px; }
.inv-bulk-order li { margin-block: var(--space-2); overflow-wrap: anywhere; }
@media (min-width: 841px) and (max-width: 1100px) {
  .inv-decision-item { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-decision-actions { grid-column: 1 / -1; }
}

.inv-stock-filters { margin-block: var(--space-4); }
.inv-stock-filters > summary { cursor: pointer; padding-block: var(--space-3); }


/* ─── Approvals cockpit audit fixes (2026-10-08) ───────────────────────── */

/* Umber text link, the one link style on the approvals surfaces (F15). */
.inv-link {
  color: var(--color-umber);
  font-weight: var(--font-weight-semibold);
  text-underline-offset: 0.2em;
}

.inv-link:hover {
  color: var(--color-umber-dark);
}

.inv-link:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* Landing targets clear the sticky top bar when the page jumps to them (F1). */
.inv-decision-item[id],
.inv-approval-item[id],
.inv-release-approval[id],
.inv-contention-group[id],
#queue-title,
#approvals-title {
  scroll-margin-top: calc(58px + var(--space-4));
}

.inv-decision-item:focus,
.inv-approval-item:focus,
.inv-release-approval:focus,
.inv-contention-group:focus,
#queue-title:focus,
#approvals-title:focus {
  outline: none;
}

/* Result of the previous decision, shown where the approver lands (F1). */
.inv-decision-flash {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.inv-decision-flash__message {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
}

.inv-decision-flash__message--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.inv-decision-flash__message--error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.inv-decision-flash__message--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.inv-decision-flash__message--info {
  background: var(--color-info-bg);
  color: var(--color-ink-muted);
}

/* Reject reason help and inline error (F5). */
.inv-reject-help {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}

.inv-reject-error {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--color-error);
  background: var(--color-error-bg);
  border-left: 3px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
}

.inv-reject-disclosure .inv-reject-reason[aria-invalid="true"] {
  border-color: var(--color-error);
}

/* Busy decision controls (F2): the JS guard disables them in flight. */
.inv-btn[aria-busy="true"],
.inv-btn:disabled,
summary.is-busy {
  cursor: progress;
  opacity: 0.7;
}

/* A flagged invoice is approved on its own page (F8). */
.inv-decision-actions > .inv-approve-elsewhere {
  grid-column: 1;
  margin: 0;
}

.inv-approve-elsewhere .inv-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.inv-approval-flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.inv-approval-flag {
  padding: 2px var(--space-2);
  color: var(--color-error);
  background: var(--color-error-bg);
  border: var(--border-width-thin) solid var(--color-error);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.inv-invoice-approve__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* One count per concept: an in-page jump list, not tabs (F4). */
.inv-jump-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-thin) solid var(--color-border);
}

.inv-jump-nav__label {
  color: var(--color-ink-muted);
  font-size: var(--font-size-md);
}

.inv-jump-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-inline: var(--space-3);
  color: var(--color-umber);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-white);
  font-size: var(--font-size-md);
  text-decoration: none;
}

.inv-jump-nav a:hover {
  border-color: var(--color-umber);
}

.inv-jump-nav a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
}

.inv-jump-nav a[aria-current="page"] {
  color: var(--color-ink);
  background: var(--color-umber-light);
  border-color: var(--color-umber);
  font-weight: var(--font-weight-semibold);
}

/* The "not a reservation" rule, stated once per queue in the heading row
   (F12); the "Showing N of M" count keeps the right edge. */
.inv-queue-heading {
  flex-wrap: wrap;
}

.inv-queue-note {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-md);
}

.inv-queue-heading__count {
  margin-left: auto;
}

/* Contributors to a contention group's demand that have no row here (F4). */
.inv-contention-others {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  list-style: none;
  border-top: var(--border-width-thin) solid var(--color-border-light);
  color: var(--color-ink-muted);
  font-size: var(--font-size-md);
}

.inv-contention-others li + li {
  margin-top: var(--space-2);
}

.inv-contention-others a {
  display: inline-block;
  min-height: 24px;
}

/* Bulk panel: one-line summary, details behind a disclosure on long queues. */
/* Collapsed (more than a few requests): a tighter panel, so the first
   decision is visible without scrolling at 1280-1440px wide (F12). */
.inv-bulk-stock--collapsed {
  padding-block: var(--space-4);
}

.inv-bulk-stock__summary {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-muted);
}

.inv-bulk-stock__summary strong {
  color: var(--color-ink);
}

.inv-bulk-stock .inv-contention-summary + .inv-contention-summary {
  margin-top: var(--space-2);
}

.inv-bulk-stock .inv-contention-summary + details,
.inv-bulk-stock .inv-contention-summary + .inv-bulk-stock__grid {
  margin-top: var(--space-4);
}

.inv-bulk-stock__more > summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--color-umber);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.inv-bulk-stock__more > summary::-webkit-details-marker {
  display: none;
}

.inv-bulk-stock__more > summary::before {
  content: "\25B8";
  margin-inline-end: var(--space-2);
}

.inv-bulk-stock__more[open] > summary::before {
  content: "\25BE";
}

.inv-bulk-stock__more > summary:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

.inv-bulk-stock__more[open] > summary {
  margin-bottom: var(--space-3);
}

/* Empty states end with a next step (F14). */
.inv-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.inv-empty .inv-empty__actions {
  justify-content: center;
}

/* Request details now sit in the identity column (F12). */
.inv-decision-item__identity .inv-request-details {
  margin-top: var(--space-1);
}

.inv-decision-item__identity .inv-request-details dl {
  flex-direction: column;
  gap: var(--space-1);
}