/* ──────────────────────────────────────────────────────────────────────
   Universal detail/view-page primitives — `.dtl-v2` scope.

   Used by delivery/view, shipment/view, return/view, supermarket/subchains.
   The read-oriented siblings of the `.idx-v2` list pages. Self-contained
   (re-declares the table + chip language under `.dtl-v2`) so a detail page
   needs only this one stylesheet, not index_v2.css too.

   Inherits design tokens from dashboard/v2.css (loaded by base.html).
   ────────────────────────────────────────────────────────────────────── */

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

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

/* ─── Header ──────────────────────────────────────────────────────────── */
.dtl-v2 .dtl-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--wm-type-label);
  color: var(--theme-text-tertiary);
  margin-bottom: var(--space-3);
  transition: color var(--transition-fast);
}
.dtl-v2 .dtl-back:hover { color: var(--theme-text-secondary); }
.dtl-v2 .dtl-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
/* Chip sits on the title's OPTICAL center: baseline alignment dropped it to
   the text baseline, which reads as "riding high" beside a 22px title
   (user-reported). Center-align and nudge with line-height instead. */
.dtl-v2 .dtl-h-title-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dtl-v2 .dtl-h-title-row .dtl-status,
.dtl-v2 .dtl-h-title-row .dtl-chip { position: relative; top: 1px; }
.dtl-v2 .dtl-h-title {
  color: var(--theme-text);
}
.dtl-v2 .dtl-h-sub {
  font-family: var(--font-family);
  font-size: var(--wm-type-label);
  color: var(--theme-text-tertiary);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
/* The TITLE yields, the actions never do. Both header children defaulted to
   min-width:auto, so a long title ("Delivery to Demo Grocery Shop Warehouse"
   plus its status chip) could not shrink and pushed the actions onto a row of
   their own — leaving the whole right half of the header empty while the
   buttons sat under the meta line (user-reported). The title block shrinks
   and wraps instead; the actions keep their intrinsic width and their place
   on the title's axis until the viewport genuinely has no room. */
.dtl-v2 .dtl-h > :first-child { flex: 1 1 auto; min-width: 0; }
.dtl-v2 .dtl-h-actions {
  flex: 0 0 auto;
  display: inline-flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
  /* The actions column centers against the title ROW (not the whole header
     incl. the sub-line), so "…" shares the title's axis instead of floating
     at its own height (user-reported misalignment). */
  align-self: flex-start;
  margin-top: 1px;
}
.dtl-v2 .dtl-btn-pri {
  height: var(--control-h);
  display: inline-flex; align-items: 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;
}
.dtl-v2 .dtl-btn-pri:hover { background: var(--brand-primary); }
.dtl-v2 .dtl-btn-sec {
  height: var(--control-h);
  display: inline-flex; align-items: 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);
}
.dtl-v2 .dtl-btn-sec:hover { border-color: var(--border-strong); background: var(--theme-hover); color: var(--theme-text); }

/* Overflow menu trigger + menu (mirrors idx). 40x40 minimum hit area (UI_DESIGN_RULES §12). */
.dtl-v2 .dtl-menu-trigger {
  /* Same 36px row height as .dtl-btn-pri/sec — two controls in one toolbar
     with different heights and radii was a user-reported defect, not a nuance.
     The ::after inset keeps the EFFECTIVE hit target at 44px (§12) while the
     visible box aligns with its siblings. */
  width: var(--control-h); height: var(--control-h);
  position: relative;
  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);
  font-family: var(--font-family);
  font-size: var(--wm-type-body); font-weight: 700;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
