/* ──────────────────────────────────────────────────────────────────────
   Universal index-page primitives — `.idx-v2` scope.

   Used by deliveries, shipments, returns, products list, supermarkets.
   One file for all five so the paradigm stays unified.

   Per-page nuances ride on `[data-page="X"]` attribute selectors at the
   bottom of this file. Don't fork into per-page CSS unless the page has
   a structurally different layout (e.g. dashboard's pulse hero).

   Inherits design tokens from dashboard/v2.css (loaded by base.html).
   Tokens used: --theme-bg, --theme-card-bg, --theme-text, --theme-text-
   secondary, --theme-text-tertiary, --theme-hover, --theme-bg-secondary,
   --border-subtle, --border-strong, --border-divider, --space-*, --
   radius-*, --font-family-*, --transition-fast, brand/status colors.
   ────────────────────────────────────────────────────────────────────── */

.idx-v2 {
  background: var(--theme-bg);
  color: var(--theme-text);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  padding:
    var(--space-6)
    var(--wm-shell-gutter, var(--space-8))
    var(--space-16);
  max-width: var(--wm-shell-content-max, 1680px);
  margin: 0 auto;
  width: 100%;
  min-height: 100vh;
}
@media (max-width: 1280px) {
  .idx-v2 {
    padding-left: var(--wm-shell-gutter, var(--space-6));
    padding-right: var(--wm-shell-gutter, var(--space-6));
  }
}
@media (max-width: 720px)  {
  .idx-v2 {
    padding-left: var(--wm-shell-gutter, var(--space-4));
    padding-right: var(--wm-shell-gutter, var(--space-4));
  }
}

