/* Inventory Aging page (#inventory-aging).
   All rules namespaced .aging-* and/or scoped to the page root. Reuses portal
   design tokens + .card/.fin-table/.breadcrumb from styles.css. Defines NO :root. */

/* The global time/platform/store/service filter bar does not apply to an
   inventory snapshot — it is gated off in the app template via showFilterBar
   (js/app.js). Currency lives in the page header instead. */

.aging-page { font-variant-numeric: tabular-nums; }

.aging-fresh { display: flex; flex-direction: column; gap: 1px; }
.aging-fresh__abs {
  font-size: var(--font-small); font-family: 'Geist Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
.aging-fresh__tz { color: var(--text-tertiary); font-size: var(--font-xs); letter-spacing: 0.04em; }
.aging-fresh__rel {
  font-size: var(--font-xs); font-family: 'Geist Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums; color: var(--text-tertiary);
}
.aging-header__controls { flex-wrap: wrap; }
.aging-sku-note { font-weight: 400; color: var(--text-tertiary); text-transform: none; letter-spacing: 0; }

/* Toggles now use the shared .pnl-compare-toggle / .pnl-compare-btn segmented
   control (styles.css) — the bespoke .aging-seg control was removed in FE-026. */

/* ── Loading / empty / error ── */
.aging-state {
  padding: var(--space-12); text-align: center; color: var(--text-secondary);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.aging-state--error { color: var(--color-danger); }
.aging-retry {
  margin-top: var(--space-3); padding: 6px 16px;
  border: 1px solid var(--color-action); border-radius: var(--radius-sm);
  background: var(--color-action); color: var(--text-on-action);
  font-size: var(--font-small); font-weight: 600; cursor: pointer;
  transition: background var(--transition-fast);
}
.aging-retry:hover { background: var(--color-action-hover); }

/* ── View + cards ── */
.aging-view > .card { margin-bottom: var(--space-6); }
.aging-card-head { align-items: flex-start; flex-wrap: wrap; gap: var(--space-3); }
.aging-card-head__right { display: flex; align-items: center; gap: var(--space-3); }
.aging-actions { flex-wrap: wrap; }

/* ── Period multi-select dropdown (native <details>) ── */
.aging-dd { position: relative; }
.aging-dd__trigger {
  list-style: none; cursor: pointer; user-select: none;
  height: 32px; padding: 0 var(--space-3); display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary); font-size: var(--font-small);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.aging-dd__trigger::-webkit-details-marker { display: none; }
.aging-dd__trigger:hover { border-color: var(--border-strong); color: var(--text-primary); }
.aging-dd[open] .aging-dd__trigger { border-color: var(--border-strong); color: var(--text-primary); }
.aging-dd__pre { color: var(--text-tertiary); font-size: var(--font-xs); }
.aging-dd__val { color: var(--text-primary); font-weight: 500; }
.aging-dd__panel {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; z-index: 300;
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-2); max-height: 280px; overflow-y: auto;
}
.aging-dd__top { display: flex; gap: var(--space-2); padding: 0 var(--space-1) var(--space-2); }
.aging-dd__act {
  padding: 3px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary); font-size: var(--font-xs); cursor: pointer;
}
.aging-dd__act:hover { background: var(--bg-hover); color: var(--text-primary); }
.aging-dd__opt {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 6px var(--space-2); border-radius: var(--radius-sm); cursor: pointer;
}
.aging-dd__opt:hover { background: var(--bg-hover); }
.aging-dd__chk {
  width: 15px; height: 15px; border: 1.5px solid var(--border-strong); border-radius: 4px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: transparent;
}
.aging-dd__chk.on { color: var(--text-on-action); }
.aging-dd__dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.aging-dd__name { font-size: var(--font-small); color: var(--text-primary); flex: 1; }

/* ── Legend ── */
.aging-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: var(--space-3) 0 var(--space-4);
  font-size: var(--font-xs); color: var(--text-secondary);
}
.aging-legend__item { display: inline-flex; align-items: center; gap: 5px; }
.aging-legend__dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* ── Stock-category/Brand dropdown: the sticky .bs-hdr__stack uses overflow:hidden
   to clip tabs to its rounded corners, which also clips the searchable-select
   popover. Override to visible on this page so options are accessible. The tab
   corner-clip is inconsequential at 1px. ── */
.aging-page .bs-hdr__stack { overflow: visible; }

/* ── Chart ── */
.aging-chart { margin-top: var(--space-2); }
.aging-section-label {
  margin: var(--space-4) 0 var(--space-2); text-align: center;
  font-size: 10px; font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-tertiary);
}
/* In both-mode the label is centered in the 5-column grid (column 3 = center-label).
   In single-mode the entity names are in .aging-row__lbl.single (width 176px,
   text-right) — the FIRST flex item. The section title aligns by matching that
   exact box: max-width 176px, text-right, no flex growth. */
