/*
 * Override tema AdminLTE 4 (default biru) menjadi navy & amber.
 * File ini di-load SETELAH adminlte.min.css supaya variabel di sini menang.
 */

/* Font "Baloo 2" — di-hosting LOKAL (assets/vendor/fonts/), BUKAN
   panggil Google Fonts CDN. File .woff2 diambil resmi lewat paket npm
   @fontsource/baloo-2 (lisensi OFL, gratis untuk komersial), subset
   "latin" saja (bahasa Indonesia tidak butuh subset lain). */
@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../vendor/fonts/baloo-2/baloo-2-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendor/fonts/baloo-2/baloo-2-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../vendor/fonts/baloo-2/baloo-2-latin-800-normal.woff2') format('woff2');
}

:root {
    --brand-navy: #0B1E3A;
    --brand-navy-light: #142d54;
    --brand-amber: #C8961E;
    --brand-amber-light: #e0b04a;

    /* Override variabel Bootstrap 5 supaya komponen (button, link, badge primary, dll)
       otomatis ikut tema tanpa perlu ganti class satu-satu */
    --bs-primary: var(--brand-amber);
    --bs-primary-rgb: 200, 150, 30;
    --bs-link-color: var(--brand-navy);
    --bs-link-hover-color: var(--brand-navy-light);
}

/* Pengaman: cegah SELURUH HALAMAN bisa digeser kanan-kiri di HP kalau ada
   1 elemen saja yang sedikit lebih lebar dari layar (misal baris badge
   ringkasan yang jumlahnya bisa berubah-ubah). Tidak mengganggu elemen
   yang MEMANG sengaja bisa di-scroll ke samping sendiri (contoh:
   .table-responsive, tab-bar kepsek/ortu/siswa) — itu semua sudah atur
   overflow-x di kontainernya sendiri, bukan di body, jadi tetap jalan
   normal. */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Utility class tambahan yang dipakai di header.php */
.bg-navy { background-color: var(--brand-navy) !important; }
.bg-amber { background-color: var(--brand-amber) !important; }
.text-navy { color: var(--brand-navy) !important; }

/* Sidebar: SEBELUMNYA navy solid, lalu sempat dicoba gradasi senada
   login — SEKARANG solid Cobalt Blue (#0047AB), sama persis dengan
   warna tombol "Masuk" di halaman login, supaya istilah "Cobalt Blue"
   konsisten 1 warna yang sama di seluruh aplikasi. */
.app-sidebar.bg-navy {
    background-color: var(--brand-navy) !important;
}
/* KHUSUS role guru — sidebar disamakan dengan warna "guru-hero" (kartu
   sapaan di dashboard guru: gradasi navy -> navy-light). Selektor
   `.guru-layout` (class di <body>, cuma ada untuk role guru) bikin ini
   CUMA berlaku di konteks guru — admin TETAP Cobalt Blue solid seperti
   di atas, tidak ikut berubah. Ditaruh SETELAH aturan umum supaya
   menang lewat urutan cascade untuk konteks guru. */
.guru-layout .app-sidebar.bg-navy {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 100%) !important;
}
.app-sidebar .sidebar-brand {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.app-sidebar .brand-text {
    color: #ffffff !important;
}

/* Teks menu default: putih dengan opacity, supaya kontras jelas di atas navy gelap */
.app-sidebar .nav-link,
.app-sidebar .nav-link p {
    color: rgba(255,255,255,0.85) !important;
}
.app-sidebar .nav-icon {
    color: rgba(255,255,255,0.85) !important;
}

/* Hover: putih solid + background sedikit terang */
.app-sidebar .nav-link:hover:not(.active) {
    background-color: rgba(255,255,255,0.08) !important;
}
.app-sidebar .nav-link:hover:not(.active),
.app-sidebar .nav-link:hover:not(.active) p,
.app-sidebar .nav-link:hover:not(.active) .nav-icon {
    color: #ffffff !important;
}

/* Menu aktif: amber solid, teks navy supaya kontras tinggi */
.app-sidebar .nav-link.active {
    background-color: var(--brand-amber) !important;
    color: var(--brand-navy) !important;
    font-weight: 600;
}
.app-sidebar .nav-link.active .nav-icon,
.app-sidebar .nav-link.active p {
    color: var(--brand-navy) !important;
}

/* Header section di sidebar (mis. "Data Master", "Akademik") — pemisah
   visual supaya daftar menu yang panjang (admin: 21 item) tidak terasa
   seperti satu tumpukan rata, tapi terbagi jadi kelompok yang masuk akal. */
.app-sidebar .sidebar-section-label {
    padding: 16px 18px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.32);
    white-space: nowrap;
    overflow: hidden;
}

/* Badge role (Admin/Guru/Siswa/Ortu) di bawah brand */
.app-sidebar .badge.bg-amber {
    background-color: var(--brand-amber) !important;
    color: var(--brand-navy) !important;
    font-weight: 700;
}

/* Tombol utama pakai amber, teks navy supaya kontras */
.btn-primary {
    background-color: var(--brand-amber) !important;
    border-color: var(--brand-amber) !important;
    color: var(--brand-navy) !important;
    font-weight: 600;
}
.btn-primary:hover {
    background-color: var(--brand-amber-light) !important;
    border-color: var(--brand-amber-light) !important;
    color: var(--brand-navy) !important;
}

/* Judul halaman & heading card pakai navy */
.app-content-header h3,
.card-title {
    color: var(--brand-navy);
}

/* Kartu statistik dashboard (dipakai di admin/guru/siswa/ortu dashboard.php) */
.stat-card {
    border-left: 4px solid var(--brand-amber);
}
.stat-card .stat-value {
    color: var(--brand-navy);
    font-weight: 700;
    font-size: 20px;
}

