/*
 * Shared dark theme for public, booking, staff, and admin surfaces.
 * Core palette sampled from the approved visual system: navy, ocean blue,
 * slate blue, and warm sand.
 */
html[data-bs-theme="dark"] {
    --clinic-navy: #1a3d51;
    --clinic-ocean: #234a67;
    --clinic-slate: #44667f;
    --clinic-sand: #d2c0b2;
    --clinic-sand-soft: #eaded5;
    --clinic-white: #f8f4f1;

    --home-blue: var(--clinic-sand);
    --home-blue-deep: var(--clinic-sand-soft);
    --home-sky: var(--clinic-slate);
    --home-ink: var(--clinic-white);
    --home-muted: var(--clinic-sand);
    --home-border: var(--clinic-slate);
    --home-glass: rgba(35, 74, 103, 0.9);
    --home-glass-strong: var(--clinic-ocean);

    --booking-blue: var(--clinic-sand);
    --booking-blue-deep: var(--clinic-sand-soft);
    --booking-cyan: var(--clinic-slate);
    --booking-ink: var(--clinic-white);
    --booking-muted: var(--clinic-sand);
    --booking-canvas: var(--clinic-navy);
    --booking-surface: rgba(35, 74, 103, 0.92);
    --booking-surface-strong: var(--clinic-ocean);
    --booking-border: var(--clinic-slate);
    --booking-shadow: 0 28px 90px rgba(8, 30, 43, 0.42);

    color-scheme: dark;
    --bs-body-bg: #1a3d51;
    --bs-body-bg-rgb: 26, 61, 81;
    --bs-body-color: #f8f4f1;
    --bs-body-color-rgb: 248, 244, 241;
    --bs-emphasis-color: #f8f4f1;
    --bs-secondary-bg: #234a67;
    --bs-tertiary-bg: #234a67;
    --bs-tertiary-bg-rgb: 35, 74, 103;
    --bs-secondary-color: #d2c0b2;
    --bs-border-color: #44667f;
    --bs-primary: #d2c0b2;
    --bs-primary-rgb: 210, 192, 178;
    --bs-primary-text-emphasis: #eaded5;
    --bs-primary-bg-subtle: #234a67;
    --bs-primary-border-subtle: #44667f;
    --bs-link-color: #eaded5;
    --bs-link-hover-color: #f8f4f1;
}

html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] body.admin-home {
    --bg: #1a3d51;
    --surface: #234a67;
    --surface-soft: #2e5672;
    --ink: #f8f4f1;
    --ink-soft: #eaded5;
    --muted: #d2c0b2;
    --border: #44667f;
    --blue: #d2c0b2;
    --blue-deep: #eaded5;
    --teal: #9abbb5;
    --green: #9bc9ab;
    --orange: #e2bd83;
    --red: #efa39d;
    --shadow: 0 16px 36px rgba(8, 30, 43, 0.3);
    background-color: var(--bg);
    color: var(--ink);
}

