/* ============================================================================
   V9.CSS — Gaya Lapisan v9
   ----------------------------------------------------------------------------
   Seluruh gaya di sini MENAMBAH, tidak menimpa satu pun kelas milik
   index.html atau berkas assets lama. Semua nama kelas berawalan "v9-".

   Warna diambil dari peubah CSS yang sudah dipakai aplikasi (--c-primary-*,
   dsb) bila tersedia, dengan nilai cadangan agar tetap benar seandainya
   tema.js gagal dimuat. Mode gelap mengikuti kelas .dark milik Tailwind
   yang sudah dipasang aplikasi.
   ============================================================================ */

:root {
    --v9-garis: rgb(226 232 240);
    --v9-garis-lembut: rgb(241 245 249);
    --v9-kertas: #fff;
    --v9-redup: rgb(100 116 139);
    --v9-utama: rgb(var(--c-primary-500, 37 99 235));
    --v9-utama-lembut: rgb(var(--c-primary-500, 37 99 235) / .12);
}
.dark {
    --v9-garis: rgb(51 65 85 / .7);
    --v9-garis-lembut: rgb(51 65 85 / .45);
    --v9-kertas: rgb(15 23 42);
    --v9-redup: rgb(148 163 184);
}

/* ==========================================================================
   01. TOMBOL KEPALA — pencarian global & lonceng notifikasi
   Disisipkan SEBARIS ke dalam baris ikon header mobile (bersebelahan dengan
   tombol ganti tema & profil) lewat #mobile-header-actions — bukan
   mengambang lagi di atas header, supaya tidak dobel/menutupi ikon lain.
   Ukuran & warna tombolnya mengikuti .icon-btn bawaan header (konsisten
   dengan tombol tema/profil di sebelahnya).
   ========================================================================== */

.v9-kepala-aksi {
    display: flex;
    align-items: center;
    gap: 6px;
}
body[data-peran="ortu"] .v9-kepala-aksi { display: none; }

.v9-kepala-btn:active { transform: scale(.94); }
.v9-kepala-btn:focus-visible { outline: 2px solid var(--v9-utama); outline-offset: 2px; }

.v9-head { padding-right: 0; }

/* ==========================================================================
   02. TIMELINE SANTRI
   ========================================================================== */

.v9-timeline { position: relative; }

.v9-tl-hari { margin-bottom: 18px; }
.v9-tl-hari:last-child { margin-bottom: 0; }

.v9-tl-tanggal {
    font-size: 11px; font-weight: 800;
    color: var(--v9-redup);
    text-transform: none;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--v9-garis-lembut);
    display: inline-block;
    margin-bottom: 8px;
}

.v9-tl-item {
    position: relative;
    padding-left: 22px;
    padding-bottom: 12px;
}
.v9-tl-item::before {
    content: "";
    position: absolute;
    left: 5px; top: 16px; bottom: 0;
    width: 2px;
    background: var(--v9-garis);
}
.v9-tl-hari .v9-tl-item:last-child::before { display: none; }

.v9-tl-titik {
    position: absolute;
    left: 0; top: 8px;
    width: 12px; height: 12px;
    border-radius: 999px;
    border: 2px solid var(--v9-kertas);
    box-shadow: 0 0 0 1px var(--v9-garis);
}

.v9-tl-isi { min-width: 0; }

/* ==========================================================================
   03. GARIS RIWAYAT (kamar, kelas, wali, status, tahapan pembinaan)
   ========================================================================== */

.v9-riwayat { position: relative; }

.v9-rw-item {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 0 0 14px 20px;
}
.v9-rw-item::before {
    content: "";
    position: absolute;
    left: 4px; top: 14px; bottom: 0;
    width: 2px;
    background: var(--v9-garis);
}
.v9-rw-item:last-child { padding-bottom: 0; }
.v9-rw-item:last-child::before { display: none; }

.v9-rw-titik {
    position: absolute;
    left: 0; top: 6px;
    width: 10px; height: 10px;
    border-radius: 999px;
    background: var(--v9-garis);
    border: 2px solid var(--v9-kertas);
}
.v9-rw-aktif .v9-rw-titik {
    background: rgb(16 185 129);
    box-shadow: 0 0 0 3px rgb(16 185 129 / .18);
}

/* ==========================================================================
   04. DENAH KAMAR
   ========================================================================== */

