/* theme.css — system-wide dark theme (toggle via html[data-theme="dark"]).
 *
 * Strategy:
 *  1. Re-map the --slate-* scale used across the main pages: text tones get
 *     lighter, surface tones get darker. --slate-300/-400 stay light because the
 *     sidebar (always #0a0a0a) uses them for its nav text.
 *  2. Override the few literal `white` surfaces (cards, topbar, buttons).
 *  3. Re-skin the accountant pages (hardcoded palette, no variables).
 *  4. Accent colours (purple/lime + pos/neg/warn amounts) are restated LAST so
 *     they always win over the neutral text overrides above them.
 *
 * Palette matches the Currio identity: near-black canvas, lifted cards with a
 * hairline border, white headings, purple (#a855f7) + lime (#a3e635) accents.
 */

html[data-theme="dark"] {
    color-scheme: dark;
    --slate-50:  #0a0a0b;   /* page background */
    --slate-100: #17181d;   /* dividers / hover */
    --slate-200: #232530;   /* card borders */
    /* --slate-300 / --slate-400 deliberately left at their light values (sidebar) */
    --slate-500: #8b909c;   /* subtext */
    --slate-600: #a6abb6;
    --slate-700: #c4c9d2;   /* secondary button text */
    --slate-800: #e1e4ea;
    --slate-900: #f5f6f8;   /* headings, values, names */
}

html[data-theme="dark"] body { background: var(--slate-50); color: var(--slate-900); }

