/* =========================================================
   Paper White Design System v2.0 — BAZNAS Sumbawa
   Referensi: desain_tabel.md + custom.css pengumpulan.baznassumbawa.id
   Diprioritaskan di atas AdminLTE + Bootstrap 4 + DataTables
   ========================================================= */

/* -----------------------------------------------------------
   0. CSS VARIABLES
   ----------------------------------------------------------- */
:root {
    --baznas-green:       #0d9f4f;
    --baznas-green-dark:  #076e34;
    --putih:              #ffffff;
    --border-utama:       #b8b8b8;
    --border-header-tabel:#b0b0b0;
    --border-luar-tabel:  #a0a0a0;
    --border-menu:        #d3d3d3;
    --border-submenu:     #e0e0e0;
    --teks-utama:         #333333;
    --teks-konten:        #444444;
    --teks-sekunder:      #666666;
    --teks-placeholder:   #999999;
    --hover-tabel:        #f0f7f3;
    --hover-menu:         #f5f5f5;
    --aktif-bg:           #e6f4ea;
    --aktif-teks:         #076e34;
    --aktif-border:       #0d9f4f;
    --focus-border:       #0d9f4f;
    --focus-glow:         rgba(13,159,79,0.15);
}

/* -----------------------------------------------------------
   1. BASE BODY
   ----------------------------------------------------------- */
body {
    font-family: "Source Sans Pro", 'Outfit', -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    background-color: #f4f6f9 !important;
    color: var(--teks-konten) !important;
}

/* Scrollbar tipis */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

/* Content wrapper: nonaktifkan animasi */
.content-wrapper { animation: none !important; }

/* -----------------------------------------------------------
   A. KARTU / CARD
   ----------------------------------------------------------- */
.card, .flat-card {
    box-shadow: none !important;
    border: 1px solid var(--border-utama) !important;
    background-color: var(--putih) !important;
    border-radius: 4px !important;
    margin-bottom: 1.5rem;
    transition: none !important;
    transform: none !important;
    animation: none !important;
}
.card:hover, .flat-card:hover {
    box-shadow: none !important;
    transform: none !important;
}
.card-header, .flat-card .card-header {
    background-color: var(--putih) !important;
    border-bottom: 1px solid var(--border-utama) !important;
    padding: .75rem 1.25rem !important;
    border-radius: 0 !important;
}
.card-title, .flat-card .card-title {
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    color: var(--teks-utama) !important;
    margin: 0;
}
.card-body, .flat-card .card-body {
    background-color: var(--putih) !important;
    padding: 1.25rem !important;
}
/* Hapus border top warna AdminLTE */
.card-primary.card-outline,
.card-success.card-outline,
.card-danger.card-outline,
.card-warning.card-outline,
.card-info.card-outline {
    border-top: 1px solid var(--border-utama) !important;
}
/* card-success.card-outline → green top indicator */
.card-success.card-outline {
    border-top: 3px solid var(--baznas-green) !important;
}

/* -----------------------------------------------------------
   B. TABEL — flat excel-style, TANPA zebra, hover hijau
   ----------------------------------------------------------- */

/* Base: border-collapse collapse wajib pada semua tabel */
.table,
.table-excel,
table.dataTable {
    border-collapse: collapse !important;
    background-color: var(--putih) !important;
    width: 100% !important;
}

/* Outer border: seragam pada semua tabel (biasa maupun DataTable) */
.table,
.table-excel,
table.dataTable {
    border: 1.5px solid var(--border-luar-tabel) !important;
}

/* Wrapper DataTables: hilangkan border luar agar tidak dobel dengan tabel di dalamnya */
.dataTables_wrapper {
    border: none !important;
    margin-bottom: 1rem !important;
}

