/* ==========================================================================
   SurgFolio — brand theme on top of Bootstrap 5.3 (self-hosted, CSP-safe).
   Brand system (LOGO/): dark mode first; blues for action and emphasis;
   gradients used sparingly; modern, not flashy.
   Bootstrap is configured through its CSS variables; this file adds only
   what Bootstrap does not provide.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/inter/inter-latin-wght-normal.woff2") format("woff2-variations");
}

/* ---- Brand palette ---------------------------------------------------------- */
:root {
  --sf-midnight: #08111c;   /* Midnight Navy */
  --sf-surface: #0e1a2a;    /* Surface Navy */
  --sf-ink: #0b1624;        /* Ink */
  --sf-blue: #3c8ce7;       /* Surgfolio Blue */
  --sf-action: #1479f8;     /* Action Blue */
  --sf-cyan: #35b8ff;       /* Highlight Cyan */
  --sf-offwhite: #f5f7fa;   /* Off White */
  --sf-slate: #94a3b8;      /* Slate */
  --sf-gradient: linear-gradient(135deg, var(--sf-cyan) 0%, var(--sf-action) 55%, #0a4fb8 100%);
  --sf-sidebar-w: 256px;
  --sf-radius: 0.75rem;
  --sf-ease: cubic-bezier(.2, .7, .2, 1);

  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 0.9375rem;
  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: var(--sf-radius);
  --bs-primary: var(--sf-action);
  --bs-primary-rgb: 20, 121, 248;
  --bs-info: var(--sf-cyan);
  --bs-info-rgb: 53, 184, 255;
  --bs-link-color: var(--sf-action);
  --bs-link-color-rgb: 20, 121, 248;
  --bs-link-hover-color: #0f5fc4;
  --bs-link-hover-color-rgb: 15, 95, 196;
  --bs-focus-ring-color: rgba(20, 121, 248, .3);

  /* light theme (brand "light background" variant) */
  --bs-body-bg: var(--sf-offwhite);
  --bs-body-color: var(--sf-ink);
  --bs-emphasis-color: var(--sf-ink);
  --bs-secondary-color: #5b6b82;
  --bs-tertiary-bg: #eaeef4;
  --bs-border-color: #dde3ec;
  --bs-primary-text-emphasis: #0b56b5;
  --bs-primary-bg-subtle: #e3efff;
  --bs-primary-border-subtle: #b8d6fd;
  --sf-card-bg: #ffffff;
  --sf-sidebar-bg: var(--sf-ink);
  --sf-elevated-shadow: 0 1px 2px rgba(11, 22, 36, .06), 0 8px 24px -12px rgba(11, 22, 36, .18);
  --sf-hover-border: #b8d6fd;
  --chart-bar: var(--sf-action);
  --chart-bar-hover: var(--sf-blue);
  --chart-grid: #e3e8ef;
  --chart-axis: #5b6b82;
  --chart-target: var(--sf-ink);
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --bs-body-bg: var(--sf-midnight);
  --bs-body-color: var(--sf-offwhite);
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: var(--sf-slate);
  --bs-secondary-bg: var(--sf-surface);
  --bs-tertiary-bg: var(--sf-surface);
  --bs-border-color: #1c2b40;
  --bs-border-color-translucent: rgba(148, 163, 184, .14);
  --bs-link-color: #5aa6ff;
  --bs-link-color-rgb: 90, 166, 255;
  --bs-link-hover-color: var(--sf-cyan);
  --bs-link-hover-color-rgb: 53, 184, 255;
  --bs-primary-text-emphasis: #7dbbff;
  --bs-primary-bg-subtle: rgba(20, 121, 248, .14);
  --bs-primary-border-subtle: rgba(20, 121, 248, .38);
  --bs-success-text-emphasis: #5fd6a4;
  --bs-success-bg-subtle: rgba(46, 186, 128, .13);
  --bs-warning-text-emphasis: #f4c26b;
  --bs-warning-bg-subtle: rgba(244, 177, 61, .13);
  --bs-warning-border-subtle: rgba(244, 177, 61, .35);
  --bs-danger-text-emphasis: #ff8b8b;
  --bs-danger-bg-subtle: rgba(240, 82, 82, .13);
  --bs-info-text-emphasis: #8fd5ff;
  --bs-info-bg-subtle: rgba(53, 184, 255, .12);
  --bs-info-border-subtle: rgba(53, 184, 255, .32);
  --sf-card-bg: var(--sf-ink);
  --sf-sidebar-bg: #060d16;
  --sf-elevated-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -14px rgba(0, 0, 0, .7);
  --sf-hover-border: rgba(20, 121, 248, .45);
  --chart-grid: #1a2a3f;
  --chart-axis: var(--sf-slate);
  --chart-target: var(--sf-offwhite);
}

body { -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
h1, h2, h3, .h1, .h2, .h3 { font-weight: 700; letter-spacing: -0.015em; }
h1, .h1 { font-size: 1.6rem; }
.tabular, .num { font-variant-numeric: tabular-nums; }
.num { text-align: right; }
.mono { font-family: var(--bs-font-monospace); }
.nowrap { white-space: nowrap; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
/* Menus listing codes with descriptions (e.g. Common diagnoses). */
.dropdown-menu-wide { width: min(32rem, calc(100vw - 2rem)); }
.dropdown-menu-wide .dropdown-item { white-space: normal; align-items: baseline; }
.icon { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex-shrink: 0; }
.icon-xs { width: .9em; height: .9em; }
.unit { color: var(--bs-secondary-color); font-weight: 500; font-size: .85em; }
.optional { color: var(--bs-secondary-color); font-weight: 400; font-size: .8em; margin-left: .25rem; }
.hint { color: var(--bs-secondary-color); font-size: .8rem; }
.label { font-weight: 550; font-size: .85rem; margin-bottom: .35rem; display: inline-block; color: var(--bs-body-color); }
.field-error { display: flex; gap: .35rem; align-items: flex-start; color: var(--bs-danger-text-emphasis); font-size: .82rem; font-weight: 550; margin: .3rem 0 0; }
.field-error .icon { flex-shrink: 0; margin-top: .1rem; }
/* Required to complete a case (D9). */
.req, abbr.req[title] { color: var(--bs-danger-text-emphasis); font-weight: 700; text-decoration: none; border: 0; cursor: help; margin-left: .1rem; }
.required-note { font-size: .82rem; color: var(--bs-secondary-color); margin: 0 0 .75rem; }

/* ---- Bootstrap component tuning ------------------------------------------- */
.btn { font-weight: 550; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .12s var(--sf-ease); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  --bs-btn-bg: var(--sf-action); --bs-btn-border-color: var(--sf-action);
  --bs-btn-hover-bg: #2a88ff; --bs-btn-hover-border-color: #2a88ff;
  --bs-btn-active-bg: #0e66d6; --bs-btn-active-border-color: #0e66d6;
  --bs-btn-disabled-bg: var(--sf-action); --bs-btn-disabled-border-color: var(--sf-action);
  --bs-btn-focus-shadow-rgb: 20, 121, 248;
  box-shadow: 0 6px 18px -8px rgba(20, 121, 248, .65);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-link-color); --bs-btn-border-color: var(--bs-primary-border-subtle);
  --bs-btn-hover-bg: var(--sf-action); --bs-btn-hover-border-color: var(--sf-action); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--sf-action); --bs-btn-active-border-color: var(--sf-action); --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 20, 121, 248;
}
.btn-secondary {
  --bs-btn-bg: var(--bs-tertiary-bg); --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--bs-primary-bg-subtle); --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-hover-border-color: var(--sf-hover-border);
  --bs-btn-active-bg: var(--bs-primary-bg-subtle); --bs-btn-active-color: var(--bs-emphasis-color); --bs-btn-active-border-color: var(--sf-hover-border);
}
.btn-ghost { --bs-btn-color: var(--bs-secondary-color); --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-border-color: transparent; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: .35rem; }
.form-control, .form-select { background-color: var(--sf-card-bg); }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #0a1420; border-color: #22334b; }
.form-control:focus, .form-select:focus { border-color: var(--sf-action); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--sf-action); border-color: var(--sf-action); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.card {
  --bs-card-bg: var(--sf-card-bg); --bs-card-border-color: var(--bs-border-color); --bs-card-border-radius: var(--sf-radius);
  --bs-card-spacer-y: 1.25rem; --bs-card-spacer-x: 1.35rem; --bs-card-cap-bg: transparent;
  box-shadow: var(--sf-elevated-shadow);
}
.card-title { font-size: 1rem; font-weight: 650; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--bs-primary-bg-subtle); --bs-table-hover-color: var(--bs-body-color); margin-bottom: 0; }
.table > thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); font-weight: 600; border-bottom-color: var(--bs-border-color); white-space: nowrap; }
.table > :not(caption) > * > * { border-bottom-color: var(--bs-border-color); padding: .7rem .75rem; vertical-align: middle; }
.table-hover > tbody > tr { transition: background-color .12s; }
.badge { font-weight: 600; letter-spacing: .01em; }
.pagination { --bs-pagination-bg: var(--sf-card-bg); --bs-pagination-border-color: var(--bs-border-color); --bs-pagination-active-bg: var(--sf-action); --bs-pagination-active-border-color: var(--sf-action); --bs-pagination-hover-bg: var(--bs-primary-bg-subtle); --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.dropdown-menu { --bs-dropdown-bg: var(--sf-card-bg); --bs-dropdown-border-color: var(--bs-border-color); --bs-dropdown-link-active-bg: var(--sf-action); box-shadow: var(--sf-elevated-shadow); }
.alert { --bs-alert-border-radius: var(--sf-radius); display: flex; gap: .65rem; align-items: flex-start; }
.alert > div, .alert > span { flex: 1; }
.alert .icon { margin-top: .15rem; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--sf-action); }

