/* ============================================================
   Inventory & DOI (#inventory-doi) — FE-022
   Namespaced .doi-*; reuses portal tokens + .card/.fin-table/.breadcrumb + the shared .pnl-compare-toggle.
   Defines NO :root. Charts: SVG gauge/donut + CSS province rail-bars.
   Sticky surface = BsSharedHeader (--bs-header-h).
   ============================================================ */

/* Route-scoped overflow fix (mirrors aging): wide tables scroll inside their wrap
   instead of stretching .page past the viewport. */
body[data-page="inventory-doi"] .content-area { min-width: 0; }
.doi-page { min-width: 0; }
.doi-tabs { flex-wrap: wrap; }
/* Sticky on the <thead> (not <th>) so this override stays compatible with
   the global `.fin-table thead { position: sticky; top: 0; }` cascade.
   Targeting <th> alone leaves the global thead sticky at top:0 while the
   th cells pin at top:--bs-header-h — the gap shows up as a header row
   stranded mid-table once any scrolling happens. Matches aging.css. */
/* Self-contained scroll (2026-05-31, ATP recipe — design-guideline "Wide detail
   tables"): cap the wrap so it owns dual-axis scroll; pin thead to top:0 of the
   wrap, not the page viewport (--bs-header-h pinned the header to a wrap that
   never scrolls vertically → it rode away on row-scroll). */
.doi-page .fin-table thead { top: 0; z-index: 5; }
/* 2026-06-10 feedback — header cells vertical-align middle to match the data rows'
   padding/height (global `.fin-table td` is middle, but `th` wasn't). Page-scoped. */
.doi-page .fin-table th { vertical-align: middle; }
body[data-page="inventory-doi"] .data-table-wrap { max-height: calc(100vh - 240px); overflow: auto; }

.doi-muted { padding: var(--space-5); color: var(--text-tertiary); }
.doi-err { padding: var(--space-5); }
.doi-err .btn { margin-top: var(--space-3); }

/* ---- Overview: gauge + donut row ---- */
.doi-ov-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.doi-gauge-card { flex: 0 0 300px; }
.doi-donut-card { flex: 1; min-width: 340px; }

.doi-gauge-svg { width: 100%; max-width: 300px; display: block; margin: 0 auto; }
.doi-gauge-track { fill: none; stroke: var(--border-default); stroke-width: 22; stroke-linecap: round; }
.doi-gauge-val   { fill: none; stroke: var(--color-action); stroke-width: 22; stroke-linecap: round; }
/* Screenshot-ready target marker (design-guideline 2026-05-31): a thick solid
   bar + flag dot + "Target NN" label chip, not a thin tick. */
