:root {
  /* Blue carries every interaction. Violet is reserved for AI and nothing
     else — the moment it appears on an ordinary control it stops meaning
     anything. */
  --c-navy: #0f2347;
  --c-navy-dark: #0a1730;
  --c-primary: #2563eb;
  --c-primary-dark: #1d4ed8;
  --c-primary-soft: #eff6ff;
  --c-primary-ink: #1d4ed8;
  --c-sage: #0891b2;
  --c-sage-soft: #ecfeff;
  --c-champagne: #fff7e6;
  --c-champagne-ink: #b45309;
  --c-accent: #ea580c;
  --c-accent-soft: #fff7ed;
  --c-violet: #6d4aff;
  --c-violet-soft: #f1edff;
  --c-pink: #db2777;
  --c-pink-soft: #fdf2f8;
  /* Pastel KPI hues. Indigo, purple and rose live here rather than in the
     violet slot, which stays reserved for machine-generated content. */
  --c-indigo: #6366f1;
  --c-indigo-soft: #eef1ff;
  --c-purple: #9333ea;
  --c-purple-soft: #f7eeff;
  --c-rose: #e11d48;
  --c-rose-soft: #fff1f4;

  /* Three grounds, lightest in the middle: the chrome sits back in one shared
     grey, the content area is smoke white, and cards are the only true white
     on the page. */
  --bg: #fafbfd;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --chrome-bg: #f2f5f9;
  /* Hover inside the chrome has to go darker, not lighter — surface-2 is
     above the chrome tone and would read as a highlight, not a press. */
  --chrome-hover: #e7edf5;
  --sidebar-bg: var(--chrome-bg);
  --topbar-bg: var(--chrome-bg);
  --line: #e6eaf0;
  --line-2: #eef2f7;

  --ink: #0f2347;
  --ink-2: #475569;
  --ink-3: #64748b;
  --ink-4: #94a3b8;

  --ok: #16a34a;
  --ok-soft: #ecfdf3;
  --warn: #b45309;
  --warn-soft: #fff7e6;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --info: #2563eb;
  --info-soft: #eff6ff;

  /* Restrained rounding: 12px is the ceiling (cards), 8px the working default
     (inputs, buttons, menus), 6px for badges and other small chips. */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  /* A 1px border does the separating; elevation only lifts things that float. */
  --shadow-xs: 0 1px 3px rgba(15, 35, 71, .04);
  --shadow-sm: 0 1px 2px rgba(15, 35, 71, .05);
  --shadow: 0 1px 3px rgba(15, 35, 71, .07);
  --shadow-lg: 0 1px 2px rgba(15, 35, 71, .06), 0 10px 28px -14px rgba(15, 35, 71, .32);

  --sidebar-w: 248px;
  --topbar-h: 68px;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, Consolas, "SF Mono", Menlo, monospace;
}

[data-theme="dark"] {
  --c-navy: #dbe6fb;
  --c-navy-dark: #eaf1fd;
  --c-primary: #60a5fa;
  --c-primary-dark: #93c5fd;
  --c-primary-soft: #16233d;
  --c-primary-ink: #93c5fd;
  --c-sage: #38bdf8;
  --c-sage-soft: #0c2436;
  --c-champagne: #33240f;
  --c-champagne-ink: #f0b26b;
  --c-accent: #fb923c;
  --c-accent-soft: #33240f;
  --c-violet: #a78bfa;
  --c-violet-soft: #221c3d;
  --c-pink: #f472b6;
  --c-pink-soft: #35182a;
  --c-indigo: #a5b4fc;
  --c-indigo-soft: #1d2242;
  --c-purple: #d8b4fe;
  --c-purple-soft: #2a1b3d;
  --c-rose: #fda4af;
  --c-rose-soft: #35181f;

  --bg: #0a1121;
  --surface: #111a2c;
  --surface-2: #172137;
  --chrome-bg: #0d1526;
  --chrome-hover: #18233a;
  --sidebar-bg: var(--chrome-bg);
  --topbar-bg: var(--chrome-bg);
  --line: #24304a;
  --line-2: #1b2439;

  --ink: #e6ecf8;
  --ink-2: #a4b1c9;
  --ink-3: #7d8ba6;
  --ink-4: #6b7896;

  --ok: #34d399;
  --ok-soft: #0d2921;
  --warn: #fbbf24;
  --warn-soft: #33240f;
  --danger: #f87171;
  --danger-soft: #341a1a;
  --info: #38bdf8;
  --info-soft: #0c2436;

  --shadow-xs: 0 1px 1px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .34);
  --shadow: 0 1px 3px rgba(0, 0, 0, .38);
  --shadow-lg: 0 10px 28px -14px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }

/* ---------- icons ---------- */
.ico { flex: none; vertical-align: -.14em; }
.btn .ico { width: 15px; height: 15px; }
.btn-sm .ico { width: 14px; height: 14px; }
.icon-btn .ico { width: 18px; height: 18px; }
.nav-link-item .ico { width: 18px; height: 18px; }
.stat-ico .ico { width: 20px; height: 20px; }
.list-ico .ico { width: 18px; height: 18px; }
.empty-x .ico { width: 30px; height: 30px; opacity: .3; margin-bottom: 14px; }
.dropdown-item .ico { width: 15px; height: 15px; }
.topbar-search > .ico { position: absolute; left: 12px; top: 13px; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.toolbar-search .ico { position: absolute; left: 13px; top: 12px; width: 14px; height: 14px; color: var(--ink-3); pointer-events: none; }
.alert .ico { width: 17px; height: 17px; margin-top: 1px; }
.legend-dot { color: var(--c-sage); }
.legend-box { color: var(--c-primary); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 600; margin: 0; letter-spacing: -.011em; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-dark); }
/* One keyboard-focus treatment for everything that does not define its own
   ring, so tabbing through a form never loses the caret. */
:where(a, button, [tabindex], summary):focus-visible {
  outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: var(--radius-xs);
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.serif { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
.muted { color: var(--ink-3) !important; }
.ink-2 { color: var(--ink-2) !important; }
.tiny { font-size: 11.5px; }
.fs-13 { font-size: 13px; }
.nowrap { white-space: nowrap; }

/* ---------- shell ---------- */
.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 1045;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-2);
  min-height: var(--topbar-h);
}

.brand-lockup { max-width: 100%; height: auto; display: block; }

.brand-lock { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; color: var(--ink); }
.brand-lock:hover { color: var(--ink); }
.brand-full { flex: 0 1 auto; min-width: 0; }
.brand-rail { display: none; flex: none; }

.sidebar-close {
  flex: none; width: 34px; height: 34px; display: none; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-xs);
  background: var(--surface); color: var(--ink-3); cursor: pointer;
}
.sidebar-close:hover { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary); }

.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 20px; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* A section is a header you can shut and the rows it owns. No rules between
   the rows themselves — the group label is separation enough. */
.nav-group + .nav-group { margin-top: 4px; }

.nav-group-label {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600; padding: 14px 8px 6px;
  transition: color .15s ease;
}
.nav-group-label:hover { color: var(--ink-2); }
.nav-group-label span { flex: 1 1 auto; min-width: 0; }
.nav-group-caret {
  width: 12px; height: 12px; flex: none; opacity: .7;
  transition: transform .18s ease;
}
.nav-group.is-shut .nav-group-caret { transform: rotate(-90deg); }
.sidebar-nav > .nav-group:first-child .nav-group-label { padding-top: 6px; }

/* 0fr → 1fr animates without hard-coding a height, so a section of any
   length opens at the same pace. */
.nav-group-items { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .18s ease; }
.nav-group.is-shut .nav-group-items { grid-template-rows: 0fr; }
.nav-group-inner { overflow: hidden; min-height: 0; }

.nav-link-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: 13.5px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.nav-ico { flex: none; display: grid; place-items: center; color: var(--ink-4); transition: color .15s ease; }
.nav-link-item:hover { background: var(--c-primary-soft); color: var(--ink); }
.nav-link-item:hover .nav-ico { color: var(--c-primary); }
.nav-link-item.active { background: var(--c-indigo-soft); color: var(--c-primary-ink); font-weight: 600; }
.nav-link-item.active .nav-ico { color: var(--c-primary); }
.nav-link-item.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--c-primary);
}
.nav-link-item:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.nav-link-item .nav-tag {
  margin-left: auto; font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
  background: var(--c-violet-soft); color: var(--c-violet);
  padding: 2px 6px; border-radius: var(--radius-xs); text-transform: uppercase;
}

