@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/*
 * ===================================================================
 * Custom Stylesheet untuk Aplikasi Absensi Sekolah Manggala
 * ... (sisa file css Anda) ...
 */


/*
 * ===================================================================
 * Custom Stylesheet untuk Aplikasi Absensi Sekolah Manggala
 * File: assets/css/style.css
 * Pendekatan: Mobile First (diutamakan untuk layar smartphone)
 * ===================================================================
 */

/* === 1. Gaya Umum & Body === */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f4f6f9; /* Latar belakang abu-abu muda yang bersih */
    color: #495057;
    margin: 0;
    padding: 0;
}

/* === 2. Layout Utama Aplikasi Pengguna (Guru/Staff) === */

/* Kontainer utama untuk konten halaman */
.main-content {
    padding: 20px 15px;
    /* * PENTING! Beri padding-bottom agar konten paling bawah tidak
     * terhalang oleh menu navigasi yang menempel di bawah.
     * Nilainya harus lebih besar dari tinggi .bottom-nav
    */
    padding-bottom: 100px; 
}

/* --- Tombol Aksi Umum --- */
.btn-utama {
    display: block;
    width: 90%;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
    text-decoration: none;
    transition: background-color 0.3s;
    margin-top: 10px;
}
.btn-utama:hover {
    background-color: #0056b3;
    color: white;
}


/* === 3. Menu Navigasi Bawah (Bottom Navigation) === */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px; /* Tinggi bar navigasi */
    background-color: #ffffff;
    display: flex; /* Menggunakan Flexbox untuk menata item */
    justify-content: space-around; /* Menyebar item secara merata */
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Bayangan di atas bar */
    z-index: 1000; /* Memastikan bar selalu di lapisan paling atas */
}

.nav-item {
    display: flex;
    flex-direction: column; /* Ikon di atas, teks di bawah */
    align-items: center;
    justify-content: center;
    flex-grow: 1; /* Semua item memiliki lebar yang sama */
    text-decoration: none;
    color: #868e96; /* Warna ikon dan teks non-aktif */
    font-size: 11px;
    transition: color 0.3s;
}

.nav-item i {
    font-size: 20px;
    margin-bottom: 5px;
}

.nav-item:hover, .nav-item.active {
    color: #007bff; /* Warna saat item aktif atau di-hover */
}


/* --- Tombol Absen Utama (yang menonjol di tengah) --- */

.nav-item-main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    background: linear-gradient(45deg, #0d6efd, #0056b3);
    color: #ffffff;
    border-radius: 50%; /* Membuatnya menjadi lingkaran */
    
    /* Efek "pop-out" yang mengangkat tombol ke atas */
    transform: translateY(-25px); 
    
    border: 4px solid #f4f6f9; /* Border dengan warna background body */
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
    transition: transform 0.3s ease;
}

.nav-item-main:hover {
    transform: translateY(-28px) scale(1.05); /* Sedikit membesar saat di-hover */
}

.nav-item-main i {
    font-size: 28px;
    margin: 0;
}


/* === 4. Gaya untuk Halaman Spesifik === */

/* --- Halaman Loading --- */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
    text-align: center;
}
.loading-container .logo {
    width: 120px;
    margin-bottom: 1.5rem;
}

/* --- Halaman Absensi (Kamera) --- */
.absen-container {
    text-align: center;
}
.absen-container h1 {
    font-size: 24px;
    margin-bottom: 10px;
}
.absen-container p {
    color: #6c757d;
    margin-bottom: 25px;
}

/* Video preview */
#video {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 15px;
    border: 2px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background-color: #333; /* Latar belakang gelap jika kamera belum aktif */
}

/* Tombol ambil foto (diganti dengan .btn-utama) */
#snap {
    margin-top: 30px;
}


/* === 5. Gaya untuk Halaman Login (Pengguna & Admin) === */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}
.login-card {
    max-width: 450px;
    width: 100%;
    border: none;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    overflow: hidden; /* Agar card-header tidak keluar dari border-radius */
}
.login-card .logo {
    max-width: 80px;
    margin-bottom: 1rem;
}


/* === 6. Penyesuaian Responsif (Opsional, untuk tampilan lebih baik di Desktop) === */

/* Jika layar lebih besar dari 576px (tablet/desktop) */
@media (min-width: 576px) {
    /* * Buat body aplikasi pengguna terlihat seperti frame smartphone
     * di tengah layar pada tampilan desktop.
    */
    .user-app-body { 
        max-width: 450px;
        margin: 0 auto;
        box-shadow: 0 0 25px rgba(0,0,0,0.1);
        position: relative;
        min-height: 100vh;
    }

    .bottom-nav {
         /* Sesuaikan agar navigasi menempel pada .user-app-body, bukan seluruh layar */
         width: 100%;
         max-width: 450px;
         left: 50%;
         transform: translateX(-50%);
    }

    .login-card {
        width: 100%;
    }
}