.dtl-v2 .dtl-menu-trigger::after { content: ""; position: absolute; inset: -4px; }
.dtl-v2 .dtl-menu-trigger:hover { border-color: var(--border-strong); color: var(--theme-text-secondary); background: var(--theme-hover); }
.dtl-v2 .dtl-menu {
  background: var(--theme-card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 4px;
  min-width: 200px;
  /* Popover, not card: the shadow exemption exists precisely for elements
     that float over content, and z-40 clears sticky page chrome (was z-20,
     under some headers). */
  z-index: 40;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.dtl-v2 .dtl-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  color: var(--theme-text-secondary);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.dtl-v2 .dtl-menu-item:hover { background: var(--theme-hover); color: var(--theme-text); }
.dtl-v2 .dtl-menu-item.is-danger { color: var(--danger-text); }
.dtl-v2 .dtl-menu-item.is-danger:hover { background: var(--danger-bg); }
.dtl-v2 .dtl-menu-sep { height: 1px; background: var(--border-divider); margin: 4px 0; }

/* ─── Status chip ─────────────────────────────────────────────────────── */
.dtl-v2 .dtl-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);

  color: var(--theme-text-secondary);
  white-space: nowrap;
  background: var(--theme-card-bg);
}
.dtl-v2 .dtl-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--theme-text-tertiary); display: inline-block;
}
.dtl-v2 .dtl-status.is-good,
.dtl-v2 .dtl-status[data-status*="delivered"],
.dtl-v2 .dtl-status[data-status*="completed"],
.dtl-v2 .dtl-status[data-status*="restocked"],
.dtl-v2 .dtl-status[data-status*="active"] { color: var(--success-text); border-color: var(--success-border); }
.dtl-v2 .dtl-status.is-good::before,
.dtl-v2 .dtl-status[data-status*="delivered"]::before,
.dtl-v2 .dtl-status[data-status*="completed"]::before,
.dtl-v2 .dtl-status[data-status*="restocked"]::before,
.dtl-v2 .dtl-status[data-status*="active"]::before { background: var(--success); }
.dtl-v2 .dtl-status.is-warn,
.dtl-v2 .dtl-status[data-status*="pending"],
.dtl-v2 .dtl-status[data-status*="initiated"],
.dtl-v2 .dtl-status[data-status*="collected"],
.dtl-v2 .dtl-status[data-status*="inspected"],
.dtl-v2 .dtl-status[data-status*="partial"],
.dtl-v2 .dtl-status[data-status*="transit"],
.dtl-v2 .dtl-status[data-status*="processing"] { color: var(--warning-text); border-color: var(--warning-border); }
.dtl-v2 .dtl-status.is-warn::before,
.dtl-v2 .dtl-status[data-status*="pending"]::before,
.dtl-v2 .dtl-status[data-status*="initiated"]::before,
.dtl-v2 .dtl-status[data-status*="collected"]::before,
.dtl-v2 .dtl-status[data-status*="inspected"]::before,
.dtl-v2 .dtl-status[data-status*="partial"]::before,
.dtl-v2 .dtl-status[data-status*="transit"]::before,
.dtl-v2 .dtl-status[data-status*="processing"]::before { background: var(--warning); }
.dtl-v2 .dtl-status.is-bad,
.dtl-v2 .dtl-status[data-status*="cancelled"],
.dtl-v2 .dtl-status[data-status*="rejected"],
.dtl-v2 .dtl-status[data-status*="failed"],
.dtl-v2 .dtl-status[data-status*="disposed"] { color: var(--danger-text); border-color: var(--danger-border); }
.dtl-v2 .dtl-status.is-bad::before,
.dtl-v2 .dtl-status[data-status*="cancelled"]::before,
.dtl-v2 .dtl-status[data-status*="rejected"]::before,
.dtl-v2 .dtl-status[data-status*="failed"]::before,
.dtl-v2 .dtl-status[data-status*="disposed"]::before { background: var(--danger); }

/* small inline chip (for late/on-time/exceptions) */
.dtl-v2 .dtl-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);

  color: var(--theme-text-secondary);
}
.dtl-v2 .dtl-chip.is-good { color: var(--success-text); border-color: var(--success-border); }
.dtl-v2 .dtl-chip.is-warn { color: var(--warning-text); border-color: var(--warning-border); }
.dtl-v2 .dtl-chip.is-bad  { color: var(--danger-text); border-color: var(--danger-border); }

/* ─── Callouts ────────────────────────────────────────────────────────── */
/* Both the `hidden` ATTRIBUTE and Tailwind's `.hidden` CLASS lose to the rule
   below: `.dtl-v2 .dtl-callout` is (0,2,0) while `.hidden` is (0,1,0), and the
   attribute only works through the UA stylesheet. subchains.html writes
   `class="dtl-callout hidden" hidden` on its bulk-actions bar and the bar still
   rendered — verified by probing a live .dtl-v2 page: display:flex, 45px tall,
   with both defences applied.

   Guard the selector that wins. */
.dtl-v2 .dtl-callout[hidden] { display: none; }

