/* public/css/dark-mode.css */

/* 1. Override Akar Variabel untuk Bootstrap & SB Admin Pro */
body.dark-mode {
    --bs-body-bg: #1a1d20;
    --bs-body-color: #e4e6eb;
    --sb-sidenav-bg: #212529;
    --sb-sidenav-color: #aeb4bf;
    --sb-sidenav-active-bg: #0d6efd;
    
    --bs-card-bg: #262b2f;
    --bs-card-cap-bg: rgba(0, 0, 0, 0.2);
    --bs-card-border-color: #343a40;
    
    --bs-border-color: #343a40;
    --bs-table-border-color: #3b4045;
    --bs-table-bg: #262b2f;
    --bs-table-striped-bg: #2c3136;
    --bs-table-hover-bg: #30353b;
    
    --bs-modal-bg: #262b2f;
    --bs-modal-border-color: #343a40;
    --bs-input-bg: #212529;
    --bs-input-border-color: #343a40;
    --bs-input-color: #fff;
    
    --bs-dropdown-bg: #262b2f;
    --bs-dropdown-link-color: #e4e6eb;
    --bs-dropdown-link-hover-bg: #2c3136;
    --bs-light-bg: #343a40;
    --bs-secondary-color: #9aa0a6;
}

/* 2. Paksa Area Utama Konten (Cards, Headers, Container) menjadi Gelap */
body.dark-mode .card,
body.dark-mode .card-header,
body.dark-mode .card-body,
body.dark-mode .card-footer {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-card-border-color) !important;
    color: var(--bs-body-color) !important;
}

body.dark-mode .bg-white,
body.dark-mode .bg-light {
    background-color: var(--bs-card-bg) !important;
}

/* 3. Ubah Background Header Berwarna Biru/Gradient (Konten Utama) */
body.dark-mode .bg-gradient-primary-to-secondary,
body.dark-mode .bg-primary,
body.dark-mode .bg-gradient-primary {
    background: linear-gradient(135deg, #1a1d20 0%, #212529 100%) !important;
}
body.dark-mode .bg-gradient-primary-to-secondary .text-white,
body.dark-mode .bg-primary .text-white {
    color: #e4e6eb !important;
}

/* 4. Perbaiki Tabel Putih Menjadi Gelap */
body.dark-mode .table {
    color: var(--bs-body-color);
    background-color: var(--bs-table-bg);
    border-color: var(--bs-table-border-color);
}
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bs-table-striped-bg);
}
body.dark-mode .table-hover tbody tr:hover {
    color: var(--bs-body-color);
    background-color: var(--bs-table-hover-bg);
}
body.dark-mode .table thead th {
    background-color: #2c3136 !important;
    border-color: #343a40 !important;
    color: #e4e6eb !important;
}

/* 5. Perbaiki Input Search / Dropdown agar tidak putih terang */
body.dark-mode .input-group-text,
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--bs-input-bg);
    border-color: var(--bs-input-border-color);
    color: var(--bs-input-color);
}

/* 6. Tombol-tombol standar (Light, Secondary, Outline) */
body.dark-mode .btn-light {
    background-color: #343a40;
    color: #fff;
    border-color: #343a40;
}
body.dark-mode .btn-outline-secondary {
    color: #9aa0a6;
    border-color: #343a40;
}

/* ======================================================= */
/* 7. PERBAIKAN SIDEBAR (Agar teks putih saat hover/aktif) */
/* ======================================================= */
body.dark-mode .sidenav,
body.dark-mode #sidenavAccordion,
body.dark-mode .sb-sidenav,
body.dark-mode .sb-sidenav-menu {
    background-color: var(--sb-sidenav-bg) !important;
    border-color: var(--sb-sidenav-bg) !important;
}
body.dark-mode .sidenav .nav-link,
body.dark-mode .sb-sidenav .nav-link {
    color: var(--sb-sidenav-color) !important;
}
body.dark-mode .sidenav .nav-link:hover,
body.dark-mode .sb-sidenav .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .sidenav .nav-link.active,
body.dark-mode .sb-sidenav .nav-link.active {
    color: #ffffff !important;
    background-color: var(--sb-sidenav-active-bg) !important;
}

