/* =============================================================================
   Cflow Design Tokens — Phase 4
   Source of truth: cflow_dashboard_design.md §4
   This file is ADDITIVE to styles.css. Existing pages keep their old design
   system; new pages and the redesigned dashboard use everything below.
   
   WCAG check on shop accents (vs white):
     - Clotrio  #0c2340 → 14.93:1 (AAA)
     - Master   #1a1a1a → 16.10:1 (AAA)
     - Urbae    #0a0a0a → 19.92:1 (AAA)  (suggested, not yet onboarded)
   
   Geist font: declared in the stack with system fallback. If you want Geist
   as a webfont, uncomment the @font-face block below.
   ============================================================================= */

/* -- Optional: load Geist as webfont. Uncomment if you want it. ----------------
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2-variations');
}
*/

:root {
  /* Brand accent — set dynamically by js/shop.js based on active shop ----------- */
  --accent: #0c2340;                        /* Clotrio default; swapped at runtime */
  --accent-soft: rgba(12, 35, 64, 0.12);    /* derived; updated alongside --accent */
  --accent-ink:  #08182d;                   /* derived; ~20% darker for hover      */

  /* Semantic palette — fixed, never overridden by shop accent ------------------- */
  --success:      #0a7d3e;
  --success-soft: #e6f4ec;
  --warning:      #b8770b;
  --warning-soft: #fbf1de;
  --danger:       #b3261e;
  --danger-soft:  #fbeaea;
  --info:         #1e5fb3;
  --info-soft:    #e8eef9;

  /* Neutrals -------------------------------------------------------------------- */
  --ink-1:    #0e1116;
  --ink-2:    #3a4250;
  --ink-3:    #6b7280;
  --ink-4:    #9aa3b2;
  --line-1:   #e5e7eb;
  --line-2:   #f1f3f5;
  --bg-page:  #fafbfc;
  --bg-card:  #ffffff;
  --bg-card-2:#f6f7f9;

  /* Spacing — 8pt grid ---------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Type scale — Geist with system fallback ------------------------------------- */
  --font-stack: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --t-display:  600 32px/1.2 var(--font-stack);
  --t-h1:       600 24px/1.3 var(--font-stack);
  --t-h2:       600 18px/1.4 var(--font-stack);
  --t-h3:       600 15px/1.4 var(--font-stack);
  --t-body:     400 14px/1.5 var(--font-stack);
  --t-meta:     400 13px/1.4 var(--font-stack);
  --t-mono-num: 500 14px/1.4 var(--font-stack);
  --t-caption:  500 12px/1.4 var(--font-stack);

  /* Radii ----------------------------------------------------------------------- */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px;

  /* Shadows --------------------------------------------------------------------- */
  --shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03);
  --shadow-pop:  0 8px 24px rgba(15,23,42,0.08);
}

/* =============================================================================
   Page accent stripe — 4px band fixed to top of viewport
   ============================================================================= */
.cf-accent-stripe {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent);
  z-index: 1000;
  transition: background-color 240ms ease-in-out;
  pointer-events: none;
}

/* Top padding shim so content doesn't sit under the stripe */
.cf-page { padding-top: 4px; }

/* =============================================================================
   KPI tile (§5.1) — the atom of the dashboard
   ============================================================================= */
.cf-kpi {
  background: var(--bg-card);
  border: 1px solid var(--line-1);
  border-left-width: 1px;
  border-radius: var(--r-3);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
  transition: border-color 100ms ease-out, background 100ms ease-out;
  display: block;
  text-decoration: none;
  color: inherit;
}
.cf-kpi:hover           { border-color: var(--ink-4); }
.cf-kpi.is-success      { border-left: 3px solid var(--success); padding-left: calc(var(--s-5) - 2px); }
.cf-kpi.is-warning      { border-left: 3px solid var(--warning); padding-left: calc(var(--s-5) - 2px); }
.cf-kpi.is-danger       { border-left: 3px solid var(--danger);  padding-left: calc(var(--s-5) - 2px); }
.cf-kpi.is-active       { background: var(--accent-soft); border-left: 3px solid var(--accent); padding-left: calc(var(--s-5) - 2px); }
.cf-kpi.is-disabled     { opacity: 0.55; cursor: not-allowed; }

