/* ════════════════════════════════════════════════════════════════════════
   NEXUNOVA RMS — FOUNDATION COMPONENT KIT  (Phase 2 · 2026-06-12)
   ────────────────────────────────────────────────────────────────────────
   Every class here is nx- prefixed and additive: it never collides with the
   legacy .card/.btn/.dx-* classes that Phase-3 pages still use. Values come
   ONLY from tokens.css. No gradients, no emoji, no !important, no inline
   styles. Phase-3 migrations follow foundation/KIT.md class-for-class.

   Sections:  0 base  ·  1 card  ·  2 button  ·  3 table  ·  4 modal
              5 form  ·  6 badge/chip  ·  7 KPI  ·  8 empty-state
              9 page-header  ·  10 banner  ·  11 APP SHELL (Phase 2C)
   ════════════════════════════════════════════════════════════════════════ */

/* ── 0. BASE ──────────────────────────────────────────────────────────── */
/* Opt-in typography reset for kit subtrees. Add .nx to a container to make
   its descendants inherit Inter + the base body size without touching the
   global cascade (keeps legacy pages unaffected). */
.nx, .nx *{ font-family: var(--fk-font); }
.nx{ color: var(--fk-text); font-size: var(--fk-fs-body); line-height: var(--fk-leading); }


/* ── 1. CARD ──────────────────────────────────────────────────────────── */
/* One spec. <div class="nx-card"> … </div>  ·  compact = tighter padding. */
.nx-card{
  background: var(--fk-bg-card);
  border: 1px solid var(--fk-border);
  border-radius: var(--fk-radius-card);
  box-shadow: var(--fk-shadow);
  padding: var(--fk-sp-4);                 /* 16px */
  color: var(--fk-text);
}
.nx-card--compact{ padding: var(--fk-sp-3); }   /* 12px */
.nx-card--flush{ padding: 0; }                   /* tables flush to the edge */

/* WARMTH v2 ⑤ — interactive cards lift on hover (150ms, restrained). */
.nx-card--hover{ transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; cursor: pointer; }
.nx-card--hover:hover{ transform: translateY(-1px); box-shadow: var(--fk-shadow-raised); border-color: color-mix(in srgb, var(--fk-primary) 28%, var(--fk-border)); }

/* WARMTH v2 ④ — optional card HEADER zone: icon chip + title + actions over a
   hairline. <div class="nx-card-hd"><span class="nx-ichip">…</span>
   <div class="nx-card-hd-t">Title</div><div class="nx-card-hd-a">…</div></div> */
.nx-card-hd{
  display: flex; align-items: center; gap: var(--fk-sp-3);
  padding-bottom: var(--fk-sp-3); margin-bottom: var(--fk-sp-3);
  border-bottom: 1px solid var(--fk-border);
}
.nx-card--flush > .nx-card-hd{ padding: var(--fk-sp-3) var(--fk-sp-4); margin-bottom: 0; }
.nx-card-hd-t{ font-size: var(--fk-fs-title); font-weight: var(--fk-fw-semibold); color: var(--fk-text); line-height: 1.2; }
.nx-card-hd-sub{ font-size: var(--fk-fs-label); font-weight: var(--fk-fw-medium); color: var(--fk-text-muted); margin-top: 2px; }
.nx-card-hd-a{ margin-left: auto; display: flex; align-items: center; gap: var(--fk-sp-2); }

/* visual-overhaul.css boxes ANY class containing "-card" (`#s-app [class*="-card"]`) —
   that unintentionally matches our header CHILDREN (nx-card-hd / -hd-t / -hd-sub / -hd-a),
   wrapping every card title in its own nested box with a background + shadow. Strip that
   box back off the header parts (keep the hd's bottom separator). Needs #s-app + !important
   to out-weigh that rule. */
#s-app .nx-card-hd{
  border: 0 !important;
  border-bottom: 1px solid var(--fk-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#s-app .nx-card-hd-t,
#s-app .nx-card-hd-sub,
#s-app .nx-card-hd-a{
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* ── 2. BUTTON ────────────────────────────────────────────────────────── */
/* 4 variants × 2 sizes. <button class="nx-btn nx-btn--primary"> … */
.nx-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fk-sp-2);
  height: var(--fk-h-btn); padding: 0 14px;
  font-family: var(--fk-font); font-size: var(--fk-fs-body); font-weight: var(--fk-fw-medium);
  border-radius: var(--fk-radius-control);
  border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; user-select: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease;
}
.nx-btn:focus-visible{ outline: 2px solid var(--fk-primary); outline-offset: 2px; }
.nx-btn:disabled{ opacity: .5; cursor: not-allowed; }
.nx-btn svg{ width: 15px; height: 15px; }

