/* neutral.css — halaman netral: pilih-sekolah, login-magic-link, wizard instalasi.

   Fase 0 "Redesain UI/UX Menyeluruh" (lihat catatan di tokens-admin.css): file ini TIDAK
   lagi mendefinisikan warna/tipografinya sendiri -- semua --neutral-* di bawah cuma alias ke
   var(--admin-*) dari tokens-admin.css, yang HARUS di-load lebih dulu (lihat urutan <link>
   di layouts/guest.php). Ini disengaja supaya 8 halaman guest yang sudah pakai class
   .neutral-card/.btn-neutral/dst tidak perlu diubah markup-nya sama sekali di fase ini --
   cukup ganti sumber warnanya, otomatis konsisten dengan sisi admin/guru/kepsek. Migrasi
   markup guest ke komponen bersama (components.css) yang sesungguhnya adalah fase terpisah
   (bukan bagian fondasi ini). */

:root {
    --neutral-primary: var(--admin-primary);
    --neutral-bg: var(--admin-bg);
    --neutral-surface: var(--admin-surface);
    --neutral-border: var(--admin-border);
    --neutral-text-primary: var(--admin-text-primary);
    --neutral-text-secondary: var(--admin-text-secondary);
    --neutral-danger: var(--admin-critical);
    --neutral-border-radius: var(--admin-border-radius);
    --neutral-font: var(--admin-font);

    /* Pemetaan ke komponen fakeselect.css (dropdown pengganti <select> native) */
    --fs-surface: var(--neutral-surface);
    --fs-border: var(--neutral-border);
    --fs-text: var(--neutral-text-primary);
    --fs-muted: var(--neutral-text-secondary);
    --fs-hover: var(--neutral-bg);
    --fs-radius: var(--neutral-border-radius);

    /* Fase 7: varian "soft" dari primary, dipakai state .checked Radio Group (Kartu) --
       sama seperti --accent-soft di Design System, dialihkan ke --admin-primary-soft
       (color-mix, lihat tokens-admin.css) supaya ikut berubah kalau sekolah override
       warna primary-nya sendiri di Pengaturan Sekolah. */
    --neutral-primary-soft: var(--admin-primary-soft);
    --neutral-border-strong: var(--admin-border-strong, var(--neutral-border));
}

body.tema-neutral {
    background: var(--neutral-bg);
    color: var(--neutral-text-primary);
    font-family: var(--neutral-font);
    /* 100vh dulu sbg fallback browser lama, lalu 100dvh (dynamic viewport height) di baris
       kedua -- browser yg tidak kenal dvh akan skip baris ini & tetap pakai vh. dvh ikut
       menyusut mengikuti tinggi viewport visual yg sebenarnya saat keyboard mobile muncul,
       beda dgn vh yg di sebagian browser tetap memakai tinggi SEBELUM keyboard muncul lalu
       "meloncat" begitu keyboard selesai animasi -- ini salah satu sumber kartu terasa
       kaget saat field disentuh di HP. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
}

.neutral-card {
    background: var(--neutral-surface);
    border: 1px solid var(--neutral-border);
    border-radius: var(--neutral-border-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    padding: var(--space-5);
    max-width: 420px;
    width: 100%;
}

.neutral-card__title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-1);
}
.neutral-card__subtitle {
    color: var(--neutral-text-secondary);
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
}

.neutral-form-group { margin-bottom: var(--space-3); }
.neutral-form-group label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
}
.neutral-form-group input,
.neutral-form-group select {
    width: 100%;
    padding: var(--space-2);
    border: 1px solid var(--neutral-border);
    border-radius: var(--neutral-border-radius);
    /* max(..., 16px): --text-base = 14px, di bawah ambang 16px yg dipakai Safari/Chrome iOS
       utk memutuskan apakah field perlu di-zoom otomatis saat fokus. Field <16px = begitu
       disentuh, browser mendadak nge-zoom in ke field itu lalu (saat blur) zoom out lagi --
       inilah penyebab utama sensasi "kaget"/kepentok keyboard di HP. Tetap tampil 14px di
       desktop/non-touch, otomatis naik ke 16px di browser yg mendukung max(). */
    font-size: max(var(--text-base), 16px);
    background: var(--neutral-surface);
    -webkit-appearance: none;
    appearance: none;
}
/* Tombol pengganti <select> (lihat fakeselect.js/.css) memakai kotak input yang
   sama persis dgn select asli supaya tampilannya tidak berubah dari sebelumnya,
   cuma interaksinya yang berganti jadi modal pilihan. */
.neutral-form-group .fakeselect-btn {
    padding: var(--space-2);
    border: 1px solid var(--neutral-border);
    border-radius: var(--neutral-border-radius);
    font-size: var(--text-base);
    background: var(--neutral-surface);
    color: var(--neutral-text-primary);
}

.btn-neutral {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--neutral-primary);
    color: #fff;
    text-align: center;
    border-radius: var(--neutral-border-radius);
    font-weight: 600;
    border: 1px solid transparent;
    -webkit-appearance: none;
    appearance: none;
}

