/* =========================================================
   LIGHT FUTURISTIC CYBER OPS (SAAS STYLE) v2
   ========================================================= */

body {
	background-color: #f8fafc;
}

/* --- GLASS & CLEAN CARDS --- */
.bento-card-light {
	background: #ffffff;
	border-radius: 16px;
	padding: 24px;
	border: 1px solid rgba(226, 232, 240, 0.8);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* Shadow lebih halus */
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	/* Dihapus: height: 100%; agar elemen bisa fleksibel mengikuti isi */
}

.bento-card-light:hover {
	box-shadow: 0 10px 25px rgba(37, 99, 235, 0.08);
	transform: translateY(-2px);
	border-color: rgba(37, 99, 235, 0.2);
}

.card-accent-green {
	border-top: 4px solid #10b981;
}
.card-accent-blue {
	border-top: 4px solid #3b82f6;
}
.card-accent-yellow {
	border-top: 4px solid #f59e0b;
}
.card-accent-red {
	border-top: 4px solid #ef4444;
}

/* --- TYPOGRAPHY --- */
.stat-title {
	font-size: 0.75rem;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	margin-bottom: 8px;
}

.stat-value-large {
	font-size: 2.2rem;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.1;
	font-family: "Space Mono", "Inter", monospace;
}

/* --- BUTTONS & TABS --- */
.btn-modern-outline {
	background: #ffffff;
	border: 1px solid #cbd5e1;
	color: #334155;
	font-weight: 600;
	border-radius: 10px;
	transition: 0.2s;
}
.btn-modern-outline:hover {
	background: #f1f5f9;
	color: #0f172a;
	border-color: #94a3b8;
}

.modern-tabs {
	border-bottom: 1px solid #e2e8f0;
	margin-bottom: 20px;
}
.modern-tabs .nav-link {
	color: #64748b;
	font-weight: 600;
	border: none;
	background: transparent;
	padding: 10px 20px;
	transition: 0.3s;
}
.modern-tabs .nav-link:hover {
	color: #2563eb;
}
.modern-tabs .nav-link.active {
	color: #2563eb;
	border-bottom: 2px solid #2563eb;
	background: rgba(37, 99, 235, 0.05);
	border-radius: 8px 8px 0 0;
}

/* --- VISUAL SCANNER & TERMINAL --- */
.light-scanner-box {
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	height: 100%;
	min-height: 400px; /* Disesuaikan dengan tinggi chart */
}
.light-scanner-img {
	width: 100%;
	opacity: 0.9;
	transition: transform 5s ease-in-out;
}
.light-scanner-box:hover .light-scanner-img {
	transform: translateY(-200px);
}

.light-laser {
	position: absolute;
	width: 100%;
	height: 2px;
	top: 0;
	z-index: 10;
	background: #3b82f6;
	box-shadow: 0 0 10px #3b82f6;
	animation: lightScan 3s infinite linear;
}
@keyframes lightScan {
	0% {
		top: 0;
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		top: 100%;
		opacity: 0;
	}
}

.dark-terminal-inside-light {
	background: #0f172a;
	border-radius: 12px;
	padding: 20px;
	font-family: "Space Mono", monospace;
	font-size: 0.8rem;
	color: #cbd5e1;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
	height: 100%;
	min-height: 400px;
	overflow-y: auto;
}
.dark-terminal-inside-light::-webkit-scrollbar {
	width: 6px;
}
.dark-terminal-inside-light::-webkit-scrollbar-thumb {
	background: #475569;
	border-radius: 4px;
}
.log-row {
	display: flex;
	gap: 15px;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
	padding: 8px 0;
}

/* --- LISTS --- */
.clean-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #f1f5f9;
}
.clean-list-item:last-child {
	border-bottom: none;
}

/* Custom Scrollbar untuk Box Port */
.custom-scroll::-webkit-scrollbar {
	width: 5px;
}
.custom-scroll::-webkit-scrollbar-track {
	background: #f1f5f9;
	border-radius: 5px;
}
.custom-scroll::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 5px;
}

/* sidebar
/* =========================================================
   PERBAIKAN KETERBACAAN SIDEBAR (HIGH CONTRAST)
   ========================================================= */

/* 1. Induk Menu / Kategori (Contoh: MENU UTAMA, MANAJEMEN DATA) */
/* Sesuaikan class .menu-title atau .sidebar-heading dengan yang ada di file sidebar.php Anda */
.sidebar .menu-title,
.sidebar .sidebar-heading,
.sidebar-category {
	color: #94a3b8 !important; /* Abu-abu terang agar kontras dengan background gelap */
	font-size: 0.75rem !important; /* Sedikit dikecilkan agar proporsional */
	font-weight: 800 !important; /* Ditebalkan maksimal */
	letter-spacing: 1.5px !important; /* Diberi jarak agar mudah dieja */
	text-transform: uppercase !important;
	margin-bottom: 15px !important;
	margin-top: 25px !important;
	opacity: 1 !important; /* Hilangkan efek transparan jika sebelumnya ada */
}