/* Bootstrap and shared component roles. */
html[data-bs-theme="dark"] :is(.card, .modal-content, .swal2-popup, .offcanvas, .dropdown-menu) {
    background-color: var(--surface, #234a67);
    border-color: var(--border, #44667f);
    color: var(--ink, #f8f4f1);
}

html[data-bs-theme="dark"] :is(.text-muted, .text-secondary) {
    color: var(--muted, #d2c0b2) !important;
}

html[data-bs-theme="dark"] :is(.bg-light, .bg-white, .bg-body-tertiary) {
    background-color: var(--surface, #234a67) !important;
}

html[data-bs-theme="dark"] :is(.form-control, .form-select, .input-group-text) {
    background-color: var(--clinic-navy);
    border-color: var(--clinic-slate);
    color: var(--clinic-white);
}

html[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--clinic-sand);
    opacity: 0.78;
}

html[data-bs-theme="dark"] :is(.form-control, .form-select):focus {
    border-color: var(--clinic-sand);
    box-shadow: 0 0 0 0.22rem rgba(210, 192, 178, 0.2);
}

html[data-bs-theme="dark"] .text-dark {
    color: var(--clinic-white) !important;
}

html[data-bs-theme="dark"] .bg-warning.text-dark {
    color: var(--clinic-navy) !important;
}

html[data-bs-theme="dark"] .text-primary {
    color: var(--clinic-sand-soft) !important;
}

html[data-bs-theme="dark"] .btn-primary {
    background: var(--clinic-sand);
    border-color: var(--clinic-sand);
    color: var(--clinic-navy);
}

html[data-bs-theme="dark"] .btn-primary:hover,
html[data-bs-theme="dark"] .btn-primary:focus-visible,
html[data-bs-theme="dark"] .btn-primary:active {
    background: var(--clinic-sand-soft);
    border-color: var(--clinic-sand-soft);
    color: var(--clinic-navy);
}

html[data-bs-theme="dark"] .btn-outline-primary {
    border-color: var(--clinic-sand);
    color: var(--clinic-sand-soft);
}

html[data-bs-theme="dark"] .btn-outline-primary:hover,
html[data-bs-theme="dark"] .btn-outline-primary:focus-visible {
    background: var(--clinic-sand);
    border-color: var(--clinic-sand);
    color: var(--clinic-navy);
}

html[data-bs-theme="dark"] :is(a, button, summary, input, select, textarea):focus-visible {
    outline-color: var(--clinic-sand);
}

/* Public navigation. */
html[data-bs-theme="dark"] .navbar-custom {
    background: rgba(26, 61, 81, 0.96) !important;
    border-color: var(--clinic-slate);
}

html[data-bs-theme="dark"] .navbar-custom .container,
html[data-bs-theme="dark"] .navbar-custom.scrolled .container,
html[data-bs-theme="dark"] .offcanvas-menu {
    background: rgba(26, 61, 81, 0.94) !important;
    border-color: var(--clinic-slate) !important;
    box-shadow: 0 18px 50px rgba(8, 30, 43, 0.3);
}

html[data-bs-theme="dark"] :is(.navbar-brand, .brand-name, .brand-subtitle, .navbar-custom.scrolled .brand-name, .navbar-custom.scrolled .brand-subtitle) {
    color: var(--clinic-sand) !important;
}

html[data-bs-theme="dark"] :is(.nav-desktop a, .desktop-theme-toggle, .menu-item, .menu-toggle) {
    color: var(--clinic-sand-soft) !important;
}

html[data-bs-theme="dark"] :is(.nav-desktop a:hover, .nav-desktop a:focus-visible, .desktop-theme-toggle:hover, .desktop-theme-toggle:focus-visible, .nav-desktop a.active, .menu-item:hover, .menu-item:focus-visible, .menu-item.active) {
    background: var(--clinic-ocean);
    border-color: var(--clinic-slate);
    color: var(--clinic-white) !important;
}

html[data-bs-theme="dark"] .nav-desktop .nav-login,
html[data-bs-theme="dark"] .btn-menu {
    background: var(--clinic-sand) !important;
    border-color: var(--clinic-sand) !important;
    box-shadow: 0 12px 28px rgba(8, 30, 43, 0.28);
    color: var(--clinic-navy) !important;
}

html[data-bs-theme="dark"] .nav-desktop .nav-login:hover,
html[data-bs-theme="dark"] .nav-desktop .nav-login:focus-visible,
html[data-bs-theme="dark"] .btn-menu:hover,
html[data-bs-theme="dark"] .btn-menu:focus-visible {
    background: var(--clinic-sand-soft) !important;
    color: var(--clinic-navy) !important;
}

html[data-bs-theme="dark"] .menu-item i {
    background: var(--clinic-ocean);
    color: var(--clinic-sand);
}

html[data-bs-theme="dark"] :is(.menu-item:hover, .menu-item:focus-visible, .menu-item.active) i {
    background: var(--clinic-sand);
    color: var(--clinic-navy);
}

/* Public home page. */
html[data-bs-theme="dark"] body[data-page="index"] {
    background:
        radial-gradient(circle at 18% 4%, rgba(68, 102, 127, 0.42), transparent 30rem),
        linear-gradient(180deg, var(--clinic-navy) 0%, var(--clinic-ocean) 52%, var(--clinic-navy) 100%);
    color: var(--clinic-white);
}

html[data-bs-theme="dark"] body[data-page="index"] .home-hero {
    background-color: var(--clinic-navy) !important;
    background-image:
        linear-gradient(90deg, rgba(26, 61, 81, 0.94) 0%, rgba(26, 61, 81, 0.72) 44%, rgba(35, 74, 103, 0.24) 100%),
        url("../img/home-hero-clinic-front.jpg") !important;
}

@media (min-width: 992px) {
    html[data-bs-theme="dark"] body[data-page="index"] .home-hero {
        background-position: center right;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

html[data-bs-theme="dark"] .home-hero::after {
    background: linear-gradient(180deg, transparent 0%, var(--clinic-navy) 100%);
}

html[data-bs-theme="dark"] :is(.hero-kicker, .booking-kicker, .booking-back-link, .booking-steps span, .booking-highlights strong) {
    color: var(--clinic-sand);
}

html[data-bs-theme="dark"] .hero-system-copy {
    color: var(--clinic-sand-soft);
}

html[data-bs-theme="dark"] :is(.hero-glass, .glass-panel, .info-card, .service-card, .map-frame, .track-panel, .contact-card, .booking-assist-card, .booking-highlights div) {
    background: rgba(35, 74, 103, 0.92) !important;
    border-color: var(--clinic-slate) !important;
    box-shadow: 0 24px 70px rgba(8, 30, 43, 0.3);
    color: var(--clinic-white);
}

html[data-bs-theme="dark"] :is(.hero-glass h1, .section-heading h2, .track-panel h2, .service-card .card-title, .contact-card h3, .info-card h3) {
    color: var(--clinic-white);
}

html[data-bs-theme="dark"] :is(.section-heading .lead, .service-card .card-text, .contact-card p) {
    color: var(--clinic-sand);
}

html[data-bs-theme="dark"] .hero-actions .btn-primary,
html[data-bs-theme="dark"] .track-panel .btn-primary {
    box-shadow: 0 14px 32px rgba(8, 30, 43, 0.34);
}

html[data-bs-theme="dark"] .hero-actions .btn-outline-primary {
    background: rgba(210, 192, 178, 0.14);
    border-color: rgba(210, 192, 178, 0.64);
    color: var(--clinic-white);
}

html[data-bs-theme="dark"] .hero-actions .btn-outline-primary:hover,
html[data-bs-theme="dark"] .hero-actions .btn-outline-primary:focus-visible {
    background: var(--clinic-sand);
    color: var(--clinic-navy);
}

html[data-bs-theme="dark"] #trackTicketForm .form-control {
    background: var(--clinic-navy);
    border-color: var(--clinic-slate);
    color: var(--clinic-white);
}

html[data-bs-theme="dark"] .contact-action {
    background: var(--clinic-navy);
    border-color: var(--clinic-slate);
    color: var(--clinic-sand-soft);
}

html[data-bs-theme="dark"] .contact-action:hover,
html[data-bs-theme="dark"] .contact-action:focus-visible {
    background: var(--clinic-sand);
    border-color: var(--clinic-sand);
    color: var(--clinic-navy);
}

html[data-bs-theme="dark"] body[data-page="index"] .homepage-section {
    background: transparent !important;
}

html[data-bs-theme="dark"] body[data-page="index"] #calendar {
    background: var(--clinic-ocean) !important;
    border-color: var(--clinic-slate) !important;
    color: var(--clinic-white);
}

html[data-bs-theme="dark"] body[data-page="index"] #calendar .fc-header-toolbar {
    background: var(--clinic-navy) !important;
    border-bottom-color: var(--clinic-slate) !important;
}

html[data-bs-theme="dark"] body[data-page="index"] #calendar :is(.fc-toolbar-title, .fc-daygrid-day-number, .fc-col-header-cell-cushion) {
    color: var(--clinic-white) !important;
    text-shadow: none !important;
}

html[data-bs-theme="dark"] body[data-page="index"] #calendar .fc-col-header {
    background: var(--clinic-slate) !important;
}

html[data-bs-theme="dark"] body[data-page="index"] #calendar .fc-col-header-cell,
html[data-bs-theme="dark"] body[data-page="index"] #calendar .fc-col-header-cell.fc-day-sun,
html[data-bs-theme="dark"] body[data-page="index"] #calendar .fc-col-header-cell.fc-day-sat {
    background: var(--clinic-slate) !important;
    border-color: rgba(248, 244, 241, 0.16) !important;
    color: var(--clinic-white) !important;
}