.dtl-v2 .dtl-callout {
  border: 1px solid var(--success-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--wm-type-body);
  color: var(--theme-text);
}
.dtl-v2 .dtl-callout-actions { display: inline-flex; gap: var(--space-2); align-items: center; }
.dtl-v2 .dtl-callout-warn {
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: var(--wm-type-label);
  color: var(--warning-text);
  display: inline-block;
}

/* ─── Status-transition form card ─────────────────────────────────────── */
.dtl-v2 .dtl-status-form {
  background: var(--theme-card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}
.dtl-v2 .dtl-field-inline { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.dtl-v2 .dtl-label {
  color: var(--theme-text-tertiary);
}
.dtl-v2 .dtl-input,
.dtl-v2 .dtl-select {
  height: var(--control-h-sm);
  padding: 0 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);
}
.dtl-v2 .dtl-input:focus, .dtl-v2 .dtl-select:focus { outline: none; border-color: var(--brand-primary); }
.dtl-v2 .dtl-apply-btn {
  height: var(--control-h-sm);
  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);
}
.dtl-v2 .dtl-apply-btn:hover { background: var(--brand-primary); }

/* ─── 2-column record layout: wide main column + sticky meta/action rail.
   Gives detail pages two columns instead of one long single-column stack. ── */
.dtl-v2 .dtl-layout { --wm-main-track: 1fr; --wm-aside-track: 340px; }
.dtl-v2 .dtl-layout.is-single { grid-template-columns: minmax(0, 1fr); }
.dtl-v2 .dtl-main .dtl-grid { margin-bottom: 0; }
.dtl-v2 .dtl-aside { position: sticky; top: var(--space-4); }
/* The status form stacks vertically inside the narrow rail. */
.dtl-v2 .dtl-aside .dtl-status-form { flex-direction: column; align-items: stretch; margin-bottom: 0; }
.dtl-v2 .dtl-aside .dtl-field-inline { min-width: 0; }
.dtl-v2 .dtl-aside .dtl-apply-btn { width: 100%; }
/* 1180, not 960: beside the 240px sidebar a 1024 window leaves ~780px, and
   the two-column layout squeezed the lines table into a half-width column
   that overflowed by 71px. Window breakpoints must account for the shell. */
@media (max-width: 1180px) {
  .dtl-v2 .dtl-aside { position: static; }
}

/* ─── Card grid + cards ───────────────────────────────────────────────── */
.dtl-v2 .dtl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  grid-auto-flow: dense;
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-4);
}
.dtl-v2 .dtl-card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.dtl-v2 .dtl-card.is-full { grid-column: 1 / -1; }
.dtl-v2 .dtl-card-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);
}
.dtl-v2 .dtl-card-title {
  font-family: var(--font-family-heading);
  font-size: var(--wm-type-section); font-weight: 600; color: var(--theme-text);
}
.dtl-v2 .dtl-card-body { padding: var(--space-4); }

/* ─── Definition list (key → value) ───────────────────────────────────── */
.dtl-v2 .dtl-dl {
  display: grid;
  /* Wider min → ~4 even columns that FILL a full-width card, instead of ~6 thin
     columns spraying apart. Drops to 2–3 cols as the card narrows. */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  /* 12/20, not 16/24: at two columns the old gaps read as floating fragments
     rather than a record — the label must sit closer to ITS value than to the
     next field ("is this really the best way to present that info?" — no). */
  gap: var(--space-3) var(--space-5);
}
.dtl-v2 .dtl-field.is-wide { grid-column: 1 / -1; }
.dtl-v2 .dtl-dt {
  color: var(--theme-text-tertiary);
  margin-bottom: 4px;
}
.dtl-v2 .dtl-dd {
  font-size: var(--wm-type-body); font-weight: 500; color: var(--theme-text);
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  /* Definition values carry money and counts on 8 templates (analytics totals,
     order values, quantities). tabular-nums only affects digit glyphs, so it is
     inert on the purely-textual values and costs nothing to apply here rather
     than hunting the numeric ones template by template. */
  font-variant-numeric: tabular-nums;
}
.dtl-v2 .dtl-dd.is-muted { color: var(--theme-text-tertiary); font-weight: 400; }
.dtl-v2 .dtl-dd-sub { font-size: var(--wm-type-label); color: var(--theme-text-tertiary); }