.neutral-alert {
    background: var(--admin-critical-soft);
    color: var(--admin-critical-text);
    border: 1px solid var(--admin-critical-soft);
    border-radius: var(--neutral-border-radius);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}
.neutral-alert--success {
    background: var(--admin-success-soft);
    color: var(--admin-success-text);
    border-color: var(--admin-success-soft);
}

/* Fase 6 (guest/auth): badge logo bulat, dipakai di atas .neutral-card__title sebagai
   fallback saat sekolah belum punya logo upload (mis. layar superadmin, atau sekolah baru) --
   pola sama persis dengan .login-logo di Design System. Kalau sekolah SUDAH punya logo,
   <img> logo aslinya yang dipakai (lihat markup view auth/*), badge ini tidak dirender. */
.neutral-logo {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--neutral-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-3);
}
.neutral-logo svg { width: 22px; height: 22px; stroke: #fff; }

/* Fase 6: show/hide password -- pola sama dengan .password-wrap Design System, tombol
   mata di dalam field bukan field terpisah. Dipakai di auth/login-password.php &
   auth/atur-password.php (lihat initNeutralPasswordToggle() di components.js). */
.neutral-password-wrap { position: relative; }
.neutral-password-wrap input { padding-right: 38px; }
.neutral-password-toggle {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px;
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--neutral-text-secondary);
}
.neutral-password-toggle svg { width: 17px; height: 17px; stroke: currentColor; }
.neutral-password-toggle:hover { color: var(--neutral-text-primary); }

.neutral-step-indicator {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    font-size: var(--text-xs);
    color: var(--neutral-text-secondary);
}
.neutral-step-indicator .step.active { color: var(--neutral-primary); font-weight: 700; }

/* ───────────────────────── Fase 7 (guest/auth): kelengkapan Design System ─────────────────────────
   Bagian di bawah ini melengkapi migrasi Fase 6 di atas (.neutral-logo, .neutral-password-wrap)
   dengan potongan Design System yang belum dipakai halaman manapun: baris "ingat saya" +
   "lupa password", divider "atau", tombol sekunder, dan Radio Group (Kartu) pengganti
   <select> polos. Nama class & struktur mengikuti persis punya Design System
   (.field-row/.checkbox-label/.login-divider/.btn-secondary/.option-card-group dst) --
   cuma warnanya dialihkan ke var(--neutral-*)/var(--admin-*) yang sudah ada, bukan hex baru,
   supaya satu sumber token dengan sisi admin/guru/kepsek (lihat catatan Fase 0). */

.neutral-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: calc(var(--space-1) * -1) 0 var(--space-3);
    font-size: var(--text-sm);
}
.neutral-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--neutral-text-secondary);
    cursor: pointer;
}
.neutral-checkbox-label input {
    accent-color: var(--neutral-primary);
    width: 15px;
    height: 15px;
}
.neutral-link {
    color: var(--neutral-primary);
    font-weight: 500;
    text-decoration: none;
}
.neutral-link:hover { text-decoration: underline; }

.neutral-divider {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4) 0;
    color: var(--neutral-text-secondary);
    font-size: var(--text-xs);
}
.neutral-divider::before,
.neutral-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--neutral-border);
}

.btn-neutral-secondary {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--neutral-surface);
    color: var(--neutral-text-primary);
    border: 1px solid var(--neutral-border);
    text-align: center;
    border-radius: var(--neutral-border-radius);
    font-weight: 600;
}
.btn-neutral-secondary:hover { background: var(--neutral-bg); }

.neutral-footer {
    margin-top: var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--neutral-text-secondary);
}

/* Radio Group (Kartu) — pengganti <select> saat opsinya sedikit & tiap opsi pantas
   dijelaskan sebaris (mis. daftar sekolah). Struktur: label.option-card membungkus
   input[type=radio] yang disembunyikan (bukan display:none, supaya tetap terbaca
   screen reader & tetap ikut submit form biasa), lingkaran .opt-control, dan
   .opt-body berisi judul+deskripsi. State terpilih di-toggle lewat JS
   (selectNeutralOption(), lihat components.js) yang juga men-centang input aslinya. */
.option-card-group { display: flex; flex-direction: column; gap: var(--space-2); }
.option-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    background: var(--neutral-surface);
    border: 1.5px solid var(--neutral-border);
    border-radius: var(--neutral-border-radius);
    padding: var(--space-3);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.option-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.opt-control {
    width: 19px;
    height: 19px;
    border: 1.5px solid var(--neutral-border-strong);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .12s, background .12s;
    background: var(--neutral-surface);
}
.opt-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transform: scale(0);
    transition: transform .12s;
}
.option-card.checked { border-color: var(--neutral-primary); background: var(--neutral-primary-soft); }
.option-card.checked .opt-control { border-color: var(--neutral-primary); background: var(--neutral-primary); }
.option-card.checked .opt-dot { transform: scale(1); }
.option-card.disabled { opacity: .5; cursor: not-allowed; }
.opt-body { flex: 1; min-width: 0; }
.opt-title { font-size: var(--text-sm); font-weight: 600; color: var(--neutral-text-primary); }
.opt-desc { font-size: var(--text-xs); color: var(--neutral-text-secondary); margin-top: 1px; line-height: 1.4; }