/* =============================================================================
   cflow-ui.css — Cflow unified design layer (light & airy SaaS)
   Loaded AFTER tokens.css + styles.css on every page, so it refines the shared
   look globally and defines the new viz component kit (js/viz.js). Additive and
   conservative: it polishes typography, surfaces, controls and tables via the
   class names pages already use, without changing layout-critical geometry.
   ============================================================================= */

:root {
  /* Refined light palette (airy, soft) — overrides a few tokens.css values. */
  --bg-page:   #f6f8fb;
  --bg-card:   #ffffff;
  --bg-card-2: #f4f6fa;
  --line-1:    #e7eaf0;
  --line-2:    #eef1f6;
  --ink-1:     #0f1729;
  --ink-2:     #3c465a;
  --ink-3:     #6b7587;
  --ink-4:     #aab2c0;

  /* Softer, layered elevation */
  --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --shadow-soft: 0 2px 8px rgba(16,24,40,.05), 0 6px 16px rgba(16,24,40,.04);
  --shadow-pop:  0 10px 30px rgba(16,24,40,.12), 0 2px 8px rgba(16,24,40,.06);

  --r-1: 8px; --r-2: 10px; --r-3: 14px; --r-4: 20px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--bg-page);
  color: var(--ink-1);
}

/* Calmer custom scrollbars app-wide */
* { scrollbar-width: thin; scrollbar-color: #cdd3df transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #cdd3df; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #b3bccb; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Accessible focus ring everywhere */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, #1e5fb3);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- Gentle control refinements (legacy styles.css vocabulary) ------------- */
.btn-primary, .btn-primary-inline, .btn-secondary, .btn-link,
button.btn, .pill, input[type="text"], input[type="search"], input[type="number"],
input[type="date"], input[type="month"], input[type="email"], select, textarea {
  transition: background .15s var(--ease), border-color .15s var(--ease),
              box-shadow .15s var(--ease), color .15s var(--ease), transform .08s var(--ease);
}
.btn-primary, .btn-primary-inline {
  background: var(--accent, #1e5fb3); border-color: var(--accent, #1e5fb3);
  box-shadow: 0 1px 2px rgba(16,24,40,.10);
}
.btn-primary:hover, .btn-primary-inline:hover { filter: brightness(1.06); box-shadow: var(--shadow-soft); }
.btn-primary:active, .btn-primary-inline:active { transform: translateY(1px); }
.btn-secondary:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent, #1e5fb3) !important;
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(30,95,179,.14)) !important;
}

/* Card-ish containers gain the softer shadow + smoother hover */
.cf-kpi, .cf-chart-frame, .cf-action-list, .cf-alert-tile, .card, .panel-card {
  box-shadow: var(--shadow-card);
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.cf-alert-tile:hover, .cf-kpi:hover { box-shadow: var(--shadow-soft); }

/* Table polish (legacy .tbl + cf-table) */
.tbl thead th, .cf-table th { letter-spacing: .03em; }
.tbl tbody tr, .cf-table tbody tr { transition: background .12s var(--ease); }
.tbl tbody tr:hover, .cf-table tbody tr:hover { background: var(--bg-card-2); }

/* =============================================================================
   VIZ KIT
   ============================================================================= */
.viz-panel {
  background: var(--bg-card);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-card);
  padding: var(--s-5, 20px);
}
.viz-panel__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom: 16px; }
.viz-panel__title { font: 600 15px/1.3 var(--font-stack); color: var(--ink-1); margin:0; }
.viz-panel__sub { font: 400 12.5px/1.4 var(--font-stack); color: var(--ink-3); margin: 2px 0 0; }

/* Hero gradient panel for the dashboard centerpiece */
.viz-hero {
  background:
    radial-gradient(1200px 200px at 0% -40%, var(--accent-soft, rgba(30,95,179,.10)), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbfcfe);
  border: 1px solid var(--line-1);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-soft);
  padding: 22px 24px;
}