.idx-v2 a { color: inherit; text-decoration: none; }
.idx-v2 button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* ─── Page header ─────────────────────────────────────────────────────── */
.idx-v2 .idx-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.idx-v2 .idx-h-title {
  color: var(--theme-text);
}
.idx-v2 .idx-h-sub {
  font-size: var(--wm-type-body);
  color: var(--theme-text-tertiary);
  margin-top: 4px;
}
.idx-v2 .idx-h-actions {
  display: inline-flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.idx-v2 .idx-btn-pri {
  height: var(--control-h);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px;
  background: var(--theme-text);
  color: var(--theme-text-inverted);
  border-radius: var(--radius-md);
  font-size: var(--wm-type-body);
  font-weight: 600;
  transition: background-color var(--transition-fast);
  border: 1px solid transparent;
}
.idx-v2 .idx-btn-pri:hover { background: var(--brand-primary); }
.idx-v2 .idx-btn-sec {
  height: var(--control-h);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
  background: var(--theme-card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--wm-type-body);
  font-weight: 500;
  color: var(--theme-text-secondary);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.idx-v2 .idx-btn-sec:hover { border-color: var(--border-strong); background: var(--theme-hover); color: var(--theme-text); }
.idx-v2 .idx-btn-sec.is-disabled,
.idx-v2 .idx-btn-sec[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* ─── KPI strip — smart grid ──────────────────────────────────────────── */
.idx-v2 .idx-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  /* Phones: two across. auto-fit at a 220px floor gave ONE column at 375,
     so four KPI tiles were 440px of page before the list (Deliveries,
     2026-09-05); a KPI is a label, a number and a sub-line — half a phone
     width holds it. The 2-up rule lives with the base rule, below it. */
  grid-auto-flow: dense;
  gap: var(--space-3);
  align-items: start;
  margin-bottom: var(--space-4);
}
/* Touch: the register's control token lifts to the WCAG target so filter
   fields, Apply and Clear rise together (UI rule §14). */
@media (pointer: coarse) { .idx-v2 { --control-h: var(--min-touch-target, 44px); } }

/* ─── Two-column responsive grid (min 340 px, wraps on narrow) ─────────── */
.idx-v2 .idx-col-grid-340 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}
/* Two TABLE panels side by side need more than 340px each: beside the
   sidebar at 1024 the pair became two 357px tables, and even an empty
   state's one sentence overflowed by 74px. One column until the shell
   leaves real room. */
@media (max-width: 1180px) {
  .idx-v2 .idx-col-grid-340 { grid-template-columns: minmax(0, 1fr); }
}
.idx-v2 .idx-kpi {
  background: var(--theme-card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
/* A KPI that links to the rows it counts. Hover/focus change colour only —
   padding and border-width stay put, so the tile never shifts (universal UI
   rules §1). `display:block` because the anchor replaces a div. */
.idx-v2 .idx-kpi-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.idx-v2 .idx-kpi-link:hover {
  /* Prefer design-variables tokens — not the non-existent --theme-hover-bg /
     --bg-subtle fallbacks. Color + bg only; geometry stays put (§1). */
  background: var(--theme-hover);
  border-color: var(--border-strong);
}
.idx-v2 .idx-kpi-link:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
.idx-v2 .idx-kpi-label {
  color: var(--theme-text-tertiary);
  margin-bottom: var(--space-2);
}
.idx-v2 .idx-kpi-value {
  font-family: var(--font-family-heading);
  font-size: var(--wm-type-body);
  font-weight: 500;
  line-height: 1.0;
  color: var(--theme-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
/* Semantic KPI variants: the NUMBER stays ink — hierarchy is weight + size,
   and the dashboard reference keeps its stat values ink with color reserved
   for deltas and dots. Painting the whole figure amber/green made index-page
   tiles read as a different product from the dashboard (user-reported). The
   semantics survive as a status dot beside the value: "dot or text only" is
   the token contract, and here the dot wins because the value IS the text. */
.idx-v2 .idx-kpi-value.is-warn::after,
.idx-v2 .idx-kpi-value.is-danger::after,
.idx-v2 .idx-kpi-value.is-pos::after,
.idx-v2 .idx-kpi-value.is-good::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-left: 7px;
  vertical-align: 3px;
}
.idx-v2 .idx-kpi-value.is-warn::after   { background: var(--warning); }
.idx-v2 .idx-kpi-value.is-danger::after { background: var(--danger); }
.idx-v2 .idx-kpi-value.is-pos::after    { background: var(--success); }
/* is-good: alias of is-pos — wave/route/receiving templates used it for
   their 'completed today' KPI while only is-pos existed; the green tint
   silently never rendered. One vocabulary, both spellings resolve. */
.idx-v2 .idx-kpi-value.is-good::after   { background: var(--success); }
.idx-v2 .idx-kpi-sub {
  margin-top: 6px;
  font-size: var(--wm-type-label);
  color: var(--theme-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ─── Quick-filter tabs ───────────────────────────────────────────────── */
.idx-v2 .idx-tabs {
  display: inline-flex;
  align-items: stretch;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
  width: 100%;
}
.idx-v2 .idx-tabs::-webkit-scrollbar { display: none; }
.idx-v2 .idx-tab {
  padding: 9px 2px;
  font-size: var(--wm-type-body);
  font-weight: 500;
  color: var(--theme-text-tertiary);
  border-bottom: 1.5px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.idx-v2 .idx-tab:hover { color: var(--theme-text-secondary); }
.idx-v2 .idx-tab-count {
  font-variant-numeric: tabular-nums;
  font-size: var(--wm-type-label);
  color: var(--danger-text);
}
.idx-v2 .idx-tab.is-active {
  color: var(--theme-text);
  border-bottom-color: var(--brand-primary);
}

/* ─── Filter form ─────────────────────────────────────────────────────── */
.idx-v2 .idx-filters {
  background: var(--theme-card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.idx-v2 .idx-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  width: 100%;
}
.idx-v2 .idx-input,
.idx-v2 .idx-select,
.idx-v2 .idx-date {
  padding: 6px 10px;
  font-family: inherit;
  font-size: var(--wm-type-body);
  color: var(--theme-text);
  background: var(--theme-input-bg);
  border: 1px solid var(--theme-input-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}
.idx-v2 .idx-input:focus,
.idx-v2 .idx-select:focus,
.idx-v2 .idx-date:focus {
  outline: none;
  border-color: var(--brand-primary);
}
.idx-v2 .idx-input { min-width: 200px; flex: 1 1 240px; }
/* The submit/clear pair rides the RIGHT edge of whatever row the wrap puts it
   on — without this, a wrapped second row read as an orphaned fragment with a
   dead right half (user screenshot: date + Apply + Clear stranded left). */
.idx-v2 .idx-filter-form .idx-apply-btn { margin-left: auto; }
.idx-v2 .idx-input::placeholder { color: var(--theme-text-tertiary); }
.idx-v2 .idx-date { font-variant-numeric: tabular-nums; }
.idx-v2 .idx-result-count {
  /* A count, not a field label: sans, tertiary, tabular — the mono-caps
     label register made "0 FOUND" shout. */
  font-size: var(--wm-type-label);
  color: var(--theme-text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.idx-v2 .idx-filter-label {
  font-family: var(--font-family);
  font-size: var(--wm-type-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-text-tertiary);
}

.idx-v2 .idx-apply-btn {
  padding: 6px 14px;
  background: var(--theme-text);
  color: var(--theme-text-inverted);
  border-radius: var(--radius-md);
  font-size: var(--wm-type-body);
  font-weight: 600;
  transition: background-color var(--transition-fast);
}
.idx-v2 .idx-apply-btn:hover { background: var(--brand-primary); }
.idx-v2 .idx-clear-btn {
  padding: 6px 10px;
  font-size: var(--wm-type-body);
  color: var(--theme-text-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.idx-v2 .idx-clear-btn:hover { border-color: var(--border-strong); color: var(--theme-text-secondary); }

.idx-v2 .idx-callout {
  background: var(--theme-card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--wm-type-body);
  color: var(--theme-text);
}
.idx-v2 .idx-callout.is-good { border-color: var(--success-border); }

/* ─── Bulk-action bar ─────────────────────────────────────────────────── */
/* Bulk bar visibility is driven by shared bulk_actions.js, which toggles the
   `.hidden` class AND the `hidden` attribute. Base is flex; the higher-
   specificity hidden rules win when JS hides it. Initial HTML ships `hidden`
   so there's no flash before JS runs. */
.idx-v2 .idx-bulk-bar {
  display: flex;
  padding: var(--space-3) var(--space-4);
  background: var(--theme-bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.idx-v2 .idx-bulk-bar.hidden,
.idx-v2 .idx-bulk-bar[hidden] { display: none; }
.idx-v2 .idx-bulk-count {
  font-family: var(--font-family);
  font-size: var(--wm-type-label);
  font-weight: 600;
  color: var(--theme-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.idx-v2 .idx-bulk-actions { display: inline-flex; gap: var(--space-2); }
.idx-v2 .idx-btn-danger {
  padding: 6px 12px;
  background: var(--danger);
  color: var(--white);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  font-size: var(--wm-type-body);
  font-weight: 600;
  /* State never changes geometry — and never uses filter. Hover = token color
     only (UI_DESIGN_RULES §1). Matches --danger-hover rather than brightness(). */
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.idx-v2 .idx-btn-danger:hover {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
}
.idx-v2 .idx-btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Table panel ─────────────────────────────────────────────────────── */
.idx-v2 .idx-table-panel {
  background: var(--theme-card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.idx-v2 .idx-table-h {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-divider);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.idx-v2 .idx-table-title {
  font-family: var(--font-family-heading);
  font-size: var(--wm-type-body);
  font-weight: 600;
  color: var(--theme-text);
}
.idx-v2 .idx-table-count {
  font-family: var(--font-family);
  font-size: var(--wm-type-label);
  font-weight: 500;
  color: var(--theme-text-tertiary);
  margin-left: 6px;
}
.idx-v2 .idx-csv-link {
  font-family: var(--font-family);
  font-size: var(--wm-type-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-text-tertiary);
  padding: 3px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.idx-v2 .idx-csv-link:hover { border-color: var(--border-strong); color: var(--theme-text); }

/* ─── Table ───────────────────────────────────────────────────────────── */
.idx-v2 .idx-table-scroll { overflow-x: auto; }
.idx-v2 .idx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wm-type-body);
}
.idx-v2 .idx-table thead th {
  padding: var(--space-2) var(--space-3);
  background: var(--theme-bg-secondary);

  color: var(--theme-text-tertiary);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.idx-v2 .idx-table thead th.is-num { text-align: right; }
.idx-v2 .idx-table thead th.is-center { text-align: center; }
.idx-v2 .idx-table thead th.is-sortable a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
}
.idx-v2 .idx-table thead th.is-sortable a:hover { color: var(--theme-text-secondary); }
.idx-v2 .idx-table thead th.is-sortable .idx-sort-mark { font-size: var(--wm-type-label); }
.idx-v2 .idx-table tbody tr {
  border-bottom: 1px solid var(--border-divider);
  transition: background-color var(--transition-fast);
}
.idx-v2 .idx-table tbody tr:last-child { border-bottom: 0; }
.idx-v2 .idx-table tbody tr:hover { background: var(--theme-hover); }
.idx-v2 .idx-table tbody td {
  padding: var(--space-2) var(--space-3);
  vertical-align: top;
  color: var(--theme-text-secondary);
}
.idx-v2 .idx-table tbody td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.idx-v2 .idx-table tbody td.is-actions { text-align: right; }

.idx-v2 .idx-row-checkbox { cursor: pointer; }

/* Row content primitives */
.idx-v2 .idx-ref {
  font-family: var(--font-family-mono);
  font-size: var(--wm-type-label);
  font-weight: 600;
  color: var(--theme-text);
  letter-spacing: -0.01em;
}
.idx-v2 .idx-ref:hover { color: var(--brand-text); }
/* A row's primary cell is sometimes a NAME, not a code. Same weight and
   hover, prose face — mono stays reserved for references. */
.idx-v2 .idx-ref.is-name { font-family: inherit; font-size: var(--wm-type-body); letter-spacing: 0; }
.idx-v2 .idx-ref-sub {
  font-family: var(--font-family-mono);
  font-size: var(--wm-type-label);
  color: var(--theme-text-tertiary);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.idx-v2 .idx-dest-name { font-size: var(--wm-type-body); font-weight: 500; color: var(--theme-text); }
.idx-v2 .idx-dest-sub  { font-size: var(--wm-type-label); color: var(--theme-text-tertiary); margin-top: 2px; }
.idx-v2 .idx-dest-addr { font-size: var(--wm-type-label); color: var(--theme-text-tertiary); margin-top: 2px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idx-v2 .idx-total {
  font-size: var(--wm-type-body);
  font-weight: 600;
  color: var(--theme-text);
  font-variant-numeric: tabular-nums;
}
.idx-v2 .idx-total.is-warn { color: var(--warning-text); }
.idx-v2 .idx-total-sub {
  font-size: var(--wm-type-label);
  color: var(--theme-text-tertiary);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ─── Row status chip (in-table) ──────────────────────────────────────── */
.idx-v2 .idx-row-status,
.idx-v2 .idx-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);

  color: var(--theme-text-secondary);
  white-space: nowrap;
  background: var(--theme-card-bg);
}
.idx-v2 .idx-row-status::before,
.idx-v2 .idx-chip.has-dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--theme-text-tertiary);
  display: inline-block;
}
.idx-v2 .idx-row-status.is-good,
.idx-v2 .idx-chip.is-good {
  color: var(--success-text);
  border-color: var(--success-border);
}
.idx-v2 .idx-row-status.is-good::before,
.idx-v2 .idx-chip.is-good::before { background: var(--success); }
.idx-v2 .idx-row-status.is-warn,
.idx-v2 .idx-chip.is-warn {
  color: var(--warning-text);
  border-color: var(--warning-border);
}
.idx-v2 .idx-row-status.is-warn::before,
.idx-v2 .idx-chip.is-warn::before { background: var(--warning); }
.idx-v2 .idx-row-status.is-bad,
.idx-v2 .idx-chip.is-bad {
  color: var(--danger-text);
  border-color: var(--danger-border);
}
.idx-v2 .idx-row-status.is-bad::before,
.idx-v2 .idx-chip.is-bad::before { background: var(--danger); }

/* status-by-attr — falls back to neutral, then good/warn/bad classes refine */
.idx-v2 .idx-row-status[data-status*="delivered"],
.idx-v2 .idx-row-status[data-status*="completed"],
.idx-v2 .idx-row-status[data-status*="active"],
.idx-v2 .idx-row-status[data-status*="approved"] {
  color: var(--success-text); border-color: var(--success-border);
}
.idx-v2 .idx-row-status[data-status*="delivered"]::before,
.idx-v2 .idx-row-status[data-status*="completed"]::before,
.idx-v2 .idx-row-status[data-status*="active"]::before,
.idx-v2 .idx-row-status[data-status*="approved"]::before { background: var(--success); }
.idx-v2 .idx-row-status[data-status*="pending"],
.idx-v2 .idx-row-status[data-status*="processing"],
.idx-v2 .idx-row-status[data-status*="partial"] {
  color: var(--warning-text); border-color: var(--warning-border);
}
.idx-v2 .idx-row-status[data-status*="pending"]::before,
.idx-v2 .idx-row-status[data-status*="processing"]::before,
.idx-v2 .idx-row-status[data-status*="partial"]::before { background: var(--warning); }
.idx-v2 .idx-row-status[data-status*="cancelled"],
.idx-v2 .idx-row-status[data-status*="rejected"],
.idx-v2 .idx-row-status[data-status*="failed"],
.idx-v2 .idx-row-status[data-status*="overdue"] {
  color: var(--danger-text); border-color: var(--danger-border);
}
.idx-v2 .idx-row-status[data-status*="cancelled"]::before,
.idx-v2 .idx-row-status[data-status*="rejected"]::before,
.idx-v2 .idx-row-status[data-status*="failed"]::before,
.idx-v2 .idx-row-status[data-status*="overdue"]::before { background: var(--danger); }

/* Tone coverage parity with the wm status_badge dictionary
   (macros/ui_patterns.html status_badge/_STATUS_TONES) — the two status
   renderers must assign the SAME tone for the same status (2026-07-06
   cohesion audit: 'shipped'/'processing' were brand/info in wm but rendered
   NEUTRAL here). Keep the two maps in sync when adding a status. */
.idx-v2 .idx-row-status[data-status*="shipped"],
.idx-v2 .idx-row-status[data-status*="dispatched"],
.idx-v2 .idx-row-status[data-status*="in_transit"],
.idx-v2 .idx-row-status[data-status*="out_for_delivery"] {
  color: var(--brand-text); border-color: var(--brand-primary-border);
}
.idx-v2 .idx-row-status[data-status*="shipped"]::before,
.idx-v2 .idx-row-status[data-status*="dispatched"]::before,
.idx-v2 .idx-row-status[data-status*="in_transit"]::before,
.idx-v2 .idx-row-status[data-status*="out_for_delivery"]::before { background: var(--brand-primary); }
.idx-v2 .idx-row-status[data-status*="initiated"],
.idx-v2 .idx-row-status[data-status*="collected"],
.idx-v2 .idx-row-status[data-status*="inspected"],
.idx-v2 .idx-row-status[data-status*="picking"],
.idx-v2 .idx-row-status[data-status*="picked"],
.idx-v2 .idx-row-status[data-status*="packing"],
.idx-v2 .idx-row-status[data-status*="packed"] {
  color: var(--info-text); border-color: var(--info-border, var(--border-subtle));
}
.idx-v2 .idx-row-status[data-status*="initiated"]::before,
.idx-v2 .idx-row-status[data-status*="collected"]::before,
.idx-v2 .idx-row-status[data-status*="inspected"]::before,
.idx-v2 .idx-row-status[data-status*="picking"]::before,
.idx-v2 .idx-row-status[data-status*="picked"]::before,
.idx-v2 .idx-row-status[data-status*="packing"]::before,
.idx-v2 .idx-row-status[data-status*="packed"]::before { background: var(--info); }
.idx-v2 .idx-row-status[data-status*="restocked"],
.idx-v2 .idx-row-status[data-status*="ready_for_dispatch"] {
  color: var(--success-text); border-color: var(--success-border);
}
.idx-v2 .idx-row-status[data-status*="restocked"]::before,
.idx-v2 .idx-row-status[data-status*="ready_for_dispatch"]::before { background: var(--success); }
/* draft/disposed stay neutral (mute) — the base style already renders that. */

/* Full tone-class set so idx pills can express every wm tone explicitly */
.idx-v2 .idx-row-status.is-info,
.idx-v2 .idx-chip.is-info { color: var(--info-text); border-color: var(--info-border, var(--border-subtle)); }
.idx-v2 .idx-row-status.is-info::before,
.idx-v2 .idx-chip.is-info::before { background: var(--info); }
.idx-v2 .idx-row-status.is-brand,
.idx-v2 .idx-chip.is-brand { color: var(--brand-text); border-color: var(--brand-primary-border); }
.idx-v2 .idx-row-status.is-brand::before,
.idx-v2 .idx-chip.is-brand::before { background: var(--brand-primary); }

.idx-v2 .idx-row-status-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.idx-v2 .idx-row-status-sub {
  font-size: var(--wm-type-label);
  color: var(--theme-text-tertiary);
  margin-top: 4px;
}

/* ─── Row actions (per-row CTA + dropdown) ────────────────────────────── */
.idx-v2 .idx-row-actions {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  justify-content: flex-end;
}
.idx-v2 .idx-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* One rail width: stacked row actions sized to their own text read as a
     ragged column ("Publish" beside "Edit Listing" — user screenshot). The
     min-width fits the longest current label; longer translations still
     grow. */
  min-width: 106px;
  padding: 4px 10px;
  background: var(--theme-card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--wm-type-label);
  font-weight: 500;
  color: var(--theme-text-secondary);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.idx-v2 .idx-row-action:hover { border-color: var(--border-strong); background: var(--theme-hover); color: var(--theme-text); }
.idx-v2 .idx-row-action.is-pri {
  background: var(--theme-text);
  color: var(--theme-text-inverted);
  border-color: var(--theme-text);
}
.idx-v2 .idx-row-action.is-pri:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--theme-text-inverted); }
.idx-v2 .idx-row-action.is-danger { color: var(--danger-text); border-color: var(--danger-border); }

/* Dropdown trigger button (3-dots). 40x40 minimum hit area (UI_DESIGN_RULES §12). */
.idx-v2 .idx-row-menu-trigger {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--theme-text-tertiary);
  background: var(--theme-card-bg);
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
  font-family: var(--font-family);
  font-size: var(--wm-type-body);
  font-weight: 700;
}
.idx-v2 .idx-row-menu-trigger:hover { border-color: var(--border-strong); color: var(--theme-text-secondary); background: var(--theme-hover); }
/* ── One height per row (UI rule §14) ──────────────────────────────────
   Filter bar: input, select, date, Apply, Clear are all --control-h
   (measured 38 / 38 / 31 before). Row actions: the text action and the
   "···" trigger are both --control-h-sm (measured 27 beside 40); the
   trigger keeps a 40×40 hit area through ::after (UI rule §12). Coarse
   pointers lift the row pair to the touch target together (measured 44
   beside 40 on a phone). Placed below the family rules it overrides. */
.idx-v2 .idx-input, .idx-v2 .idx-select, .idx-v2 .idx-date, .idx-v2 .idx-apply-btn, .idx-v2 .idx-clear-btn {
  box-sizing: border-box; height: var(--control-h, 36px); padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center;
}
.idx-v2 .idx-row-action, .idx-v2 .idx-row-menu-trigger {
  box-sizing: border-box; height: var(--control-h-sm, 32px); min-height: 0; padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.idx-v2 .idx-row-menu-trigger { width: var(--control-h-sm, 32px); position: relative; }
.idx-v2 .idx-row-menu-trigger::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
@media (pointer: coarse) {
  .idx-v2 .idx-row-action, .idx-v2 .idx-row-menu-trigger { height: var(--min-touch-target, 44px); }
  .idx-v2 .idx-row-menu-trigger { width: var(--min-touch-target, 44px); }
}

.idx-v2 .idx-row-menu {
  background: var(--theme-card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 4px;
  min-width: 180px;
}
.idx-v2 .idx-row-menu-item {
  display: block;
  padding: 6px 10px;
  font-size: var(--wm-type-label);
  color: var(--theme-text-secondary);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  width: 100%;
  text-align: left;
}
.idx-v2 .idx-row-menu-item:hover { background: var(--theme-hover); color: var(--theme-text); }
.idx-v2 .idx-row-menu-item.is-danger { color: var(--danger-text); }
.idx-v2 .idx-row-menu-item.is-danger:hover { background: var(--danger-bg); }
.idx-v2 .idx-row-menu-sep {
  height: 1px;
  background: var(--border-divider);
  margin: 4px 0;
}

/* ─── Empty state ─────────────────────────────────────────────────────── */
/* Centred in a bounded block, not top-anchored. This is the authenticated-shell
   twin of .sf-empty (storefront/v2.css) — same defect, separate component, so
   the storefront fix did not reach /fleet, /inventory, /waves, /return,
   /shipment, /delivery. Deliberately a MODEST min-height, not the storefront's
   min(58vh,520px): .idx-empty lives INSIDE an index-table card that already has
   a header above it, so it needs presence, not viewport centring. */
.idx-v2 .idx-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
/* Centred in a bounded block, not top-anchored — the authenticated-shell twin
   of .sf-empty (storefront/v2.css). Same defect, separate component, so the
   storefront fix never reached /fleet, /inventory, /waves, /return, /shipment.
   Modest height rather than the storefront's min(58vh,520px): this sits INSIDE
   an index-table card that already has a header above it.

   TWO variants on purpose. .idx-empty is used on BOTH <div> and <td
   colspan="9">, and `display:flex` on a table cell drops it out of the table
   layout algorithm — the cell stops spanning its columns and collapses to
   content width, which visibly pushed the message left of centre on /delivery
   and /return. Cells get height + vertical-align instead, which the table
   layout honours. */
.idx-v2 div.idx-empty,
.idx-v2 section.idx-empty {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.idx-v2 td.idx-empty {
  height: 280px;
  vertical-align: middle;
}
/* Compact variant — for panels that are empty on a BRAND-NEW account, where the
   reserved 280px is not presence but dead space. The seller dashboard stacks two
   of these ("Recent activity", "Top Selling Products"), so a new store's home
   opened with ~560px of void plus a row of zeroed KPIs, pushing the genuinely
   useful "Quick actions" panel down the page. Presence is worth reserving space
   for when the panel will normally have content; it is not worth it when the
   panel is empty by definition until the first order arrives.
   Mirrors .sf-empty--compact in storefront/v2.css. Same component, same atoms,
   no geometry change on state — only the reserved minimum differs. */
.idx-v2 div.idx-empty--compact,
.idx-v2 section.idx-empty--compact {
  min-height: 0;
  padding: var(--space-6) var(--space-4);
}
.idx-v2 td.idx-empty--compact {
  height: auto;
  padding: var(--space-6) var(--space-4);
}
.idx-v2 .idx-empty-h {
  font-family: var(--font-family-heading);
  font-size: var(--wm-type-body);
  font-weight: 600;
  color: var(--theme-text);
  margin-bottom: 6px;
}
.idx-v2 .idx-empty-p {
  font-size: var(--wm-type-body);
  color: var(--theme-text-tertiary);
  margin-bottom: var(--space-3);
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.idx-v2 .idx-empty-cta {
  display: inline-block;
  padding: 7px 14px;
  background: var(--theme-text);
  color: var(--theme-text-inverted);
  border-radius: var(--radius-md);
  font-size: var(--wm-type-body);
  font-weight: 600;
  transition: background-color var(--transition-fast);
}
.idx-v2 .idx-empty-cta:hover { background: var(--brand-primary); }

/* ─── Pagination ──────────────────────────────────────────────────────── */
.idx-v2 .idx-pager {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-divider);
  background: var(--theme-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--wm-type-label);
  color: var(--theme-text-tertiary);
}
.idx-v2 .idx-pager-meta { font-variant-numeric: tabular-nums; }
.idx-v2 .idx-pager-links { display: inline-flex; gap: var(--space-1); }
.idx-v2 .idx-pager-link {
  padding: 3px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--theme-text-secondary);
  font-weight: 500;
  font-size: var(--wm-type-label);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.idx-v2 .idx-pager-link:hover { border-color: var(--border-strong); background: var(--theme-hover); color: var(--theme-text); }
.idx-v2 .idx-pager-link.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ─── Per-page micro-tweaks (data-page attribute) ─────────────────────── */

/* Products list — image thumbnail in first cell */
.idx-v2 .idx-prod-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.idx-v2 .idx-prod-row > div {
  min-width: 0;
}

.idx-v2[data-page="product-index"] .idx-thumb {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background-color: var(--theme-bg-secondary);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.idx-v2[data-page="product-index"] .idx-stock-low { color: var(--warning-text); font-weight: 600; }
.idx-v2[data-page="product-index"] .idx-stock-out { color: var(--danger-text); font-weight: 600; }

/* Supermarkets — handle / slug under name + initial tile */
.idx-v2[data-page="supermarket-index"] .idx-handle {
  font-family: var(--font-family);
  font-size: var(--wm-type-label);
  color: var(--theme-text-tertiary);
  display: inline-flex;
  align-items: center;
}
.idx-v2[data-page="supermarket-index"] .idx-sm-initial {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--theme-bg-secondary);
  color: var(--theme-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-heading);
  font-size: var(--wm-type-body);
  font-weight: 600;
}

/* ─── B2B mobile dashboard contract ────────────────────────────────────
   B2B pages are operational workbenches: KPI cards, action chips, charts,
   and wide tables need to remain scannable on phones without compressing
   columns into unreadable text. */
.idx-v2[data-page^="b2b-"] .idx-table-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
}

/* The 720px floor keeps B2B tables readable on wide screens only. Beside
   the sidebar a 1024 window leaves ~700px of card, so between 768 and 1180
   the floor overflowed by 70–100px (sweep at 1024); on phones the card
   reflow is active and the floor overflowed by 372px (sweep at 390). The
   floor applies from 1181 up. */
@media (min-width: 1181px) {
  .idx-v2[data-page^="b2b-"] .idx-table { min-width: 720px; }
}

.idx-v2[data-page^="b2b-"] .idx-chart-box {
  padding: var(--space-4);
  height: clamp(220px, 42vh, 300px);
  min-height: 220px;
}

.idx-v2[data-page^="b2b-"] .idx-chart-box canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 767px, not 640: the mobile shell (bottom tab bar, md:hidden topbar) runs to
   768. Between 641 and 767 the table used to stay a table — clipped columns
   scrolling under an invisible overlay scrollbar (products at 660px). */
@media (max-width: 767px) {
  .idx-v2 {
    padding-top: var(--space-4);
    padding-bottom: calc(var(--space-16) + 72px);
  }

  .idx-v2 .idx-h {
    align-items: stretch;
    gap: var(--space-3);
  }

  .idx-v2 .idx-h > div,
  .idx-v2 .idx-h-actions,
  .idx-v2 .idx-h-actions > *,
  /* dropdown triggers live inside a .relative wrapper — stretch the button too
     so "Actions ▾" is full-width like the primary action, not centered/narrow. */
  .idx-v2 .idx-h-actions > .relative > button {
    width: 100%;
  }

  .idx-v2 .idx-h-actions {
    justify-content: stretch;
  }

  .idx-v2 .idx-h-actions > *,
  .idx-v2 .idx-callout .idx-row-action,
  .idx-v2 .idx-callout .idx-btn-sec,
  .idx-v2 .idx-callout .idx-btn-pri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* A status CHIP in the header actions is not a button: stretched to the
     full row it read as a banner ("SYSTEM OPERATIONAL" edge to edge on every
     B2B page). It keeps its intrinsic width and sits at the row's start. */
  .idx-v2 .idx-h-actions > .idx-chip {
    width: auto;
    align-self: flex-start;
  }
  /* A callout's action belongs under its left-aligned copy, not centred. */
  .idx-v2 .idx-callout .idx-row-action,
  .idx-v2 .idx-callout .idx-btn-sec,
  .idx-v2 .idx-callout .idx-btn-pri { width: auto; align-self: flex-start; }

  /* The rules above stretch EVERY header action to 100%, which on Deliveries
     meant CSV ↓, Excel ↓ and New delivery each took their own 44px row — 148px
     of export buttons before the page's own title had finished. The primary
     action keeps its full-width target; the secondary ones pair up on one row.
     148px → ~96px, and it cascades to all seven idx-* index pages.

     `flex: 1 1 40%` rather than a fixed 50%: with the 8px gap two of them still
     fit one row, and a third secondary action (some pages have one) wraps
     cleanly instead of overflowing. */
  .idx-v2 .idx-h-actions > .idx-btn-sec {
    width: auto;
    flex: 1 1 40%;
  }

  .idx-v2 .idx-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .idx-v2 .idx-kpi {
    padding: var(--space-3);
    min-width: 0;
  }

  .idx-v2 .idx-kpi-label,
  .idx-v2 .idx-kpi-sub,
  .idx-v2 .idx-dest-name,
  .idx-v2 .idx-dest-sub,
  .idx-v2 .idx-ref-sub {
    overflow-wrap: anywhere;
  }

  .idx-v2 .idx-kpi-value {
    font-size: var(--wm-type-body);
  }

  .idx-v2 .idx-table-h,
  .idx-v2 .idx-callout,
  .idx-v2 .idx-filter-form,
  .idx-v2 .idx-bulk-bar,
  .idx-v2 .idx-pager {
    align-items: stretch;
    flex-direction: column;
  }

  .idx-v2 .idx-table-h > *,
  .idx-v2 .idx-filter-form > *,
  .idx-v2 .idx-bulk-actions,
  .idx-v2 .idx-pager-links,
  .idx-v2 .idx-input,
  .idx-v2 .idx-select,
  .idx-v2 .idx-date {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  /* The row-mode `flex: 1 1 240px` on .idx-input is a WIDTH basis; in this
     column-direction form the same basis becomes HEIGHT — a 240px-tall
     search box at 700px (own screenshot). Basis back to auto here. */
  .idx-v2 .idx-filter-form .idx-input { flex: 0 0 auto; width: 100%; }

  .idx-v2 .idx-btn-pri,
  .idx-v2 .idx-btn-sec,
  .idx-v2 .idx-row-action,
  .idx-v2 .idx-apply-btn,
  .idx-v2 .idx-clear-btn,
  .idx-v2 .idx-pager-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--min-touch-target, 44px);
    justify-content: center;
  }

  .idx-v2 .idx-row-actions {
    justify-content: flex-start;
  }

  /* Reflow the data table to stacked cards — no more horizontal scroll on a
     phone (the single biggest "desktop shrunk onto a phone" tell). Cells are
     self-describing (e.g. "₮3 · Retail price"), so no per-<td> data-label is
     needed; this cascades to every .idx-table page (products, returns,
     supermarkets, partnerships, admin, …). */
  .idx-v2 .idx-table-scroll { overflow-x: visible; }
  .idx-v2 .idx-table { display: block; font-size: var(--wm-type-body); }
  .idx-v2 .idx-table thead { display: none; }
  .idx-v2 .idx-table tbody { display: block; }
  .idx-v2 .idx-table tbody tr {
    display: block;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--theme-card-bg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
  }
  .idx-v2 .idx-table tbody tr:last-child { border-bottom: 1px solid var(--border-subtle); }
  .idx-v2 .idx-table tbody td {
    display: block;
    text-align: left;
    padding: 3px 0;
    border: 0;
    font-size: var(--wm-type-body);
  }
  .idx-v2 .idx-table tbody td.is-num,
  .idx-v2 .idx-table tbody td.is-actions { text-align: left; }
  .idx-v2 .idx-table tbody td.is-actions { padding-top: var(--space-2); }
  .idx-v2 .idx-table .idx-dest-addr { max-width: none; white-space: normal; }

  .idx-v2 .idx-chart-box {
    height: clamp(220px, 54vh, 280px);
    padding: var(--space-3);
  }
}

/* No single-column KPI collapse under 380px any more: 375 is the iPhone
   width, so that rule undid the 2-up phone grid exactly where it mattered
   (four tiles = 396px of page before the list, measured 2026-09-05). A KPI
   is a label, a number and a sub-line; half of 375 holds it. */

/* ── Fast inline editing — price + stock ────────────────────────────────
   Click-to-edit on price/stock cells + a field-aware set/adjust control on
   the bulk-action bar. State (:hover/:focus/.is-*) only changes
   color/opacity, never geometry, so rows never shift. */
.idx-v2 .idx-price-edit,
.idx-v2 .idx-stock-edit {
  display: inline-block;
  cursor: pointer;
  padding: 1px 5px;
  margin: -1px -5px;
  border-radius: var(--radius-sm, 4px);
  transition: background-color var(--transition-fast, 0.12s) ease;
}
.idx-v2 .idx-price-edit:hover,
.idx-v2 .idx-stock-edit:hover { background: var(--theme-hover); }
.idx-v2 .idx-price-edit:focus-visible,
.idx-v2 .idx-stock-edit:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 1px;
}
.idx-v2 .idx-price-edit.is-saving,
.idx-v2 .idx-stock-edit.is-saving { opacity: 0.6; cursor: progress; }
.idx-v2 .idx-price-edit.is-flash,
.idx-v2 .idx-stock-edit.is-flash { background: var(--success-light); }
.idx-v2 .idx-price-input,
.idx-v2 .idx-stock-input {
  padding: 3px 6px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--theme-text);
  background: var(--theme-card-bg);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-sm, 4px);
}
.idx-v2 .idx-price-input { width: 96px; text-align: right; }
.idx-v2 .idx-stock-input { width: 72px; text-align: left; }
.idx-v2 .idx-price-input:focus,
.idx-v2 .idx-stock-input:focus { outline: none; }

.idx-v2 .idx-bulk-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.idx-v2 .idx-bulk-vr {
  width: 1px;
  height: 18px;
  background: var(--border-divider);
}
.idx-v2 .idx-bulk-select,
.idx-v2 .idx-bulk-input {
  height: 28px;
  padding: 0 8px;
  font-size: var(--wm-type-body);
  color: var(--theme-text);
  background: var(--theme-card-bg);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
}
.idx-v2 .idx-bulk-input {
  width: 88px;
  font-variant-numeric: tabular-nums;
}
.idx-v2 .idx-bulk-select:focus,
.idx-v2 .idx-bulk-input:focus {
  outline: none;
  border-color: var(--brand-primary);
}

/* ── Editable grid (Bulk edit mode) ─────────────────────────────────────
   Toggle turns every price/stock cell into an always-on input; a floating
   bar batch-saves the diff. In grid mode the click-to-edit affordance is
   suppressed (cells are already inputs). */
.idx-v2 .idx-grid-input {
  width: 100%;
  max-width: 104px;
  padding: 3px 6px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--theme-text);
  background: var(--theme-card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 4px);
}
.idx-v2 .idx-price-edit .idx-grid-input { text-align: right; }
.idx-v2 .idx-grid-input:focus { outline: none; border-color: var(--brand-primary); }
.idx-v2 .is-dirty .idx-grid-input {
  border-color: var(--brand-primary);
  background: var(--tint-brand-05);
}
.idx-v2 .grid-mode .idx-price-edit,
.idx-v2 .grid-mode .idx-stock-edit { cursor: default; padding: 0; margin: 0; }
.idx-v2 .grid-mode .idx-price-edit:hover,
.idx-v2 .grid-mode .idx-stock-edit:hover { background: transparent; }

.idx-v2 .idx-grid-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 320px;
  padding: 10px 12px 10px 16px;
  background: var(--theme-text);
  color: var(--theme-text-inverted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  /* floating bulk-action bar — keeps elevation (house rule permits shadows on
     floating overlays), but via the system token, not an ad-hoc heavy value. */
  box-shadow: var(--shadow-popover);
}
.idx-v2 .idx-grid-bar.hidden,
.idx-v2 .idx-grid-bar[hidden] { display: none; }
.idx-v2 .idx-grid-status {

  font-variant-numeric: tabular-nums;
}
.idx-v2 .idx-grid-actions { display: inline-flex; gap: var(--space-2); }
/* Inverted surface (bar bg = --theme-text). Derive button tints from
   --theme-text-inverted so dark mode stays readable — same pattern as
   dashboard .dv-qa-pri kbd (hardcoded white-on-near-white was ~1:1). */
.idx-v2 .idx-grid-bar .idx-row-action {
  background: color-mix(in srgb, var(--theme-text-inverted) 14%, transparent);
  border-color: color-mix(in srgb, var(--theme-text-inverted) 22%, transparent);
  color: var(--theme-text-inverted);
}
.idx-v2 .idx-grid-bar .idx-row-action:hover {
  background: color-mix(in srgb, var(--theme-text-inverted) 24%, transparent);
}
.idx-v2 .idx-grid-bar .idx-row-action.is-pri {
  background: var(--theme-text-inverted);
  color: var(--theme-text);
  border-color: var(--theme-text-inverted);
}
.idx-v2 .idx-grid-bar .idx-row-action:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Undo bar — one-shot affordance after a bulk action ─────────────────── */
.idx-v2 .idx-undo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: 9px 12px 9px 16px;
  background: var(--theme-bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.idx-v2 .idx-undo-text {
  font-size: var(--wm-type-body);
  font-weight: 500;
  color: var(--theme-text-secondary);
  font-variant-numeric: tabular-nums;
}
.idx-v2 .idx-undo-btn {
  padding: 6px 14px;
  background: var(--theme-text);
  color: var(--theme-text-inverted);
  border-radius: var(--radius-md);
  font-size: var(--wm-type-body);
  font-weight: 600;
  transition: background-color var(--transition-fast);
}
.idx-v2 .idx-undo-btn:hover { background: var(--brand-primary); }

/* ── "Edit all N matching" — cross-page bulk target ─────────────────────── */
.idx-v2 .idx-bulk-all { display: inline-flex; align-items: center; gap: 6px; }
.idx-v2 .idx-bulk-all[hidden],
.idx-v2 .idx-bulk-all.hidden { display: none; }
.idx-v2 .idx-bulk-all-active {
  font-size: var(--wm-type-label);
  color: var(--theme-text-secondary);
  font-variant-numeric: tabular-nums;
}
.idx-v2 .idx-bulk-all-active[hidden],
.idx-v2 .idx-bulk-all-active.hidden { display: none; }
.idx-v2 .idx-bulk-all-link {
  color: var(--brand-text);
  font-weight: 600;
  font-size: var(--wm-type-label);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.idx-v2 .idx-bulk-all-link[hidden],
.idx-v2 .idx-bulk-all-link.hidden { display: none; }

/* ─── Phone: stop the filter panel eating the screen ──────────────────────
   MUST stay at the end of the file — the rules it overrides live in the same
   @media block earlier, and at equal specificity the later rule wins.

   The index filter form is `flex-direction: column` with every child at 100%
   on a phone. On Deliveries that is six stacked controls — search, two selects,
   two dates, Apply — 274px of filters before the table, with the first delivery
   row at y=945 on an 844px screen.

   The two selects pair naturally, and the two dates ARE a pair (from–to), so
   splitting them across rows was always the wrong reading anyway. The search
   and Apply keep the full width they earn. Cascades to all seven idx-* pages;
   an odd number of controls simply lets the last one stretch. */
@media (max-width: 640px) {
  .idx-v2 .idx-filter-form {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .idx-v2 .idx-filter-form > .idx-select,
  .idx-v2 .idx-filter-form > .idx-date {
    width: auto;
    max-width: none;
    flex: 1 1 calc(50% - 4px);
  }
  .idx-v2 .idx-filter-form > .idx-input,
  .idx-v2 .idx-filter-form > .idx-apply-btn,
  .idx-v2 .idx-filter-form > .idx-clear-btn {
    flex: 1 1 100%;
  }
}

/* ─── Small laptops / tablets landscape (768–1180px) ──────────────────────
   Beside the sidebar the table clipped its last column by a few px, and the
   four KPI tiles wrapped 3 + 1 (auto-fit at 220px). Two-by-two tiles and
   slightly tighter cells; the phone reflow below 768 is unaffected. */
@media (min-width: 768px) and (max-width: 1180px) {
  .idx-v2 .idx-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The 106px rail floor is a desktop alignment; here it was the last 26px
     of overflow on the returns table. Labels size their own buttons. */
  .idx-v2 .idx-row-action { min-width: 0; }
  .idx-v2 .idx-table thead th,
  .idx-v2 .idx-table tbody td { padding-left: var(--space-2); padding-right: var(--space-2); }
}

/* ─── Laptop column priority for the logistics tables (768–1365px) ────────
   Deliveries, returns and shipments carry 7–9 columns; beside the sidebar
   they overflowed by 190–380px at 1024 and hid their "Next step" action
   behind an overlay scrollbar — the same defect the orders table had. The
   columns that yield are the ones the detail page repeats (route/driver,
   load, window); reference, destination, state, value and the action stay.
   Positions count the leading checkbox column where the page has one. */
@media (min-width: 768px) and (max-width: 1365px) {
  /* deliveries: 1 chk · 2 ref · 3 destination · 4 route · 5 load · 6 window · 7 state · 8 value · 9 action */
  .idx-v2[data-page="delivery-index"] .idx-table th:nth-child(4),
  .idx-v2[data-page="delivery-index"] .idx-table td:nth-child(4),
  .idx-v2[data-page="delivery-index"] .idx-table th:nth-child(5),
  .idx-v2[data-page="delivery-index"] .idx-table td:nth-child(5),
  /* returns: 1 chk · 2 ref · 3 location · 4 source · 5 load · 6 state · 7 value · 8 action */
  .idx-v2[data-page="return-index"] .idx-table th:nth-child(4),
  .idx-v2[data-page="return-index"] .idx-table td:nth-child(4),
  .idx-v2[data-page="return-index"] .idx-table th:nth-child(5),
  .idx-v2[data-page="return-index"] .idx-table td:nth-child(5),
  /* shipments: 1 ref · 2 destination · 3 workflow · 4 load · 5 window · 6 handling · 7 action */
  .idx-v2[data-page="shipment-index"] .idx-table th:nth-child(4),
  .idx-v2[data-page="shipment-index"] .idx-table td:nth-child(4),
  .idx-v2[data-page="shipment-index"] .idx-table th:nth-child(5),
  .idx-v2[data-page="shipment-index"] .idx-table td:nth-child(5),
  /* waves: 1 wave · 2 workflow · 3 load · 4 window · 5 progress · 6 priority · 7 action */
  .idx-v2[data-page="wave-index"] .idx-table th:nth-child(3),
  .idx-v2[data-page="wave-index"] .idx-table td:nth-child(3),
  .idx-v2[data-page="wave-index"] .idx-table th:nth-child(4),
  .idx-v2[data-page="wave-index"] .idx-table td:nth-child(4) { display: none; }
}
@media (min-width: 768px) and (max-width: 1180px) {
  .idx-v2[data-page="delivery-index"] .idx-table th:nth-child(6),
  .idx-v2[data-page="delivery-index"] .idx-table td:nth-child(6),
  .idx-v2[data-page="shipment-index"] .idx-table th:nth-child(6),
  .idx-v2[data-page="shipment-index"] .idx-table td:nth-child(6),
  .idx-v2[data-page="wave-index"] .idx-table th:nth-child(6),
  .idx-v2[data-page="wave-index"] .idx-table td:nth-child(6) { display: none; }
}

/* ─── B2B portal: sub-lines are prose, not codes ───────────────────────────
   .idx-ref-sub is the mono sub-line under a REFERENCE (a date under an
   order number). The B2B templates reuse it for sentences — intake copy,
   addresses, category lists, "No conversation yet" — and mono prose reads
   as a terminal dump. Mono is for codes; on B2B pages the sub-line is sans
   at reading size. Codes on those pages carry .idx-ref themselves. */
.idx-v2[data-page^="b2b-"] .idx-ref-sub {
  font-family: var(--font-family);
  font-size: var(--wm-type-body);
  line-height: 1.45;
  letter-spacing: 0;
}

/* ─── Column priority by CLASS ───────────────────────────────────────────────
   For tables whose columns are not fixed by position (B2B analytics has three
   tables on one page, and the 4th column is the ACTION in one of them), a
   template marks secondary columns with .is-secondary on both th and td.
   They yield on laptops beside the sidebar; the phone reflow shows all. */
@media (min-width: 768px) and (max-width: 1180px) {
  .idx-v2 .idx-table th.is-secondary,
  .idx-v2 .idx-table td.is-secondary { display: none; }
}

/* B2B analytics beside the sidebar: three tables of long product/supplier
   names and chips; after the secondary columns yield, two still overflowed
   74px and 7px at 1024. Tighter cells and wrapping names close it. */
@media (min-width: 768px) and (max-width: 1180px) {
  .idx-v2[data-page="b2b-analytics"] .idx-table thead th,
  .idx-v2[data-page="b2b-analytics"] .idx-table tbody td { padding-left: var(--space-2); padding-right: var(--space-2); }
  .idx-v2[data-page="b2b-analytics"] .idx-table .idx-dest-name { white-space: normal; }
  /* the inline min-width:160px on the last column loses to a rule of
     higher specificity plus the attribute selector — no override needed. */
  .idx-v2[data-page="b2b-analytics"] .idx-table tbody tr td[style*="min-width"]:last-child { min-width: 0; }
}

/* Record tables share a quieter, readable heading and selected-row treatment. */
.idx-v2 .idx-table thead th {
  color: var(--theme-text-secondary);
}
.idx-v2 .idx-table tbody tr:has(input[type="checkbox"]:checked) { background: var(--tint-brand-05); }
.idx-v2 .idx-table tbody tr:focus-within { outline: 1px solid var(--border-strong); outline-offset: -1px; }
.idx-v2[data-page="product-index"] .idx-work-queues { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.idx-v2[data-page="product-index"] .idx-work-queues a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: 6px 12px;
  background: var(--theme-card-bg); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); font-size: var(--wm-type-body);
}
.idx-v2[data-page="product-index"] .idx-work-queues a:hover { background: var(--theme-hover); }
.idx-v2[data-page="product-index"] .idx-work-queues strong { font-variant-numeric: tabular-nums; }
.idx-v2[data-page="product-index"] .idx-table tbody td { vertical-align: middle; }
.idx-v2[data-page="product-index"] .idx-row-status { border: 0; padding: 0; background: none; }
.idx-v2[data-page="product-index"] .idx-dest-name:focus-visible,
.idx-v2[data-page="product-index"] .idx-work-queues a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
@media (max-width: 767px) {
  .idx-v2[data-page="product-index"] .idx-table tbody .idx-product-record {
    display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
    grid-template-areas: "check product price" ". status stock" "actions actions actions";
    gap: var(--space-2);
  }
  .idx-v2[data-page="product-index"] .idx-product-record > td { min-width: 0; padding: 0; }
  .idx-v2[data-page="product-index"] .idx-product-record > td:nth-child(1) { grid-area: check; }
  .idx-v2[data-page="product-index"] .idx-product-record > td:nth-child(2) { grid-area: product; }
  .idx-v2[data-page="product-index"] .idx-product-record > td:nth-child(3) { grid-area: status; }
  .idx-v2[data-page="product-index"] .idx-product-record > td:nth-child(4) { grid-area: stock; text-align: right; }
  .idx-v2[data-page="product-index"] .idx-product-record > td:nth-child(5) { grid-area: price; text-align: right; }
  .idx-v2[data-page="product-index"] .idx-product-record > td:nth-child(6) { grid-area: actions; border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); }
  .idx-v2[data-page="product-index"] .idx-prod-row { align-items: start; }
  .idx-v2[data-page="product-index"] .idx-prod-row > div { min-width: 0; }
  .idx-v2[data-page="product-index"] .idx-prod-row .idx-thumb { display: none; }
  .idx-v2[data-page="product-index"] .idx-dest-name { white-space: normal; overflow-wrap: anywhere; }
  .idx-v2[data-page="product-index"] .idx-row-actions { justify-content: space-between; width: 100%; }
}
.idx-v2 .idx-record-menu { position: fixed; inset: auto; margin: 0; padding: var(--space-2); min-width: 190px; max-width: calc(100vw - 16px); color: var(--theme-text); }
.idx-v2 .idx-record-menu:not(:popover-open) { display: none; }
.idx-v2 .idx-record-menu .idx-row-menu-item { min-height: 40px; }
@media (max-width: 767px) {
  .idx-v2[data-page="product-index"] .idx-h-actions { flex-direction: row; flex-wrap: nowrap; }
  .idx-v2[data-page="product-index"] .idx-h-actions > * { flex: 1 1 0; width: auto; min-width: 0; }
  .idx-v2[data-page="product-index"] .idx-h-actions .idx-btn-sec { width: 100%; }
  .idx-v2[data-page="product-index"] .idx-filter-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .idx-v2[data-page="product-index"] .idx-filter-form .idx-input { grid-column: 1 / -1; }
  .idx-v2[data-page="product-index"] .idx-table-h { flex-direction: row; align-items: center; }
  .idx-v2[data-page="product-index"] .idx-table-h > * { width: auto; }
}

/* Record-page controls share the compact phone layout established by Products. */
@media (max-width: 767px) {
  .idx-v2 .idx-h-actions { flex-direction: row; flex-wrap: wrap; }
  .idx-v2 .idx-h-actions > * { width: auto; flex: 1 1 auto; }
  .idx-v2 .idx-filter-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idx-v2 .idx-filter-form .idx-input { grid-column: 1 / -1; }
  .idx-v2 .idx-table-h { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .idx-v2 .idx-table-h > * { width: auto; }
}
/* Context metrics use one compact strip instead of competing standalone cards. */
.idx-v2 .idx-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 0; background: var(--theme-card-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.idx-v2 .idx-kpi { border: 0; border-radius: 0; background: transparent; padding: var(--space-3); min-width: 0; }
.idx-v2 .idx-kpi-value { font-size: var(--wm-type-body); }
@media (max-width: 767px) {
  .idx-v2 .idx-filter-form input:is([type="text"], [type="search"]) { grid-column: 1 / -1; width: 100%; }
}

/* Pair related facts on operational phone records, matching Orders/Products. */
@media (max-width: 767px) {
  .idx-v2[data-page="delivery-index"] .idx-table tbody tr:not(:has([colspan])) { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "check ref value" ". dest status" ". route load" ". window window" "action action action"; gap: var(--space-2) var(--space-3); }
  .idx-v2[data-page="delivery-index"] .idx-table tbody tr:not(:has([colspan])) > td { min-width: 0; padding: 0; overflow-wrap: anywhere; }
  .idx-v2[data-page="delivery-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(1) { grid-area: check; }
  .idx-v2[data-page="delivery-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(2) { grid-area: ref; }
  .idx-v2[data-page="delivery-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(3) { grid-area: dest; }
  .idx-v2[data-page="delivery-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(4) { grid-area: route; }
  .idx-v2[data-page="delivery-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(5) { grid-area: load; }
  .idx-v2[data-page="delivery-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(6) { grid-area: window; }
  .idx-v2[data-page="delivery-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(7) { grid-area: status; text-align: right; }
  .idx-v2[data-page="delivery-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(8) { grid-area: value; text-align: right; }
  .idx-v2[data-page="delivery-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(9) { grid-area: action; border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); }
  .idx-v2[data-page="return-index"] .idx-table tbody tr:not(:has([colspan])) { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "check ref value" ". loc status" ". reason load" "action action action"; gap: var(--space-2) var(--space-3); }
  .idx-v2[data-page="return-index"] .idx-table tbody tr:not(:has([colspan])) > td { min-width: 0; padding: 0; overflow-wrap: anywhere; }
  .idx-v2[data-page="return-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(1) { grid-area: check; }
  .idx-v2[data-page="return-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(2) { grid-area: ref; }
  .idx-v2[data-page="return-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(3) { grid-area: loc; }
  .idx-v2[data-page="return-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(4) { grid-area: reason; }
  .idx-v2[data-page="return-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(5) { grid-area: load; }
  .idx-v2[data-page="return-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(6) { grid-area: status; text-align: right; }
  .idx-v2[data-page="return-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(7) { grid-area: value; text-align: right; }
  .idx-v2[data-page="return-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(8) { grid-area: action; border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); }
  .idx-v2[data-page="shipment-index"] .idx-table tbody tr:not(:has([colspan])) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "ref risk" "dest workflow" "window load" "action action"; gap: var(--space-2) var(--space-3); }
  .idx-v2[data-page="shipment-index"] .idx-table tbody tr:not(:has([colspan])) > td { min-width: 0; padding: 0; overflow-wrap: anywhere; }
  .idx-v2[data-page="shipment-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(1) { grid-area: ref; }
  .idx-v2[data-page="shipment-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(2) { grid-area: dest; }
  .idx-v2[data-page="shipment-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(3) { grid-area: workflow; }
  .idx-v2[data-page="shipment-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(4) { grid-area: load; }
  .idx-v2[data-page="shipment-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(5) { grid-area: window; }
  .idx-v2[data-page="shipment-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(6) { grid-area: risk; text-align: right; }
  .idx-v2[data-page="shipment-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(7) { grid-area: action; border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); }
  .idx-v2[data-page="wave-index"] .idx-table tbody tr:not(:has([colspan])) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "ref priority" "workflow load" "window progress" "action action"; gap: var(--space-2) var(--space-3); }
  .idx-v2[data-page="wave-index"] .idx-table tbody tr:not(:has([colspan])) > td { min-width: 0; padding: 0; overflow-wrap: anywhere; }
  .idx-v2[data-page="wave-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(1) { grid-area: ref; }
  .idx-v2[data-page="wave-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(2) { grid-area: workflow; }
  .idx-v2[data-page="wave-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(3) { grid-area: load; }
  .idx-v2[data-page="wave-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(4) { grid-area: window; }
  .idx-v2[data-page="wave-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(5) { grid-area: progress; }
  .idx-v2[data-page="wave-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(6) { grid-area: priority; text-align: right; }
  .idx-v2[data-page="wave-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(7) { grid-area: action; border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); }
  .idx-v2[data-page="route-planning-index"] .idx-table tbody tr:not(:has([colspan])) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "ref dispatch" "load window" "progress progress" "action action"; gap: var(--space-2) var(--space-3); }
  .idx-v2[data-page="route-planning-index"] .idx-table tbody tr:not(:has([colspan])) > td { min-width: 0; padding: 0; overflow-wrap: anywhere; }
  .idx-v2[data-page="route-planning-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(1) { grid-area: ref; }
  .idx-v2[data-page="route-planning-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(2) { grid-area: dispatch; }
  .idx-v2[data-page="route-planning-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(3) { grid-area: load; }
  .idx-v2[data-page="route-planning-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(4) { grid-area: window; }
  .idx-v2[data-page="route-planning-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(5) { grid-area: progress; }
  .idx-v2[data-page="route-planning-index"] .idx-table tbody tr:not(:has([colspan])) > td:nth-child(6) { grid-area: action; border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); }
}

/* Supermarket records pair destination and contact with an explicit next step. */
@media (max-width: 767px) {
  .idx-v2[data-page="supermarket-index"] .idx-supermarket-record {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "check identity readiness" ". location contact" "actions actions actions";
    gap: var(--space-3);
  }
  .idx-v2[data-page="supermarket-index"] .idx-supermarket-record > td { min-width: 0; padding: 0; overflow-wrap: anywhere; }
  .idx-v2[data-page="supermarket-index"] .idx-supermarket-record > td:nth-child(1) { grid-area: check; }
  .idx-v2[data-page="supermarket-index"] .idx-supermarket-record > td:nth-child(2) { grid-area: identity; }
  .idx-v2[data-page="supermarket-index"] .idx-supermarket-record > td:nth-child(3) { grid-area: location; }
  .idx-v2[data-page="supermarket-index"] .idx-supermarket-record > td:nth-child(4) { grid-area: contact; }
  .idx-v2[data-page="supermarket-index"] .idx-supermarket-record > td:nth-child(5) { grid-area: readiness; }
  .idx-v2[data-page="supermarket-index"] .idx-supermarket-record > td:nth-child(6) { grid-area: actions; border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); }
  .idx-v2[data-page="supermarket-index"] .idx-prod-row > div { min-width: 0; }
  .idx-v2[data-page="supermarket-index"] .idx-sm-initial { display: none; }
  .idx-v2[data-page="supermarket-index"] :is(.idx-ref.is-name, .idx-dest-name) { white-space: normal; overflow-wrap: anywhere; }
  .idx-v2[data-page="supermarket-index"] .idx-row-actions { justify-content: space-between; width: 100%; }
}