/* ════════════════════════════════════════════════════════════════════
   TOM SELECT THEME  (multi-select — layered on top of tom_select.css)

   The vendored tom_select.css ships a light theme with hardcoded colours.
   Everything below is design-token driven, so it covers both schemes at once.

   NAMING IS LOAD-ORDER SENSITIVE: the layout renders `stylesheet_link_tag :app`,
   which Propshaft expands to every app/assets/**/*.css sorted alphabetically.
   This file must sort AFTER tom_select.css to win the cascade — hence the
   `_theme` suffix. Renaming it to something earlier silently breaks the theme.
   ════════════════════════════════════════════════════════════════════ */
.ts-wrapper{width:100%}
/* Tom Select copies the <select>'s own classes onto its wrapper, so .inp paints a
   second bordered box around .ts-control and its 12px vertical padding pushed the
   field to 62px against the date inputs' 38px. The control below carries all the
   styling; the wrapper is just a positioning shell. */
.ts-wrapper.inp{background:none;border:0;border-radius:0;padding:0}
.ts-control{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  color:var(--text);font-family:var(--font-b);gap:6px;transition:.2s var(--ease)}
.ts-control,.ts-wrapper.single .ts-control{box-shadow:none}
.ts-control>input{color:var(--text);font-family:var(--font-b)}
.ts-control>input::placeholder{color:var(--muted-2)}
.ts-wrapper.focus .ts-control{border-color:var(--accent);box-shadow:0 0 0 3px rgba(51,224,160,.12)}

/* selected cities — mirrors .chip */
/* margin:0 — spacing comes from the control's own gap. A bottom margin here would
   add to the row height and push the field past the 38px the date inputs sit at. */
.ts-wrapper.multi .ts-control>div{background:var(--ov-4);color:var(--text);border:1px solid var(--line);
  border-radius:8px;font-size:13px;font-weight:500;padding:4px 4px 4px 9px;margin:0}
.ts-wrapper.multi .ts-control>div.active{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.ts-wrapper.plugin-remove_button .item .remove{border-left:0;opacity:.55;padding:0 5px;border-radius:6px}
.ts-wrapper.plugin-remove_button .item .remove:hover{background:var(--ov-5);opacity:1}
.ts-wrapper.plugin-remove_button .item.active .remove{border-left-color:transparent}

/* dropdown panel */
.ts-dropdown{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  color:var(--text);margin-top:4px;box-shadow:0 18px 44px -14px var(--shadow-lg);z-index:60}
.ts-dropdown .option,.ts-dropdown .no-results,.ts-dropdown .optgroup-header{color:var(--text);background:transparent;font-size:14px}
.ts-dropdown .active{background:var(--ov-4);color:var(--text)}
.ts-dropdown [data-selectable] .highlight{background:rgba(51,224,160,.22);border-radius:3px}
.ts-dropdown .no-results{color:var(--muted-2)}

/* Sits in the /pr_edicts filter row above the date inputs. One padding value for
   every state — an empty control is held at 38px by min-height, and one row of
   chips (28px) lands on exactly 38px too, so selecting a city doesn't jolt the
   layout. Wrapping to a second row grows the field, which pushes the dates down. */
.filter-field .ts-control{font-size:13px;padding:4px 12px;min-height:38px}