/**
 * BSC Evaluation - Dark Mode System
 * 
 * Prinsip: NEUTRAL SURFACES ONLY
 * - Hanya menggelapkan area netral (background putih, abu-abu terang)
 * - Warna brand/semantic (tombol, badge, ikon, status) tetap dipertahankan
 * - Hierarki visual: page-bg < surface-card < surface-input < surface-table-header
 */

/* ============================================
   DESIGN TOKENS - Light Mode (Default)
   ============================================ */
:root {
    /* Neutral Surface Tokens */
    --page-bg: #f5f7fb;
    --surface-1: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #ffffff;
    --surface-panel: #ffffff;
    --surface-stat-card: #ffffff;
    --surface-table: #ffffff;
    --surface-input: #ffffff;
    --surface-dropdown: #ffffff;
    --surface-modal: #ffffff;
    --surface-footer: #ffffff;
    --surface-sidebar: #4e73df;
    --surface-empty-state: #fbfcff;
    --surface-report-mini: #fbfcff;
    --surface-quick-link: #fbfcff;
    --surface-hover-row: #f8f9fc;
    --surface-table-header: #f8f9fc;

    /* Border & Divider Tokens */
    --border-color: #e3e8f2;
    --border-light: #e6eaf2;
    --border-table: #e3e6f0;
    --border-divider: #edf1f7;
    --border-dashed: #d9e1ee;

    /* Text Tokens */
    --text-primary: #3b4252;
    --text-secondary: #5f697a;
    --text-muted: #858796;
    --text-heading: #263142;
    --text-gray-100: #f8f9fc;
    --text-gray-200: #eaecf4;
    --text-gray-300: #dddfeb;
    --text-gray-400: #d1d3e2;
    --text-gray-500: #b7b9cc;
    --text-gray-600: #858796;
    --text-gray-700: #6e707e;
    --text-gray-800: #5a5c69;
    --text-gray-900: #3a3b45;

    /* Shadow Tokens */
    --shadow-color: rgba(31, 41, 55, 0.06);
    --shadow-sm: 0 0.22rem 0.75rem rgba(31, 41, 55, 0.055);
    --shadow-md: 0 0.25rem 0.9rem rgba(31, 41, 55, 0.07);
    --shadow-lg: 0 0.35rem 1.1rem rgba(31, 41, 55, 0.1);

    /* Scrollbar Tokens */
    --scrollbar-track: #f0f0f5;
    --scrollbar-thumb: #cfd7e6;

    /* Brand/Semantic Tokens - TIDAK BERUBAH di Dark Mode */
    --brand-primary: #4e73df;
    --brand-primary-dark: #224abe;
    --success: #1cc88a;
    --warning: #f6c23e;
    --danger: #e74a3b;
    --info: #36b9cc;
    --dark: #5a5c69;

    /* Soft Background Tokens */
    --bg-primary-soft: #eef3ff;
    --bg-info-soft: #eaf7fb;
    --bg-success-soft: #ecf8f1;
    --bg-warning-soft: #fff7e6;
    --bg-danger-soft: #fff0f0;

    /* Transition */
    --transition-duration: 200ms;
    --transition-timing: ease;
}

/* ============================================
   DARK MODE - Base Styles (Semua Token Gelap)
   ============================================ */
[data-theme="dark"] {
    /* Neutral Surface Tokens - Dark Mode */
    --page-bg: #0d1117;
    --surface-1: #161b22;
    --surface-2: #1c2128;
    --surface-3: #21262d;
    --surface-panel: #161b22;
    --surface-stat-card: #161b22;
    --surface-table: #161b22;
    --surface-input: #1c2128;
    --surface-dropdown: #1c2128;
    --surface-modal: #1c2128;
    --surface-footer: #161b22;
    --surface-sidebar: #161b22;
    --surface-empty-state: #161b22;
    --surface-report-mini: #1c2128;
    --surface-quick-link: #1c2128;
    --surface-hover-row: #1f2937;
    --surface-table-header: #1c2128;

    /* Border & Divider Tokens - Dark Mode */
    --border-color: #30363d;
    --border-light: #30363d;
    --border-table: #30363d;
    --border-divider: #30363d;
    --border-dashed: #484f58;

    /* Text Tokens - Dark Mode */
    --text-primary: #e6edf3;
    --text-secondary: #b1bac4;
    --text-muted: #768390;
    --text-heading: #f0f6fc;
    --text-gray-100: #e6edf3;
    --text-gray-200: #d0d7de;
    --text-gray-300: #afb8c1;
    --text-gray-400: #768390;
    --text-gray-500: #6e7681;
    --text-gray-600: #57606a;
    --text-gray-700: #4a525c;
    --text-gray-800: #3d444d;
    --text-gray-900: #313840;

    /* Shadow Tokens - Dark Mode */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 0.22rem 0.75rem rgba(0, 0, 0, 0.3);
    --shadow-md: 0 0.25rem 0.9rem rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 0.35rem 1.1rem rgba(0, 0, 0, 0.45);

    /* Scrollbar Tokens - Dark Mode */
    --scrollbar-track: #161b22;
    --scrollbar-thumb: #30363d;

    /* Soft Background Tokens - Dark Mode */
    --bg-primary-soft: #161b22;
    --bg-info-soft: #161b22;
    --bg-success-soft: #161b22;
    --bg-warning-soft: #161b22;
    --bg-danger-soft: #161b22;
}

/* ============================================
   DARK MODE - Smooth Transitions
   ============================================ */