html[data-bs-theme="dark"] body[data-page="index"] #calendar .fc-daygrid-day {
    background: var(--clinic-navy) !important;
    border-color: var(--clinic-slate) !important;
    color: var(--clinic-white);
}

html[data-bs-theme="dark"] body[data-page="index"] #calendar .fc-day-today {
    background: rgba(210, 192, 178, 0.18) !important;
}

html[data-bs-theme="dark"] body[data-page="index"] #calendar .fc-button {
    background: var(--clinic-navy) !important;
    border-color: var(--clinic-slate) !important;
    color: var(--clinic-sand-soft) !important;
    opacity: 1 !important;
}

html[data-bs-theme="dark"] body[data-page="index"] #calendar .fc-button:hover,
html[data-bs-theme="dark"] body[data-page="index"] #calendar .fc-button:focus-visible,
html[data-bs-theme="dark"] body[data-page="index"] #calendar .fc-button-active {
    background: var(--clinic-sand) !important;
    border-color: var(--clinic-sand) !important;
    color: var(--clinic-navy) !important;
}

html[data-bs-theme="dark"] body[data-page="index"] #calendar .fc-event {
    background: var(--clinic-sand);
    border-color: var(--clinic-sand-soft);
    color: var(--clinic-navy) !important;
}

html[data-bs-theme="dark"] body[data-page="index"] #calendar .fc-event * {
    color: var(--clinic-navy) !important;
}

