/* ═══════════════════════════════════════════════════════════════════
   Extracted from resources/views/tools/partials/tomselect.blade.php
   Previously 1 inline <style> block, re-sent on every render and
   uncacheable. Blocks are concatenated in their original source order,
   so the cascade within the page is unchanged.
   ═══════════════════════════════════════════════════════════════════ */

/* Tools pages: components.css ships global "premium" overrides that strip
   the control chrome (border:none/padding:0/background:transparent, all
   !important) for the glassy home search. Scope under .pillar-page with
   HIGHER specificity + !important so the tools get real, visible fields. */
/* .pillar-card clips overflow (rounded-corner containment) — but the
   TomSelect dropdown is absolutely positioned INSIDE the form card, so it
   was being cut off at the card edge. Let the form cards overflow. */
.pillar-page form.pillar-card { overflow: visible; }

.pillar-page .ts-wrapper { width: 100%; position: relative; }
/* While open, lift the whole wrapper above any later cards/sticky headers —
   the dropdown's own z-index can't escape a lower-stacked ancestor. */
.pillar-page .ts-wrapper.dropdown-active { z-index: 10000; }
.pillar-page .ts-wrapper .ts-control {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  padding: 0.65rem 2.2rem 0.65rem 0.85rem !important;
  font-size: 0.95rem !important;
  font-weight: 600;
  min-height: 48px;
  box-shadow: none !important;
  cursor: pointer;
}
.pillar-page .ts-wrapper .ts-control .item {
  font-size: 0.95rem !important;
  font-weight: 600;
}
.pillar-page .ts-wrapper .ts-control input {
  color: var(--color-text);
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}
/* caret */
.pillar-page .ts-wrapper.single .ts-control::after {
  content: '';
  position: absolute;
  right: 0.95rem;
  top: 50%;
  margin-top: -3px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-text-muted);
}
.pillar-page .ts-wrapper.single.dropdown-active .ts-control::after {
  margin-top: -8px;
  border-top: none;
  border-bottom: 6px solid var(--color-primary);
}
.pillar-page .ts-wrapper.focus .ts-control,
.pillar-page .ts-wrapper.dropdown-active .ts-control {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.12) !important;
}
/* dropdown panel: global premium styles are decent — just size the list */
.pillar-page .ts-dropdown { font-size: 0.92rem; }
.pillar-page .ts-dropdown-content { max-height: 260px; }