/* Dark skin for Tom Select, matching the dashboard's zinc/brand palette
   (design tokens from app.css) instead of the stock light theme. Loaded
   after tom-select.min.css. */

/* Tom Select copies the ORIGINAL <select>'s class attribute straight onto
   .ts-wrapper (its own source: `d = this.input.getAttribute("class")`, then
   applied to the wrapper) — so every Tailwind utility class the template put
   on the <select> for its native look (bg-black, border, border-zinc-800,
   rounded-md, px-2, py-1.5, ...) ends up rendering its OWN box on the
   wrapper, with .ts-control's box from this file nested one level inside —
   two visibly separate boxes, one bigger (wrapper) one smaller (control),
   reported live as "находится в 2 окнах". The wrapper should be invisible
   scaffolding; only .ts-control is the actual visible control. !important
   neutralizes whatever box-styling classes happened to be on the source
   <select>, regardless of which specific ones a given template used. */
.ts-wrapper {
  width: 100%;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ts-control,
.ts-wrapper.single .ts-control {
  background: var(--color-black);
  border: 1px solid var(--color-border-1);
  border-radius: 0.5rem;
  color: var(--zinc-100);
  box-shadow: none;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  min-height: unset;
}
.ts-control > input { color: var(--zinc-100); }
.ts-control > input::placeholder { color: var(--zinc-600); }
.ts-wrapper.focus .ts-control {
  border-color: var(--brand-500);
  box-shadow: none;
}
.ts-wrapper.disabled .ts-control { background: var(--color-surface-1); color: var(--zinc-600); }

/* Tom Select's own base CSS hardcodes `background: #fff` on .ts-control for
   several open/active state class combinations (`.input-active`,
   `.dropdown-active`, etc.) — trying to out-specificity each one individually
   was a losing, whack-a-mole game (still went white on the actual live page).
   !important on the bare element beats ALL of them unconditionally, since none
   of Tom Select's own background rules use !important themselves — no need to
   enumerate which state classes are actually present. */
.ts-control { background: var(--color-black) !important; }
.ts-wrapper.disabled .ts-control { background: var(--color-surface-1) !important; }

.ts-dropdown {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-1);
  border-radius: 0.5rem;
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.6);
  color: var(--zinc-100);
  margin-top: 0.25rem;
}
.ts-dropdown .ts-dropdown-content { padding: 0.25rem; }
.ts-dropdown [data-selectable], .ts-dropdown .optgroup-header {
  padding: 0.45rem 0.6rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}
.ts-dropdown .optgroup-header { color: var(--color-text-2); text-transform: uppercase; font-size: 0.7rem; letter-spacing: .03em; }
.ts-dropdown [data-selectable].option { color: var(--zinc-200); cursor: pointer; }
/* The "active" (hovered/keyboard-focused) row sits on the neutral surface-2
   tone, not a brand-colored one — its text needs to flip with the theme too,
   unlike the two rules below (selected item / item chip), which sit on
   --brand-600 and stay white in both themes. */
.ts-dropdown .active { background: var(--color-surface-2); color: var(--zinc-100); }
.ts-dropdown [data-selectable].selected { background: var(--brand-600); color: #fff; }
.ts-dropdown-input { background: var(--color-black) !important; color: var(--zinc-100) !important; border-color: var(--color-border-1) !important; }

.ts-control .item { background: var(--color-surface-2); border: 1px solid var(--color-border-1); color: var(--zinc-200); border-radius: 0.375rem; }
.ts-control .item.active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.ts-wrapper.single .ts-control:after {
  border-color: var(--color-text-2) transparent transparent transparent;
}
.ts-wrapper.single.dropdown-active .ts-control:after {
  border-color: transparent transparent var(--color-text-2) transparent;
}

.ts-hidden-accessible { display: none !important; }