.cf-kpi__label {
  font: var(--t-caption);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.cf-kpi__valuerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-2) 0 var(--s-1);
}
.cf-kpi__value {
  font: var(--t-display);
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
.cf-kpi__delta {
  font: var(--t-meta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cf-kpi__delta.is-up   { color: var(--success); }
.cf-kpi__delta.is-down { color: var(--danger); }
.cf-kpi__delta.is-flat { color: var(--ink-3); }
.cf-kpi__unit {
  font: var(--t-meta);
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}
.cf-kpi__spark {
  margin: var(--s-2) 0;
  height: 16px;
  width: 100%;
  display: block;
}
.cf-kpi__chips {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-2);
}

/* =============================================================================
   Chip (§5.2) — status + store breakdown
   ============================================================================= */
.cf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-1);
  font: var(--t-caption);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cf-chip__dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
}

/* =============================================================================
   Section header (§5.3)
   ============================================================================= */
.cf-section { margin-bottom: var(--s-6); }
.cf-section__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.cf-section__title {
  font: var(--t-h2);
  color: var(--ink-1);
  margin: 0;
}
.cf-section__actions {
  display: flex; align-items: center; gap: var(--s-3);
}
.cf-range-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--line-1);
  border-radius: 999px;
  font: var(--t-meta);
  background: var(--bg-card);
  color: var(--ink-2);
  cursor: pointer;
}
.cf-range-pill:hover { background: var(--bg-card-2); }
.cf-link {
  font: var(--t-meta);
  color: var(--accent);
  text-decoration: none;
}
.cf-link:hover { text-decoration: underline; }

/* =============================================================================
   KPI grid layouts
   ============================================================================= */
.cf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.cf-kpi-grid--5 { grid-template-columns: repeat(5, 1fr); }
.cf-kpi-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
  .cf-kpi-grid--5, .cf-kpi-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .cf-kpi-grid--5, .cf-kpi-grid--4, .cf-kpi-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--s-2);
  }
  .cf-kpi-grid::-webkit-scrollbar { display: none; }
  .cf-kpi-grid > * {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
}

/* =============================================================================
   Chart frame (§5.4)
   ============================================================================= */
.cf-chart-frame {
  background: var(--bg-card);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
}
.cf-chart-frame__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.cf-chart-frame__title {
  font: var(--t-h3);
  color: var(--ink-1);
  margin: 0;
}
.cf-chart-frame__sub {
  font: var(--t-meta);
  color: var(--ink-3);
  margin: 2px 0 0;
}
.cf-chart-frame__legend {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-3);
  font: var(--t-meta);
  color: var(--ink-3);
}

/* Two-column grid for chart pairs (§6 secondary visuals) */
.cf-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 900px) { .cf-2col { grid-template-columns: 1fr; } }

/* =============================================================================
   Action list row (§5.5) — Action Required section
   ============================================================================= */
.cf-action-row {
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  background: var(--bg-card);
  margin-bottom: var(--s-2);
  box-shadow: var(--shadow-card);
}
.cf-action-row__dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.cf-action-row__dot.is-danger  { background: var(--danger); }
.cf-action-row__dot.is-warning { background: var(--warning); }
.cf-action-row__dot.is-info    { background: var(--info); }
.cf-action-row__label {
  flex: 1;
  font: var(--t-body);
  color: var(--ink-1);
}
.cf-action-row__btn {
  padding: 5px 12px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-1);
  background: var(--bg-card);
  color: var(--ink-2);
  font: var(--t-meta);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.cf-action-row__btn:hover { background: var(--bg-card-2); border-color: var(--ink-4); }

.cf-allclear {
  background: var(--success-soft);
  color: var(--success);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  display: flex; align-items: center; gap: var(--s-2);
  font: var(--t-body);
  font-weight: 500;
}

/* =============================================================================
   Mini table (§5.6)
   ============================================================================= */
