/* Minimal placeholder stylesheet — proper styling comes in Step 14 (dashboard) */
:root {
  --green: #1B4332;
  --bg: #f7f7f5;
  --text: #1a1a1a;
  /* --muted bumped from #6b6b6b -> #4b5563 (chat-17 Phase 2 light-mode
     contrast pass). Old value was 4.6:1 on white (borderline AA); new
     value is 7.2:1 (AAA). Reception reported gray-on-white text in
     invoice rows / appointments / consultations as faded; this fixes
     it for every `var(--muted)` consumer at once. Affects Classic +
     Modern light; dark mode overrides --muted separately. */
  --muted: #4b5563;
  --border: #e5e5e5;
}
* { box-sizing: border-box; }

/* Row-click affordance (chat-17 Phase T originally on /invoices/;
   chat-18 extended system-wide via static/js/row-click.js). Any
   <tr class="row-clickable" data-href="..."> shows the pointer
   cursor and navigates on click. JS handler in row-click.js. */
.row-clickable { cursor: pointer; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px 24px; background: white; border-bottom: 1px solid var(--border); }
.nav a { color: var(--text); text-decoration: none; font-size: 14px; }
.nav a:hover { color: var(--green); }
.nav-brand { font-weight: 700; color: var(--green); margin-right: 16px; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand:hover { color: #143828; }

/* Kill the up/down spinner arrows on every <input type="number"> across the app.
   Reception was hitting these accidentally (e.g. scroll-wheel over an amount field
   silently decremented Rs. 2500 → Rs. 2499.99 with step="0.01"). Manual typing
   still works fine — only the visual spinner is removed.
   2026-04-28 fix. */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.nav-logo { height: 32px; width: auto; max-width: 120px; object-fit: contain; }
.brand-text { font-size: 15px; }
.nav-spacer { flex: 1; }
.logout-form { display: inline; }
.logout-form button { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 14px; }
.report-bug-link { font-size: 13px; padding: 4px 10px; background: #fef3c7; color: #78350f !important; border-radius: 4px; text-decoration: none; }
.report-bug-link:hover { background: #fde68a; color: #78350f !important; }

/* "▸ username" chip in the top nav. Opens /me/password/. Styled as a pill so
   reception can see it's clickable -- the previous styling (muted + emoji)
   was indistinguishable from plain text on Windows when the emoji didn't render. */
.user-chip {
  font-size: 13px; padding: 4px 10px; border-radius: 4px;
  background: #ecfdf5; color: #065f46 !important;
  text-decoration: none; font-weight: 600;
  border: 1px solid #a7f3d0;
}
.user-chip:hover { background: #d1fae5; border-color: #6ee7b7; }

/* "Settings" link in the top nav. Masters-only (chintan/krushal/ankit).
   Subtler than the username chip so it doesn't visually compete -- it's a
   maintenance entry-point, not an everyday tool. */
.nav-link-settings {
  font-size: 13px; padding: 4px 10px; border-radius: 4px;
  background: white; color: var(--muted) !important;
  text-decoration: none; font-weight: 600;
  border: 1px solid var(--border);
}
.nav-link-settings:hover { background: var(--bg); color: var(--green) !important; border-color: #6ee7b7; }

/* Unreviewed reception actions pill in nav (chat-14 refund-plan Q-R3) */
.unreviewed-pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e !important;
  border: 1px solid #fde68a;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  margin-right: 6px;
}
.unreviewed-pill:hover { background: #fed7aa; }

/* Theme toggle (chat-14) -- Classic vs Modern picker in the nav.
   Modern is a chat-14 stub (clones Classic styling); real Modern visuals
   land in chat-15. See INSIGHTS_AND_THEMING_PLAN.md §4. */
.theme-toggle { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.theme-toggle-form { display: inline; margin: 0; }
.theme-btn { background: white; border: none; font-size: 12px; padding: 4px 10px; color: var(--muted); cursor: pointer; font-weight: 600; }
.theme-btn:hover { background: var(--bg); color: var(--green); }
.theme-btn-active { background: var(--green); color: white; }
.theme-btn-active:hover { background: var(--green); color: white; cursor: default; }
.theme-toggle-form + .theme-toggle-form .theme-btn { border-left: 1px solid var(--border); }

/* Header clock (chat-17): real-time day + date + time in the nav.
   tabular-nums keeps the digits from jittering horizontally on each tick. */
.header-clock {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; background: white; border: 1px solid var(--border);
  border-radius: 4px; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.header-clock #header-clock-text { font-weight: 600; color: var(--text); }

/* Insights page (chat-14 ships skeleton + Sections 2 & 3) ----------- */
.insights-shell { padding-bottom: 32px; }
.insights-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.insights-header h1 { color: var(--green); margin: 0; }
.insights-filterbar {
  position: sticky; top: 0; z-index: 5; background: white;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-bottom: 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.insights-filterbar label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.insights-filterbar select, .insights-filterbar input[type="date"], .insights-filterbar input[type="text"] { font-size: 13px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; }
.insights-filterbar button.filter-apply { background: var(--green); color: white; border: none; padding: 6px 14px; border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 13px; }
.insights-filterbar button.filter-apply:hover { filter: brightness(1.1); }
.insights-filterbar .live-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); cursor: pointer; text-transform: none; letter-spacing: 0; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border); background: white; }
.insights-filterbar .live-toggle input { margin: 0; }
.insights-filterbar .live-toggle:hover { color: var(--green); border-color: #6ee7b7; }
.insights-jumpnav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.insights-jumpnav a { font-size: 12px; padding: 4px 12px; border-radius: 16px; background: white; border: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: 600; }
.insights-jumpnav a:hover { background: var(--bg); border-color: var(--green); color: var(--green); }
.insights-jumpnav a.placeholder { opacity: 0.5; cursor: default; }

.insights-section { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 18px 22px; margin-bottom: 22px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); scroll-margin-top: 80px; }
.insights-section h2 { color: var(--green); margin: 0 0 4px; font-size: 18px; }
.insights-section .section-subtitle { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.insights-section.section-placeholder { background: var(--bg); border-style: dashed; }
.insights-section.section-placeholder h2 { color: var(--muted); }

.insights-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.insights-kpi {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px;
}
.insights-kpi-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.insights-kpi-number { font-size: 22px; font-weight: 700; color: var(--green); margin-top: 4px; line-height: 1.1; }
.insights-kpi-detail { font-size: 12px; color: var(--muted); margin-top: 3px; }

.insights-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.insights-table thead { background: var(--bg); }
.insights-table th { text-align: left; background: var(--bg); color: var(--muted); padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--border); }
.insights-table th.numeric, .insights-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.insights-table th a { color: inherit; text-decoration: none; }
.insights-table th a:hover { color: var(--green); }
.insights-table th .sort-arrow { font-size: 10px; margin-left: 3px; }
.insights-table td { padding: 8px 10px; border-bottom: 1px dashed var(--border); }
.insights-table tr:hover td { background: #f9fafb; }
.insights-table tfoot td { font-weight: 600; background: var(--bg); border-top: 2px solid var(--border); }
.insights-table .product-name { font-weight: 600; color: var(--green); }
.insights-table .muted-cell { color: var(--muted); }
.insights-empty { color: var(--muted); padding: 16px 0; text-align: center; font-style: italic; }
.insights-section .row-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; font-size: 12px; }
.insights-section .row-actions .pill { padding: 3px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; color: var(--muted); }
.insights-section .csv-btn { background: white; border: 1px solid var(--border); color: var(--green); padding: 4px 12px; border-radius: 4px; text-decoration: none; font-size: 12px; font-weight: 600; }
.insights-section .csv-btn:hover { background: var(--green); color: white; }
.delta-up { color: #16a34a; font-weight: 600; }
.delta-down { color: #dc2626; font-weight: 600; }

/* Operations heatmap (chat-15 Section 4) */
.heatmap-wrap { overflow-x: auto; }
table.heatmap { border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
table.heatmap th { background: var(--bg); color: var(--muted); padding: 4px 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; text-align: center; }
table.heatmap thead th { border-bottom: 1px solid var(--border); min-width: 24px; }
table.heatmap tbody th { text-align: right; padding-right: 8px; }
.hm-cell { width: 24px; height: 22px; text-align: center; border: 1px solid #f3f4f6; font-weight: 600; }

/* Status pills (chat-15 Section 4) */
.status-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.status-pill { font-size: 11px; padding: 3px 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-weight: 600; }
.status-pill strong { color: var(--green); margin-left: 4px; }
.status-pill-no_show, .status-pill-cancelled { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.status-pill-no_show strong, .status-pill-cancelled strong { color: #991b1b; }
.status-pill-done { background: #d1fae5; border-color: #a7f3d0; color: #065f46; }
.status-pill-done strong { color: #065f46; }
.status-pill-waiting, .status-pill-in_consult { background: #fed7aa; border-color: #fdba74; color: #9a3412; }
.status-pill-waiting strong, .status-pill-in_consult strong { color: #9a3412; }

/* ==================================================================
   MODERN THEME (chat-15)
   ==================================================================
   Stripe-like polished aesthetic per Ankit's chat-15 choice. Soft
   gradient surfaces, generous spacing, layered shadows, friendly
   typography, smooth micro-interactions. Applies to dashboard +
   insights surfaces. Other pages keep Classic styling for now;
   chat-16 polish pass extends Modern to invoices + patient detail
   if Chintan/Krushal approve the look.

   Toggled via UserPreferences.dashboard_theme = 'modern'. Body gets
   <html data-theme="modern"> from the context processor.
   ================================================================== */
[data-theme="modern"] {
  --modern-accent: #1B4332;
  --modern-accent-2: #2d6a4f;
  --modern-accent-soft: #d1fae5;
  --modern-surface: #ffffff;
  --modern-surface-soft: #fafbfc;
  --modern-border: #ebedf0;
  --modern-text: #0f172a;
  --modern-muted: #64748b;
  --modern-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --modern-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --modern-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
  --modern-radius-card: 14px;
  --modern-radius-input: 8px;
  --modern-radius-pill: 999px;
  --modern-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="modern"] body {
  background:
    radial-gradient(ellipse at top left, rgba(82, 183, 136, 0.06), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(27, 67, 50, 0.04), transparent 50%),
    var(--modern-surface-soft);
  color: var(--modern-text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  letter-spacing: -0.005em;
}

/* Headings get tighter tracking + slightly heavier weight */
[data-theme="modern"] h1,
[data-theme="modern"] h2,
[data-theme="modern"] h3 { letter-spacing: -0.02em; }
[data-theme="modern"] h1 { font-weight: 700; }
[data-theme="modern"] h2 { font-weight: 650; }
[data-theme="modern"] h3 { font-weight: 600; }

/* Nav with subtle backdrop blur */
[data-theme="modern"] .nav {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--modern-border);
  box-shadow: var(--modern-shadow-sm);
  padding: 14px 28px;
}

/* ---------- Dashboard ---------- */

[data-theme="modern"] .dashboard-v2 h1 { color: var(--modern-text); font-size: 32px; }
[data-theme="modern"] .dash-meta .muted { color: var(--modern-muted); }

[data-theme="modern"] .kpi-row,
[data-theme="modern"] .info-row,
[data-theme="modern"] .insights-kpi-row {
  gap: 18px;
}

[data-theme="modern"] .kpi-tile,
[data-theme="modern"] .info-card,
[data-theme="modern"] .chart-card,
[data-theme="modern"] .insights-section,
[data-theme="modern"] .insights-kpi {
  background: var(--modern-surface);
  border: 1px solid var(--modern-border);
  border-radius: var(--modern-radius-card);
  box-shadow: var(--modern-shadow-sm);
  padding: 20px 22px;
  transition: transform 200ms var(--modern-ease), box-shadow 200ms var(--modern-ease);
}

[data-theme="modern"] .kpi-tile:hover,
[data-theme="modern"] .info-card:hover,
[data-theme="modern"] .insights-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--modern-shadow-md);
}

[data-theme="modern"] .kpi-tile-primary {
  background: linear-gradient(135deg, var(--modern-accent) 0%, var(--modern-accent-2) 100%);
  border-color: transparent;
  color: white;
  box-shadow: 0 10px 25px -5px rgba(27, 67, 50, 0.35), 0 4px 6px -2px rgba(27, 67, 50, 0.20);
}
[data-theme="modern"] .kpi-tile-primary:hover {
  box-shadow: 0 14px 30px -5px rgba(27, 67, 50, 0.42), 0 6px 8px -2px rgba(27, 67, 50, 0.25);
}
[data-theme="modern"] .kpi-tile-primary .kpi-number { color: white; font-weight: 700; }

[data-theme="modern"] .kpi-tile-warn {
  border-left: none;
  background: linear-gradient(135deg, #fffaf0 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
}

[data-theme="modern"] .kpi-label,
[data-theme="modern"] .info-card-subtitle,
[data-theme="modern"] .insights-kpi-label,
[data-theme="modern"] .insights-filterbar label {
  color: var(--modern-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
}

[data-theme="modern"] .kpi-number,
[data-theme="modern"] .insights-kpi-number {
  color: var(--modern-text);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: 30px;
  line-height: 1.05;
  font-feature-settings: "tnum", "lnum";
}
/* Dashboard tile headline -- chat-16 v2 cosmetic rework per Ankit's
   feedback. The original 30px / 700-weight treatment was too loud +
   structurally weak (the headline number floated on its own, the
   sub-text wrapped under it ambiguously, the whole block felt
   unbalanced). v2:
     - Number sized at 24px, weight 600 (down from 30/700) -- still
       prominent but not shouty.
     - Sub-text becomes a labeled second-row block sized at 12px /
       letter-spaced uppercase, like the existing card labels. Makes
       the tile read as <number> + <metric label> rather than a
       run-on sentence.
     - The whole headline gets a bottom border so it visually
       separates from the list below (top categories / pending
       patients / etc).
     - Padding-bottom for breathing room.
   /insights/ KPIs and bare `.kpi-number` keep their 30px since those
   ARE the primary visual hook on those pages. */
[data-theme="modern"] .info-card-headline {
  color: var(--modern-text);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 24px;
  line-height: 1.2;
  font-feature-settings: "tnum", "lnum";
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--modern-border);
}
[data-theme="modern"] .info-card-headline-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-left: 0;
  /* opacity replaces the inherited .muted color so it still reads on
     both light + dark mode without theme-specific overrides */
  opacity: 0.7;
}
[data-theme="modern"] .info-card-headline.credit { color: #15803d; }
[data-theme="modern"] .info-card-headline.debit  { color: #b91c1c; }
[data-theme="modern"] .info-card h3,
[data-theme="modern"] .insights-section h2,
[data-theme="modern"] .insights-section h3 {
  color: var(--modern-text);
}

[data-theme="modern"] .delta-up   { color: #16a34a; }
[data-theme="modern"] .delta-down { color: #dc2626; }
[data-theme="modern"] .kpi-tile-primary .delta-up   { color: #bbf7d0; }
[data-theme="modern"] .kpi-tile-primary .delta-down { color: #fecaca; }

[data-theme="modern"] .pill-default { background: var(--modern-accent); color: white; border-radius: var(--modern-radius-pill); padding: 2px 8px; }
[data-theme="modern"] .badge-warn { background: #fef3c7; color: #b45309; border-radius: var(--modern-radius-pill); padding: 2px 10px; }
[data-theme="modern"] .badge-neutral { background: var(--modern-accent-soft); color: var(--modern-accent); border-radius: var(--modern-radius-pill); padding: 2px 10px; }

/* ---------- Insights surface ---------- */

[data-theme="modern"] .insights-shell { max-width: 1400px; margin: 0 auto; padding: 16px 24px 48px; }
[data-theme="modern"] .insights-header h1 { color: var(--modern-text); font-size: 32px; }

[data-theme="modern"] .insights-filterbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid var(--modern-border);
  border-radius: var(--modern-radius-card);
  box-shadow: var(--modern-shadow-md);
  padding: 14px 20px;
}
[data-theme="modern"] .insights-filterbar select,
[data-theme="modern"] .insights-filterbar input[type="date"],
[data-theme="modern"] .insights-filterbar input[type="text"] {
  border-radius: var(--modern-radius-input);
  border: 1px solid var(--modern-border);
  padding: 6px 10px;
  background: var(--modern-surface);
  transition: border-color 150ms var(--modern-ease), box-shadow 150ms var(--modern-ease);
}
[data-theme="modern"] .insights-filterbar select:focus,
[data-theme="modern"] .insights-filterbar input:focus {
  outline: none;
  border-color: var(--modern-accent-2);
  box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.15);
}
[data-theme="modern"] .insights-filterbar button.filter-apply {
  background: linear-gradient(135deg, var(--modern-accent) 0%, var(--modern-accent-2) 100%);
  border-radius: var(--modern-radius-input);
  padding: 8px 18px;
  box-shadow: 0 4px 6px -1px rgba(27, 67, 50, 0.25);
  transition: transform 150ms var(--modern-ease), box-shadow 150ms var(--modern-ease);
}
[data-theme="modern"] .insights-filterbar button.filter-apply:hover {
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 8px -1px rgba(27, 67, 50, 0.35);
}

[data-theme="modern"] .insights-jumpnav a {
  border-radius: var(--modern-radius-pill);
  padding: 6px 16px;
  border: 1px solid var(--modern-border);
  font-weight: 500;
  transition: all 150ms var(--modern-ease);
}
[data-theme="modern"] .insights-jumpnav a:hover {
  background: var(--modern-accent);
  color: white;
  border-color: var(--modern-accent);
  transform: translateY(-1px);
}

[data-theme="modern"] .insights-section {
  padding: 24px 28px;
}
[data-theme="modern"] .insights-section h2 {
  font-size: 20px;
  font-weight: 650;
}
[data-theme="modern"] .insights-section.section-placeholder {
  background: linear-gradient(135deg, var(--modern-surface-soft) 0%, #f8fafc 100%);
  border: 1px dashed var(--modern-border);
}

[data-theme="modern"] .insights-kpi {
  background: var(--modern-surface);
  border-radius: 10px;
  padding: 16px 18px;
}
[data-theme="modern"] .insights-kpi-number { font-size: 24px; }
[data-theme="modern"] .insights-kpi-detail { color: var(--modern-muted); }

[data-theme="modern"] .insights-table { font-size: 13px; }
[data-theme="modern"] .insights-table thead { background: var(--modern-surface-soft); }
[data-theme="modern"] .insights-table th {
  color: var(--modern-muted);
  border-bottom: 1px solid var(--modern-border);
  padding: 10px 12px;
}
[data-theme="modern"] .insights-table td {
  border-bottom: 1px solid #f1f5f9;
  padding: 10px 12px;
}
[data-theme="modern"] .insights-table tr:hover td { background: #f8fafc; }
[data-theme="modern"] .insights-table tfoot td { background: var(--modern-surface-soft); font-weight: 650; }

/* Stagger fade-in for tiles + cards on initial load.
   nth-child delays ramp from 0ms to ~600ms across 12 elements. */
@keyframes modern-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-theme="modern"] .kpi-row > *,
[data-theme="modern"] .info-row > *,
[data-theme="modern"] .insights-kpi-row > *,
[data-theme="modern"] .insights-section {
  animation: modern-fade-up 400ms var(--modern-ease) both;
}
[data-theme="modern"] .kpi-row > *:nth-child(1),
[data-theme="modern"] .insights-kpi-row > *:nth-child(1) { animation-delay: 0ms; }
[data-theme="modern"] .kpi-row > *:nth-child(2),
[data-theme="modern"] .insights-kpi-row > *:nth-child(2) { animation-delay: 60ms; }
[data-theme="modern"] .kpi-row > *:nth-child(3),
[data-theme="modern"] .insights-kpi-row > *:nth-child(3) { animation-delay: 120ms; }
[data-theme="modern"] .kpi-row > *:nth-child(4),
[data-theme="modern"] .insights-kpi-row > *:nth-child(4) { animation-delay: 180ms; }
[data-theme="modern"] .kpi-row > *:nth-child(5),
[data-theme="modern"] .insights-kpi-row > *:nth-child(5) { animation-delay: 240ms; }
[data-theme="modern"] .info-row > *:nth-child(1) { animation-delay: 60ms; }
[data-theme="modern"] .info-row > *:nth-child(2) { animation-delay: 120ms; }
[data-theme="modern"] .info-row > *:nth-child(3) { animation-delay: 180ms; }
[data-theme="modern"] .info-row > *:nth-child(4) { animation-delay: 240ms; }
[data-theme="modern"] .info-row > *:nth-child(5) { animation-delay: 300ms; }
[data-theme="modern"] .info-row > *:nth-child(6) { animation-delay: 360ms; }
[data-theme="modern"] .info-row > *:nth-child(7) { animation-delay: 420ms; }
[data-theme="modern"] .info-row > *:nth-child(8) { animation-delay: 480ms; }
[data-theme="modern"] .insights-section:nth-of-type(1) { animation-delay: 120ms; }
[data-theme="modern"] .insights-section:nth-of-type(2) { animation-delay: 180ms; }
[data-theme="modern"] .insights-section:nth-of-type(3) { animation-delay: 240ms; }
[data-theme="modern"] .insights-section:nth-of-type(4) { animation-delay: 300ms; }
[data-theme="modern"] .insights-section:nth-of-type(5) { animation-delay: 360ms; }
[data-theme="modern"] .insights-section:nth-of-type(6) { animation-delay: 420ms; }
[data-theme="modern"] .insights-section:nth-of-type(7) { animation-delay: 480ms; }

/* Respect prefers-reduced-motion -- accessibility */
@media (prefers-reduced-motion: reduce) {
  [data-theme="modern"] .kpi-row > *,
  [data-theme="modern"] .info-row > *,
  [data-theme="modern"] .insights-kpi-row > *,
  [data-theme="modern"] .insights-section {
    animation: none;
  }
  [data-theme="modern"] .kpi-tile,
  [data-theme="modern"] .info-card,
  [data-theme="modern"] .insights-kpi { transition: none; }
}

/* ==================================================================
   MODERN THEME — shared primitives across non-dashboard pages
   ==================================================================
   These selectors hit utility classes used across invoices, patient
   detail, expenses, reports, appointments. Because `[data-theme="modern"]`
   has higher specificity than the per-template `.action-btn` / `.flash`
   / etc. base styles, Modern wins regardless of `<style>` order.
   ================================================================== */

/* Generic tables across pages -- list views, detail tables, summaries */
[data-theme="modern"] table { border-collapse: separate; border-spacing: 0; }
[data-theme="modern"] table thead th {
  background: var(--modern-surface-soft);
  color: var(--modern-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--modern-border);
}
[data-theme="modern"] table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
}
[data-theme="modern"] table tbody tr:hover td { background: #f8fafc; }
[data-theme="modern"] table tbody tr:last-child td { border-bottom: none; }
[data-theme="modern"] table tfoot td {
  background: var(--modern-surface-soft);
  font-weight: 650;
  border-top: 2px solid var(--modern-border);
}

/* Action buttons (used app-wide on invoice / patient / expense / clinical) */
[data-theme="modern"] .action-btn,
[data-theme="modern"] a.action-btn,
[data-theme="modern"] button.action-btn {
  border-radius: var(--modern-radius-input);
  font-weight: 600;
  padding: 8px 16px;
  font-size: 13px;
  border: 1px solid var(--modern-border);
  background: var(--modern-surface);
  color: var(--modern-text);
  transition: all 150ms var(--modern-ease);
  box-shadow: var(--modern-shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
[data-theme="modern"] .action-btn:hover,
[data-theme="modern"] a.action-btn:hover,
[data-theme="modern"] button.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--modern-shadow-md);
  border-color: var(--modern-accent-2);
  color: var(--modern-accent);
  text-decoration: none;
}
/* Primary-flavour action button -- when a per-page CSS adds a "primary" or
   "create" class. Catches the common positive/save case. */
[data-theme="modern"] .action-btn.primary,
[data-theme="modern"] .action-btn.create,
[data-theme="modern"] .action-btn.btn-primary,
[data-theme="modern"] a.action-btn.primary,
[data-theme="modern"] button[type="submit"].action-btn {
  background: linear-gradient(135deg, var(--modern-accent) 0%, var(--modern-accent-2) 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 6px -1px rgba(27, 67, 50, 0.25);
}
[data-theme="modern"] .action-btn.primary:hover,
[data-theme="modern"] button[type="submit"].action-btn:hover {
  color: white;
  border-color: transparent;
  box-shadow: 0 8px 12px -2px rgba(27, 67, 50, 0.35);
}
/* Preserve the WhatsApp green override -- it's brand colour, shouldn't theme */
[data-theme="modern"] .action-btn.wa-btn,
[data-theme="modern"] a.action-btn.wa-btn {
  background: #25D366 !important;
  color: white !important;
  border-color: #25D366 !important;
}

/* Form inputs -- consistent radius + focus ring across every form */
[data-theme="modern"] input[type="text"]:not(.no-modern):not(#quick-search-input),
[data-theme="modern"] input[type="number"]:not(.no-modern),
[data-theme="modern"] input[type="date"]:not(.no-modern),
[data-theme="modern"] input[type="email"]:not(.no-modern),
[data-theme="modern"] input[type="tel"]:not(.no-modern),
[data-theme="modern"] input[type="search"]:not(.no-modern),
[data-theme="modern"] input[type="password"]:not(.no-modern),
[data-theme="modern"] select:not(.no-modern),
[data-theme="modern"] textarea:not(.no-modern) {
  border-radius: var(--modern-radius-input);
  border: 1px solid var(--modern-border);
  padding: 8px 12px;
  font-size: 13px;
  background: var(--modern-surface);
  color: var(--modern-text);
  transition: border-color 150ms var(--modern-ease), box-shadow 150ms var(--modern-ease);
}
[data-theme="modern"] input:focus:not(.no-modern):not(#quick-search-input),
[data-theme="modern"] select:focus:not(.no-modern),
[data-theme="modern"] textarea:focus:not(.no-modern) {
  outline: none;
  border-color: var(--modern-accent-2);
  box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.15);
}

/* Flash messages -- softer pill with subtle border */
[data-theme="modern"] .flash {
  border-radius: var(--modern-radius-input);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid;
  box-shadow: var(--modern-shadow-sm);
  margin-bottom: 12px;
}
[data-theme="modern"] .flash-success { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
[data-theme="modern"] .flash-error   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
[data-theme="modern"] .flash-warning { background: #fffbeb; color: #b45309; border-color: #fde68a; }
[data-theme="modern"] .flash-info    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

/* Page headers -- bigger heading, tighter spacing */
[data-theme="modern"] .page-header h1,
[data-theme="modern"] .page-header h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--modern-text);
  margin: 0 0 4px;
}
[data-theme="modern"] .page-header .muted {
  color: var(--modern-muted);
  font-size: 14px;
}

/* Invoice hero / patient detail hero -- card treatment */
[data-theme="modern"] .invoice-hero,
[data-theme="modern"] .invoice-detail > .invoice-hero {
  background: var(--modern-surface);
  border: 1px solid var(--modern-border);
  border-radius: var(--modern-radius-card);
  padding: 24px 28px;
  box-shadow: var(--modern-shadow-md);
  margin-bottom: 20px;
}
[data-theme="modern"] .invoice-hero h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--modern-text);
}

[data-theme="modern"] .patient-detail .patient-name-row {
  background: var(--modern-surface);
  border: 1px solid var(--modern-border);
  border-radius: var(--modern-radius-card);
  padding: 20px 24px;
  box-shadow: var(--modern-shadow-md);
  margin-bottom: 16px;
}
[data-theme="modern"] .patient-detail h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--modern-text);
}

/* Patient hero cards -- match the dashboard KPI hover-lift treatment */
[data-theme="modern"] .hero-cards { gap: 16px; }
[data-theme="modern"] .hero-card {
  background: var(--modern-surface);
  border: 1px solid var(--modern-border);
  border-radius: var(--modern-radius-card);
  padding: 16px 18px;
  box-shadow: var(--modern-shadow-sm);
  transition: transform 200ms var(--modern-ease), box-shadow 200ms var(--modern-ease);
}
[data-theme="modern"] .hero-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--modern-shadow-md);
}
[data-theme="modern"] .hero-card.has-balance,
[data-theme="modern"] .hero-card--outstanding.has-balance {
  background: linear-gradient(135deg, #fffaf0 0%, #fef3c7 100%);
  border-color: #fde68a;
  /* chat-16 fix: the cream gradient was inheriting `color: white` from
     the base `.hero-card--outstanding` rule, making the entire tile
     unreadable. Restore high-contrast amber-toned text so reception
     can actually see the outstanding amount. */
  color: #78350f;
}
[data-theme="modern"] .hero-card--outstanding.has-balance .hero-card-label {
  color: #92400e;
  font-weight: 700;
}
[data-theme="modern"] .hero-card--outstanding.has-balance .hero-card-value {
  color: #78350f;
  font-weight: 700;
}

/* Sticky filter bars on list pages (invoices, expenses, etc) */
[data-theme="modern"] .invoice-filters,
[data-theme="modern"] form.filter-form {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid var(--modern-border);
  border-radius: var(--modern-radius-card);
  padding: 14px 18px;
  box-shadow: var(--modern-shadow-sm);
}

/* Compact KPI tiles used on expenses + reports pages */
[data-theme="modern"] .kpi {
  background: var(--modern-surface);
  border: 1px solid var(--modern-border);
  border-radius: var(--modern-radius-card);
  padding: 14px 18px;
  box-shadow: var(--modern-shadow-sm);
  transition: transform 200ms var(--modern-ease), box-shadow 200ms var(--modern-ease);
}
[data-theme="modern"] .kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--modern-shadow-md);
}
[data-theme="modern"] .kpi-num {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 24px;
  color: var(--modern-text);
  font-feature-settings: "tnum", "lnum";
}
[data-theme="modern"] .kpi.kpi-warn {
  background: linear-gradient(135deg, #fffaf0 0%, #fef3c7 100%);
  border-color: #fde68a;
}

/* Small text-link buttons (btn-link, reset-link) used in filter bars */
[data-theme="modern"] .btn-link,
[data-theme="modern"] a.btn-link,
[data-theme="modern"] .reset-link,
[data-theme="modern"] a.reset-link {
  font-size: 12px;
  color: var(--modern-muted);
  text-decoration: none;
  border-radius: var(--modern-radius-input);
  padding: 4px 8px;
  transition: background 150ms var(--modern-ease), color 150ms var(--modern-ease);
}
[data-theme="modern"] .btn-link:hover,
[data-theme="modern"] .reset-link:hover {
  background: var(--modern-surface-soft);
  color: var(--modern-accent);
}

/* Breadcrumb softening */
[data-theme="modern"] .breadcrumb,
[data-theme="modern"] nav.breadcrumb {
  color: var(--modern-muted);
  font-size: 12px;
}
[data-theme="modern"] .breadcrumb a {
  color: var(--modern-muted);
  text-decoration: none;
}
[data-theme="modern"] .breadcrumb a:hover { color: var(--modern-accent); }

/* Status pills used on invoices / appointments */
[data-theme="modern"] .status-pill {
  border-radius: var(--modern-radius-pill);
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Theme toggle in nav -- soft pill style on Modern */
[data-theme="modern"] .theme-toggle {
  border-radius: var(--modern-radius-pill);
  border: 1px solid var(--modern-border);
  background: var(--modern-surface-soft);
  padding: 2px;
}
[data-theme="modern"] .theme-btn { border-radius: var(--modern-radius-pill); padding: 4px 14px; }
[data-theme="modern"] .theme-btn-active {
  background: linear-gradient(135deg, var(--modern-accent) 0%, var(--modern-accent-2) 100%);
  box-shadow: 0 2px 4px rgba(27, 67, 50, 0.25);
}
[data-theme="modern"] .theme-toggle-form + .theme-toggle-form .theme-btn { border-left: none; }

/* Dark-mode toggle pill (sun/moon) -- only visible when Modern is active */
.dark-toggle-form { display: inline; margin: 0; }
.dark-btn {
  background: white; border: 1px solid var(--border); border-radius: 999px;
  width: 28px; height: 28px; padding: 0; font-size: 14px; cursor: pointer;
  color: var(--muted);
}
.dark-btn:hover { background: var(--bg); color: var(--green); }
[data-theme="modern"] .dark-btn {
  background: var(--modern-surface-soft);
  border-color: var(--modern-border);
  color: var(--modern-muted);
  transition: all 150ms var(--modern-ease);
}
[data-theme="modern"] .dark-btn:hover {
  transform: rotate(15deg);
  color: var(--modern-accent);
  border-color: var(--modern-accent-2);
}

/* ==================================================================
   MODERN + DARK MODE (chat-14)
   ==================================================================
   Activated by toggling the sun/moon button when on Modern theme.
   Persisted via UserPreferences.prefers_dark.

   Strategy: redefine the --modern-* CSS variables under the
   double-attribute selector. Cascading vars do most of the work; only
   the hardcoded color references in earlier Modern blocks need extra
   targeted overrides.
   ================================================================== */
[data-theme="modern"][data-mode="dark"] {
  /* Modern theme vars -- dark palette */
  --modern-accent: #52b788;
  --modern-accent-2: #74c69d;
  --modern-accent-soft: #064e3b;
  --modern-surface: #1e293b;
  --modern-surface-soft: #0f172a;
  --modern-border: #334155;
  --modern-text: #e2e8f0;
  --modern-muted: #94a3b8;
  --modern-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
  --modern-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --modern-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);

  /* CRITICAL: BASE app vars also need dark values. Most templates and
     per-page <style> blocks reference var(--text) / var(--bg) / var(--green)
     / var(--muted) / var(--border) directly. Without these overrides,
     text stays #1a1a1a (black) on dark surfaces -- unreadable. */
  --text:   #e2e8f0;
  --muted:  #94a3b8;
  --bg:     #0f172a;
  --border: #334155;
  --green:  #74c69d;
}

[data-theme="modern"][data-mode="dark"] body {
  background:
    radial-gradient(ellipse at top left, rgba(82, 183, 136, 0.08), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(116, 198, 157, 0.06), transparent 50%),
    var(--modern-surface-soft);
  color: var(--modern-text);
}

/* Nav: dark glass surface */
[data-theme="modern"][data-mode="dark"] .nav {
  background: rgba(15, 23, 42, 0.85);
  border-bottom-color: var(--modern-border);
}
[data-theme="modern"][data-mode="dark"] .nav a { color: var(--modern-text); }
[data-theme="modern"][data-mode="dark"] .nav a:hover { color: var(--modern-accent-2); }
[data-theme="modern"][data-mode="dark"] .nav-brand { color: var(--modern-accent-2); }
[data-theme="modern"][data-mode="dark"] .user-chip {
  background: var(--modern-surface);
  color: var(--modern-accent-2) !important;
  border-color: var(--modern-border);
}
[data-theme="modern"][data-mode="dark"] .user-chip:hover { background: var(--modern-accent-soft); }
[data-theme="modern"][data-mode="dark"] .logout-form button { color: var(--modern-muted); }

/* Quick-search dark */
[data-theme="modern"][data-mode="dark"] .quick-search input {
  background: var(--modern-surface);
  color: var(--modern-text);
  border-color: var(--modern-border);
}
[data-theme="modern"][data-mode="dark"] .quick-search-dropdown {
  background: var(--modern-surface);
  border-color: var(--modern-border);
  color: var(--modern-text);
}

/* Cards / surfaces use the cascading var by default, but the hard-
   coded `background: white;` in the original Modern block needs
   to flip to the dark surface here. */
[data-theme="modern"][data-mode="dark"] .kpi-tile,
[data-theme="modern"][data-mode="dark"] .info-card,
[data-theme="modern"][data-mode="dark"] .chart-card,
[data-theme="modern"][data-mode="dark"] .insights-section,
[data-theme="modern"][data-mode="dark"] .insights-kpi,
[data-theme="modern"][data-mode="dark"] .invoice-hero,
[data-theme="modern"][data-mode="dark"] .patient-detail .patient-name-row,
[data-theme="modern"][data-mode="dark"] .hero-card,
[data-theme="modern"][data-mode="dark"] .kpi {
  background: var(--modern-surface);
  color: var(--modern-text);
}

[data-theme="modern"][data-mode="dark"] h1,
[data-theme="modern"][data-mode="dark"] h2,
[data-theme="modern"][data-mode="dark"] h3,
[data-theme="modern"][data-mode="dark"] .insights-section h2,
[data-theme="modern"][data-mode="dark"] .insights-section h3,
[data-theme="modern"][data-mode="dark"] .info-card h3,
[data-theme="modern"][data-mode="dark"] .kpi-number,
[data-theme="modern"][data-mode="dark"] .insights-kpi-number,
[data-theme="modern"][data-mode="dark"] .info-card-headline,
[data-theme="modern"][data-mode="dark"] .kpi-num {
  color: var(--modern-text);
}

[data-theme="modern"][data-mode="dark"] .kpi-label,
[data-theme="modern"][data-mode="dark"] .insights-kpi-label,
[data-theme="modern"][data-mode="dark"] .info-card-subtitle,
[data-theme="modern"][data-mode="dark"] .insights-filterbar label,
[data-theme="modern"][data-mode="dark"] .kpi-detail,
[data-theme="modern"][data-mode="dark"] .insights-kpi-detail,
[data-theme="modern"][data-mode="dark"] .muted,
[data-theme="modern"][data-mode="dark"] .muted-cell,
[data-theme="modern"][data-mode="dark"] .activity-time {
  color: var(--modern-muted);
}

/* Hero KPI tile stays on its green gradient but with a dark border glow */
[data-theme="modern"][data-mode="dark"] .kpi-tile-primary {
  box-shadow: 0 10px 25px -5px rgba(82, 183, 136, 0.35), 0 4px 6px -2px rgba(82, 183, 136, 0.25);
}

/* Warn / amber tiles: keep light amber so warnings stay visible */
[data-theme="modern"][data-mode="dark"] .kpi-tile-warn,
[data-theme="modern"][data-mode="dark"] .hero-card.has-balance,
[data-theme="modern"][data-mode="dark"] .kpi.kpi-warn {
  background: linear-gradient(135deg, #422006 0%, #713f12 100%);
  border-color: #92400e;
  color: #fde68a;
}
[data-theme="modern"][data-mode="dark"] .kpi-tile-warn .kpi-label { color: #fcd34d; }

/* Filter bars (sticky) and the rest of the surface stays glass on dark */
[data-theme="modern"][data-mode="dark"] .insights-filterbar,
[data-theme="modern"][data-mode="dark"] .invoice-filters,
[data-theme="modern"][data-mode="dark"] form.filter-form {
  background: rgba(30, 41, 59, 0.85);
  border-color: var(--modern-border);
}

/* Tables: dark thead + dark rows + softer hover */
[data-theme="modern"][data-mode="dark"] table thead th {
  background: var(--modern-surface-soft);
  color: var(--modern-muted);
  border-bottom-color: var(--modern-border);
}
[data-theme="modern"][data-mode="dark"] table tbody td {
  border-bottom-color: #1e293b;
  color: var(--modern-text);
}
[data-theme="modern"][data-mode="dark"] table tbody tr:hover td { background: #243047; }
[data-theme="modern"][data-mode="dark"] table tfoot td {
  background: var(--modern-surface-soft);
  border-top-color: var(--modern-border);
  color: var(--modern-text);
}
[data-theme="modern"][data-mode="dark"] .insights-table thead { background: var(--modern-surface-soft); }
[data-theme="modern"][data-mode="dark"] .insights-table th { background: var(--modern-surface-soft); color: var(--modern-muted); border-bottom-color: var(--modern-border); }
[data-theme="modern"][data-mode="dark"] .insights-table td { background: var(--modern-surface); border-bottom-color: #1e293b; color: var(--modern-text); }
[data-theme="modern"][data-mode="dark"] .insights-table tr:hover td { background: #243047; }

/* Form inputs on dark */
[data-theme="modern"][data-mode="dark"] input[type="text"]:not(.no-modern):not(#quick-search-input),
[data-theme="modern"][data-mode="dark"] input[type="number"]:not(.no-modern),
[data-theme="modern"][data-mode="dark"] input[type="date"]:not(.no-modern),
[data-theme="modern"][data-mode="dark"] input[type="email"]:not(.no-modern),
[data-theme="modern"][data-mode="dark"] input[type="tel"]:not(.no-modern),
[data-theme="modern"][data-mode="dark"] input[type="search"]:not(.no-modern),
[data-theme="modern"][data-mode="dark"] input[type="password"]:not(.no-modern),
[data-theme="modern"][data-mode="dark"] select:not(.no-modern),
[data-theme="modern"][data-mode="dark"] textarea:not(.no-modern) {
  background: var(--modern-surface-soft);
  color: var(--modern-text);
  border-color: var(--modern-border);
}
[data-theme="modern"][data-mode="dark"] input::placeholder,
[data-theme="modern"][data-mode="dark"] textarea::placeholder { color: var(--modern-muted); opacity: 0.65; }

/* Action buttons on dark */
[data-theme="modern"][data-mode="dark"] .action-btn,
[data-theme="modern"][data-mode="dark"] a.action-btn,
[data-theme="modern"][data-mode="dark"] button.action-btn {
  background: var(--modern-surface);
  border-color: var(--modern-border);
  color: var(--modern-text);
}
[data-theme="modern"][data-mode="dark"] .action-btn:hover,
[data-theme="modern"][data-mode="dark"] a.action-btn:hover,
[data-theme="modern"][data-mode="dark"] button.action-btn:hover {
  border-color: var(--modern-accent-2);
  color: var(--modern-accent-2);
}

/* Flash messages on dark — keep colour signal, dial down brightness */
[data-theme="modern"][data-mode="dark"] .flash-success { background: #064e3b; color: #6ee7b7; border-color: #047857; }
[data-theme="modern"][data-mode="dark"] .flash-error   { background: #7f1d1d; color: #fecaca; border-color: #b91c1c; }
[data-theme="modern"][data-mode="dark"] .flash-warning { background: #78350f; color: #fde68a; border-color: #b45309; }
[data-theme="modern"][data-mode="dark"] .flash-info    { background: #1e3a8a; color: #bfdbfe; border-color: #3b82f6; }

/* Jump-nav chips on dark */
[data-theme="modern"][data-mode="dark"] .insights-jumpnav a {
  background: var(--modern-surface);
  border-color: var(--modern-border);
  color: var(--modern-text);
}
[data-theme="modern"][data-mode="dark"] .insights-jumpnav a:hover {
  background: var(--modern-accent);
  color: white;
  border-color: var(--modern-accent);
}
[data-theme="modern"][data-mode="dark"] .insights-jumpnav a.placeholder { opacity: 0.4; }

/* CSV/btn-link variants on dark */
[data-theme="modern"][data-mode="dark"] .csv-btn {
  background: var(--modern-surface);
  border-color: var(--modern-border);
  color: var(--modern-accent-2);
}
[data-theme="modern"][data-mode="dark"] .csv-btn:hover {
  background: var(--modern-accent);
  color: white;
}
[data-theme="modern"][data-mode="dark"] .btn-link,
[data-theme="modern"][data-mode="dark"] .reset-link { color: var(--modern-muted); }
[data-theme="modern"][data-mode="dark"] .btn-link:hover,
[data-theme="modern"][data-mode="dark"] .reset-link:hover { background: var(--modern-surface); color: var(--modern-accent-2); }

/* Sparklines / SVG -- baseline line + neutral colours */
[data-theme="modern"][data-mode="dark"] .kpi-sparkline svg line { stroke: var(--modern-border); }

/* Mix bar background on dark */
[data-theme="modern"][data-mode="dark"] .kpi-mix-bar { background: var(--modern-surface-soft); }

/* Insights filter chip subtle muted text */
[data-theme="modern"][data-mode="dark"] .insights-empty { color: var(--modern-muted); }
[data-theme="modern"][data-mode="dark"] .insights-filterbar select,
[data-theme="modern"][data-mode="dark"] .insights-filterbar input { background: var(--modern-surface-soft); color: var(--modern-text); }

/* Status pills on dark — keep colour-signal but darken bg, lighten text */
[data-theme="modern"][data-mode="dark"] .status-pill { background: var(--modern-surface-soft); color: var(--modern-text); border: 1px solid var(--modern-border); }
[data-theme="modern"][data-mode="dark"] .status-pill-no_show,
[data-theme="modern"][data-mode="dark"] .status-pill-cancelled { background: #7f1d1d; color: #fecaca; border-color: #b91c1c; }
[data-theme="modern"][data-mode="dark"] .status-pill-done { background: #064e3b; color: #6ee7b7; border-color: #047857; }
[data-theme="modern"][data-mode="dark"] .status-pill-waiting,
[data-theme="modern"][data-mode="dark"] .status-pill-in_consult { background: #78350f; color: #fde68a; border-color: #b45309; }

/* Heatmap on dark — soften the green-on-white to green-on-slate */
[data-theme="modern"][data-mode="dark"] .hm-cell {
  border-color: var(--modern-border);
}

/* Inline scoped overrides for things that hard-code white in templates */
[data-theme="modern"][data-mode="dark"] .pill-default { background: var(--modern-accent); color: white; }
[data-theme="modern"][data-mode="dark"] .badge-warn { background: #78350f; color: #fde68a; }
[data-theme="modern"][data-mode="dark"] .badge-neutral { background: var(--modern-accent-soft); color: var(--modern-accent-2); }

/* Inputs / forms not under filter-bar selector (general fallback) */
[data-theme="modern"][data-mode="dark"] form { color: var(--modern-text); }
[data-theme="modern"][data-mode="dark"] label { color: var(--modern-text); }

/* Patient-detail tabs (.tab-link) and similar */
[data-theme="modern"][data-mode="dark"] .tab-link,
[data-theme="modern"][data-mode="dark"] .tabs a {
  color: var(--modern-muted);
}
[data-theme="modern"][data-mode="dark"] .tab-link.active,
[data-theme="modern"][data-mode="dark"] .tabs a.active {
  color: var(--modern-accent-2);
}

/* ----- Inline `style="color:#..."` attributes scattered across templates
   ----- 14 files use them as status/urgency colour signals. Inline styles
   win over normal CSS, so we need attribute-substring selectors + !important
   to intercept. Map each dark inline color to a readable dark-mode variant
   that preserves the original signal (red/amber/grey/slate). */
[data-theme="modern"][data-mode="dark"] [style*="color:#1a1a1a"],
[data-theme="modern"][data-mode="dark"] [style*="color: #1a1a1a"],
[data-theme="modern"][data-mode="dark"] [style*="color:#000"],
[data-theme="modern"][data-mode="dark"] [style*="color: #000"],
[data-theme="modern"][data-mode="dark"] [style*="color:black"],
[data-theme="modern"][data-mode="dark"] [style*="color: black"] {
  color: var(--modern-text) !important;
}
[data-theme="modern"][data-mode="dark"] [style*="color:#374151"],
[data-theme="modern"][data-mode="dark"] [style*="color: #374151"],
[data-theme="modern"][data-mode="dark"] [style*="color:#1f2937"],
[data-theme="modern"][data-mode="dark"] [style*="color: #1f2937"] {
  color: #cbd5e1 !important;  /* slate-700 -> slate-300 */
}
[data-theme="modern"][data-mode="dark"] [style*="color:#991b1b"],
[data-theme="modern"][data-mode="dark"] [style*="color: #991b1b"],
[data-theme="modern"][data-mode="dark"] [style*="color:#b91c1c"],
[data-theme="modern"][data-mode="dark"] [style*="color: #b91c1c"],
[data-theme="modern"][data-mode="dark"] [style*="color:#dc2626"],
[data-theme="modern"][data-mode="dark"] [style*="color: #dc2626"] {
  color: #fca5a5 !important;  /* red-800/700 -> red-300 (still alarming on dark) */
}
[data-theme="modern"][data-mode="dark"] [style*="color:#78350f"],
[data-theme="modern"][data-mode="dark"] [style*="color: #78350f"],
[data-theme="modern"][data-mode="dark"] [style*="color:#92400e"],
[data-theme="modern"][data-mode="dark"] [style*="color: #92400e"] {
  color: #fde68a !important;  /* amber-900/800 -> amber-200 */
}
[data-theme="modern"][data-mode="dark"] [style*="color:#b45309"],
[data-theme="modern"][data-mode="dark"] [style*="color: #b45309"],
[data-theme="modern"][data-mode="dark"] [style*="color:#9a3412"],
[data-theme="modern"][data-mode="dark"] [style*="color: #9a3412"] {
  color: #fdba74 !important;  /* amber-700 -> amber-300 */
}
[data-theme="modern"][data-mode="dark"] [style*="color:#065f46"],
[data-theme="modern"][data-mode="dark"] [style*="color: #065f46"],
[data-theme="modern"][data-mode="dark"] [style*="color:#15803d"],
[data-theme="modern"][data-mode="dark"] [style*="color: #15803d"] {
  color: #6ee7b7 !important;  /* dark green -> mint */
}
[data-theme="modern"][data-mode="dark"] [style*="color:#0f172a"],
[data-theme="modern"][data-mode="dark"] [style*="color: #0f172a"],
[data-theme="modern"][data-mode="dark"] [style*="color:#1e293b"],
[data-theme="modern"][data-mode="dark"] [style*="color: #1e293b"] {
  color: var(--modern-text) !important;
}

/* Hardcoded `style="background:white"` / `background:#fff` */
[data-theme="modern"][data-mode="dark"] [style*="background:white"],
[data-theme="modern"][data-mode="dark"] [style*="background: white"],
[data-theme="modern"][data-mode="dark"] [style*="background:#fff"],
[data-theme="modern"][data-mode="dark"] [style*="background: #fff"],
[data-theme="modern"][data-mode="dark"] [style*="background-color:white"],
[data-theme="modern"][data-mode="dark"] [style*="background-color: white"] {
  background: var(--modern-surface) !important;
  color: var(--modern-text) !important;
}

/* Light grey bgs in inline styles (#f3f4f6, #f9fafb, #fafafa) -- usually
   used as "subtle highlight" zebra rows or sidebars. Flip to dark variant. */
[data-theme="modern"][data-mode="dark"] [style*="background:#f3f4f6"],
[data-theme="modern"][data-mode="dark"] [style*="background: #f3f4f6"],
[data-theme="modern"][data-mode="dark"] [style*="background:#f9fafb"],
[data-theme="modern"][data-mode="dark"] [style*="background: #f9fafb"],
[data-theme="modern"][data-mode="dark"] [style*="background:#fafafa"],
[data-theme="modern"][data-mode="dark"] [style*="background: #fafafa"] {
  background: var(--modern-surface-soft) !important;
}

/* P / span / li / dt / dd default text catches anything still falling
   through. Soft fallback so even unstyled body text is readable. */
[data-theme="modern"][data-mode="dark"] p,
[data-theme="modern"][data-mode="dark"] li,
[data-theme="modern"][data-mode="dark"] dt,
[data-theme="modern"][data-mode="dark"] dd,
[data-theme="modern"][data-mode="dark"] span,
[data-theme="modern"][data-mode="dark"] strong,
[data-theme="modern"][data-mode="dark"] em,
[data-theme="modern"][data-mode="dark"] small,
[data-theme="modern"][data-mode="dark"] td,
[data-theme="modern"][data-mode="dark"] th {
  color: inherit;
}

/* Links keep colour-signal but lift to readable mint on dark */
[data-theme="modern"][data-mode="dark"] a {
  color: var(--modern-accent-2);
}
[data-theme="modern"][data-mode="dark"] a:hover {
  color: #95d5b2;
}
/* But action-btn / theme-btn / chip links don't get the mint color override --
   they have their own background-based styling. Re-scope explicit overrides
   for those so they stay neutral / themed. */
[data-theme="modern"][data-mode="dark"] .action-btn,
[data-theme="modern"][data-mode="dark"] a.action-btn,
[data-theme="modern"][data-mode="dark"] .theme-btn,
[data-theme="modern"][data-mode="dark"] .csv-btn,
[data-theme="modern"][data-mode="dark"] .btn-link,
[data-theme="modern"][data-mode="dark"] .reset-link,
[data-theme="modern"][data-mode="dark"] .insights-jumpnav a,
[data-theme="modern"][data-mode="dark"] .info-card-link {
  color: var(--modern-text);
}
[data-theme="modern"][data-mode="dark"] .info-card-link { color: var(--modern-accent-2); }

/* Inputs already cover most form fields, but native browser checkbox /
   radio still render light. Apply a colour-scheme hint so the browser
   renders form controls in dark variants natively. */
[data-theme="modern"][data-mode="dark"] body { color-scheme: dark; }

/* ==================================================================
   PHASE 1 DARK MODE CATCH-ALL (chat-17, 2026-06-10).

   93 templates ship inline <style> blocks that hardcode
   `background: white;` on page-level surface containers without dark
   mode overrides. This block targets the recurring class names so the
   dark theme catches them without per-template edits. Pattern:

     - background  -> var(--modern-surface)  (#1e293b dark navy)
     - border-color -> var(--modern-border)  (#334155 slate)
     - inherited color follows the dark --text override

   The class names below were extracted by a frequency-sweep over
   templates/**/*.html for `background:\s*white` lines. Top recurring
   surfaces first (>=2 occurrences), then specific known offenders
   from the appointments + menu pages flagged by Ankit's screenshots.

   L82 reminder: there is NO automated check for ungated dark-mode
   contrast. After Phase 1 lands, manually audit each major page in
   dark mode and add specific overrides for what's still broken
   (Phase 2). The check_template_financial_gating verify check
   discussed in chat-17 Phase J would generalise to also catch
   `background: white` in template <style> blocks; deferred.
   ================================================================== */
[data-theme="modern"][data-mode="dark"] .panel,
[data-theme="modern"][data-mode="dark"] .card,
[data-theme="modern"][data-mode="dark"] .data-table,
[data-theme="modern"][data-mode="dark"] .patient-table,
[data-theme="modern"][data-mode="dark"] .preview-table,
[data-theme="modern"][data-mode="dark"] .ageing-table,
[data-theme="modern"][data-mode="dark"] .markers-table,
[data-theme="modern"][data-mode="dark"] .audit-table,
[data-theme="modern"][data-mode="dark"] .empty-state,
[data-theme="modern"][data-mode="dark"] .empty-note,
[data-theme="modern"][data-mode="dark"] .appt-stats,
[data-theme="modern"][data-mode="dark"] .appt-side,
[data-theme="modern"][data-mode="dark"] .band-summary,
[data-theme="modern"][data-mode="dark"] .band > .slot-grid,
[data-theme="modern"][data-mode="dark"] .slot,
[data-theme="modern"][data-mode="dark"] .session-chip,
[data-theme="modern"][data-mode="dark"] .view-toggle,
[data-theme="modern"][data-mode="dark"] .search-bar,
[data-theme="modern"][data-mode="dark"] .slot-banner,
[data-theme="modern"][data-mode="dark"] .vendor-filters,
[data-theme="modern"][data-mode="dark"] .payment-filters,
[data-theme="modern"][data-mode="dark"] .ledger-filters,
[data-theme="modern"][data-mode="dark"] .docs-filter,
[data-theme="modern"][data-mode="dark"] .ledger,
[data-theme="modern"][data-mode="dark"] .standard-form,
[data-theme="modern"][data-mode="dark"] .settings-page,
[data-theme="modern"][data-mode="dark"] .summary-card,
[data-theme="modern"][data-mode="dark"] .pagination-bar,
[data-theme="modern"][data-mode="dark"] .preset-pill,
[data-theme="modern"][data-mode="dark"] .quick-row,
[data-theme="modern"][data-mode="dark"] .bulk-grid,
[data-theme="modern"][data-mode="dark"] .rx-table-wrap,
[data-theme="modern"][data-mode="dark"] .tpl-modal-panel,
[data-theme="modern"][data-mode="dark"] .stat,
[data-theme="modern"][data-mode="dark"] .kpi-card,
[data-theme="modern"][data-mode="dark"] .field,
[data-theme="modern"][data-mode="dark"] .entry,
[data-theme="modern"][data-mode="dark"] .paste-help,
[data-theme="modern"][data-mode="dark"] .drug-results {
  background: var(--modern-surface);
  border-color: var(--modern-border);
  color: var(--modern-text);
}

/* Form inputs / selects defined as page-local classes
   (.form-input, .form-select). The existing input[type=...] override
   higher up handles real <input> + <select> elements via the
   :not(.no-modern) selector; this catches any element that gets these
   classes but isn't a tag-level input (rare but happens for span /
   div wrappers styled as inputs). */
[data-theme="modern"][data-mode="dark"] .form-input,
[data-theme="modern"][data-mode="dark"] .form-select {
  background: var(--modern-surface-soft);
  border-color: var(--modern-border);
  color: var(--modern-text);
}

/* Secondary / cancel / today / link-restore / link-danger buttons --
   these are typically "white pill on light bg" in Classic. Flip to
   dark pill on dark bg. Keep the danger / restore signal colours by
   leaving color: unset (cascades through the more-specific color
   rules in the templates themselves, which use var(--text) or
   var(--green)). */
[data-theme="modern"][data-mode="dark"] .btn-cancel,
[data-theme="modern"][data-mode="dark"] .btn-secondary,
[data-theme="modern"][data-mode="dark"] .today-btn,
[data-theme="modern"][data-mode="dark"] .btn-export,
[data-theme="modern"][data-mode="dark"] .btn-bulk,
[data-theme="modern"][data-mode="dark"] .nav-btn,
[data-theme="modern"][data-mode="dark"] .mode-btn,
[data-theme="modern"][data-mode="dark"] .link-btn-restore,
[data-theme="modern"][data-mode="dark"] .link-btn-danger {
  background: var(--modern-surface);
  border-color: var(--modern-border);
}

/* Hover states for secondary buttons in dark mode -- elevate to the
   accent color so users see they're interactive. */
[data-theme="modern"][data-mode="dark"] .btn-cancel:hover,
[data-theme="modern"][data-mode="dark"] .btn-secondary:hover,
[data-theme="modern"][data-mode="dark"] .today-btn:hover,
[data-theme="modern"][data-mode="dark"] .btn-export:hover,
[data-theme="modern"][data-mode="dark"] .btn-bulk:hover,
[data-theme="modern"][data-mode="dark"] .nav-btn:hover,
[data-theme="modern"][data-mode="dark"] .mode-btn:hover {
  border-color: var(--modern-accent-2);
  color: var(--modern-accent-2);
}

/* Today-btn active state should keep its green-fill signal. */
[data-theme="modern"][data-mode="dark"] .today-btn.active,
[data-theme="modern"][data-mode="dark"] .nav-btn.active,
[data-theme="modern"][data-mode="dark"] .mode-btn.active {
  background: var(--modern-accent);
  color: white;
  border-color: var(--modern-accent);
}

/* Yellow / amber / warn kpi tiles -- keep the warn signal but adapt
   to dark surface tones (mirrors the .kpi-tile-warn override above). */
[data-theme="modern"][data-mode="dark"] .kpi-yellow {
  background: linear-gradient(135deg, #422006 0%, #713f12 100%);
  border-color: #92400e;
  color: #fde68a;
}

/* Status / has-flag / is-active / danger / bucket-N rows in tables --
   these are typically pale fills indicating row state in Classic.
   Adapt to slightly elevated dark surfaces so the signal persists
   without blowing the table contrast. */
[data-theme="modern"][data-mode="dark"] tr.is-active,
[data-theme="modern"][data-mode="dark"] tr.has-flag,
[data-theme="modern"][data-mode="dark"] tr.row-move,
[data-theme="modern"][data-mode="dark"] tr.row-dedupe_skip,
[data-theme="modern"][data-mode="dark"] tr.bucket-3,
[data-theme="modern"][data-mode="dark"] tr.danger,
[data-theme="modern"][data-mode="dark"] tr.status-waiting {
  background: rgba(116, 198, 157, 0.06);
}
[data-theme="modern"][data-mode="dark"] tr.danger {
  background: rgba(220, 38, 38, 0.08);
}
[data-theme="modern"][data-mode="dark"] tr.status-waiting {
  background: rgba(245, 158, 11, 0.08);
}

/* ==================================================================
   PHASE 2 DARK MODE PATCH (chat-17, 2026-06-10).

   User reported specific dark-mode contrast misses Phase 1 didn't
   catch: nav theme buttons + Settings link (hardcoded white bg
   stayed white in dark); "+ New invoice" button (var(--green) becomes
   mint #74c69d in dark, with white text = unreadable); .btn-trash
   red-on-white that becomes red-on-dark (still readable but the
   white bg poke-through is ugly); .data-table td.debit / td.credit
   colours that were originally dark-amber / dark-teal on white now
   show as dark-amber / dark-teal on dark surface = invisible.
   ================================================================== */

/* Nav theme toggle (Classic | Modern picker) -- the .theme-btn rule
   higher up hardcodes background: white. Override in dark. */
[data-theme="modern"][data-mode="dark"] .theme-btn {
  background: var(--modern-surface);
  color: var(--modern-text);
}
[data-theme="modern"][data-mode="dark"] .theme-btn:hover {
  background: var(--modern-surface-soft);
  color: var(--modern-accent-2);
}
/* Active state already has green-fill via the existing rule; reinforce
   with the modern accent so it's consistent with other green pills. */
[data-theme="modern"][data-mode="dark"] .theme-btn-active,
[data-theme="modern"][data-mode="dark"] .theme-btn-active:hover {
  background: var(--modern-accent);
  color: white;
}

/* Settings cog in the nav -- same hardcoded white-bg + muted-color
   issue. Flip to dark surface with light text. */
[data-theme="modern"][data-mode="dark"] .nav-link-settings {
  background: var(--modern-surface);
  color: var(--modern-text) !important;
  border-color: var(--modern-border);
}
[data-theme="modern"][data-mode="dark"] .nav-link-settings:hover {
  background: var(--modern-surface-soft);
  color: var(--modern-accent-2) !important;
  border-color: var(--modern-accent-2);
}

/* Page-level "+ New invoice" / "+ New patient" / "+ New quotation"
   etc. buttons use `background: var(--green); color: white;` in their
   per-page <style> blocks. In dark mode var(--green) becomes mint
   #74c69d -- white-on-mint is ~2:1 contrast (unreadable). Override
   to a darker green that keeps the brand signal but gives white text
   AA-passing contrast (~6:1). */
[data-theme="modern"][data-mode="dark"] .btn-create,
[data-theme="modern"][data-mode="dark"] a.btn-create,
[data-theme="modern"][data-mode="dark"] .strip-btn,
[data-theme="modern"][data-mode="dark"] .filter-apply,
[data-theme="modern"][data-mode="dark"] .action-btn.primary,
[data-theme="modern"][data-mode="dark"] a.action-btn.primary,
[data-theme="modern"][data-mode="dark"] button[type="submit"].action-btn {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  color: white;
  border-color: transparent;
}
[data-theme="modern"][data-mode="dark"] .btn-create:hover,
[data-theme="modern"][data-mode="dark"] a.btn-create:hover,
[data-theme="modern"][data-mode="dark"] .strip-btn:hover,
[data-theme="modern"][data-mode="dark"] .filter-apply:hover,
[data-theme="modern"][data-mode="dark"] .action-btn.primary:hover,
[data-theme="modern"][data-mode="dark"] a.action-btn.primary:hover,
[data-theme="modern"][data-mode="dark"] button[type="submit"].action-btn:hover {
  background: linear-gradient(135deg, #166534 0%, #15803d 100%);
  color: white;
}

/* Trash button -- white bg + dark-red text in Classic. Phase 1 caught
   the background but the text stayed dark red on the new dark surface
   = invisible. Lighten text to red-300 so the signal persists. */
[data-theme="modern"][data-mode="dark"] .btn-trash {
  background: var(--modern-surface);
  color: #fca5a5;
  border-color: var(--modern-border);
}
[data-theme="modern"][data-mode="dark"] .btn-trash:hover {
  background: rgba(220, 38, 38, 0.15);
  border-color: #fca5a5;
}

/* Debit (over-due amount) / credit (received) cells in the data-table.
   Classic uses #b45309 amber / #047857 teal -- both dark-on-light.
   In dark mode they become dark-on-dark = invisible. Lighten while
   keeping the colour signal (red/amber = owes, green = received). */
[data-theme="modern"][data-mode="dark"] .data-table td.debit,
[data-theme="modern"][data-mode="dark"] table td.debit,
[data-theme="modern"][data-mode="dark"] .num.debit,
[data-theme="modern"][data-mode="dark"] .debit {
  color: #fdba74;
}
[data-theme="modern"][data-mode="dark"] .data-table td.credit,
[data-theme="modern"][data-mode="dark"] table td.credit,
[data-theme="modern"][data-mode="dark"] .num.credit,
[data-theme="modern"][data-mode="dark"] .credit {
  color: #6ee7b7;
}

/* Patient-name links (.patient-name-link) -- Classic uses var(--text)
   which IS overridden in dark; but template-inline rules sometimes
   add their own color. Catch-all to ensure they read as light text
   with a subtle hover lift. */
[data-theme="modern"][data-mode="dark"] .patient-name-link {
  color: var(--modern-text);
}
[data-theme="modern"][data-mode="dark"] .patient-name-link:hover {
  color: var(--modern-accent-2);
}

/* "+ Book" / "+ Add" green-text-on-white links inside slot cells and
   similar inline create affordances. */
[data-theme="modern"][data-mode="dark"] .slot a,
[data-theme="modern"][data-mode="dark"] .slot button,
[data-theme="modern"][data-mode="dark"] .book-link,
[data-theme="modern"][data-mode="dark"] .add-link {
  color: var(--modern-accent-2);
}

/* Quick-search box in the top nav. /api/search/ JSON dropdown, debounced 200ms.
   Keyboard: Ctrl+K to focus, ArrowUp/Down to navigate, Enter to open. */
.quick-search { position: relative; }
.quick-search input {
  width: 280px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: white;
  font-size: 13px;
  outline: none;
}
.quick-search input:focus { border-color: #6ee7b7; box-shadow: 0 0 0 2px rgba(110,231,183,0.15); }
.quick-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 360px;
  max-height: 420px;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  z-index: 50;
}
.quick-search-dropdown[hidden] { display: none; }
.quick-search-dropdown .qs-group-label {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.quick-search-dropdown .qs-group-label + .qs-item { border-top: none; }
.quick-search-dropdown .qs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}
.quick-search-dropdown .qs-item:hover,
.quick-search-dropdown .qs-item.qs-active {
  background: #ecfdf5;
}
.quick-search-dropdown .qs-icon { font-size: 16px; flex-shrink: 0; }
.quick-search-dropdown .qs-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.quick-search-dropdown .qs-label { font-weight: 600; font-size: 13px; }
.quick-search-dropdown .qs-sublabel { font-size: 11px; color: var(--muted); margin-top: 1px; }
.quick-search-dropdown .qs-empty {
  padding: 14px 16px;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

.main { padding: 24px; max-width: 1200px; margin: 0 auto; }

/* Breadcrumb trail (rendered via {% crumbs %} template tag) */
.crumbs { font-size: 13px; color: var(--muted); margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--green); text-decoration: underline; }
.crumbs-sep { color: #ccc; }
.crumbs-current { color: var(--text); font-weight: 600; }

/* Date browse pills (rendered via templates/core/_date_pills.html) */
.date-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.date-pills .pill { padding: 6px 14px; background: white; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--text); text-decoration: none; transition: border-color 0.1s, background 0.1s; font-weight: 600; }
.date-pills .pill:hover { border-color: var(--green); color: var(--green); }
.date-pills .pill.active { background: var(--green); color: white; border-color: var(--green); }

/* Live (HTMX-polled) region — fades briefly after each refresh */
.live-region { transition: opacity 0.2s; }
.live-stamp { font-size: 11px; margin: 4px 0 0; text-align: right; }
.htmx-request .live-region { opacity: 0.6; }

/* WhatsApp share button — official brand green (#25D366).
   Higher specificity (.action-btn.wa-btn) so it beats page-level .action-btn rules. */
.action-btn.wa-btn,
a.action-btn.wa-btn { background: #25D366 !important; color: white !important; border-color: #25D366 !important; display: inline-flex; align-items: center; gap: 6px; }
.action-btn.wa-btn:hover,
a.action-btn.wa-btn:hover { background: #1da855 !important; border-color: #1da855 !important; color: white !important; }
.wa-btn-disabled { background: #f3f4f6; color: var(--muted) !important; border: 1px dashed var(--border); cursor: not-allowed; padding: 8px 14px; border-radius: 6px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.wa-icon { width: 14px; height: 14px; flex-shrink: 0; vertical-align: -2px; fill: currentColor; }
.muted { color: var(--muted); font-size: 13px; }
.error { color: #c0392b; }

.login-wrap { max-width: 360px; margin: 80px auto; padding: 32px; background: white; border: 1px solid var(--border); border-radius: 8px; text-align: center; }
.login-wrap h1 { color: var(--green); margin: 0; }
.login-logo { max-width: 180px; max-height: 120px; height: auto; width: auto; object-fit: contain; margin: 0 auto; display: block; }
.login-form { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.login-form input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 14px; }
.login-form button { padding: 10px; background: var(--green); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }

/* Typeahead picker -- wraps a <select> with a filter input above. See static/js/typeahead-select.js. */
.typeahead-wrap { display: flex; flex-direction: column; gap: 2px; }
.typeahead-wrap .typeahead-input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 4px 4px 0 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
  background: white;
  box-sizing: border-box;
  width: 100%;
}
.typeahead-wrap .typeahead-input:focus { outline: none; border-color: var(--green); }
.typeahead-wrap select {
  border-radius: 0 0 4px 4px !important;
  border-top: none !important;
  margin-top: -1px;
}

/* Global flash-message styling. Several individual templates re-declare this
   locally; the rules are identical so the duplication is harmless, but having
   it here means any new template can render messages without re-declaring. */
.flash { padding: 10px 14px; margin-bottom: 12px; border-radius: 6px; font-size: 13px; }
.flash-success { background: #d1fae5; color: #065f46; }
.flash-error   { background: #fee2e2; color: #991b1b; }
.flash-warning { background: #fef3c7; color: #78350f; border: 1px solid #fde68a; }
.flash-info    { background: #dbeafe; color: #1e3a8a; }

/* "+ Add new ..." inline link sitting beside a form-field label. */
.inline-add-link {
  font-size: 11px;
  font-weight: 500;
  color: var(--green);
  margin-left: 8px;
  text-decoration: none;
  padding: 1px 6px;
  background: var(--bg);
  border: 1px dashed var(--green);
  border-radius: 3px;
}
.inline-add-link:hover { background: var(--green); color: #fff; border-style: solid; }