/**
 * MedConnect — Unified Light / Dark Theme System
 * Applies to patient, provider, and admin portals.
 */

html {
  color-scheme: light;
}

html[data-theme-resolved='dark'] {
  color-scheme: dark;
}

html[data-theme-resolved='light'] {
  --mc-theme-bg: #f8fafc;
  --mc-theme-surface: #ffffff;
  --mc-theme-surface-2: #f1f5f9;
  --mc-theme-text: #1e293b;
  --mc-theme-text-secondary: #64748b;
  --mc-theme-border: #e2e8f0;
  --mc-theme-input-bg: #ffffff;
  --mc-theme-input-border: #cbd5e1;
  --mc-theme-sidebar: var(--mc-aqua-medium, #018a93);
  --mc-theme-header: #ffffff;
  --mc-theme-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  --mc-bubble-patient: #dbeafe;
  --mc-bubble-provider: #ccfbf1;
  --mc-bubble-patient-text: #1e3a5f;
  --mc-bubble-provider-text: #134e4a;
}

html[data-theme-resolved='dark'] {
  --mc-bg: #0B1220;
  --mc-ice-blue: #0B1220;
  --mc-white: #151F2E;
  --mc-surface: #151F2E;
  --mc-border-thin: #243347;
  --mc-border: #243347;
  --mc-navy-dark: #E8F0F7;
  --mc-slate-muted: #8FAABF;
  --mc-aqua-soft: #0D1E30;
  --mc-aqua-light: rgba(0,151,167,0.15);

  --mc-theme-bg: #0B1220;
  --mc-theme-surface: #151F2E;
  --mc-theme-card: #1A2537;
  --mc-theme-surface-2: #1A2537;
  --mc-theme-text: #E8F0F7;
  --mc-theme-text-secondary: #8FAABF;
  --mc-theme-border: #243347;
  --mc-theme-input-bg: #1A2537;
  --mc-theme-input-border: #2D4160;
  --mc-theme-sidebar: #0B1220;
  --mc-theme-header: #151F2E;
  --mc-theme-shadow: 0 2px 12px rgba(0,0,0,0.40);
  --mc-theme-blue: #3B82F6;
  --mc-theme-green: #10B981;
  --mc-theme-orange: #F59E0B;
  --mc-theme-red: #EF4444;
  --mc-bubble-patient: #1a2f4a;
  --mc-bubble-provider: #0d2e29;
  --mc-bubble-patient-text: #E8F0F7;
  --mc-bubble-provider-text: #A7F3D0;

  /* Dark-mode card shadow upgrade */
  --mc-shadow-card: 0 4px 20px rgba(0,0,0,0.30);
  --mc-shadow-float: 0 12px 40px rgba(0,0,0,0.45);
}

html[data-theme-resolved='light'] body,
html:not([data-theme-resolved]) body {
  --mc-theme-bg: #f8fafc;
  --mc-theme-surface: #ffffff;
  --mc-theme-surface-2: #f1f5f9;
  --mc-theme-text: #1e293b;
  --mc-theme-text-secondary: #64748b;
  --mc-theme-border: #e2e8f0;
  --mc-theme-input-bg: #ffffff;
  --mc-theme-input-border: #cbd5e1;
  --mc-theme-sidebar: var(--mc-aqua-medium, #018a93);
  --mc-theme-header: #ffffff;
  --mc-theme-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  --mc-bubble-patient: #dbeafe;
  --mc-bubble-provider: #ccfbf1;
  --mc-bubble-patient-text: #1e3a5f;
  --mc-bubble-provider-text: #134e4a;
}

body.patient-portal,
body.provider-body,
body.admin-body,
body.bhw-body,
body.superadmin-body {
  transition: none;
}

html[data-theme-resolved='dark'] body.patient-portal {
  background-color: #0a0a0a;
  color: #ffffff;
}

html[data-theme-resolved='dark'] body.admin-body,
html[data-theme-resolved='dark'] body.bhw-body,
html[data-theme-resolved='dark'] body.superadmin-body {
  background-color: #0a0a0a;
  color: #ffffff;
}

html[data-theme-resolved='dark'] body.provider-body {
  background-color: #0a0a0a;
  color: #ffffff;
}

/* ── Theme toggle ── */
.mc-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  pointer-events: auto;
}

.topbar {
  /* Ensure dropdown menus aren't clipped on mobile */
  overflow: visible;
}

.mc-theme-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--mc-theme-border, var(--mc-border-thin));
  border-radius: 10px;
  background: var(--mc-theme-surface, #fff);
  color: var(--mc-theme-text, var(--mc-navy-dark));
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.mc-theme-toggle__btn:hover,
.mc-theme-toggle__btn:focus-visible {
  outline: none;
  border-color: var(--mc-aqua-medium, #018a93);
  box-shadow: 0 0 0 3px rgba(1, 138, 147, 0.2);
}

.mc-theme-toggle__menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--mc-theme-border, var(--mc-border-thin));
  border-radius: 12px;
  background: var(--mc-theme-surface, #fff);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
  z-index: 12000;
  pointer-events: auto;
}

.mc-theme-toggle.is-open .mc-theme-toggle__menu {
  display: block;
}

.mc-theme-toggle__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--mc-theme-text, var(--mc-navy-dark));
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mc-theme-toggle__option:hover,
.mc-theme-toggle__option:focus-visible {
  outline: none;
  background: var(--mc-theme-surface-2, #f1f5f9);
}

.mc-theme-toggle__option.is-active {
  background: rgba(1, 138, 147, 0.12);
  color: var(--mc-aqua-medium, #018a93);
}

/* ── Header / topbar ── */
html[data-theme-resolved='dark'] .topbar,
html[data-theme-resolved='dark'] .pd-header {
  background: var(--mc-theme-header) !important;
  border-bottom-color: var(--mc-theme-border) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

html[data-theme-resolved='dark'] .topbar-title,
html[data-theme-resolved='dark'] .topbar-eyebrow,
html[data-theme-resolved='dark'] .topbar-date,
html[data-theme-resolved='dark'] .topbar-time,
html[data-theme-resolved='dark'] .pd-header-date,
html[data-theme-resolved='dark'] .pd-header-page,
html[data-theme-resolved='dark'] .pd-header-user-name,
html[data-theme-resolved='dark'] .pd-header-user-role,
html[data-theme-resolved='dark'] .pd-header-clock {
  color: var(--mc-theme-text) !important;
}

html[data-theme-resolved='dark'] .topbar-icon-btn,
html[data-theme-resolved='dark'] .topbar-logout,
html[data-theme-resolved='dark'] .pd-notif-btn,
html[data-theme-resolved='dark'] .pd-hamburger {
  color: var(--mc-theme-text-secondary) !important;
}

/* ── Sidebars ── */
html[data-theme-resolved='dark'] .sb-aqua {
  --sba-bg: #141414;
  --sba-bg-dark: #0a0a0a;
  --sba-border-r: #2a2a2a;
  background: #141414 !important;
  background-image: none !important;
}

html[data-theme-resolved='dark'] .sidebar:not(.sb-aqua),
html[data-theme-resolved='dark'] .adm-sidebar {
  background: #141414 !important;
  background-image: none !important;
}

/* ── Cards & panels ── */
html[data-theme-resolved='dark'] .mc-card,
html[data-theme-resolved='dark'] .pd-panel,
html[data-theme-resolved='dark'] .clinical-card,
html[data-theme-resolved='dark'] .msg-panel,
html[data-theme-resolved='dark'] .admin-stat-card,
html[data-theme-resolved='dark'] .provider-settings-nav,
html[data-theme-resolved='dark'] .mc-modal__dialog,
html[data-theme-resolved='dark'] .mc-notif-panel {
  background: var(--mc-theme-card, #1f2937) !important;
  border-color: var(--mc-theme-border) !important;
  color: var(--mc-theme-text);
  box-shadow: var(--mc-theme-shadow);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

html[data-theme-resolved='dark'] .pd-panel-header {
  background: var(--mc-theme-surface-2) !important;
  border-bottom-color: var(--mc-theme-border) !important;
}

html[data-theme-resolved='dark'] .pd-panel-title,
html[data-theme-resolved='dark'] .text-h1,
html[data-theme-resolved='dark'] .text-h2,
html[data-theme-resolved='dark'] .text-h3,
html[data-theme-resolved='dark'] h1,
html[data-theme-resolved='dark'] h2,
html[data-theme-resolved='dark'] h3,
html[data-theme-resolved='dark'] h4 {
  color: var(--mc-theme-text) !important;
}

html[data-theme-resolved='dark'] .text-muted,
html[data-theme-resolved='dark'] .clinical-label,
html[data-theme-resolved='dark'] .msg-preview,
html[data-theme-resolved='dark'] .msg-time {
  color: var(--mc-theme-text-secondary) !important;
}

/* ── Forms & inputs ── */
html[data-theme-resolved='dark'] .form-control,
html[data-theme-resolved='dark'] .ps-input,
html[data-theme-resolved='dark'] .ps-select,
html[data-theme-resolved='dark'] .composer input,
html[data-theme-resolved='dark'] .session-chat-composer input,
html[data-theme-resolved='dark'] select,
html[data-theme-resolved='dark'] textarea,
html[data-theme-resolved='dark'] input[type='text'],
html[data-theme-resolved='dark'] input[type='email'],
html[data-theme-resolved='dark'] input[type='password'],
html[data-theme-resolved='dark'] input[type='tel'],
html[data-theme-resolved='dark'] input[type='search'] {
  background: var(--mc-theme-input-bg) !important;
  border-color: var(--mc-theme-input-border) !important;
  color: var(--mc-theme-text) !important;
}

html[data-theme-resolved='dark'] .form-label,
html[data-theme-resolved='dark'] .ps-field label,
html[data-theme-resolved='dark'] label {
  color: var(--mc-theme-text-secondary) !important;
}

html[data-theme-resolved='dark'] .form-control:focus,
html[data-theme-resolved='dark'] .ps-input:focus,
html[data-theme-resolved='dark'] .composer input:focus {
  outline: none;
  border-color: var(--mc-theme-blue, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

/* ── Tables ── */
html[data-theme-resolved='dark'] table,
html[data-theme-resolved='dark'] .mc-table,
html[data-theme-resolved='dark'] .data-table {
  background: var(--mc-theme-surface);
  color: var(--mc-theme-text);
}

html[data-theme-resolved='dark'] th {
  background: var(--mc-theme-surface-2) !important;
  color: var(--mc-theme-text) !important;
  border-color: var(--mc-theme-border) !important;
}

html[data-theme-resolved='dark'] td {
  border-color: var(--mc-theme-border) !important;
  color: var(--mc-theme-text);
}

html[data-theme-resolved='dark'] tr:hover td {
  background: rgba(51, 65, 85, 0.35);
}

/* ── Messages ── */
html[data-theme-resolved='dark'] .patient-portal .thread-body,
html[data-theme-resolved='dark'] .thread-body {
  background: var(--mc-theme-bg) !important;
}

html[data-theme-resolved='dark'] .patient-portal .bubble.mine,
html[data-theme-resolved='dark'] .chat-bubble.patient {
  background: var(--mc-bubble-patient) !important;
  border-color: #475569 !important;
  color: var(--mc-bubble-patient-text) !important;
}

html[data-theme-resolved='dark'] .patient-portal .bubble.provider,
html[data-theme-resolved='dark'] .chat-bubble.mine {
  background: var(--mc-bubble-provider) !important;
  border-color: #0f766e !important;
  color: var(--mc-bubble-provider-text) !important;
}

html[data-theme-resolved='dark'] .patient-portal .composer,
html[data-theme-resolved='dark'] .session-chat-composer {
  background: var(--mc-theme-surface) !important;
  border-top-color: var(--mc-theme-border) !important;
}

html[data-theme-resolved='dark'] .msg-item {
  background: transparent;
  color: var(--mc-theme-text);
}

html[data-theme-resolved='dark'] .msg-item.active,
html[data-theme-resolved='dark'] .msg-item:hover {
  background: rgba(51, 65, 85, 0.45) !important;
}

html[data-theme-resolved='dark'] .msg-delete-dialog {
  background: var(--mc-theme-surface);
  color: var(--mc-theme-text);
}

html[data-theme-resolved='dark'] .msg-options-btn {
  background: var(--mc-theme-surface-2);
  border-color: var(--mc-theme-border);
  color: var(--mc-theme-text-secondary);
}

/* ── Modals & alerts ── */
html[data-theme-resolved='dark'] .mc-alert--success {
  background: #064e3b !important;
  border-color: #059669 !important;
  color: #d1fae5 !important;
}

html[data-theme-resolved='dark'] .mc-alert--error,
html[data-theme-resolved='dark'] .msg-alert.error {
  background: #450a0a !important;
  border-color: #dc2626 !important;
  color: #fecaca !important;
}

html[data-theme-resolved='dark'] .msg-alert.success {
  background: #064e3b !important;
  border-color: #059669 !important;
  color: #d1fae5 !important;
}

html[data-theme-resolved='dark'] .ps-alert.success {
  background: #064e3b;
  border-color: #059669;
  color: #d1fae5;
}

html[data-theme-resolved='dark'] .ps-alert.error {
  background: #450a0a;
  border-color: #dc2626;
  color: #fecaca;
}

html[data-theme-resolved='dark'] .ps-toast.success {
  background: #065f46;
  color: #ecfdf5;
}

html[data-theme-resolved='dark'] .ps-toast.error {
  background: #7f1d1d;
  color: #fef2f2;
}

/* ── Provider dashboard widgets ── */
html[data-theme-resolved='dark'] body.provider-body,
html[data-theme-resolved='dark'] body.provider-body .provider-main {
  background-color: #0a0a0a !important;
  color: #ffffff;
}

html[data-theme-resolved='dark'] body.provider-body .pd-panel,
html[data-theme-resolved='dark'] body.provider-body .pd-stat-card,
html[data-theme-resolved='dark'] body.provider-body .pd-queue-item,
html[data-theme-resolved='dark'] body.provider-body .pd-appt-card,
html[data-theme-resolved='dark'] body.provider-body .pd-notif-item,
html[data-theme-resolved='dark'] body.provider-body .pd-activity-item,
html[data-theme-resolved='dark'] body.provider-body .triage-card,
html[data-theme-resolved='dark'] body.provider-body .queue-card {
  background: #1c1c1c !important;
  border-color: #2a2a2a !important;
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.5);
}

html[data-theme-resolved='dark'] .provider-settings-layout .ps-input,
html[data-theme-resolved='dark'] .provider-settings-layout .ps-select {
  background: var(--mc-theme-input-bg) !important;
  border-color: var(--mc-theme-input-border) !important;
  color: var(--mc-theme-text) !important;
}

html[data-theme-resolved='dark'] .provider-settings-nav .pd-nav-item {
  color: var(--mc-theme-text-secondary);
}

html[data-theme-resolved='dark'] .provider-settings-nav .pd-nav-item.active,
html[data-theme-resolved='dark'] .provider-settings-nav .pd-nav-item:hover {
  background: rgba(45, 212, 191, 0.12);
  color: #5eead4;
}

/* ── Video consultation session ── */
html[data-theme-resolved='dark'] .session-layout,
html[data-theme-resolved='dark'] .session-panel,
html[data-theme-resolved='dark'] .session-sidebar,
html[data-theme-resolved='dark'] .session-main {
  background: var(--mc-theme-bg) !important;
  color: var(--mc-theme-text);
}

html[data-theme-resolved='dark'] .session-card,
html[data-theme-resolved='dark'] .session-info-card {
  background: var(--mc-theme-surface) !important;
  border-color: var(--mc-theme-border) !important;
}

/* ── Greeting / hero banners ── */
html[data-theme-resolved='dark'] .greeting-banner,
html[data-theme-resolved='dark'] .patient-greeting {
  background: var(--mc-theme-surface) !important;
  border-color: var(--mc-theme-border) !important;
}

html[data-theme-resolved='dark'] .patient-greeting__name,
html[data-theme-resolved='dark'] .clinical-value {
  color: var(--mc-theme-text) !important;
}

/* ── Appearance settings card ── */
.mc-appearance-card .mc-theme-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--mc-theme-border, var(--mc-border-thin));
  border-radius: 10px;
  background: var(--mc-theme-input-bg, #fff);
  color: var(--mc-theme-text, var(--mc-navy-dark));
  font-size: 14px;
}

/* Provider header: allow dropdowns above content */
body.provider-body .pd-header {
  overflow: visible;
  z-index: 500;
}

body.provider-body .mc-notif-wrap {
  position: relative;
  z-index: 510;
}

body.provider-body .mc-theme-toggle {
  position: relative;
  z-index: 510;
}

/* Patient clinical header: same dropdown stacking */
body.patient-portal .topbar--clinical {
  overflow: visible;
  z-index: 500;
}

body.patient-portal .mc-notif-wrap,
body.patient-portal .mc-theme-toggle {
  position: relative;
  z-index: 510;
}

.pd-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

html[data-theme-resolved='dark'] .bhw-card,
html[data-theme-resolved='dark'] .bhw-metric-card {
  background: var(--mc-theme-surface) !important;
  border-color: var(--mc-theme-border) !important;
  color: var(--mc-theme-text);
}

html[data-theme-resolved='dark'] body.bhw-body {
  background: var(--mc-theme-bg) !important;
  color: var(--mc-theme-text) !important;
}

/* ── Buttons (dark) ── */
html[data-theme-resolved='dark'] .btn-primary,
html[data-theme-resolved='dark'] .mc-btn--primary,
html[data-theme-resolved='dark'] .ps-btn-primary {
  background: var(--mc-theme-blue, #2563eb) !important;
  border-color: var(--mc-theme-blue, #2563eb) !important;
  color: #f8fafc !important;
}

html[data-theme-resolved='dark'] .btn-primary:hover,
html[data-theme-resolved='dark'] .mc-btn--primary:hover,
html[data-theme-resolved='dark'] .ps-btn-primary:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

html[data-theme-resolved='dark'] .btn-success,
html[data-theme-resolved='dark'] .mc-btn--success {
  background: var(--mc-theme-green, #16a34a) !important;
  border-color: var(--mc-theme-green, #16a34a) !important;
  color: #f8fafc !important;
}

html[data-theme-resolved='dark'] .btn-warning,
html[data-theme-resolved='dark'] .mc-btn--warning {
  background: var(--mc-theme-orange, #f59e0b) !important;
  border-color: var(--mc-theme-orange, #f59e0b) !important;
  color: #0f172a !important;
}

html[data-theme-resolved='dark'] .btn-danger,
html[data-theme-resolved='dark'] .mc-btn--danger {
  background: var(--mc-theme-red, #dc2626) !important;
  border-color: var(--mc-theme-red, #dc2626) !important;
  color: #f8fafc !important;
}

html[data-theme-resolved='dark'] .btn-secondary,
html[data-theme-resolved='dark'] .mc-btn--secondary {
  background: var(--mc-theme-card, #1f2937) !important;
  border-color: var(--mc-theme-border) !important;
  color: var(--mc-theme-text) !important;
}

html[data-theme-resolved='dark'] .btn-secondary:hover,
html[data-theme-resolved='dark'] .mc-btn--secondary:hover {
  background: #334155 !important;
}

/* ── Alerts & toasts (dark) ── */
html[data-theme-resolved='dark'] .mc-alert--info,
html[data-theme-resolved='dark'] .mc-alert--information {
  background: rgba(37, 99, 235, 0.15) !important;
  border-color: var(--mc-theme-blue, #2563eb) !important;
  color: #bfdbfe !important;
}

html[data-theme-resolved='dark'] .mc-alert--warning {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: var(--mc-theme-orange, #f59e0b) !important;
  color: #fde68a !important;
}

/* ── Calendar (dark) ── */
html[data-theme-resolved='dark'] .fc,
html[data-theme-resolved='dark'] .calendar-grid,
html[data-theme-resolved='dark'] .schedule-day-block {
  background: var(--mc-theme-card, #1f2937) !important;
  border-color: var(--mc-theme-border) !important;
  color: var(--mc-theme-text) !important;
}

html[data-theme-resolved='dark'] .fc-col-header-cell,
html[data-theme-resolved='dark'] .calendar-day-header {
  background: var(--mc-theme-surface) !important;
  color: var(--mc-theme-text-secondary) !important;
}