/* --- Header Halaman Pengguna --- */
/* --- Header Halaman Pengguna (DESAIN BARU) --- */
.page-header {
    background: linear-gradient(45deg, #0d6efd, #0056b3);
    color: #ffffff;
    padding: 15px 20px; /* Padding dibuat lebih kecil agar header lebih pendek */
    display: flex; /* Menggunakan flexbox untuk penataan */
    justify-content: space-between; /* Mendorong item ke kiri dan kanan */
    align-items: center; /* Menyelaraskan item secara vertikal */
    position: sticky; /* Membuat header menempel di atas saat scroll */
    top: 0;
    z-index: 1020; /* Pastikan di atas konten lain */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.header-branding {
    display: flex;
    align-items: center;
}

.header-logo {
    width: 35px; /* Logo dibuat sangat kecil */
    height: 35px;
    margin-right: 12px;
}

.header-title {
    display: flex;
    flex-direction: column;
}

.main-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1; /* Merapatkan jarak baris */
}

.sub-title {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1; /* Merapatkan jarak baris */
}

.header-actions .logout-button {
    font-size: 22px;
    color: #ffffff;
    text-decoration: none;
    padding: 5px; /* Memberi area klik yang lebih besar */
}


/* Penyesuaian untuk Konten Utama */
/* HAPUS/UBAH margin-top negatif yang lama */
.main-content .container {
    margin-top: 0; /* Tidak perlu lagi margin negatif */
    position: static; /* Kembalikan ke posisi normal */
}

/* Penyesuaian untuk Konten Utama */
.main-content {
    /* Jarak atas ditambah agar konten tidak tertutup header sticky */
    /* Nilai padding-top disesuaikan agar ada ruang di bawah header */
    padding: 20px 15px 100px 15px;
}

.main-content .container {
    margin-top: 0;
    position: static;
}

/* Pastikan semua kartu di dalam konten utama memiliki latar belakang putih */
.main-content .card {
    background-color: #ffffff;
}

/*
 * ==========================================================
 * Penyesuaian Halaman Home (Sapaan Selamat Datang)
 * ==========================================================
 */
/*
 * ====================================================================
 * Penyesuaian Halaman Home (Sapaan Foto Kiri, Teks Kanan - FINAL)
 * ====================================================================
 */

/* Wrapper utama untuk blok sapaan */
.welcome-block {
    display: flex;
    align-items: center; /* Membuat foto dan blok teks sejajar di tengah */
}

/* Gaya untuk foto profil */
.welcome-photo {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 15px; /* Memberi jarak antara foto dan teks */
    flex-shrink: 0; /* Mencegah foto menyusut */
}

/* -- Aturan font dan jarak teks -- */
.welcome-text h5,
.welcome-text h4 {
    margin: 0;
    line-height: 1.2;
}

.welcome-text h5 {
    font-size: 16px;
    font-weight: 400;
    color: #6c757d;
    position: relative;
    left: 1px;

}

.user-name {
    font-family: 'Cooper Hewitt', 'Arial Black', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #343a40;
}

/* Kita tidak lagi memerlukan pergeseran untuk badge */
.welcome-text .badge {
    position: static;
    right: 0;
}


/* Mengimpor font Cooper Hewitt dari Google Fonts sebagai alternatif Cooper Black */
@import url('https://fonts.googleapis.com/css2?family=Cooper+Hewitt:wght@700&display=swap');


.welcome-text h4 {
    margin: 0; /* Menghapus semua margin */
    line-height: 1.2; /* Merapatkan jarak antar baris */
}

/* Aturan untuk h5 sekarang dipisah */
.welcome-text h5 {
    margin: 0;
    line-height: 1.2;
    position: relative; /* Memungkinkan elemen digeser */
    right: -119px;        /* Menggeser elemen 8px ke kanan dari posisi normalnya */
}

.welcome-text h5 {
    font-size: 16px; /* Ukuran font "Selamat Datang" */
    font-weight: 400;
}

.user-name {
    /* Menggunakan font Cooper Hewitt yang tebal dari Google Fonts */
    font-family: 'Cooper Hewitt', 'Arial Black', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 22px; /* Ukuran font nama pengguna */
    color: #343a40;
}

/* Menggeser badge Unit sedikit ke kanan agar lebih rapi */
.welcome-text .badge {
    position: relative;
    right: -92px; /* Anda bisa sesuaikan nilai ini (misal: -6px) */
    font-family: cooper;
    color: blue;
}
/*
 * ==========================================================
 * Penyesuaian Halaman Home (Sapaan Selamat Datang - VERSI RESPONSIVE)
 * ==========================================================
 */
/*
 * ====================================================================
 * Penyesuaian Halaman Home (Sapaan Rata Kanan - VERSI FINAL)
 * ====================================================================
 */



/* Atur jarak antara teks dan foto */
.welcome-text {
    margin-right: 15px;
}


/* -- Aturan font dan jarak teks (tetap sama seperti sebelumnya) -- */
.welcome-text h5,
.welcome-text h4 {
    margin: 0;
    line-height: 1.2;
}

.welcome-text h5 {
    font-size: 16px;
    font-weight: 400;
    color: #6c757d;
}

.user-name {
    font-family: 'Cooper Hewitt', 'Arial Black', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #343a40;
}

.welcome-text .badge {
    position: relative;
    right: -4px;
}

.welcome-text h5,
.welcome-text h4 {
    margin: 0;
    line-height: 1.2;
}

.welcome-text h5 {
    font-size: 16px;
    font-weight: 400;
    color: #6c757d; /* Warna dibuat lebih lembut */
}

.welcome-text span {
    position: relative;
    left: 1px;
}

.user-name {
    font-family: 'Cooper Hewitt', 'Arial Black', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #343a40;
}

/*
 * ==========================================================
 * Gaya untuk Kartu Statistik Bulanan di Halaman Home
 * ==========================================================
 */

/*
 * ==========================================================
 * Gaya untuk Kartu Statistik Bulanan di Halaman Home (Desain Ringkas)
 * ==========================================================
 */

.stat-card-small {
    color: #ffffff;
    padding: 15px;
    border-radius: 12px;
    display: flex; /* Mengaktifkan Flexbox untuk tata letak horizontal */
    align-items: center; /* Membuat ikon dan teks sejajar di tengah vertikal */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 10px;
}

.stat-card-small:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.stat-card-small i {
    font-size: 24px;
    margin-right: 15px; /* Jarak antara ikon dan teks */
    background: rgba(255, 255, 255, 0.15); /* Latar belakang ikon semi-transparan */
    width: 45px;
    height: 45px;
    line-height: 45px; /* Trik untuk menengahkan ikon di dalam lingkaran */
    text-align: center;
    border-radius: 50%; /* Membuat latar belakang ikon menjadi lingkaran */
}

.stat-card-small .stat-text {
    display: flex;
    flex-direction: column; /* Angka di atas, label di bawah */
}

.stat-card-small .stat-number {
    font-size: 22px; /* Ukuran angka diperkecil */
    font-weight: 700;
    line-height: 1;
}

.stat-card-small .stat-label {
    font-size: 13px; /* Ukuran label diperkecil */
    font-weight: 400;
    opacity: 0.9;
}

/* Gradasi warna (tetap sama) */
.bg-tepat-waktu {
    background: linear-gradient(45deg, #28a745, #218838);
}

.bg-terlambat {
    background: linear-gradient(45deg, #dc3545, #c82333);
}

/* Gaya untuk Tombol Pilihan Tipe Izin */
.tipe-izin-group {
    display: flex;
    gap: 10px; /* Jarak antar tombol */
}

.tipe-izin-group .btn-outline-primary {
    flex-grow: 1; /* Membuat semua tombol sama lebar */
    border-width: 2px;
}

/* Mengubah tampilan saat tombol dipilih */
.tipe-izin-group .btn-check:checked + .btn-outline-primary {
    background-color: #0d6efd;
    color: white;
}

/*
 * ==========================================================
 * Gaya untuk Kotak Peringatan di Halaman Izin
 * ==========================================================
 */
.izin-warning-box {
    background-color: #d9534f; /* Warna merah yang tidak terlalu terang */
    color: #ffffff;
    font-family: 'Montserrat', sans-serif; /* Menggunakan font Montserrat */
    font-size: 13px; /* Ukuran font kecil */
    padding: 12px 18px;
    border-radius: 8px;
    margin-top: 15px; /* Jarak dari judul di atasnya */
    line-height: 1.6;
}

.izin-warning-box .warning-title {
    font-weight: 700; /* Bold */
    display: block;
    margin-bottom: 8px;
}

.izin-warning-box ol {
    padding-left: 20px; /* Atur padding list */
    margin-bottom: 0;
}

.izin-warning-box li {
    margin-bottom: 5px; /* Jarak antar poin */
}