/* ============================================================
   CUSTOM-DASHBOARD.CSS
   Override tampilan SB Admin 2 agar lebih kontras & mudah dibaca
   Sidebar & topbar memakai navy gelap senada
   Load file ini SETELAH css/sb-admin-2.min.css
   ============================================================ */

/* ---------- 1. TOPBAR: dari putih polos -> navy gelap kontras ---------- */
.topbar.navbar-light {
    background: linear-gradient(90deg, #10233f 0%, #16305a 100%) !important;
    border-bottom: 3px solid #f4b400; /* aksen kuning/emas seperti referensi */
}

.topbar.navbar-light .navbar-search input.form-control {
    background-color: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border: none;
}
.topbar.navbar-light .navbar-search input.form-control::placeholder {
    color: rgba(255,255,255,0.65);
}
.topbar .btn-link i,
#sidebarToggleTop i {
    color: #ffffff !important;
}

/* Judul dashboard di bawah topbar, dibuat sebagai "header band" gelap
   agar mirip referensi (opsional, cukup tambahkan class 'dashboard-header'
   pada div pembungkus judul "Dashboard" di index.php) */
.dashboard-header {
    background: linear-gradient(90deg, #10233f 0%, #16305a 100%);
    color: #ffffff;
    padding: 18px 24px;
    border-radius: 10px;
    border-bottom: 4px solid #f4b400;
}
.dashboard-header h1,
.dashboard-header p {
    color: #ffffff !important;
}
.dashboard-header p {
    color: #b9c6dd !important;
}

/* ---------- 2. SIDEBAR: navy gelap senada dengan topbar ---------- */
#accordionSidebar.bg-gradient-primary {
    background: linear-gradient(180deg, #10233f 0%, #16305a 100%) !important;
}

.sidebar .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
}
.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item.active .nav-link {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
}
.sidebar .sidebar-brand-text {
    font-weight: 800;
    letter-spacing: 1px;
}
.sidebar-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* ---------- 3. CARD UMUM: shadow lebih jelas, sudut lebih halus ---------- */
.card {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(16, 35, 63, 0.08) !important;
}
.card-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #eef1f6 !important;
    border-radius: 14px 14px 0 0 !important;
}
.card-header h6.text-primary {
    color: #16305a !important;
    font-weight: 800;
    letter-spacing: .5px;
}