[data-theme="dark"] body,
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .workspace-stat-card,
[data-theme="dark"] .workspace-panel,
[data-theme="dark"] .workspace-action-card,
[data-theme="dark"] .workspace-hero,
[data-theme="dark"] .command-hero,
[data-theme="dark"] .command-summary-card,
[data-theme="dark"] .command-panel,
[data-theme="dark"] .command-panel-scroll,
[data-theme="dark"] .report-mini-stat,
[data-theme="dark"] .quick-link-item,
[data-theme="dark"] .command-empty-state,
[data-theme="dark"] .table,
[data-theme="dark"] .table-responsive,
[data-theme="dark"] .bsc-table-wrap,
[data-theme="dark"] .form-control,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .dataTable,
[data-theme="dark"] .dataTables_wrapper,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .topbar,
[data-theme="dark"] .navbar,
[data-theme="dark"] .sticky-footer,
[data-theme="dark"] .alert,
[data-theme="dark"] .pagination,
[data-theme="dark"] .card .list-group,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .attention-item,
[data-theme="dark"] .recent-activity-item,
[data-theme="dark"] .quick-link-item,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .sidebar .nav-item .nav-link,
[data-theme="dark"] .sidebar .sidebar-brand {
    transition: background-color var(--transition-duration) var(--transition-timing),
                color var(--transition-duration) var(--transition-timing),
                border-color var(--transition-duration) var(--transition-timing),
                box-shadow var(--transition-duration) var(--transition-timing);
}

/* ============================================
   DARK MODE - Page Level
   ============================================ */
[data-theme="dark"] body {
    background-color: var(--page-bg) !important;
    color: var(--text-primary);
}

[data-theme="dark"] #wrapper #content-wrapper {
    background-color: var(--page-bg) !important;
}

/* ============================================
   DARK MODE - Sidebar (GELAPKAN SIDEBAR)
   ============================================ */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .sidebar-dark,
[data-theme="dark"] .sidebar .bg-gradient-primary,
[data-theme="dark"] .bg-gradient-primary,
[data-theme="dark"] ul.navbar-nav.bg-gradient-primary,
[data-theme="dark"] #accordionSidebar {
    background: linear-gradient(180deg, #1c2128 10%, #161b22 100%) !important;
}