/* ─── Table (reuses idx visual language under .dtl scope) ─────────────── */
.dtl-v2 .dtl-table-scroll { overflow-x: auto; }
.dtl-v2 .dtl-table { width: 100%; border-collapse: collapse; font-size: var(--wm-type-body); }
.dtl-v2 .dtl-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;
}
.dtl-v2 .dtl-table thead th.is-num { text-align: right; }
.dtl-v2 .dtl-table thead th.is-center { text-align: center; }
.dtl-v2 .dtl-table tbody tr { border-bottom: 1px solid var(--border-divider); transition: background-color var(--transition-fast); }
.dtl-v2 .dtl-table tbody tr:last-child { border-bottom: 0; }
.dtl-v2 .dtl-table tbody tr:hover { background: var(--theme-hover); }
.dtl-v2 .dtl-table tbody td { padding: var(--space-2) var(--space-3); color: var(--theme-text-secondary); vertical-align: top; }
.dtl-v2 .dtl-table tbody td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.dtl-v2 .dtl-table tbody td.is-center { text-align: center; }
.dtl-v2 .dtl-table tfoot td {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-subtle);
  background: var(--theme-bg-secondary);
  font-weight: 600;
  color: var(--theme-text);
  font-variant-numeric: tabular-nums;
}
.dtl-v2 .dtl-table tfoot td.is-num { text-align: right; }
.dtl-v2 .dtl-ref { font-family: var(--font-family-mono); font-size: var(--wm-type-label); font-weight: 600; color: var(--theme-text); }
.dtl-v2 .dtl-ref:hover { color: var(--brand-text); }
.dtl-v2 .dtl-num-strong { font-weight: 600; color: var(--theme-text); font-variant-numeric: tabular-nums; }
.dtl-v2 .dtl-num-neg { color: var(--danger-text); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Zero / no-value numeric cell — muted, never shown with a misleading minus sign. */
.dtl-v2 .dtl-num-muted { color: var(--theme-text-tertiary); font-variant-numeric: tabular-nums; }

.dtl-v2 .dtl-row-action {
  display: inline-flex; align-items: center;
  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);
}
.dtl-v2 .dtl-row-action:hover { border-color: var(--border-strong); background: var(--theme-hover); color: var(--theme-text); }
.dtl-v2 .dtl-row-action.is-pri { background: var(--theme-text); color: var(--theme-text-inverted); border-color: var(--theme-text); }
.dtl-v2 .dtl-row-action.is-pri:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--theme-text-inverted); }

/* ─── Empty within a card ─────────────────────────────────────────────── */
.dtl-v2 .dtl-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-size: var(--wm-type-body);
  color: var(--theme-text-tertiary);
}
.dtl-v2 .dtl-empty-cta { color: var(--brand-text); font-weight: 500; }
.dtl-v2 .dtl-empty-cta:hover { text-decoration: underline; }

/* ─── Split layout (main + aside) for rich detail pages ───────────────── */
.dtl-v2 .dtl-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(min(280px, 100%), 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 1180px) { .dtl-v2 .dtl-split { grid-template-columns: minmax(0, 1fr); } }
/* min-width:0 lets the grid/flex column shrink below its content's min-content
   width (a wide items table), so .dtl-table-scroll's overflow-x:auto scrolls the
   table WITHIN its card instead of forcing horizontal page scroll on mobile. */
.dtl-v2 .dtl-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* Small uppercase section label inside a card body */
.dtl-v2 .dtl-section-label {
  font-family: var(--font-family);
  font-size: var(--wm-type-label); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--theme-text-tertiary);
  margin-bottom: var(--space-3);
}