.sidebar-foot {
  border-top: 1px solid var(--line-2); padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 7px 6px; }
.sidebar-user-copy { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.sidebar-user-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sidebar-user-sub { font-size: 11px; color: var(--ink-3); }
.sidebar-user-name, .sidebar-user-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-collapse {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--ink-3); font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.sidebar-collapse:hover { background: var(--chrome-hover); color: var(--ink-2); }
.sidebar-collapse .collapse-caret { width: 15px; height: 15px; flex: none; transition: transform .18s ease; }

/* collapsed rail */
.app-shell.nav-collapsed { --sidebar-w: 72px; }
.app-shell.nav-collapsed .nav-text { display: none; }
.app-shell.nav-collapsed .sidebar-brand { padding: 0 12px; justify-content: center; }
.app-shell.nav-collapsed .brand-lock { justify-content: center; flex: none; }
.app-shell.nav-collapsed .brand-rail { display: block; }
.app-shell.nav-collapsed .sidebar-nav { padding: 8px 10px 20px; }
.app-shell.nav-collapsed .nav-link-item { justify-content: center; padding: 10px 0; gap: 0; }
.app-shell.nav-collapsed .nav-link-item.active::before { display: none; }
.app-shell.nav-collapsed .sidebar-foot { padding: 10px 8px 12px; }
.app-shell.nav-collapsed .sidebar-user { justify-content: center; padding: 7px 0; }
.app-shell.nav-collapsed .sidebar-collapse { justify-content: center; padding: 9px 0; }
.app-shell.nav-collapsed .sidebar-collapse .collapse-caret { transform: rotate(180deg); }
/* A shut section would hide its icons with no label to explain why, so the
   rail always shows every row and the header becomes a divider. */
.app-shell.nav-collapsed .nav-group.is-shut .nav-group-items { grid-template-rows: 1fr; }
.app-shell.nav-collapsed .nav-group-label {
  display: block; height: 0; font-size: 0; padding: 0; overflow: hidden;
  margin: 10px 10px; border-top: 1px solid var(--line-2); pointer-events: none;
}
.app-shell.nav-collapsed .sidebar-nav > .nav-group:first-child .nav-group-label { margin-top: 2px; }

/* Names live in a tooltip once the rail is narrow — a title attribute is too
   slow to appear for something you are scanning. */
.app-shell.nav-collapsed .nav-link-item[data-label],
.app-shell.nav-collapsed .sidebar-collapse[data-label] { overflow: visible; }
.app-shell.nav-collapsed .nav-link-item[data-label]::after,
.app-shell.nav-collapsed .sidebar-collapse[data-label]::after {
  content: attr(data-label);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  padding: 6px 10px; border-radius: var(--radius-xs);
  background: var(--c-navy); color: #fff; font-size: 12px; font-weight: 500;
  white-space: nowrap; pointer-events: none; opacity: 0; z-index: 1060;
  box-shadow: var(--shadow-lg); transition: opacity .15s ease;
}
.app-shell.nav-collapsed .sidebar-collapse { position: relative; }
.app-shell.nav-collapsed .nav-link-item[data-label]:hover::after,
.app-shell.nav-collapsed .nav-link-item[data-label]:focus-visible::after,
.app-shell.nav-collapsed .sidebar-collapse[data-label]:hover::after { opacity: 1; }

/* ---------- topbar ---------- */
.app-main { margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 1030;
  min-height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 11px 22px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
}

.topbar-search { position: relative; flex: 0 1 420px; max-width: 440px; margin: 0 auto; }
.topbar-search input {
  width: 100%; height: 42px;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-sm); padding: 0 72px 0 36px;
  font-size: 13.5px; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.topbar-search input::placeholder { color: var(--ink-3); }
.topbar-search input:focus {
  outline: none;
  border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.topbar-search kbd {
  position: absolute; right: 7px; top: 10px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  background: var(--surface-2); color: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 3px 7px;
}

.search-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1050;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; max-height: 386px; overflow-y: auto;
}
.search-menu-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding: 8px 10px 6px;
}
.search-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: var(--radius-xs); color: var(--ink); text-decoration: none; font-size: 13.5px;
}
.search-menu-item .ico { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.search-menu-item .smi-name { font-weight: 500; }
.search-menu-item .smi-group { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.search-menu-item.is-active, .search-menu-item:hover {
  background: var(--c-primary-soft); color: var(--c-navy);
}
.search-menu-item.is-active .ico, .search-menu-item:hover .ico { color: var(--c-primary); }
.search-menu-empty { padding: 12px 10px; font-size: 12.5px; color: var(--ink-3); }

.icon-btn {
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-sm); color: var(--ink-2);
  display: grid; place-items: center; font-size: 16px;
  position: relative; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--chrome-hover); color: var(--ink); border-color: var(--ink-3); }
.icon-btn:focus-visible { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.icon-btn .dot {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--danger); color: #fff;
  border: 2px solid var(--surface);
  border-radius: 9px; font-size: 9.5px; font-weight: 700; line-height: 1;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}

/* The search claims the middle by taking the slack on both sides; the action
   cluster then simply sits at the end. */
.topbar-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.topbar-divider { width: 1px; height: 26px; background: var(--line); }

