/* ==========================================================================
   DetailAhead — Design System
   White-forward: navy + orange are accent colors for small elements (buttons,
   active states, icons, badges) — not backgrounds. Light glass for floating
   chrome (navbar/sidebar/topbar), solid white cards for content.
   ========================================================================== */

/* -------------------------------- Reset -------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* ------------------------------ Design tokens --------------------------- */
:root {
  /* Palette — navy & orange are accents only (buttons, active states, icons, badges) */
  --navy-950: #0B1628;
  --navy-900: #0E1D33;
  --navy-800: #142338;
  --navy-700: #182B44;
  --navy-600: #1F3A5F;
  --navy-500: #2B4C77;

  /* Brand palette (2026 refresh) — sampled off the flowing blue→violet→
     pink→orange ribbon reference, not hand-typed hex guesses. Two tiers:
     the plain names are the light/bright tones for backdrops (the hero
     mesh, tints) where legibility doesn't matter; the "-deep" siblings are
     the same hues pulled ~20% darker so white text stays readable when
     they're used as a solid button/badge/rail fill. Every gradient and
     every accent color in the app is built from this one set. */
  --brand-blue:       #A7C4FF;
  --brand-violet:     #B79CFF;
  --brand-indigo:     #7C5CFF;
  --brand-magenta:    #F23FA0;
  --brand-pink:       #FF6FD8;
  --brand-red:        #FF4D6D;
  --brand-orange:     #FFA53D;
  --brand-amber:      #FFC94D;
  --brand-blue-rgb:    167, 196, 255;
  --brand-violet-rgb:  183, 156, 255;
  --brand-indigo-rgb:  124, 92, 255;
  --brand-magenta-rgb: 242, 63, 160;
  --brand-pink-rgb:    255, 111, 216;
  --brand-red-rgb:     255, 77, 109;
  --brand-orange-rgb:  255, 165, 61;
  --brand-amber-rgb:   255, 201, 77;

  --brand-blue-deep:    #583DF9;
  --brand-violet-deep:  #7A4EE0;
  --brand-magenta-deep: #BC40AC;
  --brand-red-deep:     #E25462;
  --brand-orange-deep:  #E7712F;

  /* "Orange" scale kept as the name every component already references —
     now sourced from the new brand orange instead of the old rust tone. */
  --orange-500: var(--brand-orange);
  --orange-600: var(--brand-orange-deep);
  --orange-700: #B8590F;
  --orange-300: #FFC98A;
  --orange-200: #FFE1BC;

  /* Accent gradient — the full blue→violet→magenta→red→orange sweep, using
     the "-deep" stops so white button text has contrast the whole way
     across (no dark anchor needed any more; every stop carries its own
     weight). This is the one gradient every button/badge/toggle/active
     state below draws from. */
  --accent-grad:       linear-gradient(115deg, var(--brand-violet-deep) 0%, var(--brand-magenta-deep) 50%, var(--brand-orange-deep) 100%);
  --accent-grad-hover: linear-gradient(115deg, #8C5EF2 0%, #D34FBA 50%, #FF8A30 100%);
  /* Compact elements (toggles, small bars) get a condensed 3-stop version. */
  --accent-grad-sm:    linear-gradient(115deg, var(--brand-violet-deep) 0%, var(--brand-magenta-deep) 50%, var(--brand-orange-deep) 100%);

  /* Ink (text) scale — dark navy at decreasing opacity, for use on white/light surfaces */
  --white-90: rgba(11, 22, 40, 0.94);
  --white-70: rgba(11, 22, 40, 0.76);
  --white-50: rgba(11, 22, 40, 0.58);
  --white-30: rgba(11, 22, 40, 0.34);
  --white-12: rgba(11, 22, 40, 0.12);
  --white-08: rgba(11, 22, 40, 0.06);
  --white-06: rgba(11, 22, 40, 0.045);

  /* Semantic — background tints unchanged; darker "-text" variants for legible text/icons on light tint */
  --success-500: #3FB27F;
  --success-rgb: 63, 178, 127;
  --success-text: #1E8A5A;
  --danger-500: #E15554;
  --danger-rgb: 225, 85, 84;
  --danger-text: #C0392B;
  --warning-500: #E8B93A;
  --warning-rgb: 232, 185, 58;
  --warning-text: #92670D;
  --info-500: #5B9BD9;
  --info-rgb: 91, 155, 217;
  --info-text: #2E6DA4;
  --orange-rgb: var(--brand-orange-rgb);

  /* Backgrounds & surfaces */
  --bg-page: #FFFFFF;
  --card-fill: #FFFFFF;

  /* Flat surfaces — solid fills, no blur, borders do the separation work */
  --glass-fill: #fff;
  --glass-fill-strong: #fff;
  --glass-border: rgba(11, 22, 40, 0.1);

  /* Radii */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.375rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* Fonts */
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-med: 220ms ease;

  /* Shadows — soft, for definition against a white page instead of heavy dark-theme depth */
  --shadow-card: 0 1px 2px rgba(11, 22, 40, 0.04), 0 6px 16px rgba(11, 22, 40, 0.05);
  --shadow-md: 0 4px 16px rgba(11, 22, 40, 0.08), 0 1px 2px rgba(11, 22, 40, 0.04);
  --shadow-lg: 0 16px 40px rgba(11, 22, 40, 0.14), 0 2px 8px rgba(11, 22, 40, 0.06);
  --shadow-glow-orange: 0 0 0 1px rgba(var(--orange-rgb), 0.4), 0 8px 24px rgba(var(--orange-rgb), 0.18);

  /* Dashboard shell */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 84px;
  --topbar-h: 72px;
  --container-max: 1280px;
}

/* ---------------------------------- Dark mode ----------------------------------
   Every component below is built on the tokens above, so re-pointing them here
   is enough to flip the whole dashboard shell — cards, tables, badges, modals,
   the sidebar/topbar — without touching component CSS. Toggled from Settings →
   Appearance; see assets/js/theme.js. */
:root[data-theme="dark"] {
  /* Neutral greys, not navy. The first pass reused the brand navy for surfaces,
     which made the whole dark theme read as blue rather than dark. Navy and
     orange stay as accents only — the same rule the light theme follows. */
  --bg-page: #141517;
  --card-fill: #1D1E21;

  --glass-fill: #1D1E21;
  --glass-fill-strong: #26272B;
  --glass-border: rgba(255, 255, 255, 0.10);

  --white-90: rgba(255, 255, 255, 0.92);
  --white-70: rgba(255, 255, 255, 0.72);
  --white-50: rgba(255, 255, 255, 0.55);
  --white-30: rgba(255, 255, 255, 0.32);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-06: rgba(255, 255, 255, 0.055);

  --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 6px 16px rgba(0,0,0,0.32);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.38), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.32);
}

:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .df-lock-card {
  background: var(--card-fill);
}

:root[data-theme="dark"] ::selection { background: rgba(var(--orange-rgb), 0.35); }

/* The dashboard shell (sidebar/topbar/.db-panel etc.) is built on a second,
   older token set ("--db-*", added after the tokens above and never merged
   in) rather than the ones overridden above — so it needs its own dark
   values, redefined after its :root block further down this file. */
:root[data-theme="dark"] {
  --db-bg:        #141517;
  --db-surface:   #1D1E21;
  --db-line:      rgba(255, 255, 255, 0.10);
  --db-ink:       rgba(255, 255, 255, 0.92);
  --db-ink-2:     rgba(255, 255, 255, 0.72);
  --db-ink-3:     rgba(255, 255, 255, 0.58);
  --db-shadow:    0 1px 2px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.32);
  --db-shadow-lg: 0 2px 4px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.35);
}
:root[data-theme="dark"] body.app-body .topbar {
  background: rgba(29,30,33,0.88);
}

/* The active sidebar item is navy text on a navy tint — correct on white,
   invisible on a dark surface. Give it white text and lift the tint so the
   selected row is the brightest thing in the column. */
:root[data-theme="dark"] .nav-item.active {
  background: rgba(255,255,255,0.09);
  color: #fff;
}
:root[data-theme="dark"] .nav-item.active svg { color: #fff; }
:root[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,0.06); }
/* .db-kpi-trend.flat's text color already comes from --db-ink-2 (now light),
   but its background was still hardcoded pale grey — illegible together. */
:root[data-theme="dark"] .db-kpi-trend.up   { background: rgba(63,178,127,0.18); color: #4ADE94; }
:root[data-theme="dark"] .db-kpi-trend.down { background: rgba(225,85,84,0.18); color: #FF8785; }
:root[data-theme="dark"] .db-kpi-trend.flat { background: rgba(255,255,255,0.08); }
:root[data-theme="dark"] .calendar-cell { background: var(--card-fill); }
:root[data-theme="dark"] .cal-popover { background: var(--card-fill); }
:root[data-theme="dark"] .user-dropdown { background: var(--card-fill); }
:root[data-theme="dark"] .cust-results { background: var(--card-fill); }
:root[data-theme="dark"] .input:focus,
:root[data-theme="dark"] .textarea:focus,
:root[data-theme="dark"] .select:focus { background: var(--card-fill); }
:root[data-theme="dark"] .checkbox { background: var(--card-fill); }
:root[data-theme="dark"] .db-seg button.active { background: var(--card-fill); }
:root[data-theme="dark"] .perm-card,
:root[data-theme="dark"] .store-status,
:root[data-theme="dark"] .svc-card,
:root[data-theme="dark"] .q-card { background: var(--card-fill); }
@media (max-width: 720px) {
  :root[data-theme="dark"] .table tr { background: var(--card-fill); }
}


/* -------------------------------- Base ---------------------------------- */
body {
  background: var(--bg-page);
  color: var(--white-90);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  min-height: 100vh;
  position: relative;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white-90);
}

p { color: var(--white-70); }

.mono { font-family: var(--font-mono); }

/* Focus states — visible on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--orange-300);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(11,22,40,0.18); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(11,22,40,0.32); background-clip: content-box; }

/* ------------------------------- Layout ---------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section { padding-block: var(--space-9); }
.section-head { max-width: 640px; margin-bottom: var(--space-7); }
.section-head .eyebrow { display: block; color: var(--orange-700); font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-3); }
.section-head h2 { font-size: var(--text-4xl); margin-bottom: var(--space-3); }
.section-head p { font-size: var(--text-lg); }

/* ---------------------------- Flat panel core ----------------------------
   Used exclusively by marketing elements (navbar/footer override the fill
   below to navy; contact-panel stays flat white).
   No blur — solid fill + a crisp border does the separation work. */
.glass {
  background: #fff;
  border: 1px solid rgba(11, 22, 40, 0.14);
  border-radius: var(--radius-md);
}

.glass-strong {
  background: #fff;
  border: 1px solid rgba(11, 22, 40, 0.14);
}

/* ---------------------------------- Buttons -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Gradient fills painted on a ::before layer instead of the element's own
   background. A rounded corner + a multi-stop gradient + a transparent
   border all compositing together anti-aliases into a visible colour seam
   right at the corner — worse the more colour stops the gradient carries,
   which is exactly what the new 5-stop brand gradient made obvious. A hard
   overflow:hidden clip on the real element sidesteps that compositing step
   entirely; the pseudo is oversized by 2px so the clip never reveals a
   sliver of whatever sits behind it. */
.btn-primary,
.status-tab.active,
.view-switch button.active,
.ai-badge,
.chat-avatar.ai,
.toggle input:checked + .toggle-track {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}
.btn-primary::before,
.status-tab.active::before,
.view-switch button.active::before,
.ai-badge::before,
.chat-avatar.ai::before,
.toggle input:checked + .toggle-track::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  z-index: -1;
  transition: background var(--transition-fast);
}
.btn-primary::before { background: var(--brand-blue-deep); }
.status-tab.active::before { background: var(--accent-grad); }
.view-switch button.active::before,
.ai-badge::before,
.chat-avatar.ai::before,
.toggle input:checked + .toggle-track::before { background: var(--accent-grad-sm); }

.btn-primary { color: #fff; }
.btn-primary:hover::before { background: #6B52FF; }

.btn-ghost {
  background: rgba(11,22,40,0.03);
  border-color: var(--glass-border);
  color: var(--white-90);
}
.btn-ghost:hover { background: rgba(11,22,40,0.06); border-color: var(--white-30); }

.btn-outline {
  background: transparent;
  border-color: var(--navy-500);
  color: var(--white-90);
}
.btn-outline:hover { border-color: var(--navy-950); background: rgba(11,22,40,0.04); }

.btn-danger-ghost {
  background: rgba(var(--danger-rgb), 0.08);
  border-color: rgba(var(--danger-rgb), 0.3);
  color: var(--danger-text);
}
.btn-danger-ghost:hover { background: rgba(var(--danger-rgb), 0.14); }

.btn-sm { padding: 0.5rem 1rem; font-size: var(--text-xs); }
.btn-lg { padding: 0.9rem 1.8rem; font-size: var(--text-base); }
.btn-icon { padding: 0.6rem; width: 40px; height: 40px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ---------------------------------- Forms ---------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--white-90); }
.field .hint { font-size: var(--text-xs); color: var(--white-50); }

.input, .textarea, .select {
  background: rgba(11, 22, 40, 0.025);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  color: var(--white-90);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  width: 100%;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--white-30); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--white-30); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--orange-300);
  background: #fff;
}
.textarea { resize: vertical; min-height: 110px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8461C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; padding-right: 2.4rem; }

