/* ==========================================================================
   DeltaSmart Design Tokens
   CSS Custom Properties for the design system foundation.
   All UI components should reference these tokens instead of hardcoded values.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Fonts: Open Sans
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/* ==========================================================================
   LIGHT MODE (default)
   ========================================================================== */
:root {
  /* --------------------------------------------------------------------------
     Brand Colors
     -------------------------------------------------------------------------- */
  --ds-brand-primary: #2ea3f2;
  --ds-brand-primary-hover: #1a8fd8;
  --ds-brand-primary-active: #1580c4;
  --ds-brand-primary-subtle: rgba(46, 163, 242, 0.1);
  --ds-brand-primary-rgb: 46, 163, 242;

  --ds-brand-accent: #82c0c7;
  --ds-brand-accent-hover: #6db1b9;
  --ds-brand-accent-active: #5ca3ab;
  --ds-brand-accent-subtle: rgba(130, 192, 199, 0.1);
  --ds-brand-accent-rgb: 130, 192, 199;

  /* --------------------------------------------------------------------------
     Semantic Colors
     -------------------------------------------------------------------------- */
  --ds-success: #16a34a;
  --ds-success-hover: #15803d;
  --ds-success-subtle: rgba(22, 163, 74, 0.1);
  --ds-success-rgb: 22, 163, 74;

  --ds-warning: #f59e0b;
  --ds-warning-hover: #d97706;
  --ds-warning-subtle: rgba(245, 158, 11, 0.1);
  --ds-warning-rgb: 245, 158, 11;

  --ds-danger: #dc2626;
  --ds-danger-hover: #b91c1c;
  --ds-danger-subtle: rgba(220, 38, 38, 0.1);
  --ds-danger-rgb: 220, 38, 38;

  --ds-info: #0ea5e9;
  --ds-info-hover: #0284c7;
  --ds-info-subtle: rgba(14, 165, 233, 0.1);
  --ds-info-rgb: 14, 165, 233;

  /* --------------------------------------------------------------------------
     Neutral Scale (Gray)
     -------------------------------------------------------------------------- */
  --ds-gray-50:  #f9fafb;
  --ds-gray-100: #f3f4f6;
  --ds-gray-200: #e5e7eb;
  --ds-gray-300: #d1d5db;
  --ds-gray-400: #9ca3af;
  --ds-gray-500: #6b7280;
  --ds-gray-600: #4b5563;
  --ds-gray-700: #374151;
  --ds-gray-800: #1f2937;
  --ds-gray-900: #111827;

  /* --------------------------------------------------------------------------
     Surface Colors
     -------------------------------------------------------------------------- */
  --ds-surface-body: #f5f7fa;
  --ds-surface-page: #ffffff;
  --ds-surface-card: #ffffff;
  --ds-surface-raised: #ffffff;
  --ds-surface-overlay: #ffffff;
  --ds-surface-sunken: #f3f4f6;
  --ds-surface-sidebar: #1f2937;

  /* --------------------------------------------------------------------------
     Border Colors
     -------------------------------------------------------------------------- */
  --ds-border-default: #e5e7eb;
  --ds-border-muted: #f3f4f6;
  --ds-border-strong: #d1d5db;
  --ds-border-focus: var(--ds-brand-primary);

  /* --------------------------------------------------------------------------
     Text Colors
     -------------------------------------------------------------------------- */
  --ds-text-primary: #111827;
  --ds-text-secondary: #4b5563;
  --ds-text-muted: #6b7280;
  --ds-text-disabled: #9ca3af;
  --ds-text-on-primary: #ffffff;
  --ds-text-on-dark: #f9fafb;
  --ds-text-link: var(--ds-brand-primary);
  --ds-text-link-hover: var(--ds-brand-primary-hover);

  /* --------------------------------------------------------------------------
     Typography
     -------------------------------------------------------------------------- */
  --ds-font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ds-font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
    monospace;

  /* Font sizes */
  --ds-font-size-xs:   0.75rem;   /* 12px */
  --ds-font-size-sm:   0.8125rem; /* 13px */
  --ds-font-size-base: 0.875rem;  /* 14px */
  --ds-font-size-md:   1rem;      /* 16px */
  --ds-font-size-lg:   1.125rem;  /* 18px */
  --ds-font-size-xl:   1.25rem;   /* 20px */
  --ds-font-size-2xl:  1.5rem;    /* 24px */
  --ds-font-size-3xl:  1.875rem;  /* 30px */

  /* Font weights */
  --ds-font-weight-light:    300;
  --ds-font-weight-regular:  400;
  --ds-font-weight-medium:   500;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold:     700;
  --ds-font-weight-extrabold: 800;

  /* Line heights */
  --ds-line-height-tight:  1.25;
  --ds-line-height-snug:   1.375;
  --ds-line-height-normal: 1.5;
  --ds-line-height-relaxed: 1.625;
  --ds-line-height-loose:  2;

  /* --------------------------------------------------------------------------
     Spacing (4px base)
     -------------------------------------------------------------------------- */
  --ds-space-0:   0;
  --ds-space-px:  1px;
  --ds-space-0-5: 0.125rem; /* 2px */
  --ds-space-1:   0.25rem;  /* 4px */
  --ds-space-1-5: 0.375rem; /* 6px */
  --ds-space-2:   0.5rem;   /* 8px */
  --ds-space-2-5: 0.625rem; /* 10px */
  --ds-space-3:   0.75rem;  /* 12px */
  --ds-space-4:   1rem;     /* 16px */
  --ds-space-5:   1.25rem;  /* 20px */
  --ds-space-6:   1.5rem;   /* 24px */
  --ds-space-8:   2rem;     /* 32px */
  --ds-space-10:  2.5rem;   /* 40px */
  --ds-space-12:  3rem;     /* 48px */
  --ds-space-16:  4rem;     /* 64px */
  --ds-space-20:  5rem;     /* 80px */
  --ds-space-24:  6rem;     /* 96px */

  /* --------------------------------------------------------------------------
     Border Radius
     -------------------------------------------------------------------------- */
  --ds-radius-none: 0;
  --ds-radius-sm:   0.25rem;   /* 4px */
  --ds-radius-md:   0.375rem;  /* 6px */
  --ds-radius-lg:   0.5rem;    /* 8px */
  --ds-radius-xl:   0.75rem;   /* 12px */
  --ds-radius-2xl:  1rem;      /* 16px */
  --ds-radius-full: 9999px;

  /* --------------------------------------------------------------------------
     Shadows (Elevation)
     -------------------------------------------------------------------------- */
  --ds-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --ds-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --ds-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --ds-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --ds-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --ds-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
  --ds-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --ds-shadow-none: 0 0 0 0 transparent;

  /* --------------------------------------------------------------------------
     Transitions
     -------------------------------------------------------------------------- */
  --ds-duration-instant:  0ms;
  --ds-duration-fast:     100ms;
  --ds-duration-normal:   200ms;
  --ds-duration-slow:     300ms;
  --ds-duration-slower:   500ms;

  --ds-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ds-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ds-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --ds-transition-fast:   all 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-normal: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-slow:   all 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --------------------------------------------------------------------------
     Z-Index Scale
     -------------------------------------------------------------------------- */
  --ds-z-deep:      -1;
  --ds-z-base:      0;
  --ds-z-raised:    1;
  --ds-z-dropdown:  1000;
  --ds-z-sticky:    1020;
  --ds-z-fixed:     1030;
  --ds-z-sidebar:   1035;
  --ds-z-backdrop:  1040;
  --ds-z-modal:     1050;
  --ds-z-popover:   1060;
  --ds-z-tooltip:   1070;
  --ds-z-toast:     1080;

  /* --------------------------------------------------------------------------
     Form / Input Tokens
     -------------------------------------------------------------------------- */
  --ds-input-bg: #ffffff;
  --ds-input-border: var(--ds-border-default);
  --ds-input-text: var(--ds-text-primary);
  --ds-input-placeholder: var(--ds-text-disabled);
  --ds-input-disabled-bg: var(--ds-gray-100);

  /* --------------------------------------------------------------------------
     Table Tokens
     -------------------------------------------------------------------------- */
  --ds-table-bg: transparent;
  --ds-table-striped-bg: rgba(0, 0, 0, 0.02);
  --ds-table-hover-bg: rgba(0, 0, 0, 0.04);
  --ds-table-border: var(--ds-border-default);
  --ds-table-header-bg: var(--ds-gray-50);
  --ds-table-header-text: var(--ds-text-muted);

  /* --------------------------------------------------------------------------
     Dropdown / Modal Tokens
     -------------------------------------------------------------------------- */
  --ds-dropdown-bg: #ffffff;
  --ds-dropdown-border: var(--ds-border-default);
  --ds-dropdown-hover-bg: var(--ds-gray-50);
  --ds-dropdown-text: var(--ds-text-primary);
  --ds-modal-bg: #ffffff;
  --ds-modal-border: var(--ds-border-default);

  /* --------------------------------------------------------------------------
     Bootstrap Overrides
     Override Bootstrap's CSS variables to align with the brand.
     -------------------------------------------------------------------------- */
  --bs-primary:       #2ea3f2;
  --bs-primary-rgb:   46, 163, 242;
  --bs-link-color:    #2ea3f2;
  --bs-link-color-rgb: 46, 163, 242;
  --bs-link-hover-color: #1a8fd8;
  --bs-link-hover-color-rgb: 26, 143, 216;

  --bs-body-font-family: var(--ds-font-family);
  --bs-body-font-size:   var(--ds-font-size-base);
  --bs-body-color:       var(--ds-text-primary);
  --bs-body-bg:          var(--ds-surface-body);

  --bs-border-color:  var(--ds-border-default);
  --bs-border-radius: var(--ds-radius-md);
  --bs-border-radius-sm: var(--ds-radius-sm);
  --bs-border-radius-lg: var(--ds-radius-lg);
  --bs-border-radius-xl: var(--ds-radius-xl);

  --bs-success:     var(--ds-success);
  --bs-success-rgb: var(--ds-success-rgb);
  --bs-warning:     var(--ds-warning);
  --bs-warning-rgb: var(--ds-warning-rgb);
  --bs-danger:      var(--ds-danger);
  --bs-danger-rgb:  var(--ds-danger-rgb);
  --bs-info:        var(--ds-info);
  --bs-info-rgb:    var(--ds-info-rgb);
}