/* Kartu statistik kecil (border-left-*) dibuat lebih kontras */
.card.border-left-primary { border-left: 5px solid #2f6fed !important; }
.card.border-left-info    { border-left: 5px solid #17b6c9 !important; }
.card.border-left-success { border-left: 5px solid #1fae63 !important; }
.card.border-left-warning { border-left: 5px solid #f4b400 !important; }

/* Shadow lebih tegas khusus kartu statistik, supaya lebih menonjol
   dibanding shadow tipis pada .card umum di atas */
.card.border-left-primary,
.card.border-left-info,
.card.border-left-success,
.card.border-left-warning {
    box-shadow: 0 12px 26px rgba(16, 35, 63, 0.16) !important;
    transition: box-shadow .2s ease, transform .2s ease;
}
.card.border-left-primary:hover,
.card.border-left-info:hover,
.card.border-left-success:hover,
.card.border-left-warning:hover {
    box-shadow: 0 14px 32px rgba(16, 35, 63, 0.22) !important;
    transform: translateY(-2px);
}

.text-gray-800 { color: #16223b !important; font-weight: 800 !important; }
.text-gray-600, .text-gray-500 { color: #10233f !important; }
.text-xs.font-weight-bold.text-uppercase {
    letter-spacing: .6px;
    font-size: .72rem;
}

/* ---------- 4. BLOK DEMOGRAFI (Penyuluh / Anggota) ---------- */
/* Ikon lingkaran atas kiri */
.rounded-circle.bg-primary { background-color: #2f6fed !important; }
.rounded-circle.bg-success { background-color: #1fae63 !important; }

/* Kotak Pria / Wanita — perkuat kontras teks di dalamnya */
.p-3.rounded.text-center { border-radius: 10px !important; }
.p-3.rounded.text-center .h4 { color: #16223b !important; font-weight: 800; }

/* Progress bar usia: warna lebih jelas + teks putih tebal */
.progress {
    border-radius: 8px !important;
    overflow: hidden;
    background-color: #eef1f6 !important;
}
.progress-bar {
    font-weight: 700;
    font-size: .8rem;
}
.progress-bar.bg-info      { background-color: #2f9fed !important; }
.progress-bar.bg-success   { background-color: #1fae63 !important; }
.progress-bar.bg-secondary { background-color: #4b5a72 !important; }
.progress-bar.bg-primary   { background-color: #2f6fed !important; }
.progress-bar.bg-warning   { background-color: #f4b400 !important; color:#16223b; }
.progress-bar.bg-danger    { background-color: #e0455a !important; }
.progress-bar.bg-dark      { background-color: #16223b !important; }

/* ---------- 5. KLASIFIKASI KELOMPOK: ubah jadi mini-card individual ---------- */
/* Bungkus tiap angka jenis kelompok agar tampil seperti kartu terpisah */
.card-body .row > .col-xl-3.col-md-4.col-6.text-center {
    background: #f7f9fc;
    border-radius: 12px;
    padding: 18px 8px;
    margin: 0 6px 12px 6px;
    box-shadow: 0 2px 8px rgba(16,35,63,0.05);
}
.card-body .row > .col-xl-3.col-md-4.col-6.text-center .h4 {
    color: #16305a !important;
    font-weight: 800;
}

/* ---------- 6. PROSES VERIFIKASI: badge status berwarna (pill) ---------- */
.text-success.text-uppercase,
.text-warning.text-uppercase,
.text-secondary.text-uppercase {
    font-weight: 700;
}
/* Angka status verifikasi dibuat seperti pill/badge */
.col-md-4.mb-2 .h4 {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 800;
}
.col-md-4.mb-2:nth-child(1) .h4 { background:#e5f7ec; color:#1fae63; } /* Valid */
.col-md-4.mb-2:nth-child(2) .h4 { background:#fdf3d9; color:#c98a00; } /* Proses */
.col-md-4.mb-2:nth-child(3) .h4 { background:#eef1f6; color:#4b5a72; } /* Belum Lengkap */


/* Total Penadpatan Kotor */
.col-md-6 .mb-4 .h1 {
    background: #e5f7ec; color:#c9008d ;
}

/* ---------- 7. TABEL SILANG / ANALISIS ---------- */
.table thead.thead-light th {
    background-color: #16305a !important;
    color: #ffffff !important;
    border-color: #16305a !important;
    font-weight: 800;
}
.table-bordered td, .table-bordered th {
    border-color: #eef1f6 !important;
}

/* Teks isi tabel dibuat hitam. Badge di kolom "Jenis Air" & "Kategori"
   (Rincian Pendapatan per Komoditas) tidak terpengaruh karena warnanya
   diatur langsung pada elemen <span class="badge ..."> itu sendiri,
   bukan diwariskan dari warna sel <td>. */
.table td {
    color: #16223b !important;
}

/* ---------- 8. FOOTER ---------- */
.sticky-footer {
    background-color: #f7f9fc !important;
    border-top: 1px solid #eef1f6;
}
.sticky-footer .copyright span {
    color: #5a6c85;
    font-weight: 800;
}
/* ---------- 9. LABEL FILTER: jadi navy ---------- */
.card-body form label,
.card-body .form-group label {
    color: #16305a !important;
    font-weight: 700;
}

/* ---------- 10. TEKS LEGEND KLASIFIKASI USIA: jadi navy ---------- */
/* Biasanya berupa <small> atau <span> di bawah progress bar bertingkat */
.progress + div,
.progress ~ .d-flex span,
.progress ~ .row small,
.progress ~ .row .text-xs {
    color: #16305a !important;
    font-weight: 600;
}
/* ---------- 11. TEKS DI DALAM DROPDOWN FILTER ---------- */
.card-body form select.form-control {
    color: #16305a !important;
    font-weight: 600;
}
/* ---------- 12. KLASIFIKASI PENDIDIKAN & JABATAN: label + angka ---------- */
.card-body .row.text-center.small,
.card-body .row.text-center.small .text-gray-800,
.card-body .row.no-gutters .text-gray-800,
.card-body a,
.card-body a:hover {
    color: #16305a !important;
}
/* ---------- 13. FIX WARNA LINK DI KLASIFIKASI PENDIDIKAN & JABATAN ---------- */
.card-body a {
    color: #16305a !important;
}
.card-body a:hover {
    color: #0d1b30 !important;
}