.aging-chart.mode-both .aging-section-label { text-align: center; }
.aging-chart.mode-qty .aging-section-label,
.aging-chart.mode-val .aging-section-label {
  text-align: right; max-width: 176px;
}

/* Both-mode row: [qty-total][qty-bar][center-label][val-bar][val-total] */
.aging-chart.mode-both .aging-row {
  display: grid; grid-template-columns: 68px 1fr 176px 1fr 90px;
  align-items: center; column-gap: var(--space-2);
  padding: 3px var(--space-1); border-radius: var(--radius-sm); margin-bottom: 4px;
}
/* Single-mode row: [label][bar][total][arrow] */
.aging-chart.mode-qty .aging-row,
.aging-chart.mode-val .aging-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 3px var(--space-1); border-radius: var(--radius-sm); margin-bottom: 4px;
}
.aging-row.clickable { cursor: pointer; }
.aging-row.clickable:hover { background: var(--bg-hover); }
.aging-row--agg { font-weight: 700; }
.aging-row--agg .aging-bar { height: 28px; }

.aging-row__tot {
  font-family: 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
  font-size: var(--font-small); color: var(--text-primary); white-space: nowrap;
}
.aging-row__tot.qty { text-align: right; }
.aging-row__tot.val { text-align: left; }
.aging-chart.mode-qty .aging-row__tot,
.aging-chart.mode-val .aging-row__tot { flex-shrink: 0; width: 96px; text-align: right; }
.aging-row--agg .aging-row__tot { font-size: var(--font-data); font-weight: 700; }

.aging-row__lbl { overflow: hidden; text-align: center; min-width: 0; }
.aging-row__lbl.single { flex-shrink: 0; width: 176px; text-align: right; }
.aging-row__name {
  font-size: var(--font-small); color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.aging-row--agg .aging-row__name {
  font-size: var(--font-data); font-weight: 700; color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.aging-row__sub {
  font-size: 10px; color: var(--text-tertiary);
  font-family: 'Geist Mono', ui-monospace, monospace; margin-top: 2px; display: block;
}
.aging-row__arrow { color: var(--text-tertiary); font-size: 14px; flex-shrink: 0; width: 14px; text-align: center; }

/* Metric-axis title — appears at the right end of the bar column (single mode)
   to tell the user whether the bars show Quantity or Value. Aligned at bar-end. */
.aging-metric-axis {
  display: none;
  font-size: 9px; font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-tertiary);
  white-space: nowrap; flex-shrink: 0;
}
/* Only show in single-metric modes; the agg row gets the axis label */
.aging-row--agg .aging-metric-axis { display: inline; }

/* Both-mode axis header row (AUD-AGE-A1): a thin "Quantity ‹ / › Value" label
   row that rides the same 5-column grid as the bars, so the mirrored qty(left)/
   value(right) bars are unambiguous. No total/bar — just the two end labels. */
.aging-chart.mode-both .aging-axis-row {
  margin-bottom: 2px; padding-top: 0; padding-bottom: 0; min-height: 14px;
}
.aging-metric-axis.both { display: inline; }
.aging-metric-axis.both.qty { text-align: right; }
.aging-metric-axis.both.val { text-align: left; }

/* Single-mode metric title sits inside the label column (AUD-AGE-A2) — a quiet
   tag above the entity name, right-aligned to match the label column. */
.aging-metric-axis.inline { display: block; text-align: right; margin-bottom: 1px; }

/* 2026-06-10 (reverses AUD-AGE-A2) — single-metric agg row: the metric title trails
   the TOTAL at the bar end, stacked directly above the value so it reads as that
   number's axis label and vertically aligns with the data. */
.aging-row__tot--titled {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  line-height: 1.12;
}
.aging-metric-axis.trailing { display: block; text-align: right; }
.aging-row__tot--titled .aging-row__tot-num { font-size: var(--font-data); font-weight: 700; }

/* Back-button on the agg row — shown only when drilled (v-if on the element).
   Precedes the agg name and signals "click to go up a level". */
.aging-bc-back {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--font-xs); color: var(--color-action); cursor: pointer;
  white-space: nowrap;
}
.aging-bc-back:hover { text-decoration: underline; }
.aging-bc-back__arrow { font-size: 13px; line-height: 1; }

