: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"] 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"] .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;
}

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

html[data-theme="dark"] .mf-notification-head span,
html[data-theme="dark"] .mf-notification-copy p,
html[data-theme="dark"] .mf-notification-copy small,
html[data-theme="dark"] .mf-notification-empty {
  color: var(--mf-muted) !important;
}

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

html[data-theme="dark"] .mf-notification-read-state {
  background: #102033 !important;
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .mf-notification-read-state.unread,
html[data-theme="dark"] .mf-mark-all-btn {
  background: #10284a !important;
  border-color: #315f9f !important;
  color: #a9c7ff !important;
}

html[data-theme="dark"] .mf-mark-all-btn:hover,
html[data-theme="dark"] .mf-mark-all-btn:focus {
  background: #13335d !important;
  border-color: var(--mf-primary) !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] .mf-mark-all-btn:disabled {
  background: #080d14 !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-subtle) !important;
}

/* Full notification center page. */
html[data-theme="dark"] .mf-shell,
html[data-theme="dark"] .mf-header {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .mf-header h1,
html[data-theme="dark"] .mf-title {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .mf-header p,
html[data-theme="dark"] .mf-message,
html[data-theme="dark"] .mf-meta,
html[data-theme="dark"] .mf-empty {
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .mf-list,
html[data-theme="dark"] .mf-item,
html[data-theme="dark"] .mf-pagination a,
html[data-theme="dark"] .mf-pagination span {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

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

html[data-theme="dark"] .mf-icon,
html[data-theme="dark"] .mf-count,
html[data-theme="dark"] .mf-state.unread {
  background: #10284a !important;
  color: #a9c7ff !important;
}

html[data-theme="dark"] .mf-state,
html[data-theme="dark"] .mf-pagination .disabled,
html[data-theme="dark"] .mf-pagination .summary {
  background: #102033 !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .mf-pagination .active {
  background: var(--mf-primary-strong) !important;
  border-color: var(--mf-primary-strong) !important;
  color: #fff !important;
}

html[data-theme="dark"] .mf-pagination a:hover {
  background: #10284a !important;
  border-color: #315f9f !important;
  color: #dbeafe !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;
}

/* Shared role dashboards. Doctor and receptionist dashboards use this
   component family, so both the text and its containing surface must switch
   together. */
html[data-theme="dark"] .role-dashboard-card,
html[data-theme="dark"] .role-dashboard-kpi,
html[data-theme="dark"] .role-dashboard-item,
html[data-theme="dark"] .role-dashboard-empty,
html[data-theme="dark"] .doctor-clinical-item,
html[data-theme="dark"] .doctor-schedule-item,
html[data-theme="dark"] .doctor-schedule-stat,
html[data-theme="dark"] .receptionist-calendar-stat,
html[data-theme="dark"] .receptionist-agenda-card {
  background: var(--mf-surface-muted) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .role-dashboard-card {
  background: var(--mf-surface) !important;
  box-shadow: var(--mf-shadow) !important;
}

html[data-theme="dark"] .role-dashboard-card h4,
html[data-theme="dark"] .role-dashboard-card h5,
html[data-theme="dark"] .role-dashboard-item-title,
html[data-theme="dark"] .doctor-clinical-title,
html[data-theme="dark"] .doctor-schedule-patient,
html[data-theme="dark"] .doctor-schedule-time strong,
html[data-theme="dark"] .doctor-schedule-stat-value,
html[data-theme="dark"] .doctor-schedule-section-title,
html[data-theme="dark"] .receptionist-calendar-stat strong,
html[data-theme="dark"] .receptionist-calendar-period,
html[data-theme="dark"] .receptionist-agenda-title,
html[data-theme="dark"] .receptionist-agenda-patient {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .role-dashboard-muted,
html[data-theme="dark"] .role-dashboard-kpi span,
html[data-theme="dark"] .role-dashboard-item-meta,
html[data-theme="dark"] .role-dashboard-empty,
html[data-theme="dark"] .doctor-clinical-meta,
html[data-theme="dark"] .doctor-schedule-meta,
html[data-theme="dark"] .doctor-schedule-time span,
html[data-theme="dark"] .doctor-schedule-stat-label,
html[data-theme="dark"] .doctor-schedule-stat-note,
html[data-theme="dark"] .receptionist-calendar-stat span,
html[data-theme="dark"] .receptionist-agenda-subtitle,
html[data-theme="dark"] .receptionist-agenda-note {
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .role-dashboard-kpi strong {
  color: var(--mf-primary) !important;
}

html[data-theme="dark"] .role-dashboard-item-icon,
html[data-theme="dark"] .role-dashboard-kpi-icon,
html[data-theme="dark"] .doctor-clinical-icon,
html[data-theme="dark"] .doctor-schedule-time {
  background: #10284a !important;
  color: #8ab4ff !important;
}

html[data-theme="dark"] .doctor-clinical-count,
html[data-theme="dark"] .doctor-schedule-badge {
  background: #10284a !important;
  border-color: #315f9f !important;
  color: #a9c7ff !important;
}

html[data-theme="dark"] .doctor-schedule-section-title {
  border-color: var(--mf-border) !important;
}

/* Admin portal lists, controls, dashboard summaries and staff management. */
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .transaction-summary-card,
html[data-theme="dark"] .rec-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"] .patient-pagination,
html[data-theme="dark"] .appt-pagination,
html[data-theme="dark"] .staff-pagination,
html[data-theme="dark"] .staff-table-wrap,
html[data-theme="dark"] .staff-card,
html[data-theme="dark"] .session-policy-form,
html[data-theme="dark"] .system-control-form,
html[data-theme="dark"] .dashboard-insight-panel,
html[data-theme="dark"] .table-list-toolbar,
html[data-theme="dark"] .card-body.p-0 > .table-responsive {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .patient-empty-state,
html[data-theme="dark"] .appt-empty-state,
html[data-theme="dark"] .staff-empty-state,
html[data-theme="dark"] .staff-detail-row,
html[data-theme="dark"] .session-policy-switch,
html[data-theme="dark"] .session-policy-options,
html[data-theme="dark"] .system-control-switch,
html[data-theme="dark"] .system-control-options,
html[data-theme="dark"] .dashboard-schedule-header,
html[data-theme="dark"] .dashboard-mini-stat,
html[data-theme="dark"] .staff-view-toggle,
html[data-theme="dark"] .dashboard-subtabs {
  background: var(--mf-surface-muted) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .patient-tile:hover,
html[data-theme="dark"] .appt-tile:hover,
html[data-theme="dark"] .staff-tile:hover,
html[data-theme="dark"] .patient-tile.entry-selected,
html[data-theme="dark"] .appt-tile.entry-selected,
html[data-theme="dark"] .staff-tile.entry-selected,
html[data-theme="dark"] .staff-card:hover,
html[data-theme="dark"] .staff-card.entry-selected,
html[data-theme="dark"] .staff-table-row:hover,
html[data-theme="dark"] .staff-table-row.entry-selected {
  background: #0c1622 !important;
  border-color: #315f9f !important;
}

html[data-theme="dark"] .entry-action-combo,
html[data-theme="dark"] .staff-expand-btn,
html[data-theme="dark"] .staff-pagination button,
html[data-theme="dark"] .staff-view-toggle .btn.active,
html[data-theme="dark"] .dashboard-subtab.active {
  background: #102033 !important;
  border-color: var(--mf-border-strong) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .transaction-summary-text h3,
html[data-theme="dark"] .rec-transaction-summary-text h3,
html[data-theme="dark"] .staff-name-primary,
html[data-theme="dark"] .staff-detail-value,
html[data-theme="dark"] .session-policy-header h5,
html[data-theme="dark"] .session-policy-role-header strong,
html[data-theme="dark"] .staff-workflow-setting h5,
html[data-theme="dark"] .system-control-header h5,
html[data-theme="dark"] .system-control-role-header strong,
html[data-theme="dark"] .system-control-setting h5,
html[data-theme="dark"] .dashboard-insight-panel h5,
html[data-theme="dark"] .dashboard-mini-stat strong,
html[data-theme="dark"] .dashboard-upcoming-name {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .transaction-summary-text p,
html[data-theme="dark"] .rec-transaction-summary-text p,
html[data-theme="dark"] .entry-meta-text,
html[data-theme="dark"] .staff-name-secondary,
html[data-theme="dark"] .staff-detail-label,
html[data-theme="dark"] .session-policy-header p,
html[data-theme="dark"] .session-policy-note,
html[data-theme="dark"] .staff-workflow-setting p,
html[data-theme="dark"] .system-control-header p,
html[data-theme="dark"] .system-control-note,
html[data-theme="dark"] .system-control-setting p,
html[data-theme="dark"] .dashboard-schedule-title p,
html[data-theme="dark"] .dashboard-mini-stat span,
html[data-theme="dark"] .dashboard-upcoming-meta,
html[data-theme="dark"] .admin-dashboard-chart-subtitle {
  color: var(--mf-muted) !important;
}

/* Doctor profile, calendar, agenda and modal content. */
html[data-theme="dark"] .doctor-profile-card,
html[data-theme="dark"] .doctor-calendar-main,
html[data-theme="dark"] .doctor-calendar-agenda,
html[data-theme="dark"] .doctor-calendar-stat,
html[data-theme="dark"] .doctor-agenda-card,
html[data-theme="dark"] .doctor-record-search .form-control,
html[data-theme="dark"] .subpage-modal .modal-body,
html[data-theme="dark"] .medflow-modal-content {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .doctor-calendar-workspace,
html[data-theme="dark"] .doctor-profile-detail,
html[data-theme="dark"] .doctor-practice-choice-box,
html[data-theme="dark"] .doctor-calendar-detail-row,
html[data-theme="dark"] .doctor-agenda-empty {
  background: var(--mf-surface-muted) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .doctor-calendar-icon-btn,
html[data-theme="dark"] .doctor-calendar-view-btn {
  background: var(--mf-surface-raised) !important;
  border-color: var(--mf-border-strong) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .doctor-calendar-view-btn.active,
html[data-theme="dark"] .doctor-calendar-icon-btn:hover,
html[data-theme="dark"] .doctor-calendar-view-btn:hover,
html[data-theme="dark"] .inner-tab-nav .nav-link:hover,
html[data-theme="dark"] .inner-tab-nav .nav-link:focus {
  background: #10284a !important;
  border-color: #315f9f !important;
  color: #a9c7ff !important;
}

html[data-theme="dark"] .doctor-profile-section-title,
html[data-theme="dark"] .doctor-profile-detail dd,
html[data-theme="dark"] .doctor-practice-settings label,
html[data-theme="dark"] .doctor-calendar-title,
html[data-theme="dark"] .doctor-calendar-stat-value,
html[data-theme="dark"] .doctor-calendar-period,
html[data-theme="dark"] .doctor-agenda-title,
html[data-theme="dark"] .doctor-agenda-patient,
html[data-theme="dark"] .doctor-calendar-detail-value {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .doctor-profile-detail dt,
html[data-theme="dark"] .doctor-calendar-subtitle,
html[data-theme="dark"] .doctor-calendar-stat-label,
html[data-theme="dark"] .doctor-calendar-stat-note,
html[data-theme="dark"] .doctor-agenda-subtitle,
html[data-theme="dark"] .doctor-agenda-meta,
html[data-theme="dark"] .doctor-agenda-note,
html[data-theme="dark"] .doctor-calendar-detail-label {
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .doctor-profile-lock-note {
  background: #082331 !important;
  border-color: #155b75 !important;
  color: #9ee7f5 !important;
}

/* Receptionist billing, patient records, availability and walk-in modules. */
html[data-theme="dark"] .billing-panel,
html[data-theme="dark"] .booking-request-field,
html[data-theme="dark"] .booking-request-notes,
html[data-theme="dark"] .rec-medical-card,
html[data-theme="dark"] .rec-detail-section,
html[data-theme="dark"] .rec-appointment-item,
html[data-theme="dark"] .rec-record-card,
html[data-theme="dark"] .rec-record-detail-toolbar,
html[data-theme="dark"] .rec-bulk-toolbar,
html[data-theme="dark"] .rec-overview-drawer,
html[data-theme="dark"] .doc-availability-tabs,
html[data-theme="dark"] .doctor-mini-calendar-card,
html[data-theme="dark"] .doctor-mini-calendar-doctor,
html[data-theme="dark"] .doc-avail-panel,
html[data-theme="dark"] .doc-details-drawer,
html[data-theme="dark"] .doc-timeline-wrap,
html[data-theme="dark"] .billing-prices-table-wrap,
html[data-theme="dark"] #wiSuggestions,
html[data-theme="dark"] .rec-medical-modal-body tr,
html[data-theme="dark"] :is([data-section="records-management"], [data-section="records-archive"], [data-section="records-deleted"]) .rec-record-table tbody tr {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .billing-modal .modal-footer,
html[data-theme="dark"] .billing-summary,
html[data-theme="dark"] .rec-detail-section-head,
html[data-theme="dark"] .rec-record-card-head,
html[data-theme="dark"] .rec-overview-header,
html[data-theme="dark"] .rec-overview-footer,
html[data-theme="dark"] .rec-lifecycle-summary-item,
html[data-theme="dark"] .rec-medical-empty,
html[data-theme="dark"] .doctor-mini-calendar-header,
html[data-theme="dark"] .doctor-mini-calendar-details,
html[data-theme="dark"] .doc-drawer-metric,
html[data-theme="dark"] .doc-week-chip,
html[data-theme="dark"] .doc-timeline-hour,
html[data-theme="dark"] .wi-input[readonly] {
  background: var(--mf-surface-muted) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .billing-readonly .form-control[readonly],
html[data-theme="dark"] .doc-availability-filter input,
html[data-theme="dark"] .doc-availability-filter select,
html[data-theme="dark"] .wi-input {
  background: var(--mf-input) !important;
  border-color: var(--mf-border-strong) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .rec-record-back,
html[data-theme="dark"] .doctor-mini-calendar-btn,
html[data-theme="dark"] .doctor-mini-calendar-open,
html[data-theme="dark"] .doc-view-btn,
html[data-theme="dark"] .doc-drawer-close {
  background: var(--mf-surface-raised) !important;
  border-color: var(--mf-border-strong) !important;
  color: var(--mf-primary) !important;
}

html[data-theme="dark"] .rec-medical-view-btn,
html[data-theme="dark"] .rec-soft-chip,
html[data-theme="dark"] .rec-record-toggle,
html[data-theme="dark"] .rec-record-back-top,
html[data-theme="dark"] .rec-record-tabs .nav-link:hover,
html[data-theme="dark"] .rec-lifecycle-help,
html[data-theme="dark"] .doctor-mini-calendar-day.has-schedule,
html[data-theme="dark"] .doctor-mini-calendar-btn:hover,
html[data-theme="dark"] .doc-view-btn:hover,
html[data-theme="dark"] .doc-drawer-close:hover {
  background: #10284a !important;
  border-color: #315f9f !important;
  color: #a9c7ff !important;
}

html[data-theme="dark"] .rec-record-tabs .nav-link,
html[data-theme="dark"] .doctor-mini-calendar-day,
html[data-theme="dark"] .doc-timeline-doctor {
  background: var(--mf-surface-raised) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .doctor-mini-calendar-day.is-muted {
  background: #080d14 !important;
  color: var(--mf-subtle) !important;
}

html[data-theme="dark"] .booking-request-value,
html[data-theme="dark"] .billing-panel-title,
html[data-theme="dark"] .billing-summary-row.total,
html[data-theme="dark"] .staff-name-primary,
html[data-theme="dark"] .rec-detail-section-head h6,
html[data-theme="dark"] .rec-detail-value,
html[data-theme="dark"] .rec-appointment-primary,
html[data-theme="dark"] .rec-record-title,
html[data-theme="dark"] .rec-record-summary-value,
html[data-theme="dark"] .rec-record-detail-toolbar strong,
html[data-theme="dark"] .rec-record-field-value,
html[data-theme="dark"] .rec-lifecycle-summary-item strong,
html[data-theme="dark"] .rec-overview-header h5,
html[data-theme="dark"] .rec-overview-section h6,
html[data-theme="dark"] .rec-overview-field strong,
html[data-theme="dark"] .doctor-mini-calendar-heading,
html[data-theme="dark"] .doctor-mini-calendar-month,
html[data-theme="dark"] .doctor-mini-calendar-detail-date,
html[data-theme="dark"] .doctor-mini-calendar-doctor strong,
html[data-theme="dark"] .doc-next-slot strong,
html[data-theme="dark"] .doc-drawer-title,
html[data-theme="dark"] .doc-drawer-metric strong,
html[data-theme="dark"] .doc-drawer-section-title,
html[data-theme="dark"] .doc-slot-time,
html[data-theme="dark"] .doc-slot-patient {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .booking-request-label,
html[data-theme="dark"] .billing-summary-row,
html[data-theme="dark"] .rec-detail-label,
html[data-theme="dark"] .rec-record-subtitle,
html[data-theme="dark"] .rec-lifecycle-summary-item span,
html[data-theme="dark"] .rec-overview-header p,
html[data-theme="dark"] .rec-overview-field span,
html[data-theme="dark"] .doctor-mini-calendar-detail-count,
html[data-theme="dark"] .doctor-mini-calendar-doctor span,
html[data-theme="dark"] .doc-count span,
html[data-theme="dark"] .doc-drawer-subtitle,
html[data-theme="dark"] .doc-drawer-metric span {
  color: var(--mf-muted) !important;
}

/* FullCalendar is embedded in all three staff portals. */
html[data-theme="dark"] .fc-view-container,
html[data-theme="dark"] .fc-view,
html[data-theme="dark"] .fc-day-grid,
html[data-theme="dark"] .fc-time-grid,
html[data-theme="dark"] .fc-list-view,
html[data-theme="dark"] #dashboard-calendar .fc-view-container,
html[data-theme="dark"] #doctor-calendar .fc-view-container,
html[data-theme="dark"] #receptionist-dashboard-calendar .fc-view-container {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .fc-unthemed td,
html[data-theme="dark"] .fc-unthemed th,
html[data-theme="dark"] .fc-unthemed .fc-divider,
html[data-theme="dark"] .fc-unthemed .fc-row,
html[data-theme="dark"] .fc-unthemed .fc-content,
html[data-theme="dark"] .fc-unthemed .fc-popover,
html[data-theme="dark"] .fc-unthemed .fc-list-view,
html[data-theme="dark"] .fc-widget-header,
html[data-theme="dark"] .fc-widget-content {
  border-color: var(--mf-border) !important;
}

html[data-theme="dark"] .fc-day-header,
html[data-theme="dark"] #doctor-calendar .fc-day-header,
html[data-theme="dark"] #receptionist-dashboard-calendar .fc-day-header {
  background: var(--mf-surface-muted) !important;
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .fc-day-number,
html[data-theme="dark"] .fc-axis,
html[data-theme="dark"] #doctor-calendar .fc-day-number,
html[data-theme="dark"] #receptionist-dashboard-calendar .fc-day-number {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .fc-today,
html[data-theme="dark"] #admin-calendar .fc-today,
html[data-theme="dark"] #doctor-calendar .fc-today,
html[data-theme="dark"] #receptionist-dashboard-calendar .fc-today {
  background: #102033 !important;
}

html[data-theme="dark"] #dashboard-calendar .fc-button {
  background: var(--mf-surface-raised) !important;
  border-color: var(--mf-border-strong) !important;
  color: var(--mf-text) !important;
}

/* Public authentication, registration and account recovery screens. */
html[data-theme="dark"] .password-strength-card,
html[data-theme="dark"] .terms-row,
html[data-theme="dark"] .email-badge,
html[data-theme="dark"] .timer-wrap,
html[data-theme="dark"] .confirm-dialog,
html[data-theme="dark"] .phone-prefix,
html[data-theme="dark"] .gender-option,
html[data-theme="dark"] .terms-modal .terms-effective-date {
  background: var(--mf-surface-muted) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .btn-cancel-confirm,
html[data-theme="dark"] .btn-secondary {
  background: #102033 !important;
  border-color: var(--mf-border-strong) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .register-modal .form-heading,
html[data-theme="dark"] .strength-head,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .timer-wrap,
html[data-theme="dark"] .terms-modal p {
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .gender-option:has(input:checked),
html[data-theme="dark"] .nav-tabs .nav-link.active {
  background: #10284a !important;
  border-color: #315f9f !important;
  color: #a9c7ff !important;
}

/* Standalone clinical and booking workflow pages. */
html[data-theme="dark"] .patient-info,
html[data-theme="dark"] .patient-card,
html[data-theme="dark"] .detail-box,
html[data-theme="dark"] .notice {
  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"] .patient-info h5,
html[data-theme="dark"] .patient-card h5,
html[data-theme="dark"] .patient-info .info-value,
html[data-theme="dark"] .patient-card .info-value,
html[data-theme="dark"] .detail-val,
html[data-theme="dark"] .notice h1 {
  color: var(--mf-text) !important;
  border-color: var(--mf-border) !important;
}

html[data-theme="dark"] .patient-info .info-label,
html[data-theme="dark"] .patient-card .info-label,
html[data-theme="dark"] .patient-card .info-note,
html[data-theme="dark"] .detail-box .detail-label,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .notice p,
html[data-theme="dark"] .section-title {
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .detail-box .detail-row {
  border-color: var(--mf-border) !important;
}

html[data-theme="dark"] .patient-info .vitals-item,
html[data-theme="dark"] .patient-info .vitals-readonly {
  background: var(--mf-surface-muted) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .patient-info .vitals-label,
html[data-theme="dark"] .patient-info .vitals-field label {
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .patient-info .vitals-value {
  color: var(--mf-text) !important;
}

/* Lower-level labels and empty states used inside the staff dashboards. */
html[data-theme="dark"] .dashboard-legend-count,
html[data-theme="dark"] .perm-check,
html[data-theme="dark"] .staff-setting-toggle,
html[data-theme="dark"] .rec-record-title-cell,
html[data-theme="dark"] .rec-bulk-count,
html[data-theme="dark"] .doctor-mini-calendar-state {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .receptionist-agenda-empty,
html[data-theme="dark"] .rec-empty-note,
html[data-theme="dark"] .rec-record-tabs .tab-count,
html[data-theme="dark"] .doctor-mini-calendar-summary,
html[data-theme="dark"] .doctor-mini-calendar-weekday,
html[data-theme="dark"] .doctor-mini-calendar-empty,
html[data-theme="dark"] .doc-details-empty {
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .rec-record-table tr.rec-record-selected,
html[data-theme="dark"] .staff-table tr.rec-patient-record-selected {
  background: #10284a !important;
  border-color: #315f9f !important;
}

html[data-theme="dark"] .rec-record-table tr.rec-record-selected td,
html[data-theme="dark"] .staff-table tr.rec-patient-record-selected td {
  background: transparent !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .modal-divider {
  color: var(--mf-muted) !important;
}

/* Remaining shared modal, search, paging, calendar and status primitives. */
html[data-theme="dark"] .custom-modal .modal-body p,
html[data-theme="dark"] .confirmation-title p,
html[data-theme="dark"] .detail-label,
html[data-theme="dark"] .clean-search .search-icon,
html[data-theme="dark"] .doctor-record-search .search-icon,
html[data-theme="dark"] .patient-record-search .search-icon {
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .confirmation-title h3,
html[data-theme="dark"] .detail-value {
  color: var(--mf-text) !important;
}

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

html[data-theme="dark"] .appt-page-btn.active,
html[data-theme="dark"] .staff-page-btn.active,
html[data-theme="dark"] .patient-page-btn.active,
html[data-theme="dark"] .appt-page-arrow,
html[data-theme="dark"] .staff-page-arrow,
html[data-theme="dark"] .patient-page-arrow {
  background: #102033 !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .receptionist-calendar-icon-btn,
html[data-theme="dark"] .receptionist-calendar-view-btn {
  background: var(--mf-surface-raised) !important;
  border-color: var(--mf-border-strong) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .receptionist-calendar-icon-btn:hover,
html[data-theme="dark"] .receptionist-calendar-view-btn:hover,
html[data-theme="dark"] .receptionist-calendar-icon-btn:focus-visible,
html[data-theme="dark"] .receptionist-calendar-view-btn:focus-visible,
html[data-theme="dark"] .receptionist-agenda-status,
html[data-theme="dark"] .receptionist-agenda-chip,
html[data-theme="dark"] .doctor-agenda-chip {
  background: #10284a !important;
  border-color: #315f9f !important;
  color: #a9c7ff !important;
}

html[data-theme="dark"] .doctor-agenda-status.off,
html[data-theme="dark"] .badge-light,
html[data-theme="dark"] .badge-secondary,
html[data-theme="dark"] .credential-status-default {
  background: #102033 !important;
  border-color: var(--mf-border-strong) !important;
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .patient-dashboard-datebox,
html[data-theme="dark"] .vital-box,
html[data-theme="dark"] .clinical-box,
html[data-theme="dark"] .rx-card,
html[data-theme="dark"] .credential-wizard-step-number,
html[data-theme="dark"] .credential-dropzone.dragover,
html[data-theme="dark"] .role-dashboard-table-card .card-header {
  background: var(--mf-surface-muted) !important;
  border-color: var(--mf-border) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .patient-dashboard-datebox strong,
html[data-theme="dark"] .vital-value,
html[data-theme="dark"] .meta-value,
html[data-theme="dark"] .rx-num {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .vital-label,
html[data-theme="dark"] .meta-label,
html[data-theme="dark"] .rx-text,
html[data-theme="dark"] .credential-step-heading p,
html[data-theme="dark"] .empty-note,
html[data-theme="dark"] .footer-note {
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .login-close,
html[data-theme="dark"] .cancel-link {
  color: var(--mf-muted) !important;
}

html[data-theme="dark"] .modal-close:hover,
html[data-theme="dark"] .login-close:hover,
html[data-theme="dark"] .cancel-link:hover {
  background: #102033 !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .otp-row input,
html[data-theme="dark"] .otp-digit,
html[data-theme="dark"] .suffix-select {
  background: var(--mf-input) !important;
  border-color: var(--mf-border-strong) !important;
  color: var(--mf-text) !important;
}

html[data-theme="dark"] .step-circle.active,
html[data-theme="dark"] .otp-digit.filled {
  background: #10284a !important;
  border-color: var(--mf-primary) !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] .fc-today-circle {
  background: #10284a !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] .medflow-nonwork-day {
  background: #080d14 !important;
  color: var(--mf-subtle) !important;
}

/* Some legacy modules construct small panels with inline light-only colors.
   These exact-value fallbacks keep those runtime-generated elements readable
   until their markup can be migrated to semantic component classes. */
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background: #f1f5f9"] {
  background: var(--mf-surface-muted) !important;
  border-color: var(--mf-border) !important;
}

html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:#fff;"],
html[data-theme="dark"] [style*="background: #fff;"] {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border) !important;
}

html[data-theme="dark"] [style*="color:#0f172a"],
html[data-theme="dark"] [style*="color: #0f172a"],
html[data-theme="dark"] [style*="color:#1e293b"],
html[data-theme="dark"] [style*="color: #1e293b"],
html[data-theme="dark"] [style*="color:#334155"],
html[data-theme="dark"] [style*="color: #334155"] {
  color: var(--mf-text) !important;
}

html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color: #475569"],
html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color: #64748b"] {
  color: var(--mf-muted) !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"] body [style] { background: transparent !important; 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; }
}