/*
 * style.css
 * Gaya global untuk aplikasi e-Absen SMPITB
 */

/* ==================================== */
/* GLOBAL RESET & FONT */
/* ==================================== */
body {
    font-family: 'Arial', sans-serif; /* Ganti dengan font yang lebih bagus jika ada */
    background-color: #f0f2f5; /* Warna latar belakang halaman */
    display: flex; /* Untuk menengahkan container */
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Agar full screen */
    margin: 0;
}

/* ==================================== */
/* CONTAINER & HEADER STYLES */
/* ==================================== */
.container {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 90%;
    max-width: 450px; /* Ukuran default untuk absensi dan login */
    margin: 20px;
}

/* --- LOGO STYLE BARU (Kode Anda) --- */
.logo-sekolah {
    width: 100px; /* Atur lebar logo */
    height: auto;
    margin-bottom: 15px; /* Jarak antara logo dan judul H1 */
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* ----------------------- */
h1 {
    color: #1a73e8; /* Warna biru untuk judul utama */
    font-size: 1.8em;
    margin-bottom: 5px;
}
h2 {
    color: #5f6368; /* Warna abu-abu untuk sub judul */
    font-size: 1.1em;
    font-weight: normal;
    margin-bottom: 25px;
}

/* ==================================== */
/* FORM STYLES */
/* ==================================== */
.form-group {
    text-align: left;
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #3c4043;
    font-size: 0.9em;
}
.form-group input[type="text"],
.form-group input[type="password"],
.form-group select, /* Tambahan: agar select ikut ter-style */
.form-group input[type="email"] { /* Tambahan: agar input email ikut ter-style */
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #dadce0;
    border-radius: 6px;
    box-sizing: border-box; /* Agar padding tidak menambah lebar */
    font-size: 1em;
    transition: border-color 0.3s;
}
.form-group input:focus,
.form-group select:focus {
    border-color: #1a73e8; /* Border berubah saat fokus */
    outline: none;
    box-shadow: 0 0 0 1px #1a73e8;
}

/* ==================================== */
/* BUTTON STYLES */
/* ==================================== */
.login-btn, .btn, .btn-primary {
    background-color: #1a73e8;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    width: 100%;
    margin-top: 10px;
    transition: background-color 0.3s;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
}
.login-btn:hover, .btn:hover, .btn-primary:hover {
    background-color: #0b50a6;
    color: white;
}

/* Style Khusus untuk Tombol Secondary (Seperti "Batalkan") */
.btn-secondary {
    background-color: #f1f3f4;
    color: #3c4043;
    padding: 12px 20px;
    border: 1px solid #dadce0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    width: 100%;
    margin-top: 10px;
    transition: background-color 0.3s;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
}
.btn-secondary:hover {
    background-color: #e8eaed;
    color: #3c4043;
}

/* ==================================== */
/* LINK & FOOTER STYLES */
/* ==================================== */
.link-kembali {
    display: block;
    margin-top: 20px;
    color: #1a73e8;
    text-decoration: none;
    font-size: 0.9em;
}

.link-kembali:hover {
    text-decoration: underline;
}

.footer {
    margin-top: 30px;
    font-size: 0.8em;
    color: #70757a;
}

/* ==================================== */
/* ALERT/ERROR STYLES */
/* ==================================== */
.alert {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 0.9em;
    text-align: left;
}

.alert.error {
    background-color: #fce8e6; /* Merah muda */
    color: #d93025; /* Merah tua */
    border: 1px solid #f9bdbd;
}

/* * ====================================
 * CUSTOM ADDITIONS
 * ====================================
 */
/* Styling untuk teks deskripsi dan informasi waktu (paragraf di dalam container) */
.container p {
    font-size: 1em;
    color: #3c4043;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* ==================================== */
/* ALERT/ERROR STYLES (Lanjutan) */
/* ==================================== */
/* Tambahan style untuk alert info (digunakan di data_ptk.php) */
.alert.alert-info { 
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}
/* Tambahan style untuk alert sukses */
.alert.success {
    background-color: #e6f7e8; /* Hijau muda */
    color: #1e8449; /* Hijau tua */
    border: 1px solid #c8e6c9;
}

/* ==================================== */
/* DATA/TABLE PAGE STYLES (Untuk data_ptk.php, data_siswa.php, dll.) */
/* ==================================== */

/* 1. Container lebar khusus untuk halaman data/tabel */
.data-container {
    background-color: #ffffff;
    padding: 25px; 
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    width: 98%; 
    max-width: 1400px; /* Lebar Maksimum untuk tabel */
    margin: 20px auto; /* Tengahkan container lebar */
    text-align: left; 
}

/* 1b. Container sedang khusus untuk halaman Form (Tambah/Edit) */
.form-page-container {
    background-color: #ffffff;
    padding: 25px; 
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    width: 90%; 
    max-width: 700px; /* Lebar Maksimum untuk form */
    margin: 20px auto; /* Tengahkan container lebar */
    text-align: left; 
}

/* 2. Mengatasi konflik width: 100% pada tombol kecil di tabel */
.btn-sm {
    width: auto !important; /* Membatalkan width: 100% dari style global */
    display: inline-block;
}

/* 3. Penyesuaian agar tombol di kolom Aksi di tabel tidak terlalu lebar */
.table-responsive .table td:last-child {
    white-space: nowrap; /* Mencegah tombol Edit/Hapus turun baris */
    width: 1%; /* Agar kolom aksi tidak mengambil ruang berlebihan */
}


/* ==================================== */
/* PRINT STYLES (Untuk rekap_absensi_bulanan.php) */
/* ==================================== */
@media print {
    /* 1. HIDE UNNECESSARY ELEMENTS */
    /* Sembunyikan filter, tombol cetak, keterangan, dan alert */
    .dashboard-header,
    .filter-form, 
    .btn-secondary, 
    .btn-primary, 
    .btn-filter, 
    .aksi-cetak, 
    .keterangan-bawah,
    .dashboard-menu,
    .alert {
        display: none !important;
    }

    /* 2. OPTIMIZE BODY/PAGE FOR PRINT */
    body {
        background-color: #fff !important; 
        display: block !important; 
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10pt; 
    }

    /* 3. OPTIMIZE CONTAINER/LAYOUT */
    .container {
        max-width: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 4. OPTIMIZE TABLE */
    .rekap-table-container {
        overflow-x: visible !important; /* Pastikan tidak ada scroll saat dicetak */
    }
    
    .rekap-table {
        table-layout: fixed !important; /* PENTING: Lebar kolom ditentukan oleh CSS */
        width: 100% !important; 
        font-size: 8pt; 
        border-collapse: collapse; 
    }

    .rekap-table th, .rekap-table td {
        padding: 2px 0px !important; /* Kecilkan padding */
        line-height: 1.1; 
        height: auto !important;
        /* Perbaikan sebelumnya: Border diubah menjadi hitam */
        border-color: #000 !important; 
    }
    
    /* KOLOM NAMA DAN INDENTITAS (1, 2, 3) */
    /* MODIFIKASI: Mengurangi lebar kolom NO dan NISN saat cetak */
    .rekap-table td:nth-child(1), /* NO */
    .rekap-table th:nth-child(1) {
        width: 3% !important; /* Dulu 3%, dikurangi */
        min-width: 20px !important; /* Dulu 25px, dikurangi */
    }

    .rekap-table td:nth-child(2), /* NISN */
    .rekap-table th:nth-child(2) {
        width: 6% !important; /* Dulu 7%, dikurangi */
        min-width: 50px !important; /* Dulu 60px, dikurangi */
    }
    
    .rekap-table td:nth-child(3), /* NAMA SISWA */
    .rekap-table th:nth-child(3) {
        width: 15% !important; 
        text-align: left !important;
        padding-left: 5px !important;
    }
    
    /* KOLOM TANGGAL (4 sampai (N-4)) */
    /* Menargetkan semua kolom kecuali 3 pertama dan 4 terakhir (kolom rekap) */
    .rekap-table td:not(:nth-child(-n+3)):not(:nth-last-child(-n+4)), 
    .rekap-table th:not(:nth-child(-n+3)):not(:nth-last-child(-n+4)) {
        /* Lebar disesuaikan setelah kolom NO dan NISN dikurangi */
        width: 2.1% !important; 
        min-width: 10px !important;
        font-size: 7pt; 
    }
    
    /* KOLOM REKAPITULASI (4 kolom terakhir) */
    .rekap-table td:nth-last-child(-n+4),
    .rekap-table th:nth-last-child(-n+4) {
        width: 5.5% !important; 
        font-weight: bold;
    }
    
    /* Memastikan warna cetak terlihat (H, S, I, A) */
    .status-alpha { color: #cc0000 !important; -webkit-print-color-adjust: exact; }
    .status-hadir { color: #008000 !important; -webkit-print-color-adjust: exact; }
    .hari-libur { background-color: #f0f0f0 !important; -webkit-print-color-adjust: exact; }
    
    .sticky-col, .sticky-col-header {
        position: static !important;
        left: auto !important;
    }
}