/* Theme Variables */
:root {
    --bg-color: #ffffff;
    --text-color: #212529;
    --text-muted: #6c757d;
    --navbar-bg: #ffffff;
    --card-bg: #ffffff;
    --border-color: #dee2e6;
    --input-bg: #ffffff;
    --table-hover-bg: #e4dff2;
    --toast-bg: #094697;
    --dropdown-bg: #ffffff;

    /* Brand colors */
    --color-primary: #094697;
    --color-interactive: #6244bb;
    /* Text on solid brand-primary backgrounds (hero strips, toasts, testimonial bands) */
    --text-on-brand: #ffffff;

    /* Status colors for preference display */
    --color-like: #28a745;
    --color-dislike: #dc3545;

    /* Border radius scale */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Spacing scale */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 48px;
  }

  /* First-paint fallback: follow system dark mode (e.g. iPad after sunset) before JS runs */
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
      --bg-color: #1a1a1a;
      --text-color: #ffffff;
      --text-muted: #999999;
      --navbar-bg: #2d2d2d;
      --card-bg: #2d2d2d;
      --border-color: #404040;
      --input-bg: #404040;
      --table-hover-bg: #404040;
      --toast-bg: #094697;
      --dropdown-bg: #2d2d2d;
      --text-on-brand: #ffffff;
      --color-like: #5cb85c;
      --color-dislike: #e57373;
    }
  }

  [data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --text-muted: #999999;
    --navbar-bg: #2d2d2d;
    --card-bg: #2d2d2d;
    --border-color: #404040;
    --input-bg: #404040;
    --table-hover-bg: #404040;
    --toast-bg: #094697;
    --dropdown-bg: #2d2d2d;
    --text-on-brand: #ffffff;
    --color-like: #5cb85c;
    --color-dislike: #e57373;
  }
  
  /* Utility classes */
  .page-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0;
  }

  /* 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);
  }
  
  /* Override Bootstrap table hover background in dark mode with a subtle darker color */
  [data-theme="dark"] .table {
    --bs-table-hover-bg: #3a3a3a !important;
  }
  
  /* Ensure text stays white on hover and selected states in dark mode */
  [data-theme="dark"] .table tbody tr:hover td,
  [data-theme="dark"] .table tbody tr:hover th,
  [data-theme="dark"] .table tbody tr.selected td,
  [data-theme="dark"] .table tbody tr.selected th,
  [data-theme="dark"] .table tbody tr[class*="selected"] td,
  [data-theme="dark"] .table tbody tr[class*="selected"] th {
    color: #ffffff !important;
  }
  
  /* Bootstrap-table plugin specific text color overrides */
  [data-theme="dark"] .bootstrap-table .table tbody tr:hover td,
  [data-theme="dark"] .bootstrap-table .table tbody tr.selected td {
    color: #ffffff !important;
  }
  
  .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;
  }

/* =========================================================================
   Global page reset — prevents horizontal scroll caused by edge-to-edge
   banners and full-width sections.
   ========================================================================= */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

/* =========================================================================
   Coming Soon banner (used in templates/coming_soon.html)
   ========================================================================= */
.top-banner {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-interactive) 100%);
  color: #fff;
  padding: 5px 0;
}

.banner-text {
  color: #fff;
  text-align: center;
  text-decoration: none;
}

/* Onboarding Loom video modal — wide tutorial player (mode-independent;
   intentionally OUTSIDE the dark @media block above). Bootstrap caps
   .modal-dialog at 500px below the lg breakpoint, and modal-lg/xl only
   widen at >=992/1200px, so the embedded 16:9 video is tiny on iPad.
   This overrides the cap so the video is large on tablets too, while
   staying within the viewport (94vw) and bounded on desktop. */
.onboarding-loom-dialog {
  max-width: min(1040px, 94vw);
}

.banner-text a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.banner-text a:hover {
  color: #87CEEB;
}

.purchase-countdown-banner {
  background: linear-gradient(90deg, #1b1f3b 0%, #4338ca 50%, #0ea5e9 100%);
  padding: 10px 0;
}

.purchase-countdown {
  display: flex;
  gap: 14px;
  color: #fff;
}

.purchase-countdown span {
  display: grid;
  min-width: 54px;
  line-height: 1;
}

.purchase-countdown strong {
  font-size: 1.3rem;
  font-weight: 700;
}

.purchase-countdown small {
  font-size: 0.68rem;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  .banner-text {
    font-size: 14px;
  }
  .top-banner .btn-sm {
    font-size: 10px;
    padding: 5px 10px;
  }
  .purchase-countdown {
    gap: 8px;
  }
  .purchase-countdown span {
    min-width: 45px;
  }
  .purchase-countdown strong {
    font-size: 1.1rem;
  }
}