/* Dark Mode Theme for Bootstrap 5 */
:root {
  /* Light theme colors (default) */
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
  --bs-border-color: #dee2e6;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-heading-color: #212529;
  --bs-text-muted: #6c757d;
  --bs-bg-primary: #0d6efd;
  --bs-bg-secondary: #6c757d;
  --bs-bg-success: #198754;
  --bs-bg-danger: #dc3545;
  --bs-bg-warning: #ffc107;
  --bs-bg-info: #0dcaf0;
  --bs-bg-light: #f8f9fa;
  --bs-bg-dark: #212529;
  --bs-card-bg: #ffffff;
  --bs-card-border-color: #dee2e6;
  --bs-navbar-bg: #f8f9fa;
  --bs-navbar-color: #212529;
  --bs-navbar-brand-color: #212529;
  --bs-navbar-brand-hover-color: #0d6efd;
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-border-color: #dee2e6;
  --bs-dropdown-link-color: #212529;
  --bs-dropdown-link-hover-bg: #f8f9fa;
  --bs-form-control-bg: #ffffff;
  --bs-form-control-border-color: #dee2e6;
  --bs-form-control-color: #212529;
  --bs-form-control-focus-border-color: #86b7fe;
  --bs-form-control-focus-bg: #ffffff;
  --bs-table-bg: #ffffff;
  --bs-table-border-color: #dee2e6;
  --bs-table-striped-bg: #f8f9fa;
  --bs-modal-bg: #ffffff;
  --bs-modal-border-color: #dee2e6;
  --bs-tooltip-bg: #212529;
  --bs-popover-bg: #ffffff;
  --bs-popover-border-color: #dee2e6;
  --bs-alert-bg: #f8f9fa;
  --bs-alert-border-color: #dee2e6;
  --bs-badge-bg: #6c757d;
  --bs-progress-bg: #e9ecef;
  --bs-list-group-bg: #ffffff;
  --bs-list-group-border-color: #dee2e6;
  --bs-breadcrumb-bg: #f8f9fa;
  --bs-pagination-bg: #ffffff;
  --bs-pagination-border-color: #dee2e6;
  --bs-pagination-color: #0d6efd;
  --bs-pagination-hover-bg: #e9ecef;
  --bs-pagination-hover-border-color: #dee2e6;
  --bs-pagination-hover-color: #0a58ca;
  --bs-pagination-active-bg: #0d6efd;
  --bs-pagination-active-border-color: #0d6efd;
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-disabled-bg: #ffffff;
  --bs-pagination-disabled-border-color: #dee2e6;
  --bs-pagination-disabled-color: #6c757d;
  --bs-close-color: #000000;
  --bs-close-hover-color: #000000;
  --bs-code-color: #d63384;
  --bs-kbd-bg: #f8f9fa;
  --bs-kbd-color: #212529;
  --bs-pre-color: #212529;
  --bs-pre-bg: #f8f9fa;
  --bs-blockquote-border-color: #dee2e6;
  --bs-hr-color: #dee2e6;
  --bs-mark-bg: #fff3cd;
  --bs-mark-color: #212529;
  --bs-small-color: #6c757d;
  --bs-text-decoration-color: #6c757d;
  --bs-text-muted: #6c757d;
  --bs-text-reset: #6c757d;
  --bs-text-emphasis: #212529;
  --bs-bg-opacity: 1;
  --bs-border-opacity: 1;
  --bs-text-opacity: 1;
}