/* ---- ROADMAP --------------------------------------------------------------- */
.viz-road__head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 18px; }
.viz-road__title { font: 600 13px/1 var(--font-stack); text-transform: uppercase; letter-spacing:.08em; color: var(--ink-3); }
.viz-road__total { font: 700 14px/1 var(--font-stack); color: var(--ink-1); font-variant-numeric: tabular-nums; }
.viz-road__total small { font-weight:500; color: var(--ink-3); text-transform:uppercase; letter-spacing:.05em; font-size:10px; }
.viz-road__track {
  display:flex; align-items:flex-start; justify-content:center; gap:0;
}
.viz-road__stage {
  position: relative; flex: 0 1 150px; min-width: 92px; max-width: 190px;
  display:flex; flex-direction:column; align-items:center; gap: 9px;
  text-decoration:none; color: inherit; cursor: pointer; padding: 2px;
}
.viz-road__stage[href]:hover .viz-road__node { transform: translateY(-3px); box-shadow: 0 10px 22px color-mix(in srgb, var(--st) 38%, transparent); }
.viz-road__stage[href]:hover .viz-road__label { color: var(--st); }
.viz-road__node {
  width: 64px; height: 64px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--st) 14%, #fff);
  border: 2.5px solid var(--st);
  color: var(--st);
  font: 700 19px/1 var(--font-stack); font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--st) 20%, transparent);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  transform: scale(.55); opacity: 0;
}
.viz-in .viz-road__node { animation: vizPop .5s var(--ease) forwards; animation-delay: calc(var(--i) * 110ms); }
@keyframes vizPop { to { transform: scale(1); opacity: 1; } }
.viz-road__count { display:block; }
.viz-road__label { font: 600 13px/1.2 var(--font-stack); color: var(--ink-1); text-align:center; }
.viz-road__sub { font: 500 11px/1.2 var(--font-stack); color: var(--ink-4); text-align:center; }
/* connecting track — capped width so 2-3 stations don't stretch to a void */
.viz-road__link {
  flex: 1 1 auto; align-self: flex-start;
  height: 3px; min-width: 24px; max-width: 150px;
  margin-top: 33px; /* center of the 64px node */
  background: var(--line-1);
  position: relative; border-radius: 3px;
}
.viz-road__link::after {
  content:""; position:absolute; left:0; top:0; bottom:0; width: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent,#1e5fb3) 55%, #7fb0ff), var(--accent, #1e5fb3));
  border-radius: 3px;
}
.viz-road__link > i {
  position:absolute; right:-2px; top:50%; transform: translateY(-50%);
  width:0;height:0; border-left:6px solid var(--accent,#1e5fb3);
  border-top:4px solid transparent; border-bottom:4px solid transparent; opacity:0;
}
.viz-in .viz-road__link::after { animation: vizFill .7s var(--ease) forwards .25s; }
.viz-in .viz-road__link > i { animation: vizArrow .2s var(--ease) forwards .9s; }
@keyframes vizFill { to { width: 100%; } }
@keyframes vizArrow { to { opacity: 1; } }
.viz-road__branches { display:flex; align-items:center; gap: 10px; flex-wrap:wrap; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-1); }
.viz-road__branches-lbl { font: 600 10px/1 var(--font-stack); text-transform:uppercase; letter-spacing:.06em; color: var(--ink-4); margin-right: 2px; }
.viz-road__branch { display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  background: var(--bg-card-2); border:1px solid var(--line-1); border-radius: 999px; padding: 6px 13px; }
.viz-road__branch:hover { border-color: var(--st); }
.viz-road__branch-dot { width:8px; height:8px; border-radius:50%; background: var(--st); }
.viz-road__branch-val { font: 700 13px/1 var(--font-stack); color: var(--ink-1); font-variant-numeric: tabular-nums; }
.viz-road__branch-lbl { font: 500 12px/1 var(--font-stack); color: var(--ink-3); }
.viz-road--empty { padding: 8px 0; }

@media (max-width: 720px) {
  .viz-road__track { flex-wrap: wrap; gap: 16px 8px; justify-content: space-around; }
  .viz-road__stage { flex: 1 0 28%; }
  .viz-road__link { display:none; }
}

/* ---- RING ------------------------------------------------------------------ */
.viz-ring { position: relative; display:inline-flex; flex-direction:column; align-items:center; gap: 8px; }
.viz-ring__svg { display:block; }
.viz-ring__bg { stroke: var(--line-2); }
.viz-ring__fg { stroke: var(--ring-col); stroke-dashoffset: var(--dash); transition: none; }
.viz-in .viz-ring__fg { animation: vizRing 1s var(--ease) forwards .15s; }
@keyframes vizRing { to { stroke-dashoffset: var(--off); } }
.viz-ring__center { position:absolute; top: 50%; left:0; right:0; text-align:center; transform: translateY(-50%); }
.viz-ring__value { font: 600 22px/1 var(--font-stack); color: var(--ink-1); font-variant-numeric: tabular-nums; }
.viz-ring__sub { font: 500 10px/1.2 var(--font-stack); color: var(--ink-3); margin-top: 2px; }
.viz-ring__label { font: 500 12px/1.2 var(--font-stack); color: var(--ink-2); text-align:center; }

/* ---- SPARKLINE ------------------------------------------------------------- */
.viz-spark { width: 100%; height: 34px; display:block; }
.viz-spark__line { stroke-dasharray: 1; }

/* ---- STAT CARD ------------------------------------------------------------- */
.viz-stat {
  display:flex; flex-direction:column; gap: 2px;
  background: var(--bg-card); border: 1px solid var(--line-1);
  border-radius: var(--r-3); padding: 14px 16px 12px;
  box-shadow: var(--shadow-card); text-decoration:none; color: inherit;
  position: relative; overflow: hidden;
  transition: transform .14s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.viz-stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width: 3px; background: var(--stat); opacity:.0; transition: opacity .18s; }
