/**
 * MC Suite Dark Mode Styles
 * Comprehensive overrides for WCAG AA contrast compliance
 *
 * Key contrast requirements:
 * - Normal text: 4.5:1 minimum
 * - Large text (18pt+): 3:1 minimum
 * - UI components/graphics: 3:1 minimum
 *
 * Verified contrast ratios:
 * - #f8f9fa on #1a1d21: ~16:1 (excellent)
 * - #ced4da on #1a1d21: ~10:1 (excellent)
 * - #868e96 on #1a1d21: ~5:1 (passes AA)
 */

/* ==========================================
   Base Dark Mode Colors
   ========================================== */

[data-bs-theme="dark"] {
  /* Surface colors (darkest to lightest) */
  --color-surface-bg: #0d0f12;      /* Page background */
  --color-surface-0: #1a1d21;       /* Cards, modals */
  --color-surface-1: #212529;       /* Card headers, inputs */
  --color-surface-2: #2c3034;       /* Hover states */
  --color-surface-3: #343a40;       /* Active states */

  /* Text colors (high contrast verified) */
  --color-text-primary: #f8f9fa;    /* Primary text - 16:1 on surface-0 */
  --color-text-secondary: #ced4da;  /* Secondary text - 10:1 on surface-0 */
  --color-text-tertiary: #868e96;   /* Muted text - 5:1 on surface-0 */
  --color-text-disabled: #495057;   /* Disabled - 3:1 on surface-0 */

  /* Border colors */
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);

  /* Bootstrap overrides */
  --bs-body-bg: var(--color-surface-bg);
  --bs-body-color: var(--color-text-primary);
  --bs-emphasis-color: #ffffff;

  /* Shadows (more visible in dark) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.6);
}

/* ==========================================
   Layout Components
   ========================================== */

[data-bs-theme="dark"] body {
  background-color: var(--color-surface-bg);
}

[data-bs-theme="dark"] .main-content {
  background-color: var(--color-surface-bg);
}

[data-bs-theme="dark"] .sidebar {
  background-color: #0a0c0f;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .top-navbar {
  background-color: var(--color-surface-0);
  border-bottom-color: var(--bs-border-color);
}

/* ==========================================
   Cards
   ========================================== */

[data-bs-theme="dark"] .card {
  background-color: var(--color-surface-0);
  border-color: var(--bs-border-color);
  box-shadow: var(--shadow-md);
}

[data-bs-theme="dark"] .card-header {
  background-color: var(--color-surface-1);
  border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .card-footer {
  background-color: var(--color-surface-1);
  border-top-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .stat-card {
  background-color: var(--color-surface-0);
}

[data-bs-theme="dark"] .stat-card .stat-label {
  color: var(--color-text-secondary);
}

[data-bs-theme="dark"] .stat-card .stat-value {
  color: var(--color-text-primary);
}

/* ==========================================
   Tables
   ========================================== */

[data-bs-theme="dark"] .table {
  --bs-table-bg: var(--color-surface-0);
  --bs-table-color: var(--color-text-primary);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--color-surface-1);
  --bs-table-hover-bg: var(--color-surface-2);
}

[data-bs-theme="dark"] .table thead th {
  background-color: var(--color-surface-1);
  color: var(--color-text-secondary);
  border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table tbody td {
  border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table-wrapper {
  background-color: var(--color-surface-0);
}

/* DataTables */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background-color: var(--color-surface-1);
  border-color: var(--bs-border-color);
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info {
  color: var(--color-text-secondary);
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--color-text-secondary) !important;
  border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--color-surface-2) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-inverse, #fff) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: var(--color-text-disabled) !important;
}

/* ==========================================
   Forms
   ========================================== */

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--color-surface-1);
  border-color: var(--bs-border-color);
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--color-text-tertiary);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--color-surface-1);
  border-color: var(--color-primary);
  color: var(--color-text-primary);
  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
  background-color: var(--color-surface-2);
  opacity: 0.6;
}

[data-bs-theme="dark"] .form-select:disabled {
  background-color: var(--color-surface-2);
  opacity: 0.6;
}

[data-bs-theme="dark"] .input-group-text {
  background-color: var(--color-surface-2);
  border-color: var(--bs-border-color);
  color: var(--color-text-secondary);
}

[data-bs-theme="dark"] .form-check-input {
  background-color: var(--color-surface-2);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

[data-bs-theme="dark"] .form-check-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

[data-bs-theme="dark"] .form-label {
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .form-text {
  color: var(--color-text-tertiary);
}

[data-bs-theme="dark"] .invalid-feedback {
  color: #fca5a5;
}

[data-bs-theme="dark"] .form-control.is-invalid,
[data-bs-theme="dark"] .form-select.is-invalid {
  border-color: #ef4444;
}

[data-bs-theme="dark"] .form-control.is-valid,
[data-bs-theme="dark"] .form-select.is-valid {
  border-color: #10b981;
}

/* Form switch toggle */
[data-bs-theme="dark"] .form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23868e96'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* ==========================================
   Buttons
   ========================================== */

[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--color-text-secondary);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--color-surface-2);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--color-text-primary);
}