.checkbox-row { display: flex; align-items: center; gap: var(--space-3); }
.checkbox {
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1px solid var(--white-30);
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.checkbox:checked { background: var(--accent-grad-sm); border-color: var(--navy-600); }
.checkbox:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.qty-unit-row { display: flex; gap: var(--space-2); }
.qty-unit-row .input { flex: 1; min-width: 0; }
.qty-unit-row .select { width: 84px; flex-shrink: 0; }

.form-success {
  display: flex; align-items: center; gap: var(--space-3);
  background: rgba(var(--success-rgb), 0.1);
  border: 1px solid rgba(var(--success-rgb), 0.3);
  color: var(--success-text);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
}
.form-error {
  display: flex; align-items: center; gap: var(--space-3);
  background: rgba(var(--danger-rgb), 0.1);
  border: 1px solid rgba(var(--danger-rgb), 0.3);
  color: var(--danger-text);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

/* ------------------------------- Badges & tags ------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--neutral { background: rgba(11,22,40,0.05); border-color: var(--glass-border); color: var(--white-70); }
.badge--success { background: rgba(var(--success-rgb), 0.12); border-color: rgba(var(--success-rgb), 0.3); color: var(--success-text); }
.badge--danger  { background: rgba(var(--danger-rgb), 0.12); border-color: rgba(var(--danger-rgb), 0.3); color: var(--danger-text); }
.badge--warning { background: rgba(var(--warning-rgb), 0.14); border-color: rgba(var(--warning-rgb), 0.35); color: var(--warning-text); }
.badge--info    { background: rgba(var(--info-rgb), 0.14); border-color: rgba(var(--info-rgb), 0.35); color: var(--info-text); }
.badge--orange  { background: rgba(var(--orange-rgb), 0.12); border-color: rgba(var(--orange-rgb), 0.35); color: var(--orange-700); }
.badge--teal    { background: rgba(20,184,166,0.12); border-color: rgba(20,184,166,0.35); color: #0F766E; }

/* AI branding — one consistent mark for every summary card / chat entry point. */
.ai-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.01em;
  color: #fff;
  padding: 5px 11px; border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.ai-badge svg { flex-shrink: 0; }

.ai-summary-card { border: 1px solid rgba(var(--orange-rgb), 0.18); }
.ai-summary-body { font-size: var(--text-sm); color: var(--db-ink-2); line-height: 1.6; }
.ai-summary-body p { margin-bottom: 8px; }
.ai-summary-body p:last-child { margin-bottom: 0; }
.ai-summary-body ul,
.ai-summary-body ol { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ai-summary-body ul { list-style: disc; }
.ai-summary-body ol { list-style: decimal; }
.ai-summary-body ul:last-child, .ai-summary-body ol:last-child { margin-bottom: 0; }
.ai-summary-body h4 { font-size: var(--text-sm); font-weight: 700; color: var(--db-ink); margin: 10px 0 4px; }
.ai-summary-body h4:first-child { margin-top: 0; }
.ai-summary-body strong { font-weight: 700; color: var(--db-ink); }
.ai-summary-body code,
.chat-bubble code { font-family: var(--font-mono); font-size: 0.92em; background: rgba(11,22,40,0.06); padding: 1px 5px; border-radius: 5px; }
.ai-summary-body .ai-error { color: var(--danger-text); }

/* Markdown tables from the AI. Scrolls inside its own box so a wide comparison
   can't force the whole page sideways. */
.md-table-wrap { overflow-x: auto; margin: 10px 0; border: 1px solid var(--db-line); border-radius: 10px; }
.md-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.md-table th, .md-table td { padding: 8px 11px; text-align: left; border-bottom: 1px solid var(--db-line); white-space: nowrap; }
.md-table th { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--db-ink-3); background: rgba(11,22,40,0.03); }
:root[data-theme="dark"] .md-table th { background: rgba(255,255,255,0.05); }
.md-table tbody tr:last-child td { border-bottom: none; }
.md-table td { color: var(--db-ink-2); }
/* On the user's own bubble the whole thing sits on a dark gradient. */
.chat-row.user .md-table-wrap { border-color: rgba(255,255,255,0.3); }
.chat-row.user .md-table th { background: rgba(255,255,255,0.14); }
.chat-row.user .md-table th, .chat-row.user .md-table td { border-color: rgba(255,255,255,0.2); }
@media (max-width: 560px) {
  /* Stack into label/value pairs rather than scrolling forever on a phone. */
  .md-table thead { display: none; }
  .md-table tr { display: block; border-bottom: 1px solid var(--db-line); padding: 6px 0; }
  .md-table td { display: flex; justify-content: space-between; gap: 14px; border: none; padding: 4px 11px; white-space: normal; }
  .md-table td::before { content: attr(data-label); font-weight: 700; font-size: 11px; text-transform: uppercase; color: var(--db-ink-3); }
}

/* Same markdown shapes inside chat bubbles. */
.chat-bubble ul, .chat-bubble ol { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.chat-bubble ul { list-style: disc; }
.chat-bubble ol { list-style: decimal; }
.chat-bubble ul:last-child, .chat-bubble ol:last-child { margin-bottom: 0; }
.chat-bubble h4 { font-size: var(--text-sm); font-weight: 700; margin: 8px 0 4px; }
.chat-bubble h4:first-child { margin-top: 0; }
.chat-bubble strong { font-weight: 700; }
:root[data-theme="dark"] .ai-summary-body code,
:root[data-theme="dark"] .chat-bubble code { background: rgba(255,255,255,0.1); }
/* The user's own bubble sits on a dark navy→orange gradient in both themes, so
   everything inside it has to be white. Setting the colour only on .chat-bubble
   left anything the markdown renderer produced (headings, list items, links,
   <strong>) inheriting the dark body ink instead, which read as near-black
   blue on the gradient. Covering descendants is the whole point. */
.chat-row.user .chat-bubble,
.chat-row.user .chat-bubble * { color: #fff; }
.chat-row.user .chat-bubble a { text-decoration: underline; }
.chat-row.user .chat-bubble code { background: rgba(255,255,255,0.18); color: #fff; }
.ai-summary-loading { display: flex; align-items: center; gap: 8px; color: var(--db-ink-3); font-size: var(--text-sm); }
.ai-spin { width: 14px; height: 14px; border: 2px solid rgba(11,22,40,0.12); border-top-color: var(--orange-500); border-radius: 50%; animation: ai-spin 0.7s linear infinite; flex-shrink: 0; }
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* Two-or-three-way segmented switch (SMS vs email, and similar). Same shape as
   .view-switch on the calendar, but sized for a form row. */
.seg-control {
  display: inline-flex; gap: 3px; padding: 3px;
  background: rgba(11,22,40,0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.seg-control button {
  padding: 0.42rem 0.95rem; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 650; color: var(--white-50);
  white-space: nowrap; transition: all var(--transition-fast);
}
.seg-control button:hover { color: var(--white-90); }
.seg-control button.active {
  background: var(--accent-grad-sm); color: #fff;
  background-origin: border-box;
}
:root[data-theme="dark"] .seg-control { background: rgba(255,255,255,0.05); }

.auto-channel-row { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); flex-wrap: wrap; }
.auto-channel-label { font-size: var(--text-sm); font-weight: 600; color: var(--white-70); }

.var-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
.var-chip-row .tag-chip { cursor: pointer; font-family: var(--font-mono); }
.var-chip-row .tag-chip:hover { background: rgba(var(--orange-rgb), 0.1); border-color: rgba(var(--orange-rgb), 0.3); color: var(--orange-700); }

.tag-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: rgba(11,22,40,0.03);
  border: 1px solid var(--glass-border);
  color: var(--white-70);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  transition: all var(--transition-fast);
}
.tag-chip:hover { border-color: var(--white-30); color: var(--white-90); }
.tag-chip.active { background: rgba(var(--orange-rgb), 0.14); border-color: var(--orange-500); color: var(--orange-700); }
.tag-chip .x { opacity: 0.7; }

/* Compact tags under a name in a table row. Deliberately much smaller than a
   .badge: at full size three of them turn every row into a three-line block and
   the table stops scanning as a table. */
.row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.row-tag {
  font-size: 10px; font-weight: 650; line-height: 1.5;
  padding: 1px 6px; border-radius: var(--radius-pill);
  background: rgba(11,22,40,0.05);
  border: 1px solid var(--white-08);
  color: var(--white-50);
  white-space: nowrap;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}
.row-tag-more { cursor: help; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .row-tag { background: rgba(255,255,255,0.07); }

/* Sort dropdown in a filter bar. */
/* "optional" marker next to a label, so what's actually required is obvious
   without reading every field. */
.opt { font-size: 11px; font-weight: 600; color: var(--white-30); text-transform: uppercase; letter-spacing: 0.04em; margin-left: 6px; }

.sort-wrap { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.sort-label { font-size: var(--text-sm); color: var(--white-50); font-weight: 600; white-space: nowrap; }
.sort-wrap .select { width: auto; min-width: 172px; }
@media (max-width: 640px) {
  .sort-wrap { width: 100%; }
  .sort-wrap .select { flex: 1; min-width: 0; }
}

/* Tag picker — chips act as toggle buttons inside forms (see DF.tagPicker). */
.tag-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-picker:empty::after { content: "No tags yet."; font-size: var(--text-xs); color: var(--white-50); }
.tag-pick { cursor: pointer; user-select: none; position: relative; padding-left: 1.75rem; }
/* Empty check circle, filled with the accent once selected */
.tag-pick::before {
  content: ""; position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--white-30); transition: all var(--transition-fast);
}
.tag-pick:hover::before { border-color: var(--navy-500); }
.tag-pick.active {
  background: linear-gradient(120deg, rgba(20,35,56,0.10) 0%, rgba(var(--orange-rgb),0.13) 100%);
  border-color: var(--navy-500);
  color: var(--navy-600);
}
.tag-pick.active::before {
  background: var(--accent-grad-sm); border-color: transparent;
  box-shadow: inset 0 0 0 2px #fff;
}
.tag-pick:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }

/* Customer picker — search-or-add combobox on the Add Order form. */
.cust-picker { position: relative; }
.cust-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); max-height: 240px; overflow-y: auto; z-index: 40;
  padding: 6px;
}
.cust-result {
  display: flex; flex-direction: column; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--radius-sm); gap: 1px;
}
.cust-result:hover, .cust-result.active { background: rgba(11,22,40,0.05); }
.cust-result .name { font-size: var(--text-sm); font-weight: 600; color: var(--white-90); }
.cust-result .sub { font-size: var(--text-xs); color: var(--white-50); }
.cust-result-add {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600; color: var(--orange-700);
  border-top: 1px solid var(--glass-border); margin-top: 4px; padding-top: 10px;
}
.cust-result-add:hover { background: rgba(var(--orange-rgb), 0.08); }
.cust-results-empty { padding: 10px 10px 6px; font-size: var(--text-xs); color: var(--white-50); }
.cust-selected {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: rgba(11,22,40,0.03); border: 1px solid var(--glass-border);
}
.cust-selected .name { font-size: var(--text-sm); font-weight: 600; color: var(--white-90); }
.cust-selected .sub { font-size: var(--text-xs); color: var(--white-50); }
.cust-selected .badge { margin-left: 8px; }
.cust-new-fields { border: 1px dashed var(--glass-border); border-radius: var(--radius-sm); padding: var(--space-4); margin-top: var(--space-3); }
.cust-new-fields .hint { display: block; margin-bottom: var(--space-3); }

/* ---------------------------------- Cards ---------------------------------- */
.card {
  background: var(--card-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.stat-card {
  background: var(--card-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-card);
}
.stat-card .stat-label { font-size: var(--text-sm); color: var(--white-50); font-weight: 500; }
.stat-card .stat-value { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: 600; color: var(--white-90); }
.stat-card .stat-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.stat-trend { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; }
/* .good / .bad reflect sentiment (e.g. falling costs = good); the arrow icon inside separately reflects literal direction */
.stat-trend.good { color: var(--success-text); }
.stat-trend.bad { color: var(--danger-text); }
.stat-trend svg { width: 14px; height: 14px; }
.stat-card .sparkline { width: 100%; height: 36px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

/* ---------------------------------- Tables ---------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white-50);
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--glass-border);
  white-space: nowrap;
}
.table td {
  padding: var(--space-4);
  border-bottom: 1px solid rgba(11,22,40,0.06);
  font-size: var(--text-sm);
  color: var(--white-90);
  vertical-align: middle;
}
.table tbody tr { transition: background var(--transition-fast); }
.table tbody tr.is-link { cursor: pointer; }
.table tbody tr.is-link:hover { background: rgba(11,22,40,0.025); }
.table tbody tr:last-child td { border-bottom: none; }
.table td.num, .table th.num { font-family: var(--font-mono); }

.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent-grad-sm);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  flex-shrink: 0;
}

.row-name { display: flex; align-items: center; gap: var(--space-3); }
.row-name .meta { display: flex; flex-direction: column; }
.row-name .meta .primary { color: var(--white-90); font-weight: 600; }
.row-name .meta .secondary { color: var(--white-50); font-size: var(--text-xs); }

/* Empty / no-results states */
.empty-state {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  color: var(--white-50);
}
.empty-state .icon-wrap {
  width: 64px; height: 64px; margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: rgba(var(--orange-rgb), 0.08);
  border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange-700);
}
.empty-state h3 { color: var(--white-90); font-size: var(--text-lg); margin-bottom: var(--space-2); }

/* ------------------------------- Icon helpers -------------------------------- */
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ==========================================================================
   MARKETING (public zone)
   ========================================================================== */

.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  margin: 0;
  border-radius: 0;
  background: #fff;
  border: none;
  border-bottom: 1px solid rgba(11,22,40,0.1);
  box-shadow: var(--shadow-md);
}
.navbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  max-width: calc(var(--container-max) + 2 * var(--space-5));
  margin-inline: auto;
}
.logo { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--white-90); }
.logo .logo-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--navy-950); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--text-base); }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a { font-size: var(--text-sm); font-weight: 500; color: var(--white-70); transition: color var(--transition-fast); }
.nav-links a:hover { color: var(--white-90); }
.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Mobile nav drawer (marketing) — flat white, matches the rest of the page */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: #fff;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}
.mobile-nav.open { display: flex; }
.mobile-nav a { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--white-90); }
.mobile-nav .close-btn { position: absolute; top: var(--space-6); right: var(--space-6); }

/* Hero — full-bleed animated WebGL gradient behind the whole section, with a
   scrim wash over the text column so navy copy stays readable against a
   bright, busy background. */
.hero { position: relative; background: #F8FAFF; padding-top: calc(var(--topbar-h) + var(--space-9)); padding-bottom: var(--space-9); overflow: hidden; }

/* Full-hero panel the gradient lives in. Background matches the shader's
   own bg uniform so there's no flash/gap before WebGL initialises (or a
   plain panel colour if it's unsupported). */
.hero-ribbon-panel { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: var(--brand-indigo); }

/* Animated WebGL gradient (assets/js/webgl-gradient.js) — simplex-noise
   shader blending the brand palette with a vignette + film-grain pass,
   mounted onto the canvas by initGradientCanvas() in app.js (and inline on
   login.html, which doesn't load app.js). The wrapper carries [data-mesh]
   for the existing JS mouse-parallax translate, kept off the canvas itself
   since the shader already owns its own continuous motion. */
.velaris-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.velaris-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Light wash over the text column only — fades out by the time it reaches
   the laptop mockup so the gradient stays fully vivid there. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(248,250,255,0.95) 0%,
    rgba(248,250,255,0.88) 28%,
    rgba(248,250,255,0.5) 50%,
    rgba(248,250,255,0.1) 70%,
    rgba(248,250,255,0) 86%);
}

.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-700); background: rgba(var(--orange-rgb), 0.12); border: 1px solid rgba(var(--orange-rgb), 0.3); padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); margin-bottom: var(--space-5); }
.hero h1 { font-size: 3.4rem; margin-bottom: var(--space-5); color: var(--navy-950); min-height: 4.6em; }
.hero h1 .accent { color: var(--orange-600); text-decoration: underline; text-decoration-color: rgba(var(--orange-rgb), 0.4); text-underline-offset: 6px; }
.typing-cursor { display: inline-block; width: 3px; height: 0.9em; background: currentColor; margin-left: 4px; vertical-align: -0.1em; animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .typing-cursor { animation: none; opacity: 0.6; } }
.hero .lede { font-size: var(--text-lg); max-width: 540px; margin-bottom: var(--space-6); color: var(--white-70); }
.hero-ctas { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-7); flex-wrap: wrap; }
.hero-proof { display: flex; align-items: center; gap: var(--space-5); color: var(--white-50); font-size: var(--text-sm); }
.hero-proof strong { color: var(--navy-950); font-family: var(--font-mono); }

.hero-visual { position: relative; }

/* Laptop mockup — screen + base drawn in CSS, holding a condensed replica of
   the real Overview page (sidebar rail, topbar, KPI tiles, a chart panel,
   order-status list) instead of a generic floating graph card. */
.laptop-mock {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  transform: perspective(1400px) rotateX(3deg);
  transform-origin: bottom center;
}
.laptop-screen {
  position: relative;
  background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
  border-radius: 18px 18px 6px 6px;
  padding: 10px 10px 0;
  box-shadow: var(--shadow-lg);
}
.laptop-chrome { display: flex; gap: 6px; padding: 6px 6px 8px; }
.laptop-chrome span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.laptop-app {
  display: flex;
  background: var(--bg-page);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  min-height: 340px;
}
.laptop-sidebar {
  width: 44px;
  flex-shrink: 0;
  background: var(--navy-950);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}