/* 2. Menu Item Biasa (Contoh: Dashboard, Peta Sebaran) */
.sidebar a.nav-link,
.sidebar .menu-link {
	color: #f1f5f9 !important; /* Putih terang sedikit kebiruan */
	font-weight: 500 !important;
	font-size: 0.95rem !important;
	letter-spacing: 0.3px !important;
	padding: 12px 20px !important; /* Perlebar area klik */
	transition: all 0.3s ease !important;
}

/* 3. Icon di dalam Menu */
.sidebar a.nav-link i,
.sidebar .menu-link i {
	color: #cbd5e1 !important; /* Ikon sedikit lebih redup dari teks agar teks lebih menonjol */
	font-size: 1.1rem !important;
}

/* 4. Efek Hover & Menu Aktif */
.sidebar a.nav-link:hover,
.sidebar .menu-link:hover,
.sidebar a.nav-link.active,
.sidebar .menu-link.active {
	color: #ffffff !important;
	font-weight: 700 !important;
	background-color: rgba(
		255,
		255,
		255,
		0.1
	) !important; /* Sorotan latar belakang tipis */
	border-radius: 8px !important;
}

/* Memastikan ikon ikut menyala saat menu aktif/di-hover */
.sidebar a.nav-link:hover i,
.sidebar a.nav-link.active i {
	color: #00f2ff !important; /* Warna neon cyan khas tema cyber Anda */
}

/* Mencerahkan tulisan Induk Menu (MENU UTAMA, MANAJEMEN DATA, dll) di Sidebar */
.sidebar .text-muted,
.sidebar .menu-header,
.sidebar .sidebar-heading,
.sidebar .nav-header {
	color: #cbd5e1 !important; /* Abu-abu keputihan yang jauh lebih terang */
	font-weight: 700 !important; /* Ditebalkan */
	letter-spacing: 1.2px !important; /* Diberi jarak agar tidak berdempetan */
	opacity: 1 !important; /* Mematikan efek transparan bawaan template */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; /* Sedikit bayangan agar terpisah dari background */
}

/* =======================================
   UI ENHANCEMENT: HOVER KARTU
   ======================================= */
.bento-card-light {
	/* Transisi super halus */
	transition:
		transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
		box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.bento-card-light:hover {
	/* Mengangkat kartu ke atas 4 pixel */
	transform: translateY(-4px) !important;
	/* Memberikan bayangan lembut di bawahnya */
	box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.15) !important;
	border-color: #cbd5e1 !important;
}
/* =======================================
   UI ENHANCEMENT: PULSE INDICATOR
   ======================================= */
.pulse-green {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #10b981; /* Hijau terang */
	box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
	animation: pulse-animation 2s infinite;
}

/* Animasi memancar lalu menghilang */
@keyframes pulse-animation {
	0% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
	}
}
/* ==========================================================================
   PUBLIC LEADERBOARD COMPONENT (CYBER PREMIUM LOOK)
   ========================================================================== */

.tracking-tight {
	letter-spacing: -1px;
}
.fw-extrabold {
	font-weight: 800 !important;
}

.cyber-badge-top {
	display: inline-block;
	background: #002244;
	color: #00f2ff;
	font-size: 11px;
	font-weight: 800;
	padding: 4px 14px;
	border-radius: 30px;
	letter-spacing: 1.5px;
	box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
}

