/* ==========================================================================
   COMPONENT.CSS — Fulfillin Member
   CSS untuk komponen UI general yang dipakai ulang di berbagai halaman
   (bukan spesifik 1 menu). Saat ini baru ada custom select (dengan search
   box di dalamnya). Akan ditambah komponen lain menyusul.
   ========================================================================== */

/* ── Premium Select: custom dropdown select dengan search box di dalamnya ──
   Dipakai di halaman create/edit yang butuh pilih produk/gudang/dll dari
   daftar panjang. Diinisialisasi via JS `convertToPremiumSelect(selectEl)`
   yang membungkus <select> asli jadi widget ini. ── */
.premium-select { position: relative; width: 100%; user-select: none; }
.premium-select-trigger {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 14px; background: var(--dash-surface); border: 1px solid var(--dash-line-strong); border-radius: 0.375rem;
    cursor: pointer; font-size: 0.9375rem; transition: all 0.2s ease;
    height: 38px !important; min-height: 38px !important; box-sizing: border-box !important; color: var(--dash-ink);
    font-family: var(--dash-font-body);
}
.premium-select-trigger:hover { border-color: var(--dash-brand); }
.premium-select.active .premium-select-trigger { border-color: var(--dash-brand); box-shadow: 0 0 0 3px var(--dash-brand-tint); }
.premium-select-arrow {
    width: 10px; height: 6px; background-color: var(--dash-muted);
    clip-path: polygon(100% 0%, 0% 0%, 50% 100%); transition: transform 0.3s ease;
}
.premium-select.active .premium-select-arrow { transform: rotate(180deg); background-color: var(--dash-brand); }
.premium-select-dropdown {
    position: absolute; top: 100%; left: 0; width: 100%; background: var(--dash-surface);
    border: 1px solid var(--dash-line-strong); border-radius: 8px; box-shadow: var(--dash-shadow);
    z-index: 999; opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all 0.2s ease; overflow: hidden; margin-top: 5px;
}
.premium-select.active .premium-select-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.premium-select.open-up .premium-select-dropdown {
    top: auto !important; bottom: 100% !important; margin-top: 0; margin-bottom: 5px; transform: translateY(-10px);
}
.premium-select.open-up.active .premium-select-dropdown { transform: translateY(0); }
.premium-select-search { padding: 8px; border-bottom: 1px solid var(--dash-line); display: flex; align-items: center; gap: 8px; }
.premium-select-search input {
    width: 100%; border: 1px solid var(--dash-line-strong) !important; padding: 6px 10px !important; font-size: 13px !important;
    background: var(--dash-raise) !important; color: var(--dash-ink) !important; height: 32px !important; border-radius: 6px !important;
}
.premium-select-search input::placeholder { color: var(--dash-muted); }
.premium-select-search input:focus {
    border-color: var(--dash-brand) !important; outline: none; box-shadow: 0 0 0 3px var(--dash-brand-tint) !important;
}
.premium-select-options { max-height: 220px; overflow-y: auto; }
.premium-select-options::-webkit-scrollbar { width: 6px; }
.premium-select-options::-webkit-scrollbar-thumb { background: var(--dash-line-strong); border-radius: 10px; }
.premium-option { padding: 8px 14px; font-size: 14px; cursor: pointer; transition: background 0.1s, color 0.1s; color: var(--dash-ink-soft); text-align: left !important; border-radius: 6px; }
.premium-option:hover { background: var(--dash-brand-tint-soft); color: var(--dash-ink); }
.premium-option.selected { background: var(--dash-brand-tint); color: var(--dash-brand); font-weight: 600; }
.premium-option.hidden { display: none; }
.premium-option.disabled { opacity: 0.6; cursor: not-allowed; background: var(--dash-raise) !important; color: var(--dash-muted) !important; }
.premium-select.disabled .premium-select-trigger {
    background: var(--dash-raise) !important; cursor: not-allowed !important; border-color: var(--dash-line) !important; color: var(--dash-muted) !important;
}
.premium-select.disabled .premium-select-arrow { background-color: var(--dash-muted) !important; }

/* ── Search Input: search box + indikator debounce (dots/spinner) ──
   Dipakai di filter cari list & search di modal picker. Markup dari
   <x-search-input>, logic debounce dari window.SearchDebounce (lihat
   public/js/search_debounce.js). .typing-dots & .spinner-border sudah
   didefinisikan global di public/assets/css/custom.css, tidak diulang di sini. ── */
.search-input-wrap .search-indicator {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.search-input-wrap .search-input-control {
    padding-right: 40px;
    /* Fix: .search-indicator (absolute) jadi child terakhir di
       .input-group-merge, jadi CSS bawaan template mengira input BUKAN
       elemen terakhir grup dan menerapkan rule "elemen tengah" ke dia:
       radius kanan DAN border kanan sama-sama jadi 0 (bukan cuma radius,
       cek computed style browser untuk konfirmasi — border-inline-end: 0
       dari core-*.css). Sisi kanan direplikasi PERSIS pakai formula & CSS
       variable yang sama dengan border bawaan .form-control (bukan warna
       hex statis, supaya match 3 sisi lain di kondisi apapun). Dipakai
       border-inline-end (logical) SEKALIGUS border-right (physical) supaya
       menang dari kedua bentuk rule yang mungkin nge-nolkan. */
    border-start-end-radius: var(--bs-border-radius) !important;
    border-end-end-radius: var(--bs-border-radius) !important;
    border-inline-end: var(--bs-border-width) solid color-mix(in sRGB, var(--bs-base-color) 22%, var(--bs-paper-bg)) !important;
    border-right: var(--bs-border-width) solid color-mix(in sRGB, var(--bs-base-color) 22%, var(--bs-paper-bg)) !important;
}
.search-input-wrap .search-input-control:focus {
    border-color: #c8102e !important;
}