/* =====================================================================================
   FILE BARU (5 Okt 2026): COMBOBOX PUBLIK (pasangan assets/js/pw-select.js, select[data-pw-select])
   Tampilan selaras dengan combobox Admin/Siswa: tombol + daftar melayang bertema Solarized,
   centang pada pilihan aktif. <select> asli disembunyikan (tetap sumber nilai form).
   Varian:
     data-pw-select          -> tombol pil (kontrol "Urutkan" di Kursus & Toko)
     data-pw-select="field"  -> kolom formulir (kotak, sama dengan kolom isian lain; dipakai di Kontak)
   ===================================================================================== */
.pw-sel { position: relative; display: inline-block; max-width: 100%; }
.pw-sel-native {
    position: absolute !important; left: 0; bottom: 0; width: 100% !important; height: 1px !important;
    opacity: 0 !important; pointer-events: none !important; border: 0 !important; padding: 0 !important;
}
.pw-sel-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    width: 100%; min-width: 12.5rem; min-height: 44px; padding: 0.4rem 0.95rem 0.4rem 1.1rem;
    border-radius: 50px; border: 1px solid var(--sol-border-soft); background: var(--sol-bg-card);
    color: var(--sol-text-bright); font: inherit; font-size: 0.9rem; font-weight: 600; text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.35s ease;
}
.pw-sel-btn .val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-sel-btn.is-placeholder .val { color: var(--sol-placeholder, var(--sol-text-muted)); opacity: 0.85; }
.pw-sel-btn .chev { flex: 0 0 auto; width: 14px; height: 14px; color: var(--sol-text-muted); transition: transform 0.2s ease, color 0.2s ease; }
.pw-sel-btn:focus-visible { outline: none; border-color: var(--sol-accent); box-shadow: 0 0 0 3px var(--sol-accent-soft); }
.pw-sel-btn[aria-expanded="true"] { border-color: var(--sol-accent); box-shadow: 0 0 0 3px var(--sol-accent-soft); }
.pw-sel-btn[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--sol-accent); }
.pw-sel-btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .pw-sel-btn:hover { border-color: var(--sol-accent); } }
.pw-sel.is-invalid .pw-sel-btn { border-color: var(--sol-error); box-shadow: 0 0 0 4px rgba(220, 50, 47, 0.12); }

/* Di dalam kontrol "Urutkan": beri ruang untuk ikon urut di kiri */
.pw-sort .pw-sel-btn { padding-left: 2.4rem; }
.pw-sort > .pw-ico { z-index: 2; } /* ikon tetap di atas tombol (pembungkus .pw-sel berposisi relatif) */

/* Varian kolom formulir */
.pw-sel.is-field { display: block; width: 100%; }
.pw-sel.is-field .pw-sel-btn {
    min-width: 0; min-height: 50px; padding: 0.75rem 1rem; border-radius: 0.5rem;
    background: var(--sol-bg-main); font-size: 1rem; font-weight: 400; line-height: 1.5; /* 16px: iOS tidak auto-zoom */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.pw-sel.is-field .pw-sel-btn:focus-visible, .pw-sel.is-field .pw-sel-btn[aria-expanded="true"] { box-shadow: 0 0 0 4px var(--sol-accent-soft); }
.pw-sel.is-field .pw-sel-btn .chev { width: 18px; height: 18px; color: var(--sol-text-main); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease; }
.pw-sel.is-field .pw-sel-btn[aria-expanded="true"] .chev { color: var(--sol-accent); }
.pw-sel.is-field .pw-sel-pop { border-radius: 0.75rem; }
.pw-sel.is-field .pw-sel-opt { font-weight: 500; font-size: 0.95rem; }

.pw-sel-pop {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1060; min-width: 100%;
    max-height: min(320px, 55vh); overflow-y: auto; overscroll-behavior: contain;
    padding: 0.35rem; border-radius: 14px; border: 1px solid var(--sol-border-soft);
    background: var(--sol-bg-card); box-shadow: 0 16px 38px var(--sol-shadow-color);
    animation: pwSelIn 0.16s ease-out;
}
.pw-sel.is-up .pw-sel-pop { top: auto; bottom: calc(100% + 6px); }
@keyframes pwSelIn { from { opacity: 0; transform: translate3d(0, -4px, 0); } to { opacity: 1; transform: none; } }
.pw-sel-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    min-height: 44px; padding: 0.5rem 0.8rem; border-radius: 10px; cursor: pointer;
    color: var(--sol-text-main); font-size: 0.9rem; font-weight: 600; -webkit-user-select: none; user-select: none;
}
.pw-sel-opt[hidden] { display: none; }
.pw-sel-opt.is-active { background: var(--sol-accent-soft); color: var(--sol-text-bright); }
.pw-sel-opt[aria-selected="true"] { color: var(--sol-accent); font-weight: 800; }
.pw-sel-opt[aria-selected="true"]::after { content: '\2713'; font-weight: 800; }
.pw-sel-opt[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 767.98px) {
    .pw-sort .pw-sel { display: block; width: 100%; }
    .pw-sel-btn { font-size: 16px; } /* sama dengan <select> lama di HP */
}
@media (prefers-reduced-motion: reduce) { .pw-sel-pop { animation: none; } .pw-sel-btn .chev { transition: none !important; } }