.viz-stat.is-warning::before, .viz-stat.is-danger::before, .viz-stat.is-success::before { opacity: 1; }
a.viz-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: color-mix(in srgb, var(--stat) 40%, var(--line-1)); }
.viz-stat__top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.viz-stat__label { font: 600 11px/1.2 var(--font-stack); text-transform: uppercase; letter-spacing:.05em; color: var(--ink-3); }
.viz-stat__badge { font: 600 10px/1 var(--font-stack); color: var(--stat); background: color-mix(in srgb, var(--stat) 12%, #fff); padding: 3px 7px; border-radius: 999px; }
.viz-stat__valuerow { display:flex; align-items:baseline; gap: 8px; margin-top: 4px; }
.viz-stat__value { font: 600 26px/1.1 var(--font-stack); color: var(--ink-1); font-variant-numeric: tabular-nums; }
.viz-stat__delta { font: 600 12px/1 var(--font-stack); font-variant-numeric: tabular-nums; }
.viz-stat__delta.is-up { color: var(--success); }
.viz-stat__delta.is-down { color: var(--danger); }
.viz-stat__delta.is-flat { color: var(--ink-3); }
.viz-stat__unit { font: 400 11.5px/1.4 var(--font-stack); color: var(--ink-3); margin-top: 2px; }
.viz-stat__spark { margin-top: 8px; }

/* ---- DONUT ----------------------------------------------------------------- */
.viz-donut { position: relative; display:inline-flex; align-items:center; justify-content:center; }
.viz-donut__seg { transition: stroke-dasharray .8s var(--ease); }
.viz-donut__center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.viz-donut__cl { font: 500 10px/1.2 var(--font-stack); text-transform: uppercase; letter-spacing:.05em; color: var(--ink-3); }
.viz-donut__cv { font: 600 18px/1.1 var(--font-stack); color: var(--ink-1); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ---- LEGEND ---------------------------------------------------------------- */
.viz-legend { display:flex; flex-wrap:wrap; gap: 10px 16px; }
.viz-legend__item { display:inline-flex; align-items:center; gap:6px; font: 500 12px/1.3 var(--font-stack); color: var(--ink-2); }
.viz-legend__dot { width:9px; height:9px; border-radius: 3px; display:inline-block; }
.viz-legend__item b { font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; }

/* ---- HBARS ----------------------------------------------------------------- */
.viz-bars { display:flex; flex-direction:column; gap: 11px; }
.viz-bars__row { display:grid; grid-template-columns: minmax(110px, 1.3fr) 2fr auto; align-items:center; gap: 12px; }
.viz-bars__lbl { font: 500 12.5px/1.3 var(--font-stack); color: var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viz-bars__track { height: 9px; background: var(--line-2); border-radius: 6px; overflow:hidden; }
.viz-bars__fill { display:block; height:100%; width: 0; border-radius:6px; background: var(--bc); }
.viz-in .viz-bars__fill { animation: vizBar .7s var(--ease) forwards; animation-delay: calc(var(--i) * 60ms); }
@keyframes vizBar { to { width: var(--w); } }
.viz-bars__val { font: 600 13px/1.1 var(--font-stack); color: var(--ink-1); text-align:right; font-variant-numeric: tabular-nums; }
.viz-bars__val small { display:block; font: 500 10px/1.2 var(--font-stack); color: var(--ink-3); }

/* ---- WATERFALL ------------------------------------------------------------- */
.viz-wf { display:flex; align-items:flex-end; gap: 10px; height: 230px; padding-top: 8px; border-bottom: 1.5px solid var(--line-1); }
.viz-wf__col { flex: 1 1 0; display:flex; flex-direction:column; align-items:center; height:100%; }
.viz-wf__bararea { position: relative; width: 100%; flex: 1 1 auto; min-height: 0; }
/* dotted drop-guide: shows how far a floating bar is lifted off the baseline */
.viz-wf__bararea::after {
  content:""; position:absolute; left:50%; bottom:0; height: var(--b); width:0;
  border-left: 1.5px dotted color-mix(in srgb, var(--ink-4) 60%, transparent);
}
.viz-wf__bar {
  position:absolute; left: 14%; right: 14%;
  bottom: var(--b); height: 0; border-radius: 6px 6px 3px 3px;
  box-shadow: 0 2px 6px rgba(16,24,40,.10);
  transition: height .7s var(--ease); transition-delay: calc(var(--i) * 90ms);
}
.viz-in .viz-wf__bar { height: var(--h); }
.viz-wf__bar.is-info    { background: linear-gradient(180deg, color-mix(in srgb, var(--info) 88%, #fff), var(--info)); }
.viz-wf__bar.is-danger  { background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 82%, #fff), var(--danger)); }
.viz-wf__bar.is-success { background: linear-gradient(180deg, color-mix(in srgb, var(--success) 82%, #fff), var(--success)); }
.viz-wf__val { font: 600 12px/1.2 var(--font-stack); color: var(--ink-1); margin-top: 8px; font-variant-numeric: tabular-nums; }
.viz-wf__lbl { font: 500 11px/1.2 var(--font-stack); color: var(--ink-3); text-align:center; margin-top: 2px; }

/* ---- LINE ------------------------------------------------------------------ */
.viz-linec { display:grid; grid-template-columns: auto 1fr; grid-template-rows: var(--lc-h, 200px) auto; column-gap: 12px; row-gap: 6px; }
.viz-linec__y { grid-column:1; grid-row:1; display:flex; flex-direction:column; justify-content:space-between;
  font: 600 10.5px/1 var(--font-stack); color: var(--ink-4); text-align:right; padding: 2px 0; white-space:nowrap; }
.viz-linec__plot { grid-column:2; grid-row:1; position:relative; height: var(--lc-h, 200px);
  border-left: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); }
.viz-linec__last { position:absolute; right: 6px; transform: translateY(50%);
  background: var(--ln, var(--accent)); color:#fff; font: 700 10.5px/1 var(--font-stack);
  padding: 4px 7px; border-radius: 7px; white-space:nowrap; box-shadow: var(--shadow-card); }
.viz-linec__x { grid-column:2; grid-row:2; display:flex; justify-content:space-between;
  font: 500 11px/1 var(--font-stack); color: var(--ink-3); }
.viz-line { width: 100%; height: 100%; display:block; }
.viz-line__path { stroke-dasharray: 2000; stroke-dashoffset: 2000; }
.viz-in .viz-line__path { animation: vizDraw 1.1s var(--ease) forwards; }
@keyframes vizDraw { to { stroke-dashoffset: 0; } }

/* ---- Ring card (ring + label/hint) shared by dashboard & accounts ---------- */
.cf-ring-card {
  display:flex; align-items:center; gap:16px;
  background:var(--bg-card); border:1px solid var(--line-1);
  border-radius:var(--r-3); padding:16px; box-shadow:var(--shadow-card);
  text-decoration:none; color:inherit;
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
a.cf-ring-card:hover { box-shadow:var(--shadow-soft); }
.cf-ring-card__meta { display:flex; flex-direction:column; gap:2px; }
.cf-ring-card__label { font:600 11px/1.2 var(--font-stack); text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.cf-ring-card__hint { font:400 11.5px/1.4 var(--font-stack); color:var(--ink-3); }

/* ---- Section + grid scaffolding shared by flagship pages ------------------- */
.viz-grid { display:grid; gap: 14px; }
.viz-grid--4 { grid-template-columns: repeat(4, 1fr); }
.viz-grid--3 { grid-template-columns: repeat(3, 1fr); }
.viz-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 1080px){ .viz-grid--4 { grid-template-columns: repeat(2,1fr);} .viz-grid--3{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 720px){ .viz-grid--4, .viz-grid--3, .viz-grid--2 { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .viz-in .viz-road__node,
  .viz-in .viz-road__link::after,
  .viz-in .viz-ring__fg,
  .viz-in .viz-bars__fill,
  .viz-in .viz-wf__bar,
  .viz-in .viz-line__path { animation: none !important; transition: none !important; }
  .viz-road__node { transform:none; opacity:1; }
  .viz-road__link::after { width:100%; }
  .viz-bars__fill { width: var(--w); }
  .viz-line__path { stroke-dashoffset: 0; }
}

/* =============================================================================
   THEME UNIFICATION — align the legacy styles.css token names with the new
   airy palette so EVERY page (orders, items, retex, returns, masters, settings,
   …) shares one cohesive look. --accent is left to js/shop.js (per-brand).
   ============================================================================= */
:root {
  --bg:            #f6f8fb;
  --surface:       #ffffff;
  --surface-2:     #f4f6fa;
  --border:        #e7eaf0;
  --border-strong: #d7dce5;
  --text:          #0f1729;
  --text-muted:    #3c465a;
  --text-dim:      #97a0b0;
  --r-sm: 6px;  --r-md: 9px;  --r-lg: 12px;
}

/* =============================================================================
   Alert tiles — calm 'clear' state for zero-count categories
   ============================================================================= */
.cf-alert-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cf-alert-tile.is-clear { border-left: 3px solid var(--success); padding-left: calc(var(--s-4,16px) - 2px); }
.cf-alert-tile.is-clear .cf-alert-tile__count { color: var(--ink-4); }
.cf-alert-tile.is-clear .cf-alert-tile__action { display: none; }
.cf-alert-tile__sev.is-clear { background: var(--success); }

/* =============================================================================
   GLOBAL APP POLISH — refine the shared legacy vocabulary used across pages.
   Colour / type / border / radius only; no layout geometry changes.
   ============================================================================= */
.content h1, main h1 { letter-spacing: -0.01em; }

/* Section cards */
.section { border-radius: var(--r-3,14px); box-shadow: var(--shadow-card); }
.section-head h2 { font: 600 15px/1.3 var(--font-stack); letter-spacing: -0.005em; }

/* Toolbar / search */
.search, input[type="search"].search {
  border: 1px solid var(--line-1); border-radius: var(--r-2,10px); background: var(--bg-card);
}

/* Tables (legacy .tbl) */
.tbl thead th {
  background: var(--bg-card-2); color: var(--ink-3);
  font: 600 11px/1.3 var(--font-stack); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--line-1);
}
.tbl tbody td { border-bottom: 1px solid var(--line-2); color: var(--ink-1); }
.tbl tbody tr:last-child td { border-bottom: none; }

/* Pills → semantic tokens */
.pill { border-radius: 999px; font: 600 11px/1 var(--font-stack); padding: 4px 9px; }
.pill-ok    { background: var(--success-soft); color: var(--success); }
.pill-warn  { background: var(--warning-soft); color: var(--warning); }
.pill-err   { background: var(--danger-soft);  color: var(--danger); }
.pill-muted { background: var(--bg-card-2);    color: var(--ink-3); }

/* Empty states */
.empty, .ord-empty { color: var(--ink-3); font: 500 13px/1.6 var(--font-stack); }

/* Side panels / drawers / modals */
.side-panel, .mini-modal { border-radius: var(--r-3,14px); box-shadow: var(--shadow-pop); }

/* Active tab accent (common patterns) */
.cs-tabs button.active, .cv-tabs button.active, .acc-tab.active { color: var(--accent); }

/* =============================================================================
   Notification bell (topbar)
   ============================================================================= */
.cf-bell-slot { position: relative; }
.cf-bell { position:relative; width:38px; height:38px; border-radius:10px; border:1px solid var(--line-1);
  background:var(--bg-card); color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition: border-color .15s var(--ease), color .15s var(--ease); }
.cf-bell:hover { border-color:var(--ink-3); color:var(--ink-1); }
.cf-bell.has-alerts { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line-1)); }
.cf-bell__badge { position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--danger); color:#fff; font:700 10px/17px var(--font-stack); text-align:center; }
.cf-bell__menu { position:absolute; top:46px; right:0; width:320px; max-height:60vh; overflow-y:auto;
  background:var(--bg-card); border:1px solid var(--line-1); border-radius:14px; box-shadow:var(--shadow-pop); z-index:1200; padding:6px; }
.cf-bell__head { display:flex; justify-content:space-between; align-items:center; padding:8px 10px;
  font:600 11px/1 var(--font-stack); color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
.cf-bell__manage { color:var(--accent); text-decoration:none; text-transform:none; letter-spacing:0; font-weight:600; }
.cf-bell__empty { padding:18px 12px; text-align:center; color:var(--ink-3); font:500 13px/1.6 var(--font-stack); }
.cf-bell__empty a { color:var(--accent); text-decoration:none; }
.cf-bell__row { display:flex; gap:10px; align-items:center; padding:10px; border-radius:10px; text-decoration:none; color:inherit; }
.cf-bell__row:hover { background:var(--bg-card-2); }
.cf-bell__dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.cf-bell__main { display:flex; flex-direction:column; gap:1px; min-width:0; }
.cf-bell__lbl { font:600 13px/1.2 var(--font-stack); color:var(--ink-1); }
.cf-bell__sub { font:500 11.5px/1.2 var(--font-stack); color:var(--ink-3); }
@media (max-width:560px){ .cf-bell__menu { width: 86vw; right:-8px; } }

/* ---- Settings: Stock alerts tab ------------------------------------------- */
.al-perm { margin-bottom:16px; }
.al-add { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:14px;
  background:var(--bg-card-2); border:1px solid var(--line-1); border-radius:12px; margin-bottom:16px; }
.al-seg { display:inline-flex; border:1px solid var(--line-1); border-radius:8px; overflow:hidden; }
.al-seg__btn { border:0; background:var(--bg-card); padding:7px 14px; font:600 12px var(--font-stack); color:var(--ink-3); cursor:pointer; }
.al-seg__btn.is-active { background:var(--accent,#1e5fb3); color:#fff; }
.al-select { flex:1; min-width:200px; padding:8px 10px; border:1px solid var(--line-1); border-radius:8px; background:var(--bg-card); color:var(--ink-1); }
.al-chips { display:flex; gap:12px; flex-wrap:wrap; }
.al-chk { display:inline-flex; align-items:center; gap:5px; font:500 12.5px var(--font-stack); color:var(--ink-2); cursor:pointer; }
.al-list { display:flex; flex-direction:column; gap:8px; }
.al-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border:1px solid var(--line-1); border-radius:10px; background:var(--bg-card); }
.al-row__lbl { font:600 13px var(--font-stack); color:var(--ink-1); }
.al-row__meta { font:500 11.5px var(--font-stack); color:var(--ink-3); margin-top:2px; }
.al-del { padding:5px 11px; }

/* ---- Reorder: production grouping plan (rolls + ratio) -------------------- */
.fc-pg-plan { display:flex; align-items:baseline; gap:8px; margin-top:8px; }
.fc-pg-rolls { font:700 19px/1 var(--font-stack); color:var(--accent,#1e5fb3); font-variant-numeric:tabular-nums; }
.fc-pg-exp { font:600 12px/1 var(--font-stack); color:var(--ink-2); }
.fc-pg-ratio { font:600 12.5px/1.3 var(--font-stack); color:var(--ink-1); margin-top:7px; letter-spacing:.01em; }
.fc-pg-need { font:500 11px/1.3 var(--font-stack); color:var(--ink-3); margin-top:5px; }

/* Reorder: 'In production' KPI accent */
.kpi-card.kpi-incoming { border-left: 3px solid var(--info, #1e5fb3); }
.kpi-card.kpi-incoming:hover { background: var(--bg-card-2); }

/* Reorder: production-group action buttons */
.fc-pg-actions { display:flex; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line-2); }
.fc-pg-btn { flex:1; border:1px solid var(--accent,#1e5fb3); background:var(--accent,#1e5fb3); color:#fff;
  border-radius:8px; padding:7px 10px; font:600 12px var(--font-stack); cursor:pointer; white-space:nowrap; }
.fc-pg-btn:hover { filter:brightness(1.06); }
.fc-pg-btn.ghost { background:var(--bg-card); color:var(--ink-2); border-color:var(--line-1); }
.fc-pg-btn.ghost:hover { border-color:var(--ink-3); color:var(--ink-1); }

/* Reorder: batch-select checkbox on production-group cards */
.fc-prod-group { position: relative; }
.fc-pg-sel { position:absolute; top:10px; right:10px; width:17px; height:17px; cursor:pointer; z-index:3; accent-color: var(--accent,#1e5fb3); }
#fg-print-selected { display:none; align-items:center; gap:6px; }

/* Bell: in-production (handled) rows are calm + tagged */
.cf-bell__row.is-prod .cf-bell__lbl { color: var(--ink-2); }
.cf-bell__tag { margin-left:auto; align-self:center; font:600 10px/1 var(--font-stack); color:var(--info,#1e5fb3);
  background:color-mix(in srgb, var(--info,#1e5fb3) 12%, #fff); padding:3px 8px; border-radius:999px; white-space:nowrap; }

/* Reorder: festive uplift badge on a production group */
.fc-pg-festive { font:600 11px/1.3 var(--font-stack); color:var(--warning,#b8770b);
  background:var(--warning-soft,#fbf1de); border-radius:8px; padding:4px 9px; margin-top:7px; display:inline-block; }

/* Dashboard header greeting */
.cf-greet { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cf-greet__emoji { display:inline-block; transform-origin:70% 70%; animation: cf-greet-wave 2.4s ease-in-out 1; }
@keyframes cf-greet-wave {
  0%,60%,100% { transform: rotate(0deg); }
  15% { transform: rotate(12deg); } 30% { transform: rotate(-8deg); } 45% { transform: rotate(10deg); }
}

/* =============================================================================
   SHADCN ALIGNMENT (2026-06) — global, CSS-only refinement layer.
   Loaded last, so these :root overrides re-skin every page at once:
   Shadcn "slate" neutrals, 0.5rem radii, subtle elevation, sticky/responsive
   tables. Brand --accent (runtime-swapped per shop) is intentionally untouched.
   Fully reversible: delete this block to revert.
   ============================================================================= */
:root {
  /* Surfaces */
  --bg: #f8fafc; --bg-page: #f8fafc;
  --surface: #ffffff; --bg-card: #ffffff;
  --surface-2: #f1f5f9; --bg-card-2: #f1f5f9;
  /* Borders (slate-200 / slate-300) */
  --border: #e2e8f0; --border-strong: #cbd5e1;
  --line-1: #e2e8f0; --line-2: #f1f5f9;
  /* Text (slate-900 → slate-400) */
  --text: #0f172a; --text-muted: #475569;
  --ink-1: #0f172a; --ink-2: #334155; --ink-3: #64748b; --ink-4: #94a3b8;
  /* Radii — Shadcn base 0.5rem with sm/lg around it */
  --r-1: 6px; --r-2: 8px; --r-3: 12px; --r-4: 16px;
  /* Elevation — Shadcn's restrained shadows */
  --shadow-card: 0 1px 2px 0 rgb(15 23 42 / .05);
  --shadow-soft: 0 1px 3px 0 rgb(15 23 42 / .08), 0 1px 2px -1px rgb(15 23 42 / .06);
  --shadow-pop:  0 10px 15px -3px rgb(15 23 42 / .1), 0 4px 6px -4px rgb(15 23 42 / .07);
  --ring: var(--accent, #0f172a);
}

/* ---- Responsive tables with sticky headers --------------------------------
   .content is the only vertical scroll container (topbar sits outside it), so
   top:0 pins headers to the top of the scroll area — never under the topbar.
   .content already scrolls horizontally, so wide tables stay reachable. */
:where(.content) thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--border);
}
:where(.content) table { max-width: 100%; }
/* keep the header chip readable when a row is hovered behind it */
:where(.content) thead th { backdrop-filter: saturate(1.2); }

/* ---- Visual hierarchy & rhythm (shared vocabularies) ----------------------- */
:where(.content) h1 { letter-spacing: -0.011em; }
:where(.content) h2 { letter-spacing: -0.006em; }
/* Consistent muted captions across the st-/cf-/mk- families */
.cf-dash-sub, .st-card-sub, .mk-sub, .mk-panel .desc, .ob-card-sub { color: var(--ink-3); }
/* Inputs/selects share one calm resting border + radius */
.st-select, .st-input, .ob-input, .mk-map select, .mk-manual input {
  border-radius: var(--r-2);
}
/* Buttons: unify the corner radius with the new scale */
.btn-primary, .btn-secondary, .btn-primary-inline, .st-btn, .ob-btn, .mk-step { border-radius: var(--r-2); }

/* =============================================================================
   COMPONENT STANDARD (2026-06) — the Cflow UI kit, applied via the cascade.
   :where() keeps specificity at 0 so any page-level override still wins;
   this layer fills the gaps and unifies the rest. Scoped to .content so
   login/print pages (no shell) are untouched.
   ============================================================================= */

/* ---- Shell: refined dark sidebar (brand) + modern topbar ------------------- */
.sidebar .nav-section-title {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  opacity: .55;
}
.sidebar .nav-item { position: relative; border-radius: 8px; }
.sidebar .nav-item.active::before {
  content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px;
  border-radius: 3px; background: var(--accent-contrast, #7fb0ff);
}
.sidebar .nav-icon { opacity: .6; transition: opacity .12s; }
.sidebar .nav-item:hover .nav-icon { opacity: .9; }
.topbar {
  background: color-mix(in srgb, var(--surface, #fff) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding-top: 12px; padding-bottom: 12px;
}
.topbar-title { font-size: 15px; }

/* ---- Tables: one standard everywhere (gap-filling, overridable) ------------ */
:where(.content) :where(table) { border-collapse: collapse; }
:where(.content) :where(th) {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); text-align: left; padding: 10px 12px;
}
:where(.content) :where(td) { padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
:where(.content) tbody tr { transition: background .1s ease; }
:where(.content) tbody tr:hover { background: var(--surface-2); }
:where(.content) :where(td.is-num, th.is-num) { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Badges & chips: one pill standard -------------------------------------- */
:where(.pill, .mk-pill, .st-pill, .cf-chip, .st-scope-badge, .ip-st) {
  border-radius: 999px; font-weight: 600; line-height: 1.2;
}

/* ---- Cards: consistent surfaces --------------------------------------------- */
:where(.content) :where(.card, .panel-card, .st-card, .mk-panel, .ob-card, .viz-panel) {
  border-radius: var(--r-3); border-color: var(--border);
}

/* ---- Empty & loading states -------------------------------------------------- */
:where(.content) :where(.empty, .mk-empty, .cf-empty, .ord-empty) {
  color: var(--ink-3); font-size: 13px;
}
.k-skeleton {
  position: relative; overflow: hidden; background: var(--surface-2);
  border-radius: var(--r-2); min-height: 14px;
}
.k-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .65), transparent);
  animation: k-shimmer 1.4s infinite;
}
@keyframes k-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .k-skeleton::after { animation: none; } }

/* ---- Drawer / modal polish ---------------------------------------------------- */
.cf-drawer { border-radius: 16px 0 0 16px; box-shadow: var(--shadow-pop); }
.cf-drawer__head { border-bottom: 1px solid var(--line-2); }
.cf-drawer-backdrop.is-open { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

/* ---- Toast polish --------------------------------------------------------------- */
:where(.toast, .cf-toast) { border-radius: 10px; box-shadow: var(--shadow-pop); font-weight: 500; }

/* =============================================================================
   SHELL v2 (2026-06) — EXPLICIT shell skin. The sidebar's look previously
   depended on a fragile chain across styles.css tokens + injected styles
   (repo said dark #0c0a09, runtime rendered light). This block makes the
   shell deterministic: a modern light sidebar, Shadcn-flavored, with the
   brand accent driving the active state. Self-contained on purpose.
   ============================================================================= */
.sidebar {
  background: #ffffff;
  color: #475569;
  border-right: 1px solid var(--border, #e2e8f0);
}
.sidebar .brand-text { color: #0f172a; }
.sidebar .nav-section-title {
  color: #94a3b8; opacity: 1;
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}
.sidebar .nav-section-title:hover { color: #475569; }
.sidebar .nav-item {
  color: #475569; font-weight: 500; border-radius: 8px;
  margin: 1px 8px; padding: 8px 10px;
}
.sidebar .nav-item:hover { background: #f1f5f9; color: #0f172a; }
.sidebar .nav-item.active {
  background: var(--accent-soft, rgba(12,35,64,.10));
  color: var(--accent, #0c2340);
  font-weight: 600;
}
.sidebar .nav-item.active::before {
  content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 3px;
  border-radius: 3px; background: var(--accent, #0c2340);
}
.sidebar .nav-icon { opacity: .75; }
.sidebar .nav-item.active .nav-icon { opacity: 1; }
.sidebar .nav-chev { color: #94a3b8; }

/* Sticky table headers get a visible band — the header row reads as a
   distinct surface and stays readable while pinned. */
:where(.content) thead th { background: var(--surface-2, #f1f5f9); }

/* =============================================================================
   ALERT CLARITY (2026-06) — severity-coded bell rows, pulsing critical badge,
   iconed severity toasts. Every alert states WHAT and HOW BAD at a glance.
   ============================================================================= */
/* Bell: severity left-border per row */
.cf-bell__row { border-left: 3px solid transparent; }
.cf-bell__row.is-crit { border-left-color: var(--danger, #b3261e); background: color-mix(in srgb, var(--danger,#b3261e) 4%, transparent); }
.cf-bell__row.is-warn { border-left-color: var(--warning, #b8770b); }
.cf-bell__row.is-prod { border-left-color: var(--info, #1e5fb3); opacity: .85; }
.cf-bell__go { color: var(--ink-4); font-weight: 600; }
.cf-bell__row:hover .cf-bell__go { color: var(--accent); }
.cf-bell__summary { font-weight: 500; color: var(--ink-3); margin-left: 6px; font-size: 11.5px; }
.cf-bell__summary.is-crit { color: var(--danger, #b3261e); font-weight: 700; }
.cf-bell__summary.is-warn { color: var(--warning, #b8770b); font-weight: 600; }

/* Pulsing ring when something is critical / out of stock */
.cf-bell.has-danger { color: var(--danger, #b3261e); }
.cf-bell.has-danger::after {
  content: ""; position: absolute; inset: -3px; border-radius: 12px;
  border: 2px solid color-mix(in srgb, var(--danger,#b3261e) 55%, transparent);
  animation: cf-bell-pulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes cf-bell-pulse {
  0%   { transform: scale(.85); opacity: .9; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cf-bell.has-danger::after { animation: none; } }

/* Toasts: severity icon chip + distinct colors (overrides legacy styles.css) */
.cflow-toast {
  display: flex; align-items: center; gap: 10px;
  background: #0f172a; color: #fff; border-radius: 10px;
  box-shadow: var(--shadow-pop); font-weight: 500; max-width: 420px;
}
.cflow-toast__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  background: rgb(255 255 255 / .22); font-size: 12px; font-weight: 800;
}
.cflow-toast-ok   { background: var(--success, #0a7d3e); }
.cflow-toast-err  { background: var(--danger, #b3261e); }
.cflow-toast-warn { background: var(--warning, #b8770b); }

/* =============================================================================
   STATUS STANDARD (2026-06) — one indicator vocabulary for every domain
   status (orders, returns, production, payments, channels). Dot + label,
   semantic tone, optional leading glyph. Use .cf-status.is-{tone}.
   ============================================================================= */
.cf-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 8px; border-radius: 999px;
  font: 600 11px/1.4 var(--font-stack); white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid transparent;
}
.cf-status__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.cf-status.is-ok      { background: var(--success-soft); color: var(--success); }
.cf-status.is-warn    { background: var(--warning-soft); color: var(--warning); }
.cf-status.is-err     { background: var(--danger-soft);  color: var(--danger); }
.cf-status.is-info    { background: var(--info-soft, #e8eef9); color: var(--info, #1e5fb3); }
.cf-status.is-muted   { background: var(--surface-2); color: var(--ink-3); }
.cf-status.is-pending { background: var(--surface-2); color: var(--ink-2); border-color: var(--border); }
/* solid variant for high emphasis (e.g. a critical badge on a card) */
.cf-status--solid.is-err  { background: var(--danger);  color: #fff; }
.cf-status--solid.is-warn { background: var(--warning); color: #fff; }
.cf-status--solid.is-ok   { background: var(--success); color: #fff; }
.cf-status--solid .cf-status__dot { background: rgb(255 255 255 / .85); }