/* center scope switcher */
.scope-chip {
  display: flex; align-items: center; gap: 8px; flex: none;
  height: 40px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.scope-chip:hover { border-color: var(--ink-3); background: var(--chrome-hover); color: var(--ink); }
.scope-chip:focus-visible { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.scope-chip > .ico:first-child { width: 15px; height: 15px; color: var(--ink-3); }
.scope-chip-name { max-width: 152px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-chip-caret { width: 12px; height: 12px; color: var(--ink-3); }
.scope-menu { min-width: 258px; max-height: 348px; overflow-y: auto; }
.scope-menu .dropdown-item { gap: 9px; }
.dropdown-item.is-picked { background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: 600; }
.dropdown-item.is-picked .ico { color: var(--c-primary); }

.user-menu { min-width: 268px; }
.user-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
.user-menu-head b { font-size: 13.5px; color: var(--ink); }

.avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--c-primary-soft); color: var(--c-primary-ink);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.avatar-sm { width: 28px; height: 28px; font-size: 10.5px; border-radius: var(--radius-xs); }
.avatar-lg { width: 50px; height: 50px; font-size: 16px; border-radius: var(--radius); }
.avatar-grad { background: var(--c-primary); color: #fff; }
.avatar-soft { background: var(--c-primary-soft); color: var(--c-primary); }
.avatar-soft .ico { width: 14px; height: 14px; }

.user-chip {
  display: flex; align-items: center; gap: 9px; flex: none;
  padding: 3px 10px 3px 3px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: background .15s ease, border-color .15s ease;
}
.user-chip:hover { background: var(--chrome-hover); color: var(--ink); border-color: var(--ink-3); }
.user-chip .u-name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.user-chip .u-sub { font-size: 11px; color: var(--ink-3); line-height: 1.25; }
.user-chip .u-name, .user-chip .u-sub {
  max-width: 164px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.u-caret { width: 12px; height: 12px; color: var(--ink-3); }

.content { flex: 1 1 auto; padding: 24px 28px 40px; }

/* ---------- live (no-reload) regions ---------- */
[data-live] { transition: opacity .15s ease; }
[data-live].is-busy { opacity: .55; pointer-events: none; }
html.live-loading::before {
  content: ''; position: fixed; inset: 0 auto auto 0; z-index: 2000;
  height: 2px; width: 100%; transform-origin: 0 50%;
  background: var(--c-primary);
  animation: live-bar 1.1s ease-in-out infinite;
}
@keyframes live-bar {
  0% { transform: scaleX(0); opacity: 1; }
  60% { transform: scaleX(.85); opacity: 1; }
  100% { transform: scaleX(1); opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
  html.live-loading::before { animation: none; }
  [data-live] { transition: none; }
}

/* ---------- footer ---------- */
.app-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 26px; border-top: 1px solid var(--line);
  /* Same grey as the sidebar and topbar so the chrome closes the frame. */
  background: var(--chrome-bg); font-size: 12px; color: var(--ink-3);
}
.foot-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-2); }
.foot-brand img { display: block; opacity: .9; }
.foot-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 auto; }
.foot-links a { color: var(--ink-2); font-weight: 500; }
.foot-links a:hover { color: var(--c-primary); }
.foot-meta { display: flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
.foot-sep { opacity: .45; }

/* ---------- page header ---------- */
.page-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { font-family: var(--sans); font-size: 27px; font-weight: 700; color: var(--ink); line-height: 1.2; letter-spacing: -.026em; }
.page-head p { margin: 5px 0 0; color: var(--ink-3); font-size: 13.5px; }
.page-head .head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* The dashboard's only header control: one date, styled as a chip rather than
   a form field so it reads as a scope switch. */
.date-pick { position: relative; margin: 0; }
.date-pick .date-pick-ico {
  position: absolute; left: 13px; top: 0; bottom: 0; z-index: 2;
  display: grid; place-items: center; color: var(--ink-3); pointer-events: none;
}
.date-pick .date-pick-ico .ico { width: 15px; height: 15px; }
.date-pick .form-control {
  width: 186px; height: 40px; min-height: 40px;
  padding: 0 14px 0 36px; font-size: 13.5px; font-weight: 500; color: var(--ink);
  cursor: pointer;
}
/* The subtitle reads as one metadata line: date, then a divided qualifier. */
.head-sep { display: inline-block; width: 1px; height: 10px; margin: 0 9px; background: var(--line); vertical-align: -1px; }

/* ---------- cards ---------- */
.card-x {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  min-width: 0;
}
.card-x-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px 14px; border-bottom: 1px solid var(--line-2);
}
/* A rule only earns its keep above a table; padded bodies use space instead. */
.card-x:has(> .card-x-body) > .card-x-head { border-bottom: 0; padding-bottom: 4px; }
.card-x-head h2 { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: -.006em; }
.card-x-head .head-tools { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.card-x-body { padding: 16px 20px 20px; }

/* A plain count beside a card title — the queue length, not a status. */
.count-tag {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 99px; background: var(--c-primary-soft); color: var(--c-primary-ink);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* equal-height cards: let the body fill so trailing strips and footers sit at the bottom */
.card-x.h-100 { display: flex; flex-direction: column; }
.card-x.h-100 > .card-x-body { flex: 1 1 auto; display: flex; flex-direction: column; }
/* A chart paired with a taller neighbour centres in the slack rather than
   hugging the title and leaving a hole underneath. */
.card-x.h-100 > .card-x-body > [data-chart] { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.card-x-foot { padding: 11px 18px; border-top: 1px solid var(--line-2); border-radius: 0 0 var(--radius) var(--radius); }

/* ---------- stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
/* Icon and title, then the figure, then the qualifier — three bands at fixed
   positions so a row of cards reads across. */
.stat-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; min-width: 0; min-height: 128px;
}
.stat-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stat-ico {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--tone-soft, var(--surface-2)); color: var(--tone, var(--ink-3));
}
.stat-ico .ico { width: 16px; height: 16px; }
.stat-label {
  font-size: 12px; color: var(--ink-3); font-weight: 600; line-height: 1.35;
  min-width: 0; overflow-wrap: anywhere;
}
.stat-value {
  font-size: 26px; font-weight: 700; letter-spacing: -.028em; line-height: 1.15;
  margin-top: 14px; color: var(--ink); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat-meta {
  font-size: 12px; color: var(--ink-3); margin-top: auto; padding-top: 10px;
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap; min-height: 8px;
}
.delta-up, .delta-down { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.delta-up { color: var(--ok); }
.delta-down { color: var(--danger); }
.delta-ico { width: 12px; height: 12px; }
.delta-down .delta-ico { transform: scaleY(-1); }

/* ---------- tables ---------- */
.table-x-wrap { overflow-x: auto; }
/* Long lists scroll inside the card so the header stays with the data. Short
   ones do not opt in — a scrollbar on six rows is noise. */
.table-x-wrap.is-tall { max-height: 560px; overflow-y: auto; }
.table-x-wrap.is-tall thead th { position: sticky; top: 0; z-index: 2; }
.table-x { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.table-x th {
  text-align: left; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  padding: 10px 18px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table-x td { padding: 13px 18px; border-bottom: 1px solid var(--line-2); vertical-align: middle; color: var(--ink-2); }
.table-x tbody tr:last-child td { border-bottom: 0; }
.table-x tbody tr { transition: background .12s ease; }
.table-x tbody tr:hover { background: var(--surface-2); }
.table-x td b, .table-x td strong { color: var(--ink); font-weight: 600; }
/* Patient names are the entry point out of the table — they read as text
   until you reach for them. */
.table-x td a { color: var(--ink); }
.table-x td a:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.table-x .col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-x .col-wide { min-width: 172px; }
.table-x .col-act { text-align: right; white-space: nowrap; width: 1%; }

/* ---------- badges ---------- */
.badge-x {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  padding: 3px 8px; border-radius: var(--radius-xs); white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid transparent;
}
.badge-x.t-success { background: var(--ok-soft); color: var(--ok); }
.badge-x.t-warning { background: var(--warn-soft); color: var(--warn); }
.badge-x.t-danger { background: var(--danger-soft); color: var(--danger); }
.badge-x.t-info { background: var(--info-soft); color: var(--info); }
.badge-x.t-primary { background: var(--c-primary-soft); color: var(--c-primary-ink); }
.badge-x.t-secondary { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); }
.badge-x.t-accent { background: var(--c-champagne); color: var(--c-champagne-ink); }

.lvl-pill {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 6px;
  font-size: 10px; font-weight: 700; font-style: normal;
}
.lvl-full { background: var(--c-primary); color: #fff; }
.lvl-approve { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); }
.lvl-edit { background: var(--c-primary-soft); color: var(--c-primary-ink); border: 1px solid var(--c-primary); }
.lvl-view { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.lvl-none { color: var(--line); }

/* ---------- forms ---------- */
.form-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.form-label .req { color: var(--danger); }
.form-control, .form-select {
  border: 1px solid #d9dde7; background: var(--surface); color: var(--ink);
  border-radius: var(--radius-sm); font-size: 13.5px; padding: 10px 12px; min-height: 42px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { border-color: var(--line); }
.form-control:focus, .form-select:focus {
  border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft);
  background: var(--surface); color: var(--ink);
}
.form-control::placeholder { color: var(--ink-3); }
.form-control:disabled, .form-control[readonly] { background: var(--surface-2); color: var(--ink-2); }
textarea.form-control { min-height: 88px; }
.form-text { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }
.form-check-input { border-color: var(--line); }
.form-check-input:checked { background-color: var(--c-primary); border-color: var(--c-primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--c-primary-soft); border-color: var(--c-primary); }
.input-group-text { background: var(--surface-2); border-color: var(--line); color: var(--ink-3); font-size: 13px; border-radius: var(--radius-sm); }
.is-invalid ~ .invalid-feedback { display: block; }
.invalid-feedback { font-size: 11.5px; }

/* ---------- buttons ---------- */
.btn {
  border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500;
  padding: 9px 16px; min-height: 40px;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-sm { font-size: 12.5px; padding: 6px 11px; min-height: 32px; border-radius: var(--radius-sm); }
.btn:disabled, .btn.disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }
/* A button waiting on the server is working, not unavailable — it keeps its
   colour and swaps its glyph for a spinner. */
.btn.is-busy, .btn.is-busy:disabled { opacity: 1; cursor: wait; }
.btn.is-busy .ico { display: none; }
.btn.is-busy::before {
  content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: btn-spin .6s linear infinite;
}
.btn-light-x.is-busy::before, .btn-outline-primary.is-busy::before {
  border-color: var(--line); border-top-color: var(--c-primary);
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::before { animation-duration: 1.6s; } }
.btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: var(--shadow-xs); }
.btn-primary:hover, .btn-primary:focus { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff; }
.btn-outline-primary { border-color: var(--c-primary); color: var(--c-primary); background: transparent; }
.btn-outline-primary:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.btn-light-x { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.btn-light-x:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--surface); }
.btn-danger-x { background: var(--danger-soft); border: 1px solid transparent; color: var(--danger); }
.btn-danger-x:hover { background: var(--danger); color: #fff; }
.btn-check:focus + .btn, .btn:focus { box-shadow: 0 0 0 3px var(--c-primary-soft); }

/* ---------- toolbar / filters ---------- */
.history-section-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--c-navy);
  padding-bottom: 7px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
}
.history-section-head .ico { width: 15px; height: 15px; color: var(--c-primary); }
.history-group-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin: 10px 0 6px;
}
.history-tabs { gap: 4px; flex-wrap: wrap; }
.history-tabs .nav-link {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: var(--radius-xs);
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line);
}
.history-tabs .nav-link .ico { width: 14px; height: 14px; }
.history-tabs .nav-link.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.history-tabs .nav-link.active .ico { color: #fff; }

.pipeline { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.pipeline-stage {
  flex: 1 1 0; min-width: 122px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 16px 12px 14px;
}
.pipeline-step {
  position: absolute; top: 7px; left: 9px;
  font-size: 10px; font-weight: 700; color: var(--ink-3);
}
.pipeline-value { font-size: 23px; font-weight: 700; line-height: 1.1; color: var(--c-navy); }
.pipeline-label {
  margin-top: 5px; font-size: 10.5px; font-weight: 600; text-align: center;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2);
}
.pipeline-stage.is-empty { background: var(--surface); }
.pipeline-stage.is-empty .pipeline-value { color: var(--ink-3); }
.pipeline-arrow { flex: none; display: grid; place-items: center; color: var(--ink-3); opacity: .5; }
.pipeline-arrow .ico { width: 14px; height: 14px; }

.filter-bar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 16px;
}
.filter-bar .form-label { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 5px; }
.filter-bar .form-control, .filter-bar .form-select { min-height: 42px; font-size: 13.5px; }
.filter-bar .btn { min-height: 42px; font-weight: 500; }

/* Date scope: fields sized to their content, not stretched across the page. */
.scope-bar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.scope-field { flex: 0 1 176px; min-width: 148px; }
.scope-field .form-control { width: 100%; }
.scope-rule { flex: none; align-self: stretch; width: 1px; background: var(--line); margin: 0 2px; }
.scope-bar .btn { flex: none; }
.scope-note { flex: 1 1 auto; text-align: right; font-size: 11.5px; color: var(--ink-3); padding-bottom: 11px; min-width: 120px; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; }
.toolbar .form-control, .toolbar .form-select { min-height: 38px; font-size: 13px; padding: 8px 12px; }
.toolbar .form-select, .toolbar > .form-control { flex: 0 1 138px; width: auto; min-width: 0; }
.toolbar .btn { margin-left: auto; flex: none; }
.toolbar .btn + .btn { margin-left: 0; }
.toolbar-search { position: relative; flex: 1 1 200px; max-width: 300px; }
.toolbar-search .form-control { padding-left: 36px; background: var(--surface-2); }
.toolbar-search .form-control:focus { background: var(--surface); }

/* ---------- tabs ---------- */
.tabs-x { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs-x::-webkit-scrollbar { display: none; }
.tabs-x a {
  flex: none; padding: 12px 16px; font-size: 13.5px; color: var(--ink-3);
  border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500;
  transition: color .15s ease, border-color .15s ease;
}
.tabs-x a:hover { color: var(--ink); }
.tabs-x a.active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; }

/* ---------- steps ---------- */
.steps { display: flex; flex-direction: column; gap: 2px; position: relative; }
.step-item {
  display: flex; gap: 12px; align-items: center; padding: 11px 14px;
  border-radius: var(--radius-sm); color: var(--ink-3); font-size: 13px;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.step-item::before {
  content: ''; position: absolute; left: 26px; top: -2px; width: 1.5px; height: 13px;
  background: var(--line);
}
.step-item:first-child::before { display: none; }
.step-item .step-no {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--surface);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--ink-3);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  z-index: 1;
}
.step-item.done::before, .step-item.current::before { background: var(--ok); }