/* ======================================================= */
/* 8. PERBAIKAN TOPBAR / NAVIGATION BAR (Agar berubah gelap) */
/* ======================================================= */
body.dark-mode .topnav,
body.dark-mode .navbar {
    background-color: #212529 !important;
    border-bottom: 1px solid #343a40 !important;
}
body.dark-mode .navbar-light .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
}
body.dark-mode .navbar-light .navbar-nav .nav-link:hover,
body.dark-mode .navbar-light .navbar-nav .nav-link:focus {
    color: #ffffff !important;
}
body.dark-mode .navbar-nav .dropdown-menu {
    background-color: var(--bs-dropdown-bg) !important;
    border-color: var(--bs-card-border-color) !important;
}
body.dark-mode .navbar-nav .dropdown-item {
    color: var(--bs-dropdown-link-color) !important;
}

/* ======================================================= */
/* 9. PERBAIKAN PAGINATION (Nomor halaman tabel) */
/* ======================================================= */
body.dark-mode .page-link {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}
body.dark-mode .page-link:hover {
    background-color: #343a40 !important;
    color: #fff !important;
    border-color: #343a40 !important;
}
body.dark-mode .page-item.active .page-link {
    background-color: var(--sb-sidenav-active-bg) !important;
    border-color: var(--sb-sidenav-active-bg) !important;
}

/* ======================================================= */
/* 10. FIX: Tampilan Tombol Dark Mode (Overlay Putih) */
/* ======================================================= */
body.dark-mode .btn-darkmode-toggle {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out;
}
body.dark-mode .btn-darkmode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}
body:not(.dark-mode) .btn-darkmode-toggle {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: #69707a !important;
}
body:not(.dark-mode) .btn-darkmode-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #000000 !important;
}

/* 11. Matikan animasi jika user menyukai reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ======================================================= */
/* 12. (Telah digabung ke nomor 13) */
/* ======================================================= */

/* ======================================================= */
/* 13. GLOBAL TEXT ADAPTATION (Agar semua teks otomatis terlihat) */
/* ======================================================= */
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 p, body.dark-mode span, body.dark-mode li, body.dark-mode label, body.dark-mode small,
body.dark-mode strong, body.dark-mode b, body.dark-mode i, body.dark-mode em,
body.dark-mode td, body.dark-mode th, 
body.dark-mode .form-label, body.dark-mode .form-text, body.dark-mode .form-control::placeholder {
    color: var(--bs-body-color) !important;
}
body.dark-mode .text-dark, body.dark-mode .text-black {
    color: #e4e6eb !important;
}
body.dark-mode .text-muted {
    color: #9aa0a6 !important;
}
body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
    color: #8bb9fe !important;
}
body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    color: #b4d0ff !important;
}
body.dark-mode .btn-primary, body.dark-mode .btn-danger, body.dark-mode .btn-success,
body.dark-mode .btn-warning, body.dark-mode .btn-info {
    color: #ffffff !important;
}

/* ======================================================= */
/* 14. PERBAIKAN WARNA TEKS DROPDOWN & TABEL */
/* ======================================================= */
body.dark-mode .dropdown-user-details .dropdown-user-details-name,
body.dark-mode .dropdown-user-details .dropdown-user-details-email {
    color: var(--bs-body-color) !important;
}
body.dark-mode .dropdown-user-details .dropdown-user-details-name {
    font-weight: 600;
}
body.dark-mode .table td,
body.dark-mode .table th {
    color: var(--bs-body-color) !important;
}
body.dark-mode .form-control::placeholder {
    color: #adb5bd !important;
}

/* ======================================================= */
/* 15. UNIVERSAL TEXT & UTILITY OVERRIDE (Anti-Gagal) */
/* ======================================================= */
body.dark-mode {
    color: var(--bs-body-color) !important;
}
body.dark-mode .text-dark,
body.dark-mode .text-black,
body.dark-mode .text-secondary {
    color: var(--bs-body-color) !important;
}
body.dark-mode .text-muted {
    color: var(--bs-secondary-color) !important;
}
body.dark-mode .text-primary {
    color: #8bb9fe !important;
}
body.dark-mode .text-danger {
    color: #ea868f !important;
}
body.dark-mode .text-success {
    color: #75b798 !important;
}
body.dark-mode .text-warning {
    color: #ffda6a !important;
}
body.dark-mode a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link) {
    color: #8bb9fe !important;
}
body.dark-mode a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):hover {
    color: #b4d0ff !important;
}
body.dark-mode p, body.dark-mode span, body.dark-mode li, body.dark-mode label,
body.dark-mode small, body.dark-mode strong, body.dark-mode em,
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 td, body.dark-mode th, body.dark-mode dt, body.dark-mode dd {
    color: var(--bs-body-color) !important;
}
body.dark-mode .form-control::placeholder,
body.dark-mode .form-select::placeholder {
    color: #adb5bd !important;
}
body.dark-mode .dropdown-item {
    color: var(--bs-dropdown-link-color) !important;
}
body.dark-mode .dropdown-item:hover {
    color: #ffffff !important;
    background-color: var(--bs-dropdown-link-hover-bg) !important;
}
body.dark-mode .table thead th {
    color: var(--bs-body-color) !important;
    background-color: #2c3136 !important;
}