/* Badge status kehadiran custom, dipakai di dashboard */
.badge-hadir { background-color: #e9f7ef; color: #1d8348; }
.badge-izin  { background-color: #fff8e6; color: #b7791f; }
.badge-sakit { background-color: #e8f0fe; color: #2255bb; }
.badge-alpha { background-color: #fdecea; color: #c0392b; }

/* ===================================================================
   LOGIN PAGE V2 — REDESAIN terinspirasi Ruang Guru: gradasi warna
   MENYAMBUNG satu background utuh (bukan 2 panel warna solid terpisah
   seperti sebelumnya), kartu form mengambang transparan di atasnya.
   Identitas warna KAWAN (navy+emas) DIPERTAHANKAN — gradasinya
   dibangun dari navy KAWAN sendiri, bukan asal tiru biru Ruang Guru.
   =================================================================== */
/* Reset html JUGA (bukan cuma body) — garis tipis di tepi atas yang
   dikeluhkan user kemungkinan dari margin/padding default browser di
   elemen <html> yang belum di-reset (sebelumnya cuma body yang di-reset
   margin:0, html-nya tidak disentuh sama sekali). */
/* box-sizing:border-box — SENGAJA DIBATASI cuma ke elemen-elemen di
   halaman login (".login-v2-body" dan semua turunannya), BUKAN universal
   ke SELURUH aplikasi (`*` semua elemen). theme.css ini file BERSAMA,
   dipakai juga di Dashboard Admin/Guru/Bendahara dan halaman lain yang
   SUDAH jadi & bekerja baik — box-sizing universal bisa DIAM-DIAM
   mengubah tampilan di SEMUA halaman itu (padding yang tadinya
   "menambah" ukuran jadi "memotong dari dalam"), risiko besar yang tidak
   pernah diminta. Dibatasi ke SATU scope saja: aman, cuma pengaruhi
   halaman login. Ini akar dari beberapa masalah "garis tipis"/overflow
   yang muncul berulang di sesi ini (padding + height:100vh tanpa
   border-box = total ukuran MELEBIHI 100vh yang sudah ditentukan). */
.login-v2-body, .login-v2-body *, .login-v2-body *::before, .login-v2-body *::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
}

.login-v2-body {
    margin: 0;
    /* height:100vh (BUKAN cuma min-height) + overflow:hidden PENUH
       (BUKAN cuma overflow-x seperti sebelumnya) — perbaikan 3 kali
       sebelumnya SEMUANYA fokus ke panel kiri doang, ternyata scroll-nya
       MASIH ADA (user konfirmasi lewat screenshot, ada celah kosong
       aneh antara header/ilustrasi/badge, tanda mekanisme flex:1 belum
       sepenuhnya efektif ATAU sumbernya bukan cuma dari panel kiri).
       Kali ini dikunci di LEVEL PALING LUAR sekalian — menjamin TIDAK
       ADA scroll dari sumber manapun (baik panel kiri maupun panel
       form kanan), bukan cuma menambal 1 sisi. Trade-off yang diterima:
       kalau ADA elemen yang ternyata masih kurang ruang, dia akan
       TERPOTONG (bukan scroll) — tapi elemen PENTING (teks, form,
       badge fitur) semua flex-shrink:0, yang PALING BERISIKO
       terpotong cuma ilustrasi (elemen dekoratif, flex:1). */
    height: 100vh;
    /* Gradasi biru -> ungu -> cyan, terinspirasi Ruang Guru — lebih hidup
       & jenuh warnanya dibanding versi navy sebelumnya, tapi arah
       diagonalnya tetap sama (kiri-atas ke kanan-bawah). */
    background: linear-gradient(135deg, #1E1B6E 0%, #3B2C8C 30%, #5B3FA8 55%, #2563A8 80%, #0E8FA3 100%);
    overflow: hidden;
}

.login-v2-wrapper {
    display: flex;
    height: 100vh;
    /* max-width:1400px + margin:0 auto DIHAPUS — sebelumnya wrapper
       terpusat dengan celah kosong sama besar di kiri DAN kanan kalau
       layar lebih lebar dari 1400px (itu penyebab konten kiri terasa
       tidak "full", dan form kanan terasa mengambang jauh dari tepi).
       Sekarang wrapper penuh 100% lebar layar, menempel langsung ke
       tepi kiri-kanan. */
    width: 100%;
    position: relative;
}

/* .login-v2-form-panel definisinya ada di bawah (digabung dengan
   penyesuaian height:100vh + overflow-y:auto untuk cegah scroll di
   level body) — TIDAK didefinisikan terpisah di sini supaya tidak ada
   2 sumber definisi yang membingungkan untuk selector yang sama. */

/* Bentuk gelombang/blob organik menyebar di SELURUH background (bukan
   cuma di 1 panel) — meniru rasa "hidup" dari background Ruang Guru,
   pakai lingkaran blur besar warna emas transparan, bukan bentuk SVG
   custom (supaya ringan & tidak perlu file gambar tambahan). */
.login-v2-wrapper::before,
.login-v2-wrapper::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}
.login-v2-wrapper::before {
    /* SEBELUMNYA top:-180px, left:-120px (meluber KELUAR viewport) —
       INI akar sungguhan garis tipis yang dikeluhkan user: body/wrapper
       overflow:hidden (perlu tetap ada demi cegah scroll) MEMOTONG TEGAS
       persis di batas viewport, sementara blob-nya sendiri (dengan blur
       lembut) "ingin" meluber lebih jauh dari itu — potongan tegas vs
       gradasi blur lembut itu yang menciptakan kesan garis. Sekarang
       posisi blob DIJAGA supaya TIDAK PERNAH melebihi batas viewport
       sama sekali (nilai positif, bukan negatif) — jadi TIDAK ADA lagi
       yang perlu "dipotong" oleh overflow:hidden, otomatis tidak ada
       garis potongan dari sisi manapun. */
    width: 480px; height: 480px; top: 10px; left: 10px;
    background: radial-gradient(circle, rgba(200,150,30,0.28) 0%, rgba(200,150,30,0) 70%);
}
.login-v2-wrapper::after {
    width: 560px; height: 560px; bottom: 10px; right: 10px;
    background: radial-gradient(circle, rgba(14,143,163,0.35) 0%, rgba(14,143,163,0) 70%);
}

/* Panel kiri: branding sekolah — SEKARANG transparan, duduk di atas
   gradasi body langsung (bukan warna solid sendiri terpisah). Porsi
   dinaikkan 45%->60% — supaya konten kiri (teks+ilustrasi) benar-benar
   "full", dan panel form di kanan jadi tidak sekelewat luas seperti
   sebelumnya (kotak form 380px terasa mengambang di ruang kosong). */
.login-v2-brand {
    position: relative;
    flex: 1 1 60%;
    background: transparent;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* height:100vh (BUKAN cuma ikut wrapper) + overflow:hidden KHUSUS
       panel ini — kunci teknis supaya flexbox di dalamnya (lihat
       .login-v2-brand-content) BISA memaksa total tinggi konten selalu
       PAS dengan tinggi layar, bukan lagi berharap angka px/vh yang
       saya tebak kebetulan cocok (2 percobaan sebelumnya sama-sama
       meleset). overflow:hidden DI SINI SAJA (bukan di body/wrapper),
       jadi TIDAK mempengaruhi panel form di sebelah kanan. */
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    padding: 20px 40px;
}
.login-v2-brand-content {
    position: relative;
    z-index: 2;
    max-width: 100%; /* SEBELUMNYA dibatasi angka tetap (900px, dst) — SEKARANG dihapus total, brand-content mengisi PERSIS 100% lebar panel yang tersedia. Kenapa: dengan max-width angka tetap + align-items:center di parent, sisa ruang (kalau panel LEBIH lebar dari angka itu) terbagi rata jadi celah di KIRI DAN KANAN — padahal user cuma mau celah KIRI (posisi sudah pas), celah KANAN yang dirapatkan sampai hampir ke form. max-width:100% menghilangkan celah dari EFEK CENTERING itu sepenuhnya, cuma padding panel (40px) yang tersisa di kedua sisi. */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* BUKAN center — ilustrasi di bawah (flex:1) yang akan isi sisa ruang secara otomatis, bukan seluruh grup di-tengahkan */
    flex-shrink: 0;
}

/* Baris logo+teks berdampingan (BARU, sesuai permintaan user) — logo
   diperbesar & ditaruh di KIRI, teks (Selamat Datang/KAWAN/subtitle) di
   KANANNYA, bukan lagi ditumpuk vertikal seperti sebelumnya. Efek
   sampingnya JUSTRU BAGUS buat kebutuhan "jangan bisa di-scroll" (poin
   user satunya lagi) — tinggi baris ini jadi tinggi YANG PALING TINGGI
   di antara logo/teks (bukan JUMLAH keduanya), jadi lebih hemat ruang
   vertikal dibanding versi tumpuk sebelumnya. */
.login-v2-header-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.login-v2-logo-card {
    width: 108px;
    height: 108px;
    border-radius: 22px;
    background: #fff;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
    flex-shrink: 0;
}
.login-v2-logo-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.login-v2-header-text {
    min-width: 0; /* penting biar teks di dalamnya boleh menyempit/wrap wajar, bukan malah dorong flex parent melebar */
}

.login-v2-greet {
    font-size: 18px; /* diperbesar dari 14px */
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2px;
}
.login-v2-kawan-title {
    font-family: 'Baloo 2', sans-serif; /* SEBELUMNYA inherit (font sistem default) — sekarang font khusus, rounded & hangat */
    font-size: 56px; /* diperbesar dari 36px */
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    line-height: 1.05;
}
.login-v2-spark {
    display: inline-block;
    color: var(--brand-amber);
    font-size: 28px; /* ikut diperbesar proporsional dengan judul */
    animation: sparkPulse 1.8s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes sparkPulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
    50% { transform: scale(1.25) rotate(12deg); opacity: 1; }
}
.login-v2-subtitle-pil {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: rgba(14, 165, 233, 0.35);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 0;
}
.login-v2-desc {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,0.75);
    margin-bottom: 14px;
    flex-shrink: 0;
}

/* 5 badge fitur berwarna — pengganti daftar centang polos sebelumnya,
   tiap ikon punya warna beda supaya lebih hidup, sesuai referensi. */
.login-v2-fitur-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    max-width: 620px; /* dibatasi TERPISAH dari brand-content (yang sekarang full lebar) — supaya badge tetap kompak, tidak ikut merenggang jauh jaraknya */
    width: 100%;
    align-self: center; /* BARU — brand-content full lebar + default align-items:stretch bikin fitur-grid rata KIRI (bukan tengah) walau max-width dibatasi. Ini yang bikin badge "kurang ke tengah". */
    margin: 0 auto 16px; /* margin kiri-kanan auto — cadangan/pelengkap align-self, sama-sama menuju center, tidak saling bertentangan */
    flex-shrink: 0;
}
.login-v2-fitur-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 7px;
}
.login-v2-fitur-item span {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    line-height: 1.3;
}
.login-v2-fitur-ikon {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    overflow: hidden; /* penting - biar pantulan cahaya (::before) di bawah tidak nongol keluar sudut membulat */
    border: 1px solid rgba(255,255,255,0.35); /* ciri khas glass - garis tepi tipis putih transparan */
    /* Berlapis: shadow gelap lembut di luar (kedalaman) + inset highlight
       putih tipis di ATAS dan inset gelap tipis di BAWAH (kesan
       permukaan kaca melengkung memantulkan cahaya). */
    box-shadow:
        0 8px 20px rgba(0,0,0,0.25),
        inset 0 1.5px 1px rgba(255,255,255,0.5),
        inset 0 -2px 4px rgba(0,0,0,0.15);
}
/* Pantulan cahaya kaca — gradient putih transparan di SETENGAH ATAS icon,
   memudar ke bawah, meniru kesan cahaya memantul di permukaan kaca
   melengkung (glassmorphism klasik). */
