/* =============================================================
   1. GLOBAL & UTILITY CLASSES
   ============================================================= */
body {
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

.sage-gradient {
    background: linear-gradient(135deg, #9CA986 0%, #7A9B6F 100%);
}

.card-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.toggle-active {
    background: #7A9B6F;
    color: white;
}

.sidebar-transition {
    transition: all 0.3s ease;
}

/* =============================================================
   2. FLIP CARD LOGIN ANIMATION
   ============================================================= */

/* Wadah Utama 3D */
.flip-container {
    perspective: 1000px;
    width: 100%;
    height: 540px; /* Tinggi disesuaikan agar lega */
    position: relative;
    z-index: 10;
}

/* Objek yang berputar (Wadah Kartu) */
.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1); /* Snappy animation */
    transform-style: preserve-3d;
}

/* Logika Trigger Putaran (Dikontrol via JS class 'is-flipped') */
.flip-inner.is-flipped {
    transform: rotateY(180deg);
}

/* Pengaturan Sisi Depan & Belakang */
.flip-front,
.flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    top: 0;
    left: 0;
    border-radius: 1.5rem;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Sisi Depan (Guru) */
.flip-front {
    z-index: 2;
    transform: rotateY(0deg);
}

/* Sisi Belakang (Wali) */
.flip-back {
    transform: rotateY(180deg);
}

/* Header Statis: Agar Judul Sekolah tidak ikut berputar */
.static-header {
    transform: translateZ(0); /* Hack browser untuk render layer terpisah */
    backface-visibility: hidden;
    margin-bottom: 2rem;
}

/* =============================================================
   3. SPLASH SCREEN
   ============================================================= */
.splash-hidden {
    opacity: 0;
    pointer-events: none; /* Agar klik tembus ke aplikasi di belakangnya */
}

/* =============================================================
   4. PRINT STYLES (CETAK LAPORAN)
   ============================================================= */
@media print {
    @page {
        margin: 0;
        size: auto;
    }

    body {
        background: white;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #app {
        box-shadow: none;
        margin: 0;
        width: 100%;
        max-width: none;
    }

    /* Helper utility print */
    .print\:hidden {
        display: none !important;
    }

    /* Sembunyikan scrollbar saat dicetak */
    ::-webkit-scrollbar {
        display: none;
    }
}
/* =============================================================
   5. KEAMANAN UI (SEMBUNYIKAN TOMBOL HAPUS)
   ============================================================= */
/* Karena database sudah dikunci (tidak bisa hapus),
   kita hilangkan tombol sampah merah agar user tidak bingung.
*/
button[data-delete-santri],
button[data-delete-absensi],
button[data-delete-tahfizh],
button[data-delete-tahsin],
button[data-delete-juziyyah] {
    display: none !important;
}