/* ======================================================= */
/* 16. TOMBOL OUTLINE DAN IKON (Agar fitur terlihat jelas) */
/* ======================================================= */

/* Tombol Outline (Batas Warna) */
body.dark-mode .btn-outline-primary {
    color: #8bb9fe !important;
    border-color: #8bb9fe !important;
}
body.dark-mode .btn-outline-primary:hover {
    background-color: #8bb9fe !important;
    color: #212529 !important;
}

body.dark-mode .btn-outline-secondary {
    color: #adb5bd !important;
    border-color: #adb5bd !important;
}
body.dark-mode .btn-outline-secondary:hover {
    background-color: #adb5bd !important;
    color: #212529 !important;
}

body.dark-mode .btn-outline-success {
    color: #75b798 !important;
    border-color: #75b798 !important;
}
body.dark-mode .btn-outline-success:hover {
    background-color: #75b798 !important;
    color: #212529 !important;
}

body.dark-mode .btn-outline-danger {
    color: #ea868f !important;
    border-color: #ea868f !important;
}
body.dark-mode .btn-outline-danger:hover {
    background-color: #ea868f !important;
    color: #212529 !important;
}

body.dark-mode .btn-outline-warning {
    color: #ffda6a !important;
    border-color: #ffda6a !important;
}
body.dark-mode .btn-outline-warning:hover {
    background-color: #ffda6a !important;
    color: #212529 !important;
}

/* Tombol Secondary Solid */
body.dark-mode .btn-secondary {
    background-color: #3b4045 !important;
    border-color: #3b4045 !important;
    color: #e4e6eb !important;
}
body.dark-mode .btn-secondary:hover {
    background-color: #2c3136 !important;
    color: #ffffff !important;
}

/* Tombol Link */
body.dark-mode .btn-link {
    color: #8bb9fe !important;
}
body.dark-mode .btn-link:hover {
    color: #b4d0ff !important;
}

/* Semua Ikon (Feather, FontAwesome, SVG) agar terlihat jelas */
body.dark-mode i, 
body.dark-mode svg:not(.feather-svg),
body.dark-mode .feather {
    color: var(--bs-body-color) !important;
    stroke: var(--bs-body-color) !important;
}
/* Ikon di dalam tombol aksi, agar warna mengikuti tulisan tombolnya */
body.dark-mode .btn i,
body.dark-mode .btn svg {
    color: inherit !important;
    stroke: inherit !important;
}
/* Ikon di dropdown, sidebar, dan topbar agar tetap konsisten */
body.dark-mode .dropdown-item i,
body.dark-mode .dropdown-item svg,
body.dark-mode .nav-link i,
body.dark-mode .nav-link svg {
    color: inherit !important;
    stroke: inherit !important;
}

/* ======================================================= */
/* 17. Matikan animasi jika user menyukai reduced motion */
/* ======================================================= */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ======================================================= */
/* 18. PERBAIKAN "PUTIH TERANG" PADA MODAL & FORM TRANSAKSI */
/* ======================================================= */

/* 1. Modal (Pop-up seperti New Patient / New Transaction) */
body.dark-mode .modal-content,
body.dark-mode .modal-body,
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    background-color: var(--bs-modal-bg) !important;
    border-color: var(--bs-modal-border-color) !important;
    color: var(--bs-body-color) !important;
}

/* 2. Tombol Close 'X' di pojok modal agar terlihat */
body.dark-mode .btn-close {
    filter: invert(1) !important; /* Ubah silang hitam menjadi putih */
    opacity: 0.8 !important;
}

/* 3. Semua area Form group di New Transaction / Patient */
body.dark-mode .form-group,
body.dark-mode .col-md-3, body.dark-mode .col-md-4, 
body.dark-mode .col-md-6, body.dark-mode .col-md-12,
body.dark-mode .col-sm-6, body.dark-mode .col-sm-12,
body.dark-mode .row {
    background-color: transparent !important; /* Agar mewarisi warna card */
}

