/**
 * Bootstrap 5.3 Dark Mode Color Swap
 * Load this CSS after Bootstrap 5.3 to automatically swap light/dark colors
 * when the browser requests dark mode (prefers-color-scheme: dark)
 */

@media (prefers-color-scheme: dark) {
  :root {
    /* Swap primary grays */
    --bs-white: #212529;
    --bs-gray-100: #343a40;
    --bs-gray-200: #495057;
    --bs-gray-300: #6c757d;
    --bs-gray-400: #adb5bd;
    --bs-gray-500: #ced4da;
    --bs-gray-600: #dee2e6;
    --bs-gray-700: #e9ecef;
    --bs-gray-800: #f8f9fa;
    --bs-gray-900: #ffffff;
    --bs-black: #ffffff;
    
    /* Swap body colors */
    --bs-body-color: #dee2e6;
    --bs-body-bg: #212529;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-secondary-bg: #343a40;
    --bs-tertiary-bg: #2b3035;
    
    /* Swap border colors */
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    
    /* Swap heading and link colors */
    --bs-heading-color: #ffffff;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-code-color: #e685b5;
    
    /* Form controls */
    --bs-form-control-bg: #212529;
    --bs-form-control-disabled-bg: #343a40;
    
    /* Component colors */
    --bs-dropdown-bg: #343a40;
    --bs-dropdown-link-color: #dee2e6;
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-link-hover-bg: #495057;
    --bs-dropdown-border-color: #495057;
    --bs-dropdown-divider-bg: #495057;
    
    --bs-modal-bg: #212529;
    --bs-modal-border-color: #495057;
    
    --bs-popover-bg: #343a40;
    --bs-popover-border-color: #495057;
    --bs-popover-header-bg: #2b3035;
    
    --bs-tooltip-bg: #e9ecef;
    --bs-tooltip-color: #212529;
    
    --bs-table-color: #dee2e6;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-active-bg: rgba(255, 255, 255, 0.1);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
    
    --bs-card-bg: #212529;
    --bs-card-border-color: #495057;
    
    --bs-accordion-bg: #212529;
    --bs-accordion-border-color: #495057;
    --bs-accordion-button-bg: #212529;
    --bs-accordion-button-active-bg: #2b3035;
    
    --bs-list-group-bg: #212529;
    --bs-list-group-border-color: #495057;
    --bs-list-group-hover-bg: #2b3035;
    --bs-list-group-action-hover-color: #ffffff;
    --bs-list-group-action-active-bg: #343a40;
    
    --bs-breadcrumb-divider-color: #6c757d;
    --bs-breadcrumb-active-color: #adb5bd;
    
    --bs-pagination-color: #6ea8fe;
    --bs-pagination-bg: #212529;
    --bs-pagination-border-color: #495057;
    --bs-pagination-hover-color: #8bb9fe;
    --bs-pagination-hover-bg: #343a40;
    --bs-pagination-hover-border-color: #495057;
    --bs-pagination-focus-color: #8bb9fe;
    --bs-pagination-focus-bg: #343a40;
    --bs-pagination-disabled-color: #6c757d;
    --bs-pagination-disabled-bg: #212529;
    --bs-pagination-disabled-border-color: #495057;
    
    --bs-nav-tabs-border-color: #495057;
    --bs-nav-tabs-link-hover-border-color: #343a40 #343a40 #495057;
    --bs-nav-tabs-link-active-color: #ffffff;
    --bs-nav-tabs-link-active-bg: #212529;
    --bs-nav-tabs-link-active-border-color: #495057 #495057 #212529;
    
    --bs-offcanvas-bg: #343a40;
    --bs-offcanvas-border-color: #495057;
    
    --bs-toast-bg: rgba(52, 58, 64, 0.85);
    --bs-toast-border-color: rgba(255, 255, 255, 0.1);
    --bs-toast-header-bg: rgba(52, 58, 64, 0.85);
    --bs-toast-header-border-color: rgba(255, 255, 255, 0.05);
    
    /* Text colors for utilities */
    --bs-light: #343a40;
    --bs-light-rgb: 52, 58, 64;
    --bs-dark: #f8f9fa;
    --bs-dark-rgb: 248, 249, 250;
  }
  
  /* Additional element-specific overrides */
  body {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
  }
  
  .text-white {
    color: #212529 !important;
  }
  
  .text-black {
    color: #ffffff !important;
  }
  
  .text-muted {
    color: #adb5bd !important;
  }
  
  .bg-white {
    background-color: #212529 !important;
  }
  
  .bg-black {
    background-color: #ffffff !important;
  }
  
  .bg-light {
    background-color: #343a40 !important;
  }
  
  .bg-dark {
    background-color: #f8f9fa !important;
    color: #212529 !important;
  }
  
  .text-light {
    color: #343a40 !important;
  }
  
  .text-dark {
    color: #f8f9fa !important;
  }
  
  .border-light {
    border-color: #343a40 !important;
  }
  
  .border-dark {
    border-color: #f8f9fa !important;
  }
  
  /* Secondary background swaps */
  .bg-secondary {
    background-color: #adb5bd !important;
    color: #212529 !important;
  }
  
  .bg-secondary-subtle {
    background-color: #495057 !important;
    color: #ffffff !important;
  }
  
  .text-bg-secondary {
    background-color: #adb5bd !important;
    color: #212529 !important;
  }
  
  .text-secondary {
    color: #adb5bd !important;
  }
  
  .border-secondary {
    border-color: #adb5bd !important;
  }
  
  .border-secondary-subtle {
    border-color: #495057 !important;
  }
  
  /* Button secondary variants */
  .btn-secondary {
    color: #212529;
    background-color: #adb5bd;
    border-color: #adb5bd;
  }
  
  .btn-secondary:hover,
  .btn-secondary:focus {
    color: #212529;
    background-color: #bec5cb;
    border-color: #b7bfc6;
  }
  
  .btn-outline-secondary {
    color: #adb5bd;
    border-color: #adb5bd;
  }
  
  .btn-outline-secondary:hover,
  .btn-outline-secondary:focus {
    color: #212529;
    background-color: #adb5bd;
    border-color: #adb5bd;
  }
  
  /* Alert secondary variants */
  .alert-secondary {
    color: #41464b;
    background-color: #e2e3e5;
    border-color: #d3d6d8;
  }
  
  /* Badge secondary */
  .badge.bg-secondary {
    color: #212529 !important;
    background-color: #adb5bd !important;
  }
  
  /* Card specific */
  .card {
    color: var(--bs-body-color);
    background-color: var(--bs-card-bg);
    border-color: var(--bs-card-border-color);
  }
  
  /* Form controls */
  .form-control,
  .form-select {
    color: var(--bs-body-color);
    background-color: var(--bs-form-control-bg);
    border-color: var(--bs-border-color);
  }
  
  .form-control:focus,
  .form-select:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-form-control-bg);
    border-color: #86b7fe;
  }
  
  .form-control::placeholder {
    color: #6c757d;
  }
  
  .form-control:disabled,
  .form-select:disabled {
    background-color: var(--bs-form-control-disabled-bg);
  }
  
  /* Input groups */
  .input-group-text {
    color: var(--bs-body-color);
    background-color: #343a40;
    border-color: var(--bs-border-color);
  }
  
  /* Floating labels */
  .form-floating > .form-control,
  .form-floating > .form-select {
    color: var(--bs-body-color);
    background-color: var(--bs-form-control-bg);
    border-color: var(--bs-border-color);
  }
  
  .form-floating > .form-control:focus,
  .form-floating > .form-select:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-form-control-bg);
    border-color: #86b7fe;
  }
  
  .form-floating > .form-control:focus ~ label,
  .form-floating > .form-control:not(:placeholder-shown) ~ label,
  .form-floating > .form-select ~ label {
    color: rgba(222, 226, 230, 0.65);
  }
  
  .form-floating > .form-control:focus ~ label {
    color: rgba(134, 183, 254, 0.65);
  }
  
  .form-floating > .form-control:disabled ~ label,
  .form-floating > .form-select:disabled ~ label {
    color: #6c757d;
  }
  
  .form-floating > label {
    color: rgba(222, 226, 230, 0.65);
  }
  
  .form-floating > .form-control::placeholder {
    color: transparent;
  }
  
  .form-floating > .form-control:disabled,
  .form-floating > .form-select:disabled {
    background-color: var(--bs-form-control-disabled-bg);
    color: #6c757d;
  }
  
  /* Navbar */
  .navbar-light {
    background-color: #a8a9aa;
    color: #212529;
  }
  
  .navbar-dark {
    background-color: #212529;
    color: #ffffff;
  }
  
  /* Tables */
  .table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
  }
  
  /* Alerts - adjust light/dark variants */
  .alert-light {
    color: #495057;
    background-color: #3c4248;
    border-color: #343a40;
  }
  
  .alert-dark {
    color: #141619;
    background-color: #f6f8f9;
    border-color: #f8f9fa;
  }
  
  /* Buttons - swap btn-light and btn-dark */
  .btn-light {
    color: #ffffff;
    background-color: #343a40;
    border-color: #343a40;
  }
  
  .btn-light:hover,
  .btn-light:focus {
    color: #ffffff;
    background-color: #2c3136;
    border-color: #2a2e33;
  }
  
  .btn-dark {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
  }
  
  .btn-dark:hover,
  .btn-dark:focus {
    color: #212529;
    background-color: #d3d4d5;
    border-color: #c6c7c8;
  }
  
  .btn-outline-light {
    color: #343a40;
    border-color: #343a40;
  }
  
  .btn-outline-light:hover,
  .btn-outline-light:focus {
    color: #ffffff;
    background-color: #343a40;
    border-color: #343a40;
  }
  
  .btn-outline-dark {
    color: #f8f9fa;
    border-color: #f8f9fa;
  }
  
  .btn-outline-dark:hover,
  .btn-outline-dark:focus {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
  }
  
  /* Badge swaps */
  .badge.bg-light {
    color: #ffffff !important;
  }
  
  .badge.bg-dark {
    color: #212529 !important;
  }
  
  /* Progress bars */
  .progress {
    background-color: #343a40;
  }
  
  /* Close button */
  .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
  }
  
  /* Spinners */
  .spinner-border,
  .spinner-grow {
    border-color: currentColor;
    border-right-color: transparent;
  }
  
  /* Fix for images that might need inversion */
  img.bg-white {
    background-color: #212529 !important;
  }
  
  img.bg-light {
    background-color: #343a40 !important;
  }
}