/* Pastikan spacing tabel DataTable rapi */
table.dataTable.table {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* DataTables memakai scrolling wrapper */
.dataTables_scrollHead,
.dataTables_scrollBody {
    border: none !important;
}

/* Header tabel */
.table thead th,
.table thead td,
.table-excel thead th,
table.dataTable thead th,
table.dataTable thead td {
    background-color: var(--putih) !important;
    color: var(--teks-utama) !important;
    border: 1px solid var(--border-header-tabel) !important;
    font-weight: 600 !important;
    padding: 8px 10px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* thead-dark & thead-light → ikut Paper White */
.thead-dark th, .table .thead-dark th,
.thead-light th, .table .thead-light th {
    background-color: var(--putih) !important;
    color: var(--teks-utama) !important;
    border: 1px solid var(--border-header-tabel) !important;
}

/* Sel body: border seragam di SEMUA tabel, termasuk DataTables */
.table tbody tr td,
.table tbody tr th,
.table-excel tbody tr td,
table.dataTable tbody tr td,
table.dataTable tbody tr th,
table.table.dataTable tbody tr td {
    background-color: var(--putih) !important;
    border: 1px solid var(--border-utama) !important;
    padding: 7px 10px !important;
    color: var(--teks-konten) !important;
    vertical-align: middle !important;
}

/* Footer / summary row */
.table tfoot tr td,
.table-excel tfoot tr td,
.table .bg-gray-light td,
.table tr.font-weight-bold td,
.table tr.table-info td,
.table tr.table-secondary td {
    background-color: var(--putih) !important;
    font-weight: 600 !important;
    border-top: 1.5px solid var(--border-luar-tabel) !important;
}

/* *** ANTI-ZEBRA ***
   Mengatasi table-striped yang masih ada di HTML,
   tanpa perlu mengubah file PHP apapun. */

/* Bootstrap 4: target wildcard * agar menimpa semua elemen */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > *,
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th,
.table-striped > tbody > tr:nth-of-type(even) > td,
.table-striped > tbody > tr:nth-of-type(even) > th {
    background-color: var(--putih) !important;
    background: var(--putih) !important;
    --bs-table-striped-bg: var(--putih) !important;
    --bs-table-accent-bg: var(--putih) !important;
}

/* DataTables: kelas .odd/.even pada <tr> */
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even,
table.dataTable tbody tr.odd > *,
table.dataTable tbody tr.even > *,
table.dataTable tbody tr.odd > td,
table.dataTable tbody tr.odd > th,
table.dataTable tbody tr.even > td,
table.dataTable tbody tr.even > th,
table.dataTable.stripe tbody tr.odd > td,
table.dataTable.stripe tbody tr.even > td,
table.dataTable.display tbody tr.odd > td,
table.dataTable.display tbody tr.even > td,
table.dataTable.display tbody tr.odd > td.sorting_1,
table.dataTable.display tbody tr.even > td.sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > td.sorting_1,
table.dataTable.order-column.stripe tbody tr.even > td.sorting_1 {
    background-color: var(--putih) !important;
    background: var(--putih) !important;
}

/* Sorting column highlight — netralkan */
table.dataTable tbody td.sorting_1,
table.dataTable tbody td.sorting_2,
table.dataTable tbody td.sorting_3 {
    background-color: var(--putih) !important;
    background: var(--putih) !important;
}

/* thead-dark: paksa putih walaupun class tidak diubah di HTML */
thead.thead-dark th,
thead.thead-dark td,
.table thead.thead-dark th,
.table thead.thead-dark td {
    background-color: var(--putih) !important;
    color: var(--teks-utama) !important;
    border: 1px solid var(--border-header-tabel) !important;
    border-bottom: 2px solid var(--border-header-tabel) !important;
}

/* HOVER — satu-satunya perubahan warna baris */
.table tbody tr:hover td,
.table tbody tr:hover th,
.table-excel tbody tr:hover td,
table.dataTable tbody tr:hover td,
table.dataTable tbody tr:hover th,
table.dataTable.stripe tbody tr:hover td,
table.dataTable.display tbody tr:hover td {
    background-color: var(--hover-tabel) !important;
    background: var(--hover-tabel) !important;
    transition: background-color 0.15s ease-in-out !important;
}


/* -----------------------------------------------------------
   C. FORM INPUT
   ----------------------------------------------------------- */
.form-control,
.custom-select,
textarea.form-control {
    border: 1px solid var(--border-utama) !important;
    border-radius: 4px !important;
    background-color: var(--putih) !important;
    color: var(--teks-utama) !important;
    box-shadow: none !important;
}
.form-control:focus,
.custom-select:focus,
textarea.form-control:focus {
    border-color: var(--focus-border) !important;
    box-shadow: 0 0 0 0.15rem var(--focus-glow) !important;
    background-color: var(--putih) !important;
}
.form-control::placeholder,
.form-control::-webkit-input-placeholder {
    color: var(--teks-placeholder) !important;
    opacity: 1;
}

/* Select2 */
.select2-container--bootstrap4 .select2-selection {
    border: 1px solid var(--border-utama) !important;
    border-radius: 4px !important;
    background-color: var(--putih) !important;
    box-shadow: none !important;
}
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: var(--focus-border) !important;
    box-shadow: 0 0 0 0.15rem var(--focus-glow) !important;
}
.select2-container--bootstrap4 .select2-dropdown {
    border: 1px solid var(--border-utama) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--baznas-green) !important;
}

