/* extranet/assets/css/select-theme.css
   Reskins Tom Select to match the extranet's coral/white "hyper design"
   look. Loaded after tom-select.css so these rules win.
   Accent colors follow the white-label pattern already used for the
   Tailwind `teal` alias in extranet/includes/header.php (var() with a
   sunset-scale fallback), so broker branding still applies here. */

:root {
  --dd-accent: var(--wl-primary-dark, #F27A54);
  --dd-accent-strong: var(--wl-primary, #D65A3B);
  --dd-accent-tint: var(--wl-primary-light, #FFE5DE);
  --dd-ink: var(--wl-secondary, #0E2A3D);
}

.ts-wrapper {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* Tom Select copies the original <select>'s class attribute onto .ts-wrapper
   so layout classes (w-full, flex-1, col-span-*, etc.) still apply once the
   select is hidden. But when the original select also carried its own
   "field" look (comp-input, bg-*/border/rounded-* utilities...), that same
   look lands on the wrapper too — doubling up with .ts-control's box below
   it. Strip only the paint/box properties here so layout classes keep
   working; .ts-control remains the single visible box. */
.ts-wrapper {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control input {
  cursor: pointer;
}

.ts-control {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 0.75rem !important;
  padding: 0.65rem 2.25rem 0.65rem 0.85rem !important;
  min-height: unset !important;
  box-shadow: none !important;
  outline: none;
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ts-control input {
  font-size: 13px;
  font-weight: 500;
  color: var(--dd-ink);
}

.ts-control input::placeholder {
  color: #94A3B8;
  font-weight: 400;
}

/* Chevron indicator — replaces every hand-placed fa-chevron-down icon */
.ts-control:after {
  content: '';
  position: absolute;
  right: 0.95rem;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid #94A3B8;
  border-bottom: 2px solid #94A3B8;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: transform .15s ease;
}

.ts-wrapper.dropdown-active .ts-control:after {
  transform: translateY(-30%) rotate(-135deg);
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
  border-color: var(--dd-accent) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(242, 122, 84, 0.16) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-accent) 18%, white) !important;
}

/* Dropdown panel */
.ts-dropdown {
  border: 1px solid #F1F5F9 !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.18);
  background: #fff;
  padding: 0.35rem;
  margin-top: 0.4rem !important;
  overflow: hidden;
}

.ts-dropdown-content {
  max-height: 260px;
  scrollbar-width: thin;
  scrollbar-color: var(--dd-accent) transparent;
}

.ts-dropdown-content::-webkit-scrollbar {
  width: 5px;
}

.ts-dropdown-content::-webkit-scrollbar-track {
  background: transparent;
}

.ts-dropdown-content::-webkit-scrollbar-thumb {
  background: var(--dd-accent);
  border-radius: 999px;
}

.ts-dropdown .option,
.ts-dropdown .no-results {
  padding: 0.55rem 0.75rem !important;
  border-radius: 0.5rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--dd-ink);
}

.ts-dropdown .no-results {
  color: #94A3B8;
  font-weight: 400;
}

.ts-dropdown .active {
  background: var(--dd-accent-tint) !important;
  color: var(--dd-accent-strong) !important;
}

/* Checkmark on the currently selected option */
.ts-dropdown .option.selected {
  font-weight: 700;
  color: var(--dd-accent-strong) !important;
  padding-left: 2rem !important;
  position: relative;
}

.ts-dropdown .option.selected:before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--dd-accent-strong);
  border-bottom: 2px solid var(--dd-accent-strong);
  transform: translateY(-65%) rotate(-45deg);
}

/* Reserve room for a decorative leading icon that sits inside the same
   .relative wrapper as the original <select> (Tom Select inserts its
   wrapper as the next sibling of the original, hidden select). */
select.has-leading-icon + .ts-wrapper .ts-control {
  padding-left: 2.5rem !important;
}