.doi-gauge-tick     { stroke: var(--text-primary); stroke-width: 6; stroke-linecap: round; }
.doi-gauge-flag     { fill: var(--text-primary); }
.doi-gauge-tick-lbl { fill: var(--text-secondary); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.doi-gauge-num   { fill: var(--text-primary); font-size: 38px; font-weight: 700; font-variant-numeric: tabular-nums; }
.doi-gauge-lbl   { fill: var(--text-tertiary); font-size: 13px; }
.doi-gauge-foot  { text-align: center; color: var(--text-tertiary); font-size: 12px; padding-bottom: var(--space-3); }

.doi-donut-wrap { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; padding: var(--space-2) 0; }
.doi-donut-svg  { width: 200px; height: 200px; flex-shrink: 0; }
.doi-donut-track { fill: var(--border-subtle); }
.doi-donut-seg   { stroke: var(--bg-surface); stroke-width: 1.5; }
/* On-slice % label — white text with a dark outline (paint-order:stroke) so it
   reads on any slice color; pointer-events:none preserves the slice hover tooltip. */
.doi-donut-pct   { fill: #fff; stroke: rgba(15, 18, 25, 0.45); stroke-width: 2;
  paint-order: stroke; stroke-linejoin: round; pointer-events: none;
  font-size: 11px; font-weight: 700; font-family: var(--font-mono, monospace); }
.doi-donut-total { fill: var(--text-primary); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.doi-donut-lbl   { fill: var(--text-tertiary); font-size: 11px; }
.doi-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 220px; }
.doi-legend li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; }
.doi-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.doi-legend-lbl { flex: 1; color: var(--text-secondary); }
.doi-legend-val { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.doi-legend-pct { width: 52px; text-align: right; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* ---- Overview: province bidi-bars ---- */
.doi-prov-card, .doi-prov-tbl-card { margin-bottom: var(--space-4); }
.doi-bidi { padding: var(--space-2) 0; }
.doi-bidi-head, .doi-bidi-row {
  display: grid; grid-template-columns: 1fr 160px 1fr; align-items: center; gap: 10px;
}
.doi-bidi-head { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border-subtle);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-tertiary); }
.doi-bidi-h-q { text-align: right; }
.doi-bidi-h-v { text-align: left; }
.doi-bidi-row { height: 30px; }
.doi-bidi-q { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.doi-bidi-v { display: flex; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; }
.doi-bidi-c { text-align: center; font-size: 12px; color: var(--text-secondary); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.doi-bidi-num { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.doi-bidi-bar { height: 14px; border-radius: 3px; flex-shrink: 0; }
.doi-bidi-bar--q { background: var(--text-tertiary); opacity: 0.5; }
.doi-bidi-bar--v { background: var(--color-action); }

/* ---- Province by Group Brand: stacked bidi bars ---- */
.doi-stk-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; list-style:none; margin:0 0 var(--space-3); padding:var(--space-2) 0; }
.doi-stk-legend-item { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--text-secondary); }
.doi-stk-legend-dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.doi-stk-seclbl { font-size:11px; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-tertiary); margin:var(--space-2) 0; }
.doi-stk-row { display:grid; grid-template-columns:1fr 160px 1fr; align-items:center; gap:10px; height:30px; }
.doi-stk-row.agg { font-weight:700; border-bottom:1px solid var(--border-default); padding-bottom:4px; margin-bottom:4px; height:auto; }
.doi-stk-q { display:flex; align-items:center; justify-content:flex-end; gap:6px; min-width:0; }
.doi-stk-v { display:flex; align-items:center; justify-content:flex-start; gap:6px; min-width:0; }
.doi-stk-c { text-align:center; font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doi-stk-num { font-size:11px; font-variant-numeric:tabular-nums; color:var(--text-secondary); white-space:nowrap; }
.doi-stk-track { position:relative; flex:1; height:16px; border-radius:3px; overflow:hidden; min-width:0; background:var(--bg-inset); }
.doi-stk-fill { position:absolute; top:0; bottom:0; display:flex; overflow:hidden; }
.doi-stk-track.qty .doi-stk-fill { right:0; left:auto; flex-direction:row-reverse; }
.doi-stk-track.val .doi-stk-fill { left:0; }
.doi-stk-seg { display:flex; align-items:center; justify-content:center; overflow:hidden; min-width:0; height:100%; }
.doi-stk-seg-lbl { color:#fff; font-size:10px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; padding:0 3px; overflow:hidden; text-overflow:ellipsis; }
/* Province-segment hover tooltips route through the singleton [data-chart-tooltip]
   handler (app.js) — same convention as the donut on this page. A scoped
   [data-tooltip]::after pill was clipped by the bar's overflow:hidden (track/fill/seg),
   so it never rendered; the document-level singleton is overflow-immune. */

/* ---- KPI cards (Group Brand + Brand views) ---- */
.doi-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); }
.doi-kpi-card { padding: var(--space-5); border-left: 3px solid var(--border-default); }
.doi-kpi-card--doi { border-left-color: var(--color-brand, #CB222A); }
.doi-kpi-card--qty { border-left-color: var(--color-action); }
.doi-kpi-card--val { border-left-color: var(--color-purple, #7C3AED); }
.doi-kpi-lbl { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.4px; display: inline-flex; align-items: center; }
.doi-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 6px; color: var(--color-action, #2563EB); }
.doi-kpi-icon svg { width: 14px; height: 14px; }
.doi-kpi-card--doi .doi-kpi-icon { color: var(--color-brand, #CB222A); }
.doi-kpi-card--val .doi-kpi-icon { color: var(--color-purple, #7C3AED); }
.doi-kpi-num { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); margin-top: 4px; }

/* ---- DOI status colors (tables) ---- */
.doi-ok   { color: var(--color-success, #16A34A); font-weight: 600; }
.doi-over { color: var(--color-danger, #DC2626); font-weight: 600; }
.val-zero { color: var(--text-tertiary); }

/* ---- DOI legend chip (Detailed view) ---- */
.doi-legend-chip { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-tertiary); }
.doi-legend-chip span { display: inline-flex; align-items: center; gap: 5px; }
.doi-legend-chip i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ---- Detailed view ---- */
.doi-detailed { font-variant-numeric: tabular-nums; }
.doi-sku-name-col { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doi-sku-note { font-size: 12px; color: var(--text-tertiary); font-style: italic; }
/* Detailed-view header right cluster: SKU-count note + Export dropdown. */
.doi-detail-head-actions { display: inline-flex; align-items: center; gap: var(--space-3); }

/* ---- DOI legend chips (Detailed view header strip) ---- */
.doi-tbl-legend { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-subtle); }
.doi-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary);
  padding: 3px 10px; border-radius: var(--radius-full, 999px); border: 1px solid var(--border-default); }
.doi-chip.doi-ok   { border-color: var(--color-success, #16A34A); color: var(--color-success, #16A34A); }
.doi-chip.doi-over { border-color: var(--color-danger, #DC2626); color: var(--color-danger, #DC2626); }
.doi-chip.val-zero { border-color: var(--border-default); color: var(--text-tertiary); }

/* ---- Pagination control ---- */
.doi-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle); }
.doi-pag-btn {
  padding: 6px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary); font-size: var(--font-small);
  cursor: pointer; transition: all var(--transition-fast);
}
.doi-pag-btn:hover:not(:disabled) { border-color: var(--color-action); color: var(--color-action); }
.doi-pag-btn:disabled { opacity: 0.4; cursor: default; }
.doi-pag-info { font-size: 12px; color: var(--text-tertiary); min-width: 60px; text-align: center; }

/* ---- view container (overview/detailed wrap) ---- */
.doi-overview, .doi-tableview, .doi-detailed { padding: var(--space-4); }
.doi-overview > .card, .doi-tableview > .card, .doi-detailed > .card { margin-bottom: var(--space-4); }

@media (max-width: 720px) {
  .doi-kpi-grid { grid-template-columns: 1fr; }
  .doi-bidi-head, .doi-bidi-row { grid-template-columns: 1fr 110px 1fr; }
}