/* Input group */
.input-group-text {
    border: 1px solid var(--border-utama) !important;
    background-color: #f8f9fa !important;
    color: #555555 !important;
}

/* Labels */
label, .col-form-label {
    color: var(--teks-utama) !important;
    font-weight: 600 !important;
}

/* -----------------------------------------------------------
   D. MODAL
   ----------------------------------------------------------- */
.modal-content {
    background-color: var(--putih) !important;
    border: 1px solid var(--border-utama) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
.modal-header {
    background-color: var(--putih) !important;
    border-bottom: 1px solid var(--border-utama) !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 0 !important;
}
/* Override bg-primary/success/etc pada modal-header */
.modal-header.bg-primary,
.modal-header.bg-success,
.modal-header.bg-danger,
.modal-header.bg-warning,
.modal-header.bg-info {
    background-color: var(--putih) !important;
    color: var(--teks-utama) !important;
}
.modal-header .modal-title {
    font-weight: 600 !important;
    color: var(--teks-utama) !important;
}
.modal-header .close,
.modal-header .close.text-white {
    color: #666666 !important;
    opacity: 0.7 !important;
    text-shadow: none !important;
}
.modal-header .close:hover {
    color: #000000 !important;
    opacity: 1 !important;
}
.modal-body {
    background-color: var(--putih) !important;
    padding: 1.25rem !important;
    color: var(--teks-konten) !important;
}
.modal-body .form-control {
    border: 1px solid var(--border-utama) !important;
    border-radius: 4px !important;
    background-color: var(--putih) !important;
    color: var(--teks-utama) !important;
    box-shadow: none !important;
}
.modal-body .form-control:focus {
    border-color: var(--focus-border) !important;
    box-shadow: 0 0 0 0.15rem var(--focus-glow) !important;
}
.modal-body label {
    color: var(--teks-utama) !important;
    font-weight: 600 !important;
}
.modal-footer {
    background-color: var(--putih) !important;
    border-top: 1px solid var(--border-utama) !important;
    padding: 0.75rem 1.25rem !important;
}

/* -----------------------------------------------------------
   E. TOMBOL / BUTTON — Putih berbingkai, flat
   ----------------------------------------------------------- */
.btn {
    border-radius: 4px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    transition: all 0.2s ease-in-out !important;
    text-shadow: none !important;
}
.btn:hover, .btn:focus, .btn:active {
    box-shadow: none !important;
    transform: none !important;
    text-shadow: none !important;
}

/* btn-group radius fix */
.btn-group .btn { border-radius: 0 !important; }
.btn-group .btn:first-child {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}
.btn-group .btn:last-child {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

/* Success + Primary → hijau brand */
.btn-success, .btn-primary,
.btn-outline-success, .btn-outline-primary {
    background-color: var(--putih) !important;
    border: 1px solid var(--aktif-border) !important;
    color: var(--baznas-green-dark) !important;
}
.btn-success:hover, .btn-primary:hover,
.btn-outline-success:hover, .btn-outline-primary:hover {
    background-color: var(--aktif-bg) !important;
    border-color: var(--baznas-green-dark) !important;
    color: #055427 !important;
}

/* Danger → merah */
.btn-danger, .btn-outline-danger {
    background-color: var(--putih) !important;
    border: 1px solid #dc3545 !important;
    color: #dc3545 !important;
}
.btn-danger:hover, .btn-outline-danger:hover {
    background-color: #fdf0f1 !important;
    border-color: #c82333 !important;
    color: #a71d2a !important;
}

/* Warning → amber */
.btn-warning, .btn-outline-warning {
    background-color: var(--putih) !important;
    border: 1px solid #d4a106 !important;
    color: #8b6914 !important;
}
.btn-warning:hover, .btn-outline-warning:hover {
    background-color: #fef9e7 !important;
    border-color: #b8920a !important;
    color: #6d5310 !important;
}

/* Info → biru */
.btn-info, .btn-outline-info {
    background-color: var(--putih) !important;
    border: 1px solid #17a2b8 !important;
    color: #117a8b !important;
}
.btn-info:hover, .btn-outline-info:hover {
    background-color: #eaf7f9 !important;
    border-color: #138496 !important;
    color: #0d6270 !important;
}

/* Secondary / Cancel → abu */
.btn-secondary {
    background-color: var(--putih) !important;
    border: 1px solid var(--border-utama) !important;
    color: #555555 !important;
}
.btn-secondary:hover {
    background-color: #f5f5f5 !important;
    border-color: #a0a0a0 !important;
    color: #333333 !important;
}

/* Default / Light */
.btn-default, .btn-light {
    background-color: var(--putih) !important;
    border: 1px solid var(--border-utama) !important;
    color: #444444 !important;
}
.btn-default:hover, .btn-light:hover {
    background-color: #f5f5f5 !important;
    border-color: #a0a0a0 !important;
    color: #333333 !important;
}

/* Outline secondary */
.btn-outline-secondary {
    background-color: var(--putih) !important;
    border: 1px solid var(--border-utama) !important;
    color: var(--teks-sekunder) !important;
}
.btn-outline-secondary:hover {
    background-color: #f5f5f5 !important;
    color: var(--teks-utama) !important;
}

/* btn-sm & btn-xs */
.btn-sm { padding: 4px 10px !important; font-size: 12px !important; }
.btn-xs { padding: 2px 8px !important; font-size: 11px !important; }

/* -----------------------------------------------------------
   F. SIDEBAR
   ----------------------------------------------------------- */
.main-sidebar {
    background-color: var(--putih) !important;
    background: var(--putih) !important;
    border-right: 1px solid var(--border-utama) !important;
    box-shadow: none !important;
}
.brand-link {
    border-bottom: 1px solid var(--border-utama) !important;
    background-color: var(--putih) !important;
}
.brand-link .brand-text {
    color: var(--teks-utama) !important;
    font-weight: 800 !important;
}
.user-panel {
    border-bottom: 1px solid var(--border-utama) !important;
    background-color: var(--putih) !important;
}
.user-panel .info a {
    color: var(--teks-utama) !important;
    font-weight: 600 !important;
}
.user-panel small,
.user-panel .info small {
    color: var(--teks-sekunder) !important;
    font-weight: 500 !important;
}

/* Item menu berbingkai */
.nav-sidebar .nav-item .nav-link {
    color: #444444 !important;
    border: 1px solid var(--border-menu) !important;
    border-radius: 4px !important;
    margin-bottom: 6px !important;
    background-color: var(--putih) !important;
    box-shadow: none !important;
}
.nav-sidebar .nav-item .nav-link i {
    color: var(--teks-sekunder) !important;
}

/* Sub-menu */
.nav-sidebar .nav-treeview .nav-item .nav-link {
    padding-left: 2rem !important;
    border-color: var(--border-submenu) !important;
}

/* Nav header */
.nav-sidebar .nav-header {
    background-color: var(--putih) !important;
    color: #777777 !important;
    font-size: 0.75rem !important;
    padding: 0.75rem 1rem 0.25rem 1rem !important;
    border-top: 1px solid #f0f0f0 !important;
    margin-top: 5px !important;
}

/* Menu aktif */
.sidebar-dark-success .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-success .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--aktif-bg) !important;
    color: var(--aktif-teks) !important;
    font-weight: 700 !important;
    border: 1px solid var(--aktif-border) !important;
    border-left: 3px solid var(--aktif-border) !important;
    box-shadow: none !important;
}
.sidebar-dark-success .nav-sidebar > .nav-item > .nav-link.active i,
.sidebar-light-success .nav-sidebar > .nav-item > .nav-link.active i {
    color: var(--aktif-teks) !important;
}

