/* ============================================================================
 * select-enhance.css — Gaya GLOBAL Tom Select (borderless) untuk semua admin.
 *
 * Dipakai bareng /js/select-enhance.js. Kontrol = "filled, tanpa border" agar
 * bersih & modern, tetap terbaca sebagai field lewat latar halus + caret.
 *
 * Spesifisitas sengaja rendah (.ts-wrapper .ts-control = 0,2,0) supaya halaman
 * yang punya gaya Tom Select sendiri (mis. #customerModal … , .pm-page …)
 * TETAP menang dan tak berubah. Ini hanya default global untuk selebihnya.
 * Semua warna dari token app.css (theme-aware light/dark).
 * ========================================================================== */

.ts-wrapper { width: 100%; box-sizing: border-box; padding: 0; border: 0; background: none; box-shadow: none; }

.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control {
  position: relative; box-sizing: border-box; width: 100%; min-width: 0;
  min-height: 44px; align-items: center; /* 40 kalah standar sentuh 44; selektor 0-3-0 ini menang atas .modal-bx .ts-control */
  padding: 8px 34px 8px 12px;               /* ruang caret di kanan */
  border: 0;                                 /* ── BORDERLESS ── */
  border-radius: 10px;
  background: var(--surface-2, #f1f5f9);      /* filled: tetap terlihat sbg field */
  color: var(--text, #0f172a);
  font-family: inherit; font-size: 13.5px; line-height: 1.3;
  box-shadow: none; cursor: pointer;
  transition: background .15s, box-shadow .15s;
  flex-wrap: nowrap; white-space: nowrap; overflow: hidden;
}
.ts-wrapper .ts-control:hover { background: var(--surface-3, #e2e8f0); }
.ts-wrapper.focus .ts-control {
  background: var(--surface, #fff);
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(59,130,246,.18));
}
.ts-wrapper.disabled .ts-control { opacity: .6; cursor: not-allowed; }

.ts-wrapper .ts-control > .item {
  margin: 0; padding: 0; line-height: 1.3; min-height: 0; min-width: 0; flex: 0 1 auto;
  display: block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text, #0f172a);
}
.ts-wrapper .ts-control > input {
  font-family: inherit; font-size: 13.5px; color: var(--text, #0f172a);
  height: auto; min-height: 0; cursor: pointer;
}
.ts-wrapper .ts-control > input::placeholder,
.ts-wrapper .ts-control .ts-placeholder {
  color: var(--text-faint, #94a3b8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* Caret (segitiga) — penanda jelas ini sebuah Select */
.ts-wrapper .ts-control::after {
  content: ""; position: absolute; right: 13px; top: 50%; margin-top: -3px;
  width: 0; height: 0; pointer-events: none;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--text-muted, #94a3b8);
}
.ts-wrapper.dropdown-active .ts-control::after {
  border-top: none; border-bottom: 6px solid var(--text-muted, #94a3b8);
}

/* Dropdown: search di atas, opsi di bawah */
.ts-dropdown {
  z-index: 10010; font-family: inherit; font-size: 13.5px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.14); overflow: hidden;
}
.ts-dropdown .dropdown-input-wrap { padding: 8px; background: var(--surface, #fff); border-bottom: 1px solid var(--border, #e2e8f0); }
.ts-dropdown input.dropdown-input {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  background: var(--surface-2, #f8fafc); color: var(--text, #0f172a);
  font-size: 13px; outline: none;
}
.ts-dropdown .ts-dropdown-content { max-height: 240px; }
.ts-dropdown .option { padding: 8px 12px; color: var(--text, #0f172a); }
.ts-dropdown .option.active { background: var(--surface-2, #eff6ff); color: var(--primary-dark, #1e40af); }
.ts-dropdown .option[aria-disabled="true"], .ts-dropdown .option.disabled { opacity: .5; cursor: not-allowed; }
.ts-dropdown .no-results { padding: 8px 12px; color: var(--text-faint, #94a3b8); }