/* Theme Variables */
:root {
    --bg-color: #ffffff;
    --text-color: #212529;
    --navbar-bg: #ffffff;
    --card-bg: #ffffff;
    --border-color: #dee2e6;
    --input-bg: #ffffff;
    --table-hover-bg: #e4dff2;
    --toast-bg: #094697;
    --dropdown-bg: #ffffff;
  }
  
  [data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --navbar-bg: #2d2d2d;
    --card-bg: #2d2d2d;
    --border-color: #404040;
    --input-bg: #404040;
    --table-hover-bg: #404040;
    --toast-bg: #094697;
    --dropdown-bg: #2d2d2d;
  }
  
  /* Apply theme variables */
  body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .navbar {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--border-color);
  }
  
  .navbar-brand {
    color: var(--text-color) !important;
  }
  
  .nav-link {
    color: var(--text-color) !important;
  }
  
  .card, .modal-content {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
  }
  
  .form-control, .form-select {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
  }
  
  .form-control:focus, .form-select:focus {
    background-color: var(--input-bg);
    border-color: #094697;
    color: var(--text-color);
    box-shadow: 0 0 0 0.25rem rgba(9, 70, 151, 0.25);
  }
  
  .table {
    --bs-table-hover-bg: var(--table-hover-bg);
    color: var(--text-color);
    --bs-table-bg: var(--bg-color);
  }
  
  .table th, .table td {
    border-color: var(--border-color);
    color: var(--text-color);
  }
  
  .table thead th {
    background-color: var(--card-bg);
    color: var(--text-color);
  }
  
  /* Bootstrap table responsive wrapper */
  .table-responsive {
    background-color: var(--bg-color);
  }
  
  /* Dropdown menus */
  .dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
  }
  
  .dropdown-item {
    color: var(--text-color);
  }
  
  .dropdown-item:hover, .dropdown-item:focus {
    background-color: #094697;
    color: #fff;
  }
  
  /* Page links */
  .page-link {
    background-color: var(--card-bg);
    color: #094697;
    border-color: var(--border-color);
  }
  
  .page-link:hover {
    background-color: var(--table-hover-bg);
    color: #094697;
    border-color: var(--border-color);
  }
  
  .page-item.disabled .page-link {
    background-color: var(--card-bg);
    color: var(--border-color);
    border-color: var(--border-color);
  }
  
  /* Toast notifications */
  .toast {
    background-color: var(--toast-bg);
    border-color: #0d6efd;
    color: #fff;
  }
  
  /* Dark mode toggle button */
  .theme-toggle {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    margin-left: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .theme-toggle:hover {
    background-color: var(--border-color);
  }

  /* Select2 Dark Mode Styles */
  [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
  }

  [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single,
  [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
  }

  [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
  [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    color: var(--text-color);
  }

  [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder,
  [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__placeholder {
    color: #6c757d;
  }

  [data-theme="dark"] .select2-dropdown {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
    color: var(--text-color);
  }

  [data-theme="dark"] .select2-results__options {
    background-color: var(--dropdown-bg);
    color: var(--text-color);
  }

  [data-theme="dark"] .select2-results__option {
    background-color: var(--dropdown-bg);
    color: var(--text-color);
  }

  [data-theme="dark"] .select2-results__option--highlighted[aria-selected] {
    background-color: #094697;
    color: #fff;
  }

  [data-theme="dark"] .select2-results__option[aria-selected="true"] {
    background-color: var(--table-hover-bg);
    color: var(--text-color);
  }

  [data-theme="dark"] .select2-search__field {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
  }

  [data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
  }

  [data-theme="dark"] .select2-search--inline .select2-search__field {
    background-color: transparent;
    color: var(--text-color);
  }

  [data-theme="dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
  [data-theme="dark"] .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #094697;
    box-shadow: 0 0 0 0.25rem rgba(9, 70, 151, 0.25);
  }

  [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: #094697;
    border-color: #094697;
    color: #fff;
  }

  [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
  }

  [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }

  /* Fallback styles for basic Select2 classes (without bootstrap-5 suffix) */
  [data-theme="dark"] .select2-container .select2-selection {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
  }

  [data-theme="dark"] .select2-container .select2-selection--single,
  [data-theme="dark"] .select2-container .select2-selection--multiple {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
  }

  [data-theme="dark"] .select2-container .select2-selection__rendered {
    color: var(--text-color);
  }

  [data-theme="dark"] .select2-container .select2-selection__placeholder {
    color: #6c757d;
  }

  [data-theme="dark"] .select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: #094697;
    border-color: #094697;
    color: #fff;
  }

  [data-theme="dark"] .select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
  }
  
  /* List groups */
  .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
  }
  
  .list-group-item:hover {
    background-color: var(--table-hover-bg);
  }
  
  /* Alerts */
  .alert {
    border-color: var(--border-color);
  }
  
  .alert-light {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
  }
  
  /* Modal */
  .modal-header {
    border-bottom-color: var(--border-color);
  }
  
  .modal-footer {
    border-top-color: var(--border-color);
  }
  
  /* Accordion */
  .accordion-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
  }
  
  .accordion-button {
    background-color: var(--card-bg);
    color: var(--text-color);
  }
  
  .accordion-button:not(.collapsed) {
    background-color: var(--table-hover-bg);
    color: var(--text-color);
  }
  
  /* Breadcrumb */
  .breadcrumb {
    background-color: var(--card-bg);
  }
  
  .breadcrumb-item a {
    color: #094697;
  }
  
  /* Badge adjustments for dark mode */
  [data-theme="dark"] .badge-light {
    background-color: var(--border-color);
    color: var(--text-color);
  }
  
  /* Input group text */
  .input-group-text {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
  }
  
  /* Navbar toggler for mobile */
  .navbar-toggler {
    border-color: var(--border-color);
  }
  
  .navbar-toggler-icon {
    background-image: none;
  }
  
  [data-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  
  /* Search inputs and filters */
  .search-input, .filter-select {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
  }
  
  /* Filter removal buttons (X buttons) */
  .btn.bi-x-circle {
    color: #094697;
    border: none;
    background: none;
    padding: 0.25rem;
    font-size: 1rem;
  }
  
  .btn.bi-x-circle:hover {
    color: #094697;
  }
  
  [data-theme="dark"] .btn.bi-x-circle {
    color: #094697;
  }
  
  [data-theme="dark"] .btn.bi-x-circle:hover {
    color: #fff;
  }
  
  /* Alternative approach - if the above doesn't work, try this more specific selector */
  .active_filters .btn.bi-x-circle {
    color: #094697 !important;
    border: 1px solid transparent;
  }
  
  .active_filters .btn.bi-x-circle:hover {
    color: #094697 !important;
    background: none !important;
  }
  
  [data-theme="dark"] .active_filters .btn.bi-x-circle {
    color: #094697 !important;
  }
  
  [data-theme="dark"] .active_filters .btn.bi-x-circle:hover {
    color: #fff !important;
    background: none !important;
  }
  
  /* Bootstrap Popovers */
  .popover {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
  }
  
  .popover-header {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-color);
    color: var(--text-color);
  }
  
  .popover-body {
    background-color: var(--card-bg);
    color: var(--text-color);
  }
  
  /* Popover arrow styling for dark mode */
  [data-theme="dark"] .popover .popover-arrow::before {
    border-color: var(--border-color);
  }
  
  [data-theme="dark"] .popover .popover-arrow::after {
    border-color: var(--card-bg);
  }
  
  /* Specific popover arrow directions for dark mode */
  [data-theme="dark"] .bs-popover-top .popover-arrow::before,
  [data-theme="dark"] .bs-popover-auto[data-popper-placement^="top"] .popover-arrow::before {
    border-top-color: var(--border-color);
  }
  
  [data-theme="dark"] .bs-popover-top .popover-arrow::after,
  [data-theme="dark"] .bs-popover-auto[data-popper-placement^="top"] .popover-arrow::after {
    border-top-color: var(--card-bg);
  }
  
  [data-theme="dark"] .bs-popover-end .popover-arrow::before,
  [data-theme="dark"] .bs-popover-auto[data-popper-placement^="right"] .popover-arrow::before {
    border-right-color: var(--border-color);
  }
  
  [data-theme="dark"] .bs-popover-end .popover-arrow::after,
  [data-theme="dark"] .bs-popover-auto[data-popper-placement^="right"] .popover-arrow::after {
    border-right-color: var(--card-bg);
  }
  
  [data-theme="dark"] .bs-popover-bottom .popover-arrow::before,
  [data-theme="dark"] .bs-popover-auto[data-popper-placement^="bottom"] .popover-arrow::before {
    border-bottom-color: var(--border-color);
  }
  
  [data-theme="dark"] .bs-popover-bottom .popover-arrow::after,
  [data-theme="dark"] .bs-popover-auto[data-popper-placement^="bottom"] .popover-arrow::after {
    border-bottom-color: var(--card-bg);
  }
  
  [data-theme="dark"] .bs-popover-start .popover-arrow::before,
  [data-theme="dark"] .bs-popover-auto[data-popper-placement^="left"] .popover-arrow::before {
    border-left-color: var(--border-color);
  }
  
  [data-theme="dark"] .bs-popover-start .popover-arrow::after,
  [data-theme="dark"] .bs-popover-auto[data-popper-placement^="left"] .popover-arrow::after {
    border-left-color: var(--card-bg);
  }
  
  /* Bootstrap background utility classes in dark mode */
  [data-theme="dark"] .bg-light {
    background-color: var(--card-bg) !important;
  }
  
  [data-theme="dark"] .bg-white {
    background-color: var(--card-bg) !important;
  }
  
  [data-theme="dark"] .text-dark {
    color: var(--text-color) !important;
  }
  
  [data-theme="dark"] .text-muted {
    color: #999 !important;
  }
  
  /* Override inline background styles for specific sections */
  [data-theme="dark"] .features-icons {
    background-color: var(--card-bg) !important;
  }
  
  [data-theme="dark"] .showcase {
    background-color: var(--bg-color) !important;
  }
  
  /* Additional Bootstrap utility overrides */
  [data-theme="dark"] .border-light {
    border-color: var(--border-color) !important;
  }
  
  [data-theme="dark"] .text-light {
    color: var(--text-color) !important;
  }
  
  /* Ensure testimonial cards get proper dark mode styling */
  [data-theme="dark"] .bg-light.border.rounded {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
  }
  
  /* Pricing section override */
  [data-theme="dark"] .row[style*="background: #FFFFFF"] {
    background: var(--bg-dark) !important;
    color: var(--text-dark);
  }
  
  /* Also target the card in the pricing section */
  [data-theme="dark"] .card.border-primary {
    background-color: var(--bg-dark);
    border-color: var(--primary-dark) !important;
    color: var(--text-dark);
  }
  
  [data-theme="dark"] .card.border-primary .card-body,
  [data-theme="dark"] .card.border-primary .card-footer {
    background-color: var(--bg-dark);
    color: var(--text-dark);
  }
  
  /* Fix the card subtitle text in dark mode */
  [data-theme="dark"] .card .text-muted {
    color: var(--text-muted-dark) !important;
  }
  
  /* Make specific text white in dark mode */
  [data-theme="dark"] p[style*="font-size: 20px"] {
    color: var(--text-dark) !important;
  }
  
  /* Pricing section list items */
  [data-theme="dark"] .card .list-unstyled span {
    color: var(--text-dark) !important;
  }
  
  /* Feature list items in the Core Features section */
  [data-theme="dark"] .list-unstyled li span {
    color: var(--text-dark) !important;
  }
  
  /* "Informed Vacancy Bids" and similar headings */
  [data-theme="dark"] h5 {
    color: var(--text-dark) !important;
  }
  
  /* Make sure all spans in dark mode are white */
  [data-theme="dark"] span {
    color: var(--text-dark) !important;
  }
  
  /* Override any remaining black text in spans */
  [data-theme="dark"] span[style*="color: rgb(0, 0, 0)"] {
    color: var(--text-dark) !important;
  }