/* --- UNIVERSAL RESET & GENERAL STYLING --- */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-image: url('https://iili.io/KncV2lS.png');
    background-color: #f4f7fc;
    background-size: auto;
    background-attachment: fixed;
}

/* --- HEADER --- */
header {
    background-color: #2684FF;
    color: #fff;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    border-bottom: 3px solid #25CCFF;
}
.header-logo { display: flex; align-items: center; }
.header-logo img { width: 80px; margin-right: 20px; }
.header-logo h1 { font-size: 1.8em; margin: 0; font-weight: bold; overflow-wrap: break-word; }
.header-datetime { text-align: right; font-size: 1em; }
#realtime-clock { font-weight: 700; }

/* --- MAIN CONTENT & CONTAINERS --- */
main { padding: 40px; min-height: calc(100vh - 220px); }
.form-container, .table-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 35px;
    background-color: rgba(255, 255, 255, 0.97);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,.1);
    border-top: 5px solid #2684FF;
}
#pilih-peran-lapor .features {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.form-container h2, .table-container h2 { color: #2684FF; text-align: center; margin-bottom: 30px; }
.main-title { text-align: center; color: #2684FF; margin-bottom: 40px; overflow-wrap: break-word; }

/* --- FEATURE CARDS (MENU UTAMA) --- */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.feature-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,.08);
    transition: transform .3s, box-shadow .3s;
    cursor: pointer;
    border-left: 5px solid #2684FF;
}
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(38, 132, 255, .15); 
}
.feature-card h3 { margin-top: 0; color: #2684FF; font-size: 1.4em; }
.feature-card p { color: #666; font-size: 1em; }

/* --- FORM ELEMENTS & BUTTONS --- */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #555; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color .3s, box-shadow .3s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus, input[type="date"]:focus {
    border-color: #2684FF;
    box-shadow: 0 0 5px rgba(38, 132, 255, .3); 
    outline: none;
}
.form-group textarea { resize: vertical; min-height: 120px; }

/* [BARU] Gaya Kustom untuk Input Tanggal */
input[type="date"] {
    background-color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    position: relative;
    color-scheme: light; /* Memastikan teks dan ikon default tetap terang */
}
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.2s;
    filter: invert(39%) sepia(87%) saturate(2978%) hue-rotate(204deg) brightness(100%) contrast(101%); /* Mengubah ikon menjadi warna #2684FF */
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* [BARU] Gaya untuk Input Tanggal Kustom dengan flatpickr */
.tanggal-kustom {
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%232684FF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17 11h-2v2h2v-2zm-4 0h-2v2h2v-2zm-4 0H7v2h2v-2zm10-4h-1V5h-2v2H8V5H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm0 12H5V9h14v10z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 24px;
    cursor: pointer;
}


.btn {
    background-color: #2684FF;
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    width: 100%;
    transition: background-color .3s;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    position: relative; /* Diperlukan untuk loading bar */
    overflow: hidden;   /* Diperlukan untuk loading bar */
}
.btn:hover { background-color: #1f75e8; }
.btn-back { background-color: #6c757d; margin-top: 20px; }
.btn-back:hover { background-color: #5a6268; }
.btn:disabled { background-color: #999; cursor: not-allowed; }

/* [BARU] Gaya untuk Tombol Loading */
.btn.loading {
    color: transparent; /* Sembunyikan teks asli */
    pointer-events: none; /* Nonaktifkan klik saat loading */
}
.btn.loading::after {
    content: 'Mengirim...';
    color: white;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #1f75e8 50%, #2684FF 50%);
    background-size: 200% 100%;
    animation: loading-progress 1.5s linear infinite;
}
@keyframes loading-progress {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}


/* --- TABLE STYLING --- */
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th, td { padding: 15px; text-align: left; border-bottom: 1px solid #ddd; overflow-wrap: break-word; word-wrap: break-word; }
th { background-color: #2684FF; color: #fff; }
tbody tr:nth-child(even) { background-color: #f8f9fa; }
tbody tr:hover { background-color: #e9ecef; }

#konfirmasi-gangguan th:nth-child(1) { width: 25%; }
#konfirmasi-gangguan th:nth-child(2) { width: 20%; }
#konfirmasi-gangguan th:nth-child(3) { width: 40%; }
#konfirmasi-gangguan th:nth-child(4) { width: 15%; }

/* --- FOOTER --- */
footer { background-color: #2684FF; color: #fff; text-align: center; padding: 20px; width: 100%; margin-top: 40px; }
#footer-logo { width: auto; height: 45px; margin-bottom: 10px; }
#upload-status { text-align: center; font-weight: 700; margin-top: 15px; color: #2684FF; }

/* --- FLOATING WHATSAPP BUTTON --- */
.tombol-bantuan-wa {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #25D366;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: transform 0.2s, box-shadow 0.2s;
}
.tombol-bantuan-wa:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.tombol-bantuan-wa svg { width: 24px; height: 24px; }

/* --- MISC STYLES --- */
.status-ditangani { color: #28a745; font-weight: bold; }
.status-belum { color: #dc3545; font-weight: bold; }
.btn-konfirmasi { background-color: #007bff; color: white; padding: 8px 12px; border: none; border-radius: 5px; cursor: pointer; font-size: 0.9em; transition: background-color 0.3s; }
.btn-konfirmasi:hover { background-color: #0056b3; }
.btn-konfirmasi:disabled { background-color: #999; cursor: not-allowed; }
#petugas-bertugas-container { max-width: 1000px; margin: 40px auto 0 auto; padding: 20px 25px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #ddd; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,.05); }
#petugas-bertugas-container strong { color: #2684FF; font-size: 1.3em; display: block; margin-bottom: 15px; }
#petugas-bertugas-container span { display: inline-block; margin: 0 15px; font-size: 1.1em; color: #333; font-weight: 500; }

/* --- FILTER & CETAK CONTAINER --- */
.filter-cetak-container { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 15px; align-items: flex-end; margin-bottom: 25px; padding: 20px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #ddd; }
.filter-cetak-container .form-group { margin-bottom: 0; }
.filter-cetak-container label { margin-bottom: 5px; font-size: 0.9em; }
.filter-cetak-container input[type="date"] { padding: 12px; }
.filter-cetak-container .btn { width: auto; padding: 10px 20px; }
#btn-cetak-rgs { background-color: #198754; }
#btn-cetak-rgs:hover { background-color: #13653f; }

/* [BARU] Gaya untuk Filter Kategori di Riwayat Monitoring */
.filter-kategori-container { margin-bottom: 25px; padding: 20px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #ddd; }
.filter-kategori-container .form-group { margin-bottom: 0; }
.filter-kategori-container label { font-size: 0.9em; }
.filter-kategori-container select { padding: 8px; }

/* --- MODAL STYLES --- */
#modal-overlay, #modal-alert-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: none; justify-content: center; align-items: center; z-index: 2000; padding: 15px; }
#modal-custom, #modal-alert-custom { background-color: #fff; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.3); width: 100%; max-width: 400px; overflow: hidden; animation: modalFadeIn 0.3s ease-out; }
@keyframes modalFadeIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#modal-header, #modal-alert-header { padding: 20px; background-color: #2684FF; color: #fff; }
#modal-header h3, #modal-alert-header h3 { margin: 0; font-size: 1.4em; }
#modal-body, #modal-alert-body { padding: 25px; }
#modal-password-input { width: 100%; padding: 12px; font-size: 1.1em; border: 2px solid #ccc; border-radius: 5px; }
#modal-password-input:focus { border-color: #2684FF; box-shadow: 0 0 8px rgba(38, 132, 255, .3); outline: none; }
#modal-error-msg { color: #dc3545; font-size: 0.9em; margin-top: 10px; min-height: 1.2em; }
#modal-footer, #modal-alert-footer { display: flex; gap: 10px; padding: 0 25px 25px 25px; }
#modal-cancel, #modal-submit { flex: 1; padding: 12px; font-size: 1em; font-weight: 600; }
#modal-cancel { background-color: #6c757d; }
#modal-submit { background-color: #2684FF; }
#modal-alert-header { background-color: #198754; }
#modal-alert-header.error { background-color: #dc3545; }
#modal-alert-body p { margin: 0; color: #333; font-size: 1.05em; line-height: 1.5; }
#modal-alert-footer { justify-content: flex-end; }
#modal-alert-ok { width: 120px; flex: none; }

/* --- SCROLLABLE TABLE BODY --- */
#log-terbaru-body, #riwayat-monitoring-body, #arsip-rgs-body { display: block; max-height: 320px; overflow-y: auto; }
#log-gangguan-terbaru table tr, #riwayat-monitoring table tr, #arsip-rgs table tr { display: table; width: 100%; table-layout: fixed; }

/* Table Column Widths */
#log-gangguan-terbaru th:nth-child(1) { width: 30%; }
#log-gangguan-terbaru th:nth-child(2) { width: 20%; }
#log-gangguan-terbaru th:nth-child(3) { width: 35%; }
#log-gangguan-terbaru th:nth-child(4) { width: 15%; }

/* [DIUBAH] Lebar kolom disesuaikan untuk kolom Kategori baru */
#riwayat-monitoring th:nth-child(1) { width: 20%; } /* Tanggal */
#riwayat-monitoring th:nth-child(2) { width: 10%; } /* Shift */
#riwayat-monitoring th:nth-child(3) { width: 20%; } /* Petugas */
#riwayat-monitoring th:nth-child(4) { width: 20%; } /* Kategori */
#riwayat-monitoring th:nth-child(5) { width: 20%; } /* Nama File */
#riwayat-monitoring th:nth-child(6) { width: 10%; } /* Link */

#arsip-rgs th:nth-child(1) { width: 50%; }
#arsip-rgs th:nth-child(2) { width: 25%; }
#arsip-rgs th:nth-child(3) { width: 25%; }

/* [BARU] Gaya untuk Indikator Pemuatan (Spinner) */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 3000; /* Paling atas */
}
.spinner {
    width: 60px;
    height: 60px;
    border: 7px solid #f3f3f3;
    border-top: 7px solid #2684FF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================================== */
/* ===== [BARU] GAYA UNTUK MODAL IZIN POP-UP ===== */
/* ========================================================== */
#modal-izin-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.6); 
    display: none; 
    justify-content: center; 
    align-items: center; 
    z-index: 2000; 
    padding: 15px; 
}
#modal-izin-custom { 
    background-color: #fff; 
    border-radius: 8px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.3); 
    width: 100%; 
    max-width: 400px; 
    overflow: hidden; 
    animation: modalFadeIn 0.3s ease-out; 
}
#modal-izin-header { 
    padding: 20px; 
    background-color: #2684FF; 
    color: #fff; 
}
#modal-izin-header h3 { 
    margin: 0; 
    font-size: 1.4em; 
}
#modal-izin-body { 
    padding: 25px; 
}
#modal-izin-body p { 
    margin: 0; 
    color: #333; 
    font-size: 1.05em; 
    line-height: 1.5; 
}
#modal-izin-footer { 
    display: flex; 
    padding: 0 25px 25px 25px; 
    justify-content: center; /* Pusatkan tombol */
}
#modal-izin-ok { 
    width: 100%; /* Tombol lebar penuh */
}
/* ========================================================== */
/* ===== AKHIR [BARU] GAYA MODAL IZIN POP-UP ===== */
/* ========================================================== */


/* --- RESPONSIVE STYLING --- */
@media (max-width: 768px) {
    header { flex-direction: column; padding: 20px; gap: 15px; }
    .header-logo { flex-direction: column; text-align: center; gap: 10px; }
    .header-logo img { margin-right: 0; }
    .header-logo h1 { font-size: 1.4em; }
    .header-datetime { text-align: center; font-size: 0.9em; }
    main { padding: 20px; }
    .form-container, .table-container { padding: 20px; }
    .main-title { font-size: 1.3em; line-height: 1.4; }
    .features { grid-template-columns: 1fr; gap: 20px; }
    .feature-card { padding: 20px; }
    .feature-card h3 { font-size: 1.15em; }
    #petugas-bertugas-container span { display: block; margin: 8px 0; }
    th, td { padding: 10px; font-size: 0.9em; }
    .filter-cetak-container { grid-template-columns: 1fr; }
    .filter-cetak-container .btn { width: 100%; }
    .tombol-bantuan-wa span { display: none; }
    
    table thead { display: none; }
    table tr { display: block; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 5px; }
    table td { display: block; text-align: right; padding-left: 50%; position: relative; border-bottom: 1px solid #eee; }
    table td:last-child { border-bottom: none; }
    table td:before { content: attr(data-label); position: absolute; left: 10px; width: 45%; padding-right: 10px; font-weight: bold; text-align: left; }
}