/* Highlighted note box — hairline, colored label text, no fill flood */
.dtl-v2 .dtl-note {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}
.dtl-v2 .dtl-note-label {
  font-family: var(--font-family);
  font-size: var(--wm-type-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 3px;
}
.dtl-v2 .dtl-note.is-good { border-color: var(--success-border); }
.dtl-v2 .dtl-note.is-good .dtl-note-label { color: var(--success-text); }
.dtl-v2 .dtl-note.is-warn { border-color: var(--warning-border); }
.dtl-v2 .dtl-note.is-warn .dtl-note-label { color: var(--warning-text); }
.dtl-v2 .dtl-note.is-bad { border-color: var(--danger-border); }
.dtl-v2 .dtl-note.is-bad .dtl-note-label { color: var(--danger-text); }
.dtl-v2 .dtl-note.is-info { border-color: var(--info-border, var(--border-strong)); }
.dtl-v2 .dtl-note.is-info .dtl-note-label { color: var(--info, var(--brand-primary)); }
.dtl-v2 .dtl-note-body { font-size: var(--wm-type-body); color: var(--theme-text-secondary); }

/* Progress segments (shipment lifecycle) */
.dtl-v2 .dtl-progress { display: flex; gap: 6px; }
.dtl-v2 .dtl-progress-seg { flex: 1; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.dtl-v2 .dtl-progress-bar { width: 100%; height: 4px; border-radius: 2px; background: var(--border-subtle); }
.dtl-v2 .dtl-progress-seg.is-done .dtl-progress-bar { background: var(--success); }
.dtl-v2 .dtl-progress-seg.is-current .dtl-progress-bar { background: var(--brand-primary); }
.dtl-v2 .dtl-progress-label {
  font-size: var(--wm-type-label); color: var(--theme-text-tertiary); text-align: center;
}
.dtl-v2 .dtl-progress-seg.is-done .dtl-progress-label { color: var(--success-text); }
.dtl-v2 .dtl-progress-seg.is-current .dtl-progress-label { color: var(--brand-text); font-weight: 600; }
@media (max-width: 640px) { .dtl-v2 .dtl-progress-label { display: none; } }

/* Event timeline */
.dtl-v2 .dtl-timeline { position: relative; padding-left: var(--space-5); }
.dtl-v2 .dtl-timeline::before {
  content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1px;
  background: var(--border-divider);
}
.dtl-v2 .dtl-tl-item { position: relative; padding-bottom: var(--space-4); }
.dtl-v2 .dtl-tl-item:last-child { padding-bottom: 0; }
.dtl-v2 .dtl-tl-dot {
  position: absolute; left: -18px; top: 3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--theme-text-tertiary);
  border: 2px solid var(--theme-card-bg);
}
.dtl-v2 .dtl-tl-dot.is-good { background: var(--success); }
.dtl-v2 .dtl-tl-dot.is-bad { background: var(--danger); }
.dtl-v2 .dtl-tl-dot.is-info { background: var(--brand-primary); }
.dtl-v2 .dtl-tl-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.dtl-v2 .dtl-tl-title { font-size: var(--wm-type-body); font-weight: 500; color: var(--theme-text); }
.dtl-v2 .dtl-tl-time { font-family: var(--font-family); font-size: var(--wm-type-label); color: var(--theme-text-tertiary); font-variant-numeric: tabular-nums; }
.dtl-v2 .dtl-tl-desc { font-size: var(--wm-type-label); color: var(--theme-text-tertiary); margin-top: 2px; }

/* Exceptions list */
.dtl-v2 .dtl-exc { border-bottom: 1px solid var(--border-divider); padding: var(--space-3) var(--space-4); }
.dtl-v2 .dtl-exc:last-child { border-bottom: 0; }
.dtl-v2 .dtl-exc-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 3px; }
.dtl-v2 .dtl-exc-title { font-size: var(--wm-type-body); font-weight: 600; color: var(--theme-text); }
.dtl-v2 .dtl-exc-desc { font-size: var(--wm-type-body); color: var(--theme-text-secondary); }
.dtl-v2 .dtl-exc-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.dtl-v2 .dtl-btn-block { width: 100%; justify-content: center; }
.dtl-v2 .dtl-text-danger {
  font-size: var(--wm-type-label); font-weight: 500; color: var(--danger-text);
  transition: opacity var(--transition-fast);
}
.dtl-v2 .dtl-text-danger:hover { opacity: 0.75; }

/* ─── Onboarding / "moment" pages (welcome, store-live, intent) ───────── */
.dtl-v2 .dtl-narrow { max-width: 720px; margin: 0 auto; }
.dtl-v2 .dtl-hero { text-align: center; margin-bottom: var(--space-8); }
.dtl-v2 .dtl-hero-title {
  font-family: var(--font-family-heading);
  font-size: var(--wm-type-page); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15;
  color: var(--theme-text);
}
.dtl-v2 .dtl-hero-sub { margin-top: var(--space-3); font-size: var(--wm-type-body); color: var(--theme-text-tertiary); }