/* Hover menu */
.nav-sidebar .nav-link:hover {
    background-color: var(--hover-menu) !important;
    color: #000000 !important;
    border-color: var(--border-utama) !important;
}

/* -----------------------------------------------------------
   G. HEADER NAVBAR
   ----------------------------------------------------------- */
.main-header {
    background-color: var(--putih) !important;
    border-bottom: 1px solid var(--border-utama) !important;
    box-shadow: none !important;
}
.main-header .nav-link {
    color: #444444 !important;
}
.main-header .nav-link:hover {
    color: #000000 !important;
}

/* -----------------------------------------------------------
   H. FOOTER
   ----------------------------------------------------------- */
.main-footer {
    background-color: var(--putih) !important;
    border-top: 1px solid var(--border-utama) !important;
    color: #555555 !important;
    box-shadow: none !important;
}

/* -----------------------------------------------------------
   I. DASHBOARD — SMALL BOX
   ----------------------------------------------------------- */
.small-box {
    background-color: var(--putih) !important;
    border: 1px solid var(--border-utama) !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    transition: none !important;
    transform: none !important;
}
.small-box:hover {
    transform: none !important;
    box-shadow: none !important;
}
.small-box > .inner { padding: 20px; }
.small-box > .inner h3 {
    color: var(--teks-utama) !important;
    font-weight: 700 !important;
}
.small-box > .inner p { color: var(--teks-sekunder) !important; }
.small-box.bg-primary,
.small-box.bg-success,
.small-box.bg-info,
.small-box.bg-warning,
.small-box.bg-danger,
.small-box.bg-secondary {
    background-color: var(--putih) !important;
    color: var(--teks-konten) !important;
}
.small-box.bg-primary > .icon i  { color: rgba(13,159,79,0.15) !important; }
.small-box.bg-success > .icon i  { color: rgba(13,159,79,0.15) !important; }
.small-box.bg-info > .icon i     { color: rgba(23,162,184,0.15) !important; }
.small-box.bg-warning > .icon i  { color: rgba(255,193,7,0.20) !important; }
.small-box.bg-danger > .icon i   { color: rgba(220,53,69,0.15) !important; }
.small-box .small-box-footer {
    display: block !important;
    background-color: #f8f9fa !important;
    color: #555555 !important;
    border-top: 1px solid var(--border-utama) !important;
}
.small-box .small-box-footer:hover {
    background-color: #f0f0f0 !important;
    color: #333333 !important;
}

