/*
 * StallWise VetPro — dark theme (2026-10-25).
 * Bootstrap 5.3 restyles its own components from html[data-bs-theme="dark"]; this sheet does the rest:
 * the VetPro palette variables, the navigation's own stylesheet, and the hand-written surfaces the views carry
 * as inline colours (a light grey panel, a dark grey heading). The chooser lives in the user menu and on My
 * Profile (Light / Dark / Follow device); the preference is the vp_theme cookie + user_settings ui.theme.
 */
html[data-bs-theme="dark"] {
    color-scheme: dark;
    --vetpro-light: #1e293b;
    --vetpro-white: #0f172a;
    --vetpro-dark: #e2e8f0;
    --gray-50: #111827;  --gray-100: #1f2937; --gray-200: #374151; --gray-300: #4b5563; --gray-400: #6b7280;
    --gray-500: #9ca3af; --gray-600: #cbd5e1; --gray-700: #d1d5db; --gray-800: #e5e7eb; --gray-900: #f3f4f6;
    --bs-body-bg: #0f172a;
    --bs-body-color: #e2e8f0;
    --bs-secondary-bg: #1e293b;
    --bs-tertiary-bg: #172033;
    --bs-border-color: #334155;
    --bs-link-color: #7dd3fc;
    --bs-link-hover-color: #bae6fd;
    --bs-link-color-rgb: 125, 211, 252;
    --bs-link-hover-color-rgb: 186, 230, 253;
    --vp-surface: #1e293b;
    --vp-surface-2: #172033;
    --vp-border: #334155;
    --vp-text: #e2e8f0;
    --vp-muted: #94a3b8;
}
html[data-bs-theme="dark"] body { background: var(--bs-body-bg); color: var(--bs-body-color); }

