/* =============================================================================
 *  GAYA LIMA PERAN & PORTAL ORANG TUA                      (REVISI BESAR v7)
 * -----------------------------------------------------------------------------
 *  Berkas kecil, sengaja dimuat paling akhir. Isinya hanya hal-hal yang tidak
 *  bisa diselesaikan dengan kelas utilitas di dalam markup:
 *    1. Menyembunyikan perkakas petugas dari akun Orang Tua Santri.
 *    2. Menjaga tabel/daftar akun tetap terbaca di layar HP sempit.
 *    3. Aksen warna per peran, supaya pengguna langsung tahu ia sedang masuk
 *       sebagai siapa — pencegahan sederhana untuk perangkat yang dipakai
 *       bergantian oleh beberapa petugas.
 * ============================================================================= */

/* ---- 1. Perkakas yang tidak berlaku bagi akun Orang Tua Santri -------------- */
/* Asisten AI: server AI menolak peran ini saat login, jadi tombolnya pun tidak
   perlu ada. Disembunyikan lewat CSS supaya tetap hilang meski berkas JS asisten
   dimuat lebih dulu daripada penentuan peran. */
body[data-peran="ortu"] .ai-fab,
body[data-peran="ortu"] #ai-center-panel,
body[data-peran="ortu"] #fab-absen {
    display: none !important;
}

/* ---- 2. Aksen peran pada bilah sisi ---------------------------------------- */
body[data-peran="superadmin"] #sidebar-profile-chip { box-shadow: inset 3px 0 0 0 #a78bfa; }
body[data-peran="admin"]      #sidebar-profile-chip { box-shadow: inset 3px 0 0 0 #60a5fa; }
body[data-peran="pengasuhan"] #sidebar-profile-chip { box-shadow: inset 3px 0 0 0 #2dd4bf; }
body[data-peran="wali"]       #sidebar-profile-chip { box-shadow: inset 3px 0 0 0 #fbbf24; }
body[data-peran="ortu"]       #sidebar-profile-chip { box-shadow: inset 3px 0 0 0 #fb7185; }

/* ---- 3. Halaman Akun Orang Tua --------------------------------------------- */
/* Baris santri memakai tata letak mendatar di layar lebar, tetapi pada HP tombol
   aksinya perlu turun ke bawah agar targetnya tetap 44px dan nama santri tidak
   terpotong. */
@media (max-width: 640px) {
    #parent-account-body > div {
        flex-wrap: wrap;
    }
    #parent-account-body > div > div:last-child {
        width: 100%;
        flex-direction: row;
        justify-content: flex-end;
        gap: 0.5rem;
        padding-top: 0.25rem;
    }
}

/* Kartu kredensial: kata sandi harus mudah dibaca & disalin, termasuk saat
   dibacakan lewat telepon. Angka nol dan huruf O dibedakan oleh jenis huruf
   monospace bawaan sistem. */
#kartu-akun-list .font-mono {
    letter-spacing: 0.02em;
    user-select: all;
}

/* ---- 4. Portal orang tua ---------------------------------------------------- */
/* Teks portal sedikit lebih besar daripada aplikasi petugas: penggunanya lintas
   usia, sering membuka dari HP dengan layar kecil. */
body[data-peran="ortu"] #content-area {
    font-size: 15px;
}
body[data-peran="ortu"] #content-area p,
body[data-peran="ortu"] #content-area li {
    line-height: 1.65;
}

/* Foto dokumentasi: rasio tetap persegi supaya kisi tidak berloncatan saat
   gambar dimuat satu per satu di koneksi lambat. */
body[data-peran="ortu"] .aspect-square {
    aspect-ratio: 1 / 1;
}

/* ---- 5. Hormati preferensi sistem ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    #parent-account-body img,
    body[data-peran="ortu"] #content-area img {
        transition: none !important;
        transform: none !important;
    }
}

/* ---- 6. Cetak --------------------------------------------------------------- */
@media print {
    #parent-stat-strip,
    #parent-account-body button {
        display: none !important;
    }
}