.laptop-logo-dot { width: 18px; height: 18px; border-radius: 6px; background: var(--accent-grad-sm); margin-bottom: 6px; }
.laptop-nav-icon { width: 20px; height: 20px; border-radius: 6px; background: rgba(255,255,255,0.08); }
.laptop-nav-icon.active { background: var(--accent-grad-sm); }
.laptop-main { flex: 1; min-width: 0; padding: 14px 16px; }
.laptop-app-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.laptop-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--navy-950); }
.laptop-search { flex: 1; height: 18px; border-radius: 999px; background: rgba(11,22,40,0.05); border: 1px solid var(--glass-border); }
.laptop-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-grad-sm); color: #fff; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.laptop-greeting { font-size: 12px; font-weight: 600; color: var(--navy-950); margin-bottom: 12px; }
.laptop-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.laptop-kpi { background: rgba(11,22,40,0.03); border: 1px solid rgba(11,22,40,0.08); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.laptop-kpi-label { font-size: 7px; letter-spacing: 0.04em; color: var(--white-50); font-weight: 600; }
.laptop-kpi-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--navy-950); }
.laptop-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.laptop-panel { background: #fff; border: 1px solid rgba(11,22,40,0.08); border-radius: 8px; padding: 10px; }
.laptop-panel-head { display: block; font-size: 9px; font-weight: 700; color: var(--white-70); margin-bottom: 8px; }
.laptop-mini-chart { display: flex; align-items: flex-end; gap: 5px; height: 64px; }
.laptop-mini-bar { flex: 1; background: var(--accent-grad-sm); border-radius: 3px 3px 0 0; transform-origin: bottom; animation: laptop-bar-grow 700ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes laptop-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.laptop-status-list { display: flex; flex-direction: column; gap: 8px; }
.laptop-status-row { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 600; color: var(--white-70); }
.laptop-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.laptop-status-dot.confirmed { background: var(--info-500); }
.laptop-status-dot.completed { background: var(--success-500); }
.laptop-status-dot.pending { background: var(--warning-500); }
.laptop-status-count { margin-left: auto; font-family: var(--font-mono); color: var(--navy-950); }

.laptop-base {
  position: relative;
  height: 14px;
  background: linear-gradient(180deg, #DCE1EA, #B9C1CF);
  border-radius: 0 0 10px 10px;
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
}
.laptop-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 5px; background: #B9C1CF; border-radius: 0 0 8px 8px; }

@media (prefers-reduced-motion: reduce) {
  .laptop-mini-bar { animation: none; }
}
@media (max-width: 640px) {
  .laptop-grid { grid-template-columns: 1fr; }
}

/* Logo strip */
.logo-strip-wrap { padding-block: var(--space-7); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); }
.logo-strip-label { text-align: center; font-size: var(--text-sm); color: var(--white-50); margin-bottom: var(--space-5); }
.logo-marquee { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; align-items: center; gap: var(--space-8); width: max-content; animation: marquee 32s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-item { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--white-30); filter: grayscale(1); white-space: nowrap; }

/* Feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.feature-grid .card, .pricing-grid .card, .testimonial-grid .card { box-shadow: none; }
.feature-card { padding: var(--space-5); }
.feature-icon { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--navy-950); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.feature-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.feature-card p { font-size: var(--text-sm); }

/* Demo */
.demo-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center; }
.video-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: var(--navy-950);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4);
  overflow: hidden;
}
.play-button {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--orange-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.play-button svg { margin-left: 3px; }
.play-button:hover { background: var(--orange-600); transform: scale(1.06); }
.video-placeholder-label { color: rgba(255,255,255,0.7); font-size: var(--text-sm); font-weight: 500; }

/* Homepage analytics preview (demo section) */
.dash-preview { display: flex; flex-direction: column; gap: var(--space-4); }
.dash-preview-panel { background: #fff; border: 1px solid var(--glass-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-5); }
.dash-preview-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.dash-preview-row h4 { font-family: var(--font-display); font-size: var(--text-base); color: var(--white-90); }
.dash-preview-tag { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--white-50); background: rgba(11,22,40,0.04); border: 1px solid var(--glass-border); border-radius: var(--radius-pill); padding: 0.2rem 0.7rem; }
.service-bar-row { margin-bottom: var(--space-4); }
.service-bar-row:last-child { margin-bottom: 0; }
.service-bar-label { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); font-weight: 600; color: var(--white-90); margin-bottom: var(--space-2); }
.service-bar-label span:last-child { font-family: var(--font-mono); color: var(--white-50); font-weight: 500; }

/* ==========================================================================
   Dashboard overview — refined design system
   Prefix: .db-*  (scoped so restyling the dashboard never leaks elsewhere.)

   Readability rules held throughout:
   - Body/label text never lighter than #64748B on white (WCAG AA at these sizes)
   - Numerals use tabular figures so columns align and don't jitter on update
   - Nothing below 12px; primary values are large and high-contrast
   ========================================================================== */
:root {
  --db-bg:        #F6F8FB;
  --db-surface:   #FFFFFF;
  --db-line:      rgba(16, 24, 40, 0.07);
  --db-ink:       #0F172A;   /* primary text */
  --db-ink-2:     #475569;   /* secondary text */
  --db-ink-3:     #64748B;   /* muted labels — still AA on white */
  --db-shadow:    0 1px 2px rgba(16,24,40,0.04), 0 4px 14px rgba(16,24,40,0.05);
  --db-shadow-lg: 0 2px 4px rgba(16,24,40,0.04), 0 12px 28px rgba(16,24,40,0.08);
  --db-radius:    16px;
}

body.app-body { background: var(--db-bg); }
body.app-body::before { display: none; }           /* drop the old ambient wash */
body.app-body .topbar { background: rgba(246,248,251,0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.app-body .sidebar { background: var(--db-surface); }

.db-panel {
  background: var(--db-surface);
  border: 1px solid var(--db-line);
  border-radius: var(--db-radius);
  box-shadow: var(--db-shadow);
  padding: 22px;
  margin-bottom: 20px;
}
.db-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.db-panel-head h2 {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 650; color: var(--db-ink);
  letter-spacing: -0.011em; line-height: 1.3;
}
.db-panel-sub { font-size: 12px; font-weight: 500; color: var(--db-ink-3); margin-top: 3px; letter-spacing: -0.005em; }

.db-legend { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.db-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--db-ink-2); letter-spacing: -0.005em; }
.db-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex-shrink: 0; }

/* Every content row uses the same split so panel edges line up down the page.
   align-items: stretch (the default) is load-bearing here — paired panels hold
   different amounts of content, and letting them size independently leaves a
   ragged step down the middle of the page. */
.db-grid      { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.db-grid-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.db-grid > .db-panel, .db-grid-wide > .db-panel { margin-bottom: 20px; }

/* ------------------------------ Upcoming Orders ------------------------------
   Sits above the range control — always shows the next 7 days regardless of the
   reporting period selected below it. */
.db-upcoming-section { margin-bottom: 26px; }
.db-upcoming-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.db-upcoming-head h2 { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--db-ink); letter-spacing: -0.015em; }

