/* ════════════════════════════════════════════════
   Reusable Searchable Combobox (2026-07-14, standarisasi filter/picker
   app-wide) — komponen GLOBAL dipakai di seluruh app, bukan cuma modul
   Produksi. Progressive-enhancement di atas <select> asli, lihat
   assets/js/components/combobox.js buat markup & perilakunya. Token warna
   pakai var(--primary)/var(--surface)/var(--surface-2)/var(--border)/
   var(--text)/var(--text-light)/var(--shadow) dari assets/css/variables.css
   (global, dipakai semua modul) biar tampilannya SAMA & ikut tema light/dark
   di halaman manapun — bukan cuma yang kebetulan sudah pakai token itu.

   REDESIGN 2026-07-18 (gaya team-switcher): trigger sekarang tombol
   DISPLAY-ONLY (cuma nampilin pilihan + panah), dan kotak CARI pindah ke
   DALAM panel (di atas daftar). Nama class TIDAK diubah (.cbx-control /
   .cbx-panel.show / .cbx-filter / .cbx-field / .cbx-icon / dst) supaya semua
   override tinggi per-halaman (produksi-new/master-produk/sales-analytics)
   & kode JS yang nyentuh .cbx-panel.show / cbxInstance.sync() tetap jalan.
   ════════════════════════════════════════════════ */
.cbx { position: relative; }
.cbx-field { width: 100%; }
.cbx-filter { flex-shrink: 0; }

/* <select> asli tetap satu-satunya sumber kebenaran (value/onchange/options)
   — cuma disembunyikan visual TOTAL (bukan display:none, biar tetap gampang
   di-query/debug & tidak keluar dari alur DOM), trigger dibangun murni dari
   <option>-nya lewat JS. */
.cbx-native {
    position: absolute; top: 0; left: 0; width: 0; height: 0; min-width: 0;
    padding: 0; border: 0; margin: 0; opacity: 0; pointer-events: none; overflow: hidden;
}

/* Trigger = tombol display-only. Klik/Enter/Space/↓ buka panel; ketiknya di
   dalam panel, bukan di sini lagi. */
.cbx-control {
    display: flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 0 11px 0 13px; box-sizing: border-box;
    border: 1.5px solid var(--border); border-radius: 14px;
    background: var(--surface); cursor: pointer; user-select: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.cbx-field .cbx-control { width: 100%; }
.cbx-filter .cbx-control { height: 38px; min-width: 152px; max-width: 220px; }
.cbx-control:hover { border-color: #cbd5e1; }
.cbx-control.cbx-open,
.cbx-control:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.cbx-control.cbx-invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.1); }
.cbx-control.cbx-disabled { background: var(--surface-2); cursor: not-allowed; opacity: .65; }

.cbx-icon { flex-shrink: 0; font-size: 15px; color: var(--text-light); transition: color .18s ease; }
.cbx-control.has-value .cbx-icon { color: var(--primary); }

/* Label pilihan di trigger (dulu <input class="cbx-input">, sekarang <span>). */
.cbx-value {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: "Poppins", sans-serif; font-size: 13px; color: var(--text); font-weight: 600;
}
.cbx-value.is-placeholder { color: var(--text-light); font-weight: 400; }

.cbx-control-right { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.cbx-clear {
    display: none; align-items: center; justify-content: center; width: 20px; height: 20px;
    border: none; border-radius: 50%; background: transparent; color: var(--text-light);
    font-size: 14px; cursor: pointer; flex-shrink: 0; padding: 0;
    transition: background-color .15s ease, color .15s ease;
}
.cbx-clear:hover { background: rgba(220,38,38,.1); color: #dc2626; }
/* Tampil/sembunyi × diatur JS (sync): cuma pas ada value & tidak disabled. */
.cbx-chevron { font-size: 15px; color: var(--text-light); transition: transform .18s ease; flex-shrink: 0; }
.cbx-control.cbx-open .cbx-chevron { transform: rotate(180deg); }

/* Panel ditempel ke <body> lewat JS (posisi dihitung dinamis via getBoundingClientRect)
   — WAJIB tetap di body: banyak combobox hidup di dalam modal ber-overflow:auto
   (Stok Bahan/Cash/Transaksi/dll), panel harus lolos dari kliping & overlay modal.
   Isinya: kotak Cari (pinned) + daftar (scroll). */
.cbx-panel {
    display: none; flex-direction: column; position: absolute; z-index: 1200;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow); overflow: hidden; padding: 5px;
}
.cbx-panel.show { display: flex; animation: cbx-fade-up .16s ease both; }
@keyframes cbx-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cbx-panel.show { animation: none; } }

/* Kotak Cari di dalam panel. */
.cbx-search {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px;
    margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.cbx-search-ic { font-size: 15px; color: var(--text-light); flex-shrink: 0; }
.cbx-search-input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-family: "Poppins", sans-serif; font-size: 13px; color: var(--text); padding: 1px 0;
}
.cbx-search-input::placeholder { color: var(--text-light); font-weight: 400; }

.cbx-list { display: flex; flex-direction: column; gap: 1px; max-height: 240px; overflow-y: auto; overflow-x: hidden; }

.cbx-option {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 10px; border-radius: 9px; font-family: "Poppins", sans-serif; font-size: 12.5px;
    color: var(--text); cursor: pointer; transition: background-color .12s ease, color .12s ease;
}
.cbx-option:hover, .cbx-option.active { background: var(--surface-2); }
.cbx-option.selected { background: rgba(37,99,235,.1); color: var(--primary); font-weight: 600; }
.cbx-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbx-option .cbx-check { display: none; font-size: 15px; color: var(--primary); flex-shrink: 0; }
.cbx-option.selected .cbx-check { display: inline-flex; }
.cbx-empty { padding: 20px 14px; text-align: center; font-size: 12px; color: var(--text-light); font-style: italic; }

.cbx-list::-webkit-scrollbar { width: 8px; }
.cbx-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

@media (max-width: 768px) {
    .cbx-filter .cbx-control { max-width: none; width: 100%; }
}
