/* =============================================
   DARK MODE - AishPulsa (Full Coverage)
   ============================================= */

/* Transisi halus saat toggle */
body, body * {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* =============================================
   BASE
   ============================================= */
body.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}
body.dark-mode.bg-grey,
body.dark-mode .bg-grey {
    background-color: #1a1a1a !important;
}
body.dark-mode.rgs-home {
    background-color: #121212 !important;
}

/* =============================================
   SEMUA ELEMEN PUTIH / TERANG
   ============================================= */
body.dark-mode .bg-white,
body.dark-mode [class*="bg-white"] {
    background-color: #1e1e1e !important;
}

/* =============================================
   CARD
   ============================================= */
body.dark-mode .card,
body.dark-mode .card-body,
body.dark-mode .card-footer,
body.dark-mode .card-header {
    background-color: #1e1e1e !important;
    border-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}
body.dark-mode .card {
    box-shadow: 0 3px 6px rgba(0,0,0,0.5) !important;
}

/* =============================================
   SECTION & WIDE BLOCK
   ============================================= */
body.dark-mode .section,
body.dark-mode .wide-block {
    background-color: #1e1e1e !important;
    border-color: #2a2a2a !important;
}

/* =============================================
   TEXT
   ============================================= */
body.dark-mode,
body.dark-mode p,
body.dark-mode span,
body.dark-mode div,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode label,
body.dark-mode li,
body.dark-mode td,
body.dark-mode th {
    color: #e0e0e0 !important;
}
body.dark-mode .text-dark {
    color: #e0e0e0 !important;
}
body.dark-mode .text-muted {
    color: #888888 !important;
}
body.dark-mode .text-white {
    color: #ffffff !important;
}
/* Jangan ubah warna tombol dan badge */
body.dark-mode .btn,
body.dark-mode .badge {
    color: inherit;
}
body.dark-mode .btn-success,
body.dark-mode .btn-danger,
body.dark-mode .btn-primary,
body.dark-mode .rgs-btn-pending {
    color: #fff !important;
}

/* =============================================
   APP HEADER
   ============================================= */
body.dark-mode .appHeader {
    background-color: var(--color-theme) !important;
}

/* =============================================
   APP BOTTOM MENU
   ============================================= */
body.dark-mode .appBottomMenu {
    background-color: #1e1e1e !important;
    border-top: 1px solid #2a2a2a !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.4) !important;
}
body.dark-mode .appBottomMenu .item strong {
    color: #888 !important;
}
body.dark-mode .appBottomMenu .item ion-icon {
    color: #888 !important;
}
body.dark-mode .appBottomMenu .item.active strong,
body.dark-mode .appBottomMenu .item.active ion-icon {
    color: var(--color-theme) !important;
}
body.dark-mode .appBottomMenu .item {
    border-top: 1px solid #2a2a2a !important;
}
body.dark-mode .appBottomMenu .item .bd {
    border-bottom-color: #2a2a2a !important;
}

/* =============================================
   FORM & INPUT
   ============================================= */
body.dark-mode .form-control,
body.dark-mode .custom-select,
body.dark-mode input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body.dark-mode textarea,
body.dark-mode select {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #3a3a3a !important;
}
body.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder {
    color: #666 !important;
}
body.dark-mode .input-group-text {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #aaa !important;
}

/* =============================================
   LISTVIEW
   ============================================= */
body.dark-mode .listview,
body.dark-mode .image-listview,
body.dark-mode .listview > li,
body.dark-mode .image-listview > li {
    background-color: #1e1e1e !important;
    border-color: #2a2a2a !important;
}
body.dark-mode .image-listview > li::after,
body.dark-mode .listview > li::after {
    background-color: #2a2a2a !important;
}
body.dark-mode .image-listview > li a.item,
body.dark-mode .listview > li a.item {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* =============================================
   MODAL & ACTION SHEET
   ============================================= */
body.dark-mode .modal-content,
body.dark-mode .action-sheet .modal-content {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: #2a2a2a !important;
}
body.dark-mode .action-button-list > li .btn {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #2a2a2a !important;
}

/* =============================================
   NAV TABS
   ============================================= */
body.dark-mode .nav-tabs {
    border-bottom-color: #2a2a2a !important;
}
body.dark-mode .nav-tabs .nav-link {
    color: #aaa !important;
}
body.dark-mode .nav-tabs .nav-link.active {
    color: #fff !important;
    border-bottom: 2px solid #fff !important;
}

/* =============================================
   ACCORDION
   ============================================= */
body.dark-mode .accordion .accordion-header .btn,
body.dark-mode .accordion .accordion-header .btn.collapsed {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}
body.dark-mode .accordion .accordion-header .btn.collapsed::before {
    background: #3a3a3a !important;
}

/* =============================================
   RIWAYAT
   ============================================= */
body.dark-mode .rgs-riwayat .tipe {
    background: #2a2a2a !important;
    color: #888 !important;
}
body.dark-mode .rgs-riwayat .kode,
body.dark-mode .rgs-riwayat .date {
    color: #888 !important;
}

/* =============================================
   RINCIAN / KONFIRMASI
   ============================================= */
body.dark-mode .rgs-bg-rincian {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}
body.dark-mode .rgs-text-rincian,
body.dark-mode .rgs-konfirmasi .text-muted,
body.dark-mode .rgs-konfirmasi .col-11,
body.dark-mode .rgs-konfirmasi .in span {
    color: #ccc !important;
}
body.dark-mode .rgs-rincian-keterangan {
    border-color: #3a3a3a !important;
}

/* =============================================
   DEPOSIT
   ============================================= */
body.dark-mode .rgs-deposit .wide-block,
body.dark-mode .rgs-pembayaran .rgs-listview {
    background-color: #1e1e1e !important;
}
body.dark-mode .form-bottom-fixed {
    background-color: #1e1e1e !important;
    border-top: 1px solid #2a2a2a !important;
}

/* =============================================
   PRICE LIST / TABLE
   ============================================= */
body.dark-mode .rgs-price-list .table thead tr {
    background: #2a2a2a !important;
}
body.dark-mode .rgs-price-list .table thead th,
body.dark-mode .rgs-price-list .table tbody td {
    color: #e0e0e0 !important;
    border-color: #2a2a2a !important;
}
body.dark-mode table,
body.dark-mode thead,
body.dark-mode tbody,
body.dark-mode tr {
    background-color: #1e1e1e !important;
    border-color: #2a2a2a !important;
}

/* =============================================
   MENU ITEM (ICON PRODUK)
   ============================================= */
body.dark-mode .app-menu .item strong {
    color: #ccc !important;
}

/* =============================================
   LOADER
   ============================================= */
body.dark-mode #loader {
    background-color: #121212 !important;
}

/* =============================================
   TOMBOL DARK MODE TOGGLE
   ============================================= */
#darkModeToggle {
    position: fixed;
    bottom: 90px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-theme, #6200ea);
    color: #fff;
    border: none;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9990;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    transition: transform 0.2s, background 0.2s;
}
#darkModeToggle:active {
    transform: scale(0.88);
}

/* SVG icon di dalam tombol */
#darkModeToggle svg {
    width: 20px;
    height: 20px;
    fill: #fff;
    display: block;
}

/* Sembunyikan tombol dark mode di semua halaman kecuali Beranda */
body:not(.rgs-home) #darkModeToggle {
    display: none !important;
}