/* SmartLaw theme for Tom Select — matches the app palette, light + dark.
   Loaded AFTER tom-select.css so these rules win. */

.ts-wrapper { width: 100%; }

.ts-control {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 10px 38px 10px 13px;            /* room for the caret */
  min-height: 46px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
/* caret */
.ts-wrapper.single .ts-control::after {
  content: "";
  position: absolute; right: 14px; top: 50%; width: 13px; height: 13px;
  transform: translateY(-50%);
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a7872' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  pointer-events: none;
}
.ts-wrapper.single.dropdown-active .ts-control::after { transform: translateY(-50%) rotate(180deg); }

.ts-wrapper.focus .ts-control {
  border-color: var(--primary);
  box-shadow: var(--ring);
  background: var(--surface);
}
.ts-control input,
.ts-control input::placeholder { color: var(--ink); font-size: 16px; }
.ts-control input::placeholder { color: var(--muted); opacity: 1; }
.ts-wrapper.single .ts-control { cursor: text; }
.ts-wrapper.disabled .ts-control { opacity: .55; background: var(--surface-2); }
.ts-control .item { color: var(--ink); }

.ts-dropdown {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  margin-top: 6px;
  color: var(--ink);
  z-index: 60;
  overflow: hidden;
}
.ts-dropdown .ts-dropdown-content { max-height: 320px; }
.ts-dropdown .option,
.ts-dropdown .no-results,
.ts-dropdown .optgroup-header {
  padding: 10px 13px;
  white-space: normal;          /* long names wrap — never cut off */
  line-height: 1.35;
  color: var(--ink-soft);
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background: var(--primary-ghost);
  color: var(--ink);
}
.ts-dropdown .option.selected { font-weight: 600; color: var(--ink); }
.ts-dropdown .no-results { color: var(--muted); }