/* Select2 — Bootstrap variables + dark mode support
 * Covers both the default theme (.select2-container--default)
 * and the Bootstrap theme (.select2-container--bootstrap) used by Backpack fields.
 */

.select2-container--default .select2-selection--single {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5;
  padding-left: 0;
  color: var(--bs-body-color);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--bs-secondary-color, #6c757d);
}
.select2-container--default .select2-selection--single .select2-selection__clear {
  color: var(--bs-secondary-color, #6c757d);
}

/* Dropdown panel */
.select2-dropdown {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* Search box inside dropdown */
.select2-search--dropdown .select2-search__field {
  background-color: var(--bs-secondary-bg, #f8f9fa);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* Result items */
.select2-results__option {
  color: var(--bs-body-color);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--bs-primary, #0d6efd);
  color: #fff;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-body-color);
}

/* ── Dark mode overrides ───────────────────────────────────────────────────
 * Target both themes. The [data-bs-theme="dark"] selector adds specificity
 * that beats the hardcoded hex values in both select2.min.css and
 * select2-bootstrap.min.css, regardless of load order.
 */

/* Default theme */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

/* Bootstrap theme (used by Backpack select2/relationship fields) */
[data-bs-theme="dark"] .select2-container--bootstrap .select2-selection {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--bootstrap .select2-selection__placeholder {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap .select2-dropdown {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap .select2-search--dropdown .select2-search__field,
[data-bs-theme="dark"] .select2-container--bootstrap .select2-search__field {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap .select2-results__option {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap .select2-results__option[aria-selected=true] {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
  background-color: var(--bs-primary);
  color: #fff;
}
[data-bs-theme="dark"] .select2-container--bootstrap .select2-results__group {
  color: var(--bs-secondary-color, #6c757d);
}

/* Shared: dropdown panel and search field (catches both themes in one go) */
[data-bs-theme="dark"] .select2-dropdown {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* ── Bootstrap Datepicker dark mode ───────────────────────────────────────
 * Tabler already handles .dropdown-menu background — we only fix text
 * colors, hover/active states, and the triangle arrow.
 */

/* Input field — datepicker JS sets style="background-color: white!important" inline,
 * so we need !important to override it. */
[data-bs-theme="dark"] .input-group.date input.form-control {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* Triangle arrow — match whatever background .dropdown-menu ends up with */
[data-bs-theme="dark"] .datepicker-dropdown:after {
  border-bottom-color: var(--bs-dropdown-bg, var(--bs-body-bg));
}
[data-bs-theme="dark"] .datepicker-dropdown.datepicker-orient-top:after {
  border-top-color: var(--bs-dropdown-bg, var(--bs-body-bg));
}

/* Header row (month/year navigation + weekday labels) */
[data-bs-theme="dark"] .datepicker table tr th,
[data-bs-theme="dark"] .datepicker .datepicker-switch,
[data-bs-theme="dark"] .datepicker .prev,
[data-bs-theme="dark"] .datepicker .next,
[data-bs-theme="dark"] .datepicker .dow {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .datepicker .datepicker-switch:hover,
[data-bs-theme="dark"] .datepicker .prev:hover,
[data-bs-theme="dark"] .datepicker .next:hover {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

/* Day cells */
[data-bs-theme="dark"] .datepicker table tr td {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .datepicker table tr td.new,
[data-bs-theme="dark"] .datepicker table tr td.old {
  color: var(--bs-secondary-color, #6c757d);
}
[data-bs-theme="dark"] .datepicker table tr td.day:hover,
[data-bs-theme="dark"] .datepicker table tr td.focused {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

/* Today */
[data-bs-theme="dark"] .datepicker table tr td.today,
[data-bs-theme="dark"] .datepicker table tr td.today:hover {
  background-color: #664d00;
  border-color: #997300;
  color: #fff;
}

/* Active/selected */
[data-bs-theme="dark"] .datepicker table tr td.active,
[data-bs-theme="dark"] .datepicker table tr td.active:hover,
[data-bs-theme="dark"] .datepicker table tr td.active.highlighted {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
  text-shadow: none;
}

/* Month/year picker cells */
[data-bs-theme="dark"] .datepicker table tr td span {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .datepicker table tr td span:hover,
[data-bs-theme="dark"] .datepicker table tr td span.focused {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .datepicker table tr td span.active,
[data-bs-theme="dark"] .datepicker table tr td span.active:hover {
  background-color: var(--bs-primary);
  color: #fff;
  text-shadow: none;
}
[data-bs-theme="dark"] .datepicker table tr td span.old,
[data-bs-theme="dark"] .datepicker table tr td span.new {
  color: var(--bs-secondary-color, #6c757d);
}