/* =============================================================================
   tomselect-overrides.css — Sửa lỗi UX của TomSelect (nạp SAU tom-select.bootstrap5.min.css)
   -----------------------------------------------------------------------------
   LỖI "chọn option xong bị xuống hàng" (nhất là text dài):
   `.ts-control` mặc định `flex-wrap: wrap` (cho multi-select nhiều tag). Với SINGLE select,
   item đã chọn có `white-space:nowrap` + `min-width:auto` → khi text dài hơn bề rộng ô, item
   không co lại → flex-wrap đẩy item (và ô nhập) xuống dòng → control cao gấp đôi.

   Fix: single-select giữ 1 dòng, item co theo ô + cắt ellipsis.
   ============================================================================= */

.ts-wrapper.single .ts-control {
  flex-wrap: nowrap;          /* không đẩy item/input xuống dòng */
}

.ts-wrapper.single .ts-control > .item {
  min-width: 0;               /* cho phép co trong flex để ellipsis hoạt động */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ô nhập tìm kiếm trong single control không chiếm chỗ đẩy item (khi đã có item chọn) */
.ts-wrapper.single.has-items .ts-control > input {
  min-width: 0;
}

/* ---------- Compact: select nhỏ (form-select-sm / info-item-select) → TomSelect gọn, không phình to ----------
   !important vì tom-select.bootstrap5 + accessibility.css set padding/font/min-height cho .ts-control khá cứng. */
.ts-wrapper.ts-compact .ts-control {
  min-height: 0 !important;
  height: auto !important;
  padding: 1px 24px 1px 8px !important;
  font-size: 0.8125rem !important;
  line-height: 1.25 !important;
}
.ts-wrapper.ts-compact .ts-control > .item {
  padding: 0 !important;
  margin: 0 2px 0 0 !important;
  line-height: 1.25 !important;
  min-height: 0 !important;
}
.ts-wrapper.ts-compact .ts-control > input {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  font-size: 0.8125rem !important;
}

/* Dropdown của select nhỏ (page size "Số dòng", info-item…): control dùng width:auto nên co
   rất hẹp theo item đang chọn → dropdown thừa hưởng bề rộng hẹp → option nhiều ký tự (100/200/300)
   bị xuống dòng. Cho dropdown rộng theo nội dung, tối thiểu bằng control, và option không wrap. */
.ts-wrapper.ts-compact .ts-dropdown {
  width: max-content;
  min-width: 100%;
}
.ts-wrapper.ts-compact .ts-dropdown .option {
  white-space: nowrap;
}

/* Seamless: select nhúng trong ô info (total-mode) — bỏ viền/nền để hòa vào như style transparent gốc */
.ts-wrapper.ts-seamless .ts-control {
  border: none;
  background: transparent;
  box-shadow: none;
  padding-left: 4px;
}
.ts-wrapper.ts-seamless.focus .ts-control,
.ts-wrapper.ts-seamless .ts-control:focus-within { box-shadow: none; }

/* ---------- Custom tooltip (thay native title, hiện nhanh 0.1s) ---------- */
.cs-ts-tip {
  position: fixed;
  z-index: 21000;
  display: none;
  pointer-events: none;
  max-width: 380px;
  padding: 6px 10px;
  border-radius: 6px;
  /* Theo theme: trang sáng → tooltip sáng (viền để tách nền), trang tối → tooltip tối */
  background: #ffffff;
  color: #1f2933;
  border: 1px solid #d0d7de;
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
  white-space: normal;
  word-break: break-word;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease;
}
.cs-ts-tip.cs-ts-tip-show { opacity: 1; transform: translateY(0); }

[data-theme="dark"] .cs-ts-tip {
  background: #21262e;
  color: #e6ebf5;
  border-color: #3a4048;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
}

/* ---------- Căn giữa dọc (2026-07-15, đo DOM /User) ----------
   Biến thể input-hidden của tom-select.bootstrap5 có padding-top 6.375px / padding-bottom 0
   (lệch trục) → text/item dồn xuống đáy. Ép padding dọc 0 + flex center tự căn — áp CẢ 2 theme.
   :not(.ts-compact): compact có padding 1px/1px riêng phía trên — không đụng. */
.ts-wrapper .ts-control { align-items: center !important; }
.ts-wrapper:not(.ts-compact) .ts-control {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.ts-wrapper.single .ts-control > .item { align-self: center; }

/* ===== Dropdown đang mở: ẩn item đã chọn để ô search chiếm trọn control =====
   Fix: control khóa 1 dòng + item max-width:100% + input min-width:0 phía trên → khi gõ
   search, ký tự không hiển thị (nhất là mobile). Khi dropdown mở (đang chọn/gõ) thì item
   tạm ẩn, input full width; chọn xong/đóng dropdown → item hiện lại ngay (class
   dropdown-active theo isOpen — KHÔNG dùng input-active vì focus còn giữ sau khi chọn).
   :has(> input:not([readonly])) = chỉ áp cho control THẬT SỰ có ô search bên trong —
   select đã tắt search (controlInput:null → input KHÔNG nằm trong control; hoặc bị
   auto-tomselect set readOnly sau sync) giữ nguyên item, không bị trống control.
   :not(.items-placeholder): plugin dropdown_input chèn <input class="items-placeholder">
   (KHÔNG readonly) vào control nhưng ô gõ THẬT nằm trong dropdown → không được ẩn item
   (bug: bấm mở là control trống, không thấy trạm đang chọn).
   Browser không hỗ trợ :has → rule bị bỏ qua, giữ hành vi cũ. */
.ts-wrapper.single.dropdown-active .ts-control:has(> input:not([readonly]):not(.items-placeholder)) > .item {
  display: none;
}
/* Trả chỗ cho input khi item ẩn (đè min-width:0 của rule .has-items phía trên) */
.ts-wrapper.single.dropdown-active.has-items .ts-control:has(> input:not([readonly]):not(.items-placeholder)) > input:not(.items-placeholder) {
  min-width: 4rem;
  flex: 1 1 auto;
}

/* ===== Dropdown Trạm 2 dòng "trạm + công ty" (Home Connections + Home Tax) =====
   Markup do TsStation2LineRender (common.js) sinh: .ts-st2 > .st (trạm, đậm) + .co (công ty, mờ).
   Dùng chung cho option trong dropdown LẪN item trong control — control cao ~48px (touch target).
   Scope qua :has(.ts-st2) → chỉ ăn vào TomSelect dùng render 2 dòng, không đụng select thường. */
.ts-st2 { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }
.ts-st2 .st { font-weight: 600; font-size: 0.9rem; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-st2 .co { font-size: 0.72rem; opacity: .65; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Prefix "Trạm:" / "Cty:" trong từng dòng — thay label "Trạm" ngoài (đã bỏ), nhạt hơn phần tên */
.ts-st2 .pre { font-weight: 400; opacity: .6; }
.ts-wrapper:has(.ts-st2) .ts-control { min-height: 48px; align-items: center; }
.ts-wrapper:has(.ts-st2) .ts-control > .ts-st2 { flex: 1 1 auto; }
.ts-dropdown:has(.ts-st2) .option { padding: 7px 10px; }
.ts-dropdown:has(.ts-st2) .ts-dropdown-content { max-height: 55vh; }