/* Sidebar text colors */
[data-theme="dark"] .sidebar-dark .navbar-brand .text-white,
[data-theme="dark"] .sidebar .text-white-80 {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .sidebar .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .sidebar .nav-item .nav-link .text-gray-600 {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .sidebar .nav-item .nav-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Sidebar active state - keep visible but adjusted */
[data-theme="dark"] .sidebar .nav-item.active .nav-link,
[data-theme="dark"] .sidebar .nav-item .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Sidebar divider */
[data-theme="dark"] .sidebar .sidebar-divider {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Sidebar heading */
[data-theme="dark"] .sidebar .sidebar-heading {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Sidebar brand text */
[data-theme="dark"] .sidebar .sidebar-brand .text-primary {
    color: #ffffff !important;
}

/* ============================================
   DARK MODE - Navbar / Topbar
   ============================================ */
[data-theme="dark"] .navbar.bg-white,
[data-theme="dark"] .topbar,
[data-theme="dark"] .workspace-topbar,
[data-theme="dark"] .navbar-light {
    background-color: var(--surface-1) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .topbar-divider {
    border-color: var(--border-color) !important;
}

/* Topbar search */
[data-theme="dark"] .topbar .form-control {
    background-color: var(--surface-2);
    color: var(--text-primary);
}

/* Topbar user dropdown */
[data-theme="dark"] .dropdown-menu.dropdown-menu-right {
    background-color: var(--surface-dropdown) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .dropdown-menu .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu .dropdown-item:hover {
    background-color: var(--surface-hover-row);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu .dropdown-divider {
    border-top-color: var(--border-divider) !important;
}

[data-theme="dark"] .dropdown-menu .text-gray-400 {
    color: #768390 !important;
}

/* ============================================
   DARK MODE - Footer
   ============================================ */
[data-theme="dark"] .sticky-footer,
[data-theme="dark"] .footer,
[data-theme="dark"] footer.footer {
    background-color: var(--surface-footer) !important;
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .footer p {
    color: var(--text-muted);
}

/* ============================================
   DARK MODE - Cards (COMPREHENSIVE)
   ============================================ */
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-shadow,
[data-theme="dark"] .shadow .card,
[data-theme="dark"] .card.border-0 {
    background-color: var(--surface-1) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

/* Card header */
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-header.bg-white,
[data-theme="dark"] .card-header.bg-light,
[data-theme="dark"] .card-header.text-primary {
    background-color: var(--surface-2) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary);
}

/* Card footer */
[data-theme="dark"] .card-footer {
    background-color: var(--surface-2) !important;
    border-top-color: var(--border-color) !important;
}

/* Card list group */
[data-theme="dark"] .list-group-item {
    background-color: var(--surface-1);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Card text colors */
[data-theme="dark"] .card .text-gray-800,
[data-theme="dark"] .card .text-gray-900 {
    color: var(--text-primary) !important;
}

/* ============================================
   DARK MODE - Stat Cards (COMPREHENSIVE)
   ============================================ */
[data-theme="dark"] .card.border-left-primary,
[data-theme="dark"] .card.border-left-success,
[data-theme="dark"] .card.border-left-info,
[data-theme="dark"] .card.border-left-warning,
[data-theme="dark"] .card.shadow.h-100.py-2,
[data-theme="dark"] .card.shadow.h-100.py-2 .card-body,
[data-theme="dark"] .workspace-stat-card,
[data-theme="dark"] .stat-card {
    background-color: var(--surface-stat-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-primary);
}

/* Stat card icon - keep dim */
[data-theme="dark"] .text-gray-300.card-icon,
[data-theme="dark"] .card-body .row .col-auto i {
    color: #3d444d !important;
}

/* ============================================
   DARK MODE - Dashboard Hero
   ============================================ */
[data-theme="dark"] .workspace-hero,
[data-theme="dark"] .command-hero,
[data-theme="dark"] .hero-section {
    background-color: var(--surface-1) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ============================================
   DARK MODE - Command Summary Cards
   ============================================ */
[data-theme="dark"] .command-summary-card {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

[data-theme="dark"] .command-summary-card .summary-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .command-summary-card .summary-value {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .command-summary-card i {
    color: var(--text-muted) !important;
}

/* ============================================
   DARK MODE - Panels
   ============================================ */
[data-theme="dark"] .workspace-panel,
[data-theme="dark"] .workspace-action-card,
[data-theme="dark"] .command-panel {
    background-color: var(--surface-panel) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-primary);
}

/* ============================================
   DARK MODE - Tables (COMPREHENSIVE)
   ============================================ */
[data-theme="dark"] .table {
    color: var(--text-primary);
}

/* Table header/thead */
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table thead.thead-light th,
[data-theme="dark"] .table thead .thead-light th,
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable thead td,
[data-theme="dark"] .bsc-data-table thead th {
    background-color: var(--surface-table-header) !important;
    border-color: var(--border-table) !important;
    color: var(--text-heading) !important;
}

/* Table body */
[data-theme="dark"] .table td,
[data-theme="dark"] .table tbody td,
[data-theme="dark"] .table tbody th,
[data-theme="dark"] .bsc-data-table tbody td,
[data-theme="dark"] .bsc-data-table tbody th {
    border-color: var(--border-table);
    color: var(--text-primary);
}

/* Table striped */
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-theme="dark"] .table-striped tbody tr:nth-child(odd) {
    background-color: var(--surface-hover-row) !important;
}

/* Table hover */
[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] .table tbody tr:hover {
    background-color: var(--surface-hover-row) !important;
    color: var(--text-primary);
}

/* Table bordered */
[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered th,
[data-theme="dark"] .table-bordered td {
    border-color: var(--border-table);
}

/* ============================================
   DARK MODE - DataTables
   ============================================ */
[data-theme="dark"] div.dataTables_wrapper {
    color: var(--text-primary);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--text-primary);
}

[data-theme="dark"] div.dataTables_wrapper div.dataTables_filter input,
[data-theme="dark"] div.dataTables_wrapper div.dataTables_length select,
[data-theme="dark"] div.dataTables_wrapper div.dataTables_paginate a:not(.page-link) {
    background-color: var(--surface-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] table.dataTable {
    color: var(--text-primary);
}

/* DataTables sorting icons */
[data-theme="dark"] table.dataTable thead th:after,
[data-theme="dark"] table.dataTable thead th:before {
    opacity: 0.5;
}

/* ============================================
   DARK MODE - Empty State
   ============================================ */
[data-theme="dark"] .command-empty-state,
[data-theme="dark"] .empty-state {
    background-color: var(--surface-empty-state) !important;
    border-color: var(--border-dashed) !important;
    color: var(--text-primary);
}

/* ============================================
   DARK MODE - Quick Links
   ============================================ */
[data-theme="dark"] .quick-link-item {
    background-color: var(--surface-quick-link) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .quick-link-item:hover,
[data-theme="dark"] .quick-link-item:focus {
    background-color: var(--surface-hover-row) !important;
    border-color: var(--border-color);
}

/* ============================================
   DARK MODE - Report Mini Stats
   ============================================ */
[data-theme="dark"] .report-mini-stat {
    background-color: var(--surface-report-mini) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .report-mini-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .report-mini-value {
    color: var(--text-primary) !important;
}

/* ============================================
   DARK MODE - Attention / Activity Items
   ============================================ */
[data-theme="dark"] .attention-item,
[data-theme="dark"] .recent-activity-item {
    border-top-color: var(--border-divider) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .attention-title {
    color: var(--text-heading);
}

[data-theme="dark"] .attention-meta {
    color: var(--text-secondary);
}

[data-theme="dark"] .attention-icon {
    background-color: var(--bg-primary-soft);
    color: var(--brand-primary);
}

/* ============================================
   DARK MODE - Form Inputs (COMPREHENSIVE)
   ============================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="file"] {
    background-color: var(--surface-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    background-color: var(--surface-input) !important;
    border-color: var(--brand-primary) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] textarea:disabled {
    background-color: var(--surface-2) !important;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Search box in DataTables */
[data-theme="dark"] div.dataTables_wrapper div.dataTables_filter input {
    background-color: var(--surface-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   DARK MODE - Dropdown Menu
   ============================================ */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface-dropdown) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--surface-hover-row);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--border-divider) !important;
}

/* ============================================
   DARK MODE - Modal
   ============================================ */
[data-theme="dark"] .modal-content {
    background-color: var(--surface-modal) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-header {
    background-color: var(--surface-2) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-footer {
    background-color: var(--surface-2) !important;
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-title {
    color: var(--text-primary);
}

[data-theme="dark"] .modal-body {
    color: var(--text-primary);
}

[data-theme="dark"] .close {
    color: var(--text-primary);
    text-shadow: none;
    opacity: 0.7;
}

[data-theme="dark"] .close:hover {
    opacity: 1;
}

/* ============================================
   DARK MODE - Buttons
   ============================================ */
/* Tombol default tetap warna asli */
/* Hanya tombol light/secondary yang perlu penyesuaian */
[data-theme="dark"] .btn-light {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
    color: #e6edf3 !important;
}

[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn-light:focus {
    background-color: var(--surface-3) !important;
    border-color: var(--border-color) !important;
    color: #f0f6fc !important;
}

[data-theme="dark"] .btn-secondary {
    color: #ffffff !important;
}

/* ============================================
   DARK MODE - Badges (TETAP WARNA ASLI)
   ============================================ */
/* Badge tetap tidak diubah - warna semantic harus tetap */

/* ============================================
   DARK MODE - Scrollbar
   ============================================ */
[data-theme="dark"] .bsc-table-wrap::-webkit-scrollbar {
    height: 0.55rem;
}

[data-theme="dark"] .bsc-table-wrap::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track);
}

[data-theme="dark"] .bsc-table-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: var(--scrollbar-thumb);
}

[data-theme="dark"] .command-panel-scroll::-webkit-scrollbar {
    width: 0.45rem;
}

[data-theme="dark"] .command-panel-scroll::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track);
}

[data-theme="dark"] .command-panel-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: var(--scrollbar-thumb);
}

[data-theme="dark"] .table-responsive::-webkit-scrollbar {
    height: 0.55rem;
}

[data-theme="dark"] .table-responsive::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track);
}

[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: var(--scrollbar-thumb);
}

[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: #484f58;
}

[data-theme="dark"] ::-webkit-scrollbar {
    width: 0.45rem;
    height: 0.55rem;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: var(--scrollbar-thumb);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: #484f58;
}

/* ============================================
   DARK MODE - Text & Heading Colors
   ============================================ */
[data-theme="dark"] .workspace-topbar-title h4,
[data-theme="dark"] .workspace-hero h1,
[data-theme="dark"] .workspace-section-header h2,
[data-theme="dark"] .workspace-category-title h2,
[data-theme="dark"] .command-hero h1,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-heading);
}

[data-theme="dark"] .font-weight-bold {
    color: var(--text-heading);
}

[data-theme="dark"] .text-gray-900 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-800 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-700 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-600 {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-gray-400 {
    color: #768390 !important;
}

[data-theme="dark"] .text-gray-300 {
    color: #4a525c !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}

/* ============================================
   DARK MODE - Alerts
   ============================================ */
[data-theme="dark"] .alert {
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* ============================================
   DARK MODE - Pagination
   ============================================ */
[data-theme="dark"] .pagination .page-link {
    background-color: var(--surface-2);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-link:hover,
[data-theme="dark"] .pagination .page-link:focus {
    background-color: var(--surface-3);
    color: var(--text-heading);
    border-color: var(--border-color);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link {
    color: var(--text-muted);
    opacity: 0.5;
}

/* ============================================
   DARK MODE - Scroll to Top
   ============================================ */
[data-theme="dark"] .scroll-to-top {
    background: rgba(22, 27, 34, 0.7);
    color: #fff;
}

[data-theme="dark"] .scroll-to-top:hover {
    background: #30363d;
}

/* ============================================
   DARK MODE - Profile Modal Table
   ============================================ */
[data-theme="dark"] .modal-body .table tbody tr {
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-body .table th {
    color: var(--text-muted);
}

[data-theme="dark"] .modal-body .table td {
    color: var(--text-primary);
}

/* ============================================
   DARK MODE - Accessibility: Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    [data-theme="dark"] body,
    [data-theme="dark"] .card,
    [data-theme="dark"] .card-body,
    [data-theme="dark"] .card-header,
    [data-theme="dark"] .card-footer,
    [data-theme="dark"] .workspace-stat-card,
    [data-theme="dark"] .workspace-panel,
    [data-theme="dark"] .workspace-action-card,
    [data-theme="dark"] .workspace-hero,
    [data-theme="dark"] .command-hero,
    [data-theme="dark"] .command-summary-card,
    [data-theme="dark"] .command-panel,
    [data-theme="dark"] .report-mini-stat,
    [data-theme="dark"] .quick-link-item,
    [data-theme="dark"] .command-empty-state,
    [data-theme="dark"] .table,
    [data-theme="dark"] .form-control,
    [data-theme="dark"] select,
    [data-theme="dark"] textarea,
    [data-theme="dark"] .dropdown-menu,
    [data-theme="dark"] .modal-content,
    [data-theme="dark"] .modal-header,
    [data-theme="dark"] .modal-footer,
    [data-theme="dark"] .topbar,
    [data-theme="dark"] .navbar,
    [data-theme="dark"] .sticky-footer {
        transition: none;
    }
}

/* ============================================
   DARK MODE - Theme Toggle Button
   ============================================ */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
}

.theme-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.5);
}

.theme-toggle-btn .fa-sun {
    display: none;
}

.theme-toggle-btn .fa-moon {
    display: inline;
}

[data-theme="dark"] .theme-toggle-btn .fa-sun {
    display: inline;
}

[data-theme="dark"] .theme-toggle-btn .fa-moon {
    display: none;
}

/* ============================================
   DARK MODE - Evaluation Summary Grid
   ============================================ */
[data-theme="dark"] .evaluation-summary-grid {
    /* grid layout tidak berubah */
}

[data-theme="dark"] .evaluation-summary-item {
    background-color: var(--surface-1) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .evaluation-summary-item .summary-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .evaluation-summary-item .summary-value {
    color: var(--text-primary) !important;
}

/* ============================================
   DARK MODE - Evaluation Row (Merah Transparan)
   ============================================ */
[data-theme="dark"] .evaluation-row.row-needs-action {
    background-color: rgba(231, 74, 59, 0.08) !important;
    box-shadow: inset 0.28rem 0 0 #e74a3b !important;
}

[data-theme="dark"] .evaluation-row.row-needs-review {
    background-color: rgba(78, 115, 223, 0.08) !important;
}

/* ============================================
   DARK MODE - Monitoring Summary Row
   ============================================ */
[data-theme="dark"] .monitoring-summary-row {
    /* grid layout tidak berubah */
}

[data-theme="dark"] .monitoring-summary-card {
    background-color: var(--surface-1) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .monitoring-summary-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .monitoring-summary-value {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .monitoring-row-overdue {
    background: rgba(231, 74, 59, 0.08) !important;
}

/* ============================================
   DARK MODE - Evaluation Setup Tabs (nav-pills)
   ============================================ */
[data-theme="dark"] .evaluation-setup-tabs {
    /* flex layout tidak berubah */
}

[data-theme="dark"] .evaluation-setup-tab {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .evaluation-setup-tab:hover,
[data-theme="dark"] .evaluation-setup-tab:focus {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    background-color: var(--surface-3) !important;
}

[data-theme="dark"] .evaluation-setup-tab.is-active {
    border-color: var(--brand-primary) !important;
    background-color: rgba(78, 115, 223, 0.15) !important;
    color: var(--brand-primary) !important;
}

/* ============================================
   DARK MODE - Notification Events Form
   ============================================ */
[data-theme="dark"] .notification-setting-row {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .notification-setting-row-master {
    background-color: rgba(78, 115, 223, 0.08) !important;
    border-color: rgba(78, 115, 223, 0.3) !important;
}

[data-theme="dark"] .notification-bulk-toolbar {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .notification-setting-event.is-selected {
    background-color: rgba(78, 115, 223, 0.12) !important;
    border-color: rgba(78, 115, 223, 0.55) !important;
}

/* ============================================
   DARK MODE - Edit Employee Account Modal Popup
   ============================================ */
[data-theme="dark"] .modal.fade .modal-dialog,
[data-theme="dark"] .modal.show .modal-dialog {
    /* animasi tidak berubah */
}

[data-theme="dark"] .period-option-card {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .period-option-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .period-option-meta {
    color: var(--text-muted) !important;
}

/* ============================================
   DARK MODE - Monitoring Detail
   ============================================ */
[data-theme="dark"] .monitoring-detail-card {
    background-color: var(--surface-1) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .monitoring-detail-list dt {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .monitoring-detail-list dd {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .monitoring-timeline-item {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .monitoring-timeline-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .monitoring-timeline-value {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .monitoring-aspiration-item {
    background-color: var(--surface-1) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .monitoring-aspiration-question {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .monitoring-aspiration-answer {
    color: var(--text-secondary) !important;
}

/* ============================================
   DARK MODE - Alerts (border-left variants)
   ============================================ */
[data-theme="dark"] .alert-info {
    background-color: rgba(54, 185, 204, 0.1) !important;
    border-color: rgba(54, 185, 204, 0.3) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .alert-info .close {
    color: var(--text-primary);
    opacity: 0.7;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(246, 194, 62, 0.1) !important;
    border-color: rgba(246, 194, 62, 0.3) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .alert-warning .close {
    color: var(--text-primary);
    opacity: 0.7;
}

[data-theme="dark"] .alert-light {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .alert-light .close {
    color: var(--text-primary);
    opacity: 0.7;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(28, 200, 138, 0.1) !important;
    border-color: rgba(28, 200, 138, 0.3) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .alert-success .close {
    color: var(--text-primary);
    opacity: 0.7;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(231, 74, 59, 0.1) !important;
    border-color: rgba(231, 74, 59, 0.3) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .alert-danger .close {
    color: var(--text-primary);
    opacity: 0.7;
}

[data-theme="dark"] .alert-primary {
    background-color: rgba(78, 115, 223, 0.1) !important;
    border-color: rgba(78, 115, 223, 0.3) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .alert-primary .close {
    color: var(--text-primary);
    opacity: 0.7;
}

[data-theme="dark"] .alert-secondary {
    background-color: rgba(133, 135, 150, 0.1) !important;
    border-color: rgba(133, 135, 150, 0.3) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .alert-secondary .close {
    color: var(--text-primary);
    opacity: 0.7;
}

/* ============================================
   DARK MODE - Allocation Summary
   ============================================ */
[data-theme="dark"] .allocation-summary {
    background-color: var(--surface-1) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .allocation-summary.summary-invalid {
    background-color: rgba(231, 74, 59, 0.08) !important;
    border-color: #e9b8b4 !important;
}

/* ============================================
   DARK MODE - Table Responsive
   ============================================ */
[data-theme="dark"] .table-responsive {
    color: var(--text-primary);
}

[data-theme="dark"] .table-responsive .table {
    color: var(--text-primary);
}

[data-theme="dark"] .table-responsive .table thead th {
    color: var(--text-heading);
    background-color: var(--surface-table-header);
    border-bottom-color: var(--border-table);
}

[data-theme="dark"] .table-responsive .table tbody td {
    color: var(--text-primary);
    border-color: var(--border-table);
}

[data-theme="dark"] .table-responsive .table tbody tr:hover {
    background-color: var(--surface-hover-row);
}

/* ============================================
   DARK MODE - Input Group Append
   ============================================ */
[data-theme="dark"] .input-group-append {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .input-group-append .btn {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary);
}

[data-theme="dark"] .input-group-append .btn:hover,
[data-theme="dark"] .input-group-append .btn:focus {
    background-color: var(--surface-3) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

/* ============================================
   DARK MODE - KPI Target Label
   ============================================ */
[data-theme="dark"] .kpi-target-label {
    background-color: var(--surface-3) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .kpi-target-label.is-invalid {
    background-color: rgba(231, 74, 59, 0.1) !important;
    border-color: var(--danger) !important;
}

/* ============================================
   DARK MODE - KPI Direction Dropdown
   ============================================ */
[data-theme="dark"] .dropdown.kpi-direction-dropdown .dropdown-toggle {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown.kpi-direction-dropdown .dropdown-menu {
    background-color: var(--surface-dropdown) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .dropdown.kpi-direction-dropdown .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown.kpi-direction-dropdown .dropdown-item:hover,
[data-theme="dark"] .dropdown.kpi-direction-dropdown .dropdown-item:focus {
    background-color: var(--surface-hover-row);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown.kpi-direction-dropdown .dropdown-item.active,
[data-theme="dark"] .dropdown.kpi-direction-dropdown .dropdown-item:active {
    background-color: var(--brand-primary);
    color: #fff;
}

/* ============================================
   DARK MODE - Perspective Cell (Align Top)
   ============================================ */
[data-theme="dark"] .perspective-cell,
[data-theme="dark"] .perspective-cell.align-top {
    background: var(--surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
    vertical-align: top;
}



[data-theme="dark"] .perspective-cell .text-muted,
[data-theme="dark"] .perspective-cell.align-top .text-muted {
    color: var(--text-muted) !important;
}



/* ============================================
   DARK MODE - Theme Toggle Button (Topbar)
   ============================================ */
.theme-toggle-btn-topbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid #e3e8f2;
    background: #f8f9fc;
    color: #6e707e;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.theme-toggle-btn-topbar:hover {
    background-color: #e3e8f2;
    color: #3b4252;
    border-color: #d1d3e2;
}

.theme-toggle-btn-topbar:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.theme-toggle-btn-topbar .fa-sun {
    display: none;
}

.theme-toggle-btn-topbar .fa-moon {
    display: inline;
}

[data-theme="dark"] .theme-toggle-btn-topbar {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .theme-toggle-btn-topbar:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .theme-toggle-btn-topbar .fa-sun {
    display: inline;
}

[data-theme="dark"] .theme-toggle-btn-topbar .fa-moon {
    display: none;
}

/* ============================================
   DARK MODE - Perspective Group Elements
   ============================================ */
[data-theme="dark"] .perspective-group {
    background-color: var(--surface-1) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .perspective-group .kpi-row {
    background-color: var(--surface-1) !important;
    color: var(--text-primary);
}

/* Perspective Title - retains dynamic Bootstrap colors text-primary, text-success, etc. */

/* Perspective Summary Chip */
[data-theme="dark"] .perspective-summary-chip {
    background-color: var(--surface-2) !important;
}

/* Perspective Weight Input */
[data-theme="dark"] .perspective-weight-input {
    background-color: var(--surface-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .perspective-weight-input:focus {
    background-color: var(--surface-input) !important;
    border-color: var(--brand-primary) !important;
    color: var(--text-primary) !important;
}

/* Input Group Text */
[data-theme="dark"] .input-group-text {
    background-color: var(--surface-3) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary);
}

/* KPI Weight Input */
[data-theme="dark"] .kpi-weight {
    background-color: var(--surface-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .kpi-weight:focus {
    background-color: var(--surface-input) !important;
    border-color: var(--brand-primary) !important;
    color: var(--text-primary) !important;
}

/* KPI Target Input */
[data-theme="dark"] .kpi-target-value {
    background-color: var(--surface-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .kpi-target-value:focus {
    background-color: var(--surface-input) !important;
    border-color: var(--brand-primary) !important;
    color: var(--text-primary) !important;
}

/* KPI Target Type Select */
[data-theme="dark"] .kpi-target-type,
[data-theme="dark"] .custom-select {
    background-color: var(--surface-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .kpi-target-type:focus,
[data-theme="dark"] .custom-select:focus {
    background-color: var(--surface-input) !important;
    border-color: var(--brand-primary) !important;
    color: var(--text-primary) !important;
}

/* KPI Realization Input */
[data-theme="dark"] .kpi-realization {
    background-color: var(--surface-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .kpi-realization:focus {
    background-color: var(--surface-input) !important;
    border-color: var(--brand-primary) !important;
    color: var(--text-primary) !important;
}

/* Readonly Score Inputs */
[data-theme="dark"] .readonly-score {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* KPI Action Cell */
[data-theme="dark"] .kpi-action-cell {
    background-color: var(--surface-1) !important;
}

/* Add KPI Button */
[data-theme="dark"] .btn-add-kpi {
    background-color: transparent !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}

[data-theme="dark"] .btn-add-kpi:hover {
    background-color: rgba(78, 115, 223, 0.1) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}

/* KPI Direction Toggle Button */
[data-theme="dark"] .kpi-direction-toggle {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary);
}

[data-theme="dark"] .kpi-direction-toggle:hover {
    background-color: var(--surface-3) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

/* KPI Direction Hint */
[data-theme="dark"] .kpi-direction-toggle[title] {
    color: var(--text-secondary);
}

/* KPI Realization Suffix */
[data-theme="dark"] .kpi-realization-suffix {
    background-color: var(--surface-3) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary);
}

/* Over Limit Warning */
[data-theme="dark"] .perspective-warning {
    color: var(--danger) !important;
}

/* Perspective Used Weight */
[data-theme="dark"] .perspective-used-weight {
    color: var(--text-primary) !important;
}

/* Evaluation Period Label */
[data-theme="dark"] .evaluation-period-label {
    color: var(--text-secondary) !important;
}

/* KPI Textarea */
[data-theme="dark"] .kpi-row textarea.form-control {
    background-color: var(--surface-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .kpi-row textarea.form-control:focus {
    background-color: var(--surface-input) !important;
    border-color: var(--brand-primary) !important;
    color: var(--text-primary) !important;
}

/* KPI Target Wrap */
[data-theme="dark"] .kpi-target-wrap {
    background-color: transparent;
}

/* KPI Target Unit Input */
[data-theme="dark"] .kpi-target-unit {
    background-color: var(--surface-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .kpi-target-unit:focus {
    background-color: var(--surface-input) !important;
    border-color: var(--brand-primary) !important;
    color: var(--text-primary) !important;
}

/* KPI Unit Hint */
[data-theme="dark"] .kpi-unit-hint {
    color: var(--text-muted);
}

/* KPI Target Choice Buttons */
[data-theme="dark"] .kpi-target-choice button {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .kpi-target-choice button:hover {
    background-color: var(--surface-3) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

/* KPI Target Percent Label */
[data-theme="dark"] .kpi-target-percent-label {
    color: var(--text-secondary);
}

/* ============================================
   DARK MODE - Table Footer (tfoot)
   ============================================ */
[data-theme="dark"] tfoot,
[data-theme="dark"] tfoot.bg-light,
[data-theme="dark"] table tfoot tr {
    background-color: var(--surface-2) !important;
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] tfoot td {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] tfoot .font-weight-bold {
    color: var(--text-heading) !important;
}

[data-theme="dark"] tfoot .font-italic {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] tfoot .bg-light,
[data-theme="dark"] tfoot input.bg-white {
    background-color: var(--surface-3) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] tfoot .text-right {
    color: var(--text-primary) !important;
}

/* ============================================
   DARK MODE - Import/Export CTA Cards
   ============================================ */
/* CTA Card dengan inline style background #f0f7ff dan border #c9dff8 */
[data-theme="dark"] .card-body > .d-flex.align-items-start[style*="f0f7ff"],
[data-theme="dark"] .cta-card,
[data-theme="dark"] .import-cta,
[data-theme="dark"] .upload-cta,
[data-theme="dark"] .step-card {
    background-color: rgba(78, 115, 223, 0.08) !important;
    border-color: rgba(78, 115, 223, 0.3) !important;
}

/* CTA Icon - inline style color #4e73df */
[data-theme="dark"] .card-body > .d-flex.align-items-start[style*="f0f7ff"] > div[style*="4e73df"],
[data-theme="dark"] .cta-icon,
[data-theme="dark"] .step-icon {
    color: #7eb0ff !important;
}

/* CTA Card text-gray-800 */
[data-theme="dark"] .text-gray-800 {
    color: var(--text-heading) !important;
}

/* CTA Card rounded */
[data-theme="dark"] .card-body > .d-flex.align-items-start.rounded,
[data-theme="dark"] .rounded[style*="f0f7ff"] {
    background-color: rgba(78, 115, 223, 0.08) !important;
    border-color: rgba(78, 115, 223, 0.3) !important;
}

/* Custom File Input */
[data-theme="dark"] .custom-file {
    background-color: var(--surface-input) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .custom-file-input {
    background-color: var(--surface-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .custom-file-label {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .custom-file-label::after {
    background-color: var(--surface-3) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary);
}

/* Custom File Input Focus */
[data-theme="dark"] .custom-file-input:focus {
    background-color: var(--surface-input) !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

/* Custom File Input Invalid */
[data-theme="dark"] .custom-file-input:invalid {
    background-color: var(--surface-input) !important;
    border-color: var(--danger) !important;
}

/* Form Text Muted */
[data-theme="dark"] .form-text.text-muted {
    color: var(--text-muted) !important;
}

/* ============================================
   DARK MODE - Extra Evaluation & Aspiration Fixes
   ============================================ */
[data-theme="dark"] .perspective-row.is-invalid .perspective-summary-chip {
    background-color: rgba(231, 74, 59, 0.1) !important;
    background-image: none !important;
    border-color: var(--danger) !important;
}
[data-theme="dark"] .kpi-direction-toggle.is-lower {
    background-color: rgba(231, 74, 59, 0.1) !important;
    border-color: var(--danger) !important;
    color: var(--danger) !important;
}
[data-theme="dark"] .form-control.is-invalid,
[data-theme="dark"] .custom-select.is-invalid,
[data-theme="dark"] .perspective-weight-input.is-invalid,
[data-theme="dark"] .kpi-weight.is-invalid,
[data-theme="dark"] .kpi-target-value.is-invalid,
[data-theme="dark"] .kpi-realization.is-invalid {
    background-color: rgba(231, 74, 59, 0.1) !important;
    border-color: var(--danger) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .period-pill {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .aspiration-context > div {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .aspiration-context > div strong {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .aspiration-question-card {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .aspiration-question-top label {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .aspiration-scale-option .custom-control-label {
    background-color: var(--surface-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .aspiration-scale-option .custom-control-input:checked ~ .custom-control-label {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #ffffff !important;
}
[data-theme="dark"] .aspiration-scale-option .custom-control-label:hover {
    background-color: var(--surface-3) !important;
    color: var(--text-heading) !important;
}
[data-theme="dark"] .evaluator-aspiration-item {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .evaluator-aspiration-item .aspiration-question-label {
    border-bottom-color: var(--border-color) !important;
    color: var(--text-heading) !important;
}
[data-theme="dark"] .evaluator-aspiration-item .aspiration-answer-text {
    color: var(--text-secondary) !important;
}

/* ============================================
   DARK MODE - Template Columns Table
   ============================================ */
/* Card Header text-gray-700 */
[data-theme="dark"] .card-header .text-gray-700,
[data-theme="dark"] .text-gray-700 {
    color: var(--text-heading) !important;
}

/* Table thead-light */
[data-theme="dark"] .thead-light th,
[data-theme="dark"] table thead.thead-light th {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-heading) !important;
}

/* Table body rows */
[data-theme="dark"] table tbody tr {
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Table-light rows */
[data-theme="dark"] .table-light,
[data-theme="dark"] tr.table-light {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] tr.table-light td {
    color: var(--text-primary) !important;
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
}

/* Employee import template columns - table-light rows */
[data-theme="dark"] .employee-import-page table tr.table-light,
[data-theme="dark"] .employee-import-page table tr.table-light td,
[data-theme="dark"] .employee-import-page table .table-light,
[data-theme="dark"] .employee-import-page table .table-light td {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Table-sm */
[data-theme="dark"] .table-sm td,
[data-theme="dark"] .table-sm th {
    padding: 0.5rem;
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Text muted in table */
[data-theme="dark"] table tbody .text-muted {
    color: var(--text-muted) !important;
}

/* Text danger in table */
[data-theme="dark"] .text-danger {
    color: var(--danger) !important;
}

/* Text primary icon (caret-down) */
[data-theme="dark"] .text-primary {
    /* Don't override ALL text-primary - only specific icons */
}

[data-theme="dark"] table tbody .text-primary,
[data-theme="dark"] .card-footer .text-primary {
    color: #7eb0ff !important;
}

/* Card footer bg-transparent */
[data-theme="dark"] .card-footer.bg-transparent,
[data-theme="dark"] .card-footer {
    background-color: var(--surface-2) !important;
    border-top-color: var(--border-color) !important;
    color: var(--text-muted);
}

/* Card footer muted */
[data-theme="dark"] .card-footer .text-muted {
    color: var(--text-muted) !important;
}

/* Card footer small */
[data-theme="dark"] .card-footer small {
    color: var(--text-secondary);
}

/* Font weight bold text-gray */
[data-theme="dark"] .font-weight-bold.text-gray-700 {
    color: var(--text-heading) !important;
}

[data-theme="dark"] .font-weight-bold.text-gray-800 {
    color: var(--text-heading) !important;
}

/* Table cell text-center font-weight-bold */
[data-theme="dark"] td.text-center.font-weight-bold {
    color: var(--text-heading);
}

/* Icon info circle in footer */
[data-theme="dark"] .card-footer .fa-info-circle {
    color: var(--brand-primary);
}

/* ============================================
   DARK MODE - Semantic Border Left Status Fixes
   ============================================ */

/* Evaluation Summary Items */
[data-theme="dark"] .evaluation-summary-item.summary-total {
    border-left-color: #4e73df !important;
}
[data-theme="dark"] .evaluation-summary-item.summary-action {
    border-left-color: #e74a3b !important;
}
[data-theme="dark"] .evaluation-summary-item.summary-waiting {
    border-left-color: #f6c23e !important;
}
[data-theme="dark"] .evaluation-summary-item.summary-done {
    border-left-color: #1cc88a !important;
}

/* Monitoring Table Rows */
[data-theme="dark"] .monitoring-row td:first-child {
    border-left: 4px solid transparent !important;
}
[data-theme="dark"] .monitoring-row-not_started td:first-child {
    border-left-color: #c7cedb !important;
}
[data-theme="dark"] .monitoring-row-in_progress td:first-child {
    border-left-color: #36b9cc !important;
}
[data-theme="dark"] .monitoring-row-waiting td:first-child {
    border-left-color: #f6c23e !important;
}
[data-theme="dark"] .monitoring-row-done td:first-child {
    border-left-color: #1cc88a !important;
}

/* Monitoring Summary Cards */
[data-theme="dark"] .monitoring-summary-card.summary-info {
    border-color: rgba(54, 185, 204, 0.6) !important;
}
[data-theme="dark"] .monitoring-summary-card.summary-warning {
    border-color: rgba(246, 194, 62, 0.7) !important;
}
[data-theme="dark"] .monitoring-summary-card.summary-success {
    border-color: rgba(28, 200, 138, 0.7) !important;
}
[data-theme="dark"] .monitoring-summary-card.summary-muted {
    border-color: var(--border-color) !important;
}

/* ==========================================================================
   Dark Mode Support untuk Preview Table di Employee Import
   ========================================================================== */

/* Table variant rows (warning, success, danger) - dark background */
[data-theme="dark"] .table-warning,
[data-theme="dark"] tr.table-warning,
[data-theme="dark"] .table-warning td,
[data-theme="dark"] tr.table-warning td {
    background-color: #3d2e00 !important;
    color: #ffd800 !important;
}

[data-theme="dark"] .table-success,
[data-theme="dark"] tr.table-success,
[data-theme="dark"] .table-success td,
[data-theme="dark"] tr.table-success td {
    background-color: #0d3b26 !important;
    color: #3dd68a !important;
}

[data-theme="dark"] .table-danger,
[data-theme="dark"] tr.table-danger,
[data-theme="dark"] .table-danger td,
[data-theme="dark"] tr.table-danger td {
    background-color: #3d0000 !important;
    color: #ff6b6b !important;
}

/* Badge variants in dark mode */
[data-theme="dark"] .badge-warning {
    background-color: #3d2e00 !important;
    color: #ffd800 !important;
    border-color: rgba(255, 216, 0, 0.3) !important;
}

[data-theme="dark"] .badge-success {
    background-color: #0d3b26 !important;
    color: #3dd68a !important;
}

[data-theme="dark"] .badge-danger {
    background-color: #3d0000 !important;
    color: #ff6b6b !important;
}

/* Table text colors in dark mode */
[data-theme="dark"] .table tbody .text-warning {
    color: #ffd800 !important;
}

[data-theme="dark"] .table tbody .text-danger {
    color: #ff6b6b !important;
}

[data-theme="dark"] .table tbody .text-success {
    color: #3dd68a !important;
}

/* Preview table specific overrides */
[data-theme="dark"] #previewTable tbody td,
[data-theme="dark"] #previewTable tbody th {
    color: var(--text-primary) !important;
    border-color: var(--border-table) !important;
}

[data-theme="dark"] #previewTable [class*="preview-col-"] {
    color: var(--text-primary) !important;
}

/* Message Center */
[data-theme="dark"] .message-center-dropdown .dropdown-item,
[data-theme="dark"] .notification-item {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .notification-dropdown-preview {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .notification-page-title,
[data-theme="dark"] .notification-dropdown-title {
    color: var(--text-primary) !important;
}

/* Previous KPI picker */
[data-theme="dark"] .previous-kpi-item {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .previous-kpi-item:hover {
    background-color: var(--surface-hover-row) !important;
    border-color: #4e73df !important;
    box-shadow: none !important;
}

[data-theme="dark"] .previous-kpi-item .text-dark,
[data-theme="dark"] .previous-kpi-metric-value {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .previous-kpi-metric {
    background-color: var(--surface-3) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .previous-kpi-metric-label {
    color: var(--text-muted) !important;
}

/* Select2 clear (x) button in dark mode - "Add Historical Evaluation" dropdown */
[data-theme="dark"] .select2-selection__clear {
    color: #ffffff !important;
}