/* 4. Select Dropdown (Tombol pilihan) yang sering bandel */
body.dark-mode select,
body.dark-mode .form-select {
    background-color: var(--bs-input-bg) !important;
    color: var(--bs-input-color) !important;
    border-color: var(--bs-input-border-color) !important;
}

/* 5. Card Header di halaman New Transaction agar gelap */
body.dark-mode .card-header {
    background-color: #2c3136 !important;
    border-bottom: 1px solid var(--bs-card-border-color) !important;
}

/* 6. Jika masih ada background putih di container luar */
body.dark-mode .container-fluid,
body.dark-mode .main-content,
body.dark-mode .page-content {
    background-color: var(--bs-body-bg) !important;
}

/* ======================================================= */
/* 19. PERBAIKAN HALAMAN PATIENT (Agar tidak putih terang) */
/* ======================================================= */

/* Konten utama halaman */
body.dark-mode .container-fluid,
body.dark-mode main,
body.dark-mode #layoutSidenav_content,
body.dark-mode .page-content {
    background-color: var(--bs-body-bg) !important;
}

/* Card dan area tabel di halaman Patient */
body.dark-mode .card {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-card-border-color) !important;
}
body.dark-mode .table-responsive {
    background-color: transparent !important;
}

/* ======================================================= */
/* 20. PERBAIKAN TAMPILAN "NEW TRANSACTION" SAAT DI-HOVER */
/* ======================================================= */

/* Baris tabel (table-hover) - jangan jadi putih saat mouse lewat */
body.dark-mode .table-hover tbody tr:hover {
    color: var(--bs-body-color) !important;
    background-color: #2c3136 !important; /* Warna abu gelap, bukan putih */
}

/* Input Form & Select saat di-hover / di-focus / diklik */
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #2c3136 !important; /* Latar belakang gelap */
    color: var(--bs-input-color) !important;
    border-color: #0d6efd !important; /* Highlight biru */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Tombol (btn) agar saat di-hover warnanya gelap, bukan putih */
body.dark-mode .btn:hover {
    color: #fff !important; /* Teks tetap putih */
}
body.dark-mode .btn-light:hover {
    background-color: #2c3136 !important; /* Tombol Light jadi gelap saat di-hover */
    color: #fff !important;
}

/* Dropdown / Select options saat di-hover */
body.dark-mode .dropdown-item:hover {
    background-color: #2c3136 !important;
    color: #ffffff !important;
}

/* ======================================================= */
/* 21. PASTIKAN MODAL 'NEW PATIENT' / 'TRANSACTION' GELAP */
/* ======================================================= */
body.dark-mode .modal-content,
body.dark-mode .modal-header,
body.dark-mode .modal-body,
body.dark-mode .modal-footer {
    background-color: var(--bs-modal-bg) !important;
    border-color: var(--bs-modal-border-color) !important;
}
body.dark-mode .btn-close {
    filter: invert(1) !important; /* Tombol close 'X' jadi putih */
}

/* 22. Matikan animasi jika user menyukai reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* ======================================================= */
/* 23. RESET KE MODE PUTIH (SAAT USER BERALIH KE LIGHT MODE) */
/* ======================================================= */

/* Reset Card, Tabel, dan Modal menjadi putih saat di Light Mode */
body:not(.dark-mode) .card,
body:not(.dark-mode) .card-header,
body:not(.dark-mode) .card-body,
body:not(.dark-mode) .card-footer {
    background-color: #ffffff !important; /* Warna putih bersih */
    border-color: #e3e6f0 !important;     /* Border standar Bootstrap */
    color: #212529 !important;            /* Kembalikan warna teks hitam */
}

body:not(.dark-mode) .table,
body:not(.dark-mode) .table-striped tbody tr:nth-of-type(odd) {
    background-color: #ffffff !important;
    color: #212529 !important;
}

body:not(.dark-mode) .table thead th {
    background-color: #f8f9fc !important; /* Header tabel standar SB Admin Pro */
    color: #212529 !important;
}

body:not(.dark-mode) .table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.05) !important; /* Hover abu tipis standar Bootstrap */
}