.cf-table {
  width: 100%;
  border-collapse: collapse;
}
.cf-table th {
  text-align: left;
  font: var(--t-caption);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-1);
  font-weight: 500;
}
.cf-table td {
  font: var(--t-body);
  color: var(--ink-1);
  padding: var(--s-3);
  border-bottom: 1px solid var(--line-2);
  font-variant-numeric: tabular-nums;
}
.cf-table td.is-num, .cf-table th.is-num { text-align: right; }
.cf-table tr:last-child td { border-bottom: none; }

/* =============================================================================
   Empty state (§5.7)
   ============================================================================= */
.cf-empty {
  text-align: center;
  padding: var(--s-6) var(--s-4);
  color: var(--ink-3);
  font: var(--t-body);
}
.cf-empty__icon {
  font-size: 24px;
  display: block;
  margin-bottom: var(--s-2);
  opacity: 0.4;
}

/* =============================================================================
   Sidebar shop picker — multi-store dropdown
   ============================================================================= */
.cf-shop-pick {
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  background: var(--bg-card);
  margin: var(--s-3);
  cursor: pointer;
  position: relative;
  user-select: none;
}
.cf-shop-pick:hover { background: var(--bg-card-2); }
.cf-shop-pick__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3);
}
.cf-shop-pick__name {
  display: flex; align-items: center; gap: var(--s-2);
  font: var(--t-h3);
  color: var(--ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-shop-pick__caret {
  width: 12px; height: 12px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.cf-shop-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg-card);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-pop);
  z-index: 200;
  max-height: 320px;
  overflow-y: auto;
}
.cf-shop-menu__item {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3);
  font: var(--t-body);
  color: var(--ink-1);
  cursor: pointer;
  border-bottom: 1px solid var(--line-2);
}
.cf-shop-menu__item:last-child { border-bottom: none; }
.cf-shop-menu__item:hover { background: var(--bg-card-2); }
.cf-shop-menu__item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.cf-shop-menu__item__code {
  margin-left: auto;
  color: var(--ink-3);
  font: var(--t-caption);
}

/* =============================================================================
   Page wrapper for dashboard
   ============================================================================= */
.cf-dashboard {
  background: var(--bg-page);
  padding: var(--s-5);
  min-height: 100vh;
  font-family: var(--font-stack);
}
.cf-dashboard h1 {
  font: var(--t-h1);
  color: var(--ink-1);
  margin: 0 0 var(--s-5);
}

/* Inline mock chart helpers */
.cf-mock-chart { width: 100%; height: 180px; display: block; }
.cf-mock-chart--tall { height: 240px; }
.cf-mock-chart--short { height: 120px; }

/* Stacked horizontal bar (status flow) */
.cf-stacked-bar {
  display: flex;
  width: 100%;
  height: 32px;
  border-radius: var(--r-1);
  overflow: hidden;
  background: var(--line-2);
}
.cf-stacked-bar__seg {
  display: flex; align-items: center; justify-content: center;
  font: var(--t-caption);
  color: white;
  font-weight: 600;
  transition: filter 100ms ease;
}
.cf-stacked-bar__seg:hover { filter: brightness(1.1); }


/* =============================================================================
   PHASE 4 REFINEMENT — tighter dashboard, list-style action rows, working pills
   ============================================================================= */

/* Tighter top of page */
.cf-dashboard { padding: var(--s-4) var(--s-5) var(--s-6); }
.cf-dashboard h1 { margin: 0 0 var(--s-3); font: 600 22px/1.2 var(--font-stack); }

/* Tighter sections */
.cf-section { margin-bottom: var(--s-5); }
.cf-section__head { margin-bottom: var(--s-3); }

/* Section header with bottom rule — looks more like a document section */
.cf-section__head--rule {
  border-bottom: 1px solid var(--line-1);
  padding-bottom: var(--s-2);
  align-items: flex-end;
}
.cf-section__title--small {
  font: 600 13px/1.2 var(--font-stack);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

/* Action list — single card holding multiple action rows */
.cf-action-list {
  background: var(--bg-card);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-card);
  padding: 0 var(--s-4);
  overflow: hidden;
}
.cf-action-row--compact {
  border: none;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  margin: 0;
  padding: var(--s-3) 0;
}
.cf-action-row--compact:last-child { border-bottom: none; }
.cf-action-row__btn {
  padding: 4px 10px;
  font-weight: 500;
}