.v9-denah {
    display: grid;
    gap: 8px;
    min-width: max-content;
}

.v9-sel {
    position: relative;
    aspect-ratio: 4 / 3;
    min-height: 74px;
    border-radius: 12px;
    border: 1.5px solid var(--v9-garis);
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, transform .12s;
}
.v9-sel-hampa {
    border-style: dashed;
    background: transparent;
    color: var(--v9-redup);
}
.v9-sel-hampa:hover:not(:disabled) {
    border-color: var(--v9-utama);
    background: var(--v9-utama-lembut);
}
.v9-sel-isi {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    border-radius: 10px;
    padding: 4px;
}
.v9-sel-nama {
    font-size: 12px; font-weight: 800;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
}
.v9-sel-angka { font-size: 10.5px; font-weight: 600; opacity: .75; }

.v9-sel-kosong   { background: rgb(241 245 249 / .7); border-color: var(--v9-garis); }
.v9-sel-tersedia { background: rgb(16 185 129 / .12); border-color: rgb(16 185 129 / .45); }
.v9-sel-penuh    { background: rgb(245 158 11 / .14); border-color: rgb(245 158 11 / .5); }
.v9-sel-lebih    { background: rgb(225 29 72 / .14);  border-color: rgb(225 29 72 / .55); }
.dark .v9-sel-kosong { background: rgb(30 41 59 / .5); }

.v9-sel:hover { transform: translateY(-1px); }

.v9-sel-lepas {
    position: absolute;
    top: -6px; right: -6px;
    width: 20px; height: 20px;
    border-radius: 999px;
    background: rgb(225 29 72);
    color: #fff;
    font-size: 9px;
    display: none;
    align-items: center; justify-content: center;
    border: 2px solid var(--v9-kertas);
}
.v9-sel:hover .v9-sel-lepas { display: flex; }

/* ==========================================================================
   05. KARTU SANTRI DIGITAL
   Ukuran kartu identitas standar ISO/IEC 7810 ID-1: 85,6 × 54 mm.
   ========================================================================== */