/* Info Box */
.info-box {
    background-color: var(--putih) !important;
    border: 1px solid var(--border-utama) !important;
    box-shadow: none !important;
    border-radius: 4px !important;
}
.info-box-icon {
    border-radius: 4px 0 0 4px !important;
    background-color: #f8f9fa !important;
    color: var(--teks-sekunder) !important;
    border-right: 1px solid var(--border-utama) !important;
}
.info-box-text { color: var(--teks-sekunder) !important; }
.info-box-number { color: var(--teks-utama) !important; }

/* -----------------------------------------------------------
   J. BADGES
   ----------------------------------------------------------- */
.badge-success {
    background-color: var(--baznas-green) !important;
}
.text-success {
    color: var(--baznas-green) !important;
}

/* -----------------------------------------------------------
   K. ALERT RINGKASAN
   ----------------------------------------------------------- */
.alert-excel {
    background-color: var(--putih) !important;
    border: 1px solid var(--border-utama) !important;
    color: var(--teks-utama) !important;
    border-left: 4px solid #007bff !important;
    box-shadow: none !important;
}

/* -----------------------------------------------------------
   L. PAGINATION (Bootstrap)
   ----------------------------------------------------------- */
.page-item.active .page-link {
    background-color: var(--baznas-green) !important;
    border-color: var(--baznas-green) !important;
}