/* Range pill — proper interactive state */
.cf-range-pill {
  cursor: pointer;
  font-weight: 500;
  user-select: none;
  transition: all 100ms ease;
}
.cf-range-pill:hover {
  border-color: var(--ink-3);
  color: var(--ink-1);
}
.cf-range-pill.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Tighter KPI tiles — less padding so the section is shorter */
.cf-kpi {
  padding: var(--s-4) var(--s-4);
}
.cf-kpi__label { font-size: 11px; }
.cf-kpi__valuerow { margin: 4px 0 2px; }
.cf-kpi__value { font: 600 24px/1.2 var(--font-stack); }
.cf-kpi__unit { font-size: 12px; margin-bottom: var(--s-2); }

/* Funnel-style row (used by MockFunnel) — compact value+delta inline */
.cf-funnel-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) 0;
}
.cf-funnel-row__label {
  font: var(--t-meta);
  color: var(--ink-2);
}
.cf-funnel-row__bar {
  background: var(--line-2);
  height: 22px;
  border-radius: var(--r-1);
  overflow: hidden;
}
.cf-funnel-row__fill {
  height: 100%;
  background: var(--accent);
}
.cf-funnel-row__num {
  font: var(--t-mono-num);
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
  text-align: right;
  min-width: 80px;
}
.cf-funnel-row__delta {
  font: var(--t-caption);
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}
.cf-funnel-row__delta.is-warning { color: var(--warning); }
.cf-funnel-row__delta.is-quiet   { color: var(--ink-3); }

/* Bar list — wider label column with ellipsis + native tooltip */
.cf-barlist-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 2fr 90px;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line-2);
}
.cf-barlist-row:last-child { border-bottom: none; }
.cf-barlist-row__label {
  font: var(--t-meta);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-barlist-row__bar {
  background: var(--line-2);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.cf-barlist-row__bar > div { height: 100%; }
.cf-barlist-row__num {
  text-align: right;
  font: var(--t-mono-num);
  color: var(--ink-1);
}
.cf-barlist-row__num small {
  display: block;
  font: var(--t-caption);
  color: var(--ink-3);
}

/* Hide redundant "shop name" subtitle in the existing brand block.
   The shop picker at the top of the sidebar replaces it. JS heuristic in
   dashboard.html removes the actual element by text-content match;
   this CSS handles common static-class patterns as a backup. */
.sidebar .brand-subtitle,
.sidebar .brand-tagline,
.sidebar .brand-meta,
aside .brand-subtitle,
aside .brand-tagline,
aside .brand-meta { display: none !important; }


/* =============================================================================
   PHASE 4 CLEAN — alert tiles, drawer, equal-height grids, alignment fixes
   ============================================================================= */

/* ---- Force equal-height tiles in any KPI / 2-col grid ---- */
.cf-kpi-grid { grid-auto-rows: 1fr; }
.cf-kpi { display: flex; flex-direction: column; }
.cf-kpi__valuerow { margin-top: auto; }  /* push value-row to fill space */
.cf-kpi__valuerow + * { margin-top: 0; }
/* Actually: keep KPI value at top — undo above */
.cf-kpi__valuerow { margin-top: 4px; }

.cf-2col { grid-auto-rows: 1fr; }
.cf-chart-frame { display: flex; flex-direction: column; }
.cf-chart-frame__body { flex: 1; min-height: 0; }

/* Reserve a fixed-height area for sparkline so tiles without a spark don't
   collapse smaller than tiles with one. The placeholder is invisible. */
.cf-kpi__spark-slot {
  height: 16px;
  margin: var(--s-2) 0;
}
.cf-kpi__chips-slot {
  margin-top: auto;  /* always pin chips to bottom of tile */
}

/* =============================================================================
   ALERT TILE — clickable counter for Action Required section
   ============================================================================= */
.cf-alert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}
.cf-alert-tile {
  background: var(--bg-card);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  padding: var(--s-4);
  cursor: pointer;
  font-family: var(--font-stack);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  position: relative;
  transition: border-color 100ms, transform 100ms;
  min-height: 110px;
}
.cf-alert-tile:hover {
  border-color: var(--ink-3);
  transform: translateY(-1px);
  box-shadow: var(--shadow-pop);
}
.cf-alert-tile.is-danger  { border-left: 3px solid var(--danger);  padding-left: calc(var(--s-4) - 2px); }
.cf-alert-tile.is-warning { border-left: 3px solid var(--warning); padding-left: calc(var(--s-4) - 2px); }
.cf-alert-tile.is-info    { border-left: 3px solid var(--info);    padding-left: calc(var(--s-4) - 2px); }

.cf-alert-tile__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.cf-alert-tile__count {
  font: 600 28px/1 var(--font-stack);
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
.cf-alert-tile__sev {
  width: 8px; height: 8px; border-radius: 50%;
}
.cf-alert-tile__sev.is-danger  { background: var(--danger); }
.cf-alert-tile__sev.is-warning { background: var(--warning); }
.cf-alert-tile__sev.is-info    { background: var(--info); }

.cf-alert-tile__label {
  font: 500 14px/1.3 var(--font-stack);
  color: var(--ink-1);
  margin-top: 2px;
}
.cf-alert-tile__sub {
  font: var(--t-meta);
  color: var(--ink-3);
  margin-top: auto;
}
.cf-alert-tile__action {
  font: var(--t-caption);
  color: var(--accent);
  margin-top: var(--s-2);
}

/* =============================================================================
   DRAWER — slide-in side panel for action details
   ============================================================================= */
.cf-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.cf-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cf-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 440px;
  max-width: 100vw;
  background: var(--bg-card);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 240ms ease;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.12);
}
.cf-drawer.is-open { transform: translateX(0); }