.db-upcoming-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.db-up-card {
  background: var(--db-surface);
  border: 1px solid var(--db-line);
  border-left: 4px solid #CBD5E1;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--db-shadow);
  transition: box-shadow 180ms ease, transform 180ms ease;
  display: block;
}
.db-up-card:hover { box-shadow: var(--db-shadow-lg); transform: translateY(-1px); }
.db-up-card.is-now      { border-left-color: #12805A; background: #FBFEFC; }
.db-up-card.is-soon     { border-left-color: #C79413; }
.db-up-card.is-tomorrow { border-left-color: #2563EB; }
.db-up-card.is-later    { border-left-color: #CBD5E1; }

.db-up-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.db-up-name { font-size: 15px; font-weight: 700; color: var(--db-ink); letter-spacing: -0.015em; line-height: 1.25; }
.db-up-service { font-size: 13px; color: #2563EB; font-weight: 600; margin-top: 2px; }

/* Countdown pill — the live "in 2 hours" / "now" indicator */
.db-up-when {
  flex-shrink: 0; font-size: 11.5px; font-weight: 700; letter-spacing: -0.005em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent; font-variant-numeric: tabular-nums;
}
.db-up-when.now      { background: #E7F8ED; color: #0E6344; border-color: #BFE7D2; }
.db-up-when.soon     { background: #FEF8E9; color: #7A5D12; border-color: #F1DDAE; }
.db-up-when.tomorrow { background: #EBF2FE; color: #1D4FB8; border-color: #C9DCFB; }
.db-up-when.later    { background: #F4F6F8; color: #475569; border-color: #E1E6EC; }

.db-up-meta { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.db-up-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--db-ink-2); }
.db-up-line svg { width: 14px; height: 14px; stroke: #94A3B8; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.db-up-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-up-line strong { font-weight: 600; color: var(--db-ink); }

.db-up-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid var(--db-line); }
.db-up-cars { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--db-ink-2); }
.db-up-cars svg { width: 15px; height: 15px; stroke: #64748B; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* An explicit display value beats the UA stylesheet's [hidden] { display:none },
   so re-assert it for any db-* component that sets its own display. */
.db-upcoming-grid[hidden], .db-upcoming-empty[hidden],
.db-grid[hidden], .db-grid-wide[hidden], .db-panel[hidden],
.db-kpi-grid[hidden], .db-status-grid[hidden] { display: none; }
.field[hidden] { display: none; }

.db-upcoming-empty {
  display: flex; align-items: center; gap: 14px;
  background: var(--db-surface); border: 1px dashed rgba(16,24,40,0.14);
  border-radius: 14px; padding: 20px 22px; color: var(--db-ink-3);
}
.db-upcoming-empty svg { stroke: #94A3B8; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.db-upcoming-empty strong { display: block; font-size: 14px; color: var(--db-ink); font-weight: 650; }
.db-upcoming-empty span { font-size: 13px; }

/* --------------------------------- Range bar -------------------------------- */
.db-range-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.db-range-label { font-size: 13px; font-weight: 600; color: var(--db-ink-3); letter-spacing: -0.005em; }
.db-range-bar .db-select { width: auto; min-width: 186px; margin-bottom: 0; }

.db-select {
  width: 100%; margin-bottom: 18px;
  padding: 10px 38px 10px 13px;
  font-size: 13px; font-weight: 550; color: var(--db-ink);
  background: var(--db-surface);
  border: 1px solid var(--db-line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  transition: border-color 140ms ease, box-shadow 140ms ease;
  cursor: pointer;
}
.db-select:hover { border-color: rgba(16,24,40,0.16); }
.db-select:focus { outline: none; border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,0.14); }

/* ----------------------------------- KPIs ----------------------------------- */
.db-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
.db-kpi {
  background: var(--db-surface);
  border: 1px solid var(--db-line);
  border-radius: var(--db-radius);
  box-shadow: var(--db-shadow);
  padding: 20px;
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.db-kpi:hover { box-shadow: var(--db-shadow-lg); transform: translateY(-1px); }
.db-kpi-top { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.db-kpi-icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.db-kpi-icon svg { width: 15px; height: 15px; stroke-width: 2; }
.db-kpi-icon.rev { background: #E9F7EF; color: #12805A; }
.db-kpi-icon.exp { background: #FDECEC; color: #C33C34; }
.db-kpi-icon.prof { background: #E8F1FE; color: #2563EB; }
.db-kpi-icon.ord { background: #F2EEFC; color: #6D40C8; }
.db-kpi-label { font-size: 13px; font-weight: 600; color: var(--db-ink-3); letter-spacing: -0.005em; }
.db-kpi-value {
  font-size: 30px; font-weight: 700; color: var(--db-ink);
  letter-spacing: -0.028em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.db-kpi-foot { display: flex; align-items: center; gap: 7px; margin-top: 11px; }
.db-kpi-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 650; padding: 3px 7px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.db-kpi-trend svg { width: 11px; height: 11px; stroke-width: 2.6; }
.db-kpi-trend.up   { background: #E9F7EF; color: #12805A; }
.db-kpi-trend.down { background: #FDECEC; color: #C33C34; }
.db-kpi-trend.flat { background: #F1F4F8; color: var(--db-ink-2); }
.db-kpi-note { font-size: 12px; color: var(--db-ink-3); font-weight: 500; }

/* ------------------------------- Status tiles -------------------------------
   Soft tint keeps at-a-glance colour scanning; the dot + strong figure keep it
   legible for anyone who can't rely on hue alone. */
.db-status-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; margin-bottom: 20px; }
.db-status-tile {
  border-radius: 14px; padding: 15px 16px;
  border: 1px solid transparent;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.db-status-tile:hover { transform: translateY(-1px); box-shadow: var(--db-shadow); }
.db-status-head { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.db-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.db-status-label { font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; }
.db-status-value { font-size: 27px; font-weight: 700; letter-spacing: -0.028em; line-height: 1; font-variant-numeric: tabular-nums; }

.db-status-tile.pending { background: #FEF8E9; border-color: #F6E4B8; }
.db-status-tile.pending .db-status-dot { background: #C79413; }
.db-status-tile.pending .db-status-label { color: #8A6A17; }
.db-status-tile.pending .db-status-value { color: #7A5D12; }

.db-status-tile.confirmed { background: #EBF2FE; border-color: #C9DCFB; }
.db-status-tile.confirmed .db-status-dot { background: #2563EB; }
.db-status-tile.confirmed .db-status-label { color: #2158CC; }
.db-status-tile.confirmed .db-status-value { color: #1D4FB8; }

.db-status-tile.completed { background: #EAF8F0; border-color: #BFE7D2; }
.db-status-tile.completed .db-status-dot { background: #12805A; }
.db-status-tile.completed .db-status-label { color: #11734F; }
.db-status-tile.completed .db-status-value { color: #0E6344; }

.db-status-tile.paid { background: #E6FBF8; border-color: #B4EEE6; }
.db-status-tile.paid .db-status-dot { background: #0F9488; }
.db-status-tile.paid .db-status-label { color: #0B7A70; }
.db-status-tile.paid .db-status-value { color: #096A61; }

.db-status-tile.postponed { background: #F4F6F8; border-color: #E1E6EC; }
.db-status-tile.postponed .db-status-dot { background: #64748B; }
.db-status-tile.postponed .db-status-label { color: #52616F; }
.db-status-tile.postponed .db-status-value { color: #3E4A57; }

.db-status-tile.cancelled { background: #FDEEED; border-color: #F6CFCC; }
.db-status-tile.cancelled .db-status-dot { background: #C33C34; }
.db-status-tile.cancelled .db-status-label { color: #AE342C; }
.db-status-tile.cancelled .db-status-value { color: #932B24; }

.db-status-tile.total { background: var(--db-surface); border-color: var(--db-line); box-shadow: 0 1px 2px rgba(16,24,40,0.04); }
.db-status-tile.total .db-status-dot { background: var(--db-ink); }
.db-status-tile.total .db-status-label { color: var(--db-ink-3); }
.db-status-tile.total .db-status-value { color: var(--db-ink); }

/* -------------------------------- By Service -------------------------------- */
.db-service-row { margin-bottom: 19px; }
.db-service-row:last-child { margin-bottom: 0; }
.db-service-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 8px; }
/* Belt-and-braces against the Chart.js resize feedback loop: a responsive
   canvas inside an auto-height panel can grow itself a few pixels per frame
   forever. The options are set correctly (see dashboard.html), but a hard
   ceiling means a future chart added with the wrong options degrades to
   "slightly squashed" rather than "eats the page". */
.db-panel canvas { max-height: 340px; }

/* Workload strip under the "jobs per day" chart on Overview. */
.db-worknums { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--db-line); }
.db-worknums > div { display: flex; flex-direction: column; gap: 2px; }
.db-worknums .n { font-size: 20px; font-weight: 700; color: var(--db-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.db-worknums .n.warn { color: var(--danger-text); }
.db-worknums .l { font-size: 11.5px; font-weight: 600; color: var(--db-ink-3); }
.db-order-amount.muted { color: var(--db-ink-3); font-weight: 600; font-size: 12.5px; }

.db-service-label .name { font-weight: 600; color: var(--db-ink); letter-spacing: -0.005em; }
.db-service-label .val { color: var(--db-ink-3); font-weight: 550; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-service-track { height: 8px; border-radius: 999px; background: #EEF1F5; overflow: hidden; }
.db-service-fill { height: 100%; border-radius: 999px; transition: width 500ms cubic-bezier(.22,.8,.28,1); }

/* ------------------------------- Recent Orders ------------------------------- */
.db-orders { display: flex; flex-direction: column; }
.db-order-row {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 10px; margin-inline: -10px;
  border-radius: 10px;
  border-bottom: 1px solid var(--db-line);
  transition: background 140ms ease;
}
.db-order-row:last-child { border-bottom: none; }
.db-order-row:hover { background: #F8FAFC; }
.db-order-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 650; letter-spacing: -0.01em;
  background: #EEF2F7; color: #475569;
}
.db-order-main { flex: 1; min-width: 0; }
.db-order-name { font-size: 14px; font-weight: 600; color: var(--db-ink); letter-spacing: -0.008em; }
.db-order-sub { font-size: 12.5px; color: var(--db-ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-order-right { text-align: right; flex-shrink: 0; }
.db-order-amount { font-size: 14px; font-weight: 700; color: var(--db-ink); margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }

.db-badge {
  display: inline-block; font-size: 11.5px; font-weight: 650;
  padding: 3px 9px; border-radius: 999px; letter-spacing: -0.005em;
  border: 1px solid transparent;
}
.db-badge.pending      { background: #FEF8E9; color: #8A6A17; border-color: #F1DDAE; }
.db-badge.completed    { background: #EAF8F0; color: #11734F; border-color: #BFE7D2; }
.db-badge.confirmed    { background: #EBF2FE; color: #2158CC; border-color: #C9DCFB; }
.db-badge.paid         { background: #E6FBF8; color: #0B7A70; border-color: #B4EEE6; }
.db-badge.cancelled    { background: #FDEEED; color: #AE342C; border-color: #F6CFCC; }
.db-badge.postponed    { background: #F4F6F8; color: #52616F; border-color: #E1E6EC; }

/* ----------------------------- Monthly Breakdown ----------------------------- */
.db-breakdown { width: 100%; border-collapse: collapse; }
.db-breakdown th {
  font-size: 11px; color: var(--db-ink-3); font-weight: 650;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0 14px 11px; border-bottom: 1px solid var(--db-line);
  white-space: nowrap;
}
.db-breakdown td {
  font-size: 13.5px; padding: 13px 14px;
  border-bottom: 1px solid rgba(16,24,40,0.045);
  color: var(--db-ink); font-variant-numeric: tabular-nums;
}
.db-breakdown tbody tr { transition: background 140ms ease; }
.db-breakdown tbody tr:hover { background: #F8FAFC; }
.db-breakdown tbody tr:last-child td { border-bottom: none; }
.db-breakdown td:first-child { font-weight: 600; letter-spacing: -0.005em; }
.db-breakdown td.rev   { color: #12805A; font-weight: 600; }
.db-breakdown td.exp   { color: #C33C34; font-weight: 600; }
.db-breakdown td.prof  { color: #2563EB; font-weight: 700; }
.db-breakdown td.count { color: var(--db-ink-2); }

/* ------------------------------- Notifications ------------------------------- */
.db-panel .notif-item { border-radius: 10px; padding: 12px 10px; margin-inline: -10px; }
.db-panel .notif-item:hover { background: #F8FAFC; }
.db-panel .notif-item .icon-wrap { width: 34px; height: 34px; border-radius: 10px; background: #F1F5F9; border: none; color: var(--db-ink-2); }
.db-panel .notif-item .notif-msg { font-size: 13.5px; color: var(--db-ink); line-height: 1.45; letter-spacing: -0.005em; }
.db-panel .notif-item .notif-time { font-size: 12px; color: var(--db-ink-3); margin-top: 3px; }
.db-panel .notif-item.unread::before { background: #F97316; }

/* --------------------------------- Greeting ---------------------------------- */
.app-body .greeting-block { margin-bottom: 24px; }
.app-body .greeting-block h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--db-ink); }
.app-body .greeting-block p { font-size: 14.5px; color: var(--db-ink-3); margin-top: 5px; letter-spacing: -0.005em; }

/* --------------------------------- Responsive --------------------------------- */
@media (max-width: 1439px) {
  .db-upcoming-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1279px) {
  .db-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023px) {
  .db-status-grid { grid-template-columns: repeat(3, 1fr); }
  .db-grid, .db-grid-wide { grid-template-columns: 1fr; }
  .db-upcoming-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .db-kpi-grid, .db-status-grid { grid-template-columns: repeat(2, 1fr); }
  .db-panel { padding: 18px; }
  .app-body .greeting-block h1 { font-size: 24px; }
  /* Keep the breakdown a real table on mobile — the generic stacked-card
     treatment makes month-over-month comparison much harder to read. */
  .db-breakdown, .db-breakdown tbody, .db-breakdown tr { display: table; width: 100%; }
  .db-breakdown thead { display: table-header-group; }
  .db-breakdown tr { border: none; margin: 0; padding: 0; background: transparent; box-shadow: none; }
  .db-breakdown td { display: table-cell; text-align: left; padding: 11px 10px; font-size: 12.5px; }
  .db-breakdown td::before { display: none; }
  .db-breakdown th { padding: 0 10px 9px; }
}

/* Homepage "live dashboard" preview (period switcher, status tiles, orders, breakdown table) */
.hp-toolbar { display: flex; justify-content: center; margin-bottom: var(--space-6); }

.hp-status-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); margin-bottom: var(--space-6); }
.hp-status-tile { border-radius: var(--radius-md); padding: var(--space-4); text-align: center; }
.hp-status-tile .hp-status-label { display: block; font-size: var(--text-xs); font-weight: 600; margin-bottom: 6px; }
.hp-status-tile .hp-status-value { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700; }
.hp-status-tile.confirmation { background: #FFF6DA; }
.hp-status-tile.confirmation .hp-status-label, .hp-status-tile.confirmation .hp-status-value { color: #8A6D1D; }
.hp-status-tile.confirmed { background: #E3ECFD; }
.hp-status-tile.confirmed .hp-status-label, .hp-status-tile.confirmed .hp-status-value { color: #2451C4; }
.hp-status-tile.completed { background: #DFF5E7; }
.hp-status-tile.completed .hp-status-label, .hp-status-tile.completed .hp-status-value { color: #1E8A4C; }
.hp-status-tile.postponed { background: #F1F2F4; }
.hp-status-tile.postponed .hp-status-label, .hp-status-tile.postponed .hp-status-value { color: #5B6472; }
.hp-status-tile.cancelled { background: #FBE4E3; }
.hp-status-tile.cancelled .hp-status-label, .hp-status-tile.cancelled .hp-status-value { color: #C0392B; }
.hp-status-tile.total { background: #fff; border: 1px solid var(--glass-border); }
.hp-status-tile.total .hp-status-label { color: var(--white-50); }
.hp-status-tile.total .hp-status-value { color: var(--white-90); }

.hp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
.hp-legend { display: flex; gap: 10px; font-size: var(--text-xs); color: var(--white-50); font-weight: 600; }
.hp-legend span { display: flex; align-items: center; gap: 4px; }
.hp-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

.hp-orders-list { display: flex; flex-direction: column; }
.hp-order-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0 var(--space-3) var(--space-3); border-bottom: 1px solid rgba(11,22,40,0.06); border-left: 3px solid transparent; }
.hp-order-row:last-child { border-bottom: none; }
.hp-order-row.status-now { border-left-color: #3FB27F; }
.hp-order-row.status-next { border-left-color: #E8B93A; }
.hp-order-row .hp-order-name { font-weight: 600; color: var(--white-90); font-size: var(--text-sm); }
.hp-order-row .hp-order-sub { font-size: var(--text-xs); color: var(--white-50); margin-top: 2px; }
.hp-order-row .hp-order-amount { font-family: var(--font-mono); font-weight: 600; color: var(--white-90); font-size: var(--text-sm); white-space: nowrap; }

.hp-breakdown-table td.rev { color: #1E8A4C; }
.hp-breakdown-table td.exp { color: #C0392B; }
.hp-breakdown-table td.prof { color: #2451C4; font-weight: 600; }

@media (max-width: 1023px) {
  .hp-status-grid { grid-template-columns: repeat(3, 1fr); }
  .hp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hp-status-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: stretch; }
.price-card { padding: var(--space-6); display: flex; flex-direction: column; position: relative; }
.price-card.featured { border: 2px solid var(--navy-950); box-shadow: none; transform: translateY(-8px); }
.price-tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--orange-500), var(--orange-600)); color: #fff; font-size: var(--text-xs); font-weight: 700; padding: 0.35rem 1rem; border-radius: var(--radius-pill); white-space: nowrap; }
.price-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.price-card .price-desc { font-size: var(--text-sm); margin-bottom: var(--space-5); }
.price-amount { font-family: var(--font-mono); font-size: var(--text-4xl); color: var(--white-90); margin-bottom: var(--space-5); }
.price-amount span { font-size: var(--text-base); color: var(--white-50); font-family: var(--font-body); }
.price-features { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); flex: 1; }
.price-features li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--white-70); }
.price-features li svg { width: 18px; height: 18px; color: var(--success-500); flex-shrink: 0; margin-top: 2px; }

/* Testimonials */
.testimonial-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.testimonial-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.stars { display: flex; gap: 2px; color: var(--orange-500); }
.stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.testimonial-quote { font-size: var(--text-sm); color: var(--white-90); flex: 1; }
.testimonial-person { display: flex; align-items: center; gap: var(--space-3); }
.testimonial-person .meta .primary { color: var(--white-90); font-weight: 600; font-size: var(--text-sm); }
.testimonial-person .meta .secondary { color: var(--white-50); font-size: var(--text-xs); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-7); align-items: center; }
.contact-panel { padding: var(--space-6); }
.contact-points { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.contact-point { display: flex; align-items: center; gap: var(--space-3); color: var(--white-70); font-size: var(--text-sm); }
.contact-point .icon-wrap { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--navy-950); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-panel { box-shadow: none; }

/* Footer */
.site-footer { border-top: 1px solid rgba(11,22,40,0.1); padding-block: var(--space-8) var(--space-6); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-7); }
.footer-brand p { font-size: var(--text-sm); margin-top: var(--space-3); max-width: 280px; }
.footer-col h4 { font-size: var(--text-sm); color: var(--white-90); margin-bottom: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { font-size: var(--text-sm); color: var(--white-50); transition: color var(--transition-fast); }
.footer-col a:hover { color: var(--orange-700); }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(11,22,40,0.03); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; color: var(--white-70); }
.footer-social a:hover { border-color: var(--orange-500); color: var(--orange-700); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-6); border-top: 1px solid var(--glass-border); font-size: var(--text-xs); color: var(--white-50); }

/* ==========================================================================
   APP / DASHBOARD (authenticated zone)
   ========================================================================== */

body.app-body { display: flex; min-height: 100vh; background: var(--bg-page); }

/* Ambient background wash for the app zone (very subtle, static — no motion) */
body.app-body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 45% at 85% -10%, rgba(var(--orange-rgb), 0.05), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(31, 58, 95, 0.06), transparent 70%);
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--glass-fill);
  border-right: 1px solid var(--glass-border);
  transition: width var(--transition-med), transform var(--transition-med);
  overflow: hidden;
}
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }

.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-4); gap: var(--space-2); min-height: var(--topbar-h); border-bottom: 1px solid var(--glass-border); }
.sidebar .logo { white-space: nowrap; }
.sidebar.collapsed .logo-text, .sidebar.collapsed .nav-label, .sidebar.collapsed .sidebar-foot-text { display: none; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: 2px; min-height: 100px; }
/* Nav items are visible by default — applyNavPermissions() (app.js) hides
   anything a role isn't allowed to see once permissions are known. This used
   to default-hide everything until JS confirmed access, which meant any
   delay or failure in that check left the whole sidebar invisible. Showing
   everything up front and hiding restricted items a moment later is a far
   safer failure mode than a sidebar that silently never appears. */
.nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--white-70);
  font-size: var(--text-sm);
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.nav-item svg { flex-shrink: 0; }
.nav-item:hover { background: var(--white-06); color: var(--white-90); }
/* Active item: navy-weighted tint background. */
.nav-item.active {
  background: linear-gradient(90deg, rgba(var(--brand-indigo-rgb),0.12) 0%, rgba(var(--brand-orange-rgb),0.08) 100%);
  color: var(--navy-600);
  border-left-color: transparent;
}
.sidebar.collapsed .nav-item { justify-content: center; }

.sidebar-foot { padding: var(--space-4) var(--space-3); border-top: 1px solid var(--glass-border); }
.sidebar-toggle { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); color: var(--white-50); font-size: var(--text-xs); font-weight: 600; }
.sidebar-toggle:hover { background: var(--white-06); color: var(--white-90); }
.sidebar.collapsed .sidebar-toggle { justify-content: center; }
.sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }

/* Mobile sidebar overlay — kept as a dark scrim (standard dimming pattern) regardless of theme */
.sidebar-overlay { position: fixed; inset: 0; background: rgba(11,22,40,0.45); z-index: 55; display: none; }
.sidebar-overlay.open { display: block; }

/* Main content */
.main-content { flex: 1; min-width: 0; margin-left: var(--sidebar-w); transition: margin-left var(--transition-med); display: flex; flex-direction: column; }
body.sidebar-collapsed .main-content { margin-left: var(--sidebar-w-collapsed); }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--space-6);
  background: var(--glass-fill);
  border-bottom: 1px solid var(--glass-border);
  gap: var(--space-4);
}
.topbar-left { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.topbar-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--white-90); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hamburger-btn { display: none; }
.topbar-right { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

/* `position: relative` anchors the results panel. `line-height: 1` on the box
   is what actually fixes the icon sitting above the text: the label inherited
   body's 1.55 line-height, which makes the input's line box taller than the
   20px icon, and `align-items: center` then centres two boxes of different
   heights against each other rather than aligning what you see. */
.topbar-search {
  position: relative;
  display: flex; align-items: center; gap: var(--space-2);
  background: rgba(11,22,40,0.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem; width: 260px;
  color: var(--white-50);
  line-height: 1;
}
.topbar-search input {
  background: transparent; border: none; outline: none;
  color: var(--white-90); font-size: var(--text-sm);
  width: 100%; min-width: 0;
  line-height: 1.2;
  /* Safari puts a magnifier and a cancel button inside type=search and adds
     its own vertical padding; none of that lines up with our own icon. */
  appearance: none; -webkit-appearance: none;
  padding: 0; margin: 0; height: 20px;
}
.topbar-search input::-webkit-search-decoration,
.topbar-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.topbar-search input::placeholder { color: var(--white-30); }
.topbar-search svg { flex-shrink: 0; width: 18px; height: 18px; display: block; }
.topbar-search:focus-within { border-color: var(--orange-300); background: var(--card-fill); }

/* ------------------------------ Search results ------------------------------ */
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0;
  width: min(420px, 92vw);
  max-height: 60vh; overflow-y: auto;
  background: var(--card-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 220;
  padding: 6px;
  line-height: 1.4;
}
.search-group + .search-group { margin-top: 4px; border-top: 1px solid var(--db-line); padding-top: 4px; }
.search-group-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--white-30); padding: 7px 10px 4px;
}
.search-more { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--white-30); }
.search-hit {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
}
.search-hit:hover, .search-hit.is-on { background: var(--white-06); }
.search-hit-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,22,40,0.05); color: var(--white-50);
}
:root[data-theme="dark"] .search-hit-icon { background: rgba(255,255,255,0.07); }
.search-hit-icon svg { width: 15px; height: 15px; }
.search-hit-text { display: flex; flex-direction: column; min-width: 0; }
.search-hit-text .t { font-size: var(--text-sm); font-weight: 600; color: var(--white-90); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-hit-text .s { font-size: var(--text-xs); color: var(--white-50); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { padding: 18px 12px; text-align: center; font-size: var(--text-sm); color: var(--white-50); }

/* ---------------------------- Notification panel ---------------------------- */
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(380px, 92vw);
  max-height: 62vh; display: flex; flex-direction: column;
  background: var(--card-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 220;
  overflow: hidden;
}
.notif-panel[hidden] { display: none; }
.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 12px 14px; border-bottom: 1px solid var(--db-line); flex-shrink: 0;
}
.notif-panel-head strong { font-size: var(--text-sm); color: var(--white-90); }
.notif-panel-list { overflow-y: auto; padding: 6px; }
.notif-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px; border-radius: 10px; cursor: pointer;
  position: relative;
}
.notif-row:hover { background: var(--white-06); }
.notif-row-icon {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,22,40,0.05); color: var(--white-50);
}
:root[data-theme="dark"] .notif-row-icon { background: rgba(255,255,255,0.07); }
.notif-row-icon svg { width: 16px; height: 16px; }
.notif-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-row-text .m { font-size: 13px; color: var(--white-90); line-height: 1.45; }
.notif-row-text .t { font-size: 11px; color: var(--white-30); }
/* Unread marker on the left edge rather than a background tint, which stays
   legible in both themes without a second colour. */
.notif-row.unread .m { font-weight: 600; }
.notif-row.unread::before {
  content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 20px; border-radius: 2px; background: var(--orange-500);
}
.notif-empty { padding: 26px 14px; text-align: center; font-size: var(--text-sm); color: var(--white-50); }

.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white-70); transition: all var(--transition-fast); }
.icon-btn:hover { background: var(--white-06); color: var(--white-90); }
.notif-dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange-500); border: 2px solid #fff; }

.user-menu { position: relative; }
.user-menu-trigger { display: flex; align-items: center; gap: var(--space-2); padding: 4px 10px 4px 4px; border-radius: var(--radius-pill); transition: background var(--transition-fast); }
.user-menu-trigger:hover { background: var(--white-06); }
.user-menu-name { font-size: var(--text-sm); font-weight: 600; }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 70;
}
.user-dropdown.open { display: flex; }
.user-dropdown a, .user-dropdown button { display: flex; align-items: center; gap: var(--space-3); padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--white-70); text-align: left; width: 100%; }
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--white-06); color: var(--white-90); }

/* Page content wrapper */
.page-content { padding: var(--space-6); flex: 1; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.page-header h1 { font-size: var(--text-3xl); }
.page-header .subhead { color: var(--white-50); font-size: var(--text-sm); margin-top: 4px; }
.page-header-actions { display: flex; align-items: center; gap: var(--space-3); }

/* Greeting block */
.greeting-block { margin-bottom: var(--space-6); }
.greeting-block h1 { font-size: var(--text-4xl); margin-bottom: var(--space-2); }
.greeting-block p { font-size: var(--text-base); }

/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.dash-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-5); align-items: start; }

.panel { display: flex; flex-direction: column; gap: var(--space-4); }
.panel-head { display: flex; align-items: center; justify-content: space-between; }
.panel-head h2 { font-size: var(--text-lg); }
.panel-head a, .panel-head button.link { font-size: var(--text-sm); color: var(--orange-700); font-weight: 600; }

/* Notifications list */
.notif-list { display: flex; flex-direction: column; gap: var(--space-2); }
.notif-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); transition: background var(--transition-fast); position: relative; }
.notif-item:hover { background: var(--white-06); }
.notif-item.unread::before { content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--orange-500); }
.notif-item .icon-wrap { width: 36px; height: 36px; border-radius: var(--radius-sm); background: rgba(var(--orange-rgb), 0.08); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; color: var(--orange-700); flex-shrink: 0; }
.notif-item .notif-body { flex: 1; min-width: 0; }
.notif-item .notif-msg { font-size: var(--text-sm); color: var(--white-90); }
.notif-item .notif-time { font-size: var(--text-xs); color: var(--white-50); margin-top: 2px; }
.notif-item .dismiss-btn { color: var(--white-30); flex-shrink: 0; padding: 4px; border-radius: 6px; }
.notif-item .dismiss-btn:hover { color: var(--white-90); background: var(--white-06); }
.notif-item.dismissed { opacity: 0.35; text-decoration: line-through; pointer-events: none; }

/* Filter bars (search + tag chips + status tabs) */
.filter-bar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.search-input-wrap { position: relative; flex: 1; min-width: 220px; max-width: 360px; }
.search-input-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--white-50); }
.search-input-wrap input { padding-left: 42px; }
.tag-filter-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.status-tabs { display: flex; align-items: center; gap: var(--space-2); background: rgba(11,22,40,0.03); border: 1px solid var(--glass-border); border-radius: var(--radius-pill); padding: 4px; width: fit-content; margin-bottom: var(--space-5); flex-wrap: wrap; }
.status-tab { padding: 0.5rem 1.1rem; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--white-70); transition: all var(--transition-fast); }
.status-tab:hover { color: var(--white-90); }
.status-tab.active { color: #fff; }

/* Full-width variant, for picking an order's stage rather than filtering a list.
   Six pills wrapped inside a pill-shaped container collided at the corners and
   left a ragged second row, because flex-wrap gives the last row whatever width
   it happens to need. A grid keeps every cell the same size on both rows, and a
   rounded rectangle (rather than a pill) is the right container shape once the
   content is more than one row tall. */
.status-tabs--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 4px;
  width: 100%;
  border-radius: 14px;
  align-items: stretch;
}
.status-tabs--grid .status-tab {
  border-radius: 10px;
  padding: 0.5rem 0.5rem;
  text-align: center;
  white-space: nowrap;
}

/* -------------------------------- First-run tour -----------------------------
   The scrim covers everything and the "ring" is a transparent box with a huge
   spread shadow — that shadow *is* the dimming around the highlight, which is
   how the target ends up looking lit without needing an SVG mask or cloning the
   element out of the page. See initTour() in app.js.
--------------------------------------------------------------------------- */
.df-tour { position: fixed; inset: 0; z-index: 400; }
.df-tour-scrim { position: absolute; inset: 0; }
.df-tour-ring {
  position: fixed;
  border-radius: 12px;
  border: 2px solid var(--orange-500);
  box-shadow: 0 0 0 9999px rgba(11,22,40,0.62);
  pointer-events: none;
  transition: top 180ms ease, left 180ms ease, width 180ms ease, height 180ms ease;
}
.df-tour-card {
  position: fixed;
  background: var(--card-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  transition: top 180ms ease, left 180ms ease;
}
.df-tour-step { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--orange-700); margin-bottom: 6px; }
.df-tour-card h2 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--white-90); margin-bottom: 6px; letter-spacing: -0.015em; }
.df-tour-card p { font-size: var(--text-sm); color: var(--white-70); line-height: 1.55; margin-bottom: var(--space-4); }
.df-tour-dots { display: flex; gap: 5px; margin-bottom: var(--space-4); }
.df-tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--white-12); }
.df-tour-dots i.on { background: var(--orange-500); }
.df-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.df-tour-nav { display: flex; gap: var(--space-2); }
.df-tour-nav .btn:disabled { opacity: 0.4; cursor: default; }
body.df-tour-open { overflow: hidden; }
@media (max-width: 640px) {
  /* No room to sit beside anything — dock it to the bottom instead. */
  .df-tour-card { left: 16px !important; right: 16px; top: auto !important; bottom: 16px; width: auto !important; }
}

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(11,22,40,0.45); z-index: 200; display: none; align-items: center; justify-content: center; padding: var(--space-5); }
.modal-overlay.open { display: flex; }
.modal {
  width: 100%; max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.modal-head h3 { font-size: var(--text-xl); }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }

/* Dropzone (photo upload placeholder) */
.dropzone { border: 1.5px dashed var(--glass-border); border-radius: var(--radius-md); padding: var(--space-7); text-align: center; color: var(--white-50); transition: all var(--transition-fast); }
.dropzone:hover { border-color: var(--orange-500); color: var(--orange-700); background: rgba(var(--orange-rgb), 0.04); }
.dropzone .icon-wrap { width: 48px; height: 48px; margin: 0 auto var(--space-3); border-radius: 50%; background: rgba(11,22,40,0.04); display: flex; align-items: center; justify-content: center; }

/* Photo thumbs */
.photo-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.photo-thumb { width: 88px; height: 88px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--glass-border); background: rgba(11,22,40,0.04); display: flex; align-items: center; justify-content: center; color: var(--white-30); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Checklist */
.checklist { display: flex; flex-direction: column; gap: var(--space-2); }
.checklist-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); background: rgba(11,22,40,0.03); }
.checklist-item label { flex: 1; font-size: var(--text-sm); }
.checklist-item.checked label { color: var(--white-50); text-decoration: line-through; }

/* Calendar */
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); flex-wrap: wrap; gap: var(--space-3); }
.calendar-nav { display: flex; align-items: center; gap: var(--space-2); }
.calendar-month-label { font-family: var(--font-display); font-size: var(--text-xl); min-width: 190px; text-align: center; }
.view-switch { display: flex; gap: 4px; background: rgba(11,22,40,0.03); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 4px; }
.view-switch button { padding: 0.45rem 0.9rem; border-radius: 8px; font-size: var(--text-xs); font-weight: 600; color: var(--white-70); }
.view-switch button.active { color: #fff; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar-weekday { text-align: center; font-size: var(--text-xs); color: var(--white-50); font-weight: 600; padding-bottom: var(--space-2); }
.calendar-cell {
  min-height: 108px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--glass-border);
  padding: var(--space-2);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color var(--transition-fast);
}
.calendar-cell.outside { opacity: 0.4; }
.calendar-cell.today { border-color: var(--orange-500); box-shadow: 0 0 0 1px rgba(var(--orange-rgb), 0.35); }
.calendar-cell .date-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--white-50); }
.calendar-cell.today .date-num { color: var(--orange-700); font-weight: 700; }
.cal-event { font-size: 10px; padding: 2px 6px; border-radius: 5px; background: rgba(var(--orange-rgb), 0.14); color: var(--orange-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal-event.info { background: rgba(var(--info-rgb), 0.14); color: var(--info-text); }
.cal-event.success { background: rgba(var(--success-rgb), 0.14); color: var(--success-text); }
/* Holidays and blocked-out time read as "nothing is happening here", so they're
   deliberately quieter than a job rather than louder. */
.cal-event.holiday { background: rgba(var(--warning-rgb), 0.18); color: var(--warning-text); font-weight: 600; }
.cal-event.blocked { background: rgba(11,22,40,0.09); color: var(--white-70); font-weight: 600; }
:root[data-theme="dark"] .cal-event.blocked { background: rgba(255,255,255,0.12); }
.cal-event-more { font-size: 10px; color: var(--white-50); padding: 2px 6px; }

/* Whole-day states. Striping says "not available" without needing a label on
   every cell. */
.calendar-cell { cursor: pointer; }
.calendar-cell.blocked,
.calendar-cell.closed {
  background-image: repeating-linear-gradient(135deg,
    rgba(11,22,40,0.045) 0 6px, transparent 6px 12px);
}
.calendar-cell.blocked { border-color: rgba(var(--warning-rgb), 0.4); }
:root[data-theme="dark"] .calendar-cell.blocked,
:root[data-theme="dark"] .calendar-cell.closed {
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,0.05) 0 6px, transparent 6px 12px);
}
.cell-closed-tag { margin-top: auto; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--white-30); }

/* "What kind of event is this?" picker in the calendar modal. */
.event-kind-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.event-kind-row button {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: var(--space-3);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  background: rgba(11,22,40,0.02);
  transition: all var(--transition-fast);
}
.event-kind-row button strong { font-size: var(--text-sm); font-weight: 650; color: var(--white-90); }
.event-kind-row button span { font-size: 11.5px; color: var(--white-50); line-height: 1.4; }
.event-kind-row button:hover { border-color: var(--white-30); }
.event-kind-row button.active { border-color: var(--orange-500); background: rgba(var(--orange-rgb), 0.07); }
.event-kind-row button.active strong { color: var(--orange-700); }

/* Calendar — Week/Day time grid
   The grid has a 640px floor so seven day columns stay legible, and scrolls
   sideways below that. `min-width: 0` is the load-bearing part: a flex/grid
   child defaults to min-width:auto and refuses to shrink under its content, so
   without it the 640px grid pushed the card wider than the screen and the day
   headers sat outside the white panel entirely. */
.cal-timegrid-wrap {
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
[data-view-panel] { min-width: 0; overflow: hidden; }
.cal-timegrid {
  display: grid;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-width: 640px;
}
/* Day view shows one column, so it has no reason to demand a week's width. */
[data-view-panel="day"] .cal-timegrid { min-width: 0; }
.cal-tg-corner, .cal-tg-allday-label, .cal-tg-hourlabel {
  border-right: 1px solid var(--glass-border);
  background: rgba(11,22,40,0.02);
}
.cal-tg-corner { border-bottom: 1px solid var(--glass-border); }
.cal-tg-daylabel {
  border-bottom: 1px solid var(--glass-border); border-left: 1px solid var(--glass-border);
  padding: var(--space-2) var(--space-1); text-align: center; background: rgba(11,22,40,0.02);
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
}
.cal-tg-daylabel .dow { font-size: 10px; color: var(--white-50); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.cal-tg-daylabel .num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--white-90); }
.cal-tg-daylabel.today .num { color: var(--orange-700); font-weight: 700; }
.cal-tg-allday-label { font-size: var(--text-xs); color: var(--white-50); padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--glass-border); }
.cal-tg-allday {
  border-left: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);
  padding: 4px; display: flex; flex-direction: column; gap: 3px; min-height: 30px;
}
.cal-tg-allday.today { background: rgba(var(--orange-rgb), 0.04); }
.cal-tg-hourlabel {
  font-family: var(--font-mono); font-size: 10px; color: var(--white-50);
  padding: 4px 8px 0 0; text-align: right; border-top: 1px solid var(--glass-border);
}
.cal-tg-cell {
  border-left: 1px solid var(--glass-border); border-top: 1px solid var(--glass-border);
  padding: 3px; display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.cal-tg-cell.today { background: rgba(var(--orange-rgb), 0.04); }
.cal-timegrid .cal-event { flex-shrink: 0; }

/* Calendar event popover (positioned inline via JS top/left) */
.cal-popover {
  position: absolute; z-index: 300; width: 260px;
  background: #fff;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
  display: none;
}
.cal-popover.open { display: block; }
.cal-popover .pop-title { font-weight: 600; color: var(--white-90); margin-bottom: 4px; }
.cal-popover .pop-meta { font-size: var(--text-xs); color: var(--white-50); margin-bottom: var(--space-3); }

/* Rating distribution bars */
.rating-row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.rating-row .stars-label { width: 46px; flex-shrink: 0; color: var(--white-70); }
.rating-bar-track { flex: 1; height: 8px; border-radius: var(--radius-pill); background: rgba(11,22,40,0.06); overflow: hidden; }
.rating-bar-fill { height: 100%; background: linear-gradient(90deg, var(--orange-500), var(--orange-300)); border-radius: var(--radius-pill); }
.rating-row .count { width: 32px; text-align: right; color: var(--white-50); font-family: var(--font-mono); font-size: var(--text-xs); }

/* Toggle switch */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: rgba(11,22,40,0.14); border-radius: var(--radius-pill); transition: var(--transition-fast); border: 1px solid var(--glass-border); }
.switch .slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 50%; transition: var(--transition-fast); box-shadow: 0 1px 3px rgba(11,22,40,0.25); }
.switch input:checked + .slider { background: var(--accent-grad-sm); border-color: transparent; }
.switch input:checked + .slider::before { transform: translate(18px, -50%); }

/* Settings tabs */
.settings-shell { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-6); align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--topbar-h) + var(--space-5)); }
/* Same reasoning as .sidebar-nav above — visible by default, hidden by
   applyCapPermissions() once the role is known not to allow it. */
/* Anchors as well as buttons: "Team" and "Log out" are links, and styling only
   the buttons left them visibly out of place in the middle of the list. */
.settings-nav button,
.settings-nav a { display: flex; align-items: center; gap: var(--space-3); padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; color: var(--white-70); text-align: left; width: 100%; cursor: pointer; }
.settings-nav button:hover,
.settings-nav a:hover { background: var(--white-06); color: var(--white-90); }
.settings-nav button.active { background: linear-gradient(90deg, rgba(var(--brand-indigo-rgb),0.12) 0%, rgba(var(--brand-orange-rgb),0.08) 100%); color: var(--navy-600); font-weight: 600; }
:root[data-theme="dark"] .settings-nav button.active { background: rgba(255,255,255,0.09); color: #fff; }
.settings-panel { display: none; flex-direction: column; gap: var(--space-5); }
.settings-panel.active { display: flex; }

/* Legend / role table */
.role-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.role-legend .card h4 { font-size: var(--text-base); color: var(--white-90); margin-bottom: var(--space-2); }
.role-legend .card ul { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-3); }
.role-legend .card li { font-size: var(--text-xs); color: var(--white-70); display: flex; gap: 8px; align-items: flex-start; }
.role-legend .card li svg { width: 14px; height: 14px; color: var(--success-500); margin-top: 2px; flex-shrink: 0; }

/* Vehicle cards (customer profile) */
.vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.vehicle-card { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.vehicle-card .vehicle-title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--white-90); }
.vehicle-card .vehicle-sub { font-size: var(--text-xs); color: var(--white-50); }
.vehicle-card .vehicle-meta-row { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--white-70); padding-top: var(--space-2); border-top: 1px solid rgba(11,22,40,0.06); }
/* The card is a link into the vehicle's own page now, so it needs to look like one. */
.vehicle-card.is-link { cursor: pointer; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.vehicle-card.is-link:hover { border-color: var(--orange-300); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.vehicle-chips { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--text-xs); color: var(--white-50); align-items: center; }
.vehicle-chips .plate {
  font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.06em;
  background: #F6C700; color: #101418; border-radius: 4px; padding: 1px 7px;
  text-transform: uppercase; font-size: 11px;
}

/* Embedded map on a customer profile. Fixed aspect so the panel doesn't jump
   height while the iframe loads. */
.map-embed { position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--glass-border); aspect-ratio: 16 / 9; background: var(--white-06); }
/* Shown instead of an empty grey rectangle when there's no address to plot. */
.map-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: var(--space-4); color: var(--white-50); }
.map-empty svg { width: 26px; height: 26px; opacity: 0.5; }
.map-empty strong { font-size: var(--text-sm); font-weight: 650; color: var(--white-70); }
.map-empty span { font-size: var(--text-xs); max-width: 34ch; line-height: 1.5; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
:root[data-theme="dark"] .map-embed iframe {
  /* Google's embed has no dark tiles; knocking the brightness back stops it
     glaring out of an otherwise dark page. */
  filter: brightness(0.82) contrast(1.05);
}

/* -------------------------------- Opening hours -------------------------------
   Seven fixed rows. A grid rather than a flex row so the day names, the two time
   fields and the Closed switch line up in columns down the week.
--------------------------------------------------------------------------- */
.hours-editor { display: flex; flex-direction: column; gap: 2px; }
.hours-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.hours-row:nth-child(odd) { background: rgba(11,22,40,0.02); }
:root[data-theme="dark"] .hours-row:nth-child(odd) { background: rgba(255,255,255,0.03); }
.hours-row.is-closed .hours-times { opacity: 0.4; }
.hours-day { font-size: var(--text-sm); font-weight: 600; color: var(--white-90); }
.hours-times { display: flex; align-items: center; gap: var(--space-2); }
.hours-times .input { width: auto; min-width: 0; flex: 0 1 130px; }
.hours-sep { font-size: var(--text-xs); color: var(--white-50); flex-shrink: 0; }
.hours-closed { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--white-70); cursor: pointer; white-space: nowrap; }
.hours-tools { margin-top: var(--space-3); }
@media (max-width: 620px) {
  .hours-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .hours-times .input { flex: 1; }
}

/* A button that reads as a link, for cross-references inside body copy. */
.link-btn { font: inherit; color: var(--orange-700); text-decoration: underline; padding: 0; }
.link-btn:hover { color: var(--orange-500); }

/* ----------------------------------- Help -------------------------------------- */
.help-list { display: flex; flex-direction: column; gap: 2px; }
.help-item { border-bottom: 1px solid var(--db-line); }
.help-item:last-child { border-bottom: none; }
.help-item summary {
  cursor: pointer; list-style: none;
  padding: var(--space-3) 0;
  font-size: var(--text-sm); font-weight: 600; color: var(--white-90);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary::after {
  content: ""; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid var(--white-30); border-bottom: 2px solid var(--white-30);
  transform: rotate(45deg); transition: transform var(--transition-fast);
}
.help-item[open] summary::after { transform: rotate(-135deg); }
.help-item p { font-size: var(--text-sm); color: var(--white-70); line-height: 1.6; padding: 0 0 var(--space-3); }

.help-files { display: flex; flex-direction: column; gap: var(--space-2); }
.help-file { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.help-file code {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  background: rgba(11,22,40,0.06); padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
:root[data-theme="dark"] .help-file code { background: rgba(255,255,255,0.1); }
.help-file span { font-size: var(--text-sm); color: var(--white-70); }

.help-diag {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
  background: rgba(11,22,40,0.04); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); padding: var(--space-3);
  white-space: pre-wrap; word-break: break-word;
  color: var(--white-70); margin-bottom: var(--space-3);
  max-height: 220px; overflow-y: auto;
}
:root[data-theme="dark"] .help-diag { background: rgba(255,255,255,0.05); }

/* Labeled key/value rows (contact panels, order detail) */
.detail-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid rgba(11,22,40,0.06); font-size: var(--text-sm); }
.detail-row:last-child { border-bottom: none; }
.detail-row .detail-label { color: var(--white-50); display: flex; align-items: center; gap: 8px; }
.detail-row .detail-value { color: var(--white-90); font-weight: 500; text-align: right; }

/* Prominent single figure (lifetime revenue, etc.) */
.figure-block { margin-bottom: var(--space-4); }
.figure-block .label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--white-50); margin-bottom: 4px; }
.figure-block .value { font-family: var(--font-mono); font-size: var(--text-3xl); color: var(--white-90); }

/* Duplicate detection badge */
.dupe-flag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--warning-text); background: rgba(var(--warning-rgb), 0.14); border: 1px solid rgba(var(--warning-rgb), 0.35); padding: 3px 10px; border-radius: var(--radius-pill); }

/* Low stock flag reuses badge--warning / badge--danger */

/* Utility */
.text-muted { color: var(--white-50); }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
/* No `display` here on purpose.

   This used to be `.hide-mobile { display: initial; }`, which sits later in the
   file than the component rules and has the same specificity, so it silently
   overrode them: `.topbar-search` asked for `display: flex` and got `inline`,
   which is why the search icon sat above the input instead of beside it.

   Nothing needs resetting anyway. The rule that hides these elements lives in a
   max-width media query, so above that width it simply doesn't apply and each
   element keeps its own display. */
.show-mobile { display: none !important; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .price-card.featured { transform: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero .lede { max-width: none; }
  /* Full-bleed gradient is a desktop enhancement — once the grid stacks to
     one column the text spans the full width, so the left-to-right scrim
     fade would leave the right edge of paragraphs sitting on unmasked
     colour. Simplest safe call: plain light background on mobile/tablet. */
  .hero-ribbon-panel, .hero-scrim { display: none; }
  .demo-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .dash-split { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .settings-shell { grid-template-columns: 1fr; }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; }
  .role-legend { grid-template-columns: 1fr; }

  /* Sidebar auto-collapses on tablet */
  .sidebar { width: var(--sidebar-w-collapsed); }
  .sidebar .logo-text, .sidebar .nav-label, .sidebar-foot-text { display: none; }
  .sidebar-nav .nav-item { justify-content: center; }
  .sidebar-toggle { justify-content: center; }
  .main-content, body.sidebar-collapsed .main-content { margin-left: var(--sidebar-w-collapsed); }
  body.sidebar-expanded-tablet .sidebar { width: var(--sidebar-w); }
  body.sidebar-expanded-tablet .sidebar .logo-text,
  body.sidebar-expanded-tablet .sidebar .nav-label,
  body.sidebar-expanded-tablet .sidebar-foot-text { display: initial; }
  body.sidebar-expanded-tablet .sidebar-nav .nav-item { justify-content: flex-start; }
  body.sidebar-expanded-tablet .main-content { margin-left: var(--sidebar-w); }
}

@media (max-width: 767px) {
  .section { padding-block: var(--space-7); }
  .hero { padding-top: calc(var(--topbar-h) + var(--space-6)); }
  .hero h1 { font-size: var(--text-4xl); }
  .stat-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .footer-bottom { flex-direction: column; gap: var(--space-3); text-align: center; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hero-proof { flex-wrap: wrap; gap: var(--space-3); }

  /* Sidebar becomes off-canvas drawer */
  .sidebar { transform: translateX(-100%); width: var(--sidebar-w); box-shadow: var(--shadow-lg); }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar .logo-text, .sidebar .nav-label, .sidebar-foot-text { display: initial; }
  .sidebar-nav .nav-item { justify-content: flex-start; }
  .sidebar-toggle { justify-content: flex-start; }
  .main-content { margin-left: 0 !important; }
  .hamburger-btn { display: flex; }
  .topbar-search { display: none; }
  .topbar-title { font-size: var(--text-lg); }

  /* Tables collapse to stacked cards */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border: 1px solid var(--glass-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); background: #fff; box-shadow: var(--shadow-card); }
  .table td { border-bottom: 1px solid rgba(11,22,40,0.06); padding: var(--space-2) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); text-align: right; }
  .table td:last-child { border-bottom: none; }
  .table td::before { content: attr(data-label); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--white-50); font-weight: 600; text-align: left; }
  .table td.row-name-cell { justify-content: flex-start; }
  .table td.row-name-cell::before { display: none; }

  .hide-mobile { display: none !important; }
  .show-mobile { display: initial !important; }
  .settings-shell { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Encryption lock gate
   Covers everything until the workspace passphrase is entered. Nothing has
   been decrypted into memory at this point, so there is nothing behind it.
   ========================================================================== */
.df-lock-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: #F6F8FB;
}
.df-lock-card {
  width: 100%; max-width: 400px; text-align: center;
  background: #fff; border: 1px solid rgba(16,24,40,0.07); border-radius: 18px;
  box-shadow: 0 2px 4px rgba(16,24,40,0.04), 0 16px 40px rgba(16,24,40,0.1);
  padding: 34px 30px;
}
.df-lock-icon {
  width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-grad-sm); color: #fff;
}
.df-lock-icon svg { width: 22px; height: 22px; }
.df-lock-card h1 { font-size: 19px; font-weight: 700; color: #0F172A; letter-spacing: -0.02em; margin-bottom: 6px; }
.df-lock-card p { font-size: 13.5px; color: #64748B; line-height: 1.5; margin-bottom: 20px; }
.df-lock-card .input { margin-bottom: 10px; text-align: center; }
.df-lock-hint { display: block; font-size: 12.5px; color: #64748B; margin-bottom: 12px; }
.df-lock-error {
  font-size: 13px; color: #9B2C24; background: #FDEEED; border: 1px solid #F6CFCC;
  border-radius: 9px; padding: 9px 12px; margin-bottom: 12px; text-align: left;
}
.df-lock-out { display: block; margin: 16px auto 0; background: none; border: none; cursor: pointer; font-size: 12.5px; color: #64748B; }
.df-lock-out:hover { color: #2563EB; }

/* ==========================================================================
   Shared dashboard extras
   ========================================================================== */
.db-empty-line { font-size: 13px; color: var(--db-ink-3); margin: 6px 0; }
.db-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.db-grid-3 > .db-panel { margin-bottom: 20px; }
.db-grid-3[hidden] { display: none; }

/* Compact segmented control inside a panel head (e.g. Weekly / Monthly) */
.db-seg { display: inline-flex; background: #F1F4F8; border-radius: 9px; padding: 3px; gap: 2px; flex-shrink: 0; }
.db-seg button {
  border: none; background: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--db-ink-3);
  padding: 5px 11px; border-radius: 7px; transition: all 140ms ease;
}
.db-seg button:hover { color: var(--db-ink); }
.db-seg button.active { background: #fff; color: var(--db-ink); box-shadow: 0 1px 2px rgba(16,24,40,0.08); }

/* Single big figure with a caption, used above a breakdown */
.db-headline { display: flex; align-items: baseline; gap: 9px; margin-bottom: 18px; }
.db-headline .n { font-size: 28px; font-weight: 700; color: var(--db-ink); letter-spacing: -0.028em; font-variant-numeric: tabular-nums; }
.db-headline .c { font-size: 12.5px; color: var(--db-ink-3); font-weight: 500; }

@media (max-width: 1023px) { .db-grid-3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Team — role permission editor
   ========================================================================== */
.perm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.perm-card {
  background: #fff; border: 1px solid var(--db-line); border-radius: var(--db-radius);
  box-shadow: var(--db-shadow); padding: 20px;
}
.perm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.perm-card-head h4 { font-size: 15px; font-weight: 700; color: var(--db-ink); letter-spacing: -0.015em; }
.perm-card-sub { font-size: 12.5px; color: var(--db-ink-3); margin-bottom: 16px; }
.perm-locked { font-size: 11px; font-weight: 650; color: #8A6A17; background: #FEF8E9; border: 1px solid #F1DDAE; border-radius: 999px; padding: 3px 9px; }

/* Read-only tick summary. Re-rendered the instant a switch moves. */
.perm-ticks { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.perm-ticks li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--db-ink-2); line-height: 1.4; }
.perm-ticks svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; stroke-width: 2.4; fill: none; }
.perm-ticks li.on svg  { stroke: #12805A; }
.perm-ticks li.off { color: #94A3B8; }
.perm-ticks li.off svg { stroke: #CBD5E1; }
.perm-ticks li.off span { text-decoration: line-through; text-decoration-color: #E2E8F0; }
.perm-more { font-size: 12.5px; color: var(--db-ink-3); margin-top: 10px; }

/* Editing view */
.perm-group-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--db-ink-3); margin: 20px 0 4px; padding-top: 16px; border-top: 1px solid var(--db-line);
}
.perm-group-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.perm-group-hint { font-size: 12px; color: var(--db-ink-3); margin-bottom: 12px; line-height: 1.45; }
.perm-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(16,24,40,0.05); }
.perm-row:last-child { border-bottom: none; }
.perm-row-main { min-width: 0; }
.perm-row-label { font-size: 13.5px; font-weight: 600; color: var(--db-ink); letter-spacing: -0.005em; }
.perm-row-desc { font-size: 12px; color: var(--db-ink-3); margin-top: 2px; line-height: 1.4; }

.team-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.link-btn { background: none; border: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #2563EB; padding: 4px 6px; border-radius: 6px; }
.link-btn:hover { background: #EFF5FF; }
.link-btn.danger { color: #C33C34; }
.link-btn.danger:hover { background: #FDEEED; }

@media (max-width: 1023px) { .perm-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Auth / onboarding shells
   Shared by login, onboarding, join and the setup wizard so they read as one
   continuous flow rather than four pages that happen to be adjacent.
   ========================================================================== */
body.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #F6F8FB; padding: 24px; }
body.auth-body.top { align-items: flex-start; padding-top: 44px; padding-bottom: 64px; }

.auth-card {
  width: 100%; max-width: 420px; background: #fff;
  border: 1px solid rgba(16,24,40,0.07); border-radius: 18px;
  box-shadow: 0 2px 4px rgba(16,24,40,0.04), 0 12px 32px rgba(16,24,40,0.08);
  padding: 34px;
}
.auth-card.wide { max-width: 720px; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.auth-brand .logo-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--navy-950); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.auth-brand span { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #0F172A; }
.auth-card h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #0F172A; margin-bottom: 6px; }
.auth-card .auth-sub { font-size: 14px; color: #64748B; margin-bottom: 24px; line-height: 1.5; }
.auth-card .field { margin-bottom: 16px; }
.auth-card .input, .auth-card .select, .auth-card .textarea { border-radius: 10px; padding: 11px 13px; font-size: 14px; }
.auth-submit { width: 100%; padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 650; background: var(--navy-950); color: #fff; border: none; transition: background 140ms ease; cursor: pointer; }
.auth-submit:hover { background: var(--navy-800); }
.auth-submit[disabled] { opacity: 0.6; pointer-events: none; }
.auth-switch { text-align: center; font-size: 13.5px; color: #64748B; margin-top: 20px; }
.auth-switch button { color: #2563EB; font-weight: 600; background: none; border: none; cursor: pointer; font-size: 13.5px; }
.auth-msg { font-size: 13.5px; padding: 11px 13px; border-radius: 10px; margin-bottom: 18px; line-height: 1.45; }
.auth-msg.error { background: #FDEEED; color: #9B2C24; border: 1px solid #F6CFCC; }
.auth-msg.info  { background: #EBF2FE; color: #1D4FB8; border: 1px solid #C9DCFB; }
.auth-msg.ok    { background: #EAF8F0; color: #0E6344; border: 1px solid #BFE7D2; }
.auth-forgot { display: block; text-align: right; font-size: 12.5px; color: #64748B; margin-top: -8px; margin-bottom: 18px; background: none; border: none; cursor: pointer; margin-left: auto; }
.auth-forgot:hover { color: #2563EB; }

/* Big either/or choice tiles (create a store vs join a team) */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice {
  text-align: left; background: #fff; cursor: pointer;
  border: 1.5px solid rgba(16,24,40,0.1); border-radius: 14px; padding: 22px;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.choice:hover { border-color: var(--navy-500); box-shadow: 0 8px 22px rgba(16,24,40,0.08); transform: translateY(-1px); }
.choice-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; background: var(--accent-grad-sm); color: #fff; }
.choice-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.choice h3 { font-size: 15.5px; font-weight: 700; color: #0F172A; letter-spacing: -0.015em; margin-bottom: 5px; }
.choice p { font-size: 13px; color: #64748B; line-height: 1.5; }
@media (max-width: 639px) { .choice-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Setup wizard
   ========================================================================== */
.setup-shell { width: 100%; max-width: 780px; margin: 0 auto; }
.setup-progress { display: flex; align-items: center; gap: 0; margin-bottom: 26px; }
.setup-dot { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.setup-dot i {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-style: normal;
  background: #E7EBF1; color: #64748B; transition: all 180ms ease;
}
.setup-dot span { font-size: 12.5px; font-weight: 600; color: #64748B; white-space: nowrap; }
.setup-dot.done i { background: #12805A; color: #fff; }
.setup-dot.current i { background: var(--navy-950); color: #fff; }
.setup-dot.current span { color: #0F172A; }
.setup-line { flex: 1; height: 2px; background: #E7EBF1; margin: 0 10px; border-radius: 2px; min-width: 12px; }
.setup-line.done { background: #12805A; }
@media (max-width: 767px) { .setup-dot span { display: none; } }

.setup-step { display: none; }
.setup-step.active { display: block; }
.setup-step h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: #0F172A; margin-bottom: 6px; }
.setup-step > .setup-lead { font-size: 14px; color: #64748B; line-height: 1.55; margin-bottom: 22px; }
.setup-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(16,24,40,0.07); }
.setup-skip { background: none; border: none; cursor: pointer; font-size: 13px; color: #64748B; }
.setup-skip:hover { color: #2563EB; }

/* Editable row lists used for services, tags and questions */
.mini-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.mini-row {
  display: flex; align-items: center; gap: 12px;
  background: #F8FAFC; border: 1px solid rgba(16,24,40,0.07);
  border-radius: 10px; padding: 10px 12px;
}
.mini-row .grow { flex: 1; min-width: 0; }
.mini-row .t { font-size: 13.5px; font-weight: 600; color: #0F172A; letter-spacing: -0.005em; }
.mini-row .s { font-size: 12px; color: #64748B; margin-top: 2px; }
.mini-row .x { background: none; border: none; cursor: pointer; color: #94A3B8; font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 6px; flex-shrink: 0; }
.mini-row .x:hover { color: #C33C34; background: #FDEEED; }
.mini-empty { font-size: 13px; color: #64748B; padding: 14px; text-align: center; background: #F8FAFC; border: 1px dashed rgba(16,24,40,0.12); border-radius: 10px; margin-bottom: 14px; }

/* ==========================================================================
   Store builder (dashboard side)
   ========================================================================== */
.store-status {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--db-line); border-radius: var(--db-radius);
  box-shadow: var(--db-shadow); padding: 16px 20px; margin-bottom: 20px;
}
.store-status .dot { width: 9px; height: 9px; border-radius: 50%; background: #CBD5E1; flex-shrink: 0; }
.store-status.live .dot { background: #12805A; box-shadow: 0 0 0 3px rgba(18,128,90,0.15); }
.store-status .label { font-size: 13.5px; font-weight: 650; color: var(--db-ink); }
.store-status .url {
  font-family: var(--font-mono); font-size: 12.5px; color: #2563EB;
  background: #F1F5FB; border: 1px solid #DCE7F8; border-radius: 8px;
  padding: 5px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.store-status .spacer { flex: 1; min-width: 0; }

.svc-card {
  background: #fff; border: 1px solid var(--db-line); border-radius: 14px;
  padding: 14px; display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px;
  transition: box-shadow 140ms ease;
}
.svc-card:hover { box-shadow: var(--db-shadow); }
.svc-card.inactive { opacity: 0.55; }
.svc-thumb {
  width: 78px; height: 58px; border-radius: 9px; flex-shrink: 0;
  background: #EEF2F7 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: #94A3B8; font-size: 10px; font-weight: 600; text-align: center;
}
.svc-main { flex: 1; min-width: 0; }
.svc-name { font-size: 14.5px; font-weight: 650; color: var(--db-ink); letter-spacing: -0.01em; }
.svc-meta { font-size: 12.5px; color: var(--db-ink-3); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.svc-meta .price { font-weight: 650; color: #2563EB; }
.svc-side { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }

.q-card {
  background: #fff; border: 1px solid var(--db-line); border-radius: 12px;
  padding: 13px 15px; display: flex; gap: 12px; align-items: center; margin-bottom: 10px;
}
.q-card .grow { flex: 1; min-width: 0; }
.q-label { font-size: 14px; font-weight: 600; color: var(--db-ink); }
.q-meta { font-size: 12px; color: var(--db-ink-3); margin-top: 2px; }

/* Repeating single-line inputs (bullets, the what-is-included list) */
.rep-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rep-row { display: flex; gap: 8px; align-items: center; }
.rep-row .input { margin-bottom: 0; }
.rep-row .x { background: none; border: none; cursor: pointer; color: #94A3B8; padding: 6px 8px; border-radius: 6px; flex-shrink: 0; }
.rep-row .x:hover { color: #C33C34; background: #FDEEED; }

/* ==========================================================================
   Public storefront  —  prefix .sf-*
   Standalone page, deliberately not inheriting the dashboard chrome. Light,
   roomy and card-led, because it is the page a paying customer sees first.
   ========================================================================== */
.sf-body { background: #fff; color: #0F172A; font-family: var(--font-body); }

.sf-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px; border-bottom: 1px solid #E8ECF2; background: #fff;
  position: sticky; top: 0; z-index: 20;
}
.sf-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sf-logo {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  background: #F1F5FB center/contain no-repeat; border: 1px solid #E4EAF2;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--sf-accent, #1D4ED8);
}
.sf-brand-name { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: #0F172A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-account {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  border: 1px solid #DDE3EC; border-radius: 999px; padding: 7px 15px;
  font-size: 13.5px; font-weight: 600; color: #334155; background: #fff; cursor: pointer;
  text-decoration: none;
}
.sf-account:hover { border-color: #C3CEDD; background: #F8FAFC; }
.sf-account svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sf-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px 80px; }

.sf-hero { text-align: center; padding: 52px 0 30px; }
.sf-hero h1 { font-size: clamp(30px, 5vw, 40px); font-weight: 800; letter-spacing: -0.035em; color: #0F172A; margin-bottom: 12px; }
.sf-hero p { font-size: 16px; color: #64748B; max-width: 620px; margin: 0 auto; line-height: 1.55; }
.sf-assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 22px; }
.sf-assure span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: #475569; }
.sf-assure svg { width: 15px; height: 15px; fill: none; stroke: var(--sf-accent, #1D4ED8); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.sf-tabs { display: flex; gap: 4px; border-bottom: 1px solid #E8ECF2; margin-bottom: 30px; overflow-x: auto; }
.sf-tabs button {
  background: none; border: none; cursor: pointer; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: #64748B;
  padding: 12px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 140ms ease, border-color 140ms ease;
}
.sf-tabs button:hover { color: #0F172A; }
.sf-tabs button.active { color: var(--sf-accent, #1D4ED8); border-bottom-color: var(--sf-accent, #1D4ED8); }

.sf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 1023px) { .sf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 679px)  { .sf-grid { grid-template-columns: 1fr; } .sf-wrap { padding-inline: 18px; } .sf-topbar { padding-inline: 18px; } }

.sf-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #E4E9F0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.sf-card:hover { box-shadow: 0 8px 26px rgba(16,24,40,0.10); transform: translateY(-2px); }
.sf-media { position: relative; aspect-ratio: 16 / 10; background: #EEF2F7 center/cover no-repeat; flex-shrink: 0; }
.sf-media.empty { display: flex; align-items: center; justify-content: center; }
.sf-media.empty svg { width: 30px; height: 30px; stroke: #B6C2D2; fill: none; stroke-width: 1.5; }
.sf-flag {
  position: absolute; top: 12px; right: 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--sf-accent, #1D4ED8); border-radius: 999px; padding: 5px 11px;
}
.sf-body-pad { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
/* The close button is absolutely positioned over the top-right of the modal.
   Reserving that space on the *row* rather than only on the <h2> is what keeps
   the duration pill out from under it — the pill is the row's last flex item,
   so padding on the heading alone never moved it. */
.sf-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding-right: 40px; }
/* …unless there's a cover image, where the button sits over the photo instead. */
.sf-modal-media + .sf-modal-body .sf-title-row { padding-right: 0; }
.sf-title { font-size: 15.5px; font-weight: 700; color: #0F172A; letter-spacing: -0.015em; line-height: 1.3; }
.sf-dur { font-size: 11.5px; font-weight: 600; color: #64748B; background: #F4F6F9; border: 1px solid #E6EAF0; border-radius: 999px; padding: 3px 9px; white-space: nowrap; flex-shrink: 0; }
.sf-price { font-size: 21px; font-weight: 800; color: var(--sf-accent, #1D4ED8); letter-spacing: -0.03em; margin-bottom: 11px; }
.sf-price .star { font-size: 13px; vertical-align: super; opacity: 0.7; }
.sf-price .from { font-size: 15px; font-weight: 700; }

.sf-mode {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 12px; font-weight: 650; border-radius: 999px; padding: 5px 11px; margin-bottom: 13px;
}
.sf-mode svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sf-mode.instant { background: #E8F7EE; color: #12805A; border: 1px solid #C4E8D4; }
.sf-mode.quote   { background: #EEF3FD; color: #2158CC; border: 1px solid #D2E0F8; }

.sf-bullets { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; flex: 1; }
.sf-bullets li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: #475569; line-height: 1.45; }
.sf-bullets svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; fill: none; stroke: var(--sf-accent, #1D4ED8); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.sf-btn {
  width: 100%; border: none; cursor: pointer; border-radius: 9px;
  background: var(--sf-accent, #1D4ED8); color: #fff;
  font-size: 14px; font-weight: 650; padding: 12px 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter 140ms ease;
}
.sf-btn:hover { filter: brightness(1.08); }
.sf-btn.ghost { background: #fff; color: #334155; border: 1px solid #DDE3EC; }
.sf-btn.ghost:hover { background: #F8FAFC; filter: none; }

/* ------------------------------- Detail modal ------------------------------ */
.sf-overlay {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: flex-start; justify-content: center;
  background: rgba(15,23,42,0.55); padding: 34px 18px; overflow-y: auto;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.sf-overlay.open { display: flex; }
.sf-modal {
  width: 100%; max-width: 520px; background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,23,42,0.28); position: relative;
}
.sf-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.94); color: #334155;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(15,23,42,0.18);
}
.sf-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.sf-modal-media { aspect-ratio: 16 / 9; background: #EEF2F7 center/cover no-repeat; }
.sf-modal-body { padding: 24px 26px 26px; }
.sf-pill {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--sf-accent, #1D4ED8); background: #EEF3FD; border-radius: 6px; padding: 4px 9px; margin-bottom: 12px;
}
.sf-modal-body h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.025em; color: #0F172A; line-height: 1.25; margin-bottom: 8px; }
/* Headings outside .sf-title-row (booking form, confirmation) still need to
   clear the close button themselves. */
.sf-modal-body > h2 { padding-right: 44px; }
.sf-modal-body .sf-price { font-size: 23px; margin-bottom: 12px; }
.sf-prose p { font-size: 14px; color: #475569; line-height: 1.65; margin-bottom: 13px; }
.sf-prose p strong { color: #0F172A; font-weight: 650; }
.sf-included-title { font-size: 11.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #0F172A; margin: 20px 0 12px; }
.sf-included { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-bottom: 24px; list-style: none; }
@media (max-width: 519px) { .sf-included { grid-template-columns: 1fr; } }
.sf-included li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: #475569; line-height: 1.45; }
.sf-included svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; fill: none; stroke: var(--sf-accent, #1D4ED8); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------ Booking form ------------------------------- */
/* ------------------------------ Storefront slot picker ------------------------
   A week strip of days, then the free start times for whichever day is picked.
   Unavailable days stay visible but struck out rather than being hidden, so a
   customer can see *why* they can't have Sunday instead of wondering where it
   went. The storefront is a standalone page with its own light palette, so
   these are literal colours rather than dashboard tokens.
--------------------------------------------------------------------------- */
.sf-slots { border: 1px solid #E6EAF0; border-radius: 12px; padding: 12px; background: #FBFCFE; }
.sf-slots-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: #0F172A; }
.sf-slots-nav {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid #E6EAF0; background: #fff;
  display: flex; align-items: center; justify-content: center; color: #334155; cursor: pointer; flex-shrink: 0;
}
.sf-slots-nav:hover { border-color: #C7D0DC; }
.sf-slots-nav svg { width: 14px; height: 14px; }

.sf-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.sf-day {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 2px; border-radius: 9px; cursor: pointer;
  border: 1px solid #E6EAF0; background: #fff; color: #0F172A;
  transition: border-color 140ms ease, background 140ms ease;
  min-width: 0;
}
.sf-day .dow { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748B; }
.sf-day .num { font-size: 15px; font-weight: 700; line-height: 1.1; }
.sf-day .tag { font-size: 8.5px; font-weight: 600; color: #64748B; text-align: center; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sf-day:hover:not(.is-off) { border-color: var(--sf-accent, #1D4ED8); }
.sf-day.is-on { border-color: var(--sf-accent, #1D4ED8); background: #EEF3FD; }
.sf-day.is-on .num { color: var(--sf-accent, #1D4ED8); }
/* Greyed out and un-clickable: closed, fully booked, or blocked out. */
.sf-day.is-off {
  cursor: not-allowed; opacity: 0.5; background: #F4F6F9;
  background-image: repeating-linear-gradient(135deg, rgba(15,23,42,0.05) 0 4px, transparent 4px 8px);
}
.sf-day.is-off .num { text-decoration: line-through; color: #94A3B8; }

.sf-times { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sf-time {
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid #E6EAF0; background: #fff;
  font-size: 12.5px; font-weight: 650; color: #334155;
  font-variant-numeric: tabular-nums;
  transition: all 140ms ease;
}
.sf-time:hover { border-color: var(--sf-accent, #1D4ED8); }
.sf-time.is-on { background: var(--sf-accent, #1D4ED8); border-color: var(--sf-accent, #1D4ED8); color: #fff; }
.sf-slots-hint { font-size: 12.5px; color: #64748B; margin: 4px 0 0; }
.sf-slots-note { font-size: 12.5px; color: #475569; line-height: 1.55; margin-top: 8px; }
.sf-slots-note strong { color: #0F172A; }

@media (max-width: 420px) {
  .sf-day .tag { display: none; }
}

.sf-form .field { margin-bottom: 15px; }
.sf-form label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.sf-form .req { color: #C33C34; }
.sf-form input[type="text"], .sf-form input[type="email"], .sf-form input[type="tel"],
.sf-form input[type="date"], .sf-form input[type="number"], .sf-form select, .sf-form textarea {
  width: 100%; border: 1px solid #DDE3EC; border-radius: 9px; padding: 10px 12px;
  font-size: 14px; font-family: inherit; color: #0F172A; background: #fff;
}
.sf-form textarea { min-height: 88px; resize: vertical; }
.sf-form input:focus, .sf-form select:focus, .sf-form textarea:focus {
  outline: none; border-color: var(--sf-accent, #1D4ED8); box-shadow: 0 0 0 3px rgba(29,78,216,0.13);
}
.sf-form .help { font-size: 12px; color: #64748B; margin-top: 5px; }
.sf-form .check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: #334155; font-weight: 500; }
.sf-form .check input { width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; accent-color: var(--sf-accent, #1D4ED8); }
.sf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 519px) { .sf-row { grid-template-columns: 1fr; } }
.sf-error { font-size: 13px; color: #9B2C24; background: #FDEEED; border: 1px solid #F6CFCC; border-radius: 9px; padding: 10px 12px; margin-bottom: 14px; }
.sf-summary { background: #F6F8FB; border: 1px solid #E4E9F0; border-radius: 11px; padding: 13px 15px; margin-bottom: 18px; }
.sf-summary .n { font-size: 14.5px; font-weight: 700; color: #0F172A; }
.sf-summary .p { font-size: 13px; color: #64748B; margin-top: 3px; }

.sf-done { text-align: center; padding: 14px 0 6px; }
.sf-done .tick {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 16px;
  background: #E8F7EE; color: #12805A; display: flex; align-items: center; justify-content: center;
}
.sf-done .tick svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sf-done h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; padding: 0; }
.sf-done p { font-size: 14px; color: #64748B; line-height: 1.6; margin-bottom: 20px; }

.sf-foot { text-align: center; font-size: 12.5px; color: #94A3B8; padding-top: 40px; line-height: 1.6; }
.sf-empty { text-align: center; padding: 60px 20px; color: #64748B; font-size: 15px; }
.sf-empty h2 { font-size: 20px; font-weight: 700; color: #0F172A; margin-bottom: 8px; letter-spacing: -0.02em; }

/* ==========================================================================
   Toasts — bottom-right notification stack (assets/js/toast.js)
   Above modals (z 200) and the tour (z 400): a toast is usually reporting on
   whatever the thing on top just did, so it has to clear it.
   ========================================================================== */
.df-toast-host {
  position: fixed;
  right: var(--space-5); bottom: var(--space-5);
  z-index: 500;
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-end;
  max-width: min(400px, calc(100vw - var(--space-5) * 2));
  pointer-events: none;                 /* clicks fall through the gaps */
}

.df-toast {
  pointer-events: auto;                 /* ...but not through a toast itself */
  position: relative;
  display: flex; align-items: flex-start; gap: 11px;
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  background: var(--db-surface, #fff);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(11,22,40,0.14), 0 2px 6px rgba(11,22,40,0.06);
  overflow: hidden;
  transform: translateX(16px);
  opacity: 0;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease;
}
.df-toast.is-in  { transform: translateX(0); opacity: 1; }
.df-toast.is-out { transform: translateX(16px); opacity: 0; }

.df-toast-icon { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.df-toast-success .df-toast-icon { color: var(--success-text); }
.df-toast-error   .df-toast-icon { color: var(--danger-text); }
.df-toast-warn    .df-toast-icon { color: var(--warning-text); }
.df-toast-info    .df-toast-icon { color: var(--navy-600); }

/* A 3px colour rail rather than a fully tinted card: keeps the text on a plain
   surface so it stays readable in both themes. */
.df-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.df-toast-success::before { background: var(--success-500); }
.df-toast-error::before   { background: var(--danger-500); }
.df-toast-warn::before    { background: var(--warning-500); }
.df-toast-info::before    { background: var(--brand-blue-deep); }

.df-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.df-toast-title { font-size: var(--text-sm); font-weight: 700; color: var(--db-ink-1, var(--navy-950)); letter-spacing: -0.01em; }
.df-toast-msg { font-size: var(--text-sm); line-height: 1.45; color: var(--db-ink-2, var(--navy-600)); overflow-wrap: anywhere; }
.df-toast-action {
  align-self: flex-start; margin-top: 5px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: var(--text-xs); font-weight: 700; color: var(--brand-blue-deep);
  text-decoration: underline; text-underline-offset: 2px;
}
.df-toast-action:hover { filter: brightness(1.15); }

.df-toast-close {
  flex-shrink: 0; width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 6px; cursor: pointer;
  color: var(--db-ink-3, var(--navy-500)); opacity: 0.65;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.df-toast-close:hover { opacity: 1; background: rgba(11,22,40,0.06); }
.df-toast-close svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

.df-toast-timer {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  transform-origin: left center;
  animation: df-toast-countdown linear forwards;
}
.df-toast-success .df-toast-timer { background: rgba(var(--success-rgb), 0.5); }
.df-toast-error   .df-toast-timer { background: rgba(var(--danger-rgb), 0.5); }
.df-toast-warn    .df-toast-timer { background: rgba(var(--warning-rgb), 0.5); }
.df-toast-info    .df-toast-timer { background: rgba(var(--info-rgb), 0.5); }
.df-toast.is-paused .df-toast-timer { animation-play-state: paused; }
@keyframes df-toast-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

:root[data-theme="dark"] .df-toast { background: var(--db-surface); border-color: rgba(255,255,255,0.1); box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
:root[data-theme="dark"] .df-toast-close:hover { background: rgba(255,255,255,0.08); }

@media (max-width: 560px) {
  .df-toast-host { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .df-toast { transition: opacity 120ms ease; transform: none; }
  .df-toast.is-in, .df-toast.is-out { transform: none; }
  .df-toast-timer { animation: none; display: none; }
}

/* ==========================================================================
   Usage meters — Settings > Usage, and the trial banner
   ========================================================================== */
.usage-meter { padding: var(--space-4) 0; border-bottom: 1px solid var(--glass-border); }
.usage-meter:last-child { border-bottom: none; padding-bottom: 0; }
.usage-meter:first-child { padding-top: 0; }

.usage-meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 4px; }
.usage-meter-name { font-size: var(--text-sm); font-weight: 650; color: var(--db-ink-1, var(--navy-950)); }
.usage-meter-count { font-size: var(--text-xs); color: var(--db-ink-3, var(--navy-500)); font-variant-numeric: tabular-nums; }
.usage-meter-desc { font-size: var(--text-xs); color: var(--db-ink-3, var(--navy-500)); margin-bottom: 9px; }

.usage-bar {
  position: relative;
  height: 8px; border-radius: var(--radius-pill);
  background: rgba(11,22,40,0.07);
  overflow: hidden;
}
:root[data-theme="dark"] .usage-bar { background: rgba(255,255,255,0.09); }

.usage-bar-fill {
  height: 100%; border-radius: var(--radius-pill);
  background: var(--accent-grad-sm);
  width: 0;
  transition: width 700ms cubic-bezier(.2,.8,.2,1);
}
/* Colour is the earliest warning that something is about to stop working, so
   it shifts before the bar is actually full. */
.usage-meter.is-warn .usage-bar-fill  { background: linear-gradient(115deg, var(--warning-500), #E8791F); }
.usage-meter.is-full .usage-bar-fill  { background: linear-gradient(115deg, var(--danger-500), #C0392B); }

.usage-meter-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: 6px; }
.usage-meter-pct { font-size: var(--text-xs); font-weight: 700; color: var(--db-ink-2, var(--navy-600)); font-variant-numeric: tabular-nums; }
.usage-meter.is-warn .usage-meter-pct { color: var(--warning-text); }
.usage-meter.is-full .usage-meter-pct { color: var(--danger-text); }
.usage-meter-note { font-size: var(--text-xs); color: var(--db-ink-3, var(--navy-500)); }

/* Trial countdown strip, shown above the dashboard while a trial is running. */
.trial-banner {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: 11px var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--brand-indigo-rgb), 0.25);
  background: linear-gradient(90deg, rgba(var(--brand-indigo-rgb),0.10) 0%, rgba(var(--brand-orange-rgb),0.07) 100%);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--db-ink-1, var(--navy-950));
}
.trial-banner.is-urgent { border-color: rgba(var(--warning-rgb), 0.45); background: rgba(var(--warning-rgb), 0.10); }
.trial-banner.is-over   { border-color: rgba(var(--danger-rgb), 0.45);  background: rgba(var(--danger-rgb), 0.09); }
.trial-banner svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trial-banner strong { font-weight: 700; }
.trial-banner .spacer { flex: 1; }

/* ==========================================================================
   Setup completion meter — dashboard overview
   ========================================================================== */
.setup-meter-card {
  background: var(--db-surface, #fff);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(11,22,40,0.05));
}
.setup-meter-top { display: flex; align-items: center; gap: var(--space-4); }
.setup-meter-copy { flex: 1; min-width: 0; }
.setup-meter-copy h2 { font-size: var(--text-base); font-weight: 700; letter-spacing: -0.015em; color: var(--db-ink-1, var(--navy-950)); margin-bottom: 3px; }
.setup-meter-copy p { font-size: var(--text-sm); color: var(--db-ink-3, var(--navy-500)); }

.setup-meter-ring { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.setup-meter-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.setup-meter-ring circle { fill: none; stroke-width: 4; }
.setup-meter-ring .track { stroke: rgba(11,22,40,0.08); }
:root[data-theme="dark"] .setup-meter-ring .track { stroke: rgba(255,255,255,0.1); }
.setup-meter-ring .fill {
  stroke: var(--brand-blue-deep);
  stroke-linecap: round;
  /* 2πr for r=19. dashoffset is set from JS as (1 - pct) * this. */
  stroke-dasharray: 119.38;
  stroke-dashoffset: 119.38;
  transition: stroke-dashoffset 900ms cubic-bezier(.2,.8,.2,1);
}
.setup-meter-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--db-ink-1, var(--navy-950));
  font-variant-numeric: tabular-nums;
}

.setup-meter-list {
  list-style: none; margin: var(--space-4) 0 0; padding: var(--space-4) 0 0;
  border-top: 1px solid var(--glass-border);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 9px;
}
.setup-meter-item { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); }
.setup-meter-item a { color: var(--db-ink-2, var(--navy-600)); text-decoration: none; }
.setup-meter-item a:hover { color: var(--brand-blue-deep); text-decoration: underline; }
.setup-meter-tick {
  width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(11,22,40,0.18);
}
:root[data-theme="dark"] .setup-meter-tick { border-color: rgba(255,255,255,0.2); }
.setup-meter-tick svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.setup-meter-item.is-done .setup-meter-tick { background: var(--success-500); border-color: var(--success-500); }
.setup-meter-item.is-done .setup-meter-tick svg { opacity: 1; }
.setup-meter-item.is-done a { color: var(--db-ink-3, var(--navy-500)); text-decoration: line-through; }

@media (max-width: 560px) {
  .setup-meter-top { flex-wrap: wrap; }
  .setup-meter-copy { flex-basis: 100%; order: 3; }
}

/* ==========================================================================
   Opening-hours editor — setup wizard step 3
   ========================================================================== */
.hours-grid { display: flex; flex-direction: column; gap: 8px; }
.hours-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px 13px;
  border: 1px solid #D8DEE8; border-radius: 10px;
  background: #fff;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.hours-row.is-closed { background: #F8FAFC; border-color: #E4E9F0; }
.hours-day { display: flex; align-items: center; gap: 9px; flex: 0 0 140px; font-size: 14px; font-weight: 600; color: #0F172A; cursor: pointer; }
.hours-day input { width: 16px; height: 16px; accent-color: var(--brand-blue-deep); cursor: pointer; }
.hours-row.is-closed .hours-day { color: #94A3B8; }

.hours-times { display: flex; align-items: center; gap: 9px; flex: 1; }
.hours-times .input { padding: 7px 10px; font-size: 13.5px; width: auto; flex: 0 0 auto; }
.hours-times .input:disabled { opacity: 0.45; }
.hours-sep { font-size: 13px; color: #64748B; }
.hours-row.is-closed .hours-times { display: none; }

.hours-closed-label { display: none; font-size: 13px; color: #94A3B8; font-style: italic; }
.hours-row.is-closed .hours-closed-label { display: inline; }

@media (max-width: 559px) {
  .hours-row { flex-wrap: wrap; }
  .hours-day { flex-basis: 100%; }
}

/* ==========================================================================
   Page load state — app.js adds/removes body.df-loading around the gap
   between first paint and real data arriving (Supabase round-trip). Two
   things happen while it's present: a slim progress bar runs across the top
   of the page, and the page's own content is gently dimmed and can't be
   clicked, instead of sitting there fully-formed but showing zeros and empty
   tables. Both come off together the instant data lands, so "loading" never
   outlives the data it was covering.
   ========================================================================== */
.df-loadbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 600;                 /* above toasts (500) — this is the one thing
                                    that should never be obscured while it runs */
  background: var(--accent-grad-sm);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
body.df-loading .df-loadbar {
  opacity: 1;
  animation: df-loadbar-run 1.1s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes df-loadbar-run {
  0%   { transform: scaleX(0);    opacity: 0.9; }
  55%  { transform: scaleX(0.72); opacity: 1; }
  100% { transform: scaleX(1);    opacity: 0; }
}

/* The page's own content, not the sidebar/topbar chrome around it — those stay
   crisp and clickable throughout, since navigating away doesn't depend on the
   data that's still loading. */
body.df-loading .page-content {
  opacity: 0.45;
  filter: saturate(0.65);
  pointer-events: none;
  transition: opacity 260ms ease, filter 260ms ease;
}
body:not(.df-loading) .page-content {
  animation: df-content-in 320ms ease both;
}
@keyframes df-content-in { from { opacity: 0.45; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  body.df-loading .df-loadbar { animation: none; opacity: 0.9; transform: scaleX(0.6); }
  body:not(.df-loading) .page-content { animation: none; }
}