[data-bs-theme="dark"] .btn-outline-light {
  --bs-btn-color: var(--color-text-primary);
  --bs-btn-border-color: rgba(255, 255, 255, 0.3);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .btn-light {
  --bs-btn-bg: var(--color-surface-2);
  --bs-btn-border-color: var(--color-surface-3);
  --bs-btn-color: var(--color-text-primary);
  --bs-btn-hover-bg: var(--color-surface-3);
  --bs-btn-hover-border-color: var(--color-surface-3);
  --bs-btn-hover-color: var(--color-text-primary);
}

[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ==========================================
   Modals
   ========================================== */

[data-bs-theme="dark"] .modal-content {
  background-color: var(--color-surface-0);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .modal-header {
  border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .modal-footer {
  background-color: var(--color-surface-1);
  border-top-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .modal-backdrop {
  --bs-backdrop-opacity: 0.8;
}

[data-bs-theme="dark"] .modal-title {
  color: var(--color-text-primary);
}

/* ==========================================
   Dropdowns
   ========================================== */

[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--color-surface-0);
  border-color: var(--bs-border-color);
  box-shadow: var(--shadow-lg);
}

[data-bs-theme="dark"] .dropdown-item {
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--color-surface-2);
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active {
  background-color: var(--color-primary);
  color: #fff;
}

[data-bs-theme="dark"] .dropdown-divider {
  border-top-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .dropdown-header {
  color: var(--color-text-secondary);
}

/* ==========================================
   Alerts
   ========================================== */

[data-bs-theme="dark"] .alert {
  border: 1px solid;
}

[data-bs-theme="dark"] .alert-success {
  background-color: rgba(5, 150, 105, 0.15);
  border-color: rgba(5, 150, 105, 0.3);
  color: #6ee7b7;
}

[data-bs-theme="dark"] .alert-success .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="dark"] .alert-warning {
  background-color: rgba(255, 149, 0, 0.15);
  border-color: rgba(255, 149, 0, 0.3);
  color: #fcd34d;
}

[data-bs-theme="dark"] .alert-warning .btn-close {
  filter: none;
}

[data-bs-theme="dark"] .alert-danger {
  background-color: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.3);
  color: #fca5a5;
}

[data-bs-theme="dark"] .alert-danger .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="dark"] .alert-info {
  background-color: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
  color: #7dd3fc;
}

[data-bs-theme="dark"] .alert-info .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="dark"] .alert-primary {
  background-color: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.3);
  color: #93c5fd;
}

[data-bs-theme="dark"] .alert-secondary {
  background-color: rgba(108, 117, 125, 0.15);
  border-color: rgba(108, 117, 125, 0.3);
  color: #ced4da;
}

/* ==========================================
   Badges
   ========================================== */