/* Reset Modal (Pop-up) ke putih */
body:not(.dark-mode) .modal-content,
body:not(.dark-mode) .modal-header,
body:not(.dark-mode) .modal-body,
body:not(.dark-mode) .modal-footer {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

/* Reset Input Forms */
body:not(.dark-mode) .form-control,
body:not(.dark-mode) .form-select,
body:not(.dark-mode) .input-group-text {
    background-color: #ffffff !important;
    border-color: #d1d3e2 !important;
    color: #495057 !important;
}

/* Reset Dropdown */
body:not(.dark-mode) .dropdown-menu {
    background-color: #ffffff !important;
    border-color: rgba(0,0,0,.15) !important;
}
body:not(.dark-mode) .dropdown-item {
    color: #212529 !important;
}
body:not(.dark-mode) .dropdown-item:hover {
    background-color: #e9ecef !important;
    color: #16181b !important;
}

/* Reset Background Custom */
body:not(.dark-mode) .bg-white,
body:not(.dark-mode) .bg-light {
    background-color: #ffffff !important;
}

body:not(.dark-mode) .btn-close {
    filter: invert(0) !important; /* Kembalikan tombol X hitam */
}
/* ======================================================= */
/* 24. PERBAIKAN FONT & WARNA TABEL PASIEN (Agar kontras) */
/* ======================================================= */

/* 1. Paksa latar belakang sel (td) menjadi gelap, bukan krem. */
body.dark-mode .table tbody tr td {
    background-color: var(--bs-table-bg) !important;
    color: var(--bs-body-color) !important; /* Putih cerah */
    border-color: var(--bs-table-border-color) !important;
}

/* 2. Jika menggunakan class table-bordered, paksa garis batasnya gelap */
body.dark-mode .table-bordered {
    border-color: var(--bs-border-color) !important;
}

/* 3. Teks di dalam tabel (seperti tanggal lahir, dll.) sering memakai text-primary. Paksa jadi putih cerah */
body.dark-mode .table tbody tr td a,
body.dark-mode .table tbody tr td span,
body.dark-mode .table tbody tr td .text-primary,
body.dark-mode .table tbody tr td .text-secondary {
    color: var(--bs-body-color) !important;
}

/* 4. PERBAIKAN BADGE (Umur & Gender) - Supaya teksnya kontras dengan latar warnanya */
/* Badge Info (Biru muda untuk Umur) - Teks harus putih */
body.dark-mode .badge.bg-info {
    color: #ffffff !important;
    background-color: #0dcaf0 !important; /* Jagalah warna biru muda */
}

/* Badge Success (Hijau untuk MALE) */
body.dark-mode .badge.bg-success {
    color: #ffffff !important;
    background-color: #198754 !important;
}

/* Badge Warning (Oranye untuk FEMALE) */
body.dark-mode .badge.bg-warning {
    color: #ffffff !important;
    background-color: #ffc107 !important;
}

/* Badge Danger / Secondary (jika ada) */
body.dark-mode .badge.bg-danger {
    color: #ffffff !important;
}
body.dark-mode .badge.bg-secondary {
    color: #ffffff !important;
}
/* ======================================================= */
/* 25. SOLUSI PALU GODAM: PERBAIKAN WARNA TABEL PASIEN */
/* ======================================================= */

/* 1. Paksa background seluruh baris dan sel tabel menjadi GELAP, apapun library tabelnya */
body.dark-mode .table tbody tr,
body.dark-mode .table tbody tr td,
body.dark-mode .bootstrap-table .table tbody tr,
body.dark-mode .bootstrap-table .table tbody tr td,
body.dark-mode .fixed-table-body .table tbody tr td {
    background-color: #262b2f !important; /* Warna gelap tabel */
    color: #e4e6eb !important;             /* Warna teks putih/terang */
    border-color: #3b4045 !important;     /* Batas baris gelap */
}

/* 2. Paksa juga jika ada baris strip (selang-seling warna) */
body.dark-mode .table-striped tbody tr:nth-of-type(odd),
body.dark-mode .table-striped tbody tr:nth-of-type(odd) td {
    background-color: #2c3136 !important;
    color: #e4e6eb !important;
}

/* 3. Paksa teks yang tadinya biru pudar (class text-primary) jadi putih cerah */
body.dark-mode .table tbody tr td span,
body.dark-mode .table tbody tr td div,
body.dark-mode .table tbody tr td a,
body.dark-mode .table tbody tr td .text-primary,
body.dark-mode .table tbody tr td .text-secondary,
body.dark-mode .table tbody tr td .text-dark {
    color: #e4e6eb !important;
}

/* 4. Saat mouse diarahkan ke baris (Hover), pastikan gelap dan tidak berubah putih */
body.dark-mode .table-hover tbody tr:hover,
body.dark-mode .table-hover tbody tr:hover td {
    background-color: #30353b !important;
    color: #ffffff !important;
}

/* ======================================================= */
/* 26. PERBAIKAN BADGE (Jenis Kelamin & Umur) AGAR KONTRA */
/* ======================================================= */

/* Agar badge (keterangan umur & gender) tetap memiliki warna cerah, tapi teksnya putih */
body.dark-mode .badge.bg-info {
    background-color: #0dcaf0 !important; /* Biru cyan untuk Umur */
    color: #000000 !important;            /* Teks hitam agar lebih kontras di atas biru muda */
}
body.dark-mode .badge.bg-success {
    background-color: #198754 !important; /* Hijau untuk MALE */
    color: #ffffff !important;
}
body.dark-mode .badge.bg-warning {
    background-color: #ffc107 !important; /* Oranye/Kuning untuk FEMALE */
    color: #000000 !important;            /* Teks hitam agar lebih kontras di atas oranye */
}
body.dark-mode .badge.bg-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}
body.dark-mode .badge.bg-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
}
/* ======================================================= */
/* 27. PERBAIKAN SCROLLBAR DAN HOVER DI NEW TRANSACTION */
/* ======================================================= */

