/* field.css — batas & penanda fokus kolom isian, berlaku SELURUH halaman.
 *
 * Latar masalahnya: tiap halaman menulis gaya fokusnya sendiri, dan hasilnya
 * tiga rasa yang berbeda —
 *   1. ada yang cuma ganti border-color 1px (nyaris tak terlihat di layar
 *      kantor yang pucat),
 *   2. ada yang menulis `outline:none` lalu menggantinya dengan box-shadow
 *      (bagus), tapi
 *   3. ada juga yang menulis `outline:none` TANPA pengganti apa pun — di
 *      halaman itu pemakai keyboard benar-benar kehilangan jejak kursor.
 *
 * File ini menutup ketiganya sekaligus tanpa perlu menyunting 40 halaman:
 *
 *   • Batas diam (resting) — ditulis dengan :where() alias spesifisitas NOL,
 *     jadi HANYA mengisi field yang halamannya tidak mengatur border sendiri.
 *     Desain per halaman tetap menang. Khusus .form-control/.form-select
 *     dipakai spesifisitas setara Bootstrap (0,1,0); karena file ini dimuat
 *     SETELAH bootstrap.min.css, ia menang atas #dee2e6 milik Bootstrap tapi
 *     tetap kalah dari <style> halaman yang dimuat lebih belakang.
 *
 *   • Penanda fokus — di sini !important dipakai dengan sadar. Ini satu-satunya
 *     cara mengalahkan puluhan `outline:none` yang sudah tertulis di halaman,
 *     dan outline (bukan box-shadow) dipilih karena outline mengikuti bentuk
 *     elemen, tidak terpotong oleh overflow:hidden induknya, serta tetap
 *     terlihat di Windows High Contrast Mode. Border-color halaman tidak
 *     disentuh, jadi aksen khas per field (mis. merah untuk PPh, kuning untuk
 *     harga bisa-diubah) tetap tampil — outline hanya menumpuk di atasnya.
 *
 * WCAG yang dituju: 1.4.11 (batas komponen ≥3:1) & 2.4.7/2.4.11 (fokus jelas).
 * Ketebalan 2px + offset 1px = area penanda melebihi 2 CSS px yang diminta
 * kriteria "Focus Appearance", tanpa menggeser tata letak (outline tidak
 * memakan ruang seperti border).
 */

:root{
    /* Batas kolom isian. Nilainya sama dengan tema 'normal' di tema_lib.php.
     *
     * Ditulis di sini karena tema_head_tag() hanya dipanggil di index.php —
     * halaman yang berdiri sendiri (login, set_password, pengeluaran,
     * bulk_stok, efaktur, edit_harga, update_pricelist, import_harga,
     * rekap_kas, arsip_faktur_pajak) tidak pernah menerima :root tema. Di
     * halaman-halaman itu, semua penulisan var(--app-field-brd,#dde3ed) jatuh
     * ke nilai cadangannya yang pucat (1,29:1 — praktis tak terlihat). Dengan
     * baris ini variabelnya SELALU ada, jadi nilai cadangan itu tidak pernah
     * terpakai lagi.
     *
     * Di index.php baris ini kalah dari tema: <style> tema dicetak setelah
     * <link> ini, spesifisitasnya sama, jadi yang belakangan menang — persis
     * yang diinginkan (tema Teduh/Kaca punya nilainya sendiri). */
    --app-field-brd: #8b94a4;

    /* Warna penanda fokus. Sama dengan --accent yang dipakai hampir semua
     * halaman; ditulis ulang di sini supaya file ini tetap benar walau dimuat
     * di halaman yang belum mendefinisikan --accent. */
    --focus-ring-color: #1d6fa4;
    --focus-ring-width: 2px;
}

/* ── 1. Batas diam ────────────────────────────────────────────────────────
 * Checkbox/radio/range/color/file/tombol sengaja DIKELUARKAN: bentuknya bukan
 * kotak isian, border paksa di situ malah merusak tampilan aslinya. */
:where(
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden]),
    select,
    textarea,
    [contenteditable="true"]
){
    border: 1px solid var(--app-field-brd, #8b94a4);
    border-radius: 6px;
}

/* Bootstrap menulis .form-control{border:1px solid #dee2e6} = 1,68:1 di atas
 * putih, gagal jauh dari ambang 3:1. Dinaikkan ke token tema. */
.form-control,
.form-select{
    border-color: var(--app-field-brd, #8b94a4);
}

/* Select2 & flatpickr menggambar kotaknya sendiri, tidak lewat .form-control. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown{
    border-color: var(--app-field-brd, #8b94a4);
}

/* ── 2. Penanda fokus ─────────────────────────────────────────────────────
 * :focus-visible dipakai, bukan :focus — supaya klik mouse pada field tidak
 * memunculkan cincin yang mengganggu, sementara Tab tetap dapat penanda.
 * Untuk kolom isian teks, browser memperlakukan klik sebagai focus-visible
 * juga (kursor teks memang perlu ditandai), jadi keduanya aman di sini. */
input:not([type=hidden]):focus-visible,
select:focus-visible,
textarea:focus-visible,
[contenteditable="true"]:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible{
    outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
    outline-offset: 1px !important;
    /* box-shadow SENGAJA tidak disetel di sini. Banyak halaman memakai
     * box-shadow sebagai cincin fokus berwarna khas (merah untuk PPh, kuning
     * untuk harga bisa-diubah, hijau untuk DP). Kalau file global ikut menulis
     * box-shadow, selektor di sini yang lebih spesifik akan menimpanya dan
     * arti warnanya hilang. Outline saja sudah cukup jelas, dan ia menumpuk
     * di luar cincin halaman, bukan menggantinya. */
}

/* Kotak centang & radio: outline-offset lebih rapat, kotaknya kecil. */
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible{
    outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
    outline-offset: 2px !important;
}

/* Elemen yang bisa di-Tab selain field: tombol, tautan, tab, baris tabel yang
 * dibuat fokusabel lewat tabindex. Tanpa ini, pemakai keyboard "hilang" begitu
 * kursor meninggalkan formulir. */
button:focus-visible,
a[href]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role=button]:focus-visible,
[role=tab]:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible{
    outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
    outline-offset: 2px !important;
}

/* Select2: yang menerima fokus adalah <span> pembungkusnya, bukan <select>
 * aslinya (yang disembunyikan), jadi butuh selektor sendiri. */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default .select2-search__field:focus{
    outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
    outline-offset: 1px !important;
}

/* Kolom isian nonaktif tidak perlu batas setegas field aktif — justru menyesatkan
 * karena terlihat bisa diisi. */
:where(input,select,textarea):disabled,
:where(input,select,textarea)[readonly],
.form-control:disabled,
.form-control[readonly],
.form-select:disabled{
    border-color: var(--surface-brd, #dde3ed);
}

/* Windows High Contrast / forced-colors: warna kustom diabaikan sistem, jadi
 * pakai warna sistem agar penanda tidak hilang sama sekali. */
@media (forced-colors: active){
    :focus-visible{
        outline: var(--focus-ring-width) solid Highlight !important;
        outline-offset: 1px !important;
    }
}

/* Cetakan: outline fokus tidak ada artinya di kertas, dan batas field yang
 * gelap membuat formulir tercetak jadi penuh kotak. */
@media print{
    :focus-visible{ outline: none !important; box-shadow: none !important; }
}