/* WARMTH v2 ② — hierarchy visible at a glance + pressed state on all. */
.nx-btn:active:not(:disabled){ transform: translateY(0.5px); }

.nx-btn--primary{ background: var(--fk-primary); color: #fff; }
.nx-btn--primary:hover:not(:disabled){ background: var(--fk-primary-hover); }

/* secondary = FILLED subtle (no more border-only ghost posing as secondary) */
.nx-btn--secondary{ background: var(--fk-bg-subtle); color: var(--fk-text); border-color: var(--fk-border); }
.nx-btn--secondary:hover:not(:disabled){ background: var(--fk-subtle-hover); border-color: var(--fk-text-muted); }

.nx-btn--ghost{ background: transparent; color: var(--fk-text-muted); }
.nx-btn--ghost:hover:not(:disabled){ background: var(--fk-bg-subtle); color: var(--fk-text); }

.nx-btn--danger{ background: var(--fk-danger); color: #fff; }
.nx-btn--danger:hover:not(:disabled){ background: #B91C1C; }

/* destructive resting action — danger-tinted fill (use for non-confirm deletes) */
.nx-btn--danger-soft{ background: var(--fk-danger-chip); color: var(--fk-danger); border-color: var(--fk-danger-edge); }
.nx-btn--danger-soft:hover:not(:disabled){ background: var(--fk-danger); color: #fff; border-color: transparent; }

.nx-btn--sm{ height: var(--fk-h-btn-sm); padding: 0 10px; }
.nx-btn--icon{ width: var(--fk-h-btn); padding: 0; }
.nx-btn--icon.nx-btn--sm{ width: var(--fk-h-btn-sm); }


/* ── 2b. TINTED ICON CHIP  (WARMTH v2 ④ — the single biggest warmth lever) ─
   A rounded chip with a ~12% semantic tint behind a Lucide glyph. Indigo by
   default; semantic tone where meaning exists. Muted, never saturated. Used in
   card/section/page headers, list-leading slots and empty states. */
.nx-ichip{
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 9px; background: var(--fk-primary-chip); color: var(--fk-primary);
}
.nx-ichip svg{ width: 16px; height: 16px; }
.nx-ichip--sm{ width: 26px; height: 26px; border-radius: 8px; }
.nx-ichip--sm svg{ width: 15px; height: 15px; }
.nx-ichip--lg{ width: 34px; height: 34px; border-radius: 10px; }
.nx-ichip--lg svg{ width: 18px; height: 18px; }
.nx-ichip--info{    background: var(--fk-info-chip);    color: var(--fk-info); }
.nx-ichip--success{ background: var(--fk-success-chip); color: var(--fk-success); }
.nx-ichip--warning{ background: var(--fk-warning-chip); color: var(--fk-warning); }
.nx-ichip--danger{  background: var(--fk-danger-chip);  color: var(--fk-danger); }


/* ── 2c. TABS — SEGMENTED TRACK  (WARMTH v2 ① — "tabs look like controls") ─
   A contained bar holding pill tabs. Active = raised card pill (shadow +
   semibold + indigo). Inactive = muted, hover tint. Count chip inside pill. */
.nx-tabs{
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; background: var(--fk-bg-subtle);
  border: 1px solid var(--fk-border); border-radius: 10px;
}
.nx-tabs--fill{ display: flex; width: 100%; }
.nx-tabs--fill .nx-tab{ flex: 1 1 0; justify-content: center; }
.nx-tab{
  display: inline-flex; align-items: center; gap: var(--fk-sp-2);
  height: 30px; padding: 0 14px; border: 0; background: transparent;
  border-radius: 7px; cursor: pointer;
  font-family: var(--fk-font); font-size: var(--fk-fs-body);
  font-weight: var(--fk-fw-medium); color: var(--fk-text-muted);
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.nx-tab:hover:not(.nx-tab--on){ background: var(--fk-subtle-hover); color: var(--fk-text); }
.nx-tab--on{
  background: var(--fk-bg-card); color: var(--fk-primary);
  font-weight: var(--fk-fw-semibold); box-shadow: var(--fk-shadow);
}
.nx-tab svg{ width: 15px; height: 15px; }
.nx-tab .nx-chip{ background: color-mix(in srgb, var(--fk-text) 8%, transparent); }
.nx-tab--on .nx-chip{ background: var(--fk-primary-tint); color: var(--fk-primary); }


/* ── 3. TABLE — the single standard ───────────────────────────────────── */
/* <table class="nx-table"> with <thead><th> … numeric cells get class="num". */
.nx-table{ width: 100%; border-collapse: collapse; font-size: var(--fk-fs-body); color: var(--fk-text); }
.nx-table thead th{
  position: sticky; top: 0; z-index: 1;
  background: var(--fk-bg-subtle);
  font-size: var(--fk-fs-label); font-weight: var(--fk-fw-semibold);
  text-transform: uppercase; letter-spacing: var(--fk-tracking-label);
  color: var(--fk-text-muted); text-align: left;
  height: var(--fk-h-row); padding: 0 var(--fk-sp-3);
  border-bottom: 1px solid var(--fk-border);
}
.nx-table tbody td{
  height: var(--fk-h-row); padding: 0 var(--fk-sp-3);
  border-bottom: 1px solid var(--fk-border);
  vertical-align: middle;
}
.nx-table tbody tr:hover{ background: var(--fk-bg-subtle); }
.nx-table th.num, .nx-table td.num{ text-align: right; font-variant-numeric: tabular-nums; }
.nx-table--flush thead th:first-child, .nx-table--flush tbody td:first-child{ padding-left: var(--fk-sp-4); }
.nx-table--flush thead th:last-child,  .nx-table--flush tbody td:last-child{  padding-right: var(--fk-sp-4); }
/* --static: header scrolls away with the content instead of sticking. Use for
   short card-embedded tables that have NO scroll-wrap (the page is the scroller),
   where a sticky thead would otherwise pin to the viewport and float mid-card. */
.nx-table--static thead th{ position: static; }


/* ── 4. MODAL ─────────────────────────────────────────────────────────── */
/* <div class="nx-modal-overlay"><div class="nx-modal nx-modal--m"> … */
.nx-modal-overlay{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,23,42,0.55);
  display: flex; align-items: center; justify-content: center; padding: var(--fk-sp-4);
}
.nx-modal{
  background: var(--fk-bg-card); color: var(--fk-text);
  border: 1px solid var(--fk-border); border-radius: var(--fk-radius-card);
  box-shadow: var(--fk-shadow);
  width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column;
}
.nx-modal--s{ max-width: var(--fk-modal-s); }
.nx-modal--m{ max-width: var(--fk-modal-m); }
.nx-modal--l{ max-width: var(--fk-modal-l); }
.nx-modal-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--fk-sp-4); border-bottom: 1px solid var(--fk-border);
}
.nx-modal-title{ font-size: var(--fk-fs-title); font-weight: var(--fk-fw-semibold); margin: 0; }
.nx-modal-close{
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: none; background: transparent;
  color: var(--fk-text-muted); border-radius: var(--fk-radius-control); cursor: pointer;
}
.nx-modal-close:hover{ background: var(--fk-bg-subtle); color: var(--fk-text); }
.nx-modal-body{ padding: var(--fk-sp-4); overflow: auto; flex: 1 1 auto; min-height: 0; }
.nx-modal-footer{
  display: flex; align-items: center; justify-content: flex-end; gap: var(--fk-sp-2);
  padding: var(--fk-sp-4); border-top: 1px solid var(--fk-border);
}


/* ── 5. FORM ──────────────────────────────────────────────────────────── */
.nx-field{ display: flex; flex-direction: column; gap: var(--fk-sp-1); margin-bottom: var(--fk-sp-3); }
.nx-label{
  font-size: var(--fk-fs-label); font-weight: var(--fk-fw-semibold);
  text-transform: uppercase; letter-spacing: var(--fk-tracking-label);
  color: var(--fk-text-muted);
}
.nx-label .nx-req{ color: var(--fk-danger); margin-left: 2px; }     /* required marker */
.nx-input, .nx-select, .nx-textarea{
  width: 100%; height: var(--fk-h-input); box-sizing: border-box;
  padding: 0 var(--fk-sp-3);
  font-family: var(--fk-font); font-size: var(--fk-fs-body); color: var(--fk-text);
  background: var(--fk-bg-card);
  border: 1px solid var(--fk-border); border-radius: var(--fk-radius-control);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.nx-textarea{ height: auto; min-height: 80px; padding: var(--fk-sp-2) var(--fk-sp-3); resize: vertical; }
.nx-input:focus, .nx-select:focus, .nx-textarea:focus{
  outline: none; border-color: var(--fk-primary);
  box-shadow: 0 0 0 2px var(--fk-primary-tint);
}
.nx-input::placeholder, .nx-textarea::placeholder{ color: var(--fk-text-muted); }
.nx-field--error .nx-input,
.nx-field--error .nx-select,
.nx-field--error .nx-textarea{ border-color: var(--fk-danger); }
.nx-error{ font-size: var(--fk-fs-label); color: var(--fk-danger); min-height: 14px; }


/* ── 6. BADGE / CHIP ──────────────────────────────────────────────────── */
/* <span class="nx-badge nx-badge--success">Active</span> */
.nx-badge{
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px;
  font-size: var(--fk-fs-label); font-weight: var(--fk-fw-semibold);
  border-radius: 999px; white-space: nowrap;
  background: var(--fk-bg-subtle); color: var(--fk-text-muted);
  border: 1px solid transparent;       /* WARMTH v2 ⑦ — presence via tinted edge */
}
.nx-badge--success{ background: var(--fk-success-chip); color: var(--fk-success); border-color: var(--fk-success-edge); }
.nx-badge--warning{ background: var(--fk-warning-chip); color: var(--fk-warning); border-color: var(--fk-warning-edge); }
.nx-badge--danger{  background: var(--fk-danger-chip);  color: var(--fk-danger);  border-color: var(--fk-danger-edge); }
.nx-badge--info{    background: var(--fk-info-chip);    color: var(--fk-info);    border-color: var(--fk-info-edge); }
.nx-badge--primary{ background: var(--fk-primary-chip); color: var(--fk-primary); border-color: var(--fk-primary-edge); }
/* dot variant for status dots inside the badge */
.nx-badge .nx-dot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* count chip — used in the sidebar nav + filter pills */
.nx-chip{
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; font-size: var(--fk-fs-label); font-weight: var(--fk-fw-semibold);
  border-radius: 999px; background: var(--fk-bg-subtle); color: var(--fk-text-muted);
}


/* ── 7. KPI CARD ──────────────────────────────────────────────────────── */
.nx-kpi{
  display: flex; flex-direction: column; gap: var(--fk-sp-1);
  background: var(--fk-bg-card); border: 1px solid var(--fk-border);
  border-radius: var(--fk-radius-card); box-shadow: var(--fk-shadow);
  padding: var(--fk-sp-4);
}
.nx-kpi-label{
  font-size: var(--fk-fs-label); font-weight: var(--fk-fw-semibold);
  text-transform: uppercase; letter-spacing: var(--fk-tracking-label); color: var(--fk-text-muted);
  display: flex; align-items: center; gap: var(--fk-sp-2);
}
/* WARMTH v2 ⑥ — a KPI surface MAY carry a quiet 5% semantic tint (choose this
   OR the icon chip per surface, never both loud). */
.nx-kpi--tint-primary{ background: var(--fk-primary-surface); border-color: var(--fk-primary-edge); }
.nx-kpi--tint-info{    background: var(--fk-info-surface);    border-color: var(--fk-info-edge); }
.nx-kpi--tint-success{ background: var(--fk-success-surface); border-color: var(--fk-success-edge); }
.nx-kpi--tint-warn{    background: var(--fk-warning-surface); border-color: var(--fk-warning-edge); }
.nx-kpi--tint-danger{  background: var(--fk-danger-surface);  border-color: var(--fk-danger-edge); }
/* KPI with a leading icon chip: header row holds chip + label/value column. */
.nx-kpi-hd{ display: flex; align-items: center; gap: var(--fk-sp-3); }
.nx-kpi-hd > .nx-kpi-col{ display: flex; flex-direction: column; gap: var(--fk-sp-1); min-width: 0; }
/* quiet semantic dot before a KPI label — dot only, no borders/strips/gradients */
.nx-kpi-dot{ width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.nx-kpi-dot--primary{ background: var(--fk-primary); }
.nx-kpi-dot--info{    background: var(--fk-info); }
.nx-kpi-dot--success{ background: var(--fk-success); }
.nx-kpi-dot--warn{    background: var(--fk-warning); }
.nx-kpi-dot--danger{  background: var(--fk-danger); }

/* ── Micro-visualizations (NX.sparkline / minibar / stackbar) ── */
.nx-sparkline{ display: block; width: 100%; overflow: visible; }
.nx-minibar, .nx-stackbar{ display: block; width: 100%; }
.nx-infotip{ display: inline-flex; align-items: center; vertical-align: middle; margin-left: 4px; color: var(--fk-text-muted); cursor: help; }
.nx-infotip:hover, .nx-infotip:focus-visible{ color: var(--fk-text); outline: none; }

/* ── Dashboard Pulse strip — compact insight cards (≤120px), 200ms ease-in ── */
.nx-pulse-grid{ display: grid; gap: var(--fk-sp-3); }
.nx-pulse-card{ animation: nx-pulse-in 200ms ease-in; }
.nx-pulse-headline{ font-size: var(--fk-fs-body); color: var(--fk-text); line-height: 1.4; }
.nx-pulse-headline strong{ font-weight: var(--fk-fw-semibold); }
.nx-pulse-foot{ display: flex; align-items: center; justify-content: space-between; gap: var(--fk-sp-2); margin-top: var(--fk-sp-2); }
@keyframes nx-pulse-in{ from{ opacity: 0; transform: translateY(2px); } to{ opacity: 1; transform: none; } }
.nx-kpi-value{ font-size: var(--fk-fs-kpi); font-weight: var(--fk-fw-semibold); color: var(--fk-text); font-variant-numeric: tabular-nums; }
.nx-kpi-delta{ font-size: var(--fk-fs-label); font-weight: var(--fk-fw-medium); }
.nx-kpi-delta--up{ color: var(--fk-success); }
.nx-kpi-delta--down{ color: var(--fk-danger); }


/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD 2.0 — gadget primitives (journey bar · gauge · donut) + motion.
   Inline-SVG components from kit.js; flat token fills, one-shot fill animation.
   ════════════════════════════════════════════════════════════════════════ */

/* journey bar — one segmented bar + legend */
.nx-journey{ display: flex; flex-direction: column; gap: var(--fk-sp-2); }
.nx-journeybar{ display: block; width: 100%; border-radius: 999px; }
.nx-journey-legend{ display: flex; flex-wrap: wrap; gap: var(--fk-sp-2) var(--fk-sp-4); }
.nx-jl{ display: inline-flex; align-items: center; gap: 6px; font-size: var(--fk-fs-label); color: var(--fk-text-muted); }
.nx-jl-dot{ width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.nx-jl-t{ text-transform: uppercase; letter-spacing: var(--fk-tracking-label); font-weight: var(--fk-fw-semibold); }
.nx-jl-a{ color: var(--fk-text); font-weight: var(--fk-fw-semibold); }

/* gauge — semi-donut with centred value + caption */
.nx-gauge{ display: flex; flex-direction: column; align-items: center; gap: var(--fk-sp-1); }
.nx-gauge-wrap{ position: relative; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.nx-gauge-val{ position: absolute; left: 0; right: 0; bottom: 2px; text-align: center;
  font-size: var(--fk-fs-kpi); font-weight: var(--fk-fw-bold); font-variant-numeric: tabular-nums; line-height: 1; }
.nx-gauge-cap{ font-size: var(--fk-fs-label); color: var(--fk-text-muted); text-align: center; max-width: 180px; }

/* donut — full ring with centred total + legend */
.nx-donut{ display: flex; flex-direction: column; align-items: center; gap: var(--fk-sp-3); }
.nx-donut-ring{ position: relative; }
.nx-donut-center{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.nx-donut-c-val{ font-size: var(--fk-fs-title); font-weight: var(--fk-fw-bold); color: var(--fk-text); }
.nx-donut-c-sub{ font-size: var(--fk-fs-label); color: var(--fk-text-muted); text-transform: uppercase; letter-spacing: var(--fk-tracking-label); }
.nx-donut-legend{ display: flex; flex-direction: column; gap: 6px; width: 100%; }
.nx-donut-legend .nx-jl{ justify-content: flex-start; }
.nx-donut-legend .nx-jl-a{ margin-left: auto; }

/* deterministic initials avatar (Who-is-late) — tint passed inline by caller */
.nx-avatar{ display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 8px; font-size: 11px; font-weight: var(--fk-fw-semibold); flex: 0 0 auto; }

/* the dashboard hero number — the one sanctioned >22px figure (see tokens) */
.nx-hero-value{ font-size: var(--fk-fs-hero); font-weight: var(--fk-fw-bold); color: var(--fk-text);
  font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -0.01em; }

/* compact stat chip — the three "still visible" hero metrics */
.nx-statchip{ display: flex; align-items: center; gap: var(--fk-sp-3); padding: var(--fk-sp-2) var(--fk-sp-3);
  background: var(--fk-bg-card); border: 1px solid var(--fk-border); border-radius: var(--fk-radius-control); }
.nx-statchip .nx-statchip-v{ font-size: var(--fk-fs-title); font-weight: var(--fk-fw-semibold); color: var(--fk-text); font-variant-numeric: tabular-nums; }
.nx-statchip .nx-statchip-l{ font-size: var(--fk-fs-label); color: var(--fk-text-muted); text-transform: uppercase; letter-spacing: var(--fk-tracking-label); font-weight: var(--fk-fw-semibold); }

/* row-hover quick actions (Who-is-late) — hidden until the row is hovered */
.nx-rowact{ display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s ease; }
tr:hover > td > .nx-rowact, .nx-late-row:hover .nx-rowact{ opacity: 1; }

/* ── one-shot motion (≤400ms, never loops); snaps under reduced-motion ── */
@keyframes nx-grow-x{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
.nx-grow-x{ transform-origin: left center; animation: nx-grow-x .3s ease-out both; }
@keyframes nx-arc-draw{ to{ stroke-dashoffset: 0; } }
.nx-arc-draw{ animation: nx-arc-draw .3s ease-out both; }
.nx-trendline{ display: block; width: 100%; overflow: visible; }
@keyframes nx-pop{ from{ opacity: 0; transform: scale(.94); } to{ opacity: 1; transform: none; } }
.nx-pop{ animation: nx-pop .3s ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes nx-rise{ from{ opacity: 0; transform: translateY(4px); } to{ opacity: 1; transform: none; } }
.nx-rise{ animation: nx-rise .3s ease-out both; }
@media (prefers-reduced-motion: reduce){
  .nx-grow-x, .nx-arc-draw, .nx-pop, .nx-rise, .nx-pulse-card{ animation: none; }
  .nx-grow-x{ transform: none; } .nx-arc-draw{ stroke-dashoffset: 0; }
}


/* ── 8. EMPTY STATE ───────────────────────────────────────────────────── */
.nx-empty{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--fk-sp-3); padding: var(--fk-sp-6); text-align: center; color: var(--fk-text-muted);
}
.nx-empty-icon{ color: var(--fk-text-muted); opacity: .7; }
.nx-empty-icon svg{ width: 28px; height: 28px; }
.nx-empty-msg{ font-size: var(--fk-fs-body); color: var(--fk-text-muted); max-width: 320px; }


/* ── 9. PAGE HEADER ───────────────────────────────────────────────────── */
.nx-page-header{
  display: flex; align-items: center; justify-content: space-between; gap: var(--fk-sp-4);
  margin-bottom: var(--fk-sp-4);
}
.nx-page-title{ font-size: var(--fk-fs-page); font-weight: var(--fk-fw-bold); color: var(--fk-text); margin: 0; }
.nx-page-actions{ display: flex; align-items: center; gap: var(--fk-sp-2); }
/* WARMTH v2 ④ — page title gets a leading icon chip (left group). */
.nx-page-head-l{ display: flex; align-items: center; gap: var(--fk-sp-3); min-width: 0; }


/* ── 10. BANNER ───────────────────────────────────────────────────────── */
.nx-banner{
  display: flex; align-items: center; gap: var(--fk-sp-2);
  padding: var(--fk-sp-3) var(--fk-sp-4);
  font-size: var(--fk-fs-body); border-radius: var(--fk-radius-card);
  border: 1px solid var(--fk-border);
}
.nx-banner--info{    background: var(--fk-info-tint);    border-color: var(--fk-info);    color: var(--fk-text); }
.nx-banner--warn{    background: var(--fk-warning-tint); border-color: var(--fk-warning); color: var(--fk-text); }
.nx-banner--danger{  background: var(--fk-danger-tint);  border-color: var(--fk-danger);  color: var(--fk-text); }
.nx-banner svg{ width: 16px; height: 16px; flex: none; }


/* ════════════════════════════════════════════════════════════════════════
   11. APP SHELL — Phase 2C "normalize in place"
   ────────────────────────────────────────────────────────────────────────
   Token-based re-skin of the EXISTING sidebar (#s-app .sb) and Aurora topbar
   (#auroraTopbar) markup. We keep their structure/identity and only normalise
   colour, type and elevation to the kit (kill gradients, swap stray #2563EB →
   indigo, Plus Jakarta → Inter, formalise nav group labels / count chips /
   active left-bar). These rules are scoped to shell IDs so no page content is
   affected. Specificity is kept high enough to win over the legacy shell CSS
   without !important.
   ════════════════════════════════════════════════════════════════════════ */

/* page container — consistent surface + 24px gutters */
#s-app .pw{ background: var(--fk-bg-page); }
#s-app .pw{ padding-left: var(--fk-sp-6); padding-right: var(--fk-sp-6); }

/* sidebar surface + Inter */
#s-app .sb{
  background: var(--fk-bg-sidebar);
  border-right: 1px solid var(--fk-border);
  font-family: var(--fk-font);
}
#s-app .sb, #s-app .sb *{ font-family: var(--fk-font); }

/* nav group header — flat, 11px uppercase muted label + count chip */
#s-app .sb .nav-grp-hd{ background: transparent; }
#s-app .sb .nav-grp-lbl{
  font-size: var(--fk-fs-label); font-weight: var(--fk-fw-semibold);
  text-transform: uppercase; letter-spacing: var(--fk-tracking-label);
  color: var(--fk-text-muted);
}
#s-app .sb .nav-grp-cnt{
  background: var(--fk-bg-subtle); color: var(--fk-text-muted);
  font-size: var(--fk-fs-label); font-weight: var(--fk-fw-semibold);
  border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* nav item — 13px, no gradient, flat */
#s-app .sb .ni{
  font-size: var(--fk-fs-body); font-weight: var(--fk-fw-medium);
  color: var(--fk-text-muted); background: transparent;
  border-radius: var(--fk-radius-control);
}
#s-app .sb .ni .ni-lb{ font-weight: var(--fk-fw-medium); }
#s-app .sb .ni:hover{ background: var(--fk-bg-subtle); color: var(--fk-text); }

/* active item — indigo left-bar + tinted background + indigo label/icon */
#s-app .sb .ni.on{
  background: var(--fk-primary-tint);
  color: var(--fk-primary-fg);
  box-shadow: inset 3px 0 0 0 var(--fk-primary);
}
#s-app .sb .ni.on .ni-lb{ color: var(--fk-primary-fg); -webkit-text-fill-color: var(--fk-primary-fg); }
#s-app .sb .ni.on .ni-ic svg, #s-app .sb .ni.on .ni-ic svg *{ color: var(--fk-primary-fg); stroke: var(--fk-primary-fg); }

/* per-item count badge (.ni-bdg) */
#s-app .sb .ni .ni-bdg{
  background: var(--fk-bg-subtle); color: var(--fk-text-muted);
  font-size: var(--fk-fs-label); font-weight: var(--fk-fw-semibold);
  border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px;
}
#s-app .sb .ni.on .ni-bdg{ background: var(--fk-primary); color: #fff; }

/* Aurora topbar — keep the navigator identity, drop the cyan gradient skin.
   (Aurora's retire-or-keep is deferred to the Nav phase — see KIT.md.) */
#auroraTopbar, #auroraTopbar .aurora-topbar-bar{
  background: var(--fk-bg-card);
  border-bottom: 1px solid var(--fk-border);
  font-family: var(--fk-font);
}
#auroraTopbar, #auroraTopbar *{ font-family: var(--fk-font); }
#auroraTopbar .aurora-topbar-trigger{ color: var(--fk-text); }

/* ── Kit utilities (added for Sales flow — generic, reusable) ──────────── */
.nx-kpi-row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--fk-sp-3); }
.nx-segment{ display: inline-flex; gap: 4px; flex-wrap: wrap; }
.nx-card-title{ font-size: var(--fk-fs-body, 14px); font-weight: var(--fk-fw-semibold); color: var(--fk-text); }
.nx-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nx-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.nx-skel{ background: var(--fk-bg-subtle); border-radius: var(--fk-radius-control); animation: nx-skel-pulse 1.2s ease-in-out infinite; }
@keyframes nx-skel-pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .5; } }
.nx-grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--fk-sp-3); }
@media (max-width: 640px){ .nx-grid-2{ grid-template-columns: 1fr; } }