/* ---- App shell ------------------------------------------------------------------ */
.app-shell { min-height: 100vh; }
.sidebar {
  --bs-offcanvas-width: var(--sf-sidebar-w);
  --bs-offcanvas-bg: var(--sf-sidebar-bg);
  --bs-offcanvas-color: #c9d4e3;
  background: var(--sf-sidebar-bg);
  color: #c9d4e3;
  border-right: 1px solid rgba(148, 163, 184, .1);
}
@media (min-width: 992px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sf-sidebar-w); z-index: 1030; }
  .main { margin-left: var(--sf-sidebar-w); }
  /* Bootstrap's offcanvas-lg turns scrolling off at this width; the fixed menu must scroll on its
     own when it is taller than the window (short screens, admin links), so nothing is cut off. */
  .sidebar .offcanvas-body { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, .3) transparent; }
}
.sidebar .offcanvas-body { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem 1rem; }
.sidebar .nav-link {
  position: relative; display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-radius: .6rem;
  color: #aebbd0; font-weight: 550; transition: background-color .15s, color .15s;
}
.sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.sidebar .nav-link.active { color: #fff; background: linear-gradient(90deg, rgba(20, 121, 248, .28), rgba(20, 121, 248, .08)); }
.sidebar .nav-link.active::before {
  content: ""; position: absolute; left: -1rem; top: 20%; bottom: 20%; width: 3px; border-radius: 0 3px 3px 0; background: var(--sf-gradient);
}
.sidebar .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: #6c7d96; padding: 0 .8rem; margin: .5rem 0 -.5rem; }
.sidebar-foot { margin-top: auto; border-top: 1px solid rgba(148, 163, 184, .12); padding-top: 1rem; display: flex; align-items: center; gap: .65rem; }
.sidebar-foot .whoami { min-width: 0; flex: 1; line-height: 1.25; }
.sidebar-foot .whoami small { display: block; color: #7d8ca3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .btn-ghost { --bs-btn-color: #aebbd0; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .06); }
.avatar {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0;
  font-size: .8rem; font-weight: 700; color: #fff; background: var(--sf-gradient);
}

/* Wordmark rule: SURG in Off White (dark) or Ink (light); FOLIO in Surgfolio Blue. */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand img { width: 2rem; height: 2rem; }
.wordmark { font-weight: 800; letter-spacing: -0.01em; font-size: 1.25rem; line-height: 1; color: var(--bs-emphasis-color); }
.wordmark b { font-weight: 800; color: var(--sf-blue); }
.sidebar .wordmark { color: var(--sf-offwhite); }
.tagline { font-size: .8rem; letter-spacing: .06em; color: var(--bs-secondary-color); }

.topbar {
  position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem;
  background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bs-border-color);
}
.content { padding: 1.75rem clamp(1rem, 3vw, 2.25rem) 6rem; max-width: 1440px; }
@media (min-width: 992px) { .content { padding-bottom: 3rem; } }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-head h1 { margin: 0; }
.page-head p { margin: .25rem 0 0; color: var(--bs-secondary-color); }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.crumb { display: inline-flex; align-items: center; gap: .25rem; font-size: .85rem; color: var(--bs-secondary-color); text-decoration: none; margin-bottom: .35rem; }
.crumb:hover { color: var(--bs-link-color); }
.subhead { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); font-weight: 650; margin: 1.5rem 0 .75rem; }