/* Scrollbar Horizontal & Vertikal menjadi abu-abu gelap yang elegan */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;   /* Lebar scrollbar vertikal */
    height: 8px;  /* Tinggi scrollbar horizontal */
}
body.dark-mode ::-webkit-scrollbar-track {
    background: #1a1d20 !important; /* Lintasan scrollbar gelap */
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: #555555 !important; /* Batang scrollbar abu-abu */
    border-radius: 6px !important;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #777777 !important; /* Lebih terang saat di-hover */
}

/* Efek Hover di Tabel New Transaction (Agar menjadi abu-abu yang jelas) */
body.dark-mode .table-hover tbody tr:hover,
body.dark-mode .table-hover tbody tr:hover td {
    background-color: #3b4045 !important; /* Abu-abu lebih terang dari background tabel */
    color: #ffffff !important;
    transition: all 0.15s ease-in-out;
}

/* ======================================================= */
/* 28. BUAT SEMUA IKON DI MENU DAN SIDEBAR JADI PUTIH */
/* ======================================================= */

/* Ikon di dalam Sidebar (Menu Results, Radiology, dll) */
body.dark-mode .sidenav .nav-link i,
body.dark-mode .sidenav .nav-link svg,
body.dark-mode .sb-sidenav .nav-link i,
body.dark-mode .sb-sidenav .nav-link svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Ikon tombol aksi di dalam Tabel (Edit, View, Hapus) */
body.dark-mode .table tbody tr td .btn i,
body.dark-mode .table tbody tr td .btn svg {
    color: #adb5bd !important; /* Abu-abu terang agar tidak terlalu menyilaukan */
    stroke: #adb5bd !important;
}
/* Saat tombol aksi di-hover, ikonnya jadi putih cerah */
body.dark-mode .table tbody tr td .btn:hover i,
body.dark-mode .table tbody tr td .btn:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Ikon di dropdown / topbar (jika ada) */
body.dark-mode .dropdown-item i,
body.dark-mode .dropdown-item svg {
    color: #e4e6eb !important;
    stroke: #e4e6eb !important;
}
/* ======================================================= */
/* 29. SOLUSI FINAL HOVER NEW TRANSACTION (Background Abu, Teks Hitam) */
/* ======================================================= */

/* 1. Paksa warna background dan teks pada baris TR dan semua TD di dalamnya */
body.dark-mode .table tbody tr:hover,
body.dark-mode .table tbody tr:hover td {
    background-color: #4a5056 !important;
    color: #000000 !important;
    transition: background-color 0.15s ease-in-out !important;
}

/* 2. Paksa semua elemen teks yang ada di dalam TD (div, span, a, strong, dll) menjadi hitam */
body.dark-mode .table tbody tr:hover td *,
body.dark-mode .table tbody tr:hover td div,
body.dark-mode .table tbody tr:hover td span,
body.dark-mode .table tbody tr:hover td a,
body.dark-mode .table tbody tr:hover td strong,
body.dark-mode .table tbody tr:hover td b,
body.dark-mode .table tbody tr:hover td i,
body.dark-mode .table tbody tr:hover td em {
    color: #000000 !important;
}

/* 3. Override kelas teks bawaan Bootstrap agar juga berubah hitam */
body.dark-mode .table tbody tr:hover td .text-primary,
body.dark-mode .table tbody tr:hover td .text-secondary,
body.dark-mode .table tbody tr:hover td .text-dark,
body.dark-mode .table tbody tr:hover td .text-muted,
body.dark-mode .table tbody tr:hover td .text-body {
    color: #000000 !important;
}

