/* =========================================
   STYLING DROPDOWN NAVIGATION
========================================= */
/* JEMBATAN TRANSPARAN UNTUK MENJAGA HOVER DROPDOWN */
/* Class baru untuk memunculkan menu via Klik/Tap (Mobile Friendly) */
.show-dropdown {
    display: block !important;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    color: #f97316;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.dropbtn:hover {
    color: #ea580c;
}

/* =========================================
   STYLING DROPDOWN NAVIGATION (TEMA TERANG ELEGAN)
========================================= */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f8fafc; /* Berubah dari putih murni menjadi abu-abu terang elegan */
    min-width: 160px;
    width: max-content;
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0px 8px 24px 0px rgba(15, 23, 42, 0.08);
    z-index: 2000;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    margin-top: 5px;
}

.dropdown-content a {
    color: #007bff; /* Diubah menjadi biru agar seragam dengan menu lain */
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    transition: 0.2s;
    text-align: left;
}

/* Efek Hover Premium Abu-Abu Lembut */
.dropdown-content a:hover {
    background-color: #e2e8f0; /* Abu-abu yang sedikit lebih tegas saat kursor diarahkan */
    color: #ea580c !important; /* Warna oranye club yang lebih gelap agar serasi */
}

/* Menu Dropdown yang Terkunci / Disabled */
.dropdown-content a.disabled {
    background-color: #f8fafc !important;
    color: #cbd5e1 !important;
    cursor: not-allowed !important;
}

/* =========================================
   KOTAK PILIHAN NAMA SISWA / SELECTION BOX
========================================= */
select, .student-select, #studentSelect {
    background-color: #f8fafc !important; /* Background abu-abu lembut */
    color: #0f172a !important; /* Warna teks gelap kontras */
    border: 1px solid #cbd5e1 !important; /* Garis tepi minimalis */
    border-radius: 8px;
    padding: 8px 12px;
    outline: none;
    font-family: inherit;
    transition: 0.2s;
}
select:focus, #studentSelect:focus {
    border-color: #94a3b8 !important;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}

/* Mematikan efek hover warna orange jika kursor diarahkan ke menu yang disabled */
.dropdown-content a.disabled:hover {
    background-color: #334155 !important;
    color: #94a3b8 !important;
}

/* Modal Animation */
.modal-enter { opacity: 0; transform: scale(0.95); transition: all 0.3s ease-out; }
.modal-enter-active { opacity: 1; transform: scale(1); }
.modal-exit { opacity: 1; transform: scale(1); transition: all 0.2s ease-in; }
.modal-exit-active { opacity: 0; transform: scale(0.95); }