/* Dark theme colors – Material Design 2 compliant
   https://m2.material.io/design/color/dark-theme.html
   - Base surface: #121212 (dark grey, not black)
   - Elevation: higher elevation = lighter via white overlay (0–16%)
   - Text: 87% high emphasis, 60% medium, 38% disabled
   - Desaturated primary (200 tone) for WCAG AA
   - Error: #CF6679 (Material baseline)
*/
[data-bs-theme="dark"] {
  /* M2 baseline surface – recommended #121212 */
  --m2-surface: #121212;
  /* Elevation overlays (white % on surface): 0dp→0%, 1dp→5%, 2dp→7%, 4dp→9%, 8dp→12%, 12dp→14%, 24dp→16% */
  --m2-elevation-0dp: #121212;
  --m2-elevation-1dp: #1E1E1E;
  --m2-elevation-2dp: #222222;
  --m2-elevation-4dp: #252525;
  --m2-elevation-8dp: #2C2C2C;
  --m2-elevation-12dp: #2E2E2E;
  --m2-elevation-24dp: #333333;

  /* Body = background (0dp) */
  --bs-body-bg: var(--m2-surface);
  /* High-emphasis text: 87% white (≈ rgba(255,255,255,0.87)) */
  --bs-body-color: rgba(255, 255, 255, 0.87);
  --bs-border-color: rgba(255, 255, 255, 0.12);
  /* Primary 200 tone – desaturated for accessibility */
  --bs-link-color: #90CAF9;
  --bs-link-hover-color: #BBDEFB;
  /* Medium-emphasis: 60% white */
  --bs-text-muted: rgba(255, 255, 255, 0.6);
  --bs-heading-color: rgba(255, 255, 255, 0.87);
  /* Primary/secondary – M2 200 tones (desaturated for WCAG AA) */
  --bs-primary: #90CAF9;
  --bs-secondary: #78909C;
  --bs-primary-rgb: 144, 202, 249;
  --bs-secondary-rgb: 120, 144, 156;
  --bs-bg-primary: #90CAF9;
  --bs-bg-secondary: #78909C;
  --bs-success: #81C784;
  --bs-danger: #CF6679;
  --bs-warning: #FFB74D;
  --bs-info: #64B5F6;
  --bs-bg-success: #81C784;
  --bs-bg-danger: #CF6679;
  --bs-bg-warning: #FFB74D;
  --bs-bg-info: #64B5F6;
  --bs-bg-light: var(--m2-elevation-1dp);
  --bs-bg-dark: var(--m2-elevation-2dp);
  /* Cards, modals, dropdowns = elevated surfaces */
  --bs-card-bg: var(--m2-elevation-1dp);
  --bs-card-border-color: rgba(255, 255, 255, 0.12);
  --bs-navbar-bg: var(--m2-elevation-4dp);
  --bs-navbar-color: rgba(255, 255, 255, 0.87);
  --bs-navbar-brand-color: rgba(255, 255, 255, 0.87);
  --bs-navbar-brand-hover-color: #90CAF9;
  --bs-dropdown-bg: var(--m2-elevation-8dp);
  --bs-dropdown-border-color: rgba(255, 255, 255, 0.12);
  --bs-dropdown-link-color: rgba(255, 255, 255, 0.87);
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.08);
  --bs-form-control-bg: var(--m2-elevation-2dp);
  --bs-form-control-border-color: rgba(255, 255, 255, 0.38);
  --bs-form-control-color: rgba(255, 255, 255, 0.87);
  --bs-form-control-focus-border-color: #90CAF9;
  --bs-form-control-focus-bg: var(--m2-elevation-2dp);
  --bs-table-bg: var(--m2-elevation-1dp);
  --bs-table-border-color: rgba(255, 255, 255, 0.12);
  --bs-table-striped-bg: var(--m2-elevation-2dp);
  --bs-modal-bg: var(--m2-elevation-8dp);
  --bs-modal-border-color: rgba(255, 255, 255, 0.12);
  --bs-tooltip-bg: var(--m2-elevation-24dp);
  --bs-popover-bg: var(--m2-elevation-8dp);
  --bs-popover-border-color: rgba(255, 255, 255, 0.12);
  --bs-alert-bg: var(--m2-elevation-2dp);
  --bs-alert-border-color: rgba(255, 255, 255, 0.12);
  --bs-badge-bg: #78909C;
  --bs-progress-bg: var(--m2-elevation-2dp);
  --bs-list-group-bg: var(--m2-elevation-1dp);
  --bs-list-group-border-color: rgba(255, 255, 255, 0.12);
  --bs-breadcrumb-bg: var(--m2-elevation-1dp);
  --bs-pagination-bg: var(--m2-elevation-2dp);
  --bs-pagination-border-color: rgba(255, 255, 255, 0.12);
  --bs-pagination-color: #90CAF9;
  --bs-pagination-hover-bg: rgba(255, 255, 255, 0.08);
  --bs-pagination-hover-border-color: rgba(255, 255, 255, 0.38);
  --bs-pagination-hover-color: #BBDEFB;
  --bs-pagination-active-bg: #90CAF9;
  --bs-pagination-active-border-color: #90CAF9;
  --bs-pagination-active-color: #121212;
  --bs-pagination-disabled-bg: var(--m2-elevation-1dp);
  --bs-pagination-disabled-border-color: rgba(255, 255, 255, 0.12);
  --bs-pagination-disabled-color: rgba(255, 255, 255, 0.38);
  --bs-close-color: rgba(255, 255, 255, 0.87);
  --bs-close-hover-color: rgba(255, 255, 255, 1);
  --bs-code-color: #CE93D8;
  --bs-kbd-bg: var(--m2-elevation-4dp);
  --bs-kbd-color: rgba(255, 255, 255, 0.87);
  --bs-pre-color: rgba(255, 255, 255, 0.87);
  --bs-pre-bg: var(--m2-elevation-2dp);
  --bs-blockquote-border-color: rgba(255, 255, 255, 0.12);
  --bs-hr-color: rgba(255, 255, 255, 0.12);
  --bs-mark-bg: rgba(255, 235, 59, 0.3);
  --bs-mark-color: rgba(255, 255, 255, 0.87);
  --bs-small-color: rgba(255, 255, 255, 0.6);
  --bs-text-decoration-color: rgba(255, 255, 255, 0.6);
  --bs-text-muted: rgba(255, 255, 255, 0.6);
  --bs-text-reset: rgba(255, 255, 255, 0.6);
  --bs-text-emphasis: rgba(255, 255, 255, 0.87);
}