/* ---------- booking stepper ---------- */
.stepper {
  display: flex; align-items: center; list-style: none;
  margin: 0 0 20px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
  overflow-x: auto;
}
.stepper-step { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
/* The connector is drawn by the step, not between steps, so it never leaves a
   stray line hanging off the last one. */
.stepper-step + .stepper-step::before {
  content: ''; flex: 1 1 auto; height: 1px; min-width: 16px;
  background: var(--line); margin-right: 4px;
}
.stepper-step:last-child { flex: 0 0 auto; }
.stepper-dot {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface);
  font-size: 12px; font-weight: 700; color: var(--ink-4);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.stepper-label { font-size: 12.5px; font-weight: 500; color: var(--ink-4); white-space: nowrap; }
.stepper-step.is-current .stepper-dot { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.stepper-step.is-current .stepper-label { color: var(--ink); font-weight: 600; }
.stepper-step.is-done .stepper-dot { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.stepper-step.is-done .stepper-label { color: var(--ink-2); }

/* ---------- chained fields ----------
   A locked control is not broken, it is just not its turn yet — so it reads
   as inert rather than as an error. */
.form-control.is-locked, .form-select.is-locked {
  background: var(--surface-2); color: var(--ink-4);
  border-color: var(--line-2); cursor: not-allowed; opacity: 1;
}
.slot-grid.is-locked { opacity: .45; pointer-events: none; }

.picked-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line-2);
}
.picked-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- patient lookup ---------- */
.lookup-list { display: flex; flex-direction: column; margin-top: 8px; }
.lookup-list:empty { display: none; }
.lookup-item {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 11px 14px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font-size: 13.5px; cursor: pointer;
}
.lookup-item + .lookup-item { border-top: 0; }
.lookup-item:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.lookup-item:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.lookup-item:only-child { border-radius: var(--radius-sm); }
.lookup-item:hover { background: var(--c-primary-soft); border-color: var(--c-primary); }
.lookup-name { font-weight: 600; }
.lookup-meta { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.lookup-empty {
  padding: 12px 14px; font-size: 12.5px; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
}

/* ---------- booking summary ---------- */
.summary-card { position: sticky; top: calc(var(--topbar-h) + 16px); }
.summary-list { margin: 0; display: flex; flex-direction: column; }
.summary-list > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0;
}
.summary-list > div + div { border-top: 1px solid var(--line-2); }
.summary-list dt {
  display: flex; align-items: center; gap: 8px; flex: none;
  font-size: 12.5px; font-weight: 500; color: var(--ink-3);
}
.summary-list dt .ico { width: 14px; height: 14px; color: var(--ink-4); }
.summary-list dd {
  margin: 0; text-align: right; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere;
}
[data-chain-hint].is-ready { color: var(--ok) !important; font-weight: 600; }

/* ---------- slot picker ---------- */
/* A fixed track rather than a wrapping row: equal cells make the times read
   as a timetable instead of a ragged paragraph of buttons. */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
/* The placeholder and the "no roster" notice span the whole track instead of
   sitting in one cell like a stray button. */
.slot-grid > .slot-empty, .slot-grid > .tiny {
  grid-column: 1 / -1; padding: 12px 14px;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink-3); font-size: 12.5px;
}
.slot-chip {
  font-size: 12.5px; font-weight: 600; padding: 9px 10px; text-align: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.slot-chip:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-soft); }