/* 4. Khusus untuk baris "No matching records found" (colspan, dataTables_empty, text-center) */
body.dark-mode .table tbody tr:hover td[colspan],
body.dark-mode .table tbody tr:hover td.dataTables_empty,
body.dark-mode .table tbody tr:hover td.text-center {
    background-color: #4a5056 !important;
    color: #000000 !important;
}
body.dark-mode .table tbody tr:hover td[colspan] *,
body.dark-mode .table tbody tr:hover td.dataTables_empty *,
body.dark-mode .table tbody tr:hover td.text-center * {
    color: #000000 !important;
}

/* 5. Paksa jika ada elemen pembungkus di luar TD (misal wrapper table) */
body.dark-mode .dataTables_wrapper .dataTables_empty:hover,
body.dark-mode .dataTables_wrapper .dataTables_empty:hover * {
    background-color: #4a5056 !important;
    color: #000000 !important;
}
/* ======================================================= */
/* 30. PERBAIKAN TOMBOL TAB & HEADER (Payment Done, All Transaction) */
/* ======================================================= */

/* 1. Tombol Tab seperti "All Transaction", "Payment Done", "New Antrean" */
body.dark-mode .nav-tabs .nav-link {
    background-color: #212529 !important; /* Latar belakang gelap */
    color: #adb5bd !important;            /* Font abu-abu terang */
    border-color: #343a40 !important;     /* Garis batas tab gelap */
    transition: all 0.2s ease-in-out;
}

/* Saat tab di-hover atau sedang aktif */
body.dark-mode .nav-tabs .nav-link:hover,
body.dark-mode .nav-tabs .nav-link.active {
    background-color: #343a40 !important; /* Latar belakang menjadi abu-abu sedang */
    color: #ffffff !important;            /* Font menjadi PUTIH cerah */
    border-color: #343a40 !important;
}

/* 2. Tombol Outline Light yang masih putih (jika ada) */
body.dark-mode .btn-outline-light {
    color: #e4e6eb !important;
    border-color: #495057 !important;
}
body.dark-mode .btn-outline-light:hover {
    background-color: #495057 !important;
    color: #ffffff !important;
}

/* 3. Tombol Light Biasa yang masih putih terang */
body.dark-mode .btn-light {
    background-color: #3b4045 !important;
    border-color: #3b4045 !important;
    color: #ffffff !important;
}
body.dark-mode .btn-light:hover {
    background-color: #2c3136 !important; /* Saat hover menjadi lebih gelap */
    color: #ffffff !important;
}

/* 4. Area header putih di kartu (jika masih ada) */
body.dark-mode .card-header.bg-light,
body.dark-mode .card-header.bg-white {
    background-color: #2c3136 !important;
    border-bottom: 1px solid #343a40 !important;
    color: #e4e6eb !important;
}

/* 5. Tab Dropdown (jika ada) */
body.dark-mode .nav-tabs .dropdown-menu {
    background-color: #212529 !important;
    border-color: #343a40 !important;
}
body.dark-mode .nav-tabs .dropdown-item {
    color: #adb5bd !important;
}
body.dark-mode .nav-tabs .dropdown-item:hover {
    background-color: #343a40 !important;
    color: #ffffff !important;
}
/* ======================================================= */
/* 32. PERBAIKAN TOMBOL "TITIK TIGA" (Hamburger / SIDEBAR TOGGLE) */
/* ======================================================= */

/* 1. Warna ikon hamburger di mode gelap menjadi abu-abu terang agar terlihat */
body.dark-mode #sidebarToggle i,
body.dark-mode #sidebarToggle svg,
body.dark-mode .btn-transparent-dark i,
body.dark-mode .btn-transparent-dark svg {
    color: #adb5bd !important; /* Abu-abu terang */
    stroke: #adb5bd !important;
}

/* 2. Saat tombol di-hover (mouse diarahkan), ikon menjadi PUTIH cerah */
body.dark-mode #sidebarToggle:hover i,
body.dark-mode #sidebarToggle:hover svg,
body.dark-mode .btn-transparent-dark:hover i,
body.dark-mode .btn-transparent-dark:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    transition: all 0.15s ease-in-out;
}

/* 3. Jika tombol memiliki background transparan, pastikan tetap responsif */
body.dark-mode #sidebarToggle {
    background: transparent !important;
    border: none !important;
}
/* ======================================================= */
/* 33. LOGO LIGHT NORMAL, LOGO DARK CENTER & AGAK TURUN */
/* ======================================================= */