/* Numbered step guide */
.dtl-v2 .dtl-steps { display: flex; flex-direction: column; gap: var(--space-5); }
.dtl-v2 .dtl-step { display: flex; gap: var(--space-3); align-items: flex-start; }
.dtl-v2 .dtl-step-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-family); font-size: var(--wm-type-label); font-weight: 600;
  border: 1px solid var(--border-subtle); color: var(--theme-text-secondary);
}
.dtl-v2 .dtl-step.is-active .dtl-step-num { background: var(--theme-text); color: var(--theme-text-inverted); border-color: var(--theme-text); }
.dtl-v2 .dtl-step-title { font-size: var(--wm-type-body); font-weight: 600; color: var(--theme-text); margin-bottom: 2px; }
.dtl-v2 .dtl-step-desc { font-size: var(--wm-type-body); color: var(--theme-text-tertiary); margin-bottom: var(--space-2); }

/* Choice cards (onboarding intent) */
.dtl-v2 .dtl-choice-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-3);
}
.dtl-v2 .dtl-choice {
  display: block; width: 100%; text-align: left;
  padding: var(--space-4);
  background: var(--theme-card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  cursor: pointer;
}
.dtl-v2 .dtl-choice:hover { border-color: var(--border-strong); background: var(--theme-hover); }
.dtl-v2 .dtl-choice:disabled { opacity: 0.5; cursor: not-allowed; }
.dtl-v2 .dtl-choice-title { font-size: var(--wm-type-body); font-weight: 600; color: var(--theme-text); margin-bottom: 4px; }
.dtl-v2 .dtl-choice-desc { font-size: var(--wm-type-body); color: var(--theme-text-tertiary); }

/* Copyable URL field (store-live) */
.dtl-v2 .dtl-copyfield { display: flex; gap: var(--space-2); align-items: center; }
.dtl-v2 .dtl-copyfield input {
  flex: 1; min-width: 0;
  padding: 9px 12px;
  font-family: var(--font-family); 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);
}
.dtl-v2 .dtl-copyfield input:focus { outline: none; border-color: var(--brand-primary); }

/* Centered single-action footer */
.dtl-v2 .dtl-center { text-align: center; margin-top: var(--space-6); }

/* ─── Phone shell (≤767px): the table becomes a card list ─────────────────
   Same idiom as products/orders. Cells are self-describing (reference +
   date, status pill, money, action rail), so no per-<td> labels. */
