@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&display=swap');

/* ============================================
   PALET WARNA (ubah di sini untuk ganti tema)
   ============================================ */
:root {
    --bg-base: #0b0f1a;          /* background paling gelap */
    --bg-surface: #121829;        /* permukaan area konten */
    --accent-blue: #2f81f7;       /* biru aksen utama */
    --accent-blue-glow: rgba(47, 129, 247, 0.25);
    --text-primary: #e6edf3;
    --text-secondary: #8b97a8;
    --danger: #ff5d5d;            /* untuk anomali */
    --glass-border: rgba(255, 255, 255, 0.08);
}

/* ============================================
   DASAR & TIPOGRAFI
   ============================================ */
body {
    font-family: 'Poppins', sans-serif !important;
    background-color: var(--bg-base) !important;
    color: var(--text-primary) !important;
}

/* Paksa area konten utama jadi gelap */
.container-fluid, .container, #page-content, main {
    background-color: var(--bg-base) !important;
}

h1, h2, h3, h4 {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

.rc-slider-mark-text {
    font-family: 'Poppins', sans-serif !important;
    color: var(--text-secondary) !important;
}

/* ============================================
   GLASSMORPHISM CARDS
   ============================================ */
.card {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Efek angkat halus saat hover (micro-interaction) */
.card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 40px var(--accent-blue-glow) !important;
    border-color: rgba(47, 129, 247, 0.4) !important;
}

.card-body {
    color: var(--text-primary) !important;
}

/* Teks label di dalam card (mis. "Total Aktivitas Log") */
.card-body p, .card-body .text-muted, .text-muted {
    color: var(--text-secondary) !important;
}

/* ============================================
   ANGKA KPI — font monospace, kesan teknis
   ============================================ */
.card-body h1, .card-body h2, .card-body .display-4, .card-body .display-3 {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
    letter-spacing: -1px !important;
}

/* ============================================
   SLIDER
   ============================================ */
.rc-slider-track {
    background-color: var(--accent-blue) !important;
}
.rc-slider-handle {
    border-color: var(--accent-blue) !important;
    background-color: var(--accent-blue) !important;
    box-shadow: 0 0 8px var(--accent-blue-glow) !important;
}
.rc-slider-rail {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   TABEL (jika ada di halaman Website Aset / dll)
   ============================================ */
.dash-table-container, table {
    color: var(--text-primary) !important;
}
.dash-spreadsheet-container .dash-spreadsheet-inner td,
.dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
}

/* ============================================
   SCROLLBAR (sentuhan kecil yang bikin terlihat modern)
   ============================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
    background: rgba(47, 129, 247, 0.4);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

/* Header di dalam card (judul tiap grafik) */
.card-header {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    font-weight: 600 !important;
}

/* Label filter & teks umum */
label, .form-label {
    color: var(--text-primary) !important;
}

/* Teks jumlah hasil filter */
#filtered-count {
    color: var(--accent-blue) !important;
    font-weight: 600 !important;
}

/* Pastikan warna KPI tetap menonjol di atas gelap */
.text-primary { color: #4d94ff !important; }   /* biru lebih terang agar terbaca */
.text-danger  { color: var(--danger) !important; }
.text-warning { color: #ffc04d !important; }

body {
    background-image:
        radial-gradient(circle at 15% 20%, rgba(47, 129, 247, 0.12), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(47, 129, 247, 0.08), transparent 40%) !important;
    background-attachment: fixed !important;
}

/* Tabel gelap solid, tanpa gradasi, teks terang jelas */
.table {
    background-color: #1a2030 !important;
    color: #e6edf3 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
.table th {
    background-color: #232b3e !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.1) !important;
}
.table td {
    color: #e6edf3 !important;
    border-color: rgba(255,255,255,0.08) !important;
}
/* Matikan gradasi striped yang mengganggu — semua baris warna sama */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #1a2030 !important;
    color: #e6edf3 !important;
}