/* 1. Wadah logo (navbar-brand) - SAMA PERSIS di semua mode */
body.dark-mode a.navbar-brand,
body:not(.dark-mode) a.navbar-brand {
    display: flex !important;
    align-items: center !important;      /* Tengah secara vertikal */
    justify-content: center !important;  /* Tengah secara horizontal */
    width: 180px !important;
    height: 3.5rem !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Light Mode: Logo mengisi wadah secara normal */
body:not(.dark-mode) #logo-topbar {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    transform: none !important;
}

/* 3. Dark Mode: Logo LEBIH BESAR, TETAP CENTER, & AGAK TURUN KE BAWAH */
body.dark-mode #logo-topbar {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    
    /* Perbesar logo dan geser sedikit ke bawah (6px) */
    transform: scale(1.15) translateY(6px) !important;
    transform-origin: center center !important;
}
/* ======================================================= */
/* 34. LOADING PLEASE WAIT (Font Dibuat LEBIH BESAR) */
/* ======================================================= */

/* Aturan global untuk semua mode (Light & Dark) */
body .dataTables_processing,
body .dataTables_wrapper .dataTables_processing,
body .fixed-table-loading,
body .bootstrap-table .table-loading,
body table.dataTable tbody tr.dt-loading,
body .dataTables_empty {
    /* FONT DIPERBESAR (dari 1.15rem menjadi 1.4rem) agar jelas terbaca */
    font-size: 1.4rem !important; 
    
    /* Background dan Font otomatis berubah mengikuti tema */
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    
    /* Styling agar tetap rapi */
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 8px !important;
    padding: 15px 30px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

body .dataTables_processing span,
body .fixed-table-loading span,
body .bootstrap-table .table-loading span {
    color: var(--bs-body-color) !important;
    font-size: 1.4rem !important;
}
/* ======================================================= */
/* 35. IKON, MODAL, DROPDOWN & KOLOM ADD TRANSACTION PUTIH JELAS */
/* ======================================================= */

/* 1. Ikon di dalam tombol aksi (Edit, Hapus, Simpan, Filter, Search) */
body.dark-mode .btn i,
body.dark-mode .btn svg,
body.dark-mode .input-group-text i,
body.dark-mode .input-group-text svg,
body.dark-mode .dropdown-toggle i,
body.dark-mode .dropdown-toggle svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* 2. Dropdown Menu (pilihan filter, dll) agar latar gelap & font putih */
body.dark-mode .dropdown-menu {
    background-color: #262b2f !important; /* Latar belakang dropdown gelap */
    border-color: #343a40 !important;
}
body.dark-mode .dropdown-item {
    color: #e4e6eb !important; /* Font putih cerah */
}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #343a40 !important; /* Hover abu-abu */
    color: #ffffff !important;
}

/* 3. Modal (Pop-up Add Transaction) - Pastikan header & footer gelap, font putih */
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    background-color: #212529 !important;
    border-color: #343a40 !important;
    color: #e4e6eb !important;
}
body.dark-mode .modal-header .btn-close {
    filter: invert(1) !important; /* Tombol 'X' tutup modal jadi putih */
}

/* 4. Kolom Tabel dan Header (agar teks di dalam tabel transaksi jelas putih) */
body.dark-mode .table th,
body.dark-mode .table td,
body.dark-mode .table thead th {
    color: #e4e6eb !important;
    border-color: #3b4045 !important;
}

/* 5. Tombol Add/Submit di dalam modal (jika masih gelap) */
body.dark-mode .modal-footer .btn {
    color: #ffffff !important;
}
/* ======================================================= */
/* 41. PAKSA HALAMAN LOGIN SELALU PUTIH (Bahkan jika class dark-mode menempel) */
/* ======================================================= */

body.login-page,
body.login-page.nav-fixed {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}
body.login-page .card,
body.login-page .modal-content {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}
body.login-page .form-control,
body.login-page .form-select {
    background-color: #ffffff !important;
    border-color: #ced4da !important;
    color: #495057 !important;
}
body.login-page .btn-primary {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    border-color: #0d6efd !important;
}
body.login-page .topnav,
body.login-page .navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
}
body.login-page .sidenav {
    background-color: #ffffff !important;
}
body.login-page a {
    color: #0d6efd !important;
}
body.login-page .text-muted {
    color: #6c757d !important;
}
body.login-page .bg-white {
    background-color: #ffffff !important;
}
/* Reset transisi agar Login tidak bermain-main dengan efek fade */
body.login-page,
body.login-page * {
    transition: none !important;
}