/* murid-auth.css — halaman SEBELUM login untuk murid (/, /masuk), dimuat lewat
   layouts/guest-murid.php. Hanya komponen kartu/form; tombol besar (.btn-murid) & token warna
   sudah datang dari murid.css/tokens-murid.css. Jangan pernah dimuat bersamaan admin.css/neutral.css. */

body.tema-murid-auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-3);
    padding-bottom: var(--space-4); /* body.tema-murid punya padding-bottom utk bottom nav, tidak relevan di sini */
    background: var(--murid-bg-soft);
}

.murid-auth-card {
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.murid-auth-mascot {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-2);
}
/* Maskot halaman login 50% lebih kecil dari ukuran penuh kartu (murid.css men-set .maskot-svg
   width/height:100% secara global -- di sini di-override supaya cuma isi separuh lebar kartu). */
.murid-auth-mascot .maskot-svg { display: block; width: 50%; height: auto; }

.murid-auth-title {
    font-family: 'Baloo 2', var(--murid-font);
    font-size: var(--murid-text-xl);
    font-weight: 800;
    color: var(--murid-text);
    margin-bottom: var(--space-1);
}

.murid-auth-subtitle {
    font-size: var(--murid-text-base);
    color: var(--murid-text-muted);
    margin-bottom: var(--space-4);
}

.murid-auth-alert {
    background: var(--murid-danger-soft);
    color: var(--murid-danger);
    border: var(--murid-border-width) solid var(--murid-danger);
    border-radius: 12px;
    padding: var(--space-2) var(--space-3);
    font-weight: 700;
    font-size: var(--murid-text-sm);
    margin-bottom: var(--space-3);
    text-align: left;
}
.murid-auth-alert--success { background: var(--murid-success-soft); color: var(--murid-primary-dark); border-color: var(--murid-primary); }

.murid-auth-form { text-align: left; }
.murid-auth-group { margin-bottom: var(--space-3); }
/* Label disembunyikan SECARA VISUAL (bukan dihapus -- pembaca layar tetap membacanya),
   supaya teksnya cuma dilihat lewat placeholder di dalam field (gaya Duolingo: field
   polos tanpa caption di atasnya). Dipisah dari .murid-auth-group label lama supaya kalau
   suatu saat halaman auth murid lain butuh label yang KELIHATAN, tidak ikut tersembunyi. */
.murid-auth-group label.murid-auth-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.murid-auth-group input[type="email"],
.murid-auth-group input[type="password"],
.murid-auth-group input[type="text"] {
    width: 100%;
    padding: 14px var(--space-3);
    font-family: var(--murid-font);
    font-size: var(--murid-text-base);
    font-weight: 600;
    color: var(--murid-text);
    background: var(--murid-input-bg);
    border: var(--murid-border-width) solid var(--murid-border);
    border-radius: 12px;
}
.murid-auth-group input::placeholder { color: var(--murid-text-muted); font-weight: 600; }
.murid-auth-group input:focus { outline: none; border-color: var(--murid-secondary); }

.murid-auth-password-wrap { position: relative; }
/* Ruang kanan dilebarkan: sekarang menampung 2 elemen (link "Lupa?" + tombol mata),
   bukan cuma tombol mata seperti sebelumnya. */
.murid-auth-password-wrap input { padding-right: 92px; }
.murid-auth-password-forgot {
    position: absolute;
    top: 50%; right: 46px;
    transform: translateY(-50%);
    font-size: var(--murid-text-xs);
    font-weight: 800;
    color: var(--murid-text-muted);
    text-decoration: none;
}
.murid-auth-password-forgot:hover { color: var(--murid-secondary); text-decoration: underline; }
.murid-auth-password-toggle {
    position: absolute;
    top: 50%; right: 10px;
    transform: translateY(-50%);
    background: none; border: none; padding: 6px;
    color: var(--murid-text-muted);
    cursor: pointer;
}
.murid-auth-password-toggle svg { width: 20px; height: 20px; display: block; }

.murid-auth-checkbox { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--murid-text-muted); }
.murid-auth-link { color: var(--murid-secondary); font-weight: 800; text-decoration: none; }
.murid-auth-link:hover { text-decoration: underline; }

.murid-auth-divider {
    display: flex; align-items: center; gap: var(--space-2);
    margin: var(--space-4) 0;
    color: var(--murid-text-muted);
    font-size: var(--murid-text-xs);
    font-weight: 800;
    text-transform: uppercase;
}
.murid-auth-divider::before, .murid-auth-divider::after { content: ''; flex: 1; height: var(--murid-border-width); background: var(--murid-border); }

.murid-auth-footer { margin-top: var(--space-4); font-size: var(--murid-text-sm); }

/* Pilih sekolah: daftar kartu satu per baris, mudah diketuk. Markup pakai pola generik
   .option-card-group/.option-card (selectNeutralOption() di components.js, dipakai juga di
   /pilih-sekolah staff & /lupa-akses) -- di sini cuma diberi kulit warna/bentuk ala Duolingo
   lewat token --murid-*, style dasarnya (neutral.css) sengaja TIDAK dimuat di halaman ini. */
.option-card-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.option-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: #fff;
    border: var(--murid-border-width) solid var(--murid-border);
    border-radius: var(--murid-border-radius);
    cursor: pointer;
    text-align: left;
    transition: border-color 100ms ease, background 100ms ease;
}
.option-card:hover { border-color: var(--murid-secondary); }
.option-card.checked { border-color: var(--murid-primary); background: var(--murid-success-soft); }
.option-card input { position: absolute; opacity: 0; pointer-events: none; }
.opt-control {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--murid-info-soft);
}
.opt-control svg { width: 22px; height: 22px; }
.option-card.checked .opt-control { background: var(--murid-success-soft); }
.opt-body { min-width: 0; }
.opt-title { display: block; font-weight: 800; font-size: var(--murid-text-sm); color: var(--murid-text); }
.opt-desc { display: block; font-size: var(--murid-text-xs); color: var(--murid-text-muted); }

.murid-auth-empty { color: var(--murid-text-muted); font-size: var(--murid-text-sm); margin-bottom: var(--space-4); }

/* Halaman sebelum login: tidak ada tombol toggle tema (murid.js baru aktif setelah masuk app),
   jadi sengaja SELALU terang -- sama seperti neutral.css untuk /login & /admin. */