/* --- GLOBAL & RESET --- */
body { 
    font-family: 'Roboto', sans-serif; 
    background: #121212; 
    color: #e0e0e0; 
    margin: 0; padding: 0; 
    height: 100vh; 
    overflow: hidden; 
    display: flex; flex-direction: column; 
}

/* --- SCROLLBAR CUSTOM --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1e1e1e; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* --- 1. HALAMAN DEPAN (OVERLAY) --- */
#start-overlay { 
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(0,0,0,0.98); 
    z-index: 9999; 
    display: flex; flex-direction: column; 
    align-items: center; justify-content: center; 
    text-align: center; 
}

.mode-selection { 
    display: flex; gap: 20px; margin-top: 30px; 
    flex-wrap: wrap; justify-content: center;
}

.btn-mode { 
    padding: 20px 40px; border: none; border-radius: 15px; 
    font-size: 1.5rem; font-weight: bold; cursor: pointer; 
    display: flex; flex-direction: column; align-items: center; gap: 10px; 
    min-width: 160px; transition: transform 0.2s; color: white; 
}
.btn-mode:active { transform: scale(0.95); }

.btn-datang { 
    background: linear-gradient(135deg, #007bff, #0056b3); 
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.4); 
}

.btn-outline {
    background: transparent; border: 1px solid #555; 
    color: #aaa; padding: 10px 20px; border-radius: 30px; 
    cursor: pointer; font-size: 0.9rem;
}

/* --- 2. LAYOUT UTAMA --- */
#app-screen { 
    display: none; /* Disembunyikan sampai tombol Start ditekan */
    flex-direction: column; width: 100%; height: 100%; 
}

