:root {
  --mf-page: #f8fafc;
  --mf-surface: #ffffff;
  --mf-surface-raised: #ffffff;
  --mf-surface-muted: #f8fafc;
  --mf-input: #ffffff;
  --mf-border: #e2e8f0;
  --mf-border-strong: #cbd5e1;
  --mf-text: #0f172a;
  --mf-muted: #64748b;
  --mf-subtle: #94a3b8;
  --mf-focus: rgba(59, 130, 246, .28);
  --mf-primary: #3b82f6;
  --mf-primary-strong: #2563eb;
  --mf-cyan: #06b6d4;
  --mf-success: #10b981;
  --mf-warning: #f59e0b;
  --mf-danger: #fb7185;
  --mf-shadow: 0 8px 28px rgba(15, 23, 42, .08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --mf-page: #05080d;
  --mf-surface: #080c12;
  --mf-surface-raised: #0b111a;
  --mf-surface-muted: #07101a;
  --mf-input: #03060a;
  --mf-border: #17263a;
  --mf-border-strong: #27415e;
  --mf-text: #e6edf8;
  --mf-muted: #9aacc5;
  --mf-subtle: #71839d;
  --mf-focus: rgba(59, 130, 246, .38);
  --mf-primary: #5b96ff;
  --mf-primary-strong: #3b82f6;
  --mf-cyan: #06b6d4;
  --mf-success: #34d399;
  --mf-warning: #f59e0b;
  --mf-danger: #fb7185;
  --mf-shadow: 0 16px 42px rgba(0, 0, 0, .36);
  --dark: var(--mf-text);
  --light: var(--mf-surface-muted);
  --gray: var(--mf-muted);
  --portal-border: var(--mf-border);
  --portal-text: var(--mf-text);
  --portal-muted: var(--mf-muted);
  --portal-soft: var(--mf-surface-muted);
  --portal-active: #091727;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--mf-page) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .content,
html[data-theme="dark"] .page-shell,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .section,
html[data-theme="dark"] .app-content {
  background-color: var(--mf-page) !important;
  color: var(--mf-text) !important;
}

/* Public landing page: its sections deliberately use light backgrounds in
   the page stylesheet, so they need explicit dark surfaces as well. */
html[data-theme="dark"] .page-shell,
html[data-theme="dark"] .page-section,
html[data-theme="dark"] .page-section-soft,
html[data-theme="dark"] .features-section,
html[data-theme="dark"] .clinic_services-section,
html[data-theme="dark"] .why-section,
html[data-theme="dark"] .contact-section {
  background: var(--mf-page) !important;
}

html[data-theme="dark"] .navbar:not(.medflow-topbar) {
  background: rgba(5, 8, 13, .96) !important;
  border-color: var(--mf-border) !important;
}

html[data-theme="dark"] .navbar:not(.medflow-topbar) .nav-link {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .navbar:not(.medflow-topbar) .nav-link:hover,
html[data-theme="dark"] .navbar:not(.medflow-topbar) .nav-link.active {
  background: #10284a !important;
  color: #a9c7ff !important;
}

html[data-theme="dark"] .about-panel,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .service-item,
html[data-theme="dark"] .why-item,
html[data-theme="dark"] .info-item,
html[data-theme="dark"] .contact-info-card,
html[data-theme="dark"] .contact-map,
html[data-theme="dark"] .map-container {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border) !important;
  box-shadow: var(--mf-shadow) !important;
}

html[data-theme="dark"] .footer,
html[data-theme="dark"] .footer-bottom {
  background: #050608 !important;
  border-color: var(--mf-border) !important;
}

html[data-theme="dark"] .about-hero,
html[data-theme="dark"] .contact-hero-inline {
  background: linear-gradient(135deg, #0a1830, #071a25) !important;
}

html[data-theme="dark"] .contact-map iframe,
html[data-theme="dark"] .map-container iframe {
  filter: grayscale(.7) invert(.86) hue-rotate(180deg) contrast(.9);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .stats-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .quick-action-card,
html[data-theme="dark"] .transaction-summary-card,
html[data-theme="dark"] .patient-tile,
html[data-theme="dark"] .appt-tile,
html[data-theme="dark"] .staff-tile,
html[data-theme="dark"] .doctor-card,
html[data-theme="dark"] .doctor-option,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .fp-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .register-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
  box-shadow: var(--mf-shadow) !important;
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .inner-tab-nav {
  background: var(--mf-surface-muted) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .modal-content .modal-body,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .content .bg-white,
html[data-theme="dark"] .content .bg-light,
html[data-theme="dark"] .content .border.rounded {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .modal-content .modal-footer,
html[data-theme="dark"] .content .bg-light {
  background: var(--mf-surface-muted) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .font-weight-bold,
html[data-theme="dark"] strong,
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .help-text,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .dashboard-panel p,
html[data-theme="dark"] .entry-meta-text {
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea {
  background: var(--mf-input) !important;
  border-color: var(--mf-border-strong) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .select2-container--default .select2-selection__placeholder {
  color: var(--mf-subtle) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] a:focus-visible {
  border-color: var(--mf-primary) !important;
  box-shadow: 0 0 0 3px var(--mf-focus) !important;
  outline: none !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .table tbody,
html[data-theme="dark"] .table tbody tr,
html[data-theme="dark"] .table tbody td {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border) !important;
}

html[data-theme="dark"] .table tbody tr:hover,
html[data-theme="dark"] .table-hover tbody tr:hover {
  background: #0c1622 !important;
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table thead td {
  background: linear-gradient(90deg, #3488f7, #06a7c7) !important;
  border-color: #1496c9 !important;
  color: #06111e !important;
  font-weight: 800 !important;
}

html[data-theme="dark"] .navbar.medflow-topbar,
html[data-theme="dark"] .sidebar.medflow-sidebar {
  background: #050608 !important;
  border-color: #162131 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .navbar .medflow-brand,
html[data-theme="dark"] .medflow-brand-name,
html[data-theme="dark"] .medflow-account-pill,
html[data-theme="dark"] .navbar .medflow-topbar-logout,
html[data-theme="dark"] .sidebar .medflow-sidebar-link,
html[data-theme="dark"] .sidebar .medflow-sidebar-link i {
  color: #c9d7eb !important;
}

html[data-theme="dark"] .medflow-brand-portal,
html[data-theme="dark"] .medflow-sidebar-group-label {
  color: #7e91aa !important;
}

html[data-theme="dark"] .medflow-account-pill,
html[data-theme="dark"] .navbar .medflow-topbar-logout,
html[data-theme="dark"] .medflow-portal-shell .mf-notification-btn,
html[data-theme="dark"] .sidebar-toggle-btn.medflow-sidebar-toggle {
  background: #060b12 !important;
  border-color: #1d3858 !important;
  color: var(--mf-primary) !important;
}

html[data-theme="dark"] .sidebar .medflow-sidebar-link:hover,
html[data-theme="dark"] .sidebar .medflow-sidebar-link:focus,
html[data-theme="dark"] .sidebar .medflow-sidebar-link.active,
html[data-theme="dark"] .sidebar .medflow-sidebar-link.active:hover,
html[data-theme="dark"] .sidebar .medflow-sidebar-link.active:focus,
html[data-theme="dark"] .navbar .medflow-topbar-logout:hover,
html[data-theme="dark"] .medflow-portal-shell .mf-notification-btn:hover,
html[data-theme="dark"] .medflow-portal-shell .mf-notification-btn.active {
  background: #091727 !important;
  color: #79a8ff !important;
  border-color: #315f9f !important;
}

html[data-theme="dark"] .mf-notification-popover,
html[data-theme="dark"] .mf-notification-head,
html[data-theme="dark"] .mf-notification-item,
html[data-theme="dark"] .mf-notification-foot {
  background: #070b10 !important;
  border-color: #162131 !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .mf-notification-item:hover,
html[data-theme="dark"] .mf-notification-item.unread {
  background: #0b1421 !important;
}

/* Profile, credential, walk-in, appointment and billing surfaces use their
   own class names in the role modules; keep them on the same dark hierarchy. */
html[data-theme="dark"] .actual-patient-details-card,
html[data-theme="dark"] .credential-wizard,
html[data-theme="dark"] .credential-step,
html[data-theme="dark"] .credential-dropzone,
html[data-theme="dark"] .credential-latest-note,
html[data-theme="dark"] .credential-action-callout.is-muted,
html[data-theme="dark"] .walkin-doctor-card,
html[data-theme="dark"] .doctor-selection-card,
html[data-theme="dark"] .billing-modal .modal-body,
html[data-theme="dark"] .billing-items-table tbody td,
html[data-theme="dark"] .appointment-details,
html[data-theme="dark"] .profile-detail,
html[data-theme="dark"] .profile-detail-item {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .credential-step,
html[data-theme="dark"] .credential-latest-note,
html[data-theme="dark"] .credential-action-callout.is-muted,
html[data-theme="dark"] .actual-patient-details-card,
html[data-theme="dark"] .billing-modal .modal-body {
  background: var(--mf-surface-muted) !important;
}

/* Patient portal modules have bespoke shells rather than Bootstrap cards. */
html[data-theme="dark"] .patient-dashboard-card,
html[data-theme="dark"] .patient-dashboard-kpi,
html[data-theme="dark"] .patient-dashboard-item,
html[data-theme="dark"] .patient-dashboard-empty,
html[data-theme="dark"] .patient-record-shell,
html[data-theme="dark"] .patient-record-header,
html[data-theme="dark"] .patient-record-tabs,
html[data-theme="dark"] .patient-record-toolbar,
html[data-theme="dark"] .patient-table-wrap,
html[data-theme="dark"] .patient-empty-state,
html[data-theme="dark"] .patient-record-card-grid,
html[data-theme="dark"] .patient-record-card,
html[data-theme="dark"] .patient-record-pagination,
html[data-theme="dark"] .patient-profile-card,
html[data-theme="dark"] .patient-profile-body,
html[data-theme="dark"] .patient-profile-detail,
html[data-theme="dark"] .credential-wizard-progress,
html[data-theme="dark"] .credential-wizard-panel,
html[data-theme="dark"] .credential-upload-card,
html[data-theme="dark"] .credential-review-item,
html[data-theme="dark"] .credential-request-card,
html[data-theme="dark"] .credential-detail-field,
html[data-theme="dark"] .custom-modal,
html[data-theme="dark"] .custom-modal .modal-body,
html[data-theme="dark"] .custom-modal .modal-footer {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .patient-record-shell .border.rounded,
html[data-theme="dark"] .patient-record-shell .border.rounded.h-100 {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .medflow-account-card,
html[data-theme="dark"] .medflow-account-body,
html[data-theme="dark"] .medflow-account-login,
html[data-theme="dark"] .medflow-password-rules,
html[data-theme="dark"] .medflow-password-requirements,
html[data-theme="dark"] .password-requirements {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .medflow-account-login,
html[data-theme="dark"] .medflow-password-rules,
html[data-theme="dark"] .medflow-password-requirements,
html[data-theme="dark"] .password-requirements {
  background: var(--mf-surface-muted) !important;
}

html[data-theme="dark"] .medflow-account-card label,
html[data-theme="dark"] .medflow-account-card .form-label,
html[data-theme="dark"] .medflow-account-card .form-check-label {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .medflow-account-hint,
html[data-theme="dark"] .medflow-account-login,
html[data-theme="dark"] .medflow-password-rules,
html[data-theme="dark"] .medflow-password-requirements,
html[data-theme="dark"] .password-requirements {
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .patient-dashboard-kpi,
html[data-theme="dark"] .patient-dashboard-item,
html[data-theme="dark"] .patient-dashboard-empty,
html[data-theme="dark"] .patient-record-header,
html[data-theme="dark"] .patient-record-toolbar,
html[data-theme="dark"] .patient-profile-detail,
html[data-theme="dark"] .credential-detail-field,
html[data-theme="dark"] .credential-wizard-progress,
html[data-theme="dark"] .custom-modal .modal-footer {
  background: var(--mf-surface-muted) !important;
}

html[data-theme="dark"] .patient-record-tabs .nav-link,
html[data-theme="dark"] .patient-record-tabs .nav-link.active,
html[data-theme="dark"] .patient-record-tabs .nav-link:hover,
html[data-theme="dark"] .patient-view-toggle,
html[data-theme="dark"] .patient-view-toggle .btn.active,
html[data-theme="dark"] .patient-page-arrow,
html[data-theme="dark"] .patient-page-btn.active,
html[data-theme="dark"] .modal-btn.cancel {
  background: #102033 !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .patient-record-card:hover,
html[data-theme="dark"] .patient-record-table tbody tr:hover {
  background: #0c1622 !important;
  border-color: #315f9f !important;
}

html[data-theme="dark"] .patient-dashboard-card h4,
html[data-theme="dark"] .patient-dashboard-card h5,
html[data-theme="dark"] .patient-dashboard-item-title,
html[data-theme="dark"] .patient-record-title h4,
html[data-theme="dark"] .patient-name-primary,
html[data-theme="dark"] .patient-record-card-title,
html[data-theme="dark"] .patient-record-card-value,
html[data-theme="dark"] .patient-profile-section-title,
html[data-theme="dark"] .patient-profile-detail dd,
html[data-theme="dark"] .credential-detail-section,
html[data-theme="dark"] .credential-review-item strong,
html[data-theme="dark"] .credential-request-title-wrap h5,
html[data-theme="dark"] .credential-request-meta-grid strong,
html[data-theme="dark"] .credential-card-fee strong {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .patient-dashboard-muted,
html[data-theme="dark"] .patient-dashboard-kpi span,
html[data-theme="dark"] .patient-dashboard-detail-row,
html[data-theme="dark"] .patient-dashboard-item-meta,
html[data-theme="dark"] .patient-record-title p,
html[data-theme="dark"] .patient-name-secondary,
html[data-theme="dark"] .patient-note-text,
html[data-theme="dark"] .patient-record-card-subtitle,
html[data-theme="dark"] .patient-record-card-label,
html[data-theme="dark"] .patient-profile-detail dt,
html[data-theme="dark"] .credential-detail-label,
html[data-theme="dark"] .credential-request-reference,
html[data-theme="dark"] .credential-request-meta-grid span,
html[data-theme="dark"] .credential-request-meta-grid small,
html[data-theme="dark"] .credential-card-fee span {
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .patient-profile-lock-note,
html[data-theme="dark"] .credential-privacy-note,
html[data-theme="dark"] .credential-review-notice,
html[data-theme="dark"] .credential-action-callout.is-info {
  background: #082331 !important;
  border-color: #155b75 !important;
  color: #9ee7f5 !important;
}

html[data-theme="dark"] .credential-timeline-dot {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border-strong) !important;
}

/* The wizard footer, realtime toasts, date picker and appointment slots are
   created or restyled after the initial page load, so they require their
   own dark tokens instead of inheriting a parent card surface. */
html[data-theme="dark"] .credential-wizard-actions {
  background: var(--mf-surface-muted) !important;
  border-color: var(--mf-border) !important;
}

html[data-theme="dark"] .medflow-password-rules-title,
html[data-theme="dark"] .medflow-password-rules-list,
html[data-theme="dark"] .medflow-password-rules-state {
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .medflow-password-rules-title > span:first-child {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .mf-realtime-toast {
  background: var(--mf-surface-raised) !important;
  border-color: var(--mf-border-strong) !important;
  color: var(--mf-text) !important;
  box-shadow: var(--mf-shadow) !important;
}

html[data-theme="dark"] .mf-realtime-toast-icon {
  background: #10284a !important;
  color: var(--mf-primary) !important;
}

html[data-theme="dark"] .mf-realtime-toast-copy strong {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .mf-realtime-toast-copy p,
html[data-theme="dark"] .mf-realtime-toast-close {
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .flatpickr-calendar,
html[data-theme="dark"] .flatpickr-calendar.open,
html[data-theme="dark"] .flatpickr-calendar.inline,
html[data-theme="dark"] .flatpickr-months,
html[data-theme="dark"] .flatpickr-weekdays,
html[data-theme="dark"] .flatpickr-days,
html[data-theme="dark"] .flatpickr-time {
  background: var(--mf-surface-raised) !important;
  border-color: var(--mf-border-strong) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .flatpickr-months .flatpickr-month,
html[data-theme="dark"] .flatpickr-current-month,
html[data-theme="dark"] .flatpickr-current-month input.cur-year,
html[data-theme="dark"] .flatpickr-current-month .numInputWrapper,
html[data-theme="dark"] .flatpickr-monthDropdown-months,
html[data-theme="dark"] span.flatpickr-weekday,
html[data-theme="dark"] .flatpickr-prev-month,
html[data-theme="dark"] .flatpickr-next-month,
html[data-theme="dark"] .flatpickr-day {
  background: transparent !important;
  color: var(--mf-text) !important;
  fill: var(--mf-text) !important;
}

html[data-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-day.nextMonthDay,
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
html[data-theme="dark"] .flatpickr-day.doctor-unavailable {
  background: #080d14 !important;
  border-color: transparent !important;
  color: var(--mf-subtle) !important;
}

html[data-theme="dark"] .flatpickr-day:hover,
html[data-theme="dark"] .flatpickr-day:focus,
html[data-theme="dark"] .flatpickr-day.today:hover {
  background: #10284a !important;
  border-color: #315f9f !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] .flatpickr-day.today {
  border-color: var(--mf-primary) !important;
  color: var(--mf-primary) !important;
}

html[data-theme="dark"] .flatpickr-day.selected,
html[data-theme="dark"] .flatpickr-day.startRange,
html[data-theme="dark"] .flatpickr-day.endRange {
  background: var(--mf-primary-strong) !important;
  border-color: var(--mf-primary-strong) !important;
  color: #fff !important;
}

html[data-theme="dark"] #appdate:not(:disabled),
html[data-theme="dark"] #appdate.booking-date-ready {
  background: var(--mf-input) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] #appdate.booking-date-disabled,
html[data-theme="dark"] #appdate:disabled {
  background: #080d14 !important;
  color: var(--mf-subtle) !important;
}

html[data-theme="dark"] .time-slot-block {
  background: var(--mf-surface-muted) !important;
  border-color: var(--mf-border) !important;
}

html[data-theme="dark"] .time-slot-block-header {
  background: var(--mf-surface-raised) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .time-slot-row,
html[data-theme="dark"] #timeSlotsContainer .time-slot-row.border.rounded,
html[data-theme="dark"] #calendarTimeSlots .time-slot-row.border.rounded,
html[data-theme="dark"] #followUpTimeSlots .time-slot-row.border.rounded {
  background: var(--mf-input) !important;
  border-color: var(--mf-border-strong) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .time-slot-row:hover,
html[data-theme="dark"] .time-slot-row:has(.time-slot-radio:checked) {
  background: #10284a !important;
  border-color: #3b82f6 !important;
}

html[data-theme="dark"] .time-slot-row.disabled-slot,
html[data-theme="dark"] .time-slot-row.bg-past {
  background: #080d14 !important;
  border-color: #17263a !important;
  color: var(--mf-subtle) !important;
}

html[data-theme="dark"] .swal2-popup,
html[data-theme="dark"] .swal2-modal,
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-title {
  background: var(--mf-surface) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .select2-results__option,
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  background: var(--mf-input) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background: #13335d !important;
  color: #eff6ff !important;
}

.medflow-theme-control { position: relative; }
.medflow-public-theme-control { position: fixed; right: 20px; top: 20px; z-index: 1080; }
.medflow-public-theme-control .medflow-theme-menu { z-index: 1081; }
.medflow-theme-sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.medflow-theme-trigger {
  align-items: center; background: #fff; border: 1px solid var(--portal-border, #e2e8f0);
  border-radius: 999px; color: var(--portal-blue, #2563eb); cursor: pointer; display: inline-flex;
  height: 38px; justify-content: center; width: 38px;
}
.medflow-theme-menu {
  background: var(--mf-surface); border: 1px solid var(--mf-border); border-radius: 12px;
  box-shadow: var(--mf-shadow); display: none; padding: 6px; position: absolute; right: 0; top: calc(100% + 8px); width: 178px; z-index: 1060;
}
.medflow-theme-control.open .medflow-theme-menu { display: block; }
.medflow-theme-option {
  align-items: center; background: transparent; border: 0; border-radius: 8px; color: var(--mf-text);
  cursor: pointer; display: flex; font: inherit; font-size: .82rem; font-weight: 700; gap: 9px; padding: 9px 10px; text-align: left; width: 100%;
}
.medflow-theme-option:hover, .medflow-theme-option:focus, .medflow-theme-option[aria-checked="true"] { background: #eaf2ff; color: #1d4ed8; outline: none; }
html[data-theme="dark"] .medflow-theme-trigger { background: #060b12; border-color: #1d3858; color: var(--mf-primary); }
html[data-theme="dark"] .medflow-theme-option:hover, html[data-theme="dark"] .medflow-theme-option:focus, html[data-theme="dark"] .medflow-theme-option[aria-checked="true"] { background: #10284a; color: #a9c7ff; }

@media (max-width: 576px) {
  .medflow-public-theme-control { right: 12px; top: 12px; }
}

@media print {
  html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] .content, html[data-theme="dark"] .section, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .card, html[data-theme="dark"] .panel, html[data-theme="dark"] .table, html[data-theme="dark"] .table tbody, html[data-theme="dark"] .table tbody tr, html[data-theme="dark"] .table tbody td {
    background: #fff !important; color: #000 !important; box-shadow: none !important;
  }
  html[data-theme="dark"] body * { color: #000 !important; text-shadow: none !important; }
  html[data-theme="dark"] .table thead th, html[data-theme="dark"] .table thead td { background: #e2e8f0 !important; color: #000 !important; }
}