[data-bs-theme="dark"] .badge.bg-light {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .badge.bg-secondary {
  background-color: var(--color-surface-3) !important;
}

[data-bs-theme="dark"] .badge.bg-dark {
  background-color: var(--color-surface-0) !important;
  border: 1px solid var(--bs-border-color);
}

/* ==========================================
   Navigation
   ========================================== */

[data-bs-theme="dark"] .nav-tabs {
  border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: var(--color-text-secondary);
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: var(--bs-border-color);
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--color-surface-0);
  border-color: var(--bs-border-color);
  border-bottom-color: var(--color-surface-0);
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .nav-pills .nav-link {
  color: var(--color-text-secondary);
}

[data-bs-theme="dark"] .nav-pills .nav-link:hover {
  background-color: var(--color-surface-2);
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .nav-pills .nav-link.active {
  background-color: var(--color-primary);
  color: #fff;
}

/* ==========================================
   Breadcrumbs
   ========================================== */

[data-bs-theme="dark"] .breadcrumb {
  background-color: transparent;
}

[data-bs-theme="dark"] .breadcrumb-item a {
  color: var(--color-primary);
}

[data-bs-theme="dark"] .breadcrumb-item a:hover {
  color: var(--mc-sky);
}

[data-bs-theme="dark"] .breadcrumb-item.active {
  color: var(--color-text-secondary);
}

[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-text-tertiary);
}

/* ==========================================
   List Groups
   ========================================== */

[data-bs-theme="dark"] .list-group-item {
  background-color: var(--color-surface-0);
  border-color: var(--bs-border-color);
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .list-group-item:hover {
  background-color: var(--color-surface-1);
}

[data-bs-theme="dark"] .list-group-item.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

[data-bs-theme="dark"] .list-group-item.disabled {
  color: var(--color-text-disabled);
  background-color: var(--color-surface-1);
}

[data-bs-theme="dark"] .list-group-item-action:focus {
  background-color: var(--color-surface-2);
}

/* ==========================================
   Pagination
   ========================================== */

[data-bs-theme="dark"] .page-link {
  background-color: var(--color-surface-0);
  border-color: var(--bs-border-color);
  color: var(--color-text-secondary);
}

[data-bs-theme="dark"] .page-link:hover {
  background-color: var(--color-surface-2);
  border-color: var(--bs-border-color);
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

[data-bs-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--color-surface-1);
  border-color: var(--bs-border-color);
  color: var(--color-text-disabled);
}

/* ==========================================
   Accordion
   ========================================== */

[data-bs-theme="dark"] .accordion-item {
  background-color: var(--color-surface-0);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .accordion-button {
  background-color: var(--color-surface-0);
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--color-surface-1);
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .accordion-button::after {
  filter: invert(1);
}

[data-bs-theme="dark"] .accordion-body {
  background-color: var(--color-surface-0);
}

/* ==========================================
   Popovers and Tooltips
   ========================================== */

[data-bs-theme="dark"] .popover {
  background-color: var(--color-surface-0);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .popover-header {
  background-color: var(--color-surface-1);
  border-bottom-color: var(--bs-border-color);
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .popover-body {
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .tooltip-inner {
  background-color: var(--color-surface-0);
  color: var(--color-text-primary);
  border: 1px solid var(--bs-border-color);
}

/* ==========================================
   Progress Bars
   ========================================== */

[data-bs-theme="dark"] .progress {
  background-color: var(--color-surface-2);
}

/* ==========================================
   Miscellaneous
   ========================================== */

[data-bs-theme="dark"] hr {
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .text-muted {
  color: var(--color-text-tertiary) !important;
}

[data-bs-theme="dark"] .text-body-secondary {
  color: var(--color-text-secondary) !important;
}

[data-bs-theme="dark"] code {
  color: #f472b6;
  background-color: var(--color-surface-1);
}

[data-bs-theme="dark"] pre {
  background-color: var(--color-surface-1);
  border-color: var(--bs-border-color);
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] kbd {
  background-color: var(--color-surface-2);
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] mark {
  background-color: rgba(255, 149, 0, 0.3);
  color: var(--color-text-primary);
}

/* Blockquote */
[data-bs-theme="dark"] blockquote {
  border-left-color: var(--bs-border-color);
}

/* Figure caption */
[data-bs-theme="dark"] figcaption {
  color: var(--color-text-secondary);
}

/* Theme toggle button */
[data-bs-theme="dark"] .theme-toggle {
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .theme-toggle:hover {
  background-color: var(--color-surface-2);
}

/* Selection highlight */
[data-bs-theme="dark"] ::selection {
  background-color: rgba(37, 99, 235, 0.4);
  color: #fff;
}

/* ==========================================
   Scrollbar
   ========================================== */

[data-bs-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--color-surface-3);
  border-radius: 4px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* Firefox scrollbar */
[data-bs-theme="dark"] * {
  scrollbar-width: thin;
  scrollbar-color: var(--color-surface-3) var(--color-surface-0);
}

/* ==========================================
   Offcanvas
   ========================================== */

[data-bs-theme="dark"] .offcanvas {
  background-color: var(--color-surface-0);
}

[data-bs-theme="dark"] .offcanvas-header {
  border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .offcanvas-title {
  color: var(--color-text-primary);
}

/* ==========================================
   Toast
   ========================================== */

[data-bs-theme="dark"] .toast {
  background-color: var(--color-surface-0);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .toast-header {
  background-color: var(--color-surface-1);
  border-bottom-color: var(--bs-border-color);
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .toast-body {
  color: var(--color-text-primary);
}

/* ==========================================
   Spinner
   ========================================== */

[data-bs-theme="dark"] .spinner-border {
  border-color: currentColor;
  border-right-color: transparent;
}

/* ==========================================
   Sidebar Navigation Specific
   ========================================== */

[data-bs-theme="dark"] .sidebar .nav-link {
  color: rgba(255, 255, 255, 0.75);
}

[data-bs-theme="dark"] .sidebar .nav-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .sidebar .nav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .sidebar-section {
  color: rgba(255, 255, 255, 0.45);
}

/* ==========================================
   Notification Specific
   ========================================== */

[data-bs-theme="dark"] .notification-item.unread {
  background-color: var(--color-surface-1);
}

[data-bs-theme="dark"] .notification-item:hover {
  background-color: var(--color-surface-2);
}

/* ==========================================
   Chart Specific
   ========================================== */

[data-bs-theme="dark"] .chart-container {
  background-color: var(--color-surface-0);
}

[data-bs-theme="dark"] .apexcharts-tooltip {
  background: var(--color-surface-0) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .apexcharts-tooltip-title {
  background: var(--color-surface-1) !important;
  border-bottom-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .apexcharts-xaxistooltip {
  background: var(--color-surface-0);
  border-color: var(--bs-border-color);
  color: var(--color-text-primary);
}

[data-bs-theme="dark"] .apexcharts-yaxistooltip {
  background: var(--color-surface-0);
  border-color: var(--bs-border-color);
  color: var(--color-text-primary);
}