.login-v2-fitur-ikon::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 100%);
    border-radius: 15px 15px 50% 50% / 15px 15px 100% 100%;
}
.login-v2-fitur-ikon i {
    position: relative;
    z-index: 1; /* pastikan ikon tampil DI ATAS lapisan pantulan cahaya, bukan tertutup */
}
.login-v2-fitur-biru      { background: linear-gradient(135deg, #2563EB, #3B82F6); }
.login-v2-fitur-hijau     { background: linear-gradient(135deg, #16A34A, #22C55E); }
.login-v2-fitur-oranye    { background: linear-gradient(135deg, #EA580C, #F97316); }
.login-v2-fitur-ungu      { background: linear-gradient(135deg, #7C3AED, #A855F7); }
.login-v2-fitur-biru-muda { background: linear-gradient(135deg, #0EA5E9, #38BDF8); }

/* Tombol Masuk — SENGAJA class KHUSUS (bukan override .btn-primary
   global di atas), supaya perubahan warna ini CUMA berlaku di tombol
   Masuk halaman login, TIDAK ikut mengubah semua tombol primary lain di
   seluruh aplikasi KAWAN (dashboard admin, guru, dll — itu semua juga
   pakai .btn-primary). Cobalt Blue = #0047AB, sesuai referensi. */
.login-v2-btn-masuk {
    background-color: #0047AB !important;
    border-color: #0047AB !important;
    color: #fff !important;
}
.login-v2-btn-masuk:hover {
    background-color: #0055CC !important;
    border-color: #0055CC !important;
    color: #fff !important;
}

.login-v2-pil-aman {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    backdrop-filter: blur(6px);
    flex-shrink: 0;
    margin-top: 20px; /* jarak dari form-box di atasnya (posisi baru) */
}

/* Ilustrasi sungguhan (dikirim user, versi v2 latar TRANSPARAN asli) —
   trik mask-image radial gradient dari versi sebelumnya SUDAH TIDAK
   PERLU LAGI di sini — itu cuma akal-akalan CSS buat "menyamarkan" latar
   biru solid pada gambar versi lama. Gambar v2 ini latarnya sudah
   transparan betulan dari sumbernya, jadi otomatis menyatu sempurna ke
   gradasi apapun di baliknya tanpa perlu masking sama sekali. */
.login-v2-ilustrasi {
    display: none; /* default mati, cuma nyala di layar cukup lebar — lihat media query */
    width: 100%;
    max-width: 1150px; /* diperlebar lagi (dari 850px) - brand-content sekarang full 100% lebar panel, ilustrasi masih bisa melebar lebih jauh sebelum kena batas */
    margin: 0 auto;
    /* flex:1 + min-height:0 — INI KUNCINYA. Elemen lain di atas/bawah
       (header-row, desc, fitur-grid, pil-aman) semuanya flex-shrink:0
       (ukuran tetap, TIDAK ikut menyusut). Ilustrasi SATU-SATUNYA yang
       flex:1, jadi otomatis MENGAMBIL PERSIS SISA RUANG yang ada di
       antara elemen-elemen tetap itu — hasilnya total tinggi SELALU
       PAS 100% tinggi panel (dijamin SECARA MATEMATIS oleh flexbox,
       bukan lagi menebak angka px/vh seperti 2 percobaan sebelumnya
       yang sama-sama meleset). min-height:0 WAJIB ada — tanpa ini,
       flex item defaultnya menolak mengecil di bawah ukuran konten
       aslinya, yang akan menggagalkan seluruh mekanisme ini. */
    flex: 1 1 auto;
    min-height: 0;
    align-items: center;
    justify-content: center;
    /* overflow:hidden SENGAJA DIHAPUS dari sini (ketemu jadi akar
       masalah "garis di sekitar ilustrasi" yang dikeluhkan user) —
       gambar punya filter:drop-shadow() yang MELUBER KELUAR bentuk
       gambar aslinya untuk efek bayangan lembut. overflow:hidden di
       sini MEMOTONG TEGAS bayangan itu tepat di batas container, pola
       masalah SAMA PERSIS seperti blob dekorasi wrapper sebelumnya.
       TIDAK PERLU overflow:hidden di sini sebenarnya — object-fit:contain
       pada gambar SUDAH menjamin gambar sendiri tidak pernah melebihi
       batas container (max-width/max-height:100%), jadi tidak ada risiko
       "kebocoran" konten yang perlu dijaga overflow:hidden. */
}
.login-v2-ilustrasi img {
    /* height:100% (bukan lagi vh atau px) — gambar mengisi PERSIS
       setinggi kotak flex:1 di atas, selebar itu mengizinkan (max-width
       jaga rasio aspek tetap wajar, tidak gepeng). object-fit:contain
       pastikan gambar TIDAK PERNAH terpotong atau gepeng — akan
       menyesuaikan diri secara proporsional ke ruang yang tersedia,
       seberapa pun besar/kecil ruang itu di layar Anda. */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 16px 36px rgba(0,0,0,0.4));
}
/* Animasi "float" (naik-turun) SENGAJA DIHILANGKAN dari sini — container
   ilustrasi sekarang overflow:hidden & object-fit:contain (pas persis
   ke ruang yang tersedia), geser naik-turun akan bikin gambar terlihat
   terpotong dikit di tepi atas/bawah saat animasi jalan. Kestabilan
   tampilan lebih penting di sini dibanding animasi dekoratif kecil. */
@media (min-width: 992px) {
    .login-v2-ilustrasi { display: flex; }
}

/* Lapis pengaman KEDUA — kalau viewport SANGAT PENDEK (laptop kecil,
   browser di-zoom, dll), ilustrasi yang otomatis mengecil (via vh di
   atas) saja BELUM TENTU cukup, karena elemen LAIN (logo, judul, badge
   fitur) masih pakai ukuran px tetap yang tidak ikut mengecil sendiri.
   Media query ini kecilkan padding & jarak-jarak itu juga di viewport
   pendek, sebagai pertahanan kedua supaya total tinggi konten tetap
   berpeluang muat tanpa scroll. */
/* Layar pendek — mekanisme flex:1 di atas SUDAH OTOMATIS menghitung
   ukuran ilustrasi yang pas (makanya TIDAK ADA lagi aturan max-width/
   max-height ilustrasi di sini seperti versi sebelumnya — itu akan
   JUSTRU KONFLIK dengan flex:1, membatasi ilustrasi secara arbitrer
   padahal harusnya otomatis menyesuaikan). Yang masih berguna di sini:
   kecilkan elemen-elemen TETAP (logo, judul, padding, icon fitur) di
   layar pendek — supaya mereka makan LEBIH SEDIKIT ruang, otomatis
   MENYISAKAN LEBIH BANYAK ruang buat ilustrasi (yang flex:1 akan
   memakai sisa itu semaksimal mungkin). */
@media (max-height: 750px) {
    .login-v2-brand { padding: 18px 40px; }
    .login-v2-header-row { margin-bottom: 8px; }
    .login-v2-logo-card { width: 84px; height: 84px; }
    .login-v2-kawan-title { font-size: 28px; }
    .login-v2-desc { margin-bottom: 8px; font-size: 12px; }
    .login-v2-fitur-grid { margin-bottom: 10px; }
    .login-v2-fitur-ikon { width: 42px; height: 42px; font-size: 17px; }
}

/* Bentuk lingkaran dekorasi lama (login-v2-shape) SUDAH DIGANTIKAN oleh
   ::before/::after di .login-v2-wrapper di atas (lebih menyebar, bukan
   cuma di 1 panel) — class ini DIPERTAHANKAN kosong-ish (bukan dihapus
   total) supaya HTML lama (yang masih punya <div class="login-v2-shape">)
   tidak menampilkan elemen kosong aneh, tapi juga tidak dobel efek blur
   dengan yang baru. */
.login-v2-shape { display: none; }

/* Panel kanan: form — SEKARANG transparan juga (bukan abu-abu solid),
   supaya gradasi body tetap terlihat di baliknya, kartu form-nya yang
   mengambang beneran di atas gradasi (persis rasa "floating card" di
   referensi Ruang Guru). Porsi diturunkan 55%->40% (konsisten dengan
   brand yang naik ke 60%) — kotak form 380px tidak lagi "mengambang" di
   ruang sekelewat luas seperti sebelumnya. */
.login-v2-form-panel {
    position: relative;
    z-index: 1;
    flex: 1 1 40%;
    background: transparent;
    display: flex;
    flex-direction: column; /* BARU — supaya form-box dan pil-aman (yang dipindah ke sini) tersusun vertikal (form-box di atas, pil-aman di bawah), bukan berdampingan horizontal (default row) */
    align-items: center;
    justify-content: center;
    padding: 32px;
    /* max-height:100vh + overflow-y:auto — jaring pengaman LOKAL (cuma
       panel form ini, BUKAN seluruh halaman) buat kasus form-box
       ternyata kepanjangan di suatu layar. Form login-nya SENDIRI TIDAK
       disentuh sama sekali, cuma pembungkusnya. */
    max-height: 100vh;
    overflow-y: auto;
}
.login-v2-form-box {
    width: 100%;
    max-width: 460px; /* diperbesar dari 380px */
    background: #fff;
    border-radius: 22px;
    padding: 48px 44px; /* padding ikut diperbesar proporsional */
    box-shadow: 0 25px 70px rgba(0,0,0,0.35);
    margin-top: 60px; /* geser ke bawah - sebelumnya terasa terlalu atas (justify-content:center menghitung form-box+pil-aman sebagai 1 grup, titik tengahnya lebih tinggi dari yang diharapkan) */
}

.login-v2-mobile-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-weight: 700;
    color: var(--brand-navy);
}
.login-v2-mobile-brand i {
    font-size: 24px;
    color: var(--brand-amber);
}

.login-v2-title {
    font-weight: 700;
    color: var(--brand-navy);
    margin-bottom: 4px;
}
.login-v2-subtitle {
    color: #6b7280;
    font-size: 13.5px;
    margin-bottom: 10px;
}
.login-v2-subtitle-kawan {
    color: #6b7280;
    font-size: 15px;
    margin-bottom: 4px;
}
.login-v2-footer {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 12.5px;
    color: #6b7280;
}

.password-toggle-btn {
    cursor: pointer;
    background: #fff;
}
.password-toggle-btn:hover {
    background: #f4f6f9;
}

@media (max-width: 991.98px) {
    /* Mobile TETAP pakai gradasi yang sama (bukan navy solid seperti
       sebelumnya) — panel branding kiri disembunyikan (d-none d-lg-flex
       di HTML), tapi kartu form tetap mengambang di atas gradasi yang
       sama supaya konsisten sama tampilan desktop. */
    .login-v2-wrapper { min-height: 100vh; }
}

.login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 30, 58, 0.94); /* var(--brand-navy) dengan opacity, biar konsisten sama panel brand */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.login-overlay.show {
    opacity: 1;
    pointer-events: all;
}
.login-overlay-content {
    text-align: center;
    color: #fff;
}
.login-overlay-content .spinner-border {
    width: 3rem;
    height: 3rem;
    margin-bottom: 18px;
    border-width: 3px;
}
.brand-logo-glow {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand-logo-glow::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 150, 30, 0.4) 0%, rgba(200, 150, 30, 0) 72%);
    animation: brandGlowPulse 2.1s ease-in-out infinite;
}
.brand-transition-logo {
    width: 90px;
    height: 90px;
    object-fit: contain;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    animation: brandLogoPulse 2.1s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(200, 150, 30, 0.45);
}
@keyframes brandGlowPulse {
    0%, 100% { transform: scale(0.88); opacity: 0.55; }
    50% { transform: scale(1.18); opacity: 1; }
}
@keyframes brandLogoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.brand-transition-progress {
    width: 200px;
    height: 3px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    overflow: hidden;
}
.brand-transition-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #C8961E, #dba933);
    border-radius: 999px;
}

.login-overlay-content p {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
    min-height: 1.4em; /* cegah layout "loncat" dikit pas teks tahap berganti panjangnya beda */
}
.login-overlay-content .error-icon {
    font-size: 4rem;
    color: #C8961E;
    margin-bottom: 6px;
}
.login-overlay-content .error-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.login-overlay-content .error-message {
    font-size: 0.95rem;
    opacity: 0.82;
    margin-bottom: 22px;
}
.login-overlay-content .error-btn {
    display: inline-block;
    background: #C8961E;
    color: #1a1300;
    font-weight: 700;
    padding: 11px 28px;
    border-radius: 999px;
    font-size: 0.9rem;
}
.login-overlay-content .error-btn:hover { background: #dba933; }


/* ===================================================================
   KALENDER AKADEMIK — grid bulanan
   =================================================================== */
.cal-grid {
    display: grid;
    /* minmax(0,1fr) — bukan cuma 1fr — ini kuncinya. Tanpa minmax(0,...), lebar minimum
       "alami" kolom grid ikut lebar konten TERPANJANG di dalamnya (karena .cal-event pakai
       white-space:nowrap), jadi satu judul agenda yang panjang bisa memaksa SELURUH kolom
       tanggal di bawahnya ikut melebar dan bikin grid kalender jebol/scroll horizontal,
       baik di laptop maupun HP. minmax(0,1fr) mengunci lebar kolom tetap merata 1/7 lebar
       kontainer, apa pun panjang teks di dalamnya — sisanya baru dipotong rapi oleh
       text-overflow:ellipsis di .cal-event di bawah. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.cal-head {
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    color: var(--brand-navy);
    padding: 6px 0;
    background: #f4f6f9;
    border-radius: 4px;
}
.cal-cell {
    min-height: 80px;
    min-width: 0; /* jaring pengaman tambahan: cell tidak boleh melebar mengikuti konten */
    border: 1px solid #e2e5eb;
    border-radius: 6px;
    padding: 4px;
    background: #fff;
    overflow: hidden;
}
.cal-cell.cal-empty {
    background: transparent;
    border: none;
}
.cal-date {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}
.cal-today-tag {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--brand-amber);
    color: #fff;
    border-radius: 3px;
    padding: 1px 4px;
    white-space: nowrap;
}
.cal-cell.cal-today {
    border: 2px solid var(--brand-amber);
}
.cal-cell.cal-today .cal-date {
    color: var(--brand-navy);
}
.cal-event {
    font-size: 11px;
    padding: 3px 5px;
    border-radius: 3px;
    margin-bottom: 2px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    cursor: pointer;
}
.cal-event:hover,
.cal-event:focus {
    filter: brightness(1.12);
    outline: 2px solid rgba(0,0,0,0.25);
    outline-offset: 1px;
}
.cal-event-libur { background: #c0392b; }
.cal-event-ujian { background: #b7791f; }
.cal-event-rapor { background: #2255bb; }
.cal-event-kegiatan_sekolah { background: #6b4fa0; }
.cal-event-agenda { background: #1d8348; }

.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; align-items: center; }
.cal-legend-dot { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }

@media (max-width: 768px) {
    .cal-cell { min-height: 64px; font-size: 11px; padding: 3px; }
    .cal-event { font-size: 10px; padding: 2px 4px; }
    .cal-legend { font-size: 12px; gap: 10px; }
}
.login-kawan-logo{
    width:180px;
    max-width:80%;
    height:auto;
    opacity:.95;
    transition:.25s;
}

.login-kawan-logo:hover{
    transform:scale(1.03);
    opacity:1;
}

.login-kawan-version{
    margin-top:8px;
    font-size:.85rem;
    color:#6c757d;
    font-weight:500;
}

.login-kawan-version span{
    color:#0d6efd;
    font-weight:700;
}
/* Notifikasi in-app */
.notif-unread {
    background-color: #fff8e6;
    font-weight: 600;
}
.notif-item:hover {
    background-color: #f4f6f9;
}

/* Dropdown notifikasi & profil: batas lebar aman di layar sempit, jaga-jaga
   supaya tidak overflow ke kiri walau posisi sudah pakai strategy 'fixed'
   (lihat footer.php). */
#daftarNotifikasi,
.dropdown-menu[style*="width:340px"],
.dropdown-menu[style*="width:320px"] {
    max-width: calc(100vw - 24px);
}

/* ===================================================================
   LAYOUT: sidebar 3-bagian (brand tetap atas, menu scroll, logo tetap
   bawah) + hanya area main yang bisa discroll, header & footer tetap.

   Struktur: .app-wrapper (flex row, full viewport height)
     -> aside.app-sidebar (flex column: brand / menu-scroll / logo)
     -> div.app-main-column (flex column: navbar / main-scroll / footer)
   Pakai flex:1 + overflow, BUKAN height:calc() dengan angka px tebakan,
   supaya tidak gampang meleset kalau tinggi navbar AdminLTE berubah.
   =================================================================== */
html, body.layout-fixed {
    height: 100%;
    overflow: hidden;
}

.app-wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar jadi flex column 3-bagian */
.app-sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    flex-shrink: 0;
}
.app-sidebar .sidebar-brand {
    flex-shrink: 0;
}
.app-sidebar .sidebar-wrapper {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
.app-sidebar .sidebar-footer-logo {
    flex-shrink: 0;
    padding: 14px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.12);
}
.app-sidebar .sidebar-footer-logo img {
    max-width: 56px;
    max-height: 56px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
}

/* Kolom kanan: navbar (tetap) + main (scroll) + footer situs (tetap) */
.app-main-column {
    display: flex;
    flex-direction: column;
    height: 100vh;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.app-main-column .app-header {
    flex-shrink: 0;
}
.app-main-column .app-main {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Footer situs baru, selalu terlihat di bawah, tidak ikut scroll */
.app-site-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    background: #fff;
    border-top: 1px solid var(--border, #e2e5eb);
    color: #6b7280;
    font-size: 12px;
}

@media (max-width: 991.98px) {
    /* Di layar kecil, sidebar AdminLTE jadi overlay (bukan mendorong konten),
       jadi app-main tetap full width & perhitungan tinggi tetap sama. */
    .app-sidebar { height: 100vh; }
}

/* ===================================================================
   DASHBOARD GURU — hero sapaan, kartu statistik, dan timeline jadwal
   harian. Scoped di bawah .guru-dash-* supaya tidak menyentuh halaman
   admin/guru lain yang masih pakai card AdminLTE polos.
   =================================================================== */
.guru-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 100%);
    border-radius: 16px;
    padding: 26px 28px;
    margin-bottom: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.guru-hero::before {
    /* Bentuk lingkaran dekoratif amber transparan, senada dengan panel login */
    content: '';
    position: absolute;
    top: -70px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(200, 150, 30, 0.14);
}
.guru-hero::after {
    content: '';
    position: absolute;
    bottom: -90px;
    right: 140px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}
.guru-hero-text { position: relative; z-index: 1; }
.guru-hero-text h4 { margin: 0 0 4px; font-weight: 700; }
.guru-hero-text p { margin: 0; color: rgba(255,255,255,0.75); font-size: 13.5px; }
.guru-hero-meta {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.guru-hero-meta .badge {
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12.5px;
}
.guru-hero-meta .badge i { color: var(--brand-amber-light); margin-right: 5px; }
.guru-hero-meta .badge-clickable {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff !important;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}
.guru-hero-meta .badge-clickable:hover,
.guru-hero-meta .badge-clickable:focus,
.guru-hero-meta .badge-clickable:visited {
    background: rgba(255,255,255,0.24);
    color: #fff !important;
    text-decoration: none;
}

.guru-hero-cari-form {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    max-width: 320px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    padding: 8px 14px;
    transition: background .15s ease, border-color .15s ease;
}
.guru-hero-cari-form:focus-within {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.5);
}
.guru-hero-cari-form i {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    flex-shrink: 0;
}
.guru-hero-cari-form input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13.5px;
    width: 100%;
}
.guru-hero-cari-form input::placeholder {
    color: rgba(255,255,255,0.6);
}

/* Kartu statistik ringkas */
.guru-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 991.98px) {
    .guru-stat-row { grid-template-columns: repeat(2, 1fr); }
}

.guru-quick-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 14px;
    text-decoration: none;
    color: var(--brand-navy);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    height: 100%;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.guru-quick-access i {
    font-size: 1.6rem;
}
.guru-quick-access:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(11, 30, 58, 0.1);
    color: var(--brand-navy);
    text-decoration: none;
}
.guru-quick-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #dc3545;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    min-width: 18px;
}
/* Warnanya ikut tema slate blue guru (lihat guru-theme.css) kalau lagi
   login sebagai guru — konsisten dengan aksen tombol/menu lain di role ini */
body.guru-layout .guru-quick-access i {
    color: var(--guru-primary, var(--brand-navy));
}
body.guru-layout .guru-quick-access:hover {
    border-color: var(--guru-primary, var(--brand-navy));
}
/* 4 varian warna ikon BERBEDA per kartu — sebelumnya SEMUA ikon di
   kartu aksi cepat warna seragam (navy/slate blue), terasa monoton
   berdampingan dengan kartu statistik yang sekarang berwarna-warni.
   PENTING: prefix "body.guru-layout" WAJIB disertakan di sini juga —
   tanpanya, specificity aturan ini (0,2,1) KALAH dari aturan umum di
   atas (0,2,2) walau ditulis belakangan, warna baru TIDAK AKAN
   menang/terlihat sama sekali. */
body.guru-layout .guru-quick-access.tone-biru i { color: #2563EB; }
body.guru-layout .guru-quick-access.tone-hijau i { color: #16A34A; }
body.guru-layout .guru-quick-access.tone-oranye i { color: #EA580C; }
body.guru-layout .guru-quick-access.tone-ungu i { color: #7C3AED; }

/* --- Kartu besar Absen Masuk/Pulang — sengaja dibedakan bobot visualnya
   dari Quick Access biasa di atas, karena ini yang WAJIB dicek tiap hari,
   bukan sekadar jalan pintas menu biasa. --- */
.guru-quick-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 100%);
    border-radius: 16px;
    text-decoration: none;
    color: #fff;
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}
body.guru-layout .guru-quick-hero {
    background: linear-gradient(135deg, var(--guru-primary, var(--brand-navy)) 0%, var(--guru-primary-dark, var(--brand-navy-light)) 100%);
}
.guru-quick-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(11, 30, 58, 0.22);
    color: #fff;
    text-decoration: none;
}
.guru-quick-hero-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    font-size: 1.4rem;
    color: #fff;
}
.guru-quick-hero-icon i {
    color: #fff;
}
.guru-quick-hero-text { min-width: 0; }
.guru-quick-hero-text .label {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 2px;
    color: #fff;
}
.guru-quick-hero-text .status {
    font-size: 0.78rem;
    opacity: .85;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
}
.guru-quick-hero-text .status-warn { color: #ffe08a; opacity: 1; }
.guru-quick-hero-text .status-ok { color: #b7f5c8; opacity: 1; }

/* Progress bar sederhana — BARU ditambahkan di kartu Absen Masuk/Pulang,
   sebelumnya cuma teks status tanpa indikator visual persentase. Track
   pakai putih transparan (kartu ini latar gelap navy), isi berwarna
   sesuai status (hijau = lengkap, amber = masih ada yang kurang). */
.guru-quick-hero-progress {
    margin-top: 6px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    overflow: hidden;
}
.guru-quick-hero-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: #b7f5c8;
    transition: width .4s ease;
}
.guru-quick-hero-progress-bar.belum-lengkap { background: #ffe08a; }

.guru-stat-card {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    padding: 16px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 10px rgba(11,30,58,0.04);
}
.guru-stat-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(200,150,30,0.12);
    color: var(--brand-amber);
}
.guru-stat-card.tone-alert .guru-stat-icon {
    background: rgba(192,57,43,0.1);
    color: #c0392b;
}
/* 3 varian warna BARU — sebelumnya SEMUA kartu statistik pakai warna
   amber seragam, terasa monoton. Sekarang tiap kategori dapat warna
   sendiri (pola umum di dashboard modern — termasuk referensi Tabler
   yang jadi acuan user), TETAP dalam palet yang konsisten dengan warna
   KAWAN (bukan asal comot warna generic). */
.guru-stat-card.tone-biru .guru-stat-icon {
    background: rgba(37,99,235,0.12);
    color: #2563EB;
}
.guru-stat-card.tone-hijau .guru-stat-icon {
    background: rgba(22,163,74,0.12);
    color: #16A34A;
}
.guru-stat-card.tone-ungu .guru-stat-icon {
    background: rgba(124,58,237,0.12);
    color: #7C3AED;
}
.guru-stat-value { font-size: 22px; font-weight: 700; color: var(--brand-navy); line-height: 1.1; }
.guru-stat-label { font-size: 12.5px; color: #6b7280; }

/* Kartu konten generik, radius senada dengan hero & stat card */
.guru-card,
.admin-card {
    border-radius: 14px;
    border: 1px solid #eef0f4;
    box-shadow: 0 2px 10px rgba(11,30,58,0.04);
    margin-bottom: 20px;
}
.guru-card .card-header,
.admin-card .card-header {
    background: transparent;
    border-bottom: 1px solid #eef0f4;
    font-weight: 600;
}
.guru-card .card-header i,
.admin-card .card-header i { color: var(--brand-amber); margin-right: 6px; }

/* Timeline jadwal hari ini */
.guru-timeline { list-style: none; margin: 0; padding: 0; }
.guru-timeline-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed #eef0f4;
}
.guru-timeline-item:last-child { border-bottom: none; }
.guru-timeline-time {
    flex-shrink: 0;
    width: 64px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-navy);
    padding-top: 2px;
}
.guru-timeline-dot-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.guru-timeline-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--brand-amber);
    margin-top: 4px;
}
.guru-timeline-item:first-child .guru-timeline-dot {
    background: var(--brand-navy);
    box-shadow: 0 0 0 4px rgba(11,30,58,0.1);
}
.guru-timeline-line { flex: 1; width: 2px; background: #eef0f4; margin-top: 2px; }
.guru-timeline-body p { margin: 0; }
.guru-timeline-body .mapel { font-weight: 600; color: var(--brand-navy); }
.guru-timeline-body .kelas { font-size: 12.5px; color: #6b7280; }

/* Daftar tugas perlu dinilai (action list) */
.guru-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f4f5f8;
}
.guru-action-item:last-child { border-bottom: none; }
.guru-action-item .siswa-name { font-weight: 600; color: var(--brand-navy); font-size: 13.5px; }
.guru-action-item .meta { font-size: 12px; color: #6b7280; }

.guru-empty-state {
    text-align: center;
    padding: 28px 12px;
    color: #9aa0ab;
}
.guru-empty-state i { font-size: 26px; display: block; margin-bottom: 8px; color: #c9cdd6; }

/* ===================================================================
   DASHBOARD ADMIN — hero eksekutif, kartu KPI, akses cepat menu, dan
   ringkasan absensi harian. Scoped di bawah .admin-* supaya tidak
   menyentuh halaman admin lain yang masih pakai card AdminLTE polos.
   =================================================================== */
.admin-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 100%);
    border-radius: 16px;
    padding: 26px 28px;
    margin-bottom: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.admin-hero::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(200, 150, 30, 0.14);
}
.admin-hero::after {
    content: '';
    position: absolute;
    bottom: -90px;
    right: 140px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}
.admin-hero-text { position: relative; z-index: 1; }
.admin-hero-text h4 { margin: 0 0 4px; font-weight: 700; }
.admin-hero-text p { margin: 0; color: rgba(255,255,255,0.75); font-size: 13.5px; }
.admin-hero-meta {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.admin-hero-meta .badge {
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12.5px;
}
.admin-hero-meta .badge i { color: var(--brand-amber-light); margin-right: 5px; }

/* Kartu KPI utama (pengganti small-box AdminLTE) */
.admin-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 991.98px) {
    .admin-stat-row { grid-template-columns: repeat(2, 1fr); }
}
.admin-stat-card {
    background: #fff;
    border: 1px solid #eef0f4;
    border-left: 4px solid var(--brand-amber);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 10px rgba(11,30,58,0.04);
}
.admin-stat-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: rgba(200,150,30,0.12);
    color: var(--brand-amber);
}
.admin-stat-card.tone-info { border-left-color: #2255bb; }
.admin-stat-card.tone-info .admin-stat-icon { background: rgba(34,85,187,0.1); color: #2255bb; }
.admin-stat-card.tone-success { border-left-color: #1d8348; }
.admin-stat-card.tone-success .admin-stat-icon { background: rgba(29,131,72,0.1); color: #1d8348; }
.admin-stat-card.tone-navy { border-left-color: var(--brand-navy); }
.admin-stat-card.tone-navy .admin-stat-icon { background: rgba(11,30,58,0.08); color: var(--brand-navy); }
.admin-stat-value { font-size: 22px; font-weight: 700; color: var(--brand-navy); line-height: 1.1; }
.admin-stat-label { font-size: 12.5px; color: #6b7280; }

/* Akses cepat (menu yang sering dipakai admin)
   Catatan: kartu ini hidup di kolom col-lg-4 (sempit), bukan full width.
   Kalau kolomnya dipatok angka tetap (mis. repeat(6,1fr)) berdasar breakpoint
   viewport, di layar besar kolom tetap "mengira" ruangnya lebar padahal
   kolom lg-4 itu sempit -> item jadi kepepet dan kartu overflow ke samping.
   auto-fit + minmax menghitung dari lebar container sebenarnya, jadi jumlah
   kolom otomatis menyesuaikan tanpa perlu scroll ke samping. */
.admin-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 12px;
}
.admin-quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    border-radius: 12px;
    background: #f8f9fb;
    border: 1px solid #eef0f4;
    text-decoration: none;
    color: var(--brand-navy);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    transition: background-color .15s, border-color .15s, transform .15s;
}
.admin-quick-link:hover {
    background: rgba(200,150,30,0.1);
    border-color: rgba(200,150,30,0.35);
    color: var(--brand-navy);
    transform: translateY(-2px);
}
.admin-quick-link i { font-size: 22px; color: var(--brand-amber); }

/* Ringkasan absensi hari ini: strip ubin, ganti badge sederhana lama */
.admin-attend-strip {
    display: flex;
    flex-wrap: wrap;
}
.admin-attend-tile {
    flex: 1 1 130px;
    padding: 4px 20px;
    border-left: 1px solid #eef0f4;
    text-align: center;
}
.admin-attend-tile:first-child { border-left: none; padding-left: 4px; }
.admin-attend-tile .admin-attend-val { font-size: 21px; font-weight: 700; line-height: 1.2; }
.admin-attend-tile .admin-attend-lbl { font-size: 12px; color: #6b7280; margin-top: 2px; }
@media (max-width: 575.98px) {
    .admin-attend-tile { border-left: none; border-top: 1px solid #eef0f4; text-align: left; padding: 10px 4px; }
    .admin-attend-tile:first-child { border-top: none; }
}

/* Tombol "Kembali" bergaya chip/pill dengan panah — dipakai sebagai pengganti link teks
   polos ("< Kembali ke ...") yang terkesan jadul. Dipakai lewat class .btn-kembali di
   halaman guru/admin (lihat includes/back_link.php). */
.btn-kembali {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #eef1f6;
    color: var(--brand-navy, #1b2a4a);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    border: 1px solid #e1e5ec;
    transition: background-color .15s ease, transform .15s ease, border-color .15s ease;
}
.btn-kembali:hover {
    background: #e2e7f0;
    border-color: #c9d1e0;
    color: var(--brand-navy, #1b2a4a);
    transform: translateX(-2px);
}
.btn-kembali i { font-size: 14px; transition: transform .15s ease; }
.btn-kembali:hover i { transform: translateX(-2px); }

/* ================================================================
   ATURAN CETAK GLOBAL — berlaku di SEMUA halaman (rapor, kwitansi,
   kartu pelajar, dst), bukan cuma 1 fitur tertentu.

   Elemen mengambang (ikon Asisten AI, tombol Install App/Notifikasi,
   badge offline, indikator pull-to-refresh) dibuat lewat header.php/
   footer.php yang dimuat SEMUA halaman, jadi kalau tidak disembunyikan
   di sini (bukan cuma di CSS print milik 1 fitur), semua fitur cetak
   lain di aplikasi berisiko kena masalah yang sama.

   Elemen position:fixed itu sendiri MEMANG tidak reliable di mesin
   cetak (bisa muncul di posisi "asli"-nya walau di layar disembunyikan
   lewat transform/translate) — jadi solusi paling aman adalah
   display:none eksplisit saat print, bukan mengandalkan trik CSS yang
   dipakai untuk sembunyi-tampil di layar.
   ================================================================ */
@media print {
    /* PENDEKATAN MENYELURUH — bukan lagi menyebut ID satu per satu.
       Sudah 3x dicoba dengan mendaftar ID spesifik (#aiChatToggle,
       #entranceOverlay, dst) dan tetap ada saja elemen yang kelewat,
       karena elemen mengambang di aplikasi ini banyak & sebagian dibuat
       LEWAT JAVASCRIPT saat runtime (jadi tidak kelihatan waktu saya
       grep markup PHP).
       Aturan di bawah membalik logikanya: SEMUA anak langsung <body>
       DISEMBUNYIKAN, KECUALI .app-wrapper (pembungkus konten utama, dipakai
       SEMUA role — sudah diverifikasi di includes/header.php baris 405).
       Overlay, toast, indikator pull-to-refresh, tombol mengambang, modal,
       dan apapun yang ditempel ke <body> otomatis tidak ikut tercetak,
       termasuk yang belum ada sekarang tapi ditambahkan nanti. */
    /* :not(.page) DITAMBAHKAN — struktur Tabler (khusus role guru) pakai
       <div class="page"> sebagai pembungkus utama, BUKAN .app-wrapper
       seperti AdminLTE. Tanpa pengecualian ini, SELURUH konten halaman
       guru (termasuk yang mau dicetak, misal kartu pelajar) ikut
       tersembunyi saat print — bug yang baru ditemukan lewat laporan
       user. Aman ditambahkan secara global di sini (bukan cuma scoped
       guru) karena role lain TIDAK PERNAH punya elemen dengan class
       "page" langsung di bawah <body>, jadi tidak ada dampak apapun ke
       role lain. */
    body > *:not(.app-wrapper):not(.page) {
        display: none !important;
    }
}