html[data-bs-theme="dark"] body[data-page="index"] #calendar .fc-daygrid-event-dot {
    border-color: var(--clinic-navy) !important;
}

html[data-bs-theme="dark"] body[data-page="index"] .mobile-scroll-hint {
    background: var(--clinic-ocean) !important;
    border-color: var(--clinic-slate) !important;
    box-shadow: 0 10px 26px rgba(8, 30, 43, 0.24) !important;
    color: var(--clinic-sand-soft) !important;
}

html[data-bs-theme="dark"] .site-footer {
    background: var(--clinic-navy);
    border-top: 1px solid var(--clinic-slate);
    color: var(--clinic-white);
}

html[data-bs-theme="dark"] :is(.footer-brand span, .footer-copy) {
    color: var(--clinic-sand);
}

html[data-bs-theme="dark"] .footer-links a {
    border-color: var(--clinic-slate);
    color: var(--clinic-sand-soft);
}

html[data-bs-theme="dark"] .footer-links a:hover,
html[data-bs-theme="dark"] .footer-links a:focus-visible {
    background: var(--clinic-ocean);
    border-color: var(--clinic-sand);
}

/* Appointment booking page. */
html[data-bs-theme="dark"] body.booking-hero {
    background:
        radial-gradient(circle at 16% 10%, rgba(68, 102, 127, 0.48), transparent 21rem),
        radial-gradient(circle at 88% 4%, rgba(210, 192, 178, 0.14), transparent 18rem),
        linear-gradient(180deg, var(--clinic-navy) 0%, var(--clinic-ocean) 58%, var(--clinic-navy) 100%);
    color: var(--clinic-white);
}

html[data-bs-theme="dark"] body.booking-hero::before {
    background:
        linear-gradient(120deg, rgba(210, 192, 178, 0.1), transparent 34%),
        linear-gradient(300deg, rgba(68, 102, 127, 0.2), transparent 42%);
}

html[data-bs-theme="dark"] .booking-intro-card::before {
    background:
        linear-gradient(120deg, rgba(210, 192, 178, 0.13), transparent 45%),
        repeating-linear-gradient(135deg, rgba(210, 192, 178, 0.07) 0 1px, transparent 1px 13px);
}

html[data-bs-theme="dark"] .booking-hero :is(.form-control, .form-select) {
    background-color: var(--clinic-navy) !important;
    border-color: var(--clinic-slate) !important;
    color: var(--clinic-white) !important;
}

html[data-bs-theme="dark"] .booking-hero :is(.form-control, .form-select):hover {
    border-color: var(--clinic-sand) !important;
}

html[data-bs-theme="dark"] .booking-hero :is(.form-control, .form-select):focus {
    background-color: var(--clinic-navy) !important;
    border-color: var(--clinic-sand) !important;
    box-shadow: 0 0 0 0.24rem rgba(210, 192, 178, 0.2) !important;
}

html[data-bs-theme="dark"] .booking-hero .form-panel:focus-within {
    border-color: var(--clinic-sand);
    box-shadow: 0 24px 74px rgba(8, 30, 43, 0.34);
}

html[data-bs-theme="dark"] .booking-hero .form-panel legend span {
    background: var(--clinic-sand);
    color: var(--clinic-navy);
}

html[data-bs-theme="dark"] .booking-hero .btn-primary {
    background: linear-gradient(135deg, var(--clinic-sand), var(--clinic-sand-soft)) !important;
    box-shadow: 0 18px 42px rgba(8, 30, 43, 0.32);
    color: var(--clinic-navy) !important;
}

html[data-bs-theme="dark"] .booking-hero .btn-outline-secondary {
    border-color: var(--clinic-slate);
    color: var(--clinic-sand-soft);
}

/* Admin shell and workspaces. */
html[data-bs-theme="dark"] .admin-home :is(.clinic-sidebar, .clinic-topbar, .mobile-admin-nav) {
    background: rgba(26, 61, 81, 0.97);
    border-color: var(--clinic-slate);
}