@media (max-width: 767px) {
  .dtl-v2 .dtl-table-scroll { overflow-x: visible; }
  .dtl-v2 .dtl-table { display: block; }
  .dtl-v2 .dtl-table thead { display: none; }
  .dtl-v2 .dtl-table tbody { display: block; }
  .dtl-v2 .dtl-table tbody tr {
    display: block;
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
  }
  .dtl-v2 .dtl-table tbody tr:last-child { border-bottom: var(--card-border); }
  .dtl-v2 .dtl-table tbody tr:hover { background: var(--card-bg); }
  .dtl-v2 .dtl-table tbody td { display: block; padding: 2px 0; text-align: left; border: 0; }
  .dtl-v2 .dtl-table tbody td.is-num,
  .dtl-v2 .dtl-table tbody td.is-center { text-align: left; }
  /* Label left, value right, ONE line each — the pair was stacked as two
     bands per fact, which made a three-line delivery a 260px card with an
     empty right half. */
  .dtl-v2 .dtl-table tbody td[data-label] {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-3);
    font-variant-numeric: tabular-nums;
  }

  /* ── Line items: the card IS the equation ───────────────────────────────
     A line item is quantity × unit = total. Rendered as three labelled rows
     it took five bands per product and left the one number that matters —
     the line total — as the ONLY unlabelled figure on the card, floating
     under a divider. Written as an equation it needs no labels at all:
     "14 × ₮25,563" says what it is, and the bold figure opposite is
     self-evidently their product.

     Semantic classes, not positions: delivery lines run qty→unit and order
     items run unit→qty, so `nth-child` would compose one of them backwards. */
  .dtl-v2 .dtl-table tbody tr:has(.dtl-c-total) {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "name name  name"
      "qty  unit  total";
    column-gap: var(--space-2);
    row-gap: 2px;
    align-items: baseline;
  }
  .dtl-v2 .dtl-table tbody td.dtl-c-name  { grid-area: name; margin-bottom: 2px; }
  .dtl-v2 .dtl-table tbody td.dtl-c-qty   { grid-area: qty; }
  .dtl-v2 .dtl-table tbody td.dtl-c-unit  { grid-area: unit; }
  .dtl-v2 .dtl-table tbody td.dtl-c-total { grid-area: total; text-align: right; }
  /* The labels are what the equation replaces. `tr` in the selector on
     purpose: the generic td[data-label]::before rule below has the same
     specificity and sits LATER in the file, so it would win on source order
     — the third time today a later duplicate quietly took precedence. One
     extra element in the selector settles it wherever the rules end up. */
  .dtl-v2 .dtl-table tbody tr td.dtl-c-qty::before,
  .dtl-v2 .dtl-table tbody tr td.dtl-c-unit::before { content: none; }
  .dtl-v2 .dtl-table tbody tr td.dtl-c-qty,
  .dtl-v2 .dtl-table tbody tr td.dtl-c-unit {
    display: block;
    color: var(--theme-text-secondary);
    font-variant-numeric: tabular-nums;
  }
  /* "×" belongs to the pair, not to either number. */
  .dtl-v2 .dtl-table tbody tr td.dtl-c-qty::after {
    content: " ×";
    color: var(--theme-text-tertiary);
  }
  /* The generic card rule gives the LAST cell a divider and top padding to
     separate a stacked footer; here the last cell is the total sitting on
     the same baseline as the equation, so the rule would draw a rule
     through the middle of the row. */
  .dtl-v2 .dtl-table tbody tr td.dtl-c-total {
    border-top: 0; margin-top: 0; padding-top: 0;
    font-variant-numeric: tabular-nums;
  }
  .dtl-v2 .dtl-table tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--theme-text-tertiary);
    font-size: var(--wm-type-body);
  }
  .dtl-v2 .dtl-table tfoot { display: block; }
  .dtl-v2 .dtl-table tfoot tr {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--space-3); padding: var(--space-3) var(--space-4) 0;
  }
  .dtl-v2 .dtl-table tfoot td { display: block; padding: 0; border: 0; background: transparent; }
  .dtl-v2 .dtl-table tfoot td:last-child { text-align: right; }
  .dtl-v2 .dtl-table tbody td:first-child { padding-top: 0; }
  .dtl-v2 .dtl-table tbody td:last-child { padding-top: var(--space-2); margin-top: var(--space-1); border-top: 1px solid var(--border-divider); }
}

/* Phone shell: a header with FOUR or more actions (order detail's document
   links) wrapped 3 + 1 with an orphan. Two equal columns instead. :has()
   keeps two-action headers (Edit + "…") untouched — a grid would stretch the
   menu trigger to half the width. */
@media (max-width: 767px) {
  .dtl-v2 .dtl-h-actions:has(> :nth-child(4)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    width: 100%; /* the header aligns actions flex-start; the grid fills the row */
  }
  .dtl-v2 .dtl-h-actions:has(> :nth-child(4)) > * { justify-content: center; }
}

/* ─── Disclosure inside a detail card ──────────────────────────────────────
   For content that only matters in some states (tracking fields on an order
   that has not shipped). Chevron via ::before so the native marker does not
   vary by browser; the summary is a 32px touch row. */
.dtl-v2 .dtl-disclosure { margin-top: var(--space-3); }
.dtl-v2 .dtl-disclosure > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--control-h-sm);
  font-size: var(--wm-type-body); font-weight: 500;
  color: var(--theme-text-secondary);
}
.dtl-v2 .dtl-disclosure > summary::-webkit-details-marker { display: none; }
/* clip-path, not a border triangle: a 5px border-left is exactly the shape
   the static auditor bans (the "accent rail" antipattern), and it cannot
   tell a decorative caret from a rail. */
.dtl-v2 .dtl-disclosure > summary::before {
  content: "";
  width: 8px; height: 8px;
  background: currentColor;
  clip-path: polygon(25% 0%, 100% 50%, 25% 100%);
  transition: transform var(--transition-fast);
}
.dtl-v2 .dtl-disclosure[open] > summary::before { transform: rotate(90deg); }
.dtl-v2 .dtl-disclosure > summary:hover { color: var(--theme-text); }

