/* Theme choices share the same layouts and semantic clinical status colors.
   Classic intentionally has no overrides so the original navy/teal remains. */
html[data-theme="graphite"] {
    --clinic-navy: #252B33;
    --clinic-blue: #935923;
    --clinic-blue-hover: #75451A;
    --clinic-teal: #526373;
    --clinic-teal-hover: #394B5B;
    --clinic-bg: #EEF0F3;
    --clinic-surface: #FFFFFF;
    --clinic-card: var(--clinic-surface);
    --clinic-text: #303740;
    --clinic-border: #D7DCE2;
    --clinic-muted: #63707C;
    --clinic-soft: #F3EADF;
    --clinic-teal-soft: #E9EDF1;
    --clinic-focus: #935923;
    --clinic-navy-rgb: 37, 43, 51;
    --clinic-blue-rgb: 147, 89, 35;
    --clinic-blue-hover-rgb: 117, 69, 26;
    --clinic-teal-rgb: 82, 99, 115;
    --clinic-text-rgb: 48, 55, 64;
    --clinic-muted-rgb: 99, 112, 124;
    --clinic-bg-rgb: 238, 240, 243;
    --theme-sidebar: #252B33;
    --theme-sidebar-hover: #353E48;
    --theme-sidebar-active: #935923;
    --theme-sidebar-text: #E8EDF2;
    --theme-sidebar-muted: #B4BEC8;
    --theme-sidebar-end: #252B33;
    --theme-primary-line: #DDC3A7;
    --theme-secondary-line: #BFCAD4;
    --theme-secondary-ink: #394B5B;
    --theme-card-radius: 7px;
    --theme-control-radius: 6px;
    --theme-shadow: 0 1px 3px rgba(37, 43, 51, .045);
    --theme-shadow-hover: 0 5px 16px rgba(37, 43, 51, .09);
    --theme-header-bg: #F5F6F8;
    --theme-hero-bg: #252B33;
    --theme-hero-text: #F7F8FA;
    --theme-hero-muted: #D9E0E7;
    --theme-selection: #EBD1B6;
    --theme-login-bg: linear-gradient(135deg, #252B33 0%, #3D4651 58%, #6C503A 100%);
}

html[data-theme="forest"] {
    --clinic-navy: #183D2D;
    --clinic-blue: #286047;
    --clinic-blue-hover: #1C4B36;
    --clinic-teal: #39745A;
    --clinic-teal-hover: #285740;
    --clinic-bg: #F3F2EC;
    --clinic-surface: #FFFEFB;
    --clinic-card: var(--clinic-surface);
    --clinic-text: #303D35;
    --clinic-border: #DADFD4;
    --clinic-muted: #667367;
    --clinic-soft: #EAF0E6;
    --clinic-teal-soft: #E5F0E8;
    --clinic-focus: #39745A;
    --clinic-navy-rgb: 24, 61, 45;
    --clinic-blue-rgb: 40, 96, 71;
    --clinic-blue-hover-rgb: 28, 75, 54;
    --clinic-teal-rgb: 57, 116, 90;
    --clinic-text-rgb: 48, 61, 53;
    --clinic-muted-rgb: 102, 115, 103;
    --clinic-bg-rgb: 243, 242, 236;
    --theme-sidebar: #183D2D;
    --theme-sidebar-hover: #28523D;
    --theme-sidebar-active: #3F7458;
    --theme-sidebar-text: #F0F4ED;
    --theme-sidebar-muted: #C3D4C8;
    --theme-sidebar-end: #204B37;
    --theme-primary-line: #BECEBA;
    --theme-secondary-line: #BDDAC8;
    --theme-secondary-ink: #285740;
    --theme-card-radius: 18px;
    --theme-control-radius: 11px;
    --theme-shadow: 0 5px 22px rgba(24, 61, 45, .055);
    --theme-shadow-hover: 0 8px 28px rgba(24, 61, 45, .10);
    --theme-header-bg: #F0F2E9;
    --theme-hero-bg: linear-gradient(115deg, #183D2D, #2F644A);
    --theme-hero-text: #FFFEFB;
    --theme-hero-muted: #DAE6DA;
    --theme-selection: #D2E4D4;
    --theme-login-bg: radial-gradient(ellipse at 80% 15%, #466D4F 0%, #254D39 48%, #173527 100%);
}

html:is([data-theme="graphite"], [data-theme="forest"]) {
    color-scheme: light;
    --bs-primary: var(--clinic-blue);
    --bs-primary-rgb: var(--clinic-blue-rgb);
    --bs-primary-text-emphasis: var(--clinic-navy);
    --bs-primary-bg-subtle: var(--clinic-soft);
    --bs-primary-border-subtle: var(--theme-primary-line);
    --bs-secondary: var(--clinic-muted);
    --bs-secondary-rgb: var(--clinic-muted-rgb);
    --bs-info: var(--clinic-teal);
    --bs-info-rgb: var(--clinic-teal-rgb);
    --bs-info-text-emphasis: var(--theme-secondary-ink);
    --bs-info-bg-subtle: var(--clinic-teal-soft);
    --bs-info-border-subtle: var(--theme-secondary-line);
    --bs-body-color: var(--clinic-text);
    --bs-body-color-rgb: var(--clinic-text-rgb);
    --bs-body-bg: var(--clinic-bg);
    --bs-body-bg-rgb: var(--clinic-bg-rgb);
    --bs-border-color: var(--clinic-border);
    --bs-secondary-color: var(--clinic-muted);
    --bs-tertiary-bg: var(--theme-header-bg);
    --bs-link-color: var(--clinic-blue);
    --bs-link-color-rgb: var(--clinic-blue-rgb);
    --bs-link-hover-color: var(--clinic-blue-hover);
    --bs-link-hover-color-rgb: var(--clinic-blue-hover-rgb);
    --bs-focus-ring-color: rgba(var(--clinic-teal-rgb), .22);
    --bs-border-radius: var(--theme-control-radius);
    --bs-border-radius-lg: var(--theme-card-radius);
    --cw-ink: var(--clinic-text);
    --cw-accent: var(--clinic-teal);
    --cw-line: var(--clinic-border);
    --cw-muted: var(--clinic-muted);
    --cw-surface: var(--clinic-surface);
    --cw-bg: var(--clinic-bg);
    --ps-ink: var(--clinic-navy);
    --ps-accent: var(--clinic-teal);
    --ps-surface: var(--clinic-surface);
    --ps-border: var(--clinic-border);
    --pa-navy: var(--clinic-navy);
    --pa-navy-deep: var(--theme-sidebar);
    --pa-blue: var(--clinic-blue);
    --pa-teal: var(--clinic-teal);
    --pa-bg: var(--clinic-bg);
    --pa-border: var(--clinic-border);
    --pa-text: var(--clinic-text);
    --pa-muted: var(--clinic-muted);
}

@media screen {
    html:is([data-theme="graphite"], [data-theme="forest"]) body {
        color: var(--clinic-text);
        background-color: var(--clinic-bg);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) ::selection {
        color: var(--clinic-navy);
        background: var(--theme-selection);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) #sidebar,
    html:is([data-theme="graphite"], [data-theme="forest"]) .pa-nav {
        background: linear-gradient(180deg, var(--theme-sidebar), var(--theme-sidebar-end));
        box-shadow: none;
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) #sidebar .sidebar-header {
        background: transparent;
        border-bottom-color: rgba(255, 255, 255, .13);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) #sidebar ul li a,
    html:is([data-theme="graphite"], [data-theme="forest"]) .pa-nav > a {
        color: var(--theme-sidebar-text);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) #sidebar ul p,
    html:is([data-theme="graphite"], [data-theme="forest"]) #sidebar .sidebar-separator,
    html:is([data-theme="graphite"], [data-theme="forest"]) .pa-nav-account {
        color: var(--theme-sidebar-muted);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) #sidebar ul li a:hover,
    html:is([data-theme="graphite"], [data-theme="forest"]) .pa-nav > a:hover {
        background: var(--theme-sidebar-hover);
        color: #FFF;
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) #sidebar .active-link,
    html:is([data-theme="graphite"], [data-theme="forest"]) .pa-nav > a.is-active {
        background: var(--theme-sidebar-active) !important;
        border-radius: var(--theme-control-radius);
        box-shadow: none;
        color: #FFF;
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .clinic-context {
        border-color: var(--clinic-border);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.card, .cw-card, .pa-card, .pa-stat, .patient-card, .patient-search-panel, .patient-directory, .patient-registration-section, .dental-panel, .schedule-card, .schedule-summary, .schedule-mode-panel, .ps-voice-panel, .task-card, .login-card, .modal-content) {
        background-color: var(--clinic-surface);
        border-color: var(--clinic-border);
        border-radius: var(--theme-card-radius);
        box-shadow: var(--theme-shadow);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.card.shadow-sm, .card.shadow, .patient-registration-section, .ps-workspace .card, .ps-voice-panel) {
        box-shadow: var(--theme-shadow) !important;
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .clinic-dashboard .dashboard-card {
        border: 1px solid var(--clinic-border);
        border-radius: var(--theme-card-radius);
        box-shadow: var(--theme-shadow);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.cw .cw-card, .ps-workspace .card) {
        background: var(--clinic-surface);
        border-radius: var(--theme-card-radius);
        box-shadow: var(--theme-shadow);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.cw .cw-hero, .ps-workspace .ps-hero, .clinic-dashboard .metric-purple) {
        background: var(--theme-hero-bg);
        color: var(--theme-hero-text);
        border-radius: var(--theme-card-radius);
        border-color: var(--clinic-navy);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.cw-hero, .ps-hero, .metric-purple) :is(h1, h2, h3, h4, h5, h6) {
        color: inherit;
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.cw-hero, .ps-hero) p,
    html:is([data-theme="graphite"], [data-theme="forest"]) .clinic-dashboard .metric-purple h6 {
        color: var(--theme-hero-muted);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .clinic-dashboard .quick-action {
        background: var(--clinic-surface);
        border-radius: var(--theme-card-radius);
        box-shadow: var(--theme-shadow);
        border-inline-start: 4px solid var(--action-accent);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .clinic-dashboard .quick-action:hover {
        box-shadow: var(--theme-shadow-hover);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .clinic-dashboard :is(.quick-action-icon, .metric-icon) {
        border-radius: var(--theme-control-radius);
    }
    html[data-theme="forest"] .clinic-dashboard .quick-action {
        background: linear-gradient(105deg, var(--clinic-surface), var(--action-tint));
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.card-header.bg-white, .card-header.bg-light, .pa-table th, .clinic-dashboard .dashboard-table th, .cw th, .ps-workspace .table th) {
        background: var(--theme-header-bg) !important;
        border-color: var(--clinic-border);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.pa-table tbody tr:hover, .patient-directory tbody tr:hover td, .table-hover tbody tr:hover) {
        background-color: var(--theme-header-bg);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.table, .pa-table) {
        --bs-table-striped-bg: rgba(var(--clinic-navy-rgb), .025);
        --bs-table-hover-bg: rgba(var(--clinic-navy-rgb), .04);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.form-control, .form-select, .cw input:not([type="checkbox"]), .cw select, .cw textarea, .pa-field input, .pa-field select, .pa-field textarea) {
        background-color: var(--clinic-surface);
        border-color: var(--clinic-border);
        color: var(--clinic-text);
        border-radius: var(--theme-control-radius);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.form-control, .form-select, .pa-field input, .pa-field select, .pa-field textarea):focus {
        border-color: var(--clinic-focus);
        box-shadow: 0 0 0 .2rem rgba(var(--clinic-teal-rgb), .16);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.cw input, .cw select, .cw textarea):focus {
        outline-color: rgba(var(--clinic-blue-rgb), .23);
        border-color: var(--clinic-blue);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .form-check-input:focus {
        box-shadow: 0 0 0 .2rem rgba(var(--clinic-teal-rgb), .16);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.btn:not(.rounded-pill), .cw-btn, .pa-button, .patient-registry-add, .patient-search-submit, .patient-tool, .patient-procedure, .patient-profile, .schedule-book-button, .schedule-print-button) {
        border-radius: var(--theme-control-radius);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.btn-primary, .ps-primary):hover {
        box-shadow: none;
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.cw .cw-btn.secondary, .cw-tabs a:not(.active), .ps-tabs a:not(.active), .pa-button-muted) {
        background: var(--clinic-surface);
        border-color: var(--clinic-border);
        color: var(--clinic-blue);
        border-radius: var(--theme-control-radius);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.cw .cw-btn.secondary:hover, .pa-button-muted:hover) {
        background: var(--clinic-soft);
        color: var(--clinic-blue-hover);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.pa-topbar, .pa-footer) {
        background: var(--clinic-surface);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.pa-inline-note, .pa-invoice > summary, .pa-field input[readonly]) {
        background: var(--theme-header-bg);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .pa-invoice {
        border-radius: var(--theme-card-radius);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.pa-button, .pa-nav > a, .pa-field input, .pa-field select, .pa-field textarea):focus-visible {
        outline-color: var(--clinic-focus);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .appointment-schedule .fc {
        --fc-button-bg-color: var(--clinic-blue);
        --fc-button-border-color: var(--clinic-blue);
        --fc-button-hover-bg-color: var(--clinic-blue-hover);
        --fc-button-hover-border-color: var(--clinic-blue-hover);
        --fc-button-active-bg-color: var(--clinic-teal);
        --fc-button-active-border-color: var(--clinic-teal);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .appointment-schedule .calendar-card {
        border-radius: var(--theme-card-radius);
        box-shadow: var(--theme-shadow);
        background: var(--clinic-surface);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .appointment-schedule .fc-daygrid-day-bg .fc-highlight {
        background: rgba(var(--clinic-teal-rgb), .08);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.queue-patient-card, .pa-table-wrap) {
        border-radius: var(--theme-control-radius);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .appointment-schedule :is(.fc-scrollgrid, .fc-button-primary, .calendar-day-count, .schedule-mode-switch, .queue-date-controls) {
        border-radius: var(--theme-control-radius);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.day-appointments-dialog, dialog.patient-modal, .patient-modal .modal-content) {
        background: var(--clinic-surface);
        border-radius: var(--theme-card-radius);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .tooth-btn:not(.status-danger):not(.status-warning):not(.status-success):not(.status-primary) {
        background: var(--clinic-surface);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .tooth-btn.status-primary {
        color: var(--clinic-blue);
        background: var(--clinic-soft);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.tooth-btn:hover, .tooth-btn.selected) {
        box-shadow: 0 0 0 2px rgba(var(--clinic-teal-rgb), .16);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.metadata-pill, .task-card) {
        background: var(--clinic-surface);
        border-color: var(--clinic-border);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) body:has(> .monitor-container) {
        background: var(--theme-sidebar);
        color: var(--theme-hero-text);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .monitor-container :is(.header-card, .next-card, .queue-list-card) {
        border-radius: var(--theme-card-radius);
        box-shadow: var(--theme-shadow);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .monitor-container .queue-item {
        border-radius: var(--theme-control-radius);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) body:has(> .container .login-header),
    html:is([data-theme="graphite"], [data-theme="forest"]) body:has(> .container .logout-card) {
        background: var(--theme-login-bg);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .login-header {
        background: var(--clinic-navy);
        border-bottom-color: var(--clinic-blue);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.login-card, .logout-card) {
        background-color: var(--clinic-surface);
        border-radius: var(--theme-card-radius);
        box-shadow: 0 20px 55px rgba(var(--clinic-navy-rgb), .20);
    }
    html:is([data-theme="graphite"], [data-theme="forest"]) .pin-input:focus {
        box-shadow: 0 0 0 3px rgba(var(--clinic-blue-rgb), .16);
    }
    /* Keep brand images and signature canvases on true white. */
    html:is([data-theme="graphite"], [data-theme="forest"]) :is(.tabeeb-sidebar-brand, .tabeeb-portal-logo, .login-header img, .pa-brand img, .signature-pad, .ps-signature) {
        background-color: #FFF;
    }
}

@media print {
    html:is([data-theme="graphite"], [data-theme="forest"]) {
        --clinic-bg: #FFF;
        --clinic-surface: #FFF;
        --clinic-card: #FFF;
        --clinic-text: #000;
        --clinic-navy: #000;
        --clinic-soft: #FFF;
        --clinic-teal-soft: #FFF;
        --pa-bg: #FFF;
        --pa-text: #000;
    }
}