:root {
  --color-mode-focus: rgba(var(--bs-primary-rgb, 13, 110, 253), .34);
}

.color-mode-toggle {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--app-border, #dbe3ef);
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  background: var(--app-surface, #fff);
  color: var(--app-text, #1f2937);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.color-mode-toggle:hover { color: var(--bs-primary); transform: translateY(-1px); }
.color-mode-toggle:focus-visible { outline: 3px solid var(--color-mode-focus); outline-offset: 2px; }
.color-mode-toggle--fixed { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: 1rem; z-index: 1080; }
.color-mode-toggle--inverse { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); box-shadow: none; }
.color-mode-toggle--inverse:hover { background: rgba(255, 255, 255, .24); color: #fff; }

html[data-color-mode="dark"] {
  --app-bg: #0b1120 !important;
  --app-surface: #151e2e !important;
  --app-text: #f1f5f9 !important;
  --app-muted: #b7c3d4 !important;
  --app-border: #344258 !important;
  --brand-bg: #0b1120 !important;
  --brand-surface: #151e2e !important;
  --brand-text: #f1f5f9 !important;
  --brand-border: #344258 !important;
  --light-bg: #0b1120 !important;
  --surface-bg: #151e2e !important;
  --bs-body-bg: #0b1120;
  --bs-body-color: #f1f5f9;
  --bs-secondary-color: #c4cedc;
  --bs-tertiary-bg: #1b2638;
  --bs-border-color: #344258;
  --bs-heading-color: #f8fafc;
}

html[data-color-mode="dark"] body {
  background-color: var(--app-bg) !important;
  color: var(--app-text) !important;
  --theme-card-shadow: 0 8px 26px rgba(0, 0, 0, .26);
  --theme-menu-shadow: 0 22px 42px rgba(0, 0, 0, .36);
}

html[data-color-mode="dark"] :where(h1, h2, h3, h4, h5, h6, p, label, legend, dt, dd, th, td) { color: inherit; }
html[data-color-mode="dark"] :where(.card, .card-body, .card-header, .card-footer, .modal-content, .modal-header, .modal-footer, .dropdown-menu, .list-group-item, .accordion-item, .accordion-button, .offcanvas, .popover, .auth-card, .login-card, .form-card, .reply-box, .help-card, .article-card, .ticket-card, .stat-card) {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

html[data-color-mode="dark"] :where(.bg-white, .bg-light, [style*="background:#fff"], [style*="background: #fff"], [style*="background:#f8fafc"], [style*="background: #f8fafc"], [style*="background:#f8f9fa"], [style*="background: #f8f9fa"]) {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
}

html[data-color-mode="dark"] :where(.text-dark, .text-body, .navbar-light .navbar-nav .nav-link, .dropdown-item, .page-link) { color: var(--app-text) !important; }
html[data-color-mode="dark"] :where(.text-muted, .text-secondary, .form-text, small, .small) { color: var(--app-muted) !important; }
html[data-color-mode="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand) { color: #9fc5ff; }
html[data-color-mode="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):hover { color: #d7e7ff; }
html[data-color-mode="dark"] .auth-container .btn-link { color: #9fc5ff !important; }
html[data-color-mode="dark"] :where(.border, .border-top, .border-bottom, .border-start, .border-end, hr) { border-color: var(--app-border) !important; }

html[data-color-mode="dark"] :where(.form-control, .form-select, .input-group-text, textarea, input:not([type="checkbox"]):not([type="radio"]), select) {
  background-color: #101827 !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}
html[data-color-mode="dark"] :where(.form-control, textarea, input)::placeholder { color: #91a0b5 !important; opacity: 1; }
html[data-color-mode="dark"] :where(.form-control, .form-select):disabled,
html[data-color-mode="dark"] :where(.form-control, .form-select)[readonly] { background-color: #202b3c !important; color: #c7d2e1 !important; }
html[data-color-mode="dark"] .form-check-input { background-color: #101827; border-color: #64748b; }

html[data-color-mode="dark"] .table {
  --bs-table-bg: var(--app-surface);
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
  --bs-table-striped-bg: #1b2638;
  --bs-table-striped-color: var(--app-text);
  --bs-table-hover-bg: #223049;
  --bs-table-hover-color: #fff;
  color: var(--app-text) !important;
}
html[data-color-mode="dark"] :where(.table-light, .table-light > tr > *, thead[style]) { background: #1b2638 !important; color: #f8fafc !important; }

html[data-color-mode="dark"] .btn-outline-primary,
html[data-color-mode="dark"] .btn-outline-secondary,
html[data-color-mode="dark"] .btn-outline-success,
html[data-color-mode="dark"] .btn-outline-danger,
html[data-color-mode="dark"] .btn-outline-warning,
html[data-color-mode="dark"] .btn-outline-info { background: transparent; }
html[data-color-mode="dark"] .btn-outline-secondary { color: #d5deea; border-color: #8290a5; }
html[data-color-mode="dark"] .btn-outline-secondary:hover { background: #d5deea; color: #111827; }
html[data-color-mode="dark"] .btn-outline-primary { color: #8ab8ff; border-color: #6ea8fe; }
html[data-color-mode="dark"] .btn-outline-info { color: #67e8f9; border-color: #22d3ee; }
html[data-color-mode="dark"] .btn-outline-success { color: #6ee7b7; border-color: #34d399; }
html[data-color-mode="dark"] .btn-outline-warning { color: #fde68a; border-color: #facc15; }
html[data-color-mode="dark"] .btn-outline-danger { color: #ff9aa5; border-color: #fb7185; }
html[data-color-mode="dark"] .btn-outline-primary:hover,
html[data-color-mode="dark"] .btn-outline-info:hover,
html[data-color-mode="dark"] .btn-outline-success:hover,
html[data-color-mode="dark"] .btn-outline-warning:hover,
html[data-color-mode="dark"] .btn-outline-danger:hover { color: #0b1120; }

.demo-banner .demo-cta { color: #9a3412 !important; }
.demo-banner .demo-cta:hover { color: #7c2d12 !important; }
.bg-success-subtle.text-success { color: #0f5132 !important; }

html[data-color-mode="dark"] :where(.nav-tabs, .nav-pills) { border-color: var(--app-border); }
html[data-color-mode="dark"] .nav-tabs .nav-link { color: #c8d3e2; }
html[data-color-mode="dark"] .nav-tabs .nav-link.active { background: var(--app-surface); color: #fff; border-color: var(--app-border) var(--app-border) var(--app-surface); }
html[data-color-mode="dark"] .dropdown-item:hover,
html[data-color-mode="dark"] .dropdown-item:focus { background: #223049; color: #fff !important; }
html[data-color-mode="dark"] .accordion-button:not(.collapsed) { color: #fff; background: #223049 !important; }

html[data-color-mode="dark"] .alert-primary { background: #132d55; border-color: #24569b; color: #dbeafe; }
html[data-color-mode="dark"] .alert-info { background: #123746; border-color: #26708a; color: #cffafe; }
html[data-color-mode="dark"] .alert-success { background: #123d2f; border-color: #27795c; color: #d1fae5; }
html[data-color-mode="dark"] .alert-warning { background: #443611; border-color: #8a6c22; color: #fef3c7; }
html[data-color-mode="dark"] .alert-danger { background: #491c25; border-color: #913345; color: #fee2e2; }

html[data-color-mode="dark"] .top-navbar,
html[data-color-mode="dark"] .mobile-bottom-nav,
html[data-color-mode="dark"] .patient-bottom-nav,
html[data-color-mode="dark"] .navbar:not(.navbar-dark) { background: color-mix(in srgb, var(--app-surface) 94%, transparent) !important; border-color: var(--app-border) !important; }
html[data-color-mode="dark"] .sidebar-toggle { color: #c7d2e1; }
html[data-color-mode="dark"] .sidebar-toggle:hover { background: #223049; }
html[data-color-mode="dark"] .top-back-button { color: #c7d2e1; }
html[data-color-mode="dark"] .top-back-button:hover { background: #223049; color: #fff; }

html[data-color-mode="dark"] .hero-section { background: radial-gradient(circle at 76% 28%, rgba(var(--bs-primary-rgb), .28), transparent 34%), var(--app-bg) !important; }
html[data-color-mode="dark"] :where(.hero-title, .section-title, .navbar .nav-link, .footer-title, .auth-brand-block h1) { color: var(--app-text) !important; }
html[data-color-mode="dark"] :where(.hero-subtitle, .section-subtitle, .footer-link, .footer-description) { color: var(--app-muted) !important; }
html[data-color-mode="dark"] .section-tag { color: #a9c7ff !important; }
html[data-color-mode="dark"] :where(.feature-card, .step-card, .testimonial-card, .cta-section, .free-access-strip) { background: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; }
html[data-color-mode="dark"] footer { background: #080d18 !important; color: #e5edf8 !important; }

html[data-color-mode="dark"] .swal2-popup { background: var(--app-surface); color: var(--app-text); }
html[data-color-mode="dark"] .swal2-title,
html[data-color-mode="dark"] .swal2-html-container { color: var(--app-text); }

/* Compatibility layer for legacy views that declare their own light palette. */
html[data-color-mode="dark"] :where(
  .info-value,
  .template-title,
  .page-title,
  .stat-value,
  .card-title,
  .modal-title,
  .offcanvas-title,
  .clinical-text,
  .audio-transcription-text,
  .session-text-card-body,
  .form-control-plaintext
) { color: var(--app-text) !important; }

html[data-color-mode="dark"] :where(
  .info-label,
  .form-label,
  .dashboard-subtitle,
  .chat-session-item-meta,
  .chat-composer-meta,
  .session-analysis-meta,
  .patient-timeline-date span,
  .sidebar-settings-label
) { color: var(--app-muted) !important; }

html[data-color-mode="dark"] :where(.btn-filter) {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}
html[data-color-mode="dark"] :where(.btn-filter:hover, .btn-filter.active) {
  background: var(--bs-primary) !important;
  color: #fff !important;
  border-color: var(--bs-primary) !important;
}

html[data-color-mode="dark"] #detailTabs .nav-link {
  background: var(--app-surface) !important;
  color: var(--app-muted) !important;
  border-color: var(--app-border) !important;
}
html[data-color-mode="dark"] #detailTabs .nav-link.active {
  background: var(--app-surface) !important;
  color: #9fc5ff !important;
  border-bottom-color: var(--app-surface) !important;
}
html[data-color-mode="dark"] #detailTabs .nav-link:hover:not(.active) {
  background: #223049 !important;
  color: var(--app-text) !important;
}

html[data-color-mode="dark"] :where(.patient-bottom-nav a, .patient-bottom-nav button) {
  color: var(--app-muted) !important;
}
html[data-color-mode="dark"] :where(.patient-bottom-nav a.active, .patient-bottom-nav button.active) {
  color: #9fc5ff !important;
}

html[data-color-mode="dark"] :where(.sticky-card, .sticky-note-card) {
  background: #1b2638 !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}
html[data-color-mode="dark"] :where(.sticky-card-content, .sticky-card-meta, .sticky-card-meta a) {
  color: var(--app-text) !important;
}

html[data-color-mode="dark"] :where(
  [style*="color:#212529"], [style*="color: #212529"],
  [style*="color:#2c3e50"], [style*="color: #2c3e50"],
  [style*="color:#374151"], [style*="color: #374151"],
  [style*="color:#495057"], [style*="color: #495057"]
) { color: var(--app-text) !important; }

html[data-color-mode="dark"] :where(
  [style*="color:#6c757d"], [style*="color: #6c757d"],
  [style*="color:#667085"], [style*="color: #667085"],
  [style*="color:#64748b"], [style*="color: #64748b"]
) { color: var(--app-muted) !important; }

@media (max-width: 768px) {
  .color-mode-toggle { width: 40px; min-width: 40px; height: 40px; border-radius: 11px; }
  .color-mode-toggle--fixed { top: max(.7rem, env(safe-area-inset-top)); right: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .color-mode-toggle { transition: none; }
}