/* 1. Ubah teks yang asalnya putih/terang menjadi abu-abu kehitaman */
body, .text-white { color: #212529 !important; }
.text-gray-300, .text-gray-400 { color: #495057 !important; }

/* 2. Pengecualian: Teks di dalam tombol warna solid harus tetap putih */
button.bg-brand-primary, button.bg-brand-primary *, 
button.bg-green-600, button.bg-green-600 *, 
button.bg-yellow-600, button.bg-yellow-600 * {
    color: #ffffff !important;
}

/* 3. Ubah border & garis pemisah tabel dari gelap jadi abu-abu terang */
.border-gray-600, .border-gray-700 { border-color: #dee2e6 !important; }
.divide-gray-700 > :not([hidden]) ~ :not([hidden]) { border-color: #dee2e6 !important; }

/* 4. Ubah background header tabel dan header modal jadi abu-abu terang */
.bg-gray-800 { background-color: #e9ecef !important; }

/* 5. Perbaiki tampilan kolom input dan hilangkan dark mode kalender */
input[type="text"], input[type="date"], input[type="number"], input[type="month"] {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #ced4da !important;
    color-scheme: light !important;
}

input:focus { border-color: #007bff !important; }

input[readonly] {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
}

/* 6. Perbaiki tombol "Top Shooters" agar menyatu dengan background putih */
button.bg-brand-dark.border-gray-600 {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* 7. Cerahkan background hitam transparan saat Modal/Pop-up terbuka */
.bg-black\/80 { background-color: rgba(0, 0, 0, 0.4) !important; }
    
body {
font-family: 'Segoe UI', sans-serif;
padding: 0;
margin: 0;
background: #f8f9fa;
}

/* --- LOGIN STYLES --- */
#loginOverlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: #007bff;
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
}
.login-box {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
width: 300px;
text-align: center;
}
.login-box h3 { margin-top: 0; color: #333; }
.login-box input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.login-box button {
width: 100%;
padding: 10px;
background: #0056b3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
.login-box button:disabled { background: #ccc; cursor: not-allowed; }
.error-msg { color: red; font-size: 13px; margin-top: 10px; display: none; }

/* --- APP STYLES --- */
#appContainer { display: none; padding: 15px; } /* Hidden by default */

.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 700px; }

h2 {
text-align: center; color: #333;
display: flex; justify-content: center; align-items: center; gap: 10px;
}
input[type="text"].search-input {
width: 100%; padding: 10px; margin: 15px 0 8px;
border: 1px solid #ccc; border-radius: 6px; font-size: 14px;
box-sizing: border-box;
}

.sort-options { text-align: center; margin-bottom: 12px; }
.sort-options label { margin-right: 12px; font-size:14px; }

button.action-btn {
padding: 8px 14px; border: none; border-radius: 6px;
background-color: #007bff; color: white; cursor: pointer;
font-size: 14px; margin-top: 8px;
}
button.action-btn:hover { background-color: #0056b3; }

.table-responsive {
width: 100%; background: white; border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; border-bottom: 1px solid #ddd; text-align: left; font-size: 14px; }
th { background-color: #007bff; color: white; }
tr:hover { background-color: #f1f1f1; }
a { color: #007bff; text-decoration: none; word-break: break-all; }

.pagination {
display: flex; justify-content: center; margin-top: 15px;
flex-wrap: wrap; gap: 5px; font-size: 14px;
}
.pagination button { padding: 6px 10px; background-color: #007bff; color: white; border: none; cursor: pointer; border-radius: 4px;}
.pagination button.disabled { background-color: #ccc; cursor: not-allowed; }

#loading { text-align: center; font-style: italic; color: #555; margin: 15px 0; display: none; }
#chartContainer { margin-top: 30px; }
.chart-box {
background: white; border-radius: 8px; padding: 15px;
margin-bottom: 25px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

main { max-width: 900px; margin: auto; }

/* Settings Icon & Modal */
.gear-icon { cursor: pointer; font-size: 18px; color: #666; transition: color 0.3s; user-select: none; }
.gear-icon:hover { color: #007bff; }

.modal { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 90%; max-width: 400px; border-radius: 8px; }
.close-modal { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-modal:hover { color: black; }

@media (max-width: 768px) {
th, td { font-size: 12px; padding: 8px; }
h2 { font-size: 20px; flex-direction: column; }
input[type="text"] { font-size: 13px; }
}
/* --- AI TABLE STYLES --- */
#aiResult table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
font-size: 14px;
}
#aiResult th, #aiResult td {
border: 1px solid #ddd;
padding: 8px 12px;
text-align: left;
}
#aiResult th {
background-color: #6f42c1;
color: white;
}
#aiResult tr:nth-child(even) {
background-color: #f8f9fa;
}
#aiResult {
overflow-x: auto; 
white-space: normal; 
line-height: 1.6; 
color: #333;
}
#aiResult p { margin-top: 0; margin-bottom: 8px; }
#aiResult ul, #aiResult ol { margin-top: 0; margin-bottom: 8px; padding-left: 20px; }
#aiResult li { margin-bottom: 0; }
#aiResult h3, #aiResult h4, #aiResult h5, #aiResult strong {
color: #6f42c1; 
margin-top: 10px; 
margin-bottom: 5px;
display: block;
}

/* --- CSS MODAL FORM (LARGE) --- */
.modal-lg {
width: 95% !important;     
max-width: 1000px !important; 
height: 90%;               
margin: 2% auto !important; 
padding: 15px !important;
display: flex;
flex-direction: column;
}
#iframeTarget { display: block; }
/* --- Register Free (login page) --- */
.login-box button.btn-register { background: #fff; color: #0056b3; border: 1px solid #0056b3; }
.login-box button.btn-register:hover { background: #eef5ff; }
.login-box .forgot-link { display: inline-block; margin-top: 12px; font-size: 13px; color: #0056b3; text-decoration: none; }
.login-box .forgot-link:hover { text-decoration: underline; }
.register-overlay {
display: none; position: fixed; inset: 0; z-index: 5000;
background: rgba(0, 0, 0, 0.55); justify-content: center; align-items: center; padding: 16px;
}
.register-overlay.open { display: flex; }
.register-box {
position: relative; background: #fff; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.25);
width: 100%; max-width: 380px; max-height: 92vh; overflow-y: auto; padding: 26px; text-align: left; box-sizing: border-box;
}
.register-box h3 { margin: 0 0 4px; color: #333; text-align: center; }
.register-sub { font-size: 13px; color: #666; text-align: center; margin: 0 0 14px; }
.register-box label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-top: 10px; }
.register-box input { width: 100%; padding: 10px; margin: 5px 0 0; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 15px; }
.register-box button {
width: 100%; padding: 11px; background: #0056b3; color: #fff; border: none; border-radius: 5px;
cursor: pointer; font-size: 16px; margin-top: 16px;
}
.register-box button:disabled { background: #ccc; cursor: not-allowed; }
.register-box .register-close {
position: absolute; top: 8px; right: 10px; width: auto; margin: 0; padding: 2px 8px;
background: none; color: #888; font-size: 24px; line-height: 1;
}
.register-error { display: none; color: #dc2626; font-size: 13px; margin-top: 12px; }
.register-accounts { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.register-accounts th, .register-accounts td { border: 1px solid #e5e7eb; padding: 6px 8px; text-align: left; }
.register-accounts th { background: #f3f4f6; color: #333; position: static; }
.register-accounts td { font-family: monospace; }
.register-note { font-size: 12px; color: #92400e; background: #fef3c7; padding: 8px 10px; border-radius: 6px; margin: 12px 0 0; }
.register-captcha { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.register-captcha-q { flex: 0 0 auto; min-width: 70px; padding: 9px 12px; background: #eef2ff; border: 1px dashed #6366f1; border-radius: 5px; font-weight: 700; font-size: 17px; letter-spacing: 1px; text-align: center; color: #3730a3; user-select: none; }
.register-box .register-captcha input { flex: 1; margin: 0; text-align: center; }
.register-box .register-captcha .register-captcha-refresh { flex: 0 0 auto; width: auto; margin: 0; padding: 8px 10px; background: #f3f4f6; color: #333; font-size: 16px; }