/* ==========================================================================
   DARK MODE
   Activated via data-bs-theme="dark" on <html> element.
   Every color token gets a dark counterpart.
   ========================================================================== */
[data-bs-theme="dark"] {
  /* Brand Colors (slightly desaturated for dark backgrounds) */
  --ds-brand-primary: #4db8ff;
  --ds-brand-primary-hover: #6ec5ff;
  --ds-brand-primary-active: #8dd1ff;
  --ds-brand-primary-subtle: rgba(77, 184, 255, 0.15);
  --ds-brand-primary-rgb: 77, 184, 255;

  --ds-brand-accent: #9dd0d6;
  --ds-brand-accent-hover: #b1dbe0;
  --ds-brand-accent-active: #c5e6ea;
  --ds-brand-accent-subtle: rgba(157, 208, 214, 0.15);
  --ds-brand-accent-rgb: 157, 208, 214;

  /* Semantic Colors */
  --ds-success: #22c55e;
  --ds-success-hover: #4ade80;
  --ds-success-subtle: rgba(34, 197, 94, 0.15);
  --ds-success-rgb: 34, 197, 94;

  --ds-warning: #fbbf24;
  --ds-warning-hover: #fcd34d;
  --ds-warning-subtle: rgba(251, 191, 36, 0.15);
  --ds-warning-rgb: 251, 191, 36;

  --ds-danger: #ef4444;
  --ds-danger-hover: #f87171;
  --ds-danger-subtle: rgba(239, 68, 68, 0.15);
  --ds-danger-rgb: 239, 68, 68;

  --ds-info: #38bdf8;
  --ds-info-hover: #7dd3fc;
  --ds-info-subtle: rgba(56, 189, 248, 0.15);
  --ds-info-rgb: 56, 189, 248;

  /* Neutral Scale (inverted for dark) */
  --ds-gray-50:  #111827;
  --ds-gray-100: #1f2937;
  --ds-gray-200: #374151;
  --ds-gray-300: #4b5563;
  --ds-gray-400: #6b7280;
  --ds-gray-500: #9ca3af;
  --ds-gray-600: #d1d5db;
  --ds-gray-700: #e5e7eb;
  --ds-gray-800: #f3f4f6;
  --ds-gray-900: #f9fafb;

  /* Surface Colors */
  --ds-surface-body: #0f1117;
  --ds-surface-page: #161822;
  --ds-surface-card: #1c1e2e;
  --ds-surface-raised: #232538;
  --ds-surface-overlay: #2a2c42;
  --ds-surface-sunken: #0a0c14;
  --ds-surface-sidebar: #151723;

  /* Border Colors */
  --ds-border-default: #2a2c42;
  --ds-border-muted: #1c1e2e;
  --ds-border-strong: #3b3d56;
  --ds-border-focus: var(--ds-brand-primary);

  /* Text Colors */
  --ds-text-primary: #f1f5f9;
  --ds-text-secondary: #cbd5e1;
  --ds-text-muted: #94a3b8;
  --ds-text-disabled: #64748b;
  --ds-text-on-primary: #ffffff;
  --ds-text-on-dark: #f1f5f9;
  --ds-text-link: var(--ds-brand-primary);
  --ds-text-link-hover: var(--ds-brand-primary-hover);

  /* Shadows (more pronounced for dark mode) */
  --ds-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
  --ds-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
  --ds-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --ds-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --ds-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
  --ds-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --ds-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);

  /* --------------------------------------------------------------------------
     Form / Input Tokens (dark variants)
     -------------------------------------------------------------------------- */
  --ds-input-bg: var(--ds-surface-card);
  --ds-input-border: var(--ds-border-default);
  --ds-input-text: var(--ds-text-primary);
  --ds-input-placeholder: var(--ds-text-disabled);
  --ds-input-disabled-bg: var(--ds-surface-sunken);

  /* --------------------------------------------------------------------------
     Table Tokens (dark variants)
     -------------------------------------------------------------------------- */
  --ds-table-bg: transparent;
  --ds-table-striped-bg: rgba(255, 255, 255, 0.03);
  --ds-table-hover-bg: rgba(255, 255, 255, 0.05);
  --ds-table-border: var(--ds-border-default);
  --ds-table-header-bg: var(--ds-surface-sunken);
  --ds-table-header-text: var(--ds-text-secondary);

  /* --------------------------------------------------------------------------
     Dropdown / Modal Tokens (dark variants)
     -------------------------------------------------------------------------- */
  --ds-dropdown-bg: var(--ds-surface-raised);
  --ds-dropdown-border: var(--ds-border-default);
  --ds-dropdown-hover-bg: rgba(255, 255, 255, 0.06);
  --ds-dropdown-text: var(--ds-text-primary);
  --ds-modal-bg: var(--ds-surface-card);
  --ds-modal-border: var(--ds-border-default);

  /* Bootstrap Overrides for dark mode */
  --bs-primary:       #4db8ff;
  --bs-primary-rgb:   77, 184, 255;
  --bs-link-color:    #4db8ff;
  --bs-link-color-rgb: 77, 184, 255;
  --bs-link-hover-color: #6ec5ff;
  --bs-link-hover-color-rgb: 110, 197, 255;

  --bs-body-color: var(--ds-text-primary);
  --bs-body-bg:    var(--ds-surface-body);

  --bs-border-color: var(--ds-border-default);

  --bs-success:     var(--ds-success);
  --bs-success-rgb: var(--ds-success-rgb);
  --bs-warning:     var(--ds-warning);
  --bs-warning-rgb: var(--ds-warning-rgb);
  --bs-danger:      var(--ds-danger);
  --bs-danger-rgb:  var(--ds-danger-rgb);
  --bs-info:        var(--ds-info);
  --bs-info-rgb:    var(--ds-info-rgb);

  /* Bootstrap component overrides for dark mode */
  --bs-card-bg:           var(--ds-surface-card);
  --bs-card-border-color: var(--ds-border-default);
  --bs-card-cap-bg:       var(--ds-surface-card);

  --bs-table-bg:          var(--ds-table-bg);
  --bs-table-striped-bg:  var(--ds-table-striped-bg);
  --bs-table-hover-bg:    var(--ds-table-hover-bg);
  --bs-table-border-color: var(--ds-table-border);

  --bs-modal-bg:          var(--ds-modal-bg);
  --bs-modal-border-color: var(--ds-modal-border);

  --bs-dropdown-bg:       var(--ds-dropdown-bg);
  --bs-dropdown-border-color: var(--ds-dropdown-border);
  --bs-dropdown-link-color: var(--ds-dropdown-text);
  --bs-dropdown-link-hover-bg: var(--ds-dropdown-hover-bg);

  --bs-secondary-bg:      var(--ds-surface-sunken);
  --bs-tertiary-bg:       var(--ds-surface-card);
}