/* -----------------------------------------------------------
   M. DATATABLES — CONTROLS & PAGINATION
   ----------------------------------------------------------- */

/* Inner area: length + filter row */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    padding: 8px 12px !important;
    background-color: var(--putih) !important;
}

/* Info & pagination row */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    padding: 8px 12px !important;
    background-color: var(--putih) !important;
    border-top: none !important;
}

/* Input & select styling */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--border-utama) !important;
    border-radius: 4px !important;
    background-color: var(--putih) !important;
    box-shadow: none !important;
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--focus-border) !important;
    box-shadow: 0 0 0 0.15rem var(--focus-glow) !important;
    outline: none;
}

/* Paginate buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 4px !important;
    border: 1px solid var(--border-menu) !important;
    background: var(--putih) !important;
    color: var(--teks-konten) !important;
    box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--aktif-bg) !important;
    border: 1px solid var(--aktif-border) !important;
    color: var(--aktif-teks) !important;
    box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f5f5f5 !important;
    border-color: var(--border-utama) !important;
    color: var(--teks-utama) !important;
}


/* -----------------------------------------------------------
   N. LEAFLET MAP
   ----------------------------------------------------------- */
.leaflet-container {
    font-family: "Source Sans Pro", sans-serif !important;
    border: 1px solid var(--border-utama) !important;
}
.leaflet-popup-content-wrapper {
    border-radius: 4px !important;
    border: 1px solid var(--border-utama) !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden;
}
.leaflet-popup-content { margin: 0 !important; }
.popup-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid var(--border-utama) !important;
    padding: 10px 16px !important;
    font-weight: 700 !important;
    color: var(--teks-utama) !important;
    font-size: 13.5px !important;
}
.popup-row {
    padding: 6px 16px !important;
    border-bottom: 1px solid #f1f1f1;
}
.popup-label {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--teks-sekunder);
}
.popup-value {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--teks-utama);
}
.legend-box {
    background-color: var(--putih) !important;
    border: 1px solid var(--border-utama) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 12px 16px !important;
}
.legend-box h4 {
    font-weight: 700;
    font-size: 12px !important;
    margin-bottom: 8px !important;
}

/* -----------------------------------------------------------
   O. PRINT STYLES
   ----------------------------------------------------------- */
@media print {
    body { background-color: #ffffff; }
    .main-sidebar,
    .main-header,
    .main-footer { display: none !important; }
    .content-wrapper {
        margin-left: 0 !important;
        padding: 2rem;
    }
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* -----------------------------------------------------------
   P. RESPONSIVE
   ----------------------------------------------------------- */
@media (max-width: 768px) {
    .card, .small-box { margin-bottom: 1rem; }
}