/* Apply CSS custom properties to Bootstrap components */
body {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--bs-heading-color) !important;
}

.text-muted {
  color: var(--bs-text-muted) !important;
}

/* Links — skip navbar / button controls (theme-engine styles those) */
a:not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.btn):not(.theme-picker-trigger) {
  color: var(--bs-link-color) !important;
}

a:not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.btn):not(.theme-picker-trigger):hover {
  color: var(--bs-link-hover-color) !important;
}

/* Cards */
.card {
  background-color: var(--bs-card-bg) !important;
  border-color: var(--bs-card-border-color) !important;
}

.card-header {
  background-color: var(--bs-bg-light) !important;
  border-bottom-color: var(--bs-card-border-color) !important;
}

.card-footer {
  background-color: var(--bs-bg-light) !important;
  border-top-color: var(--bs-card-border-color) !important;
}

/* Navigation */
.navbar {
  background-color: var(--bs-navbar-bg) !important;
}

.navbar-brand {
  color: var(--bs-navbar-brand-color) !important;
}

.navbar-brand:hover {
  color: var(--bs-navbar-brand-hover-color) !important;
}

.navbar-nav .nav-link {
  color: var(--bs-navbar-color) !important;
}

.navbar-nav .nav-link:hover {
  color: var(--bs-link-hover-color) !important;
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--bs-dropdown-bg) !important;
  border-color: var(--bs-dropdown-border-color) !important;
}

.dropdown-item {
  color: var(--bs-dropdown-link-color) !important;
}

.dropdown-item:hover {
  background-color: var(--bs-dropdown-link-hover-bg) !important;
  color: var(--bs-dropdown-link-color) !important;
}

/* Forms */
.form-control, .form-select {
  background-color: var(--bs-form-control-bg) !important;
  border-color: var(--bs-form-control-border-color) !important;
  color: var(--bs-form-control-color) !important;
}

.form-control:focus, .form-select:focus {
  background-color: var(--bs-form-control-focus-bg) !important;
  border-color: var(--bs-form-control-focus-border-color) !important;
  color: var(--bs-form-control-color) !important;
}

.form-label {
  color: var(--bs-body-color) !important;
}

.form-text {
  color: var(--bs-text-muted) !important;
}

/* Tables */
.table {
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-body-color) !important;
}

.table th {
  background-color: var(--bs-bg-light) !important;
  border-color: var(--bs-table-border-color) !important;
  color: var(--bs-heading-color) !important;
}

