/**
 * custom.min.css
 * ─────────────────────────────────────────────────────────────────────────
 * Override kustom untuk memastikan SEMUA teks, badge, & elemen tetap
 * terbaca dengan baik pada Mode Terang maupun Mode Gelap (data-bs-theme="dark").
 *
 * Masalah yang diperbaiki:
 *  - `text-dark` → teks hitam tak terlihat di dark mode.
 *  - `bg-white` badge → tetap putih menyilaukan.
 *  - `bg-{color} bg-opacity-10` (badge/kartu) → nyaris tak terlihat di dark mode
 *    karena 10% warna di atas latar gelap jadi gelap.
 *  - `bg-dark bg-opacity-*` → tak terlihat di dark mode.
 *  - `bg-light bg-opacity-50` → putih pucat di dark mode.
 *
 * Semua override memakai CSS variable Velzon supaya otomatis menyesuaikan tema.
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ── `text-dark` → warna teks body (terang di dark, gelap di light) ──
   Override ini menang atas Bootstrap karena dimuat setelah bootstrap.min.css
   dan memakai !important yang sama. */
.text-dark {
    color: var(--vz-body-color, #212529) !important;
}

/* ── Remap variabel `--vz-dark-rgb` di dark mode ──
   Bootstrap mendefinisikan .text-dark / .bg-dark / .border-dark dari
   variabel ini. Di dark mode nilainya gelap (#1d2b3a) sehingga tidak
   terlihat di atas latar gelap. Kita paksa jadi warna terang agar semua
   utility berbasis "dark" otomatis kontras. */
[data-bs-theme="dark"] {
    --vz-dark-rgb: 206, 212, 218;
    --vz-dark: #ced4da;
}

/* ── `bg-white` → warna card (putih di light, gelap di dark) ── */
.bg-white {
    background-color: var(--vz-card-bg, #fff) !important;
}

[data-bs-theme="dark"] .badge.bg-white {
    border-color: var(--vz-border-color) !important;
    color: var(--vz-body-color) !important;
}

/* ── Badge & kartu `bg-{color} bg-opacity-10` → kontras di dark mode ──
   Di light biarkan seperti semula; di dark, ganti ke versi *-subtle yang
   didesain Velzon untuk tema gelap (teks cerah, latar redup). */
[data-bs-theme="dark"] .bg-primary.bg-opacity-10 {
    background-color: rgba(var(--vz-primary-rgb), .18) !important;
}
[data-bs-theme="dark"] .bg-success.bg-opacity-10 {
    background-color: rgba(var(--vz-success-rgb), .18) !important;
}
[data-bs-theme="dark"] .bg-danger.bg-opacity-10 {
    background-color: rgba(var(--vz-danger-rgb), .18) !important;
}
[data-bs-theme="dark"] .bg-warning.bg-opacity-10 {
    background-color: rgba(var(--vz-warning-rgb), .22) !important;
}
[data-bs-theme="dark"] .bg-info.bg-opacity-10 {
    background-color: rgba(var(--vz-info-rgb), .18) !important;
}
[data-bs-theme="dark"] .bg-secondary.bg-opacity-10 {
    background-color: rgba(var(--vz-secondary-rgb), .28) !important;
}

/* Teks berwarna (text-primary/success/dll) → versi lebih cerah di dark mode */
[data-bs-theme="dark"] .text-success {
    color: #45cb85 !important;
}
[data-bs-theme="dark"] .text-danger {
    color: #f06548 !important;
}
[data-bs-theme="dark"] .text-primary {
    color: #7d8fce !important;
}
[data-bs-theme="dark"] .text-warning {
    color: #f7b84b !important;
}
[data-bs-theme="dark"] .text-info {
    color: #50c3e6 !important;
}

/* Border berwarna agar tetap terlihat di dark mode */
[data-bs-theme="dark"] .border-success { border-color: rgba(69, 203, 133, .4) !important; }
[data-bs-theme="dark"] .border-danger { border-color: rgba(240, 101, 72, .4) !important; }
[data-bs-theme="dark"] .border-primary { border-color: rgba(125, 143, 206, .4) !important; }
[data-bs-theme="dark"] .border-warning { border-color: rgba(247, 184, 75, .4) !important; }
[data-bs-theme="dark"] .border-secondary { border-color: rgba(171, 184, 195, .4) !important; }

/* ── Blok `bg-dark bg-opacity-10` (kartu ringkasan "Saldo Keseluruhan") ── */
[data-bs-theme="dark"] .bg-dark.bg-opacity-10 {
    background-color: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

/* ── `bg-light` (solid & opasitas) → adaptif terhadap tema ── */
.bg-light:not([class*="bg-opacity"]) {
    background-color: var(--vz-light, #e9ebec) !important;
}
[data-bs-theme="dark"] .bg-light.bg-opacity-50 {
    background-color: rgba(255, 255, 255, .04) !important;
}

/* ── Header tabel `table-light` → pastikan teks selalu kontras ── */
thead.table-light th,
.table-light thead th {
    color: var(--vz-body-color, #212529) !important;
}

/* ── Guard umum: teks body/black tetap terang di dark mode ── */
[data-bs-theme="dark"] .text-body,
[data-bs-theme="dark"] .text-black {
    color: var(--vz-body-color, #e9ebec) !important;
}
[data-bs-theme="dark"] i.text-dark,
[data-bs-theme="dark"] .text-dark i {
    color: var(--vz-body-color, #e9ebec) !important;
}

/* ── Form control / select: pastikan latar & teks kontras di dark mode ──
   DataTables & plugin lain kadang memaksa latar putih lewat CSS bawaan. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--vz-input-bg-custom, #262a2f) !important;
    border-color: var(--vz-input-border-custom, #2a2f34) !important;
    color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-select::placeholder {
    color: var(--vz-secondary-color, #878a99) !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--vz-input-bg-custom, #262a2f) !important;
    color: #fff !important;
}

/* ── DataTables: selaraskan kontrol bawaan ke tema gelap ── */[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--vz-input-bg-custom, #262a2f) !important;
    color: var(--vz-body-color, #ced4da) !important;
    border: 1px solid var(--vz-input-border-custom, #2a2f34) !important;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter {
    color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .page-link {
    background-color: var(--vz-secondary-bg, #05192f) !important;
    border-color: var(--vz-border-color, #2a4562) !important;
    color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--vz-light, #061e39) !important;
    color: var(--vz-secondary-color, #878a99) !important;
}

/* ── Dropdown native <option> & dropdown-menu: pastikan terbaca ── */
[data-bs-theme="dark"] select.form-select option,
[data-bs-theme="dark"] .form-control option {
    background-color: var(--vz-card-bg, #212529);
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--vz-card-bg, #212529);
    border-color: var(--vz-border-color, #2a4562);
}
[data-bs-theme="dark"] .dropdown-item {
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--vz-light, #061e39);
    color: #fff;
}

/* ── Tombol `btn-light` di dark mode ──
   Bawaan Velzon membiarkan btn-light berlatar putih/terang di dark mode,
   sehingga ikon berwarna terang (text-primary) di dalamnya jadi pucat/tak
   terlihat. Kita gelapkan latarnya supaya semua ikon kontras. */
[data-bs-theme="dark"] .btn-light {
    background-color: var(--vz-light, #212529) !important;
    border-color: var(--vz-border-color, #2a4562) !important;
    color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .btn-light:hover,
[data-bs-theme="dark"] .btn-light:focus,
[data-bs-theme="dark"] .btn-light:active {
    background-color: var(--vz-tertiary-bg, #061f3b) !important;
    border-color: var(--vz-border-color, #2a4562) !important;
    color: #fff !important;
}
/* Ikon berwarna di dalam btn-light → versi terang yang kontras di dark mode */
[data-bs-theme="dark"] .btn-light .text-primary { color: #7d8fce !important; }
[data-bs-theme="dark"] .btn-light .text-success { color: #45cb85 !important; }
[data-bs-theme="dark"] .btn-light .text-danger { color: #f06548 !important; }
[data-bs-theme="dark"] .btn-light .text-warning { color: #f7b84b !important; }
[data-bs-theme="dark"] .btn-light .text-info { color: #50c3e6 !important; }
[data-bs-theme="dark"] .btn-light .text-secondary { color: #abb8c3 !important; }
[data-bs-theme="dark"] .btn-light .text-dark { color: var(--vz-body-color, #ced4da) !important; }

/* ── Tombol nominal bergaris-putus (klik utk lihat sub-metode) ──
   Memakai class btn-link + text-*, tapi kita pastikan tampil seperti angka
   biasa (bukan link default abu) & tetap kontras di kedua tema.
   Catatan: warna teks TIDAK dipaksa, supaya text-success/text-danger tetap berlaku. */
td .btn-link[onclick^="showSubMetodeList"] {
    font-weight: 600;
    border-bottom: 1px dashed currentColor;
    text-decoration: none !important;
    padding: 0;
    vertical-align: baseline;
}
td .btn-link[onclick^="showSubMetodeList"]:hover {
    opacity: .75;
}

/* ── Tombol outline di dark mode: pastikan border & teks terlihat ── */
[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--vz-body-color, #ced4da);
    border-color: var(--vz-border-color, #2a4562);
}
[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--vz-secondary-bg, #05192f);
    color: #fff;
}

/* ── Panel Statistik Keuangan (dashboard) ── */
.stats-summary-item {
    padding-top: .75rem;
    padding-bottom: .75rem;
}
/* Garis pemisah antar item ringkasan (meniru gaya referensi) */
@media (min-width: 768px) {
    .stats-summary-item + .stats-summary-item {
        border-left: 1px dashed var(--vz-border-color, #e9ebec);
    }
}
@media (max-width: 767.98px) {
    .stats-summary-item:nth-child(2),
    .stats-summary-item:nth-child(4) {
        border-left: 1px dashed var(--vz-border-color, #e9ebec);
    }
    .stats-summary-item:nth-child(3),
    .stats-summary-item:nth-child(4) {
        border-top: 1px dashed var(--vz-border-color, #e9ebec);
    }
}

/* ── Brand sidebar: [LOGO] BRAND + nama perusahaan di bawah ── */
.navbar-brand-box.sidebar-brand-box {
    /* beri ruang supaya logo + 2 baris teks tidak terpotong */
    min-height: 70px;
    display: flex;
    align-items: center;
}
.sidebar-brand-link {
    display: flex;
    align-items: center;
    min-width: 0;
    /* agar anak flex (teks) boleh menyusut & ellipsis bekerja, tidak menembus keluar */
    width: 100%;
}
/* Paksa logo BESAR tampil di sidebar penuh (abaikan aturan default Velzon) */
.sidebar-brand-link .logo-lg,
.sidebar-brand-link span.logo-lg {
    display: flex !important;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}
.sidebar-brand-link .logo-sm,
.sidebar-brand-link span.logo-sm {
    display: none !important;
}
.sidebar-logo-img {
    height: 34px;
    width: auto;
    max-width: 44px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 6px;
}
.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
    overflow: hidden;
    /* KUNCI: tanpa min-width:0, teks flex tidak bisa menyusut sehingga menembus keluar sidebar */
    min-width: 0;
    flex: 1 1 auto;
}
.sidebar-brand-name {
    /* Brand besar di atas (mis. EBOOK) */
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.sidebar-brand-company {
    /* Nama perusahaan di bawah brand; boleh wrap ke 2 baris, tapi tidak menembus keluar. */
    font-size: .7rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .7);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mode sidebar mengecil (sm / sm-hover): tampilkan hanya logo kecil, tengah */
[data-sidebar-size="sm"] .navbar-brand-box.sidebar-brand-box,
[data-sidebar-size="sm-hover"] .navbar-brand-box.sidebar-brand-box {
    min-height: 70px;
    justify-content: center;
}
[data-sidebar-size="sm"] .sidebar-brand-link .logo-lg,
[data-sidebar-size="sm"] .sidebar-brand-link span.logo-lg {
    display: none !important;
}
[data-sidebar-size="sm"] .sidebar-brand-link .logo-sm,
[data-sidebar-size="sm"] .sidebar-brand-link span.logo-sm {
    display: inline-block !important;
}
[data-sidebar-size="sm"] .sidebar-logo-img {
    height: 26px;
    max-width: 30px;
}
/* sm-hover: saat hover sidebar melebar, tampilkan logo besar lagi */
[data-sidebar-size="sm-hover"] .navbar-menu:hover .sidebar-brand-link .logo-lg {
    display: flex !important;
}
[data-sidebar-size="sm-hover"] .navbar-menu:hover .sidebar-brand-link .logo-sm {
    display: none !important;
}

/*# sourceMappingURL=custom.min.css.map */