.slot-chip.picked { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.slot-chip:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.step-item.done { color: var(--ink-2); }
.step-item.done .step-no { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.step-item.current { background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: 600; }
.step-item.current .step-no { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
a.step-item:hover { background: var(--surface-2); color: var(--ink-2); }
a.step-item.current:hover { background: var(--c-primary-soft); color: var(--c-primary-ink); }

.stage-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.stage-chip {
  font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 99px;
  background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line);
}
.stage-chip.done { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.stage-chip.current { background: var(--c-primary); color: #fff; border-color: transparent; }

/* ---------- chart ---------- */
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg .grid-line { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.chart-svg .axis-text { fill: var(--ink-4); font-size: 10.5px; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.chart-svg .series-line { fill: none; stroke: var(--c-primary); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .series-area { fill: var(--c-primary); opacity: .06; }
.chart-svg .series-area-path { fill: url(#trendFill); stroke: none; }
.chart-svg .fill-top { stop-color: var(--c-primary); stop-opacity: .2; }
.chart-svg .fill-bottom { stop-color: var(--c-primary); stop-opacity: 0; }
.chart-svg .series-dot { fill: var(--surface); stroke: var(--c-primary); stroke-width: 2; }
.chart-svg .series-dot.is-last { fill: var(--c-primary); stroke: var(--surface); stroke-width: 2.5; }
.chart-svg .series-callout {
  fill: var(--ink); font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chart-svg .hit { fill: transparent; cursor: pointer; }
.chart-svg .hit:hover + .series-dot { r: 5.5; }

.chart-tip {
  position: absolute; z-index: 5; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, -128%);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 8px 12px;
}
.chart-tip-value { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- funnel ---------- */
.funnel { margin: 2px 0 4px; }
.funnel-svg { width: 100%; height: auto; display: block; overflow: visible; }
.funnel-label { fill: var(--ink-2); font-family: var(--sans); font-size: 12.5px; }
.funnel-count {
  fill: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.funnel-pct { fill: var(--ink-4); font-family: var(--sans); font-size: 10px; font-variant-numeric: tabular-nums; }
.funnel-band { transition: opacity .15s ease; cursor: default; }
.funnel-band:hover { opacity: .82; }
.funnel-band.is-empty { opacity: .5; }
/* One hue walked from deep to pale: colour means "further down the journey",
   not "a different kind of thing". */
.funnel-band.f1 { fill: #4338ca; }
.funnel-band.f2 { fill: #4f46e5; }
.funnel-band.f3 { fill: #2563eb; }
.funnel-band.f4 { fill: #3b82f6; }
.funnel-band.f5 { fill: #60a5fa; }
.funnel-band.f6 { fill: #8ab4f8; }
.funnel-band.f7 { fill: #a9c8fa; }
.funnel-band.f8 { fill: #c6dafc; }

.meter { height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--c-primary); border-radius: 99px; }
.meter.t-danger > span { background: var(--danger); }
.meter.t-warning > span { background: var(--warn); }
.meter.t-success > span { background: var(--ok); }

/* ---------- appointment stage control ---------- */
.appt-list { display: flex; flex-direction: column; }
.appt-row { padding: 14px 20px; border-bottom: 1px solid var(--line-2); }
.appt-row:last-child { border-bottom: 0; }
.appt-row:hover { background: var(--surface-2); }
.appt-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.appt-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.appt-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.appt-name:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.appt-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: none; }
.appt-meta { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* ---------- lists ---------- */
.list-x { display: flex; flex-direction: column; }
.list-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--line-2);
  transition: background .12s ease;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--surface-2); }
.list-ico {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink-2);
  display: grid; place-items: center; font-size: 16px;
}
.list-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.list-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.kv-item { min-width: 0; }
.kv-item dt { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 3px; }
.kv-item dd { margin: 0; font-size: 13.5px; color: var(--ink); word-break: break-word; }

.empty-x { text-align: center; padding: 56px 24px; color: var(--ink-3); }

.note-x {
  border: 1px solid var(--line); border-left: 3px solid var(--c-primary);
  background: var(--c-primary-soft);
  padding: 10px 14px; border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
}
.note-x.t-warning { border-color: #f3ddb8; border-left-color: var(--warn); background: var(--warn-soft); }
.note-x.t-danger { border-color: #f5cfcf; border-left-color: var(--danger); background: var(--danger-soft); }
.note-x.t-accent { border-color: #f3ddb8; border-left-color: var(--c-champagne-ink); background: var(--c-champagne); }
.note-x .ico { flex: none; color: var(--warn); }
.note-dismiss {
  flex: none; margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 3px 6px; border-radius: var(--radius-xs);
}
.note-dismiss:hover { background: rgba(23, 29, 74, .07); color: var(--ink-2); }
[data-theme="dark"] .note-x.t-warning, [data-theme="dark"] .note-x.t-danger,
[data-theme="dark"] .note-x.t-accent { border-color: var(--line); }

/* The only violet in the product. It marks machine-generated suggestions so
   staff can tell them apart from recorded clinical fact at a glance. */
.ai-card { border-left: 3px solid var(--c-violet); }
.ai-ico { background: var(--c-violet-soft) !important; color: var(--c-violet) !important; opacity: 1 !important; }
.badge-ai {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
  padding: 3px 8px; border-radius: var(--radius-xs); white-space: nowrap;
  background: var(--c-violet-soft); color: var(--c-violet);
}
.badge-ai .ico { width: 12px; height: 12px; }

/* ---------- calendar ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); text-align: center; font-weight: 700; padding: 8px 0; }
.cal-cell {
  aspect-ratio: 1; display: grid; place-items: center; position: relative;
  border-radius: var(--radius-xs); font-size: 12.5px; color: var(--ink-2); border: 1px solid transparent;
  transition: background .12s ease, color .12s ease;
}
.cal-cell:hover { background: var(--surface-2); color: var(--ink); }
.cal-cell.other { color: var(--line); }
.cal-cell.today { border-color: var(--c-primary); font-weight: 700; color: var(--c-primary); }
.cal-cell.selected { background: var(--c-primary); color: #fff; font-weight: 700; }
.cal-cell.selected:hover { background: var(--c-primary-dark); color: #fff; }
.cal-cell .cal-dot { position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--c-sage); }
.cal-cell.selected .cal-dot { background: #fff; }

/* ---------- misc ---------- */
.pagination { --bs-pagination-color: var(--ink-2); --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--line); --bs-pagination-hover-color: var(--c-primary); --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-hover-border-color: var(--line); --bs-pagination-active-bg: var(--c-primary); --bs-pagination-active-border-color: var(--c-primary); --bs-pagination-focus-box-shadow: 0 0 0 3px var(--c-primary-soft); --bs-pagination-disabled-bg: var(--surface); --bs-pagination-disabled-border-color: var(--line); --bs-pagination-font-size: 13px; --bs-pagination-border-radius: var(--radius-xs); }
.dropdown-menu { border-color: var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); background: var(--surface); padding: 6px; font-size: 13.5px; }
.dropdown-item { border-radius: var(--radius-xs); padding: 9px 12px; color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--ink); }
.dropdown-item.text-danger:hover { background: var(--danger-soft); color: var(--danger); }
.dropdown-header { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; padding: 8px 12px 4px; }
.dropdown-divider { border-color: var(--line-2); }
.modal-content { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--line-2); padding: 18px 22px; }
.modal-body { padding: 22px; }
.modal-title { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -.011em; }
.offcanvas { background: var(--surface); color: var(--ink); }
.alert { border-radius: var(--radius-sm); border: 0; font-size: 13.5px; padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start; }
.alert-success { background: var(--ok-soft); color: var(--ok); }
.alert-danger { background: var(--danger-soft); color: var(--danger); }
.alert-warning { background: var(--warn-soft); color: var(--warn); }
.alert-info { background: var(--info-soft); color: var(--info); }
.progress { background: var(--line-2); height: 6px; border-radius: 99px; }
.progress-bar { background: var(--c-primary); }
hr { border-color: var(--line); opacity: 1; }
.tooltip-inner { background: var(--ink); font-size: 12px; border-radius: var(--radius-xs); }
.list-group-item { border-color: var(--line); background: var(--surface); color: var(--ink-2); font-size: 13px; padding: 10px 13px; }
.list-group-item-action:hover { background: var(--surface-2); color: var(--ink); }

/* ---------- date picker ---------- */
.flatpickr-calendar {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); background: var(--surface);
  font-family: var(--sans); font-size: 13px; padding: 4px;
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months { padding: 6px 4px 2px; }
.flatpickr-months .flatpickr-month { color: var(--c-navy); height: 36px; }
.flatpickr-current-month { font-size: 13.5px; font-weight: 600; padding: 6px 0 0; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 600; border-radius: var(--radius-xs); }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--surface-2); }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { fill: var(--ink-2); padding: 8px 10px; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--c-primary); }
.flatpickr-weekday { color: var(--ink-3); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.flatpickr-day {
  color: var(--ink-2); border-radius: var(--radius-xs); border: 0;
  height: 36px; line-height: 36px; max-width: 38px;
}
.flatpickr-day:hover { background: var(--surface-2); color: var(--c-navy); }
.flatpickr-day.today { border: 1px solid var(--c-primary); color: var(--c-primary); font-weight: 600; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--ink-3); opacity: .45; }
.flatpickr-time input { color: var(--ink); font-size: 13.5px; }
.flatpickr-time input:hover, .flatpickr-time input:focus { background: var(--surface-2); }
.flatpickr-time .flatpickr-am-pm { color: var(--ink-2); font-weight: 600; }
.flatpickr-time .flatpickr-am-pm:hover { background: var(--surface-2); }
.numInputWrapper span:hover { background: var(--surface-2); }
input.form-control.flatpickr-input, input.form-control.input { background: var(--surface); }
.toolbar input.form-control[readonly] { background: var(--surface-2); }

/* ---------- auth ----------
   Everything here is sized against a height budget: the whole screen has to
   land inside a 700px viewport, which is what a 1366×768 laptop leaves after
   browser chrome. A login page that scrolls is a login page that looks
   broken, so the type scale gives way before the layout does. */
.auth-wrap { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-side {
  position: relative; overflow: hidden;
  /* An aurora rather than a wash: four lights of different hue drifting across
     the navy. One gradient reads as a flat panel with a highlight; four read
     as depth. */
  background:
    radial-gradient(520px 380px at 76% 10%, rgba(56, 189, 248, .20), transparent 62%),
    radial-gradient(780px 440px at 10% 2%, rgba(37, 99, 235, .44), transparent 62%),
    radial-gradient(660px 500px at 90% 98%, rgba(124, 92, 255, .28), transparent 64%),
    radial-gradient(540px 420px at 22% 90%, rgba(13, 148, 136, .16), transparent 64%),
    linear-gradient(158deg, #14315e 0%, #0f1f3d 48%, #0a1730 100%);
  padding: 40px 52px 34px; display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
}
/* A vignette pulls the corners down so the aurora sits inside the panel
   instead of running off its edges. */
.auth-side::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(5, 12, 28, .55) 100%);
}
.auth-side::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(660px 520px at 20% 24%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(660px 520px at 20% 24%, #000, transparent 72%);
}
.auth-side > * { position: relative; z-index: 1; }
.auth-brand {
  display: inline-flex; align-self: flex-start; background: #fff;
  padding: 9px 14px; border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 12px 30px -12px rgba(3, 10, 26, .7);
}
.auth-pitch { display: flex; flex-direction: column; }
/* A short rule ahead of the eyebrow — the cheapest way to make a label read
   as typography rather than a stray line of text. */
.auth-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(147, 180, 245, .92); margin-bottom: 12px;
}
.auth-eyebrow::before {
  content: ''; width: 22px; height: 1px; flex: none;
  background: linear-gradient(90deg, rgba(147, 180, 245, .8), rgba(147, 180, 245, .1));
}
/* One line, always. The size is tied to the panel's own width rather than a
   fixed value, so the title fills the column at 1920 and still fits at 1024
   without ever breaking across rows. */
.auth-side h2 {
  color: #fff; font-family: var(--sans); font-weight: 700;
  font-size: clamp(22px, calc(3.55vw - 7px), 60px); line-height: 1.14; letter-spacing: -.03em;
  white-space: nowrap;
  /* A touch of light across the words — flat white on navy is the plainest
     thing a hero heading can be. */
  background: linear-gradient(96deg, #ffffff 0%, #ffffff 46%, #cfe0ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.auth-side p { color: rgba(233, 242, 251, .72); font-size: 14px; line-height: 1.6; max-width: 44ch; margin: 12px 0 0; }

/* Hairline-separated rows read as a spec sheet rather than a bullet list —
   and they cost less height than gaps between free-floating blocks. */
/* Capped to the text column: a rule that runs the full width of the panel
   reads as a page divider, not as separation between two rows. */
.auth-points { list-style: none; margin: 24px 0 0; padding: 0; max-width: 440px; display: flex; flex-direction: column; }
.auth-points li { display: flex; align-items: center; gap: 13px; padding: 13px 0; }
.auth-points li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
.auth-point-ico {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 9px; color: #cbdcfc;
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .09) inset, 0 0 0 1px rgba(255, 255, 255, .1);
}
.auth-point-ico .ico { width: 16px; height: 16px; }
.auth-point-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.auth-point-copy b { color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; }
.auth-point-copy span { color: rgba(233, 242, 251, .58); font-size: 12px; line-height: 1.5; }

.auth-note {
  display: flex; align-items: center; gap: 9px; max-width: 440px;
  font-size: 12px; color: rgba(233, 242, 251, .52);
  padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12);
}
.auth-note .ico { width: 14px; height: 14px; flex: none; }

/* The card centres in the column and the two supporting lines take the rest,
   so a compact form never floats alone in a large empty panel. */
/* Two colour washes off opposite corners so the ground has direction rather
   than sitting as one flat grey behind the card. */
.auth-form {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  padding: 32px 24px 20px;
  background:
    radial-gradient(880px 620px at 88% -6%, rgba(99, 102, 241, .13), transparent 58%),
    radial-gradient(760px 560px at 4% 104%, rgba(37, 99, 235, .10), transparent 60%),
    var(--bg);
}
/* A dot field, masked away from the middle: it gives the panel texture at the
   edges while leaving clean ground directly under the card. */
.auth-form::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(15, 35, 71, .09) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(660px 520px at 50% 50%, transparent 24%, #000 82%);
  -webkit-mask-image: radial-gradient(660px 520px at 50% 50%, transparent 24%, #000 82%);
}
.auth-panel { position: relative; z-index: 1; width: 100%; max-width: 560px; margin: auto 0; }
.auth-card {
  position: relative; width: 100%;
  /* Not flat white: a faint cool wash toward the foot gives the panel a
     direction of light instead of reading as a plain rectangle. */
  background: linear-gradient(176deg, #ffffff 0%, #fdfeff 58%, #f6f9ff 100%);
  border: 1px solid var(--line); border-radius: 18px; padding: 46px 50px 30px;
  box-shadow:
    0 1px 2px rgba(15, 31, 61, .04),
    0 10px 22px -12px rgba(15, 31, 61, .18),
    0 40px 70px -38px rgba(15, 31, 61, .55);
}
/* A hairline of light along the top edge. It is what separates a panel that
   sits on the page from one that is merely drawn on it. */
.auth-card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .5), transparent);
}
.auth-brand-inline { align-self: auto; margin-bottom: 22px; box-shadow: none; padding: 0; background: none; }

.auth-card-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 30px; }
.auth-card-mark {
  width: 50px; height: 50px; flex: none; display: grid; place-items: center;
  border-radius: 14px; color: var(--c-primary);
  background: linear-gradient(155deg, #eef4ff, #dfeaff);
  box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(37, 99, 235, .12);
}
.auth-card-mark .ico { width: 22px; height: 22px; }
.auth-title { font-size: 28px; font-family: var(--sans); font-weight: 700; letter-spacing: -.026em; color: var(--ink); margin-bottom: 4px; }
.auth-sub { font-size: 14px; color: var(--ink-3); margin: 0; }

.auth-card .form-label { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; margin-bottom: 8px; }
.auth-card .mb-3 { margin-bottom: 20px !important; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.label-hint { font-size: 11.5px; font-weight: 500; color: var(--ink-4); cursor: help; }

.auth-submit {
  margin-top: 26px; padding: 15px 18px; font-size: 15.5px; font-weight: 600; min-height: 56px;
  box-shadow: 0 1px 2px rgba(15, 31, 61, .1), 0 10px 22px -10px rgba(37, 99, 235, .7);
}
.auth-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line-2);
  font-size: 12px; color: var(--ink-4);
}
.auth-card-foot span { display: inline-flex; align-items: center; gap: 6px; }
.auth-card-foot .ico { width: 13px; height: 13px; }

/* Inline rather than flex: when this wraps to two lines on a phone, a flex
   icon centres against the whole block and drifts away from its sentence. */
.auth-help { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); text-align: center; }
.auth-help .ico { width: 15px; height: 15px; margin-right: 7px; color: var(--ink-4); }
.auth-legal { position: relative; z-index: 1; font-size: 11.5px; color: var(--ink-4); text-align: center; }

/* The page settles in rather than snapping on. Staggered by a few frames so
   the eye lands on the brand, then the pitch, then the form. */
@keyframes auth-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.auth-brand, .auth-pitch, .auth-note, .auth-panel {
  animation: auth-rise .55s cubic-bezier(.22, .61, .36, 1) both;
}
.auth-pitch { animation-delay: .07s; }
.auth-panel { animation-delay: .1s; }
.auth-note { animation-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  .auth-brand, .auth-pitch, .auth-note, .auth-panel { animation: none; }
}

/* Short windows: give up type size and padding in that order, so the layout
   never has to give up fitting. */
@media (min-width: 992px) and (max-height: 760px) {
  .auth-side { padding: 28px 44px 24px; gap: 18px; }
  /* Still fluid, just a shorter curve — a fixed size here left the title tiny
     on a wide-but-short window. */
  .auth-side h2 { font-size: clamp(20px, calc(2.7vw - 4px), 42px); }
  .auth-side p { font-size: 13px; margin-top: 10px; }
  .auth-points { margin-top: 16px; }
  .auth-points li { padding: 9px 0; gap: 11px; }
  .auth-point-ico { width: 30px; height: 30px; border-radius: 8px; }
  .auth-point-ico .ico { width: 14px; height: 14px; }
  .auth-point-copy b { font-size: 12.5px; }
  .auth-point-copy span { font-size: 11.5px; }
  .auth-note { padding-top: 12px; }
  .auth-form { padding: 20px 24px 16px; gap: 14px; }
  .auth-card { padding: 28px 34px 20px; }
  .auth-card-head { margin-bottom: 20px; }
  .auth-card-mark { width: 38px; height: 38px; }
  .auth-title { font-size: 22px; }
  .auth-card .mb-3 { margin-bottom: 13px !important; }
  .field-x .form-control { min-height: 46px; padding-top: 11px; padding-bottom: 11px; }
  .auth-submit { margin-top: 16px; min-height: 46px; }
  .auth-card-foot { margin-top: 16px; padding-top: 12px; }
  .auth-help { margin-top: 12px; }
}

/* ---------- field with leading icon / trailing button ---------- */
.field-x { position: relative; display: flex; align-items: center; }
.field-x .form-control {
  width: 100%; padding: 16px 18px 16px 48px; font-size: 15.5px; min-height: 58px;
  background: var(--surface-2);
  /* A hair of inset shadow so the field reads as a well to type into rather
     than an outlined rectangle. */
  box-shadow: 0 1px 2px rgba(15, 31, 61, .04) inset;
}
.field-x .form-control:focus { background: var(--surface); box-shadow: 0 0 0 4px var(--c-primary-soft); }
.field-x .form-control.has-trail { padding-right: 52px; }
/* Chrome paints its own yellow over an autofilled field, which reads as a
   broken input. An inset shadow the size of the box is the only way to hold
   our own ground colour. */
.field-x .form-control:-webkit-autofill,
.field-x .form-control:-webkit-autofill:hover,
.field-x .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--surface-2) inset;
  caret-color: var(--ink);
  transition: background-color 600000s 0s;
}
.field-x .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--surface) inset, 0 0 0 4px var(--c-primary-soft);
}
.field-ico {
  position: absolute; left: 17px; width: 18px; height: 18px;
  color: var(--ink-4); pointer-events: none; z-index: 2;
  transition: color .15s ease;
}
.field-x:focus-within .field-ico { color: var(--c-primary); }
.field-trail {
  position: absolute; right: 8px; width: 38px; height: 38px;
  display: grid; place-items: center; z-index: 2;
  border: 0; border-radius: var(--radius-xs); background: none;
  color: var(--ink-4); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.field-trail:hover { background: var(--surface-2); color: var(--ink-2); }
.field-trail .ico { width: 16px; height: 16px; }

.caps-hint {
  display: flex; align-items: center; gap: 6px; margin: 8px 0 0;
  font-size: 11.5px; font-weight: 600; color: var(--warn);
}
.caps-hint .ico { width: 13px; height: 13px; }

/* ---------- tone tokens ----------
   Declaration-only: these set variables the command-centre components read.
   Existing .badge-x / .meter / .note-x tone rules are untouched. */
.t-primary { --tone: var(--c-primary); --tone-soft: var(--c-primary-soft); }
.t-info { --tone: var(--info); --tone-soft: var(--info-soft); }
.t-success { --tone: var(--ok); --tone-soft: var(--ok-soft); }
.t-warning { --tone: var(--warn); --tone-soft: var(--warn-soft); }
.t-danger { --tone: var(--danger); --tone-soft: var(--danger-soft); }
.t-accent { --tone: var(--c-accent); --tone-soft: var(--c-accent-soft); }
.t-secondary { --tone: var(--ink-3); --tone-soft: var(--surface-2); }
.t-violet { --tone: var(--c-violet); --tone-soft: var(--c-violet-soft); }
.t-cyan { --tone: var(--c-sage); --tone-soft: var(--c-sage-soft); }
.t-pink { --tone: var(--c-pink); --tone-soft: var(--c-pink-soft); }
.t-indigo { --tone: var(--c-indigo); --tone-soft: var(--c-indigo-soft); }
.t-purple { --tone: var(--c-purple); --tone-soft: var(--c-purple-soft); }
.t-rose { --tone: var(--c-rose); --tone-soft: var(--c-rose-soft); }

.stat-grid.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.stat-grid.grid-6 .stat-value { font-size: 24px; }
.badge-x .dot-x { display: none; }
.t-ok { color: var(--ok); }
.t-ivf { color: var(--c-primary); }

/* ---------- IVF cycle journey footer ---------- */
.cycle-foot {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2);
}
.cycle-foot b { font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- compact tables ---------- */
.table-x.table-tight th { padding: 9px 14px; }
.table-x.table-tight td { padding: 12px 14px; }

/* The schedule sits in a narrow column, so its widths are declared rather
   than left to the browser: time and status are fixed, names take the slack. */
.table-schedule { min-width: 540px; }
.table-schedule .col-time { width: 78px; }
.table-schedule .col-status { width: 96px; }
.table-schedule td:first-child { color: var(--ink-2); font-weight: 500; }
.table-schedule tbody td { height: 44px; }
/* One line per field: a wrapped name turns a scannable list into a paragraph. */
.table-schedule tbody td:nth-child(2), .table-schedule tbody td:nth-child(3) { white-space: nowrap; }
.table-schedule tbody td:nth-child(4) { max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
.wait-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-2); white-space: nowrap;
}
.wait-chip .ico { width: 13px; height: 13px; color: var(--ink-3); }
.wait-chip.is-late { color: var(--danger); font-weight: 600; }
.wait-chip.is-late .ico { color: var(--danger); }

/* ---------- doctor load list ---------- */
.doc-list { display: flex; flex-direction: column; }
.doc-head, .doc-row {
  display: grid; grid-template-columns: 1fr 44px 44px 48px;
  align-items: center; gap: 6px; padding: 11px 20px;
}
.doc-head {
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.doc-head span:not(:first-child) { text-align: right; }
.doc-row { border-bottom: 1px solid var(--line-2); color: var(--ink); transition: background .15s ease; }
.doc-row:last-child { border-bottom: 0; }
.doc-row:hover { background: var(--surface-2); color: var(--ink); }
.doc-row > b { text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.doc-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.doc-name { display: block; font-size: 12.8px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-center { display: block; font-size: 10.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-bar { display: block; height: 4px; max-width: 150px; margin-top: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.doc-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--c-primary); }

/* ---------- center performance list ---------- */
.ctr-list { display: flex; flex-direction: column; }
.ctr-head, .ctr-row {
  display: grid; grid-template-columns: 1fr 76px 56px 84px;
  align-items: center; gap: 10px; padding: 11px 20px;
}
.ctr-head {
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.ctr-head span:not(:first-child) { text-align: right; }
.ctr-row { border-bottom: 1px solid var(--line-2); color: var(--ink); }
.ctr-row:last-child { border-bottom: 0; }
.ctr-row > b { text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ctr-row > .badge-x { justify-self: end; }
.ctr-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ctr-name { font-size: 12.8px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctr-sub { font-size: 10.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctr-bar { display: block; height: 4px; max-width: 150px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.ctr-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--c-primary); }

.card-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--c-primary);
}
.card-link:hover { color: var(--c-primary-dark); }
.card-link .ico { width: 13px; height: 13px; }
.table-x tfoot .row-total td { background: var(--surface-2); border-top: 1px solid var(--line); color: var(--ink); }

/* ---------- finance snapshot ---------- */
/* Four figures on one white ground. A dot carries the tone so the card does
   not turn into four coloured panels. */
/* Four tiles on an even 2×2. The rows are sized 1fr rather than left to the
   content, so beside a taller neighbour the tiles grow together instead of
   opening a hole down the middle of the card. */
.mini-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr; gap: 12px; flex: 1 1 auto;
}
.mini-stat {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-width: 0; padding: 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line-2);
}
.mini-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
}
/* The tone lands on the glyph alone — four tinted panels would turn a
   summary into a set of alerts. */
.mini-label .ico { width: 14px; height: 14px; flex: none; color: var(--tone, var(--c-primary)); }
.mini-value { font-size: 20px; font-weight: 700; letter-spacing: -.024em; color: var(--ink); font-variant-numeric: tabular-nums; }
.mini-foot { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.mini-foot b { font-size: 11.5px; }
.chart-strip { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.chart-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.chart-svg .series-bar { fill: var(--c-primary); opacity: .16; }
.chart-svg .series-line.thin { stroke-width: 1.6; }

/* ---------- approval queue ---------- */
.aq-list { display: flex; flex-direction: column; }
.aq-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--line-2);
  color: var(--ink); transition: background .15s ease;
}
.aq-row:last-child { border-bottom: 0; }
.aq-row:hover { background: var(--surface-2); color: var(--ink); }
.aq-ico {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--tone-soft, var(--surface-2)); color: var(--tone, var(--ink-3));
}
.aq-ico .ico { width: 16px; height: 16px; }
.aq-copy { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.aq-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aq-sub { font-size: 11.5px; color: var(--ink-3); }
.aq-amount {
  flex: none; font-size: 13px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.aq-caret { width: 14px; height: 14px; flex: none; color: var(--ink-4); }
.aq-row:hover .aq-caret { color: var(--c-primary); }

/* ---------- charts: donut, gauge, bars ---------- */
.chart-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.chart-key i { width: 12px; height: 4px; border-radius: 2px; background: var(--c-primary); opacity: .3; }
.chart-key i.k-line { height: 2px; opacity: 1; }

.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
/* Paired with an equal-height sibling the chart centres in the slack instead
   of hugging the title. */
.card-x.h-100 > .card-x-body > .donut-wrap { flex: 1 1 auto; }
.donut { position: relative; flex: none; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-track { fill: none; stroke: var(--line-2); stroke-width: 14; }
.donut-seg { fill: none; stroke-width: 14; stroke-linecap: butt; transition: opacity .15s ease; }
.donut-seg:hover { opacity: .8; }
.donut-hub {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; pointer-events: none;
}
.donut-hub b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.donut-hub span { font-size: 10.5px; color: var(--ink-3); }

.donut-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 168px; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.donut-legend li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0; }
.donut-legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.donut-legend .dl-name { flex: 1 1 auto; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend .dl-value { font-weight: 600; color: var(--ink); white-space: nowrap; }
.donut-legend .dl-pct { width: 38px; text-align: right; color: var(--ink-3); font-size: 11.5px; }

/* Sequential ramp of the primary hue: rank stays readable and colour means
   "more". One hue, six steps — a categorical rainbow would imply the
   segments are unrelated, which they are not. */
.s1 { stroke: #1d4ed8; background: #1d4ed8; }
.s2 { stroke: #2563eb; background: #2563eb; }
.s3 { stroke: #5b8def; background: #5b8def; }
.s4 { stroke: #93b4f5; background: #93b4f5; }
.s5 { stroke: #c2d6fa; background: #c2d6fa; }
.s6 { stroke: #e8f0ff; background: #e8f0ff; }

.gauge { position: relative; width: 176px; height: 176px; margin: 4px auto 0; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: var(--surface-2); stroke-width: 13; }
.gauge-fill { fill: none; stroke: var(--tone, var(--c-primary)); stroke-width: 13; stroke-linecap: round; }
.gauge-hub {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.gauge-hub b { font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; }
.gauge-hub span { font-size: 11.5px; color: var(--ink-3); }
.gauge-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-2);
}
.gauge-stats b { display: block; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.gauge-stats span { display: block; font-size: 10.5px; color: var(--ink-3); }

.hbars { display: flex; flex-direction: column; gap: 14px; }
.hbar { display: flex; align-items: center; gap: 10px; }
.hbar-label { flex: 0 0 92px; font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { flex: 1 1 auto; height: 8px; border-radius: 3px; background: var(--line-2); overflow: hidden; min-width: 30px; }
.hbar-track > i { display: block; height: 100%; border-radius: 3px; }
.hbar-value { flex: none; font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ---------- responsive ---------- */
/* Six across is the desktop reading; below that the row folds to two ranks of
   three rather than shrinking the figures. */
@media (max-width: 1399.98px) {
  .stat-grid.grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1199.98px) {
  .page-head h1 { font-size: 24px; }
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 12px; }
  .content { padding: 24px 20px 44px; }
  .app-foot { padding: 14px 20px; }
  .topbar-search { flex-basis: 260px; }
}

@media (max-width: 991.98px) {
  .app-shell.nav-collapsed { --sidebar-w: 240px; }
  .app-shell.nav-collapsed .nav-text { display: revert; }
  .app-shell.nav-collapsed .nav-group-label { height: auto; font-size: 10.5px; padding: 16px 10px 6px; margin: 0; border-top: 0; }
  .app-shell.nav-collapsed .nav-link-item { justify-content: flex-start; padding: 7px 10px; gap: 10px; }
  .app-shell.nav-collapsed .nav-link-item.active::before { display: block; }
  .app-shell.nav-collapsed .sidebar-user { justify-content: flex-start; padding: 6px 4px 6px 6px; }
  .sidebar { transform: translateX(-100%); transition: transform .24s ease; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display: grid; }
  .app-main { margin-left: 0; }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(17, 22, 52, .48); backdrop-filter: blur(2px); z-index: 1040; }
  .topbar { padding: 10px 16px; gap: 8px; }
  .topbar-search kbd { display: none; }
  .content { padding: 20px 16px 36px; }
  .app-foot { padding: 14px 16px; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  /* With the navy panel gone the card sits under a header band instead of
     being centred in the viewport, so the vertical auto margins come off. */
  .auth-form { justify-content: flex-start; padding-top: 112px; gap: 20px; }
  .auth-form::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 196px;
    background:
      radial-gradient(520px 240px at 50% 0, rgba(37, 99, 235, .38), transparent 64%),
      linear-gradient(160deg, #14315e, #0f1f3d);
  }
  .auth-form::after { display: none; }
  .auth-panel { margin: 0 auto; }
  .auth-card { position: relative; box-shadow: 0 26px 54px -26px rgba(20, 22, 60, .5); }
  .auth-legal { margin-top: auto; }
}

@media (max-width: 767.98px) {
  /* The funnel scales with the card, so its type has to be re-stated in
     viewBox units or it lands below reading size on a phone. */
  .funnel-label { font-size: 18px; }
  .funnel-count { font-size: 18px; }
  .funnel-pct { font-size: 13px; }
  .topbar { flex-wrap: wrap; }
  .topbar-search { flex-basis: 100%; order: 5; max-width: none; margin: 0; }
  .app-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .foot-links { margin: 0; gap: 14px; }
  .foot-meta { margin-left: 0; flex-wrap: wrap; white-space: normal; }
  .pipeline-stage { min-width: 104px; padding: 14px 8px 12px; }
  .pipeline-value { font-size: 20px; }
  .toolbar .form-select, .toolbar > .form-control { flex: 1 1 calc(50% - 4px); }
}

@media (max-width: 575.98px) {
  .toolbar > * { flex: 1 1 100% !important; max-width: none; }
  .toolbar .btn { margin-left: 0; width: 100%; }
  .stat-grid.grid-6 { grid-template-columns: 1fr 1fr; }
  .cycle-foot { grid-template-columns: 1fr; gap: 8px; }
  .mini-grid { grid-template-columns: 1fr; }
  .doc-head, .doc-row { padding-left: 16px; padding-right: 16px; }
  .ctr-head, .ctr-row { padding-left: 16px; padding-right: 16px; }
  .aq-row { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 575.98px) {
  .page-head h1 { font-size: 21px; }
  .page-head .head-actions { margin-left: 0; width: 100%; }
  .page-head .head-actions > * { flex: 1 1 auto; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 12px 14px; gap: 8px; }
  .stat-value { font-size: 20px; }
  .card-x-head { padding: 14px 16px; }
  .card-x-body { padding: 16px; }
  .card-x-foot { padding: 12px 16px; }
  .table-x th, .table-x td { padding: 12px 16px; }
  .user-chip .u-name, .user-chip .u-sub { display: none; }
  .user-chip { padding: 3px; }
  .u-caret { display: none; }
  .modal-header, .modal-footer, .modal-body { padding: 16px; }
  .auth-form { padding: 108px 16px 24px; }
  .auth-card { padding: 30px 22px 22px; }
  .auth-card-head { gap: 12px; margin-bottom: 22px; }
  .auth-title { font-size: 22px; }
}

@media print {
  .sidebar, .topbar, .app-foot, .no-print, .pagination { display: none !important; }
  .app-main { margin-left: 0; }
  .content { padding: 0; }
  .card-x { break-inside: avoid; box-shadow: none; }
  body { background: #fff; }
}

.copilot-answer { display: flex; gap: 11px; align-items: flex-start; padding: 12px 0; }
.copilot-answer + .copilot-answer { border-top: 1px solid var(--line-2); }
.copilot-mark {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 9px; background: var(--c-primary-soft); color: var(--c-primary);
}
.copilot-mark .ico { width: 15px; height: 15px; }
.copilot-text { font-size: 14.5px; color: var(--ink); margin-top: 2px; }
.copilot-meta {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line-2); font-size: 11.5px; color: var(--ink-3);
}
.copilot-meta span { display: flex; align-items: center; gap: 5px; }
.copilot-meta .ico { width: 13px; height: 13px; }
ul.bul { margin: 0; padding-left: 17px; color: var(--ink-2); }
ul.bul li { margin: 4px 0; }