/* ---- navigation (its stylesheet is written in light hexes) ---- */
html[data-bs-theme="dark"] .nav-menu, html[data-bs-theme="dark"] .nav-menu-content, html[data-bs-theme="dark"] .nav-menu-footer,
html[data-bs-theme="dark"] .user-dropdown, html[data-bs-theme="dark"] .notifications-dropdown, html[data-bs-theme="dark"] .messages-dropdown,
html[data-bs-theme="dark"] .nav-practice-switch-menu { background: var(--vp-surface) !important; color: var(--vp-text); border-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] .nav-category { border-bottom-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] .nav-category summary { background: var(--vp-surface-2) !important; color: var(--vp-text) !important; }
html[data-bs-theme="dark"] .nav-category summary:hover, html[data-bs-theme="dark"] .nav-category[open] summary { background: #263348 !important; }
html[data-bs-theme="dark"] .nav-item, html[data-bs-theme="dark"] .nav-link, html[data-bs-theme="dark"] .user-dropdown a,
html[data-bs-theme="dark"] .nav-practice-switch-item { color: var(--vp-text) !important; }
html[data-bs-theme="dark"] .nav-item:hover, html[data-bs-theme="dark"] .nav-practice-switch-item:hover, html[data-bs-theme="dark"] .user-dropdown a:hover { background: #263348 !important; }
html[data-bs-theme="dark"] .nav-item.active { background: #1e3a5f !important; }
html[data-bs-theme="dark"] .nav-quick h4, html[data-bs-theme="dark"] .nav-features h4 { color: var(--vp-muted) !important; }
html[data-bs-theme="dark"] .nav-link.logout { color: #fca5a5 !important; }
html[data-bs-theme="dark"] .nav-link.logout:hover { background: #7f1d1d !important; }
html[data-bs-theme="dark"] .nav-menu-content::-webkit-scrollbar-thumb { background: #475569; }

/* ---- Bootstrap pieces the views lean on with light assumptions ---- */
html[data-bs-theme="dark"] .card, html[data-bs-theme="dark"] .modal-content, html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .profile-card, html[data-bs-theme="dark"] .dropdown-menu, html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .accordion-item, html[data-bs-theme="dark"] .toast { background-color: var(--vp-surface); color: var(--vp-text); border-color: var(--vp-border); }
html[data-bs-theme="dark"] .card-header, html[data-bs-theme="dark"] .card-footer, html[data-bs-theme="dark"] .modal-header, html[data-bs-theme="dark"] .modal-footer { background-color: var(--vp-surface-2); border-color: var(--vp-border); }
html[data-bs-theme="dark"] .bg-white, html[data-bs-theme="dark"] .bg-light { background-color: var(--vp-surface) !important; color: var(--vp-text); }
html[data-bs-theme="dark"] .text-dark { color: var(--vp-text) !important; }
html[data-bs-theme="dark"] .text-muted, html[data-bs-theme="dark"] .text-secondary { color: var(--vp-muted) !important; }
html[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--vp-text); --bs-table-border-color: var(--vp-border); --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-hover-bg: rgba(255,255,255,.06); }
html[data-bs-theme="dark"] .table-light, html[data-bs-theme="dark"] .table > thead.table-light > tr > th { --bs-table-bg: var(--vp-surface-2); background-color: var(--vp-surface-2); color: var(--vp-text); }
html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] .input-group-text { background-color: var(--vp-surface-2); color: var(--vp-text); border-color: var(--vp-border); }
html[data-bs-theme="dark"] .form-control::placeholder { color: #64748b; }
html[data-bs-theme="dark"] .form-control:disabled, html[data-bs-theme="dark"] .form-control[readonly] { background-color: #141c2e; color: var(--vp-muted); }
html[data-bs-theme="dark"] .btn-light, html[data-bs-theme="dark"] .btn-outline-dark { background-color: var(--vp-surface-2); color: var(--vp-text); border-color: var(--vp-border); }
html[data-bs-theme="dark"] .btn-outline-secondary { color: #cbd5e1; border-color: #475569; }
html[data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: #334155; color: #fff; }
html[data-bs-theme="dark"] .alert-light, html[data-bs-theme="dark"] .alert-secondary { background-color: var(--vp-surface-2); color: var(--vp-text); border-color: var(--vp-border); }
html[data-bs-theme="dark"] .badge.text-bg-light, html[data-bs-theme="dark"] .badge.bg-light { background-color: #334155 !important; color: var(--vp-text) !important; }
html[data-bs-theme="dark"] .page-link { background-color: var(--vp-surface); color: var(--vp-text); border-color: var(--vp-border); }
html[data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--vp-surface); color: var(--vp-text); border-color: var(--vp-border) var(--vp-border) var(--vp-surface); }
html[data-bs-theme="dark"] hr { border-color: var(--vp-border); opacity: 1; }
html[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.nav-item):not(.badge):not(.page-link) { color: var(--bs-link-color); }
html[data-bs-theme="dark"] img.vp-logo-light { filter: brightness(0) invert(1); }

/* ---- the views' inline colours: light panels become dark panels, dark text becomes light text ----
   An attribute selector cannot tell a background from a text colour, so each hex is mapped by the role it
   plays in this codebase (#f8fafc/#f1f5f9/#e2e8f0/#e5e7eb/#fef3c7/#fff = panel; #1f2937/#374151/#111827/
   #0c4a6e/#1e293b/#334155 = text). The sweep (Tools/qa/readiness-sweep.mjs with SWEEP_COOKIE=vp_theme=dark)
   shows where a page still needs a hand. */
html[data-bs-theme="dark"] [style*="background:#f8fafc"], html[data-bs-theme="dark"] [style*="background: #f8fafc"], html[data-bs-theme="dark"] [style*="background-color:#f8fafc"], html[data-bs-theme="dark"] [style*="background-color: #f8fafc"],
html[data-bs-theme="dark"] [style*="background:#f1f5f9"], html[data-bs-theme="dark"] [style*="background: #f1f5f9"], html[data-bs-theme="dark"] [style*="background-color:#f1f5f9"], html[data-bs-theme="dark"] [style*="background-color: #f1f5f9"],
html[data-bs-theme="dark"] [style*="background:#f9fafb"], html[data-bs-theme="dark"] [style*="background: #f9fafb"], html[data-bs-theme="dark"] [style*="background:#f3f4f6"], html[data-bs-theme="dark"] [style*="background: #f3f4f6"],
html[data-bs-theme="dark"] [style*="background:#e2e8f0"], html[data-bs-theme="dark"] [style*="background: #e2e8f0"], html[data-bs-theme="dark"] [style*="background:#e5e7eb"], html[data-bs-theme="dark"] [style*="background: #e5e7eb"],
html[data-bs-theme="dark"] [style*="background:#fff"], html[data-bs-theme="dark"] [style*="background: #fff"], html[data-bs-theme="dark"] [style*="background:#ffffff"], html[data-bs-theme="dark"] [style*="background: #ffffff"], html[data-bs-theme="dark"] [style*="background:white"], html[data-bs-theme="dark"] [style*="background: white"],
html[data-bs-theme="dark"] [style*="background-color:#fff"], html[data-bs-theme="dark"] [style*="background-color: #fff"], html[data-bs-theme="dark"] [style*="background-color:white"], html[data-bs-theme="dark"] [style*="background-color: white"] {
    background-color: var(--vp-surface-2) !important; background-image: none !important; color: var(--vp-text);
}
html[data-bs-theme="dark"] [style*="background:#fef3c7"], html[data-bs-theme="dark"] [style*="background: #fef3c7"], html[data-bs-theme="dark"] [style*="background:#fffbeb"], html[data-bs-theme="dark"] [style*="background: #fffbeb"] { background-color: #3b2f0b !important; color: #fde68a !important; }
html[data-bs-theme="dark"] [style*="background:#ecfdf5"], html[data-bs-theme="dark"] [style*="background: #ecfdf5"], html[data-bs-theme="dark"] [style*="background:#d1fae5"], html[data-bs-theme="dark"] [style*="background: #d1fae5"] { background-color: #052e1f !important; color: #a7f3d0 !important; }
html[data-bs-theme="dark"] [style*="background:#eff6ff"], html[data-bs-theme="dark"] [style*="background: #eff6ff"], html[data-bs-theme="dark"] [style*="background:#e0f2fe"], html[data-bs-theme="dark"] [style*="background: #e0f2fe"], html[data-bs-theme="dark"] [style*="background:#dbeafe"], html[data-bs-theme="dark"] [style*="background: #dbeafe"] { background-color: #0c2a4a !important; color: #bae6fd !important; }
html[data-bs-theme="dark"] [style*="background:#fee2e2"], html[data-bs-theme="dark"] [style*="background: #fee2e2"], html[data-bs-theme="dark"] [style*="background:#fef2f2"], html[data-bs-theme="dark"] [style*="background: #fef2f2"] { background-color: #450a0a !important; color: #fecaca !important; }
html[data-bs-theme="dark"] [style*="color:#1f2937"], html[data-bs-theme="dark"] [style*="color: #1f2937"], html[data-bs-theme="dark"] [style*="color:#374151"], html[data-bs-theme="dark"] [style*="color: #374151"],
html[data-bs-theme="dark"] [style*="color:#111827"], html[data-bs-theme="dark"] [style*="color: #111827"], html[data-bs-theme="dark"] [style*="color:#1e293b"], html[data-bs-theme="dark"] [style*="color: #1e293b"],
html[data-bs-theme="dark"] [style*="color:#0f172a"], html[data-bs-theme="dark"] [style*="color: #0f172a"], html[data-bs-theme="dark"] [style*="color:#334155"], html[data-bs-theme="dark"] [style*="color: #334155"],
html[data-bs-theme="dark"] [style*="color:#0c4a6e"], html[data-bs-theme="dark"] [style*="color: #0c4a6e"], html[data-bs-theme="dark"] [style*="color:#2c3e50"], html[data-bs-theme="dark"] [style*="color: #2c3e50"] { color: var(--vp-text) !important; }
html[data-bs-theme="dark"] [style*="color:#6b7280"], html[data-bs-theme="dark"] [style*="color: #6b7280"], html[data-bs-theme="dark"] [style*="color:#64748b"], html[data-bs-theme="dark"] [style*="color: #64748b"],
html[data-bs-theme="dark"] [style*="color:#4b5563"], html[data-bs-theme="dark"] [style*="color: #4b5563"], html[data-bs-theme="dark"] [style*="color:#7f8c8d"], html[data-bs-theme="dark"] [style*="color: #7f8c8d"] { color: var(--vp-muted) !important; }
html[data-bs-theme="dark"] [style*="border:1px solid #e2e8f0"], html[data-bs-theme="dark"] [style*="border: 1px solid #e2e8f0"], html[data-bs-theme="dark"] [style*="border:1px solid #e5e7eb"], html[data-bs-theme="dark"] [style*="border: 1px solid #e5e7eb"],
html[data-bs-theme="dark"] [style*="border-bottom:1px solid #f1f5f9"], html[data-bs-theme="dark"] [style*="border-bottom: 1px solid #f1f5f9"], html[data-bs-theme="dark"] [style*="border-bottom:1px solid #e2e8f0"], html[data-bs-theme="dark"] [style*="border-bottom: 1px solid #e2e8f0"] { border-color: var(--vp-border) !important; }

/* ---- the theme chooser itself ---- */
.vp-theme-choice { display: flex; gap: .25rem; padding: .35rem .75rem; align-items: center; font-size: .85rem; }
.vp-theme-choice span { color: var(--vp-muted, #64748b); margin-right: .25rem; }
.vp-theme-choice button { border: 1px solid var(--vp-border, #e2e8f0); background: transparent; color: inherit; border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; line-height: 1.4; cursor: pointer; }
.vp-theme-choice button.active { background: #2c5aa0; color: #fff; border-color: #2c5aa0; }

/* ---- page-level stylesheets (each view carries its own <style> with white panels: .stat-card, .content-card…) ---- */
html[data-bs-theme="dark"] .stat-card, html[data-bs-theme="dark"] .stats-card, html[data-bs-theme="dark"] .content-card, html[data-bs-theme="dark"] .settings-card,
html[data-bs-theme="dark"] .kpi-card, html[data-bs-theme="dark"] .metric-card, html[data-bs-theme="dark"] .message-card, html[data-bs-theme="dark"] .table-container,
html[data-bs-theme="dark"] .filters-row, html[data-bs-theme="dark"] .filter-section, html[data-bs-theme="dark"] .summary-item, html[data-bs-theme="dark"] .comparison-card,
html[data-bs-theme="dark"] .vet-card, html[data-bs-theme="dark"] .patient-card, html[data-bs-theme="dark"] .report-card, html[data-bs-theme="dark"] .form-card,
html[data-bs-theme="dark"] .feature-card, html[data-bs-theme="dark"] .chart-card, html[data-bs-theme="dark"] .calendar-section, html[data-bs-theme="dark"] .search-box,
html[data-bs-theme="dark"] .search-bar, html[data-bs-theme="dark"] .workflow-panel, html[data-bs-theme="dark"] .workflow-board, html[data-bs-theme="dark"] .vital-sign-box,
html[data-bs-theme="dark"] .upload-zone, html[data-bs-theme="dark"] .reset-card, html[data-bs-theme="dark"] .backup-card, html[data-bs-theme="dark"] .backup-item,
html[data-bs-theme="dark"] .template-preview, html[data-bs-theme="dark"] .message-item, html[data-bs-theme="dark"] .message-bubble.received, html[data-bs-theme="dark"] .vtr-card,
html[data-bs-theme="dark"] .vtr-count-card, html[data-bs-theme="dark"] .vtr-empty, html[data-bs-theme="dark"] .settings-section, html[data-bs-theme="dark"] .wizard-step,
html[data-bs-theme="dark"] .welcome-section, html[data-bs-theme="dark"] .toc, html[data-bs-theme="dark"] .quick-action-btn, html[data-bs-theme="dark"] .commission-table,
html[data-bs-theme="dark"] .error-container, html[data-bs-theme="dark"] .action-buttons, html[data-bs-theme="dark"] .meta-info, html[data-bs-theme="dark"] .letterhead-note,
html[data-bs-theme="dark"] .user-override-card, html[data-bs-theme="dark"] .activity-item, html[data-bs-theme="dark"] .template-item, html[data-bs-theme="dark"] .invoice-card,
html[data-bs-theme="dark"] .client-card, html[data-bs-theme="dark"] .horse-card, html[data-bs-theme="dark"] .section-card, html[data-bs-theme="dark"] .panel-card,
html[data-bs-theme="dark"] .list-card, html[data-bs-theme="dark"] .info-card, html[data-bs-theme="dark"] .detail-card, html[data-bs-theme="dark"] .summary-card,
html[data-bs-theme="dark"] .data-card, html[data-bs-theme="dark"] .widget, html[data-bs-theme="dark"] .widget-card, html[data-bs-theme="dark"] .dashboard-card,
html[data-bs-theme="dark"] .tile, html[data-bs-theme="dark"] .kpi, html[data-bs-theme="dark"] .box, html[data-bs-theme="dark"] .panel {
    background-color: var(--vp-surface) !important; background-image: none !important; color: var(--vp-text); border-color: var(--vp-border) !important;
}
html[data-bs-theme="dark"] .admin-container, html[data-bs-theme="dark"] .main-content, html[data-bs-theme="dark"] .content-container, html[data-bs-theme="dark"] .page-content,
html[data-bs-theme="dark"] .container-fluid.bg-white, html[data-bs-theme="dark"] .wrapper { background-color: transparent !important; color: var(--vp-text); }
html[data-bs-theme="dark"] .stat-card h1, html[data-bs-theme="dark"] .stat-card h2, html[data-bs-theme="dark"] .stat-card h3, html[data-bs-theme="dark"] .stat-card h4, html[data-bs-theme="dark"] .stat-card h5,
html[data-bs-theme="dark"] .content-card h1, html[data-bs-theme="dark"] .content-card h2, html[data-bs-theme="dark"] .content-card h3, html[data-bs-theme="dark"] .content-card h4, html[data-bs-theme="dark"] .content-card h5,
html[data-bs-theme="dark"] .settings-card h5, html[data-bs-theme="dark"] .kpi-card h5, html[data-bs-theme="dark"] .card h5, html[data-bs-theme="dark"] .card h6, html[data-bs-theme="dark"] .card h4 { color: var(--vp-text); }
html[data-bs-theme="dark"] .stat-label, html[data-bs-theme="dark"] .stat-sub, html[data-bs-theme="dark"] .kpi-label, html[data-bs-theme="dark"] .metric-label, html[data-bs-theme="dark"] .card-subtitle { color: var(--vp-muted) !important; }
html[data-bs-theme="dark"] .table-header, html[data-bs-theme="dark"] .page-header:not(.hero), html[data-bs-theme="dark"] .wizard-header { background-color: var(--vp-surface-2) !important; color: var(--vp-text); border-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] .table, html[data-bs-theme="dark"] .table th, html[data-bs-theme="dark"] .table td { background-color: transparent !important; color: var(--vp-text); border-color: var(--vp-border); }
html[data-bs-theme="dark"] .table thead th, html[data-bs-theme="dark"] .table > :not(caption) > * > th { background-color: var(--vp-surface-2) !important; color: var(--vp-text) !important; }
html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.03) !important; color: var(--vp-text); }
html[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,.06) !important; color: var(--vp-text); }
html[data-bs-theme="dark"] .pagination .page-item.disabled .page-link { background-color: var(--vp-surface-2); color: var(--vp-muted); }
html[data-bs-theme="dark"] .text-body, html[data-bs-theme="dark"] .text-black { color: var(--vp-text) !important; }
html[data-bs-theme="dark"] .border, html[data-bs-theme="dark"] .border-top, html[data-bs-theme="dark"] .border-bottom, html[data-bs-theme="dark"] .border-start, html[data-bs-theme="dark"] .border-end { border-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] .shadow-sm, html[data-bs-theme="dark"] .shadow { box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; }
/* dropdown/select native controls */
html[data-bs-theme="dark"] select, html[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.btn), html[data-bs-theme="dark"] textarea { background-color: var(--vp-surface-2); color: var(--vp-text); border-color: var(--vp-border); }
/* FullCalendar */
html[data-bs-theme="dark"] .fc { --fc-page-bg-color: var(--vp-surface); --fc-neutral-bg-color: var(--vp-surface-2); --fc-border-color: var(--vp-border); --fc-today-bg-color: rgba(44,90,160,.25); --fc-list-event-hover-bg-color: #263348; color: var(--vp-text); }
html[data-bs-theme="dark"] .fc .fc-col-header-cell, html[data-bs-theme="dark"] .fc .fc-daygrid-day-number, html[data-bs-theme="dark"] .fc .fc-col-header-cell-cushion, html[data-bs-theme="dark"] .fc .fc-timegrid-slot-label { color: var(--vp-text); }
html[data-bs-theme="dark"] .fc-theme-standard td, html[data-bs-theme="dark"] .fc-theme-standard th, html[data-bs-theme="dark"] .fc-theme-standard .fc-scrollgrid { border-color: var(--vp-border); }

/* ---- generic: anything a view names a card, panel, box, tile or section is a surface; -title/-name/-value is text,
   -label/-desc/-meta/-sub is muted. Broad on purpose — it is what makes a page nobody restyled by hand readable. ---- */
html[data-bs-theme="dark"] [class*="-card"]:not(.badge):not(.btn):not(.theme-card), html[data-bs-theme="dark"] [class*="-panel"], html[data-bs-theme="dark"] [class*="-box"]:not(.form-check):not(.checkbox),
html[data-bs-theme="dark"] [class*="-tile"], html[data-bs-theme="dark"] [class*="-section"]:not(.hero):not(.nav-section), html[data-bs-theme="dark"] [class*="-container"]:not(.container):not(.container-fluid):not(.admin-container):not(.main-container):not(.toast-container):not(.ai-fab):not(.nav-container),
html[data-bs-theme="dark"] [class*="-item"]:not(.nav-item):not(.list-group-item):not(.dropdown-item):not(.page-item):not(.breadcrumb-item):not(.carousel-item):not(.form-check):not(.accordion-item):not(.menu-item):not(.nav-practice-switch-item),
html[data-bs-theme="dark"] [class*="-wrapper"]:not(.nav-wrapper), html[data-bs-theme="dark"] [class*="-block"], html[data-bs-theme="dark"] [class*="-row"]:not(.row):not(tr):not(.filters-row):not(.stats-row):not(.form-row):not(.btn-row) {
    background-color: var(--vp-surface) !important; background-image: none !important; color: var(--vp-text); border-color: var(--vp-border) !important;
}
html[data-bs-theme="dark"] [class*="-title"]:not(.modal-title):not(.card-title):not(.page-title), html[data-bs-theme="dark"] [class*="-name"], html[data-bs-theme="dark"] [class*="-value"]:not(.range-value), html[data-bs-theme="dark"] [class*="-heading"],
html[data-bs-theme="dark"] [class*="-number"], html[data-bs-theme="dark"] [class*="-amount"], html[data-bs-theme="dark"] .modal-title, html[data-bs-theme="dark"] .card-title, html[data-bs-theme="dark"] .page-title { color: var(--vp-text) !important; }
html[data-bs-theme="dark"] [class*="-label"]:not(.form-check-label):not(.btn), html[data-bs-theme="dark"] [class*="-desc"], html[data-bs-theme="dark"] [class*="-meta"], html[data-bs-theme="dark"] [class*="-sub"]:not(.navbar-sub), html[data-bs-theme="dark"] [class*="-hint"], html[data-bs-theme="dark"] [class*="-help"] { color: var(--vp-muted) !important; }
html[data-bs-theme="dark"] [class*="-amount"].text-success, html[data-bs-theme="dark"] [class*="-value"].text-success { color: #4ade80 !important; }
html[data-bs-theme="dark"] [class*="-amount"].text-danger, html[data-bs-theme="dark"] [class*="-value"].text-danger { color: #f87171 !important; }
html[data-bs-theme="dark"] [class*="-amount"].text-warning, html[data-bs-theme="dark"] [class*="-value"].text-warning { color: #fbbf24 !important; }
/* page wrappers stay transparent so the body shows through (declared after the generic surfaces on purpose) */
html[data-bs-theme="dark"] .admin-container, html[data-bs-theme="dark"] .main-content, html[data-bs-theme="dark"] .content-container, html[data-bs-theme="dark"] .page-content,
html[data-bs-theme="dark"] .main-container, html[data-bs-theme="dark"] .page-wrapper, html[data-bs-theme="dark"] .content-wrapper, html[data-bs-theme="dark"] .wrapper { background-color: transparent !important; }
/* hero banners keep their gradients */
html[data-bs-theme="dark"] .hero, html[data-bs-theme="dark"] .page-hero, html[data-bs-theme="dark"] .hero-section, html[data-bs-theme="dark"] .welcome-banner, html[data-bs-theme="dark"] .gradient-header,
html[data-bs-theme="dark"] [class*="-hero"], html[data-bs-theme="dark"] [class*="hero-"] { background-image: initial !important; background-color: initial !important; color: #fff; }
/* tabs drawn as light bars */
html[data-bs-theme="dark"] .nav-tabs, html[data-bs-theme="dark"] .nav-pills, html[data-bs-theme="dark"] [class*="-tabs"], html[data-bs-theme="dark"] [class*="tab-bar"] { background-color: var(--vp-surface-2) !important; border-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] .nav-tabs .nav-link, html[data-bs-theme="dark"] [class*="-tabs"] a, html[data-bs-theme="dark"] [class*="-tabs"] button { color: var(--vp-muted); }
html[data-bs-theme="dark"] .nav-tabs .nav-link.active, html[data-bs-theme="dark"] [class*="-tabs"] .active { color: var(--vp-text) !important; }

/* ---- FullCalendar (the vendor sheet predates CSS variables on every build) and tab buttons drawn white-on-active ---- */
html[data-bs-theme="dark"] .fc, html[data-bs-theme="dark"] .fc .fc-view-harness, html[data-bs-theme="dark"] .fc .fc-scrollgrid, html[data-bs-theme="dark"] .fc td, html[data-bs-theme="dark"] .fc th,
html[data-bs-theme="dark"] .fc .fc-daygrid-day, html[data-bs-theme="dark"] .fc .fc-timegrid-slot, html[data-bs-theme="dark"] .fc .fc-list, html[data-bs-theme="dark"] .fc .fc-list-day-cushion,
html[data-bs-theme="dark"] #calendar, html[data-bs-theme="dark"] .calendar-wrapper, html[data-bs-theme="dark"] .calendar-filters, html[data-bs-theme="dark"] .calendar-toolbar { background-color: var(--vp-surface) !important; color: var(--vp-text) !important; border-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] .fc .fc-day-today, html[data-bs-theme="dark"] .fc .fc-daygrid-day.fc-day-today { background-color: rgba(44, 90, 160, .3) !important; }
html[data-bs-theme="dark"] .fc .fc-daygrid-day-number, html[data-bs-theme="dark"] .fc .fc-col-header-cell-cushion, html[data-bs-theme="dark"] .fc .fc-toolbar-title, html[data-bs-theme="dark"] .fc .fc-timegrid-slot-label-cushion,
html[data-bs-theme="dark"] .fc .fc-list-day-text, html[data-bs-theme="dark"] .fc .fc-list-day-side-text, html[data-bs-theme="dark"] .fc .fc-timegrid-axis-cushion { color: var(--vp-text) !important; }
html[data-bs-theme="dark"] .fc .fc-day-other .fc-daygrid-day-number { color: var(--vp-muted) !important; }
html[data-bs-theme="dark"] .fc .fc-button { background-color: var(--vp-surface-2) !important; border-color: var(--vp-border) !important; color: var(--vp-text) !important; }
html[data-bs-theme="dark"] .fc .fc-button-active, html[data-bs-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active { background-color: #2c5aa0 !important; color: #fff !important; }
html[data-bs-theme="dark"] .fc .fc-daygrid-event, html[data-bs-theme="dark"] .fc .fc-event-title, html[data-bs-theme="dark"] .fc .fc-list-event-title a { color: var(--vp-text) !important; }
html[data-bs-theme="dark"] .fc .fc-daygrid-event { background-color: rgba(255,255,255,.06) !important; }
html[data-bs-theme="dark"] .fc .fc-list-event:hover td { background-color: #263348 !important; }
html[data-bs-theme="dark"] [class*="tab"].active:not(.nav-link):not(.fc-button), html[data-bs-theme="dark"] .active[class*="toggle"]:not(.btn-check), html[data-bs-theme="dark"] [class*="view-"].active,
html[data-bs-theme="dark"] [class*="-tab"].active { background-color: #2c5aa0 !important; color: #fff !important; border-color: #2c5aa0 !important; }

/* ---- record headers that the views paint white (patient, client, profile …) and the scheduling view tabs ---- */
html[data-bs-theme="dark"] .patient-header, html[data-bs-theme="dark"] .client-header, html[data-bs-theme="dark"] .profile-header, html[data-bs-theme="dark"] .record-header,
html[data-bs-theme="dark"] .detail-header, html[data-bs-theme="dark"] .summary-header, html[data-bs-theme="dark"] .entity-header, html[data-bs-theme="dark"] .invoice-header,
html[data-bs-theme="dark"] .patient-header-content { background: var(--vp-surface) !important; color: var(--vp-text) !important; border-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] .patient-header h1, html[data-bs-theme="dark"] .patient-header h2, html[data-bs-theme="dark"] .patient-header .patient-name { color: var(--vp-text) !important; }
html[data-bs-theme="dark"] .stat-box { background: rgba(255, 255, 255, .05) !important; }
html[data-bs-theme="dark"] .view-tabs .nav-link, html[data-bs-theme="dark"] .view-tabs .btn, html[data-bs-theme="dark"] .view-tabs a { color: var(--vp-text) !important; background-color: var(--vp-surface-2) !important; border-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] .view-tabs .nav-link.active, html[data-bs-theme="dark"] .view-tabs .btn.active, html[data-bs-theme="dark"] .view-tabs a.active { background-color: #2c5aa0 !important; color: #fff !important; border-color: #2c5aa0 !important; }
html[data-bs-theme="dark"] .fc .fc-toolbar, html[data-bs-theme="dark"] .fc .fc-header-toolbar, html[data-bs-theme="dark"] .calendar-header { background-color: var(--vp-surface) !important; color: var(--vp-text); }
html[data-bs-theme="dark"] .ws-fact, html[data-bs-theme="dark"] .ws-strip > div { background: var(--vp-surface) !important; color: var(--vp-text) !important; }
html[data-bs-theme="dark"] .ws-fact .k { color: var(--vp-muted) !important; }
html[data-bs-theme="dark"] .pd-stat, html[data-bs-theme="dark"] .pd-card, html[data-bs-theme="dark"] .pd-panel, html[data-bs-theme="dark"] .pd-list { background-color: var(--vp-surface) !important; color: var(--vp-text) !important; border-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] .pd-stat .pd-label, html[data-bs-theme="dark"] .pd-stat small { color: var(--vp-muted) !important; }
html[data-bs-theme="dark"] .pd-stat :is(h1, h2, h3, h4, strong, b, .pd-num, .pd-value), html[data-bs-theme="dark"] .kpi-card :is(h1, h2, h3, h4, strong, b) { color: var(--vp-text) !important; }
/* Unified dashboard tiles (2026-10-26, owner: "numbers in the data tiles are still black"): the big figure is a plain
   .value div with #0F172A ink; the appointment rows and quick actions kept their white panels. */
html[data-bs-theme="dark"] .pd-stat .value, html[data-bs-theme="dark"] .stat-card .value { color: var(--vp-text) !important; }
html[data-bs-theme="dark"] .pd-stat-foot a { color: #93c5fd !important; }
html[data-bs-theme="dark"] .pd-tone-green .pd-stat-foot a { color: #6ee7b7 !important; }
html[data-bs-theme="dark"] .pd-tone-orange .pd-stat-foot a { color: #fcd34d !important; }
html[data-bs-theme="dark"] .pd-tone-purple .pd-stat-foot a { color: #c4b5fd !important; }
html[data-bs-theme="dark"] .pd-appt { background: var(--vp-surface-2) !important; color: var(--vp-text) !important; }
html[data-bs-theme="dark"] .pd-action { background: var(--vp-surface-2) !important; border-color: var(--vp-border) !important; color: #93c5fd !important; }
html[data-bs-theme="dark"] .pd-action:hover { background: var(--pd-primary, #2563eb) !important; color: #fff !important; }

/* Template hints + proposed grades (2026-10-28, SOAP editor) */
html[data-bs-theme="dark"] .ql-editor .vp-hint,
html[data-bs-theme="dark"] .vp-hint-legend .vp-hint-sample { color: var(--vp-muted); background: var(--vp-surface-2); border-color: var(--vp-border); }
html[data-bs-theme="dark"] .ql-editor .vp-hint:hover { background: #450a0a; border-color: #b91c1c; color: #fecaca; }
html[data-bs-theme="dark"] .vp-hint-legend { color: var(--vp-muted); }
html[data-bs-theme="dark"] .eg-proposed-bar { background: #3b2f0b; border-color: #b45309; color: #fde68a; }
html[data-bs-theme="dark"] .eg-accept-all { background: #b45309; border-color: #d97706; color: #fffbeb; }
html[data-bs-theme="dark"] .eg-clear-proposed { background: var(--vp-surface); border-color: #d97706; color: #fde68a; }
html[data-bs-theme="dark"] .eg-sel.eg-proposed { background: #3b2f0b; border-color: #d97706; color: #fde68a; }
html[data-bs-theme="dark"] td.eg-cell.eg-proposed { background: #2a2208; }

/* ---- Tailwind pages (2026-11-11, owner's iPhone: "in dark mode you cannot read any of the text in templates and some
   other areas of the SOAP note"). The Tailwind utility greys were never mapped, so a page built with them showed
   dark-grey headings and labels on the dark surface and light buttons with light text. A page opts in with
   body.vp-tw (the SOAP editor so far; eight other Tailwind views have the same greys and are NOT opted in yet —
   check each on screen before adding the class). */
html[data-bs-theme="dark"] body.vp-tw .text-gray-900, html[data-bs-theme="dark"] body.vp-tw .text-gray-800,
html[data-bs-theme="dark"] body.vp-tw .text-gray-700, html[data-bs-theme="dark"] body.vp-tw .text-black { color: var(--vp-text) !important; }
html[data-bs-theme="dark"] body.vp-tw .text-gray-600, html[data-bs-theme="dark"] body.vp-tw .text-gray-500,
html[data-bs-theme="dark"] body.vp-tw .text-gray-400 { color: var(--vp-muted) !important; }
html[data-bs-theme="dark"] body.vp-tw .bg-gray-50, html[data-bs-theme="dark"] body.vp-tw .bg-gray-100 { background-color: var(--vp-surface-2) !important; color: var(--vp-text); }
html[data-bs-theme="dark"] body.vp-tw .bg-gray-200 { background-color: #334155 !important; color: var(--vp-text) !important; }
html[data-bs-theme="dark"] body.vp-tw.bg-gray-50 { background: var(--bs-body-bg) !important; }
html[data-bs-theme="dark"] body.vp-tw .bg-green-100 { background-color: #064e3b !important; }
html[data-bs-theme="dark"] body.vp-tw .bg-yellow-100 { background-color: #713f12 !important; }
html[data-bs-theme="dark"] body.vp-tw .bg-red-100 { background-color: #7f1d1d !important; }
html[data-bs-theme="dark"] body.vp-tw .bg-blue-100 { background-color: #1e3a8a !important; }
html[data-bs-theme="dark"] body.vp-tw .border-gray-100, html[data-bs-theme="dark"] body.vp-tw .border-gray-200,
html[data-bs-theme="dark"] body.vp-tw .border-gray-300 { border-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] body.vp-tw .hover\:bg-gray-200:hover, html[data-bs-theme="dark"] body.vp-tw .hover\:bg-gray-100:hover { background-color: #475569 !important; }
/* tinted notices: a dark tint with a light version of the same hue */
html[data-bs-theme="dark"] body.vp-tw .bg-blue-50 { background-color: #172554 !important; }
html[data-bs-theme="dark"] body.vp-tw .text-blue-800, html[data-bs-theme="dark"] body.vp-tw .text-blue-700 { color: #bfdbfe !important; }
html[data-bs-theme="dark"] body.vp-tw .bg-indigo-50 { background-color: #1e1b4b !important; border-color: #4338ca !important; }
html[data-bs-theme="dark"] body.vp-tw .text-indigo-700, html[data-bs-theme="dark"] body.vp-tw .text-indigo-800 { color: #c7d2fe !important; }
html[data-bs-theme="dark"] body.vp-tw .bg-yellow-50, html[data-bs-theme="dark"] body.vp-tw .bg-amber-50 { background-color: #3b2f0b !important; }
html[data-bs-theme="dark"] body.vp-tw .text-yellow-700, html[data-bs-theme="dark"] body.vp-tw .text-yellow-800,
html[data-bs-theme="dark"] body.vp-tw .text-amber-700, html[data-bs-theme="dark"] body.vp-tw .text-amber-800 { color: #fde68a !important; }
html[data-bs-theme="dark"] body.vp-tw .bg-green-50 { background-color: #052e25 !important; }
html[data-bs-theme="dark"] body.vp-tw .text-green-700, html[data-bs-theme="dark"] body.vp-tw .text-green-800 { color: #6ee7b7 !important; }
html[data-bs-theme="dark"] body.vp-tw .bg-red-50 { background-color: #450a0a !important; }
html[data-bs-theme="dark"] body.vp-tw .text-red-700, html[data-bs-theme="dark"] body.vp-tw .text-red-800 { color: #fecaca !important; }
html[data-bs-theme="dark"] body.vp-tw .bg-purple-50 { background-color: #2e1065 !important; }
html[data-bs-theme="dark"] body.vp-tw .text-purple-700, html[data-bs-theme="dark"] body.vp-tw .text-purple-800 { color: #e9d5ff !important; }
/* form controls */
html[data-bs-theme="dark"] body.vp-tw input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-bs-theme="dark"] body.vp-tw select, html[data-bs-theme="dark"] body.vp-tw textarea { background-color: var(--vp-surface-2); color: var(--vp-text); border-color: var(--vp-border); }
html[data-bs-theme="dark"] body.vp-tw input::placeholder, html[data-bs-theme="dark"] body.vp-tw textarea::placeholder { color: #64748b; }
html[data-bs-theme="dark"] body.vp-tw input[type="date"] { color-scheme: dark; }

/* ---- SOAP editor's own classes (Views/vet/SOAPNotes.php) */
html[data-bs-theme="dark"] .soap-section { background: var(--vp-surface) !important; border-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] .soap-header { background: var(--vp-surface-2) !important; border-bottom-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] .soap-header h3 { color: var(--vp-text) !important; }
html[data-bs-theme="dark"] .template-btn { background: var(--vp-surface-2) !important; color: var(--vp-text) !important; border-color: #475569 !important; }
html[data-bs-theme="dark"] .template-btn:hover { background: #4f46e5 !important; color: #fff !important; border-color: #4f46e5 !important; }
html[data-bs-theme="dark"] .vital-sign-input, html[data-bs-theme="dark"] .vital-sign-input:focus { background: var(--vp-surface-2) !important; color: var(--vp-text) !important; border-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] .vital-sign-label { color: var(--vp-muted) !important; }
html[data-bs-theme="dark"] .diagnostic-tag { background: #172554 !important; color: #bfdbfe !important; }
html[data-bs-theme="dark"] .diagnostic-tag:hover { background: #1d4ed8 !important; color: #fff !important; }
html[data-bs-theme="dark"] .note-history { background: var(--vp-surface-2) !important; border-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] .note-item { border-bottom-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] .note-item:hover { background: var(--vp-surface) !important; }
html[data-bs-theme="dark"] details.vp-more { background: var(--vp-surface-2) !important; border-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] details.vp-more > summary { color: var(--vp-text) !important; }
html[data-bs-theme="dark"] .eg-assist-btn { background: #3b2f0b !important; color: #fde68a !important; border-color: #b45309 !important; }
html[data-bs-theme="dark"] .eg-assist-btn:hover { background: #4a3a0c !important; }
html[data-bs-theme="dark"] .eg-assist-msg { color: var(--vp-muted) !important; }
html[data-bs-theme="dark"] .eg-row-label { color: var(--vp-text); }
/* the rich-text editor (Quill "snow"): toolbar icons were near-black strokes on the dark surface */
html[data-bs-theme="dark"] .ql-toolbar.ql-snow, html[data-bs-theme="dark"] .ql-container.ql-snow { border-color: var(--vp-border) !important; }
html[data-bs-theme="dark"] .ql-toolbar.ql-snow { background: var(--vp-surface-2); }
html[data-bs-theme="dark"] .ql-snow .ql-stroke { stroke: #cbd5e1 !important; }
html[data-bs-theme="dark"] .ql-snow .ql-fill, html[data-bs-theme="dark"] .ql-snow .ql-stroke.ql-fill { fill: #cbd5e1 !important; }
html[data-bs-theme="dark"] .ql-snow .ql-picker, html[data-bs-theme="dark"] .ql-snow .ql-picker-label { color: #cbd5e1 !important; }
html[data-bs-theme="dark"] .ql-snow .ql-picker-options { background: var(--vp-surface) !important; border-color: var(--vp-border) !important; color: var(--vp-text); }
html[data-bs-theme="dark"] .ql-snow button:hover .ql-stroke, html[data-bs-theme="dark"] .ql-snow .ql-active .ql-stroke { stroke: #a5b4fc !important; }
html[data-bs-theme="dark"] .ql-editor { color: var(--vp-text); }
html[data-bs-theme="dark"] .ql-editor.ql-blank::before { color: #64748b !important; }

/* ---- The other Tailwind views (2026-11-11): client portal Horse Health, Medical Records, Prescription Request,
   Billing, Messages, Contact, Help Center, and the vet Settings page. All carry body.vp-tw; these are their own
   light panels and tinted notices (found by walking every visible piece of text and measuring it against what is
   behind it — Tools/qa/dark-contrast-audit.mjs). */
html[data-bs-theme="dark"] body.vp-tw .text-blue-600, html[data-bs-theme="dark"] body.vp-tw .hover\:text-blue-800:hover { color: #93c5fd !important; }
html[data-bs-theme="dark"] body.vp-tw .text-purple-600 { color: #d8b4fe !important; }
html[data-bs-theme="dark"] body.vp-tw .text-indigo-600 { color: #a5b4fc !important; }
html[data-bs-theme="dark"] body.vp-tw .text-green-600 { color: #6ee7b7 !important; }
html[data-bs-theme="dark"] body.vp-tw .text-red-600 { color: #fca5a5 !important; }
html[data-bs-theme="dark"] body.vp-tw .text-yellow-600, html[data-bs-theme="dark"] body.vp-tw .text-amber-600 { color: #fcd34d !important; }
html[data-bs-theme="dark"] body.vp-tw .border-blue-200 { border-color: #1e40af !important; }
html[data-bs-theme="dark"] body.vp-tw .border-purple-200 { border-color: #6b21a8 !important; }
html[data-bs-theme="dark"] body.vp-tw .border-green-200 { border-color: #047857 !important; }
html[data-bs-theme="dark"] body.vp-tw .border-yellow-200, html[data-bs-theme="dark"] body.vp-tw .border-yellow-400 { border-color: #b45309 !important; }
html[data-bs-theme="dark"] body.vp-tw .border-red-200 { border-color: #b91c1c !important; }
html[data-bs-theme="dark"] body.vp-tw [class*="bg-gradient-to-"][class*="-50"] { background-image: none !important; background-color: #1e1b4b !important; }
/* plain panels */
html[data-bs-theme="dark"] body.vp-tw .health-metric, html[data-bs-theme="dark"] body.vp-tw .spending-chart,
html[data-bs-theme="dark"] body.vp-tw .conversation-list, html[data-bs-theme="dark"] body.vp-tw .faq-answer,
html[data-bs-theme="dark"] body.vp-tw .settings-section {
    background: var(--vp-surface) !important; background-image: none !important; color: var(--vp-text); border-color: var(--vp-border) !important;
}
html[data-bs-theme="dark"] body.vp-tw .health-dashboard, html[data-bs-theme="dark"] body.vp-tw .chat-header,
html[data-bs-theme="dark"] body.vp-tw .chat-messages, html[data-bs-theme="dark"] body.vp-tw .contact-method,
html[data-bs-theme="dark"] body.vp-tw .faq-question, html[data-bs-theme="dark"] body.vp-tw .section-header {
    background: var(--vp-surface-2) !important; background-image: none !important; color: var(--vp-text); border-color: var(--vp-border) !important;
}
/* tinted notices keep their hue */
html[data-bs-theme="dark"] body.vp-tw .quick-insight, html[data-bs-theme="dark"] body.vp-tw .payment-security { background: #172554 !important; background-image: none !important; border-color: #1e40af !important; }
html[data-bs-theme="dark"] body.vp-tw .quick-insight a, html[data-bs-theme="dark"] body.vp-tw .payment-security a { color: #bae6fd !important; }
html[data-bs-theme="dark"] body.vp-tw .privacy-notice, html[data-bs-theme="dark"] body.vp-tw .hipaa-notice { background: #3b2f0b !important; background-image: none !important; border-color: #b45309 !important; }
html[data-bs-theme="dark"] body.vp-tw .account-summary { background: #052e25 !important; background-image: none !important; border-color: #047857 !important; }
/* the amber / emerald / orange utilities main.css adds (the bundled Tailwind has none) */
html[data-bs-theme="dark"] body.vp-tw .bg-amber-100 { background-color: #713f12 !important; }
html[data-bs-theme="dark"] body.vp-tw .text-amber-900, html[data-bs-theme="dark"] body.vp-tw .text-amber-500 { color: #fde68a !important; }
html[data-bs-theme="dark"] body.vp-tw .border-amber-300, html[data-bs-theme="dark"] body.vp-tw .border-amber-400 { border-color: #b45309 !important; }
html[data-bs-theme="dark"] body.vp-tw .bg-emerald-50 { background-color: #052e25 !important; }
html[data-bs-theme="dark"] body.vp-tw .text-emerald-800, html[data-bs-theme="dark"] body.vp-tw .text-emerald-900 { color: #6ee7b7 !important; }
html[data-bs-theme="dark"] body.vp-tw .border-emerald-200 { border-color: #047857 !important; }
html[data-bs-theme="dark"] body.vp-tw .bg-orange-50, html[data-bs-theme="dark"] body.vp-tw .bg-orange-100 { background-color: #431407 !important; }
html[data-bs-theme="dark"] body.vp-tw .hover\:bg-orange-100:hover { background-color: #5a1d0b !important; }
html[data-bs-theme="dark"] body.vp-tw .text-orange-500, html[data-bs-theme="dark"] body.vp-tw .text-orange-600, html[data-bs-theme="dark"] body.vp-tw .text-orange-800 { color: #fdba74 !important; }
html[data-bs-theme="dark"] body.vp-tw .border-orange-200 { border-color: #9a3412 !important; }