html[data-bs-theme="dark"] .admin-home :is(.clinic-brand, .clinic-sidebar-footer) {
    border-color: var(--clinic-slate);
}

html[data-bs-theme="dark"] .admin-home :is(.clinic-theme-button, .sidebar-toggle, .mobile-menu-button, .image-stat-card, .dashboard-search) {
    background: var(--surface-soft);
    border-color: var(--clinic-slate);
    color: var(--clinic-white);
}

html[data-bs-theme="dark"] .admin-home :is(.clinic-nav-link.is-active, .clinic-nav-link:hover, .clinic-nav-link:focus-visible, .clinic-subnav-link.is-active, .clinic-subnav-link:hover, .clinic-subnav-link:focus-visible) {
    background: var(--clinic-ocean);
    color: var(--clinic-sand-soft);
}

html[data-bs-theme="dark"] .admin-home :is(.clinic-avatar, .clinic-account) {
    background: var(--clinic-ocean);
    color: var(--clinic-sand-soft);
}

html[data-bs-theme="dark"] .admin-home :is(.ops-button.primary, .page-item.active .page-link, .swal2-confirm) {
    background: var(--clinic-sand) !important;
    border-color: var(--clinic-sand) !important;
    color: var(--clinic-navy) !important;
}

html[data-bs-theme="dark"] .admin-home .ops-button.ghost {
    background: var(--clinic-ocean);
    border-color: var(--clinic-slate);
    color: var(--clinic-sand-soft);
}

html[data-bs-theme="dark"] .admin-home :is(.metric-icon, .appointment-icon, .quick-link-icon) {
    background: var(--clinic-navy);
    color: var(--clinic-sand-soft);
}

html[data-bs-theme="dark"] .admin-home :is(.filter-control, .appointment-item) {
    background: var(--clinic-ocean);
    border-color: var(--clinic-slate);
    color: var(--clinic-white);
}

html[data-bs-theme="dark"] .admin-home .risk-meter {
    background: var(--clinic-ocean);
    border-color: color-mix(in srgb, var(--red) 50%, var(--clinic-slate));
}

html[data-bs-theme="dark"] .admin-workspace .badge.bg-primary,
html[data-bs-theme="dark"] .admin-workspace .badge.bg-info {
    background: var(--clinic-slate) !important;
    color: var(--clinic-white);
}

html[data-bs-theme="dark"] .admin-workspace .badge.bg-success {
    background: #2d5a50 !important;
    color: #d8eee0;
}

html[data-bs-theme="dark"] .admin-workspace .badge.bg-warning {
    background: #6a573f !important;
    color: #fff0d8;
}

html[data-bs-theme="dark"] .admin-workspace .badge.bg-danger {
    background: #714a4e !important;
    color: #ffe1dd;
}

html[data-bs-theme="dark"] .admin-home :is(.medical-record-modal, .tracking-card, .info-item, .service-card, .item-row, .empty-items) {
    background: var(--surface-soft);
    border-color: var(--clinic-slate);
    color: var(--clinic-white);
}

html[data-bs-theme="dark"] .admin-home :is(.tracking-card, .info-item, .service-details, .item-info, .item-quantity) :is(strong, span, small) {
    color: var(--clinic-sand-soft);
}

html[data-bs-theme="dark"] .admin-home .record-header {
    background: var(--clinic-slate);
    color: var(--clinic-white);
}

html[data-bs-theme="dark"] .admin-home .modern-close-btn {
    background: var(--clinic-sand) !important;
    color: var(--clinic-navy);
}

@media (max-width: 575.98px) {
    html[data-bs-theme="dark"] body[data-page="index"] .home-hero {
        background-image:
            linear-gradient(180deg, rgba(26, 61, 81, 0.08) 0%, rgba(26, 61, 81, 0.28) 30%, rgba(26, 61, 81, 0.82) 63%, rgba(26, 61, 81, 0.98) 100%),
            url("../img/home-hero-clinic-front.jpg") !important;
    }

    html[data-bs-theme="dark"] body[data-page="index"] .hero-content {
        background: rgba(26, 61, 81, 0.9) !important;
        border-color: var(--clinic-slate) !important;
        box-shadow: 0 18px 54px rgba(8, 30, 43, 0.32) !important;
    }

    html[data-bs-theme="dark"] body[data-page="index"] .homepage-section {
        background: var(--clinic-navy) !important;
    }
}