/* Bottom tab bar on phones */
.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 1030; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--sf-card-bg) 92%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--bs-border-color);
}
.tabbar .tab { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .3rem 0; color: var(--bs-secondary-color); text-decoration: none; font-size: .68rem; font-weight: 600; }
.tabbar .tab.active { color: var(--bs-link-color); }
.tabbar .tab-primary .tab-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-top: -1.1rem; border-radius: 50%; color: #fff; background: var(--sf-gradient); box-shadow: 0 8px 20px -6px rgba(20, 121, 248, .7); }
@media (min-width: 992px) { .tabbar { display: none; } }

/* ---- Motion: restrained, purposeful ------------------------------------------------ */
@keyframes sf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* fill-mode "backwards" (not "both"): once finished, the animation no longer applies, so it
   leaves no stacking context behind that would trap dropdown menus under later cards. */
.content > * { animation: sf-rise .45s var(--sf-ease) backwards; }
.page-head { position: relative; z-index: 20; }
.content > *:nth-child(2) { animation-delay: .04s; }
.content > *:nth-child(3) { animation-delay: .08s; }
.content > *:nth-child(4) { animation-delay: .12s; }
.content > *:nth-child(n+5) { animation-delay: .16s; }
.card-hover { transition: transform .2s var(--sf-ease), border-color .2s, box-shadow .2s; }
.card-hover:hover { transform: translateY(-2px); border-color: var(--sf-hover-border); }
.alert-autodismiss { transition: opacity .4s, transform .4s; }
.alert-autodismiss.is-leaving { opacity: 0; transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- KPIs & dashboard ------------------------------------------------------------------ */
.kpi { height: 100%; }
.kpi .card-body { display: flex; gap: 1rem; align-items: flex-start; }
.kpi-icon { width: 2.6rem; height: 2.6rem; border-radius: .75rem; display: grid; place-items: center; flex-shrink: 0; color: #fff; background: var(--sf-gradient); box-shadow: 0 8px 18px -10px rgba(20, 121, 248, .9); }
.kpi-icon.alt { background: linear-gradient(135deg, #2a3d58, #172538); color: var(--sf-cyan); box-shadow: none; }
.kpi-label { font-size: .8rem; color: var(--bs-secondary-color); font-weight: 550; margin: 0; }
.kpi-value { font-size: 1.75rem; font-weight: 750; letter-spacing: -0.02em; margin: .1rem 0; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: .8rem; color: var(--bs-secondary-color); margin: 0; }
.delta-up { color: var(--bs-success-text-emphasis); }
.delta-down { color: var(--bs-danger-text-emphasis); }

.progress { --bs-progress-height: .6rem; --bs-progress-bg: var(--bs-tertiary-bg); --bs-progress-bar-bg: var(--sf-action); position: relative; overflow: visible; }
.progress-bar { background: var(--sf-gradient); border-radius: inherit; transition: width .8s var(--sf-ease); }
.progress-marker { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--bs-emphasis-color); opacity: .55; border-radius: 1px; }
.target-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem 1.5rem; margin-top: 1rem; }
.target-stats div { display: flex; flex-direction: column; }
.target-stats span { font-size: .78rem; color: var(--bs-secondary-color); }
.target-stats strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.chart { position: relative; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-narrow { display: none; }
@media (max-width: 575.98px) { .chart-wide { display: none; } .chart-narrow { display: block; } }
.chart .grid-line { stroke: var(--chart-grid); stroke-width: 1; }
.chart .baseline { stroke: var(--chart-axis); stroke-opacity: .5; }
.chart .axis-label { fill: var(--chart-axis); font-size: 11px; font-family: var(--bs-font-sans-serif); }
.chart .axis-label.is-current { fill: var(--bs-emphasis-color); font-weight: 700; }
.chart .bar { fill: var(--chart-bar); transition: fill .15s, opacity .15s; }
.chart .bar-group { outline: none; cursor: default; }
.chart .bar-group:hover .bar, .chart .bar-group:focus .bar { fill: var(--sf-cyan); }
.chart .bar-group.is-future .bar { opacity: .35; }
.chart .bar-hit { fill: transparent; }
.chart .bar-label { fill: var(--bs-emphasis-color); font-size: 11px; font-weight: 700; }
.chart .target-line { stroke: var(--chart-target); stroke-dasharray: 4 4; stroke-width: 1.5; opacity: .7; }
.chart-tooltip {
  position: absolute; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none; z-index: 5;
  display: flex; flex-direction: column; gap: .1rem; padding: .5rem .7rem; border-radius: .5rem; font-size: .8rem; white-space: nowrap;
  background: var(--sf-card-bg); border: 1px solid var(--bs-border-color); box-shadow: var(--sf-elevated-shadow);
}
.legend { font-size: .8rem; color: var(--bs-secondary-color); display: inline-flex; align-items: center; gap: .4rem; }
.legend-line { width: 1.2rem; border-top: 2px dashed var(--chart-target); opacity: .7; }

.hbars { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .85rem; }
.hbar-head { display: flex; justify-content: space-between; gap: .75rem; font-size: .88rem; }
.hbar-label { font-weight: 550; }
.hbar-value { font-weight: 650; font-variant-numeric: tabular-nums; }
.hbar-track { height: .45rem; border-radius: 99px; background: var(--bs-tertiary-bg); margin: .35rem 0 .2rem; overflow: hidden; }
.hbar-fill { display: block; height: 100%; border-radius: inherit; background: var(--sf-gradient); }
.hbar-sub { font-size: .76rem; color: var(--bs-secondary-color); }

/* ---- Analytics charts (App\View\Charts) ---------------------------------------------------
 * Categorical slots (identity) and a sequential ramp (magnitude), checked with the dataviz
 * validator against the card surfaces (#fff light, #0b1624 dark): adjacent CVD ΔE >= 8.4,
 * normal-vision ΔE >= 19.3. In light mode slots 3/4/5 sit under 3:1, so every chart keeps a
 * legend with values and a data table. Dark steps are their own, not an automatic flip. */
:root, [data-bs-theme="light"] {
  --series-0: #a3adbb;  /* neutral: not recorded / none / other */
  --series-1: #1479f8; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948;
  --seq-0: #eef2f7; --seq-1: #cde2fb; --seq-2: #86b6ef; --seq-3: #3987e5; --seq-4: #1c5cab; --seq-5: #0d366b;
  --seq-ink-strong: #ffffff;
}
[data-bs-theme="dark"] {
  --series-0: #4b5a6e;
  --series-1: #3c8ce7; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
  --seq-0: #13223a; --seq-1: #184f95; --seq-2: #256abf; --seq-3: #3987e5; --seq-4: #6da7ec; --seq-5: #b7d3f6;
  --seq-ink-strong: #0b1624;
}
.s-0 { --c: var(--series-0); } .s-1 { --c: var(--series-1); } .s-2 { --c: var(--series-2); }
.s-3 { --c: var(--series-3); } .s-4 { --c: var(--series-4); } .s-5 { --c: var(--series-5); }
.s-6 { --c: var(--series-6); } .s-7 { --c: var(--series-7); } .s-8 { --c: var(--series-8); }
.q-0 { --c: var(--seq-0); } .q-1 { --c: var(--seq-1); } .q-2 { --c: var(--seq-2); }
.q-3 { --c: var(--seq-3); } .q-4 { --c: var(--seq-4); } .q-5 { --c: var(--seq-5); }
.chart .bar[class*="s-"] { fill: var(--c); }
.chart .bar-group:hover .bar[class*="s-"], .chart .bar-group:focus .bar[class*="s-"] { fill: var(--c); opacity: .78; }
.hbar-fill[class*="s-"] { background: var(--c); }
.hbars-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .85rem 1.75rem; }
.swatch { width: .7rem; height: .7rem; border-radius: 3px; flex-shrink: 0; background: var(--c); }

.analytics-section { margin: 2rem 0 1rem; display: flex; align-items: center; gap: .6rem; }
.analytics-section h2 { font-size: 1.15rem; margin: 0; }
.analytics-section .section-icon { width: 2rem; height: 2rem; border-radius: .6rem; display: grid; place-items: center; color: #fff; background: var(--sf-gradient); }
.chart-note { font-size: .78rem; color: var(--bs-secondary-color); margin: -.35rem 0 .9rem; }
.stat-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: .15rem 0 0; }

/* Part-to-whole bar: segments separated by 2px surface gaps, rounded ends. */
.pbar { display: flex; gap: 2px; height: 1.1rem; border-radius: .45rem; overflow: hidden; }
.pbar-seg { display: block; flex-shrink: 1; min-width: 3px; background: var(--c); outline: none; transition: opacity .15s; }
.pbar-seg:hover, .pbar-seg:focus { opacity: .78; }
.pbar-seg .chart-mark { display: block; height: 100%; }
.chart-legend { list-style: none; padding: 0; margin: 0 0 .75rem; display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .8rem; color: var(--bs-secondary-color); }
.chart-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.chart-legend-rows { display: grid; grid-template-columns: 1fr; gap: .35rem; margin: .9rem 0 0; }
.chart-legend-rows li { display: grid; grid-template-columns: auto 1fr auto 3.2rem; gap: .5rem; align-items: center; }
.chart-legend-rows .legend-label { color: var(--bs-body-color); }
.chart-legend-rows .legend-value { font-weight: 650; color: var(--bs-emphasis-color); font-variant-numeric: tabular-nums; }
.chart-legend-rows .legend-sub { text-align: right; font-variant-numeric: tabular-nums; }

/* Weekday × start-time heatmap. */
.heatmap { display: grid; grid-template-columns: 2.4rem repeat(8, 1fr); gap: 3px; font-size: .72rem; color: var(--bs-secondary-color); }
.hm-col { text-align: left; white-space: nowrap; }
.hm-row { align-self: center; }
.hm-cell { display: block; aspect-ratio: 1.6; border-radius: 4px; background: var(--c); outline: none; }
.hm-cell:hover, .hm-cell:focus { box-shadow: 0 0 0 2px var(--bs-emphasis-color); }
.hm-cell .chart-mark { display: block; height: 100%; }
.hm-scale { display: flex; align-items: center; gap: 3px; justify-content: flex-end; margin-top: .6rem; font-size: .72rem; color: var(--bs-secondary-color); }
.hm-scale .hm-cell { width: 1.1rem; aspect-ratio: auto; height: .7rem; }
.hm-scale span:first-child { margin-right: .3rem; } .hm-scale span:last-child { margin-left: .3rem; }

/* Share matrix: shaded cells with the value inside (ink picked by fill lightness). */
.matrix { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: .8rem; }
.matrix th { font-weight: 550; color: var(--bs-secondary-color); padding: .25rem .4rem; white-space: nowrap; }
.matrix thead th { text-align: center; }
.matrix tbody th { text-align: left; color: var(--bs-body-color); }
.mx-cell { background: var(--c); text-align: center; border-radius: 4px; padding: .45rem .3rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bs-body-color); min-width: 4.2rem; }
.mx-cell.q-0 { color: var(--bs-secondary-color); font-weight: 400; }
.mx-cell.q-4, .mx-cell.q-5 { color: var(--seq-ink-strong); }

.recent-list { list-style: none; padding: 0; margin: 0; }
.recent-item { display: flex; align-items: center; gap: .9rem; padding: .65rem .5rem; margin: 0 -.5rem; border-radius: .6rem; text-decoration: none; color: inherit; transition: background-color .15s; }
.recent-item:hover { background: var(--bs-primary-bg-subtle); }
.recent-date { width: 2.8rem; text-align: center; border-radius: .55rem; background: var(--bs-tertiary-bg); padding: .3rem 0; line-height: 1.1; flex-shrink: 0; }
.recent-date span { display: block; font-size: .65rem; text-transform: uppercase; color: var(--bs-secondary-color); font-weight: 650; }
.recent-date strong { font-size: 1.05rem; }
.recent-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.recent-rvu { font-weight: 700; font-variant-numeric: tabular-nums; }


/* ---- Lists, codes, details ---------------------------------------------------------- */
.code-list { display: flex; flex-wrap: wrap; gap: .25rem; }
.code-tag { font-family: var(--bs-font-monospace); font-size: .75rem; font-weight: 600; padding: .1rem .4rem; border-radius: .35rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.row-meta { display: flex; flex-wrap: wrap; gap: .1rem .65rem; font-size: .8rem; color: var(--bs-secondary-color); }
.row-title { font-weight: 650; text-decoration: none; color: var(--bs-emphasis-color); }
.row-title:hover { color: var(--bs-link-color); }
.dl { display: grid; gap: .55rem; margin: 0; }
.dl > div { display: grid; grid-template-columns: minmax(8rem, 38%) 1fr; gap: .75rem; }
.dl dt { font-weight: 500; color: var(--bs-secondary-color); font-size: .86rem; }
.dl dd { margin: 0; }
.risk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .5rem 2rem; }
.plain-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.total-pill { display: inline-flex; gap: .4rem; align-items: baseline; padding: .3rem .8rem; border-radius: 99px; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-size: .85rem; }
.total-pill strong { font-size: 1.05rem; }
.empty-state { text-align: center; padding: 3rem 1.5rem; }
.empty-icon { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: var(--bs-primary-bg-subtle); color: var(--bs-link-color); margin-bottom: 1rem; }
.empty-icon .icon { width: 1.5rem; height: 1.5rem; }
.error-code { font-size: 3rem; font-weight: 800; background: var(--sf-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }

/* Locked Premium features (D23) */
.locked-card { border-style: dashed; }
.locked-card .card-body { display: flex; flex-direction: column; gap: .35rem; }

/* Carried-forward values (D2) */
.is-carried { box-shadow: inset 3px 0 0 var(--bs-warning-text-emphasis), var(--sf-elevated-shadow); }
.carry-note { color: var(--bs-warning-text-emphasis); font-size: .86rem; display: flex; gap: .4rem; align-items: center; }

/* ---- Case form ------------------------------------------------------------------------ */
.form-section .section-head { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.25rem; }
.section-num { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .55rem; flex-shrink: 0; font-weight: 700; font-size: .85rem; color: #fff; background: var(--sf-gradient); }
.section-head h2 { font-size: 1.05rem; margin: .1rem 0 0; }
.section-head p { margin: .15rem 0 0; font-size: .85rem; color: var(--bs-secondary-color); }
.field { margin-bottom: 1rem; min-width: 0; border: 0; padding: 0; }
.field > legend { float: none; width: auto; font-size: .85rem; }
.field.has-error .form-control, .field.has-error .form-select { border-color: var(--bs-danger); }
/* Invalid field: tinted area (box-shadow, so the layout does not move), red label with an alert icon. */
.field.has-error { background: rgba(var(--bs-danger-rgb), .08); box-shadow: 0 0 0 .45rem rgba(var(--bs-danger-rgb), .08); border-radius: .35rem; }
.field.has-error > .form-label { color: var(--bs-danger-text-emphasis); font-weight: 600; }
.field.has-error .error-icon { margin-right: .3rem; vertical-align: -.1em; }
.field.has-error .form-control, .field.has-error .form-select { background-color: rgba(var(--bs-danger-rgb), .06); }
.field.has-error .form-control:focus, .field.has-error .form-select:focus { box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .25); }
.field.has-error .pills .btn { border-color: var(--bs-danger); }
/* The first invalid field after a failed save: scrolled to, focused and briefly pulsed. */
.error-flash { border-radius: .5rem; animation: sf-error-flash 2.4s ease-out 1; }
@keyframes sf-error-flash { 0%, 50% { box-shadow: 0 0 0 .45rem rgba(var(--bs-danger-rgb), .45); } 100% { box-shadow: 0 0 0 .45rem rgba(var(--bs-danger-rgb), .08); } }
.field-scanned .form-control { border-color: var(--sf-cyan); box-shadow: 0 0 0 .15rem rgba(53, 184, 255, .2); }

/* Option pills: Bootstrap btn-check groups; untouched = not entered (D5). */
.pills { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.pills .btn { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .85rem; border-radius: 99px; }
.pill-clear { border: 0; background: none; color: var(--bs-secondary-color); padding: .25rem; border-radius: 50%; line-height: 1; }
.pill-clear:hover { color: var(--bs-emphasis-color); background: var(--bs-tertiary-bg); }
.pill-clear[hidden] { display: none; }

.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.row-card { border: 1px solid var(--bs-border-color); border-radius: var(--sf-radius); padding: 1rem 1.1rem .25rem; background: var(--bs-tertiary-bg); animation: sf-rise .3s var(--sf-ease) backwards; }
[data-bs-theme="dark"] .row-card { background: rgba(14, 26, 42, .6); }
.row-card-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.row-card-head .row-rvu { margin-left: auto; font-weight: 650; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.row-card-inline { display: flex; align-items: flex-end; gap: .75rem; }
.row-card-inline > .row { flex: 1; }
.rows-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 .5rem; }
.cpt-total { color: var(--bs-secondary-color); font-size: .9rem; }
.cpt-total strong { color: var(--bs-emphasis-color); font-size: 1.25rem; margin-left: .35rem; font-variant-numeric: tabular-nums; }
details.more > summary, details.row-more > summary, details.patient-details > summary, details.table-toggle > summary {
  cursor: pointer; color: var(--bs-link-color); font-size: .86rem; font-weight: 600; margin: .5rem 0 1rem; list-style: none; display: inline-flex; align-items: center; gap: .35rem;
}
details > summary::-webkit-details-marker { display: none; }
details.more > summary::before, details.row-more > summary::before, details.patient-details > summary::before, details.table-toggle > summary::before {
  content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--sf-ease);
}
details[open] > summary::before { transform: rotate(45deg); }
details.advanced-risk { border-top: 1px dashed var(--bs-border-color); margin-top: .5rem; padding-top: .25rem; }

.autocomplete, .patient-search { position: relative; }
.ac-results {
  position: absolute; z-index: 1050; top: 100%; left: 0; right: 0; min-width: 280px; margin: .25rem 0 0; padding: .3rem; list-style: none;
  background: var(--sf-card-bg); border: 1px solid var(--bs-border-color); border-radius: .6rem; box-shadow: var(--sf-elevated-shadow); max-height: 320px; overflow: auto;
}
.ac-option { display: flex; gap: .65rem; padding: .5rem .6rem; border-radius: .45rem; cursor: pointer; font-size: .88rem; }
.ac-option a { color: inherit; text-decoration: none; display: block; width: 100%; }
.ac-option.is-active, .ac-option:hover { background: var(--bs-primary-bg-subtle); }
.ac-desc { color: var(--bs-secondary-color); }
.ac-empty { padding: .6rem; color: var(--bs-secondary-color); font-size: .85rem; }
.patient-summary { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: var(--sf-radius); background: var(--bs-primary-bg-subtle); border: 1px solid var(--bs-primary-border-subtle); }
.patient-summary > div { display: flex; flex-direction: column; gap: .1rem; }
.checks { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.inline-pair { display: flex; gap: .4rem; }
.computed { display: block; padding: .45rem 0; font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.form-actions {
  position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem;
  margin: 1.5rem calc(-1 * clamp(1rem, 3vw, 2.25rem)) 0; padding: .9rem clamp(1rem, 3vw, 2.25rem);
  background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 991.98px) { .form-actions { bottom: calc(3.9rem + env(safe-area-inset-bottom)); } }
.warning-list { margin: .35rem 0; padding-left: 1.1rem; }

/* Label scanning (on-device OCR) */
.label-scan { margin-bottom: 1rem; }
.btn-scan { display: inline-flex; gap: .5rem; align-items: center; }
/* Mobile-only features (label scan): shown only on touch-first devices — phones and tablets. */
@media not all and (pointer: coarse) { .mobile-only { display: none !important; } }
.label-scan-locked { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; }
.scan-note { font-size: .8rem; color: var(--bs-secondary-color); margin: .4rem 0 0; display: flex; gap: .35rem; align-items: center; }
.scan-status { margin-top: .75rem; padding: .6rem .8rem; border-radius: .6rem; font-size: .86rem; background: var(--bs-tertiary-bg); }
.scan-status-row, .scan-status-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.scan-status-actions { margin-top: .5rem; }
.spinner { width: 1rem; height: 1rem; border: 2px solid var(--bs-primary-border-subtle); border-top-color: var(--sf-action); border-radius: 50%; animation: sf-spin .7s linear infinite; }
@keyframes sf-spin { to { transform: rotate(360deg); } }
.scan-record { display: flex; gap: .5rem; font-size: .82rem; color: var(--bs-secondary-color); margin: 1rem 0 0; }

/* Facility / reference rows */
.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.inline-form > .form-control, .inline-form > .form-select { flex: 1 1 11rem; width: auto; }
.inline-form .w-xs { flex: 0 0 6.5rem; }
.inline-form .w-sm { flex: 0 1 9rem; }
.ref-code { min-width: 12rem; }

/* ---- Sign-in ------------------------------------------------------------------------------- */
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; position: relative; background: var(--sf-midnight); color: var(--sf-offwhite); }
/* The page scrolls when the form is taller than the window (sign-up); the backdrop stays put. */
.auth-body::before {
  content: ""; position: fixed; width: min(70vw, 720px); aspect-ratio: 1; left: -18%; bottom: -30%;
  background: url("../brand/surgfolio-symbol-256.png") center / contain no-repeat; opacity: .07; filter: blur(1px); pointer-events: none;
}
.auth-body::after { content: ""; position: fixed; inset: 0; background: radial-gradient(60% 50% at 80% 10%, rgba(20, 121, 248, .18), transparent 70%); pointer-events: none; }
.auth-wrap { position: relative; z-index: 1; width: min(100%, 420px); animation: sf-rise .5s var(--sf-ease) backwards; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-bottom: 1.75rem; text-align: center; }
.auth-brand img { width: 3.5rem; height: 3.5rem; filter: drop-shadow(0 10px 24px rgba(20, 121, 248, .45)); }
.auth-brand .wordmark { font-size: 1.9rem; color: var(--sf-offwhite); }
.auth-card { background: rgba(11, 22, 36, .85); border-color: rgba(148, 163, 184, .16); backdrop-filter: blur(10px); }
.auth-foot { text-align: center; font-size: .78rem; color: var(--sf-slate); margin-top: 1.25rem; }

/* Dynamic widths/positions without inline styles (CSP style-src 'self'): .pct-0…100, .pos-0…100 */
.pct-0{width:0%}.pos-0{left:0%}
.pct-1{width:1%}.pos-1{left:1%}
.pct-2{width:2%}.pos-2{left:2%}
.pct-3{width:3%}.pos-3{left:3%}
.pct-4{width:4%}.pos-4{left:4%}
.pct-5{width:5%}.pos-5{left:5%}
.pct-6{width:6%}.pos-6{left:6%}
.pct-7{width:7%}.pos-7{left:7%}
.pct-8{width:8%}.pos-8{left:8%}
.pct-9{width:9%}.pos-9{left:9%}
.pct-10{width:10%}.pos-10{left:10%}
.pct-11{width:11%}.pos-11{left:11%}
.pct-12{width:12%}.pos-12{left:12%}
.pct-13{width:13%}.pos-13{left:13%}
.pct-14{width:14%}.pos-14{left:14%}
.pct-15{width:15%}.pos-15{left:15%}
.pct-16{width:16%}.pos-16{left:16%}
.pct-17{width:17%}.pos-17{left:17%}
.pct-18{width:18%}.pos-18{left:18%}
.pct-19{width:19%}.pos-19{left:19%}
.pct-20{width:20%}.pos-20{left:20%}
.pct-21{width:21%}.pos-21{left:21%}
.pct-22{width:22%}.pos-22{left:22%}
.pct-23{width:23%}.pos-23{left:23%}
.pct-24{width:24%}.pos-24{left:24%}
.pct-25{width:25%}.pos-25{left:25%}
.pct-26{width:26%}.pos-26{left:26%}
.pct-27{width:27%}.pos-27{left:27%}
.pct-28{width:28%}.pos-28{left:28%}
.pct-29{width:29%}.pos-29{left:29%}
.pct-30{width:30%}.pos-30{left:30%}
.pct-31{width:31%}.pos-31{left:31%}
.pct-32{width:32%}.pos-32{left:32%}
.pct-33{width:33%}.pos-33{left:33%}
.pct-34{width:34%}.pos-34{left:34%}
.pct-35{width:35%}.pos-35{left:35%}
.pct-36{width:36%}.pos-36{left:36%}
.pct-37{width:37%}.pos-37{left:37%}
.pct-38{width:38%}.pos-38{left:38%}
.pct-39{width:39%}.pos-39{left:39%}
.pct-40{width:40%}.pos-40{left:40%}
.pct-41{width:41%}.pos-41{left:41%}
.pct-42{width:42%}.pos-42{left:42%}
.pct-43{width:43%}.pos-43{left:43%}
.pct-44{width:44%}.pos-44{left:44%}
.pct-45{width:45%}.pos-45{left:45%}
.pct-46{width:46%}.pos-46{left:46%}
.pct-47{width:47%}.pos-47{left:47%}
.pct-48{width:48%}.pos-48{left:48%}
.pct-49{width:49%}.pos-49{left:49%}
.pct-50{width:50%}.pos-50{left:50%}
.pct-51{width:51%}.pos-51{left:51%}
.pct-52{width:52%}.pos-52{left:52%}
.pct-53{width:53%}.pos-53{left:53%}
.pct-54{width:54%}.pos-54{left:54%}
.pct-55{width:55%}.pos-55{left:55%}
.pct-56{width:56%}.pos-56{left:56%}
.pct-57{width:57%}.pos-57{left:57%}
.pct-58{width:58%}.pos-58{left:58%}
.pct-59{width:59%}.pos-59{left:59%}
.pct-60{width:60%}.pos-60{left:60%}
.pct-61{width:61%}.pos-61{left:61%}
.pct-62{width:62%}.pos-62{left:62%}
.pct-63{width:63%}.pos-63{left:63%}
.pct-64{width:64%}.pos-64{left:64%}
.pct-65{width:65%}.pos-65{left:65%}
.pct-66{width:66%}.pos-66{left:66%}
.pct-67{width:67%}.pos-67{left:67%}
.pct-68{width:68%}.pos-68{left:68%}
.pct-69{width:69%}.pos-69{left:69%}
.pct-70{width:70%}.pos-70{left:70%}
.pct-71{width:71%}.pos-71{left:71%}
.pct-72{width:72%}.pos-72{left:72%}
.pct-73{width:73%}.pos-73{left:73%}
.pct-74{width:74%}.pos-74{left:74%}
.pct-75{width:75%}.pos-75{left:75%}
.pct-76{width:76%}.pos-76{left:76%}
.pct-77{width:77%}.pos-77{left:77%}
.pct-78{width:78%}.pos-78{left:78%}
.pct-79{width:79%}.pos-79{left:79%}
.pct-80{width:80%}.pos-80{left:80%}
.pct-81{width:81%}.pos-81{left:81%}
.pct-82{width:82%}.pos-82{left:82%}
.pct-83{width:83%}.pos-83{left:83%}
.pct-84{width:84%}.pos-84{left:84%}
.pct-85{width:85%}.pos-85{left:85%}
.pct-86{width:86%}.pos-86{left:86%}
.pct-87{width:87%}.pos-87{left:87%}
.pct-88{width:88%}.pos-88{left:88%}
.pct-89{width:89%}.pos-89{left:89%}
.pct-90{width:90%}.pos-90{left:90%}
.pct-91{width:91%}.pos-91{left:91%}
.pct-92{width:92%}.pos-92{left:92%}
.pct-93{width:93%}.pos-93{left:93%}
.pct-94{width:94%}.pos-94{left:94%}
.pct-95{width:95%}.pos-95{left:95%}
.pct-96{width:96%}.pos-96{left:96%}
.pct-97{width:97%}.pos-97{left:97%}
.pct-98{width:98%}.pos-98{left:98%}
.pct-99{width:99%}.pos-99{left:99%}
.pct-100{width:100%}.pos-100{left:100%}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.stack-alerts { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }
.stack-alerts .alert { margin: 0; }
.locked-text { max-width: 36rem; }

/* Form grids (CSS grid; Bootstrap's opt-in .grid is not in the default build) */
.fgrid { display: grid; gap: 0 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .fgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fgrid-diag { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@media (min-width: 576px) { .fgrid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .fgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fgrid-risk { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .9rem; }
.primary-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--bs-secondary-color); cursor: pointer; }
.asa-group { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.input-icon { position: relative; display: block; }
.input-icon > .icon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); pointer-events: none; }
.input-icon > .form-control { padding-left: 2.4rem; }
.carry-banner .check { color: inherit; margin-top: .4rem; }

/* Page layouts used by settings/admin screens */
.split { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 1.5rem; }
@media (min-width: 992px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.narrow { max-width: 640px; }
.row-actions { text-align: right; white-space: nowrap; }
.manage-menu { width: 20rem; max-width: calc(100vw - 2rem); text-align: left; white-space: normal; }
.manage-menu .manage-section { padding: .9rem 1rem; }
.manage-menu .manage-section + .manage-section { border-top: 1px solid var(--bs-border-color); }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.75rem; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--bs-primary-border-subtle); border-radius: var(--sf-radius); background: var(--bs-primary-bg-subtle); transition: border-color .15s; }
.dropzone:hover { border-color: var(--sf-action); }
.dropzone input { max-width: 100%; font-size: .85rem; }
.steps { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.danger-zone { margin-top: 1rem; }
.flex-1 { flex: 1; }
.announcement { margin-bottom: 0; }

/* Bootstrap's .offcanvas-lg makes the panel transparent at lg+; the sidebar stays dark in both themes. */
@media (min-width: 992px) { .sidebar.offcanvas-lg { background-color: var(--sf-sidebar-bg) !important; } }

/* Phones: KPI icon above the figure so numbers keep their width */
@media (max-width: 575.98px) {
  .kpi .card-body { flex-direction: column; gap: .6rem; padding: 1rem; }
  .kpi-icon { width: 2.1rem; height: 2.1rem; border-radius: .6rem; }
  .kpi-value { font-size: 1.45rem; }
}
@media (max-width: 575.98px) {
  .form-actions { gap: .35rem; flex-wrap: nowrap; justify-content: stretch; }
  .form-actions .btn:not(.d-none) { flex: 1 1 auto; }
  .form-actions .btn { --bs-btn-padding-x: .6rem; --bs-btn-padding-y: .45rem; --bs-btn-font-size: .82rem; white-space: nowrap; }
}

/* Sign-in / sign-up are always dark (brand primary experience), whatever theme the user picked. */
.auth-card .form-label { color: var(--sf-offwhite); }
.auth-card .text-secondary { color: var(--sf-slate) !important; }
.auth-divider { display: flex; align-items: center; gap: .75rem; color: var(--sf-slate); font-size: .8rem; margin: .25rem 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid rgba(148, 163, 184, .2); }

/* Export options */
.narrow-lg { max-width: 860px; }
.export-mode, .export-group { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; border: 1px solid var(--bs-border-color); border-radius: .65rem; cursor: pointer; transition: border-color .15s, background-color .15s; }
.export-mode:hover, .export-group:hover { border-color: var(--sf-hover-border); }
.export-mode:has(input:checked), .export-group:has(input:checked) { border-color: var(--sf-action); background: var(--bs-primary-bg-subtle); }
.export-mode input, .export-group input { margin-top: .2rem; flex-shrink: 0; }
.export-group:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.export-groups { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* Security settings */
.security-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.qr-box { width: 220px; max-width: 100%; aspect-ratio: 1; padding: 12px; background: #fff; border-radius: .75rem; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.key-display { letter-spacing: .08em; word-break: break-all; }
.recovery-codes { columns: 2; padding-left: 1.5rem; margin: 0; font-size: 1.05rem; line-height: 2; }
.passkey-item { padding: .6rem .75rem; border: 1px solid var(--bs-border-color); border-radius: .65rem; }

/* CSV import: column matching */
.import-map td { vertical-align: middle; }
.import-map .import-target { min-width: 18rem; }
.import-samples { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-badge { min-width: 5.5rem; }

/* Multi-select dropdown (race): a select-styled button with checkbox items */
.multi-select .form-select { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-select .dropdown-item.check { display: flex; gap: .6rem; align-items: center; border-radius: .4rem; cursor: pointer; white-space: normal; }

/* Reports */
.report-table { max-height: 32rem; overflow-y: auto; }
.report-table thead th { position: sticky; top: 0; background: var(--bs-body-bg); }
.report-bar { height: .55rem; background: var(--bs-secondary-bg); border-radius: 1rem; overflow: hidden; }
.report-bar span { display: block; height: 100%; background: var(--sf-action, var(--bs-primary)); border-radius: 1rem; }
[data-bs-theme="dark"] .mx-cell.q-3 { color: var(--seq-ink-strong); }

/* Sidebar count badge (To complete); amber when a draft is overdue. */
.nav-badge { margin-left: auto; min-width: 1.4rem; padding: .05rem .4rem; border-radius: 99px; font-size: .72rem; font-weight: 700; text-align: center; background: rgba(255, 255, 255, .14); color: #fff; }
.min-w-0 { min-width: 0; }
.nav-badge.is-overdue { background: var(--bs-warning); color: #1f1300; }
.nav-badge.is-alert { background: var(--bs-danger); color: #fff; }

/* Dashboard "This week" card. */
.pace { display: flex; align-items: center; gap: .4rem; font-size: 1.15rem; font-weight: 700; margin: .2rem 0 .1rem; }
.pace-ahead, .pace-on { color: var(--bs-success-text-emphasis); }
.pace-behind { color: var(--bs-warning-text-emphasis); }
.week-todo { list-style: none; padding: .9rem 0 0; margin: 1rem 0 0; border-top: 1px solid var(--bs-border-color); display: grid; gap: .45rem; font-size: .88rem; }
.week-todo li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.week-todo li.is-warning .icon { color: var(--bs-warning-text-emphasis); }

/* "Save as template" form inside a dropdown. */
.template-save { width: min(22rem, calc(100vw - 2rem)); }

/* ---- Quick search palette ------------------------------------------------------------------ */
.search-trigger { display: flex; align-items: center; gap: .6rem; width: 100%; margin-top: .6rem; padding: .5rem .75rem; border-radius: .6rem;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: #aebbd0; font-size: .88rem; text-align: left; }
.search-trigger:hover, .search-trigger:focus-visible { color: #fff; background: rgba(255, 255, 255, .08); }
.search-trigger span { flex: 1; }
.search-trigger kbd, .palette kbd { font-family: inherit; font-size: .7rem; padding: .1rem .35rem; border-radius: .3rem; background: rgba(148, 163, 184, .18); color: inherit; border: 0; }
.palette { width: min(40rem, calc(100vw - 2rem)); max-height: min(34rem, calc(100vh - 6rem)); margin: 10vh auto auto; padding: 0; border: 1px solid var(--bs-border-color);
  border-radius: var(--sf-radius); background: var(--sf-card-bg); color: var(--bs-body-color); box-shadow: var(--sf-elevated-shadow); }
.palette::backdrop { background: rgba(8, 17, 28, .55); backdrop-filter: blur(2px); }
.palette-box { display: flex; flex-direction: column; max-height: inherit; }
.palette-input { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.palette-input input { flex: 1; border: 0; outline: none; background: transparent; color: inherit; font-size: 1.05rem; }
.palette-input input::-webkit-search-cancel-button { display: none; }
.palette-results { overflow-y: auto; padding: .4rem; }
.palette-group { padding: .6rem .6rem .25rem; font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.palette-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: .5rem; color: inherit; text-decoration: none; }
.palette-item.is-active { background: var(--bs-primary-bg-subtle); }
.palette-item .icon { color: var(--bs-secondary-color); flex-shrink: 0; }
.palette-text { display: flex; flex-direction: column; min-width: 0; }
.palette-text span { font-size: .8rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-empty { padding: 1.5rem; text-align: center; color: var(--bs-secondary-color); font-size: .9rem; }
.palette-foot { display: flex; gap: 1rem; padding: .55rem 1rem; border-top: 1px solid var(--bs-border-color); font-size: .75rem; color: var(--bs-secondary-color); }
@media (max-width: 575.98px) { .palette { margin-top: .75rem; } .palette-foot { display: none; } }

/* Sign-up human check: the trap field is visually hidden (not display:none, which some bots skip). */
.trap-field { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.human-status.is-ok { color: var(--bs-success-text-emphasis); }
.human-status.is-ok::before { content: "\2713  "; }

/* Administration tabs: one row (scrolls sideways on phones), counts for what needs attention. */
.admin-tabs { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .25rem; border-bottom: 1px solid var(--bs-border-color); scrollbar-width: thin; }
.admin-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border-radius: .55rem .55rem 0 0; white-space: nowrap;
  color: var(--bs-secondary-color); text-decoration: none; font-weight: 550; font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -.3rem; }
.admin-tab:hover { color: var(--bs-emphasis-color); background: var(--bs-tertiary-bg); }
.admin-tab.active { color: var(--bs-emphasis-color); border-bottom-color: var(--sf-action); }
.admin-tab-count { min-width: 1.3rem; padding: 0 .35rem; border-radius: 99px; font-size: .7rem; font-weight: 700; text-align: center; background: var(--bs-danger); color: #fff; }
.attention-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.attention-list a { display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem; border-radius: .6rem; text-decoration: none; color: inherit; border: 1px solid var(--bs-border-color); }
.attention-list a:hover { border-color: var(--sf-hover-border); }
.attention-list .is-danger { background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); }
.attention-list .is-warning { background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); }
.attention-list .is-info { background: var(--bs-info-bg-subtle); border-color: var(--bs-info-border-subtle); }
.attention-list a > span { flex: 1; }