/* Header */
.header-bar { 
    height: 8%; min-height: 50px; 
    display: flex; align-items: center; justify-content: center; 
    background: #1a1a1a; border-bottom: 1px solid #333; 
    transition: background 0.3s; 
}
.header-pulang { background: #3a0e0e !important; border-bottom: 1px solid #ff4b2b !important; }

.clock-time { font-family: 'Share Tech Mono', monospace; font-size: 1.8rem; font-weight: bold; color: #fff; margin-right: 10px; }
.clock-date { font-size: 0.9rem; color: #aaa; }
.mode-badge { 
    padding: 2px 8px; border-radius: 4px; 
    font-size: 0.7rem; font-weight: bold; margin-left: 10px; 
    text-transform: uppercase; letter-spacing: 1px; 
    background: #007bff; color: white;
}


/* --- 3. PANEL KAMERA (KIRI) --- */
.left-panel {
    flex: 4; position: relative; background: #000; 
    border-right: 2px solid #333; overflow: hidden; 
    display: flex; align-items: center; justify-content: center;
}
video { 
    width: 100%; height: 100%; object-fit: cover; 
    opacity: 0.9; transform: scaleX(-1); /* Efek Cermin */
}

/* Overlays di atas Kamera */
#scan-result { 
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(0, 255, 136, 0.2); border: 8px solid #00ff88; 
    display: flex; align-items: center; justify-content: center; 
    color: #00ff88; font-size: 3rem; font-weight: bold; 
    display: none; z-index: 10; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.8); 
}
.result-pulang { border-color: #ff4b2b !important; color: #ff4b2b !important; background: rgba(255, 75, 43, 0.2) !important; }

#sleep-overlay { 
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(0,0,0,0.85); color: white; 
    display: none; flex-direction: column; 
    align-items: center; justify-content: center; 
    z-index: 20; cursor: pointer; 
}
.sleep-icon { font-size: 50px; margin-bottom: 10px; opacity: 0.7; }

#cnt-overlay { 
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(0,0,0,0.5); display: none; 
    align-items: center; justify-content: center; z-index: 50; 
}
.cnt-number { font-family: sans-serif; font-size: 8rem; font-weight: bold; color: #ffffff; }

#queue-status { 
    position: absolute; bottom: 10px; right: 10px; 
    background: #222; border: 1px solid #444; 
    padding: 5px 12px; border-radius: 20px; 
    font-size: 0.8rem; color: #aaa; z-index: 100; 
}
.uploading { color: #ffaa00 !important; border-color: #ffaa00 !important; }


.btn-search { background: linear-gradient(135deg, #00c6ff, #0072ff); }
.btn-trophy { background: linear-gradient(135deg, #d4af37, #b8860b); }
.btn-rekap  { background: linear-gradient(135deg, #667eea, #764ba2); }
.btn-eco    { background: #28a745; margin-bottom: 5px; }
.btn-icon   { font-size: 1.4rem; } 

/* Riwayat List */

.recent-title { 
    font-size: 0.75rem; color: #888; text-transform: uppercase; 
    letter-spacing: 1px; font-weight: bold; margin-bottom: 5px; 
    text-align: center; border-bottom: 1px solid #444; padding-bottom: 5px;
}
.recent-item { 
    padding: 8px 0; border-bottom: 1px solid #444; 
    color: #ddd; font-size: 0.85rem; 
    display: flex; justify-content: space-between; 
}
.r-time { color: #00c6ff; font-family: monospace; }
#empty-recent { text-align: center; color: #555; padding: 10px; font-style: italic;}

/* --- 5. MODALS --- */
.modal { 
    display: none; position: fixed; z-index: 1000; 
    left: 0; top: 0; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px); 
}
.modal-content { 
    background-color: #1e1e1e; margin: 5% auto; padding: 20px; 
    border: 1px solid #333; width: 90%; max-width: 400px; 
    border-radius: 12px; color: #e0e0e0; 
    display: flex; flex-direction: column; max-height: 80vh; 
}
.close-modal { 
    align-self: flex-end; color: #888; font-size: 24px; 
    font-weight: bold; cursor: pointer; 
}
.close-modal:hover { color: white; }

h3.lb-title { text-align: center; color: #4facfe; margin-top:0; margin-bottom: 15px;}
.empty-msg { text-align:center; color:#666; padding:20px; font-style:italic;}

/* Input & List di Modal */
#search-input, .filter-box select { 
    width: 100%; padding: 12px; margin-bottom: 10px; 
    background: #2a2a2a; border: 1px solid #444; 
    color: white; border-radius: 5px; box-sizing: border-box; 
    font-size: 1rem;
}
#search-results, .lb-list { 
    list-style: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1; 
}
.search-item, .lb-item { 
    padding: 12px; border-bottom: 1px solid #333; 
    cursor: pointer; display: flex; justify-content: space-between; 
}
.s-select-btn { background: #444; padding: 5px 10px; border-radius: 15px; font-size: 0.75rem; }
.lb-item:nth-child(1) { color: #FFD700; font-weight: bold; }

/* Konfirmasi Modal */
#confirm-content { text-align: center; padding: 10px 0; }
#confirm-name { font-size: 1.4rem; color: #00c6ff; display: block; margin: 15px 0; font-weight: bold; }
.btn-group { display: flex; gap: 10px; }
.btn-yes, .btn-no, #btn-load-rekap { 
    flex: 1; padding: 12px; border: none; border-radius: 5px; 
    color: white; font-weight: bold; cursor: pointer; 
}
.btn-yes { background: #28a745; } 
.btn-no { background: #dc3545; }
#btn-load-rekap { background: #007bff; flex: none; width: 80px;}

.filter-box { display: flex; gap: 10px; margin-bottom: 10px; }

/* --- 6. SWEETALERT CUSTOM (POPUP TELAT) --- */
.swal-telat {
    background-color: #fff3cd !important;
    border: 2px solid #ffecb5 !important;
}
.swal-telat .swal2-title { color: #856404 !important; }
.swal-telat .swal2-html-container { color: #856404 !important; font-weight: bold; }
.swal-telat .swal2-icon.swal2-warning { border-color: #856404 !important; color: #856404 !important; }

/* --- 7. RESPONSIVE MOBILE --- */
@media screen and (max-width: 800px) {
   
    .clock-date { font-size: 0.75rem; }
    
    .btn-icon { font-size: 1.1rem; margin: 0; } 
    
    #recent-container { 
        display: flex; flex-direction: column; width: 100%; 
        margin-top: 5px; flex-grow: 1; overflow-y: auto; height: auto; 
    }
}
/* --- PERBAIKAN LAYOUT (FIX NAVIGASI) --- */

/* 1. Pastikan Container Utama Rapi */
.content-row {
    display: flex;
    flex: 1;
    width: 100%;
    height: 92%; /* Sisa dari Header */
    overflow: hidden;
}

/* 2. Panel Kanan (Sidebar Tombol) */
.right-panel {
    flex: 1;
    background: #1e1e1e;
    display: flex;
    flex-direction: column; /* Tombol berjejer ke bawah */
    padding: 10px;
    gap: 10px; /* Jarak antar tombol */
    overflow-y: auto;
    box-sizing: border-box;
    min-width: 120px; /* Lebar minimal agar tidak gepeng */
}

/* 3. Tombol Sidebar */
.sidebar-btn {
    width: 100%;
    padding: 15px 5px; /* Padding lebih besar */
    border-radius: 8px;
    border: none;
    color: white;
    font-weight: bold;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* Efek timbul */
    transition: transform 0.1s;
    flex-shrink: 0; /* Jangan mengecil */
}

.sidebar-btn:active { transform: scale(0.96); }

/* 4. Riwayat List (Agar tidak menabrak tombol bawah) */
#recent-container {
    flex-grow: 1;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 10px;
    border: 1px solid #333;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 100px; /* Tinggi minimal */
}

/* 5. Header Jam (Agar teks tidak tumpuk) */
.header-bar {
    height: 8%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Kiri Kanan Rata */
    background: #1a1a1a;
    border-bottom: 1px solid #333;
    padding: 0 20px;
    box-sizing: border-box;
}

.clock-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.5rem; /* Sesuaikan ukuran */
    font-weight: bold;
    color: #fff;
    white-space: nowrap; /* Jangan turun baris */
}

/* --- RESPONSIVE HP (Layout Berubah Atas-Bawah) --- */
@media screen and (max-width: 800px) {
    .content-row { flex-direction: column; }
    
    /* Kamera di Atas */
    .left-panel {
        flex: none;
        height: 55%; /* Kamera ambil 55% layar */
        width: 100%;
        border-bottom: 2px solid #333;
    }

    /* Tombol di Bawah */
    .right-panel {
        flex: 1; /* Sisa layar untuk tombol */
        flex-direction: row; /* Tombol berjejer ke samping */
        flex-wrap: wrap; /* Kalau penuh turun ke bawah */
        align-content: flex-start;
        padding: 8px;
        gap: 8px;
    }

    /* Ukuran Tombol di HP */
    .sidebar-btn {
        flex: 1;
        min-width: 30%; /* 3 Tombol per baris */
        height: 50px; /* Tinggi fix */
        flex-direction: row; /* Ikon di samping teks */
        font-size: 0.75rem;
        padding: 0 5px;
    }
    
    /* Riwayat di HP (Sembunyikan atau taruh paling bawah) */
    #recent-container {
        width: 100%;
        height: auto;
        max-height: 80px;
        order: 10; /* Taruh paling akhir */
    }
}
/* ========================================= */
/* BAGIAN TAMBAHAN: STYLE ADMIN & LAPORAN    */
/* (Tempel di bagian paling bawah style.css) */
/* ========================================= */

/* --- 1. LAYOUT ADMIN (LOGIN BOX) --- */
#login-box {
    width: 90%; max-width: 350px; margin: auto; 
    background: #1e1e1e; padding: 25px; border-radius: 12px;
    border: 1px solid #333; flex-direction: column; gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.login-field {
    width: 100%; padding: 12px; background: #2a2a2a;
    border: 1px solid #444; color: white; border-radius: 6px;
    box-sizing: border-box; outline: none; font-size: 1rem;
    transition: border-color 0.2s;
}
.login-field:focus { border-color: #007bff; }

.btn-login {
    width: 100%; padding: 12px; background: linear-gradient(135deg, #FF416C, #FF4B2B);
    color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer;
    font-size: 1rem; letter-spacing: 1px; margin-top: 5px;
}
.btn-login:disabled { opacity: 0.7; cursor: not-allowed; }

/* --- 2. DASHBOARD ADMIN --- */
.petugas-bar {
    padding: 10px 15px; background: #222; color: #aaa;
    font-size: 0.85rem; text-align: right; border-bottom: 1px solid #333;
}
.btn-header {
    padding: 8px 15px; color: white; border: 1px solid #555;
    border-radius: 5px; cursor: pointer; font-size: 0.8rem; font-weight: bold;
}

/* Grid Kelas */
#view-kelas {
    padding: 15px; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px; overflow-y: auto; align-content: flex-start; flex-grow: 1;
}
.btn-kelas {
    padding: 25px 5px; background: #1e1e1e; border: 1px solid #333;
    border-radius: 10px; color: #4facfe; font-weight: bold;
    cursor: pointer; text-align: center; font-size: 1rem;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.btn-kelas:hover { background: #2a2a2a; border-color: #4facfe; }
.btn-kelas:active { transform: scale(0.95); }

/* List Siswa (Admin View) */
.siswa-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 15px; background: #1e1e1e; border-bottom: 1px solid #333;
    margin-bottom: 6px; border-radius: 6px; cursor: pointer;
}
.siswa-row:active { background: #333; transform: translateX(5px); transition: 0.2s; }

.s-left { display: flex; flex-direction: column; gap: 3px; }
.s-name { font-weight: bold; font-size: 0.95rem; color: #fff; }
.s-id { font-size: 0.75rem; color: #666; font-family: 'Share Tech Mono', monospace; }

/* Badge Status Warna-Warni */
.st-badge {
    font-size: 0.7rem; font-weight: bold; padding: 4px 8px;
    border-radius: 4px; min-width: 70px; text-align: center;
    border: 1px solid transparent; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.st-belum { background: #2a2a2a; color: #666; border-color: #444; }
.st-hadir { background: rgba(0,255,136,0.15); color: #00ff88; border-color: #00ff88; }
.st-sakit { background: rgba(230,126,34,0.15); color: #e67e22; border-color: #e67e22; }
.st-izin  { background: rgba(52,152,219,0.15); color: #3498db; border-color: #3498db; }
.st-alpha { background: rgba(231,76,60,0.15); color: #e74c3c; border-color: #e74c3c; }

/* --- 3. MODAL INPUT STATUS --- */
.status-group { display: flex; gap: 10px; margin: 20px 0; }
.radio-btn {
    flex: 1; padding: 12px; border: 1px solid #444;
    border-radius: 6px; text-align: center; cursor: pointer;
    color: #888; background: #2a2a2a; font-size: 0.85rem; font-weight: bold;
    transition: all 0.2s;
}
.radio-btn:hover { background: #333; }
.radio-btn.active {
    border-color: #00c6ff; background: rgba(0, 198, 255, 0.2);
    color: #00c6ff; transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 198, 255, 0.1);
}
.modal-btns { margin-top: 20px; display: flex; gap: 10px; }

/* --- 4. TABEL LAPORAN (BULANAN & TELAT) --- */
.filter-bar-lap, .filter-area {
    padding: 12px; display: flex; gap: 8px; background: #1e1e1e;
    border-bottom: 1px solid #333; flex-wrap: wrap; align-items: center;
}
.btn-simpan {
    background: #28a745; color: white; border: none; padding: 0 20px;
    border-radius: 5px; font-weight: bold; cursor: pointer;
    font-size: 0.9rem; height: 42px; display: flex; align-items: center; justify-content: center;
}

.custom-table, .rekap-table {
    width: 100%; border-collapse: collapse; color: #ddd;
    font-size: 0.8rem; text-align: center;
}
/* Sticky Header agar judul tabel tetap di atas saat scroll */
.custom-table th, .rekap-table th {
    background: #252525; color: #fff; position: sticky; top: 0;
    padding: 10px 5px; z-index: 5; border-bottom: 2px solid #555;
    font-weight: 600; white-space: nowrap;
}
.custom-table td, .rekap-table td {
    padding: 8px 5px; border: 1px solid #333;
}
.custom-table tr:nth-child(even) { background: #181818; }
.custom-table tr:hover { background: #2a2a2a; }

/* --- 5. REKAP HARIAN (FOTO THUMBNAIL) --- */
.img-wrapper {
    width: 50px; height: 50px; display: flex; margin: 0 auto;
    align-items: center; justify-content: center;
    background: #000; border-radius: 6px; overflow: hidden;
    border: 1px solid #555; cursor: zoom-in;
}
.thumb-img { width: 100%; height: 100%; object-fit: cover; }

/* Modal Foto Besar */
#photo-modal {
    display: none; position: fixed; z-index: 100000;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(5px);
}

/* --- 6. RESPONSIVE MOBILE --- */
@media screen and (max-width: 600px) {
    .filter-bar-lap { flex-direction: column; align-items: stretch; }
    .btn-simpan { width: 100%; margin-top: 5px; }
    #view-kelas { grid-template-columns: repeat(3, 1fr); }
    
    /* Tabel scroll horizontal di HP */
    .table-container { overflow-x: auto; }
}