.cf-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line-1);
}
.cf-drawer__title {
  font: var(--t-h2);
  color: var(--ink-1);
  margin: 0;
}
.cf-drawer__sub {
  font: var(--t-meta);
  color: var(--ink-3);
  margin-top: 2px;
}
.cf-drawer__close {
  background: transparent;
  border: none;
  color: var(--ink-3);
  font: 600 18px/1 var(--font-stack);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-1);
}
.cf-drawer__close:hover { background: var(--bg-card-2); color: var(--ink-1); }

.cf-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-3) var(--s-5);
}
.cf-drawer__foot {
  border-top: 1px solid var(--line-1);
  padding: var(--s-3) var(--s-5);
  display: flex;
  gap: var(--s-3);
  justify-content: flex-end;
}

.cf-drawer__row {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-2);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2) var(--s-3);
}
.cf-drawer__row:last-child { border-bottom: none; }
.cf-drawer__rowmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-drawer__ref {
  font: var(--t-mono-num);
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.cf-drawer__customer {
  font: var(--t-body);
  color: var(--ink-1);
}
.cf-drawer__detail {
  font: var(--t-meta);
  color: var(--ink-3);
}
.cf-drawer__age {
  font: var(--t-caption);
  color: var(--ink-3);
  white-space: nowrap;
}
.cf-drawer__age.is-warning { color: var(--warning); }
.cf-drawer__age.is-danger  { color: var(--danger); }

/* =============================================================================
   FUNNEL FIX — wider num column so value+delta sit truly inline
   ============================================================================= */
.cf-funnel-row {
  grid-template-columns: 110px 1fr 110px;  /* was: 110px 1fr auto */
}
.cf-funnel-row__num {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

/* =============================================================================
   DONUT FIX — center text never overlaps ring (tighter container, smaller label)
   ============================================================================= */
.cf-donut-wrap {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.cf-donut-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  /* Cap to ~90px regardless of donut size — must fit inside inner hole.
     For a 160px donut with innerR ratio 0.62, the hole diameter is ~99px,
     so 90px leaves a comfortable 4-5px margin all around. */
  width: 90px;
}
.cf-donut-center__label {
  font: 500 9px/1.2 var(--font-stack);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-donut-center__value {
  font: 600 16px/1.2 var(--font-stack);
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}

/* Section meta line (e.g. "5 tasks pending" next to title) */
.cf-meta {
  font: var(--t-meta);
  color: var(--ink-3);
}