/* ==========================================================================
   Global Base Styles
   Apply design tokens to foundational elements.
   ========================================================================== */

body {
  font-family: var(--ds-font-family);
  font-size: var(--ds-font-size-base);
  color: var(--ds-text-primary);
  background-color: var(--ds-surface-body);
  line-height: var(--ds-line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override Bootstrap .btn-primary to use brand color */
.btn-primary {
  --bs-btn-bg: var(--ds-brand-primary);
  --bs-btn-border-color: var(--ds-brand-primary);
  --bs-btn-hover-bg: var(--ds-brand-primary-hover);
  --bs-btn-hover-border-color: var(--ds-brand-primary-hover);
  --bs-btn-active-bg: var(--ds-brand-primary-active);
  --bs-btn-active-border-color: var(--ds-brand-primary-active);
  --bs-btn-disabled-bg: var(--ds-brand-primary);
  --bs-btn-disabled-border-color: var(--ds-brand-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--ds-brand-primary);
  --bs-btn-border-color: var(--ds-brand-primary);
  --bs-btn-hover-bg: var(--ds-brand-primary);
  --bs-btn-hover-border-color: var(--ds-brand-primary);
  --bs-btn-active-bg: var(--ds-brand-primary-active);
  --bs-btn-active-border-color: var(--ds-brand-primary-active);
}

/* Focus ring using brand color */
:focus-visible {
  outline: 2px solid var(--ds-brand-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Dark Mode: Component-Level Overrides
   Fix Bootstrap components that don't fully respond to CSS variable overrides.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Forms: inputs, selects, textareas
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--ds-input-bg);
  border-color: var(--ds-input-border);
  color: var(--ds-input-text);
}

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

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
  background-color: var(--ds-input-disabled-bg);
  color: var(--ds-text-disabled);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: var(--ds-brand-primary);
  box-shadow: 0 0 0 0.2rem var(--ds-brand-primary-subtle);
}

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

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

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

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

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

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .table {
  --bs-table-bg: var(--ds-table-bg);
  --bs-table-border-color: var(--ds-table-border);
  --bs-table-striped-bg: var(--ds-table-striped-bg);
  --bs-table-hover-bg: var(--ds-table-hover-bg);
  color: var(--ds-text-primary);
}

[data-bs-theme="dark"] .table thead th {
  background-color: var(--ds-table-header-bg);
  color: var(--ds-table-header-text);
  border-bottom-color: var(--ds-border-strong);
}

/* --------------------------------------------------------------------------
   Dropdowns
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--ds-dropdown-bg);
  border-color: var(--ds-dropdown-border);
  box-shadow: var(--ds-shadow-lg);
}

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

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

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

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

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .modal-content {
  background-color: var(--ds-modal-bg);
  border-color: var(--ds-modal-border);
}

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

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

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

/* --------------------------------------------------------------------------
   Alerts & Badges (text legibility on dark)
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .text-muted {
  color: var(--ds-text-muted) !important;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .page-link {
  background-color: var(--ds-surface-card);
  border-color: var(--ds-border-default);
  color: var(--ds-text-primary);
}

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

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

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

/* --------------------------------------------------------------------------
   List Groups
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .list-group-item {
  background-color: var(--ds-surface-card);
  border-color: var(--ds-border-default);
  color: var(--ds-text-primary);
}

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

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .accordion-item {
  background-color: var(--ds-surface-card);
  border-color: var(--ds-border-default);
}

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

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

/* --------------------------------------------------------------------------
   Breadcrumbs (Bootstrap native)
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--ds-text-disabled);
}

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

/* --------------------------------------------------------------------------
   Nav Tabs & Pills
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: var(--ds-text-secondary);
}

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

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

/* --------------------------------------------------------------------------
   Login Page Dark Mode
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .login-container .card {
  background-color: var(--ds-surface-card);
  border: 1px solid var(--ds-border-default);
}

[data-bs-theme="dark"] .login-container h4 {
  color: var(--ds-text-primary);
}

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

/* Redesigned Login Page (Phase 19) */
[data-bs-theme="dark"] .ds-login-card {
  background-color: var(--ds-surface-card);
  border-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-login-logo {
  box-shadow: var(--ds-shadow-lg);
}

/* --------------------------------------------------------------------------
   Error Pages Dark Mode (Phase 19)
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .ds-error-code {
  color: var(--ds-text-primary);
}

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

[data-bs-theme="dark"] .ds-error-message {
  color: var(--ds-text-muted);
}

/* --------------------------------------------------------------------------
   Report Cards Dark Mode (Phase 19)
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .ds-report-card {
  background-color: var(--ds-surface-card);
  border-color: var(--ds-border-default);
}