/* ============================================================================
   Pulse — layout
   Insight-framed inventory: KPI strip + table with inline vital-signs
   (micro stock bars, sparklines) + right insights rail (donut, bars, attention).
   Layout only; color/space/type from --sds-* tokens. Shared vocabulary
   (.cell-item, .st, .num, .muted, review-bar) lives in ../_shared/base.css.
   ========================================================================== */

.app { display: grid; grid-template-columns: 224px 1fr; min-height: calc(100vh - 34px); }

/* ---- Rail ---------------------------------------------------------------- */
.rail {
  border-right: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
  position: sticky; top: 34px; height: calc(100vh - 34px);
  display: flex; flex-direction: column;
  padding: var(--sds-space-400) var(--sds-space-300);
  gap: var(--sds-space-200);
  overflow: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: var(--sds-space-200) var(--sds-space-200) var(--sds-space-300); }
.brand sds-logo { --sds-logo-height: 22px; height: 22px; display: inline-flex; }
.brand .product { font-family: var(--sds-font-family-headline); font-weight: var(--sds-font-weight-bold); font-size: 16px; letter-spacing: .01em; }
.brand .product .sub { color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-regular); }
.rail sds-sidenav { width: 100%; }

/* ---- Main ---------------------------------------------------------------- */
.main { min-width: 0; padding: var(--sds-space-500) var(--sds-space-600) var(--sds-space-700); }
.pagehead { display: flex; align-items: flex-end; gap: var(--sds-space-400); margin-bottom: var(--sds-space-500); }
.pagehead .title { font-family: var(--sds-font-family-headline); font-size: var(--sds-type-headline-4-size); line-height: var(--sds-type-headline-4-line); font-weight: var(--sds-type-headline-4-weight); margin: 0; }
.pagehead .sub { color: var(--sds-color-text-muted); font-size: var(--sds-type-body-small-size); margin-top: var(--sds-space-100); }
.pagehead .actions { margin-left: auto; display: flex; gap: var(--sds-space-200); }

/* ---- KPI strip ----------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sds-space-300); margin-bottom: var(--sds-space-500); }
.kpi { --sds-card-corner-radius: var(--sds-radius-l); }
.kpi .lab { font-size: var(--sds-type-caption-size); color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-bold); display: flex; align-items: center; gap: 7px; }
.kpi .lab .d { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kpi .val { font-family: var(--sds-font-family-headline); font-size: 28px; font-weight: var(--sds-font-weight-regular); letter-spacing: -.01em; margin-top: var(--sds-space-200); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: var(--sds-space-200); }
.kpi .val .delta { font-size: var(--sds-type-caption-size); font-weight: var(--sds-font-weight-bold); }
.kpi .delta.up { color: var(--sds-color-success); }
.kpi .delta.down { color: var(--sds-color-error); }
.d-total { background: var(--sds-color-gold); }
.d-low   { background: var(--sds-color-warning); }
.d-crit  { background: var(--sds-color-error); }
.d-uncl  { background: var(--sds-color-border-strong); }
.d-turn  { background: var(--sds-color-text-muted); }

/* ---- Workspace: table | insights ---------------------------------------- */
.work { display: grid; grid-template-columns: 1fr 288px; gap: var(--sds-space-400); align-items: start; }

/* ---- Table panel --------------------------------------------------------- */
.panel { border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-l); background: var(--sds-color-surface); overflow: hidden; }
.ptoolbar { display: flex; align-items: center; gap: var(--sds-space-200); padding: var(--sds-space-300) var(--sds-space-400); border-bottom: 1px solid var(--sds-color-border); }
.ptoolbar sds-search { margin-left: auto; width: 210px; }