.v9-kartu {
    width: 85.6mm;
    height: 54mm;
    border-radius: 3.2mm;
    overflow: hidden;
    background: #fff;
    color: #0f172a;
    border: 1px solid rgb(203 213 225);
    box-shadow: 0 6px 20px rgb(15 23 42 / .12);
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.v9-kartu-atas {
    background: linear-gradient(135deg, rgb(var(--c-primary-600, 29 78 216)), rgb(var(--c-primary-500, 37 99 235)));
    color: #fff;
    padding: 2.4mm 3.4mm;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 3mm;
}
.v9-kartu-lembaga {
    font-size: 8.4pt; font-weight: 800;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v9-kartu-jenis {
    font-size: 6pt; font-weight: 600;
    opacity: .88;
    flex-shrink: 0;
}

.v9-kartu-badan {
    flex: 1;
    display: flex;
    gap: 3mm;
    padding: 3mm 3.4mm 2mm;
    min-height: 0;
}

.v9-kartu-foto {
    width: 17mm; height: 22mm;
    border-radius: 1.6mm;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgb(203 213 225);
    background: rgb(241 245 249);
}
.v9-kartu-inisial {
    display: flex; align-items: center; justify-content: center;
    font-size: 20pt; font-weight: 800;
    color: rgb(148 163 184);
}

.v9-kartu-data { min-width: 0; flex: 1; }

.v9-kartu-nama {
    font-size: 10pt; font-weight: 800;
    line-height: 1.2;
    margin: 0 0 .4mm;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.v9-kartu-induk {
    font-size: 6.6pt;
    color: rgb(100 116 139);
    margin: 0 0 1.6mm;
    letter-spacing: .2pt;
}

.v9-kartu-detail {
    display: grid;
    grid-template-columns: 13mm 1fr;
    gap: .7mm 1.6mm;
    margin: 0;
    font-size: 6.4pt;
    line-height: 1.3;
}
.v9-kartu-detail dt { color: rgb(100 116 139); font-weight: 600; }
.v9-kartu-detail dd {
    margin: 0; font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v9-kartu-bawah {
    background: rgb(248 250 252);
    border-top: 1px solid rgb(226 232 240);
    padding: 1.4mm 3.4mm;
    display: flex;
    justify-content: space-between;
    font-size: 5.8pt;
    font-weight: 700;
    color: rgb(100 116 139);
    letter-spacing: .3pt;
}

/* Kartu selalu tercetak terang, walau aplikasi sedang mode gelap. */
.dark .v9-kartu { background: #fff; color: #0f172a; }

@media print {
    .v9-kartu { box-shadow: none; border: 1px solid rgb(148 163 184); }
}

/* ==========================================================================
   06. PUSAT NOTIFIKASI
   ========================================================================== */

.v9-notif-item {
    display: flex;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid var(--v9-garis);
    background: var(--v9-kertas);
    text-align: left;
    width: 100%;
    transition: border-color .15s, background .15s;
}
.v9-notif-item:hover { border-color: rgb(148 163 184); }

.v9-notif-belum {
    border-color: var(--v9-utama);
    background: var(--v9-utama-lembut);
}
.v9-notif-belum::after {
    content: "";
    width: 7px; height: 7px;
    border-radius: 999px;
    background: var(--v9-utama);
    flex-shrink: 0;
    align-self: center;
}

.v9-notif-ikon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    border: 1px solid transparent;
}

/* ==========================================================================
   07. GALERI
   ========================================================================== */

.v9-galeri-petak {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px;
}
.v9-galeri-foto {
    position: relative;
    aspect-ratio: 1;
    border-radius: 11px;
    overflow: hidden;
    border: 1px solid var(--v9-garis);
    background: var(--v9-garis-lembut);
}
.v9-galeri-foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.v9-galeri-cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px 7px 5px;
    background: linear-gradient(transparent, rgb(15 23 42 / .82));
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.v9-galeri-tanda {
    position: absolute;
    top: 5px; left: 5px;
    background: rgb(15 23 42 / .68);
    color: #fff;
    font-size: 9px; font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
}

.v9-album-sampul {
    aspect-ratio: 16 / 10;
    border-radius: 13px 13px 0 0;
    overflow: hidden;
    background: var(--v9-garis-lembut);
    display: flex; align-items: center; justify-content: center;
    color: var(--v9-redup);
}
.v9-album-sampul img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   08. AI CERDAS — tabel hasil & kartu temuan
   ========================================================================== */

.v9-ai-tabel {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
}
.v9-ai-tabel th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--v9-redup);
    padding: 9px 11px;
    background: var(--v9-garis-lembut);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.v9-ai-tabel td {
    padding: 8px 11px;
    border-bottom: 1px solid var(--v9-garis-lembut);
    white-space: nowrap;
}
.v9-ai-tabel tbody tr:hover { background: var(--v9-garis-lembut); }
.v9-ai-tabel td:first-child { font-weight: 700; white-space: normal; min-width: 150px; }

.v9-ai-bacaan {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--v9-utama-lembut);
    color: var(--v9-utama);
}

.v9-ai-contoh {
    text-align: left;
    width: 100%;
    font-size: 12px;
    line-height: 1.45;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px dashed var(--v9-garis);
    color: var(--v9-redup);
    transition: border-color .15s, color .15s;
}
.v9-ai-contoh:hover { border-color: var(--v9-utama); color: var(--v9-utama); border-style: solid; }

/* ==========================================================================
   09. JURNAL
   ========================================================================== */

.v9-jurnal-lampiran {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.v9-jurnal-lampiran a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 8px;
    border: 1px solid var(--v9-garis);
    color: var(--v9-redup);
}
.v9-jurnal-lampiran a:hover { border-color: var(--v9-utama); color: var(--v9-utama); }
.v9-jurnal-lampiran img {
    width: 54px; height: 54px;
    border-radius: 9px;
    object-fit: cover;
    border: 1px solid var(--v9-garis);
}

/* ==========================================================================
   10. UMUM
   ========================================================================== */

.v9-modal-isi { scrollbar-width: thin; }

.v9-tabs { position: sticky; top: 0; z-index: 5; }

/* Hormati preferensi "kurangi animasi" di sistem pengguna. */
@media (prefers-reduced-motion: reduce) {
    .v9-kepala-btn,
    .v9-sel,
    .v9-notif-item,
    .v9-ai-contoh { transition: none; }
    .v9-sel:hover { transform: none; }
}

/* Cetak: sembunyikan perkakas layar. */
@media print {
    .v9-kepala-aksi,
    .v9-tabs { display: none !important; }
}