/* Portal Wali: hanya penyesuaian kecil di atas DQ.Design (token, tema, komponen). */
.wali-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: #1c3a2a center / cover no-repeat; }
.wali-login-isi { width: 100%; max-width: 26rem; }
.wali-kartu { background: var(--dq-surface, #fff); border: 1px solid var(--dq-border, #dee2e6); border-radius: .75rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.wali-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--dq-brand, #0d6efd); color: #fff; font-size: .8rem; font-weight: 600; }
#blazor-error-ui { background: #ffffe0; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); display: none; left: 0; padding: .6rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Halaman satu anak */
.wali-tab { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.wali-tab-item { padding: .35rem .8rem; border: 1px solid var(--dq-border, #dee2e6); border-radius: 999px; font-size: .88rem; color: inherit; text-decoration: none; background: var(--dq-surface, #fff); }
.wali-tab-item:hover { border-color: var(--dq-brand, #0d6efd); }
.wali-tab-item.aktif { background: var(--dq-brand, #0d6efd); border-color: var(--dq-brand, #0d6efd); color: #fff; }
.wali-isi .dq-card { margin-bottom: 1rem; }
.wali-dl { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: .35rem 1rem; margin: 0; }
.wali-dl dt { font-weight: 500; color: var(--dq-text-muted, #6c757d); font-size: .88rem; }
.wali-dl dd { margin: 0; word-break: break-word; }
.wali-orang { padding: .5rem 0; border-bottom: 1px solid var(--dq-border, #dee2e6); }
.wali-orang:last-child { border-bottom: 0; }
.wali-kegiatan { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--dq-border, #dee2e6); }
.wali-kegiatan:last-child { border-bottom: 0; }
.wali-kegiatan.lampau { opacity: .6; }
.wali-kegiatan-waktu { min-width: 12rem; color: var(--dq-text-muted, #6c757d); font-size: .9rem; }
@media (max-width: 575.98px) { .wali-dl { grid-template-columns: 1fr; gap: 0; } .wali-dl dd { margin-bottom: .5rem; } }

/* Hasil sidang kenaikan kelas */
.wali-keputusan { padding: .9rem 1rem; border-radius: .6rem; border: 1px solid var(--dq-border, #dee2e6); border-left-width: .35rem; }
.wali-keputusan.naik { border-left-color: #198754; background: rgba(25, 135, 84, .08); }
.wali-keputusan.tinggal { border-left-color: #dc3545; background: rgba(220, 53, 69, .08); }
.wali-keputusan.khusus { border-left-color: #ffc107; background: rgba(255, 193, 7, .1); }
.wali-html h1, .wali-html h2, .wali-html h3, .wali-html h4, .wali-html h5, .wali-html h6 { font-size: 1rem; font-weight: 600; margin: .25rem 0; }
.wali-html p { margin: .25rem 0; }
.wali-surat { max-width: 100%; height: auto; border-radius: .5rem; }
.wali-teks { white-space: pre-line; }

/* Pesan */
.wali-chat { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: 1rem; min-height: 60vh; }
.wali-chat-daftar, .wali-chat-isi { border: 1px solid var(--dq-border, #dee2e6); border-radius: .6rem; background: var(--dq-surface, #fff); }
.wali-chat-daftar { padding: .75rem; overflow-y: auto; max-height: 75vh; }
.wali-chat-baris { display: flex; gap: .6rem; width: 100%; text-align: left; padding: .5rem; border: 0; border-radius: .5rem; background: transparent; color: inherit; }
.wali-chat-baris:hover, .wali-chat-baris.aktif { background: rgba(13, 110, 253, .08); }
.wali-chat-teks { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wali-chat-isi { display: flex; flex-direction: column; max-height: 75vh; }
.wali-chat-kepala { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-bottom: 1px solid var(--dq-border, #dee2e6); }
.wali-chat-pesan { flex: 1; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.wali-gelembung { max-width: 80%; padding: .45rem .7rem; border-radius: .7rem; }
.wali-gelembung.saya { align-self: flex-end; background: rgba(13, 110, 253, .12); }
.wali-gelembung.lain { align-self: flex-start; background: rgba(108, 117, 125, .12); }
.wali-chat-kirim { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid var(--dq-border, #dee2e6); }
.wali-chat-kirim textarea { resize: none; }
@media (max-width: 991.98px) {
  .wali-chat { grid-template-columns: 1fr; }
  .wali-chat .wali-chat-isi { display: none; }
  .wali-chat.buka .wali-chat-isi { display: flex; }
  .wali-chat.buka .wali-chat-daftar { display: none; }
}

.wali-batang { height: .55rem; border-radius: .3rem; background: var(--dq-brand, #0d6efd); }

/* Daftar surat */
.wali-surat-tautan { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border: 1px solid var(--dq-border, #dee2e6); border-radius: .5rem; color: inherit; text-decoration: none; background: var(--dq-surface, #fff); }
.wali-surat-tautan:hover { border-color: var(--dq-brand, #0d6efd); }
.wali-surat-no { min-width: 1.8rem; font-size: .8rem; color: var(--dq-text-muted, #6c757d); }
.wali-surat-nama { flex: 1; font-weight: 500; }
.wali-surat-arab { font-family: 'Amiri', 'Amiri Quran', serif; font-size: 1.2rem; }
[lang="ar"] { font-family: 'Amiri', 'Traditional Arabic', 'Noto Naskh Arabic', serif; }

/* Notifikasi */
.wali-notif { display: flex; gap: .8rem; padding: .7rem 1rem; border-bottom: 1px solid var(--dq-border, #dee2e6); }
.wali-notif:last-child { border-bottom: 0; }
.wali-notif.baru { background: rgba(13, 110, 253, .06); }
.wali-notif-ikon { font-size: 1.2rem; color: var(--dq-brand, #0d6efd); }
.wali-notif-isi { flex: 1; color: inherit; text-decoration: none; }
.wali-notif-isi:hover strong { text-decoration: underline; }

/* Foto santri (Beranda: di samping nama pada kepala kartu) dan grid Syncfusion */
.wali-foto { width: 56px; height: 56px; border: 2px solid var(--dq-brand-light, #cfd6df); }
.dq-card-header .wali-foto { margin-right: .25rem; }
.wali-grid { margin-bottom: .5rem; }
.wali-grid.e-grid { border-radius: .5rem; }

/* Nilai rapor: akordeon per semester, chip lebih besar, kartu angka, tulisan Arab sesuai rapor */
.wali-chips .dq-badge { font-size: 1.05rem; padding: .45rem .9rem; }
.wali-merah { color: #c62828; }
.wali-arab-judul { font-family: "Amiri", "Traditional Arabic", "Noto Naskh Arabic", serif; font-size: 1.15rem; }
.wali-stat { border: 1px solid var(--dq-brand-light, #cfd6df); border-radius: .75rem; padding: .6rem .75rem; text-align: center; background: #fff; height: 100%; }
.wali-stat-label { font-size: .85rem; color: #5b6573; }
.wali-stat-label.wali-arab-judul { font-size: 1.15rem; }
.wali-stat-nilai { font-size: 1.6rem; font-weight: 700; line-height: 1.3; }
.wali-arab-nilai { font-family: "Amiri", "Traditional Arabic", "Noto Naskh Arabic", serif; font-size: 1.5rem; }
.wali-stat-angka { display: block; font-size: .95rem; font-weight: 400; color: #5b6573; }
.wali-stat-merah { border-color: #c62828; background: #fdecea; }
.wali-stat-merah .wali-stat-nilai, .wali-stat-merah .wali-stat-label, .wali-stat-merah .wali-stat-angka { color: #c62828; }
.wali-akordeon { margin-bottom: 1rem; }

/* Warna absensi: sakit ungu (di pondok dan di rumah), tugas pondok biru, ghaib merah */
.dq-badge.wali-abs-sakit { background: #6f42c1; color: #fff; border-color: #6f42c1; }
.dq-badge.wali-abs-tugas { background: #1565c0; color: #fff; border-color: #1565c0; }
.dq-badge.wali-abs-ghaib { background: #c62828; color: #fff; border-color: #c62828; }
.dq-badge.wali-abs-hadir { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }
.dq-badge.wali-abs-izin { background: #fff8e1; color: #8a6100; border-color: #ffe082; }
.dq-badge.wali-abs-lain { background: #eceff1; color: #455a64; border-color: #cfd8dc; }

/* ---- Ornamen mirip PRP (login dan bagian dalam). Berkas di /images/ornamen masih DUMMY (sama dengan PRP): ganti dengan SVG Pesantren (ubin 64x64, garis hitam di atas latar transparan) tanpa mengubah CSS ini.
   Hanya bentuknya yang dipakai (mask); warna mengikuti aksen kampus (--dq-brand-base). ---- */
/* Login: foto kampus sebagai latar (hanya layar lebar, supaya HP wali tidak mengunduh 350 KB), kartu semi-transparan di kiri seperti login PRP. */
@media (min-width: 768px) { .wali-login { background-image: url(images/login/bg-dq1.jpg); justify-content: flex-start; padding-inline: clamp(1rem, 8vw, 7rem); } }
.wali-login-isi { position: relative; isolation: isolate; overflow: hidden; padding: 1.5rem 1.75rem; border-radius: .75rem; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: 0 8px 32px rgba(0, 0, 0, .25); }
.wali-login .wali-kartu { background: transparent; border: 0; box-shadow: none; padding: 0; }
.wali-login-isi::before, .wali-login-isi::after, .dq-main::before { content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--dq-brand-base, #228b22); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.wali-login-isi::before { inset: 0; opacity: .07; border-radius: inherit; -webkit-mask-image: url("images/ornamen/pola-dummy.svg"); mask-image: url("images/ornamen/pola-dummy.svg"); -webkit-mask-size: 64px 64px; mask-size: 64px 64px; -webkit-mask-repeat: repeat; mask-repeat: repeat; }
.wali-login-isi::after { width: 11rem; aspect-ratio: 1; right: -3rem; bottom: -3rem; opacity: .1; -webkit-mask-image: url("images/ornamen/sudut-dummy.svg"); mask-image: url("images/ornamen/sudut-dummy.svg"); -webkit-mask-size: contain; mask-size: contain; }

/* Bagian dalam: pola ubin sangat halus di latar halaman, di balik kartu dan hero. */
.dq-main { position: relative; isolation: isolate; }
.dq-main::before { inset: 0; opacity: .035; -webkit-mask-image: url("images/ornamen/pola-dummy.svg"); mask-image: url("images/ornamen/pola-dummy.svg"); -webkit-mask-size: 64px 64px; mask-size: 64px 64px; -webkit-mask-repeat: repeat; mask-repeat: repeat; }
@media print { .dq-main::before { display: none; } }
.wali-login-isi img { max-width: 100%; height: auto; max-height: 72px; object-fit: contain; }
@media (max-width: 575.98px) { .wali-login-isi { padding: 1.25rem 1rem; } }

/* Isi saldo (Virtual Account): kisi kartu bank */
.va-kartu { border: 1px solid var(--dq-border, #dee2e6); border-radius: .75rem; padding: .9rem 1rem; background: var(--dq-surface, #fff); }
.va-kartu:hover { border-color: var(--dq-brand, #198754); }
.va-logo { height: 28px; width: 56px; object-fit: contain; flex: none; }
.va-nomor { font-family: var(--bs-font-monospace, ui-monospace, monospace); font-size: 1.15rem; font-weight: 600; letter-spacing: .04em; word-break: break-all; }
.va-bayar { display: inline-block; margin-top: .35rem; padding: .25rem .6rem; border-radius: .5rem; background: rgba(25, 135, 84, .1); color: #146c43; font-size: .9rem; }
.min-w-0 { min-width: 0; }

/* Lencana jumlah notifikasi belum dibaca di menu samping */
.wali-nav-badge { display: inline-block; min-width: 1.25rem; margin-left: .45rem; padding: .05rem .4rem; border-radius: 1rem; background: var(--bs-danger, #dc3545); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.25; text-align: center; vertical-align: middle; }

/* Akordeon sederhana (Isi saldo: Virtual Account dilipat) */
.wali-akordeon { border: 1px solid var(--bs-border-color-translucent); border-radius: .65rem; background: var(--bs-body-bg); overflow: hidden; }
.wali-akordeon-kepala { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .75rem; width: 100%; padding: .85rem 1rem; cursor: pointer; }
.wali-akordeon-kepala:hover { background: var(--bs-tertiary-bg); }
.wali-akordeon-kepala:focus-visible { outline: 2px solid var(--dq-brand-base); outline-offset: -2px; }
.wali-akordeon-isi { padding: 1rem; border-top: 1px solid var(--bs-border-color-translucent); }

/* Halaman dokumen publik (kebijakan privasi): kartu lebar dan boleh digulir */
.wali-login-isi.wali-lebar { max-width: 46rem; }
.wali-dokumen h2 { margin-top: 1.25rem; }
.wali-dokumen ul { padding-left: 1.2rem; }
.wali-dokumen li { margin-bottom: .4rem; }