.table td {
  border-color: var(--bs-table-border-color) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--bs-table-striped-bg) !important;
}

/* Modals */
.modal-content {
  background-color: var(--bs-modal-bg) !important;
  border-color: var(--bs-modal-border-color) !important;
}

.modal-header {
  border-bottom-color: var(--bs-modal-border-color) !important;
}

.modal-footer {
  border-top-color: var(--bs-modal-border-color) !important;
}

/* Alerts */
.alert {
  background-color: var(--bs-alert-bg) !important;
  border-color: var(--bs-alert-border-color) !important;
  color: var(--bs-body-color) !important;
}

/* List groups */
.list-group-item {
  background-color: var(--bs-list-group-bg) !important;
  border-color: var(--bs-list-group-border-color) !important;
  color: var(--bs-body-color) !important;
}

/* Pagination */
.page-link {
  background-color: var(--bs-pagination-bg) !important;
  border-color: var(--bs-pagination-border-color) !important;
  color: var(--bs-pagination-color) !important;
}

.page-link:hover {
  background-color: var(--bs-pagination-hover-bg) !important;
  border-color: var(--bs-pagination-hover-border-color) !important;
  color: var(--bs-pagination-hover-color) !important;
}

.page-item.active .page-link {
  background-color: var(--bs-pagination-active-bg) !important;
  border-color: var(--bs-pagination-active-border-color) !important;
  color: var(--bs-pagination-active-color) !important;
}

.page-item.disabled .page-link {
  background-color: var(--bs-pagination-disabled-bg) !important;
  border-color: var(--bs-pagination-disabled-border-color) !important;
  color: var(--bs-pagination-disabled-color) !important;
}

/* Breadcrumbs */
.breadcrumb {
  background-color: var(--bs-breadcrumb-bg) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--bs-text-muted) !important;
}

/* Code blocks */
code {
  color: var(--bs-code-color) !important;
}

pre {
  background-color: var(--bs-pre-bg) !important;
  color: var(--bs-pre-color) !important;
}

kbd {
  background-color: var(--bs-kbd-bg) !important;
  color: var(--bs-kbd-color) !important;
}

/* Blockquotes */
.blockquote {
  border-left-color: var(--bs-blockquote-border-color) !important;
}

/* Horizontal rules */
hr {
  border-color: var(--bs-hr-color) !important;
}

/* Mark text */
mark {
  background-color: var(--bs-mark-bg) !important;
  color: var(--bs-mark-color) !important;
}

/* Small text */
small {
  color: var(--bs-small-color) !important;
}

/* Progress bars */
.progress {
  background-color: var(--bs-progress-bg) !important;
}

/* Tooltips */
.tooltip-inner {
  background-color: var(--bs-tooltip-bg) !important;
}

/* Popovers */
.popover {
  background-color: var(--bs-popover-bg) !important;
  border-color: var(--bs-popover-border-color) !important;
}

.popover-header {
  background-color: var(--bs-bg-light) !important;
  border-bottom-color: var(--bs-popover-border-color) !important;
}

/* Close button */
.btn-close {
  filter: var(--bs-close-color) !important;
}

/* Custom scrollbar – M2 dark theme */
[data-bs-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--m2-surface);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Smooth transitions for all elements */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Focus states */
*:focus {
  outline: 2px solid var(--bs-link-color);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background-color: var(--bs-link-color);
  color: #ffffff;
}

/* M2 disabled states: 12% white for fills/outlines, 38% for labels */
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.38) !important;
}

[data-bs-theme="dark"] .btn:disabled {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.38) !important;
}

/* Dark mode specific overrides */
[data-bs-theme="dark"] .bg-light {
  background-color: var(--m2-elevation-1dp) !important;
}

[data-bs-theme="dark"] .text-dark {
  color: rgba(255, 255, 255, 0.87) !important;
}

[data-bs-theme="dark"] .border-light {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Card elevation – 1dp base, header/footer slightly elevated */
[data-bs-theme="dark"] .card-header {
  background-color: var(--m2-elevation-2dp) !important;
}

[data-bs-theme="dark"] .card-footer {
  background-color: var(--m2-elevation-2dp) !important;
}