:root[data-theme="dark"] {
    --bg-color: #111827;
    --card-bg: #1F2937;
    --border-color: #374151;
    --text-color: #E5E7EB;
    --heading-color: #FFFFFF;
    --text-muted: #9CA3AF;
    --hover-bg: #374151;
    --primary-color: #3B82F6;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
    --loading-bg: rgba(17, 24, 39, 0.8);
    --chart-grid: #374151;
    --chart-text: #9CA3AF;
}

:root[data-theme="dark"] .table {
    color: #E5E7EB;
    border-color: #374151;
}

:root[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* {
    color: #E5E7EB;
    background-color: rgba(255,255,255,0.02);
}

:root[data-theme="dark"] .form-control, 
:root[data-theme="dark"] .form-select {
    background-color: #374151;
    border-color: #4B5563;
    color: #E5E7EB;
}

/* =========================================
   OVERRIDE BOOTSTRAP TEXT COLORS FOR DARK MODE
   ========================================= */

/* Paksa .text-muted menggunakan warna abu-abu terang kita */
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-black-50 {
    color: var(--text-muted) !important;
}

/* Paksa teks gelap bawaan bootstrap menjadi terang di dark mode */
:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .text-body {
    color: var(--text-color) !important;
}

/* Pastikan semua Heading (h1-h6) menjadi putih terang */
:root[data-theme="dark"] h1, 
:root[data-theme="dark"] h2, 
:root[data-theme="dark"] h3, 
:root[data-theme="dark"] h4, 
:root[data-theme="dark"] h5, 
:root[data-theme="dark"] h6,
:root[data-theme="dark"] .h1, 
:root[data-theme="dark"] .h2, 
:root[data-theme="dark"] .h3, 
:root[data-theme="dark"] .h4, 
:root[data-theme="dark"] .h5, 
:root[data-theme="dark"] .h6 {
    color: var(--heading-color) !important;
}

/* Perbaikan untuk teks label pada form filter */
:root[data-theme="dark"] .form-label {
    color: var(--text-color) !important;
}

/* Perbaikan warna teks Pagination DataTables di Dark Mode */
:root[data-theme="dark"] .page-link {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}
:root[data-theme="dark"] .page-link:hover {
    background-color: var(--hover-bg);
    color: var(--primary-color);
}
:root[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--bg-color);
    border-color: var(--border-color);
    color: var(--text-muted);
}