#pulse-inv { width: 100%; }
#pulse-inv sds-table-head > *, #pulse-inv sds-table-row > * { padding-inline: var(--sds-space-300); }
/* col 2 Item */
#pulse-inv sds-table-head > :nth-child(2), #pulse-inv sds-table-row > :nth-child(2) { flex: 3 1 0; min-inline-size: 180px; }
/* col 3 Class */
#pulse-inv sds-table-head > :nth-child(3), #pulse-inv sds-table-row > :nth-child(3) { flex: 1.4 1 0; min-inline-size: 104px; }
/* col 4 Ø mm */
#pulse-inv sds-table-head > :nth-child(4), #pulse-inv sds-table-row > :nth-child(4) { flex: 0 0 auto; min-inline-size: 72px; }
/* col 5 Stock level / col 6 Trend / col 7 Status */
#pulse-inv sds-table-head > :nth-child(5), #pulse-inv sds-table-row > :nth-child(5) { flex: 0 0 auto; min-inline-size: 110px; }
#pulse-inv sds-table-head > :nth-child(6), #pulse-inv sds-table-row > :nth-child(6) { flex: 0 0 auto; min-inline-size: 104px; }
#pulse-inv sds-table-head > :nth-child(7), #pulse-inv sds-table-row > :nth-child(7) { flex: 0 0 auto; min-inline-size: 104px; }
/* row severity flag — left accent on the checkbox cell */
#pulse-inv sds-table-row.flag-low  > :first-child { box-shadow: inset 3px 0 0 var(--sds-color-warning); }
#pulse-inv sds-table-row.flag-crit > :first-child { box-shadow: inset 3px 0 0 var(--sds-color-error); }

/* micro stock-level bar */
.mbar { width: 92px; height: 7px; border-radius: 999px; background: var(--sds-color-surface-strong); overflow: hidden; }
.mbar i { display: block; height: 100%; border-radius: 999px; }
.mbar i.ok   { background: var(--sds-color-success); }
.mbar i.low  { background: var(--sds-color-warning); }
.mbar i.crit { background: var(--sds-color-error); }

/* 30-day sparkline */
.spark { width: 88px; height: 24px; display: block; }
.spark polyline { fill: none; stroke: var(--sds-color-text-muted); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark.up polyline { stroke: var(--sds-color-success); }
.spark.dn polyline { stroke: var(--sds-color-error); }

/* ---- Insights rail ------------------------------------------------------- */
.rail-r { display: grid; gap: var(--sds-space-300); }
/* small sub-heading — text family bold (per brand: bold only for small sub-headings) */
.ins h3 { font-family: var(--sds-font-family-text); font-size: var(--sds-type-body-large-size); font-weight: var(--sds-font-weight-bold); letter-spacing: -.01em; margin: 0 0 var(--sds-space-300); }

.donut-wrap { display: flex; align-items: center; gap: var(--sds-space-400); }
.donut { width: 92px; height: 92px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--sds-color-success) 0 58%, var(--sds-color-warning) 58% 78%, var(--sds-color-error) 78% 92%, var(--sds-color-border-strong) 92% 100%); }
.donut::after { content: ""; width: 56px; height: 56px; border-radius: 50%; background: var(--sds-color-surface); }
.leg { display: grid; gap: 7px; font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); }
.leg div { display: flex; align-items: center; gap: 7px; }
.leg .sq { width: 9px; height: 9px; border-radius: 3px; flex: none; }

.barrow { margin-bottom: var(--sds-space-300); }
.barrow:last-child { margin-bottom: 0; }
.barrow .bl { display: flex; justify-content: space-between; font-size: var(--sds-type-body-small-size); margin-bottom: 6px; color: var(--sds-color-text-muted); }
.barrow .bl b { color: var(--sds-color-text); font-variant-numeric: tabular-nums; }
.bartrack { height: 7px; background: var(--sds-color-surface-strong); border-radius: 999px; overflow: hidden; }
.bartrack i { display: block; height: 100%; border-radius: 999px; }

.att { display: flex; align-items: center; gap: var(--sds-space-300); padding: var(--sds-space-200) 0; border-top: 1px solid var(--sds-color-border); font-size: var(--sds-type-body-small-size); }
.att:first-of-type { border-top: 0; }
.att .ic { width: 26px; height: 26px; border-radius: var(--sds-radius-m); flex: none; }
.att b { margin-left: auto; font-variant-numeric: tabular-nums; }

@media (max-width: 1240px) { .kpis { grid-template-columns: repeat(3, 1fr); } .work { grid-template-columns: 1fr; } }