/* Branch records: identity and readiness first, then receiving details. */
.dtl-v2[data-page="supermarket-subchains"] .dtl-branch-actions { justify-content: flex-end; }
.dtl-v2[data-page="supermarket-subchains"] .dtl-branch-record:has(input:checked) { background: var(--tint-brand-05); }
.dtl-v2[data-page="supermarket-subchains"] .dtl-branch-record:focus-within { outline: 1px solid var(--border-strong); outline-offset: -1px; }
.dtl-v2[data-page="supermarket-subchains"] .dtl-branch-name:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.dtl-v2[data-page="supermarket-subchains"] .dtl-branch-menu {
  position: fixed; inset: auto; margin: 0; padding: var(--space-2);
  max-width: calc(100vw - 16px); color: var(--theme-text);
}
.dtl-v2[data-page="supermarket-subchains"] .dtl-branch-menu:not(:popover-open) { display: none; }
.dtl-v2[data-page="supermarket-subchains"] .dtl-branch-menu .dtl-menu-item { min-height: 40px; }
@media (max-width: 767px) {
  .dtl-v2[data-page="supermarket-subchains"] .dtl-table tbody .dtl-branch-record {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "check identity readiness" ". address contact" "actions actions actions";
    gap: var(--space-3);
  }
  .dtl-v2[data-page="supermarket-subchains"] .dtl-table .dtl-branch-record > td { min-width: 0; padding: 0; margin: 0; white-space: normal; overflow-wrap: anywhere; }
  .dtl-v2[data-page="supermarket-subchains"] .dtl-branch-record > td:nth-child(1) { grid-area: check; }
  .dtl-v2[data-page="supermarket-subchains"] .dtl-branch-record > td:nth-child(2) { grid-area: identity; }
  .dtl-v2[data-page="supermarket-subchains"] .dtl-branch-record > td:nth-child(3) { grid-area: address; }
  .dtl-v2[data-page="supermarket-subchains"] .dtl-branch-record > td:nth-child(4) { grid-area: contact; }
  .dtl-v2[data-page="supermarket-subchains"] .dtl-branch-record > td:nth-child(5) { grid-area: readiness; }
  .dtl-v2[data-page="supermarket-subchains"] .dtl-table .dtl-branch-record > td:nth-child(6) { grid-area: actions; padding-top: var(--space-2); }
  .dtl-v2[data-page="supermarket-subchains"] .dtl-branch-actions { display: flex; justify-content: space-between; width: 100%; }
}

/* Order status: aligned controls and a compact, readable lifecycle. */
.dtl-v2[data-page="market-order-detail"] .order-status-card { --order-control-h: 40px; }
.dtl-v2[data-page="market-order-detail"] .order-status-card .dtl-card-h { align-items: center; }
.dtl-v2[data-page="market-order-detail"] .order-status-card .dtl-status { border: 0; padding: 0; }
.dtl-v2 .order-status-controls { display: flex; align-items: center; gap: var(--space-2); }
.dtl-v2 .order-status-controls #order-status-select { flex: 0 1 200px; min-width: 0; }
.dtl-v2 .order-status-controls :is(#order-status-select, .dtl-apply-btn) { height: var(--order-control-h); min-height: var(--order-control-h); padding-top: 0; padding-bottom: 0; font-size: var(--wm-type-body); border-radius: var(--radius-md); }
.dtl-v2 .order-status-controls .dtl-apply-btn { flex-shrink: 0; }
.dtl-v2 .order-status-controls .dtl-apply-btn:disabled { opacity: .5; cursor: default; }
.dtl-v2 .order-status-controls :focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.dtl-v2 .order-status-card .dtl-disclosure { margin-top: var(--space-3); }
.dtl-v2 .order-tracking-fields { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); margin-top: var(--space-3); }
.dtl-v2 .order-lifecycle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); list-style: none; font-size: var(--wm-type-label); color: var(--theme-text-secondary); }
.dtl-v2 .order-lifecycle li { display: inline-flex; align-items: center; gap: 6px; }
.dtl-v2 .order-lifecycle li:not(:last-child)::after { content: '›'; color: var(--theme-text-tertiary); }
.dtl-v2 .order-lifecycle [aria-current="step"] { font-weight: 600; color: var(--theme-text); }
@media (pointer: coarse) { .dtl-v2[data-page="market-order-detail"] .order-status-card { --order-control-h: 44px; } }

.dtl-v2 .order-tracking-fields .dtl-field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }

.dtl-v2 .order-tracking-fields .dtl-input { width: 100%; min-width: 0; height: var(--order-control-h); }

.dtl-v2 .order-shipping-address { white-space: pre-line; color: var(--theme-text-secondary); }