/* =====================================================
   DARK MODE — Aplikasi Iuran SMKN 2 Buduran
   Aktif ketika <html> memiliki class "dark-mode"
   Toggle: tombol "Mode Gelap" di sidebar kiri
   Warna brand: #009B62 (hijau)
   Basis: Bootstrap 4.1.3 + template Papper
   ===================================================== */

/* ---------- Dasar ---------- */
html.dark-mode body {
    background-color: #12141c;
    color: #d7dbe6;
}
html.dark-mode a { color: #00b374; }
html.dark-mode a:hover { color: #4dd39b; }
html.dark-mode .text-muted { color: #8a90a5 !important; }
html.dark-mode hr { border-color: #2a3040; }
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html.dark-mode .card-title { color: #e8ebf4; }

/* Utility teks: "dark/black" harus jadi terang di tema gelap */
html.dark-mode .text-dark { color: #d7dbe6 !important; }
html.dark-mode .text-black { color: #e8ebf4 !important; }

/* Zebra strip kustom (tabel rekap / setoran) */
html.dark-mode .zebra-1 { background-color: #191d27; }
html.dark-mode .zebra-2 { background-color: #222837; }

/* ---------- Sidebar ---------- */
html.dark-mode .side-nav { background-color: #151820; }
html.dark-mode .side-nav .side-nav-inner .side-nav-logo {
    background-color: #151820;
    border-bottom: 1px solid #232838;
    border-right: 1px solid transparent;
}
/* Garis pembatas kanan menu (yang membentang penuh) dihilangkan di dark mode */
html.dark-mode .side-nav .side-nav-inner .side-nav-menu {
    border-right: 1px solid transparent;
}
html.dark-mode .side-nav .side-nav-menu li a { color: #aab0c4; }
html.dark-mode .side-nav .side-nav-menu li a:hover {
    color: #ffffff;
    background-color: #1e232f;
}
html.dark-mode .side-nav .side-nav-menu li.active > a,
html.dark-mode .side-nav .side-nav-menu li.open > a { color: #ffffff; }

/* ---------- Header / Top Bar ---------- */
html.dark-mode .header,
html.dark-mode .navbar {
    background-color: #1c2029;
    border-bottom: 1px solid #2a3040;
}
html.dark-mode .header .header-container .nav-left > li > a,
html.dark-mode .header .header-container .nav-right > li > a {
    color: #aab0c4;
}
html.dark-mode .header .header-container .nav-left > li > a:hover,
html.dark-mode .header .header-container .nav-left > li > a:focus,
html.dark-mode .header .header-container .nav-right > li > a:hover,
html.dark-mode .header .header-container .nav-right > li > a:focus {
    color: #ffffff;
}
html.dark-mode .header .header-container .nav-left .user-profile,
html.dark-mode .header .header-container .nav-right .user-profile {
    border-right-color: #2a3040;
}
html.dark-mode .header .search-input .form-control {
    background-color: #171a22;
    border-color: #2a3040;
    color: #d7dbe6;
}

/* ---------- Kartu / Panel ---------- */
html.dark-mode .card {
    background-color: #1c2029;
    border-color: #2a3040;
}
html.dark-mode .card-header {
    background-color: #20242f;
    border-color: #2a3040;
    color: #e8ebf4;
}
html.dark-mode .card-footer {
    background-color: #20242f;
    border-color: #2a3040;
}
html.dark-mode .card-body { color: #d7dbe6; }

/* ---------- Tabel ---------- */
html.dark-mode .table { color: #d7dbe6; }
html.dark-mode .table thead th {
    border-color: #2a3040;
    color: #aab0c4;
    background-color: #20242f;
}
html.dark-mode .table td,
html.dark-mode .table th { border-color: #2a3040; }
html.dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: #191d27; }
html.dark-mode .table-hover tbody tr:hover { background-color: #222837; }

/* ---------- DataTables ---------- */
html.dark-mode .dataTables_wrapper .dataTables_filter input,
html.dark-mode .dataTables_wrapper .dataTables_length select {
    background-color: #171a22;
    border-color: #2a3040;
    color: #d7dbe6;
}
html.dark-mode .dataTables_wrapper .dataTables_info { color: #8a90a5; }
html.dark-mode table.dataTable thead th {
    background-color: #20242f;
    color: #d7dbe6;
    border-color: #2a3040;
}
html.dark-mode table.dataTable tbody tr { background-color: #1c2029; color: #d7dbe6; }
html.dark-mode table.dataTable tbody tr:nth-child(odd) { background-color: #191d27; }
html.dark-mode table.dataTable tbody td { border-color: #2a3040; }
html.dark-mode table.dataTable.row-border tbody th,
html.dark-mode table.dataTable.row-border tbody td,
html.dark-mode table.dataTable.display tbody th,
html.dark-mode table.dataTable.display tbody td { border-color: #2a3040; }
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #aab0c4 !important;
    background: #20242f !important;
    border-color: #2a3040 !important;
}
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #ffffff !important;
    background: #2a3040 !important;
}
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #ffffff !important;
    background: #009B62 !important;
    border-color: #009B62 !important;
}

/* ---------- Formulir ---------- */
html.dark-mode .form-control {
    background-color: #171a22;
    border-color: #2a3040;
    color: #d7dbe6;
}
html.dark-mode .form-control:focus {
    background-color: #171a22;
    border-color: #009B62;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(0, 155, 98, 0.25);
}
html.dark-mode select.form-control option { background-color: #1c2029; color: #d7dbe6; }
html.dark-mode .form-control::placeholder { color: #6b7286; }
html.dark-mode .input-group-text {
    background-color: #20242f;
    border-color: #2a3040;
    color: #aab0c4;
}
html.dark-mode label { color: #c8cddc; }
html.dark-mode .custom-select {
    background-color: #171a22;
    border-color: #2a3040;
    color: #d7dbe6;
}

/* ---------- Tombol ---------- */
html.dark-mode .btn-light {
    background-color: #2a3040;
    border-color: #2a3040;
    color: #d7dbe6;
}
html.dark-mode .btn-light:hover {
    background-color: #343b50;
    border-color: #343b50;
    color: #ffffff;
}
html.dark-mode .btn-outline-light {
    border-color: #3a4157;
    color: #c8cddc;
}
html.dark-mode .btn-outline-light:hover {
    background-color: #3a4157;
    color: #ffffff;
}
html.dark-mode .btn-secondary {
    background-color: #2a3040;
    border-color: #2a3040;
    color: #d7dbe6;
}
html.dark-mode .btn-secondary:hover {
    background-color: #343b50;
    border-color: #343b50;
    color: #ffffff;
}
html.dark-mode .btn-primary,
html.dark-mode .btn-success { color: #ffffff !important; }

/* Tombol default (edit/delete di halaman format dll) */
html.dark-mode .btn-default {
    color: #d7dbe6;
    background-color: #2a3040;
    border-color: #3a4157;
}
html.dark-mode .btn-default:hover,
html.dark-mode .btn-default:focus,
html.dark-mode .btn-default:active {
    color: #ffffff;
    background-color: #343b50;
    border-color: #343b50;
}

/* Tombol flat (ikon transparan) */
html.dark-mode .btn-flat { color: #aab0c4; }
html.dark-mode .btn-flat:hover,
html.dark-mode .btn-flat:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* Outline secondary diterangkan supaya terbaca */
html.dark-mode .btn-outline-secondary {
    border-color: #3a4157;
    color: #aab0c4;
}
html.dark-mode .btn-outline-secondary:hover {
    background-color: #2a3040;
    border-color: #2a3040;
    color: #ffffff;
}

/* ---------- Modal ---------- */
html.dark-mode .modal-content {
    background-color: #1c2029;
    border: 1px solid #2a3040;
}
html.dark-mode .modal-header { border-bottom: 1px solid #2a3040; }
html.dark-mode .modal-footer { border-top: 1px solid #2a3040; }
html.dark-mode .modal-header .close { color: #ffffff; text-shadow: none; opacity: .8; }
html.dark-mode .modal-header .close:hover { opacity: 1; }
html.dark-mode .modal-title { color: #e8ebf4; }
html.dark-mode .modal-body { color: #d7dbe6; }

/* ---------- Dropdown ---------- */
html.dark-mode .dropdown-menu {
    background-color: #1c2029;
    border-color: #2a3040;
}
html.dark-mode .dropdown-item { color: #d7dbe6; }
html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
    background-color: #20242f;
    color: #ffffff;
}
html.dark-mode .dropdown-divider { border-color: #2a3040; }

/* ---------- Tab ---------- */
html.dark-mode .nav-tabs { border-bottom: 1px solid #2a3040; }
html.dark-mode .nav-tabs .nav-link { color: #aab0c4; }
html.dark-mode .nav-tabs .nav-link:hover { border-color: #2a3040; }
html.dark-mode .nav-tabs .nav-link.active {
    background-color: #1c2029;
    border-color: #2a3040;
    border-bottom-color: #1c2029;
    color: #ffffff;
}

/* ---------- Alert & Badge ---------- */
html.dark-mode .alert {
    background-color: #20242f;
    border-color: #2a3040;
    color: #d7dbe6;
}
html.dark-mode .badge-light {
    background-color: #2a3040;
    color: #d7dbe6;
}
html.dark-mode .badge-secondary {
    background-color: #343b50;
    color: #e8ebf4;
}

/* ---------- Pagination ---------- */
html.dark-mode .page-item .page-link {
    background-color: #1c2029;
    border-color: #2a3040;
    color: #aab0c4;
}
html.dark-mode .page-item .page-link:hover {
    background-color: #20242f;
    color: #ffffff;
}
html.dark-mode .page-item.active .page-link {
    background-color: #009B62;
    border-color: #009B62;
    color: #ffffff;
}

/* ---------- SweetAlert ---------- */
html.dark-mode .sweet-alert { background-color: #1c2029; }
html.dark-mode .sweet-alert h2 { color: #e8ebf4; }
html.dark-mode .sweet-alert p { color: #aab0c4; }
html.dark-mode .sweet-alert .sa-button-container .cancel {
    background-color: #2a3040 !important;
    color: #d7dbe6 !important;
}

/* ---------- Animasi centang sukses SweetAlert (hapus/delete dkk) ---------- */
html.dark-mode .sweet-alert .sa-icon.sa-success .sa-line {
    background-color: #009B62;
}
html.dark-mode .sweet-alert .sa-icon.sa-success .sa-placeholder {
    border-color: #2a3040;
}
html.dark-mode .sweet-alert .sa-icon.sa-success .sa-fix {
    background-color: #1c2029; /* bagian putih yang menyala di dark mode */
}

/* ---------- Radio custom (halaman Penyetoran Pembayaran) ---------- */
html.dark-mode .my-radio-primary {
    background-color: #2a3040;
}
html.dark-mode .my-radio-primary:hover {
    background-color: #333b4f;
}
html.dark-mode .my-radio-primary:checked {
    background-color: #009B62; /* brand hijau dipertahankan */
}
html.dark-mode .my-label {
    background-color: #222837;
    color: #d7dbe6;
}

/* ---------- Checkbox custom (centang rincian personal dll) ---------- */
html.dark-mode .checkbox input[type="checkbox"] + label:before {
    border-color: #2a3040;
    background-color: #1c2029;
}
html.dark-mode .checkbox input[type="checkbox"]:checked + label:before {
    color: #009B62;
}

/* ---------- Datepicker ---------- */
html.dark-mode .datepicker {
    background-color: #1c2029;
    border-color: #2a3040;
}
html.dark-mode .datepicker table tr td,
html.dark-mode .datepicker table tr th { color: #d7dbe6; }
html.dark-mode .datepicker table tr td.day:hover { background-color: #2a3040; }
html.dark-mode .datepicker table tr td.active.active {
    background-color: #009B62 !important;
}

/* ---------- Lain-lain ---------- */
html.dark-mode .bg-white { background-color: #1c2029 !important; }
html.dark-mode .bg-light { background-color: #20242f !important; }
html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-left,
html.dark-mode .border-right { border-color: #2a3040 !important; }
html.dark-mode .list-group-item {
    background-color: #1c2029;
    border-color: #2a3040;
    color: #d7dbe6;
}
html.dark-mode .progress { background-color: #20242f; }
html.dark-mode .panel { background-color: #1c2029; border-color: #2a3040; }
html.dark-mode ::-webkit-scrollbar-thumb { background-color: #343b50; }

/* =====================================================
   TRANSISI CEPAT SAAT TOGGLE TEMA (terang <-> gelap)
   Semua elemen berubah bersama dalam 0.1s supaya
   perpindahan terlihat mulus, tidak patah-patah.
   ===================================================== */
/* Header & sidebar: pertahankan animasi "all" (ada animasi width saat sidebar
   di-collapse) tapi dipercepat ke 0.1s */
.header, .side-nav, .side-nav-inner {
    transition: all 0.1s ease;
}

/* Elemen warna utama: transisi cepat & seragam */
body, .navbar, .card, .card-header, .card-footer, .card-body, .modal-content,
.modal-header, .modal-footer, .dropdown-menu, .dropdown-item, .form-control,
.input-group-text, .custom-select, table.dataTable thead th, table.dataTable tbody tr,
.btn, .nav-tabs .nav-link, .page-item .page-link, .alert, .badge, .list-group-item,
.progress, .sweet-alert, .datepicker, .zebra-1, .zebra-2,
.side-nav .side-nav-menu li a,
.header .header-container .nav-left > li > a,
.header .header-container .nav-right > li > a {
    transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

/* Cetak / print tetap terang */
@media print {
    html.dark-mode body { background-color: #ffffff !important; color: #000000 !important; }
    html.dark-mode .side-nav { background-color: #ffffff !important; }
}