.cyber-line-decoration {
	width: 60px;
	height: 4px;
	background: linear-gradient(90deg, #00f2ff, #0055ff);
	border-radius: 10px;
	margin-top: 15px;
}

/* PODIUM CARD SYSTEM */
.podium-wrapper {
	margin-top: 40px;
}
.podium-card {
	background: #ffffff;
	border-radius: 20px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
	position: relative;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.podium-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 35px rgba(0, 0, 0, 0.08);
}
.podium-rank-badge {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #475569;
	color: #fff;
	font-weight: 800;
	line-height: 36px;
	font-size: 16px;
	border: 3px solid #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* COLOR PODIUM SCHEMES */
.gold-zone {
	border: 2px solid #fcd34d !important;
	background: linear-gradient(180deg, #fffdf5 0%, #ffffff 100%);
}
.gold-zone .podium-rank-badge {
	background: #fbbf24;
	font-size: 14px;
}
.silver-zone {
	border-bottom: 5px solid #cbd5e1;
}
.bronze-zone {
	border-bottom: 5px solid #cd7f32;
}

/* REVOLVING SCORE CIRCLES */
.score-circle {
	width: 75px;
	height: 75px;
	border-radius: 50%;
	background: #f8fafc;
	border: 4px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.score-circle.large {
	width: 90px;
	height: 90px;
	border: 5px solid #fbbf24;
	background: #fff;
}
.score-num {
	font-weight: 800;
	font-size: 22px;
	color: #1e293b;
}
.score-circle.large .score-num {
	font-size: 28px;
}
.score-max {
	font-size: 11px;
	color: #64748b;
	font-weight: 600;
}

/* SEARCH INPUT CONTAINER */
.search-box-container {
	border: 1px solid #e2e8f0;
	background: #fff;
	transition: all 0.3s;
}
.search-box-container:focus-within {
	border-color: #0055ff;
	box-shadow: 0 0 15px rgba(0, 85, 255, 0.1) !important;
}
.focus-none:focus {
	box-shadow: none !important;
}

/* LEADERBOARD TABLE STRUCTURE */
.leaderboard-table-card {
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid #e2e8f0;
}
#leaderboardTable thead {
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}
#leaderboardTable tbody tr {
	border-bottom: 1px solid #f1f5f9;
	transition: all 0.2s ease;
}
#leaderboardTable tbody tr:hover {
	background-color: #fcfdfe;
}
#leaderboardTable tbody tr:last-child {
	border-bottom: none;
}

.rank-number-col {
	font-family: "Space Mono", monospace;
}

/* PROGRESS BAR STYLING */
.progress-bar-container {
	width: 120px;
	height: 6px;
	background: #edf2f7;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}
.progress-bar-fill {
	height: 100%;
	border-radius: 10px;
	transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* GLOWING ANIMATION EFFECT */
@keyframes softGlow {
	0% {
		filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.3));
	}
	50% {
		filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.7));
	}
	100% {
		filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.3));
	}
}
.animated-glow {
	animation: softGlow 2.5s infinite ease-in-out;
}
/* ==========================================================================
   LEADERBOARD COLLAPSIBLE ROW EFFECT
   ========================================================================== */

/* Menghilangkan border default bawaan bootstrap pada baris detail */
.collapse-detail-row td {
	border: none !important;
}

/* Transisi halus latar belakang saat hover baris yang bisa diklik */
.leaderboard-row {
	transition: background-color 0.2s ease;
}

/* Beri sedikit warna sorot saat baris diklik/aktif */
.leaderboard-row[aria-expanded="true"] {
	background-color: #f1f5f9 !important;
}

/* Efek animasi rotasi ikon panah kecil jika Anda menambahkannya */
.leaderboard-row[aria-expanded="true"] .fa-chevron-down {
	transform: rotate(180deg);
	transition: transform 0.2s ease;
}
/* ==========================================================================
   INTERACTIVE CYBER TRAY SYSTEM FOR TOP 3
   ========================================================================== */

/* Membuat kursor berubah jadi tangan penunjuk saat hover di area podium */
.podium-card[data-bs-toggle="collapse"] {
	cursor: pointer !important;
}

/* Mengubah efek klik aktif pada podium card */
.podium-card[aria-expanded="true"] {
	transform: translateY(-5px) scale(1.02);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Penanda glow tipis pada podium card yang sedang aktif dibuka */
.gold-zone[aria-expanded="true"] {
	border-color: #fbbf24 !important;
	background: #fffdf5 !important;
}
.silver-zone[aria-expanded="true"] {
	border-color: #94a3b8 !important;
	background: #f8fafc !important;
}
.bronze-zone[aria-expanded="true"] {
	border-color: #cd7f32 !important;
	background: #fffaf5 !important;
}

/* PANEL CYBER TRAY */
.cyber-tray-glow {
	border: 1px solid #e2e8f0;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	animation: slideTrayDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Bingkai warna aura piala untuk masing-masing tray */
.gold-tray-border {
	border-left: 5px solid #fbbf24;
	box-shadow: 0 10px 30px rgba(251, 191, 36, 0.05) !important;
}
.silver-tray-border {
	border-left: 5px solid #94a3b8;
	box-shadow: 0 10px 30px rgba(148, 163, 184, 0.05) !important;
}
.bronze-tray-border {
	border-left: 5px solid #cd7f32;
	box-shadow: 0 10px 30px rgba(205, 127, 50, 0.05) !important;
}

.style-tray-item {
	transition: all 0.2s ease;
}
.style-tray-item:hover {
	background-color: #ffffff !important;
	border-color: #cbd5e1 !important;
	transform: translateX(3px);
}

/* Efek animasi meluncur turun yang smooth */
@keyframes slideTrayDown {
	from {
		opacity: 0;
		transform: translateY(-15px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}