/*
 * Panel — kısa listeli TEK seçim: temalı yerel <select>. Aynı ailenin diğer ikisi: uzun/aranabilir liste = select2
 * (css/secim.css + js/okul-secici.js), çoklu seçim = coklu-secim.css. Üçü aynı görünür:
 *  - kutu .form-control ile aynı (yükseklik, iç boşluk, #ced4da kenarlık, .2rem köşe, yazı), üzerine gelince #b1bbc4,
 *    odakta mor halka (temanın geçerli/geçersiz alanlardaki "box-shadow: none !important" kuralı aşılır),
 *  - ok coklu-secim .cs-alan::after / select2 okuyla aynı açılı ok (gömülü SVG, aynı renk ve yer),
 *  - yer tutucu seçiliyken soluk yazı, pasifte gri zemin, .was-validated / .is-invalid kırmızı, geçerli yeşil kenarlık,
 *  - telefon/tablet ve dokunmatikte 16 px yazı (iOS yakınlaştırmaz) ve 44 px kutu.
 * Yalnızca panelde yüklenir (herkese açık sayfalar etkilenmez): yeni şablon <head>'de (panel-bas.php), eski sayfalara
 * PanelKabuk::alt'taki js/okul-secici.js ekler (o sayfalar gövde "loading" ile gizliyken). Kapsam: class'ı form-control /
 * custom-select olan ya da class'sız, çoklu ve size'lı olmayan select'ler (flatpickr ay listesi gibi eklenti select'leri hariç;
 * select2 / coklu-secim'in gizlediği yerel select'ler zaten görünmez).
 */
:root {
    --secim-ok: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%2398a6ad' stroke-width='2' d='M1 1.5l5 5 5-5'/%3e%3c/svg%3e");
}

select:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]) {
    height: calc(1.5em + .9rem + 2px); padding: .45rem 2rem .45rem .9rem;
    font-size: .875rem; font-weight: 400; line-height: 1.5; color: #6c757d;
    background: #fff var(--secim-ok) no-repeat right .65rem center / .75rem .5rem;
    border: 1px solid #ced4da; border-radius: .2rem; outline: 0; box-shadow: none; cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    text-overflow: ellipsis; transition: border-color .15s, box-shadow .15s;
}
select:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]):hover { border-color: #b1bbc4; }
select:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]):focus {
    border-color: #b1bbc4; box-shadow: 0 0 0 .15rem rgba(102, 88, 221, .25) !important;
}

/* yer tutucu ("Seçiniz", "Önce sınav seçiniz") seçiliyken soluk; açılan listede seçenekler koyu */
select:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]):has(> option[value=""]:checked) { color: #98a6ad; }
select:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]) option { color: #323a46; }
select:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]) option[value=""],
select:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]) option:disabled { color: #98a6ad; }

select:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]):disabled {
    background-color: #e9ecef; opacity: .8; cursor: not-allowed;
}

/* küçük boy (DataTables "N kayıt göster") — masaüstünde küçük kalır */
select:is(.custom-select-sm, .form-control-sm):not([multiple]):not([size]) {
    height: calc(1.5em + .56rem + 2px); padding: .28rem 1.75rem .28rem .8rem; font-size: .7875rem; background-position: right .5rem center;
}

/* doğrulama (Bootstrap): temanın çift simgeli arka planı yerine aynı ok + kenarlık rengi (select2 / coklu-secim ile aynı) */
.was-validated select:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]):invalid,
select.is-invalid:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]) {
    border-color: #f1556c; padding-right: 2rem; background: #fff var(--secim-ok) no-repeat right .65rem center / .75rem .5rem;
}
.was-validated select:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]):invalid:focus,
select.is-invalid:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]):focus {
    border-color: #f1556c; box-shadow: 0 0 0 .15rem rgba(241, 85, 108, .25) !important;
}
.was-validated select:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]):valid,
select.is-valid:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]) {
    border-color: #1abc9c; padding-right: 2rem; background: #fff var(--secim-ok) no-repeat right .65rem center / .75rem .5rem;
}

/* telefon / tablet ve dokunmatik: 16 px yazı, 44 px kutu (select2 ve coklu-secim ile aynı sorgu) */
@media (max-width: 991.98px), (pointer: coarse) {
    select:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]),
    select:is(.custom-select-sm, .form-control-sm):not([multiple]):not([size]) {
        height: 2.75rem; padding-top: .5rem; padding-bottom: .5rem; font-size: 16px; background-position: right .65rem center;
    }
}
@media (prefers-reduced-motion: reduce) {
    select:is(.form-control, .custom-select, :not([class])):not([multiple]):not([size]) { transition: none; }
}