/* ── main-page surfaces that hardcode `white` ──────────────────────────── */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .app-topbar { background: #0a0a0b !important; border-bottom-color: #1c1d24 !important; }

html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .sched-card,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .add-step-panel { background: #141519 !important; border-color: #232530 !important; }

html[data-theme="dark"] .card-header { border-bottom-color: #232530 !important; }

html[data-theme="dark"] .btn-logout,
html[data-theme="dark"] .btn-refresh,
html[data-theme="dark"] .btn-mini,
html[data-theme="dark"] .flow-btn.chart,
html[data-theme="dark"] .top-search { background: #141519 !important; border-color: #232530 !important; color: var(--slate-700) !important; }
html[data-theme="dark"] .btn-refresh:hover { background: #1c1d24 !important; }

html[data-theme="dark"] .quick-btn { background: #101116 !important; border-color: #232530 !important; }
html[data-theme="dark"] .quick-btn:hover { background: #17181d !important; border-color: var(--primary) !important; }
html[data-theme="dark"] .quick-btn-icon { background: #1c1d24 !important; }

/* + New … action button → lime, like the reference dashboard */
html[data-theme="dark"] .btn-new-appt { background: var(--accent) !important; color: #0a0a0a !important; }
html[data-theme="dark"] .btn-new-appt:hover { filter: brightness(1.06); }

html[data-theme="dark"] .patient-row:hover,
html[data-theme="dark"] .appt-row:hover { background: #101116 !important; }

/* signature accent bar on the KPI cards (alternating purple / lime) */
html[data-theme="dark"] .stats-row .stat-card,
html[data-theme="dark"] .stats-grid .stat-card { border-left: 3px solid var(--primary); }
html[data-theme="dark"] .stats-row .stat-card:nth-child(2n),
html[data-theme="dark"] .stats-grid .stat-card:nth-child(2n) { border-left-color: var(--accent); }

/* ── accountant pages (hardcoded light palette → dark) ─────────────────── */
html[data-theme="dark"] .main,
html[data-theme="dark"] .content { background: #0a0a0b !important; color: var(--slate-900); }

html[data-theme="dark"] .acct-topbar { background: #0a0a0b !important; border-color: #1c1d24 !important; }
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .acct-crumb,
html[data-theme="dark"] .page-subtitle,
html[data-theme="dark"] .card-sub,
html[data-theme="dark"] .stat-sub,
html[data-theme="dark"] .muted { color: #8b909c !important; }
html[data-theme="dark"] .breadcrumb a,
html[data-theme="dark"] .acct-crumb a { color: #c4b5fd !important; }

/* neutral headings / labels / values → light */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .item-name,
html[data-theme="dark"] .user-name { color: #f5f6f8 !important; }

html[data-theme="dark"] .stat-value { color: #f5f6f8 !important; }
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .nav-section { color: #8b909c !important; }

/* tables */
html[data-theme="dark"] .data-table th,
html[data-theme="dark"] .exp-table th { background: #15171c !important; color: #8b909c !important; border-color: #232530 !important; }
html[data-theme="dark"] .data-table td,
html[data-theme="dark"] .exp-table td { border-color: #232530 !important; color: #d4d7dd; }
html[data-theme="dark"] .data-table tbody tr:hover,
html[data-theme="dark"] .exp-table tbody tr:hover { background: #17181d !important; }

/* inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .acct-input,
html[data-theme="dark"] .minput,
html[data-theme="dark"] .field-input,
html[data-theme="dark"] .search-input { background: #0f1116 !important; border-color: #2a2d38 !important; color: #e6e8ec !important; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6b7280 !important; }

/* modals + misc chrome */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .edit-modal,
html[data-theme="dark"] .invoice-modal { background: #141519 !important; color: #e6e8ec; border: 1px solid #232530; }
html[data-theme="dark"] .modal h3 { color: #f5f6f8 !important; }
html[data-theme="dark"] .mlabel { color: #8b909c !important; }
html[data-theme="dark"] .btn-cancel,
html[data-theme="dark"] .act { background: #1c1d24 !important; border-color: #2a2d38 !important; color: #d4d7dd !important; }
html[data-theme="dark"] .date-btn { background: #1c1d24 !important; color: #c4c9d2 !important; }
html[data-theme="dark"] .no-data,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .loading-state { color: #8b909c !important; }
html[data-theme="dark"] .pill { background: #262c38 !important; color: #c7cdd8 !important; }

/* ── every remaining white surface across the app ──────────────────────── */
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .drawer,
html[data-theme="dark"] .drawer-hd,
html[data-theme="dark"] .drawer-ft,
html[data-theme="dark"] .pat-hero,
html[data-theme="dark"] .visit-card,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] .rx-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .proc-cat-card,
html[data-theme="dark"] .case-card,
html[data-theme="dark"] .note,
html[data-theme="dark"] .note.pinned,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .est-box,
html[data-theme="dark"] .sum-card,
html[data-theme="dark"] .mini-modal,
html[data-theme="dark"] .mini-modal-head,
html[data-theme="dark"] .plan-modal,
html[data-theme="dark"] .plan-modal-head,
html[data-theme="dark"] .modal-create,
html[data-theme="dark"] .tooth-inspector-modal,
html[data-theme="dark"] .tooth-inspector-item,
html[data-theme="dark"] .compare-slot,
html[data-theme="dark"] .search-results,
html[data-theme="dark"] .ac-dropdown,
html[data-theme="dark"] .ai-sessions,
html[data-theme="dark"] .ai-msgs,
html[data-theme="dark"] .ai-msg.bot,
html[data-theme="dark"] .ai-sess-row,
html[data-theme="dark"] .pg-shell,
html[data-theme="dark"] .pg-msg.bot,
html[data-theme="dark"] .pg-sess-row,
html[data-theme="dark"] .composer,
html[data-theme="dark"] .cal-container,
html[data-theme="dark"] .calendar,
html[data-theme="dark"] .legend-bar,
html[data-theme="dark"] .reminder-card.overdue,
html[data-theme="dark"] .status-card.ns,
html[data-theme="dark"] .picker-wrap,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .error-state { background: #141519 !important; border-color: #232530 !important; color: #d4d7dd; }

/* toolbars / filter bars / headers */
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .cal-toolbar,
html[data-theme="dark"] .calendar-bar,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .patient-bar,
html[data-theme="dark"] .exam-bar,
html[data-theme="dark"] .range-bar,
html[data-theme="dark"] .tab-bar,
html[data-theme="dark"] .ai-inputbar,
html[data-theme="dark"] .pg-inputbar { background: #141519 !important; border-color: #232530 !important; }

/* calendar cells */
html[data-theme="dark"] .cal-cell { background: #121317 !important; border-color: #20232c !important; }
html[data-theme="dark"] .cal-cell.cal-off { background: #0d0e12 !important; }

/* buttons / chips / tabs → dark, light text */
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-sm,
html[data-theme="dark"] .btn.alt,
html[data-theme="dark"] .btn-action,
html[data-theme="dark"] .btn-add-child,
html[data-theme="dark"] .btn-add-item,
html[data-theme="dark"] .btn-add-mat,
html[data-theme="dark"] .btn-add-step,
html[data-theme="dark"] .btn-modal-cancel,
html[data-theme="dark"] .btn-plan-cancel,
html[data-theme="dark"] .btn-today,
html[data-theme="dark"] .nav-btn,
html[data-theme="dark"] .refresh-btn,
html[data-theme="dark"] .view-btn,
html[data-theme="dark"] .status-btn,
html[data-theme="dark"] .step-action-btn,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .filter-select,
html[data-theme="dark"] .range-pill,
html[data-theme="dark"] .range-chip,
html[data-theme="dark"] .case-tab,
html[data-theme="dark"] .ai-tab,
html[data-theme="dark"] .ai-chip,
html[data-theme="dark"] .ai-pill,
html[data-theme="dark"] .pg-chip,
html[data-theme="dark"] .ss-chip,
html[data-theme="dark"] .wire-chip,
html[data-theme="dark"] .tab,
html[data-theme="dark"] .h-act,
html[data-theme="dark"] .h-act-btn,
html[data-theme="dark"] .ai-close,
html[data-theme="dark"] .ai-save-btn,
html[data-theme="dark"] .plan-modal-close,
html[data-theme="dark"] .mini-modal-close,
html[data-theme="dark"] .tooth-inspector-close,
html[data-theme="dark"] .mini-btn-cancel,
html[data-theme="dark"] .acct-signout { background: #1c1d24 !important; border-color: #2a2d38 !important; color: #d4d7dd !important; }

/* inputs */
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .field-textarea,
html[data-theme="dark"] .price-edit-input,
html[data-theme="dark"] .catalog-search { background: #0f1116 !important; border-color: #2a2d38 !important; color: #e6e8ec !important; }

/* inline-styled white surfaces */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background:#f1f5f9"] { background: #141519 !important; }

/* ── CRM accountant pages (multi-line styles: journal/ledger/reports/tree) ── */
html[data-theme="dark"] .journal-card,
html[data-theme="dark"] .ledger-account,
html[data-theme="dark"] .ledger-table,
html[data-theme="dark"] .ledger-totals,
html[data-theme="dark"] .report-table,
html[data-theme="dark"] .comparison-table,
html[data-theme="dark"] .bs-section,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .export-menu,
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .tree-row,
html[data-theme="dark"] .tree-section,
html[data-theme="dark"] .account-filter select { background: #141519 !important; border-color: #232530 !important; color: #d4d7dd; }

html[data-theme="dark"] .ledger-table th,
html[data-theme="dark"] .report-table th,
html[data-theme="dark"] .section-header,
html[data-theme="dark"] .section-header td,
html[data-theme="dark"] .data-table tfoot tr,
html[data-theme="dark"] .tree-level.l1,
html[data-theme="dark"] .tree-level.l3,
html[data-theme="dark"] .tree-level.l4,
html[data-theme="dark"] .tree-level.l5,
html[data-theme="dark"] .tree-code { background: #1a1c22 !important; border-color: #232530 !important; }
html[data-theme="dark"] .comparison-table tr:hover td,
html[data-theme="dark"] .tree-row:hover { background: #1c1f27 !important; }

/* lighten text inside the CRM cards/tables (e.g. summary-card numbers) */
html[data-theme="dark"] .summary-card div,
html[data-theme="dark"] .kpi-card div,
html[data-theme="dark"] .kpi div,
html[data-theme="dark"] .journal-card div,
html[data-theme="dark"] .ledger-table td,
html[data-theme="dark"] .report-table td,
html[data-theme="dark"] .comparison-table td,
html[data-theme="dark"] .tree-row,
html[data-theme="dark"] .tree-row div { color: #d8dbe1 !important; }

/* CRM buttons → neutral dark */
html[data-theme="dark"] .btn-add-account,
html[data-theme="dark"] .btn-add-child,
html[data-theme="dark"] .btn-delete,
html[data-theme="dark"] .btn-delete-acct,
html[data-theme="dark"] .btn-edit-acct,
html[data-theme="dark"] .btn-voucher,
html[data-theme="dark"] .level-btn,
html[data-theme="dark"] .period-btn,
html[data-theme="dark"] .tab-btn,
html[data-theme="dark"] .expand-btns button { background: #1c1d24 !important; border-color: #2a2d38 !important; color: #d4d7dd !important; }

/* appointment status mini-cards (Reports) → dark tints, light text */
html[data-theme="dark"] .status-card.sc *,
html[data-theme="dark"] .status-card.co *,
html[data-theme="dark"] .status-card.ca *,
html[data-theme="dark"] .status-card.ns *,
html[data-theme="dark"] .status-card.ip *,
html[data-theme="dark"] .status-card.cf * { color: #eef0f3 !important; }
html[data-theme="dark"] .status-card.sc { background: rgba(59,130,246,.16) !important; }
html[data-theme="dark"] .status-card.co { background: rgba(16,185,129,.16) !important; }
html[data-theme="dark"] .status-card.ca { background: rgba(239,68,68,.16) !important; }
html[data-theme="dark"] .status-card.ns { background: #1c1d24 !important; }
html[data-theme="dark"] .status-card.ip { background: rgba(168,85,247,.16) !important; }
html[data-theme="dark"] .status-card.cf { background: rgba(45,212,191,.14) !important; }

/* visit strip (tooth chart) */
html[data-theme="dark"] .visit-strip { background: rgba(168,85,247,.12) !important; border-color: rgba(168,85,247,.35) !important; }
html[data-theme="dark"] .visit-strip.idle { background: #141519 !important; border-color: #232530 !important; }

/* inline tints with a space after the colon (missed earlier) */
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background: #f1f5f9"],
html[data-theme="dark"] [style*="background: #fef2f2"],
html[data-theme="dark"] [style*="background:#fef2f2"],
html[data-theme="dark"] [style*="background: #fff5f5"],
html[data-theme="dark"] [style*="background: #f0fdf4"],
html[data-theme="dark"] [style*="background:#f0fdf4"],
html[data-theme="dark"] [style*="background: #ecfdf5"],
html[data-theme="dark"] [style*="background:#ecfdf5"],
html[data-theme="dark"] [style*="background: #dbeafe"],
html[data-theme="dark"] [style*="background:#dbeafe"] { background: #15171c !important; }

/* disabled buttons → dark (was light grey/white) */
html[data-theme="dark"] button:disabled,
html[data-theme="dark"] .btn-primary:disabled,
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] [disabled] { background: #1c1d24 !important; color: #6b7280 !important; border-color: #2a2d38 !important; }

/* ── accents (restated LAST so they win over the neutral overrides) ─────── */
/* selected tabs / pills → purple */
html[data-theme="dark"] .filter-chip.active,
html[data-theme="dark"] .range-pill.active,
html[data-theme="dark"] .range-chip.active,
html[data-theme="dark"] .tab.active,
html[data-theme="dark"] .case-tab.active,
html[data-theme="dark"] .ai-tab.active,
html[data-theme="dark"] .plan-mode-tab.active,
html[data-theme="dark"] .vt-btn.active,
html[data-theme="dark"] .nav-btn.active,
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .btn-action.primary { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
/* danger / delete buttons */
html[data-theme="dark"] .act.danger,
html[data-theme="dark"] .mini-btn-del,
html[data-theme="dark"] .btn-danger { background: rgba(248,113,113,.14) !important; border-color: rgba(248,113,113,.4) !important; color: #f87171 !important; }
html[data-theme="dark"] .amount-positive { color: #4ade80 !important; }
html[data-theme="dark"] .amount-negative { color: #f87171 !important; }
html[data-theme="dark"] .kpi-label,
html[data-theme="dark"] .kpi-sub { color: #8b909c !important; }


html[data-theme="dark"] .card-link,
html[data-theme="dark"] .nav-item.active { color: #c084fc !important; }
html[data-theme="dark"] .date-btn.active { background: var(--primary) !important; color: #fff !important; }

html[data-theme="dark"] .pos,
html[data-theme="dark"] .stat-value.pos,
html[data-theme="dark"] .pos-amt { color: #4ade80 !important; }
html[data-theme="dark"] .neg,
html[data-theme="dark"] .stat-value.neg,
html[data-theme="dark"] .neg-amt { color: #f87171 !important; }
html[data-theme="dark"] .warn,
html[data-theme="dark"] .stat-value.warn { color: #fbbf24 !important; }

html[data-theme="dark"] .badge.green { background: rgba(74,222,128,.15) !important; color: #4ade80 !important; }
html[data-theme="dark"] .badge.amber { background: rgba(251,191,36,.15) !important; color: #fbbf24 !important; }
html[data-theme="dark"] .badge.grey,
html[data-theme="dark"] .badge.on { background: #262c38 !important; color: #c7cdd8 !important; }

/* brand wordmark keeps its purple/lime gradients; logos untouched */

/* ── CRM accent restatements (very last so they always win) ─────────────── */
html[data-theme="dark"] .tab-btn.active,
html[data-theme="dark"] .period-btn.active,
html[data-theme="dark"] .level-btn.active { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
html[data-theme="dark"] .debit,
html[data-theme="dark"] .entry-amount.debit,
html[data-theme="dark"] .entry-label.debit { color: #f87171 !important; }
html[data-theme="dark"] .credit,
html[data-theme="dark"] .entry-amount.credit,
html[data-theme="dark"] .entry-label.credit { color: #4ade80 !important; }
html[data-theme="dark"] .entry-side.debit { background: rgba(248,113,113,.10) !important; border-color: rgba(248,113,113,.30) !important; }
html[data-theme="dark"] .entry-side.credit { background: rgba(74,222,128,.10) !important; border-color: rgba(74,222,128,.30) !important; }
html[data-theme="dark"] .section-header,
html[data-theme="dark"] .section-header td { color: #c4b5fd !important; }
html[data-theme="dark"] .btn-delete,
html[data-theme="dark"] .btn-delete-acct { color: #f87171 !important; border-color: rgba(248,113,113,.4) !important; }

/* ── primary/save buttons broken by the --slate-900 inversion ──────────────
   These were `background: var(--slate-900); color: white`; lightening
   --slate-900 turned them white-on-white. Restore them to the brand purple. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-new,
html[data-theme="dark"] .btn-save,
html[data-theme="dark"] .btn-apply,
html[data-theme="dark"] .btn-dark,
html[data-theme="dark"] .btn-generate,
html[data-theme="dark"] .btn-modal-save,
html[data-theme="dark"] .btn-add-account,
html[data-theme="dark"] .btn-add-step,
html[data-theme="dark"] .btn-plan-save,
html[data-theme="dark"] .btn-save-note,
html[data-theme="dark"] .mini-btn-save,
html[data-theme="dark"] .modal-btn-primary,
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .btn-action.primary,
html[data-theme="dark"] .btn-mini.primary { background: var(--primary) !important; color: #fff !important; border: none !important; }
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-new:hover,
html[data-theme="dark"] .btn-save:hover { background: var(--primary-dark) !important; }

/* toast + wire chip also used --slate-900 as a (dark) background → keep dark */
html[data-theme="dark"] .toast { background: #1c1d24 !important; color: #e6e8ec !important; }
html[data-theme="dark"] .wire-chip { background: #1c1d24 !important; color: #d4d7dd !important; }

/* ── New Appointment modal (appt-modal.js, .cam-* classes) ─────────────── */
html[data-theme="dark"] .cam-modal { background: #141519 !important; color: #e6e8ec !important; }
html[data-theme="dark"] .cam-head { border-bottom-color: #232530 !important; }
html[data-theme="dark"] .cam-foot { border-top-color: #232530 !important; }
html[data-theme="dark"] .cam-sub,
html[data-theme="dark"] .cam-pat-empty,
html[data-theme="dark"] .cam-pat-item .sub,
html[data-theme="dark"] .cam-hist-empty,
html[data-theme="dark"] .cam-x { color: #8b909c !important; }
html[data-theme="dark"] .cam-field label { color: #c4c9d2 !important; }
html[data-theme="dark"] .cam-input,
html[data-theme="dark"] .cam-select,
html[data-theme="dark"] .cam-textarea { background: #0f1116 !important; border-color: #2a2d38 !important; color: #e6e8ec !important; }
html[data-theme="dark"] .cam-seg { background: #1c1d24 !important; }
html[data-theme="dark"] .cam-seg button { color: #c4c9d2 !important; }
html[data-theme="dark"] .cam-pat-list { background: #141519 !important; border-color: #232530 !important; }
html[data-theme="dark"] .cam-pat-add { background: rgba(168,85,247,.14) !important; border-bottom-color: #232530 !important; color: #c4b5fd !important; }
html[data-theme="dark"] .cam-pat-add:hover { background: rgba(168,85,247,.22) !important; }
html[data-theme="dark"] .cam-pat-item { border-bottom-color: #232530 !important; color: #e6e8ec !important; }
html[data-theme="dark"] .cam-pat-item:hover { background: #1c1f27 !important; }
html[data-theme="dark"] .cam-pat-input.chosen { background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.4) !important; }
html[data-theme="dark"] .cam-hist { background: rgba(168,85,247,.10) !important; border-color: rgba(168,85,247,.3) !important; }
html[data-theme="dark"] .cam-hist-line { color: #c4c9d2 !important; }
html[data-theme="dark"] .cam-hist-line b { color: #f5f6f8 !important; }
html[data-theme="dark"] .cam-sugg { background: #141519 !important; border-color: rgba(168,85,247,.35) !important; }
html[data-theme="dark"] .cam-sugg-txt { color: #c4c9d2 !important; }
html[data-theme="dark"] .cam-chip { background: #1c1d24 !important; border-color: #2a2d38 !important; color: #c4c9d2 !important; }
html[data-theme="dark"] .cam-range { color: #c4c9d2 !important; }
html[data-theme="dark"] .cam-range b { color: #f5f6f8 !important; }
html[data-theme="dark"] .cam-cancel { background: #1c1d24 !important; color: #d4d7dd !important; }
html[data-theme="dark"] .cam-conflict { background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.35) !important; color: #fca5a5 !important; }
/* selected segment / chips → purple (restate, more specific) */
html[data-theme="dark"] .cam-seg button.active { background: var(--primary) !important; color: #fff !important; box-shadow: none !important; }
html[data-theme="dark"] .cam-chip.active { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }

/* ── round-7 white-surface fixes ───────────────────────────────────────── */

/* visit strip action buttons (tooth chart) — were white w/ invisible text */
html[data-theme="dark"] .visit-btn { background: #1c1d24 !important; border-color: #2a2d38 !important; color: #d4d7dd !important; }
html[data-theme="dark"] .visit-btn:hover { background: rgba(168,85,247,.16) !important; border-color: var(--primary) !important; color: #c4b5fd !important; }
html[data-theme="dark"] .visit-btn.start { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
html[data-theme="dark"] .visit-btn.finish { background: #10b981 !important; border-color: #10b981 !important; color: #fff !important; }

/* Trial Balance table (.tb-table) */
html[data-theme="dark"] .tb-table td { color: #d4d7dd !important; border-bottom-color: #232530 !important; }
html[data-theme="dark"] .tb-table tr:hover { background: #1c1f27 !important; }
html[data-theme="dark"] .tb-table tr[data-level="1"] { background: #1a1c22 !important; }
html[data-theme="dark"] .tb-table tr[data-level="1"] td { border-bottom-color: #2a2d38 !important; }
html[data-theme="dark"] .tb-table tr[data-level="2"] { background: #15171c !important; }
html[data-theme="dark"] .tb-table .code-cell { color: #c084fc !important; }
html[data-theme="dark"] .tb-table .amount-dr { color: #f87171 !important; }
html[data-theme="dark"] .tb-table .amount-cr { color: #4ade80 !important; }
html[data-theme="dark"] .balance-banner.balanced { background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.4) !important; color: #4ade80 !important; }
html[data-theme="dark"] .balance-banner.unbalanced { background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.4) !important; color: #fca5a5 !important; }

/* Financial Reports tables (Income Statement / Balance Sheet / Comparison) */
html[data-theme="dark"] .report-table td,
html[data-theme="dark"] .comparison-table td { background: transparent !important; color: #d4d7dd !important; border-color: #232530 !important; }
html[data-theme="dark"] .report-table th { background: #1a1c22 !important; color: #c4c9d2 !important; }
html[data-theme="dark"] .report-table tr:hover td,
html[data-theme="dark"] .comparison-table tr:hover td { background: #1c1f27 !important; }
html[data-theme="dark"] .comparison-table td:first-child { background: #15171c !important; color: #e1e4ea !important; }
html[data-theme="dark"] .report-table .section-header td { background: #1a1c22 !important; color: #c4b5fd !important; }
html[data-theme="dark"] .report-table .total-row td,
html[data-theme="dark"] .report-table .net-row td { color: #f5f6f8 !important; }

/* Reminder modal (reminder-notifier.js, .curio-* classes) */
html[data-theme="dark"] .curio-rem-modal { background: #141519 !important; color: #e6e8ec !important; border: 1px solid #232530 !important; }
html[data-theme="dark"] .curio-rem-head { border-bottom-color: #232530 !important; }
html[data-theme="dark"] .curio-rem-foot { border-top-color: #232530 !important; }
html[data-theme="dark"] .curio-rem-sub,
html[data-theme="dark"] .curio-rem-close,
html[data-theme="dark"] .curio-patient-item .pid { color: #8b909c !important; }
html[data-theme="dark"] .curio-rem-title { color: #f5f6f8 !important; }
html[data-theme="dark"] .curio-field label { color: #c4c9d2 !important; }
html[data-theme="dark"] .curio-field input,
html[data-theme="dark"] .curio-field textarea,
html[data-theme="dark"] .curio-field select { background: #0f1116 !important; border-color: #2a2d38 !important; color: #e6e8ec !important; }
html[data-theme="dark"] .curio-patient-list { background: #141519 !important; border-color: #232530 !important; }
html[data-theme="dark"] .curio-patient-item { border-bottom-color: #232530 !important; color: #e6e8ec !important; }
html[data-theme="dark"] .curio-patient-item:hover { background: #1c1f27 !important; }
html[data-theme="dark"] .curio-rem-cancel { background: #1c1d24 !important; border-color: #2a2d38 !important; color: #d4d7dd !important; }
html[data-theme="dark"] .curio-rem-cancel:hover { background: #232530 !important; }
html[data-theme="dark"] .curio-rem-save { background: var(--primary) !important; color: #fff !important; }
html[data-theme="dark"] .curio-rem-save:hover { background: var(--primary-dark) !important; }

/* info / help banners on accountant pages (inline gradient + inline slate text) */
html[data-theme="dark"] [style*="linear-gradient(135deg, #f8fafc"],
html[data-theme="dark"] [style*="linear-gradient(135deg,#f8fafc"],
html[data-theme="dark"] [style*="linear-gradient(135deg, #f1f5f9"] { background: #141519 !important; border-color: #232530 !important; }
html[data-theme="dark"] [style*="color: #334155"],
html[data-theme="dark"] [style*="color:#334155"],
html[data-theme="dark"] [style*="color: #1e293b"],
html[data-theme="dark"] [style*="color: #0f172a"],
html[data-theme="dark"] [style*="color: #475569"] { color: #d8dbe1 !important; }
html[data-theme="dark"] [style*="color: #64748b"],
html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color: #94a3b8"] { color: #8b909c !important; }

/* procedure modal: "pre-filled from catalog" banner + inputs that flip white on focus */
html[data-theme="dark"] .prefill-banner { background: rgba(168,85,247,.12) !important; border-color: rgba(168,85,247,.35) !important; color: #c4b5fd !important; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .field-input:focus,
html[data-theme="dark"] .curio-field input:focus { background: #0f1116 !important; }

/* AI playground markdown tables (rendered from pipe tables in pgRender) */
html[data-theme="dark"] .pg-md-table th { background: #1a1c22 !important; color: #e1e4ea !important; border-color: #2a2d38 !important; }
html[data-theme="dark"] .pg-md-table td { color: #d4d7dd !important; border-color: #2a2d38 !important; }

/* AI co-pilot drawer (tooth-chart) — .ai-drawer & header/chips/typing were white */
html[data-theme="dark"] .ai-drawer { background: #101116 !important; border-left-color: #232530 !important; }
html[data-theme="dark"] .ai-head { border-bottom-color: #232530 !important; }
html[data-theme="dark"] .ai-head-title { color: #f5f6f8 !important; }
html[data-theme="dark"] .ai-head-sub { color: #8b909c !important; }
html[data-theme="dark"] .ai-close { background: #1c1d24 !important; color: #c4c9d2 !important; }
html[data-theme="dark"] .ai-close:hover { background: #232530 !important; color: #f5f6f8 !important; }
html[data-theme="dark"] .ai-msgs { background: #0a0a0b !important; }
html[data-theme="dark"] .ai-msg.bot { background: #141519 !important; border-color: #232530 !important; color: #d8dbe1 !important; }
html[data-theme="dark"] .ai-msg.bot .ai-disc { color: #8b909c !important; border-top-color: #2a2d38 !important; }
html[data-theme="dark"] .ai-typing { background: #141519 !important; border-color: #232530 !important; }
html[data-theme="dark"] .ai-daysep { background: #1c1d24 !important; color: #9aa0ab !important; }
html[data-theme="dark"] .ai-chips { background: #0a0a0b !important; }
html[data-theme="dark"] .ai-sess-head { color: #c4c9d2 !important; }
html[data-theme="dark"] .ai-sess-new { background: rgba(168,85,247,.12) !important; border-color: rgba(168,85,247,.4) !important; color: #c4b5fd !important; }
html[data-theme="dark"] .ai-sess-title { color: #e1e4ea !important; }
html[data-theme="dark"] .ai-sess-meta { color: #8b909c !important; }
html[data-theme="dark"] .ai-mark-row { background: #141519 !important; border-color: #232530 !important; color: #d8dbe1 !important; }
html[data-theme="dark"] .ai-mark-reason { color: #8b909c !important; }
html[data-theme="dark"] .ai-xray-pick { background: #141519 !important; border-color: #232530 !important; color: #d4d7dd !important; }
html[data-theme="dark"] .ai-xray-pick:hover { background: #1c1f27 !important; }
html[data-theme="dark"] .ai-xray-thumb.empty { background: #1c1d24 !important; color: #8b909c !important; }
html[data-theme="dark"] .ai-inputbar { border-top-color: #232530 !important; background: #101116 !important; }
html[data-theme="dark"] .ai-input { background: #0f1116 !important; border-color: #2a2d38 !important; color: #e6e8ec !important; }
html[data-theme="dark"] .ai-save-btn { background: #1c1d24 !important; color: #c4b5fd !important; border-color: rgba(168,85,247,.4) !important; }

/* ── xray-upload modal submit button ───────────────────────────────────── */
html[data-theme="dark"] #upSaveBtn { background: var(--primary) !important; color: #fff !important; border: none !important; }
html[data-theme="dark"] #upSaveBtn:hover { opacity: .88 !important; }

/* ── Perio chart dark surfaces ─────────────────────────────────────────── */
html[data-theme="dark"] .arch-wrapper { background: #141519 !important; border-color: #232530 !important; }
html[data-theme="dark"] .arch-divider { border-top-color: #2a2d38 !important; }
html[data-theme="dark"] .tooth-num { background: #1c1d24 !important; color: #c4c9d2 !important; }
html[data-theme="dark"] .depth-input { background: #0f1116 !important; border-color: #2a2d38 !important; color: #e6e8ec !important; }
html[data-theme="dark"] .depth-input[data-v="0"],
html[data-theme="dark"] .depth-input[data-v="1"],
html[data-theme="dark"] .depth-input[data-v="2"],
html[data-theme="dark"] .depth-input[data-v="3"] { background: rgba(16,185,129,.14) !important; color: #4ade80 !important; }
html[data-theme="dark"] .depth-input[data-v="4"],
html[data-theme="dark"] .depth-input[data-v="5"] { background: rgba(245,158,11,.16) !important; color: #fbbf24 !important; }
html[data-theme="dark"] .depth-input[data-v="6"],
html[data-theme="dark"] .depth-input[data-v="7"],
html[data-theme="dark"] .depth-input[data-v="8"],
html[data-theme="dark"] .depth-input[data-v="9"] { background: rgba(239,68,68,.16) !important; color: #f87171 !important; }
html[data-theme="dark"] .bop-dot { background: #0f1116 !important; border-color: #2a2d38 !important; }
html[data-theme="dark"] .bop-dot.on { background: var(--red) !important; border-color: var(--red) !important; }
html[data-theme="dark"] .tooth-icon { border-color: #2a2d38 !important; }
html[data-theme="dark"] .tooth-icon.missing { background: #1c1d24 !important; }
html[data-theme="dark"] .tooth-icon.implant { background: rgba(59,130,246,.16) !important; border-color: #3b82f6 !important; }
html[data-theme="dark"] .tooth-detail-select,
html[data-theme="dark"] .recession-input { background: #0f1116 !important; border-color: #2a2d38 !important; color: #d4d7dd !important; }
html[data-theme="dark"] .btn-secondary { background: #1c1d24 !important; border-color: #2a2d38 !important; color: #d4d7dd !important; }
html[data-theme="dark"] .appt-book-btn { background: var(--primary) !important; color: #fff !important; }
html[data-theme="dark"] .appt-book-btn:hover { background: var(--primary-dark) !important; }
html[data-theme="dark"] .problems-wrap { background: #141519 !important; border-color: #232530 !important; }
html[data-theme="dark"] .problems-table th { background: #1a1c22 !important; color: #c4c9d2 !important; border-color: #232530 !important; }
html[data-theme="dark"] .problems-table td { color: #d4d7dd !important; border-color: #232530 !important; }

/* ── Tooth-chart AI co-pilot markdown table ────────────────────────────── */
html[data-theme="dark"] .ai-md-table th { background: #1a1c22 !important; color: #e1e4ea !important; border-color: #2a2d38 !important; }
html[data-theme="dark"] .ai-md-table td { color: #d4d7dd !important; border-color: #2a2d38 !important; }

/* ── AI Providers page (super-admin) ───────────────────────────────────── */
html[data-theme="dark"] .ai-providers select,
html[data-theme="dark"] .ai-providers .txt,
html[data-theme="dark"] #provModal select,
html[data-theme="dark"] #provModal .txt,
html[data-theme="dark"] #keyModal .txt { background: #0f1116 !important; border-color: #2a2d38 !important; color: #e6e8ec !important; }
html[data-theme="dark"] .ai-providers table th { background: #15171c !important; color: #8b909c !important; border-bottom-color: #232530 !important; }
html[data-theme="dark"] .ai-providers table td { color: #d4d7dd !important; border-bottom-color: #232530 !important; }
html[data-theme="dark"] .ai-providers .prov-name { color: #f5f6f8 !important; }
html[data-theme="dark"] .ai-providers .prov-sub { color: #8b909c !important; }
html[data-theme="dark"] .ai-providers .cap { background: #1c1d24 !important; color: #9aa0ab !important; }
html[data-theme="dark"] .ai-providers .tag.builtin { color: #93c5fd !important; background: rgba(59,130,246,.16) !important; }
html[data-theme="dark"] .ai-providers .tag.custom { color: #c4b5fd !important; background: rgba(168,85,247,.16) !important; }
html[data-theme="dark"] .ai-providers .btn-sm,
html[data-theme="dark"] #provModal .btn-cancel,
html[data-theme="dark"] #keyModal .btn-cancel { background: #1c1d24 !important; border-color: #2a2d38 !important; color: #d4d7dd !important; }
html[data-theme="dark"] #keyModal .modal-title { color: #f5f6f8 !important; }
html[data-theme="dark"] #keyModal .modal-sub,
html[data-theme="dark"] #keyModal .hint { color: #8b909c !important; }
html[data-theme="dark"] #keyModal .fld label { color: #c4c9d2 !important; }
html[data-theme="dark"] .ai-providers .btn-sm:hover { background: #232530 !important; }
html[data-theme="dark"] .ai-providers .btn-sm.danger { color: #fca5a5 !important; border-color: rgba(239,68,68,.4) !important; }
html[data-theme="dark"] .ai-providers .sw .track { background: #2a2d38 !important; }
html[data-theme="dark"] .ai-providers .hint,
html[data-theme="dark"] .ai-providers .card-sub,
html[data-theme="dark"] #provModal .modal-sub,
html[data-theme="dark"] #provModal .hint { color: #8b909c !important; }
html[data-theme="dark"] .ai-providers .fld label,
html[data-theme="dark"] #provModal .fld label,
html[data-theme="dark"] #provModal .checkrow label { color: #c4c9d2 !important; }
html[data-theme="dark"] #provModal .modal-title,
html[data-theme="dark"] .ai-providers .card-title { color: #f5f6f8 !important; }

/* ── Student work pages (supervisor review queue + student My Work) ─────── */
html[data-theme="dark"] .student-work .tab { background: #1c1d24 !important; border-color: #2a2d38 !important; color: #d4d7dd !important; }
html[data-theme="dark"] .student-work .tab.active { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
html[data-theme="dark"] .student-work .tab:not(.active) .count-badge { background: #2a2d38 !important; color: #c4c9d2 !important; }
html[data-theme="dark"] .student-work table th { background: #15171c !important; color: #8b909c !important; border-bottom-color: #232530 !important; }
html[data-theme="dark"] .student-work table td { color: #d4d7dd !important; border-bottom-color: #232530 !important; }
html[data-theme="dark"] .student-work .sw-summary { color: #f5f6f8 !important; }
html[data-theme="dark"] .student-work .sw-sub { color: #8b909c !important; }
html[data-theme="dark"] .student-work .kind-tag { background: rgba(168,85,247,.16) !important; color: #c4b5fd !important; }
html[data-theme="dark"] .student-work .pill.pending { color: #fbbf24 !important; background: rgba(245,158,11,.14) !important; }
html[data-theme="dark"] .student-work .pill.approved { color: #4ade80 !important; background: rgba(16,185,129,.14) !important; }
html[data-theme="dark"] .student-work .pill.rejected { color: #fca5a5 !important; background: rgba(239,68,68,.14) !important; }
html[data-theme="dark"] .student-work .btn-sm { background: #1c1d24 !important; border-color: #2a2d38 !important; color: #d4d7dd !important; }
html[data-theme="dark"] .student-work .btn-sm:hover { background: #232530 !important; }
html[data-theme="dark"] .student-work .btn-sm.approve { background: #10b981 !important; border-color: #10b981 !important; color: #fff !important; }
html[data-theme="dark"] .student-work .btn-sm.reject { color: #fca5a5 !important; border-color: rgba(239,68,68,.4) !important; }
html[data-theme="dark"] .student-work details summary { color: #8b909c !important; }
html[data-theme="dark"] .student-work details pre { background: #0f1116 !important; border-color: #232530 !important; color: #c4c9d2 !important; }
html[data-theme="dark"] .student-work .empty { color: #8b909c !important; }

/* ── Clinics page (group-owner multi-clinic management + roll-up) ───────── */
html[data-theme="dark"] .clinics-page table th { background: #15171c !important; color: #8b909c !important; border-bottom-color: #232530 !important; }
html[data-theme="dark"] .clinics-page table td { color: #d4d7dd !important; border-bottom-color: #232530 !important; }
html[data-theme="dark"] .clinics-page tr.total-row td { background: #1a1c22 !important; color: #f5f6f8 !important; border-top-color: #2a2d38 !important; }
html[data-theme="dark"] .clinics-page .clinic-name { color: #f5f6f8 !important; }
html[data-theme="dark"] .clinics-page .muted { color: #8b909c !important; }
html[data-theme="dark"] .clinics-page .pill.on { color: #4ade80 !important; background: rgba(16,185,129,.14) !important; }
html[data-theme="dark"] .clinics-page .pill.off { color: #9aa0ab !important; background: #1c1d24 !important; }
html[data-theme="dark"] .clinics-page .pill.cur { color: #c4b5fd !important; background: rgba(168,85,247,.16) !important; }
html[data-theme="dark"] .clinics-page .pill.blk { color: #fca5a5 !important; background: rgba(239,68,68,.14) !important; }
html[data-theme="dark"] .clinics-page .btn-sm { background: #1c1d24 !important; border-color: #2a2d38 !important; color: #d4d7dd !important; }
html[data-theme="dark"] .clinics-page .btn-sm:hover { background: #232530 !important; }
html[data-theme="dark"] .clinics-page .btn-sm.primary { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
html[data-theme="dark"] .clinics-page .empty { color: #8b909c !important; }
/* clinics modals (create / add-admin) — these use clinics-specific classes */
html[data-theme="dark"] .modal .modal-title { color: #f5f6f8 !important; }
html[data-theme="dark"] .modal .modal-sub { color: #8b909c !important; }
html[data-theme="dark"] .modal .opt-divider { color: #8b909c !important; border-top-color: #2a2d38 !important; }
html[data-theme="dark"] .modal .field label { color: #c4c9d2 !important; }
html[data-theme="dark"] .modal .field input { background: #0f1116 !important; border-color: #2a2d38 !important; color: #e6e8ec !important; }

/* disabled buttons — VERY last so a disabled primary reads as disabled, not active */
html[data-theme="dark"] button:disabled,
html[data-theme="dark"] .btn-primary:disabled,
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] .btn-save:disabled,
html[data-theme="dark"] .btn-add-step:disabled,
html[data-theme="dark"] [disabled] { background: #2a2d38 !important; color: #8b909c !important; border-color: #2a2d38 !important; cursor: not-allowed; }


/* ── Pinned sidebar brand + footer ───────────────────────────────────────────
   The sidebar (.sidebar) is the scroll container (overflow-y:auto, height:100vh).
   Pin the logo/brand to the top and the user block to the bottom so only the nav
   items in between scroll. The inline per-page rules set neither position nor
   background on these, so these properties apply cleanly everywhere. */

/* Drop the sidebar's top AND bottom padding so the sticky brand/footer pin flush
   to the very edges: otherwise they stick at the edge of the *content box* (24px
   in) and nav items scroll into the padding band beyond them. The brand and footer
   carry that spacing themselves now. */
.sidebar { padding-top: 0 !important; padding-bottom: 0 !important; }
.sidebar-brand {
    position: sticky;
    top: 0;
    z-index: 6;
    background: #0a0a0a;
    /* Extend over the sidebar's 16px side padding and give the brand its own top
       spacing (the sidebar no longer provides it) so nothing peeks above it. */
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 24px 28px 20px 28px !important;
}
.sidebar-bottom {
    position: sticky;
    bottom: 0;
    z-index: 6;
    background: #0a0a0a;
    flex-shrink: 0;
    /* margin-top:auto drops the footer to the bottom when the nav is shorter than
       the viewport; sticky bottom:0 keeps it pinned while a long nav scrolls. */
    margin-top: auto !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 16px 28px 24px 28px !important;
}

/* ── Smooth sidebar load — no flash of the raw, un-grouped nav ─────────────────
   The nav is assembled by JS after load: role-guard gates items by role,
   sidebar-enhance groups them into collapsible sections, and lucide swaps in the
   icons. Shown raw, the user watches the flat list reflow into its final grouped
   layout ("lag then poof"). So we start the nav invisible and reveal it as ONE
   fade the moment JS finishes (sidebar-enhance adds .sb-ready). The brand and the
   pinned footer stay visible the whole time, so the sidebar never looks empty —
   just its links fade in together.
   A CSS-only failsafe reveals everything after 2.5s even if the JS never runs, so
   the nav can never get permanently stuck invisible. */
.sidebar .nav-section,
.sidebar .nav-item,
.sidebar .nav-group-body {
    opacity: 0;
    animation: sbReveal 0s linear 2.5s forwards;   /* failsafe only */
}
@keyframes sbReveal { to { opacity: 1; } }
.sidebar.sb-ready .nav-section,
.sidebar.sb-ready .nav-item,
.sidebar.sb-ready .nav-group-body {
    opacity: 1;
    animation: none;
    transition: opacity .18s ease;
}

/* ── Collapsible + customizable sidebar sections (built by role-guard.js) ──── */
/* NOT !important: sidebar-enhance.js hides a role-gated, empty section by
   setting element.style.display='none' — an inline style with !important on
   this rule would unconditionally beat that and force the header visible
   regardless of what the JS decided (this was a real bug: JS correctly set
   display:none, but this rule silently overrode it back to visible). No page
   sets its own `display` for .nav-section, so this applies via the normal
   cascade without needing !important. */
.nav-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}
.nav-section .sec-caret { font-size: 9px; opacity: .5; transition: transform .15s; margin-left: 8px; }
.nav-section.sb-collapsed .sec-caret { transform: rotate(-90deg); }
.nav-group-body { display: flex; flex-direction: column; gap: 4px; }
.nav-group-body.sb-collapsed { display: none; }

/* Ensure the branded tooth-chart SVG icon renders at the right size on every
   page (some pages / the dynamically-built accountant nav lack the inline rule),
   so the Tooth Charts icon is identical everywhere. */
.sidebar .lico svg { width: 1em; height: 1em; display: block; }
.sidebar .lico-tooth svg { stroke: currentColor; fill: none; }

/* ── Mobile navigation (≤900px) ──────────────────────────────────────────────
   Every page's inline CSS hides the sidebar on small screens with no way to
   navigate. Override that: the sidebar becomes an off-canvas drawer opened by a
   fixed hamburger button (both built by sidebar-enhance.js on every page). */
#sbHamburger, #sbBackdrop { display: none; }
@media (max-width: 900px) {
    #sbHamburger {
        display: flex; align-items: center; justify-content: center;
        position: fixed; top: 12px; left: 12px; z-index: 60;
        width: 42px; height: 42px; border-radius: 10px; border: 1px solid #2a2d38;
        background: #141519; color: #e6e8ec; cursor: pointer; padding: 0;
        box-shadow: 0 2px 10px rgba(0,0,0,.35);
    }
    #sbHamburger svg { width: 20px; height: 20px; display: block; }
    /* Defeat the per-page `display:none` and turn the sidebar into a drawer. */
    .sidebar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important; left: 0 !important; bottom: 0 !important;
        height: 100vh !important; width: 272px !important;
        z-index: 58 !important;
        transform: translateX(-110%);
        transition: transform .22s ease;
        box-shadow: 8px 0 30px rgba(0,0,0,.45);
    }
    .sidebar.sb-open { transform: translateX(0); }
    #sbBackdrop.sb-open {
        display: block; position: fixed; inset: 0;
        background: rgba(0,0,0,.55); z-index: 57;
    }
    /* keep the breadcrumb clear of the fixed hamburger */
    .topbar, .acct-topbar { padding-left: 66px !important; }
}