/* Bar track + fill + segments */
.aging-bar { position: relative; height: 22px; border-radius: 4px; overflow: hidden; min-width: 0; }
.aging-chart.mode-qty .aging-bar,
.aging-chart.mode-val .aging-bar { flex: 1; }
.aging-bar__fill {
  position: absolute; top: 0; bottom: 0; display: flex; overflow: hidden;
  transition: width 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
.aging-bar.qty .aging-bar__fill { right: 0; left: auto; flex-direction: row-reverse; }
.aging-bar.val .aging-bar__fill { left: 0; }
.aging-bar__fill i {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; min-width: 0; height: 100%;
}
.aging-bar__fill i b {
  color: var(--text-on-action); font-size: 10px; font-weight: 600;
  font-family: 'Geist Mono', ui-monospace, monospace;
  white-space: nowrap; padding: 0 3px; overflow: hidden; text-overflow: ellipsis;
}

/* ── Dashboard table styling standard (S1 + S2) ──
   fin-table is SOCOM-shared, so EVERY rule is scoped body[data-page="inventory-aging"].
   S1 — bold + centered headers (incl. the entity column). The explicit
   background: var(--bg-inset) is load-bearing: the matrix thead is sticky
   (top:0 in the height-capped .data-table-wrap), so it MUST stay opaque or the
   S2-tinted brand rows would bleed through it on vertical scroll. It mirrors the
   canonical .fin-table th background (styles.css). The aging-th-grp left/tertiary
   override (below) intentionally yields to the centered standard here. */
body[data-page="inventory-aging"] .aging-fin-table th {
  font-weight: 700;
  text-align: center;
  background: var(--bg-inset);
  font-size: var(--font-xs);
  color: var(--text-secondary);
}
/* S2 — zebra. The tables interleave group/brand/(sku) rows in differing orders,
   so nth-child striping can't reliably target one tier. Instead tint brand rows
   flat (class tagged in the templates), leaving group-total rows to their
   stronger .fin-row-total tint and SKU rows plain — a clean 3-level hierarchy.
   No frozen column here, so a body-cell tint is safe. */
body[data-page="inventory-aging"] .aging-fin-table tbody tr.aging-brand-row td {
  background: color-mix(in srgb, var(--text-primary) 3.5%, transparent);
}

/* ── Matrix table modifiers (layered on .fin-table) ── */
.aging-fin-table th.aging-th-grp { text-align: left; color: var(--text-tertiary); }
.aging-fin-table th.aging-th-bkt { border-left: 1px solid var(--border-default); }
.aging-fin-table th.aging-th-total,
.aging-fin-table td.aging-total-col { border-left: 2px solid var(--border-strong); }
.aging-fin-table th.aging-bkt-first,
.aging-fin-table td.aging-bkt-first { border-left: 1px solid var(--border-default); }
.aging-fin-table td.aging-name { font-weight: 600; }
.aging-fin-table tr.aging-grp-row { cursor: pointer; user-select: none; }
.aging-toggle {
  display: inline-block; width: 14px; font-size: 9px; color: var(--text-tertiary);
  vertical-align: middle; margin-right: 4px;
}
.aging-fin-table td.aging-indent-1 { padding-left: var(--space-6); }
.aging-fin-table td.aging-indent-2 { padding-left: var(--space-10); color: var(--text-secondary); }
/* SKU name + code inline — code is muted mono so it doesn't compete with the name */
.aging-sku-code {
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px;
  color: var(--text-tertiary); margin-left: 4px;
}
.aging-fin-table tr.aging-grp-row[class*="brand"] td { cursor: pointer; }

/* Self-contained scroll (2026-05-31, the ATP recipe — design-guideline "Wide
   detail tables"): the wide matrix can't pin its header on PAGE scroll because
   .data-table-wrap's overflow-x:auto scopes the sticky thead to a wrap that
   never scrolls vertically. Cap the wrap height so it owns dual-axis scroll and
   pin thead to top:0 of the wrap (NOT --bs-header-h). */
.aging-page .fin-table thead { top: 0; z-index: 5; }
body[data-page="inventory-aging"] .data-table-wrap { max-height: calc(100vh - 240px); overflow: auto; }

/* Overflow fix (finding 1): the 24-column matrix table is wider than the
   viewport. .data-table-wrap already scrolls it (overflow-x:auto), but the
   flex item .content-area defaults to min-width:auto and expands to .page's
   max-width (1600) instead of shrinking — pushing the page wider than the
   viewport. Page-scope min-width:0 onto the actual flex item so the wrap
   scrolls internally and the page never overflows. (Route-scoped via the body
   data-page attr → zero effect on any other portal page.) */
body[data-page="inventory-aging"] .content-area { min-width: 0; }

/* Sticky-header enabler (finding 3): the router outlet .page-content is
   overflow-y:auto, which scopes the sticky header to it — and since it never
   scrolls internally (the document scrolls), the header would never pin. Drop
   it to visible on this route so the header sticks to the document viewport
   (this is exactly why the global .filter-stack sticky works — it lives OUTSIDE
   .page-content). Route-scoped → no effect on any other page. */
body[data-page="inventory-aging"] .page-content { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .aging-page * { transition: none !important; animation: none !important; }
}