/* --- Variabel & Gaya untuk Mode Gelap --- */
html.dark {
    color-scheme: dark;

    /* Palet Warna Utama (Mode Gelap) */
    --primary-color: #8ab4f8;
    --primary-color-dark: #3c8bf2;
    --primary-focus-shadow: 0 0 0 4px rgba(138, 180, 248, 0.25);
    
    /* Warna khusus untuk tombol biru agar konsisten */
    --primary-button-bg: #8ab4f8;
    --primary-button-bg-hover: #9ac0f9;
    
    /* Palet Warna Dasar (Mode Gelap) */
    --secondary-color: #282a2d;
    --background-color: #1F1F1F;
    --text-color: #E8EAED;
    --text-color-light: #969BA1;
    --border-color: #444746;
    --card-bg-color: #282a2d;

    /* Warna Status (Mode Gelap) */
    --danger-color: #F28B82;
    --danger-color-light-bg: rgba(242, 139, 130, 0.1);

    /* Properti UI (Mode Gelap) */
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* --- Penyesuaian Komponen Spesifik --- */

html.dark body,
html.dark .header,
html.dark .sidebar,
html.dark .list-item,
html.dark .form-card,
html.dark .modal-content,
html.dark .filter-dropdown__menu,
html.dark .custom-dropdown__options,
html.dark .profile-dropdown__menu,
html.dark .nav-dropdown__menu,
html.dark .desktop-app-card {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
    transition: all var(--transition-speed);
}

/* Aturan khusus untuk kartu di mode gelap */
html.dark .card {
    background-color: var(--card-bg-color);
    border: 3px solid transparent;
}


html.dark body {
    background-color: var(--background-color);
}

html.dark .profile-dropdown__item {
    transition: all var(--transition-speed);
}

html.dark .close-sidebar-btn:hover,
html.dark .sidebar__nav .nav__link:hover,
html.dark .theme-toggle:hover,
html.dark .hamburger:hover,
html.dark .profile-dropdown__toggle:hover,
html.dark .profile-dropdown__item:hover,
html.dark .nav-dropdown__menu .nav__link:hover,
html.dark .hybrid-dropdown__option:hover,
html.dark .hybrid-dropdown__option--create:hover {
    background-color: #3c4043;
}
html.dark .profile-dropdown__item.is-logout:hover {
    background-color: var(--danger-color-light-bg);
}

html.dark .page__header .page-title {
    background-color: var(--card-bg-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

html.dark .search-bar input,
html.dark .form-group input, 
html.dark .form-group select {
    background-color: #3c4043;
    border-color: var(--border-color);
    color: var(--text-color);
}
html.dark .search-bar input::placeholder,
html.dark .form-group input::placeholder {
    color: var(--text-color-light);
}
html.dark .search-bar input:focus,
html.dark .form-group input:focus, 
html.dark .form-group select:focus {
    background-color: #3c4043;
}

html.dark .btn-secondary {
    background-color: #3c4043 !important;
    color: var(--text-color);
    border-color: var(--border-color);
}
html.dark .btn-secondary:hover {
    background-color: #4e5256;
}

html.dark .btn-primary,
html.dark .fab,
html.dark #filterBtn.filter-all,
html.dark #accountFilterBtn.filter-all {
    background-color: var(--primary-button-bg);
    color: #202124;
    font-weight: 600;
}
html.dark .btn-primary:hover,
html.dark .fab:hover,
html.dark #filterBtn.filter-all:hover,
html.dark #accountFilterBtn.filter-all:hover {
     background-color: var(--primary-button-bg-hover);
}

html.dark .action-dropdown__menu a:hover{
    background-color: #3c4043;
}

html.dark .filter-dropdown__menu li:hover {
    background-color: #3c4043;
}

html.dark .see-proof-btn {
    background-color: var(--success-color);
    color: #202124;
}
html.dark .see-proof-btn:hover {
    background-color: var(--success-color-dark);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

html.dark #filterBtn.filter-available,
html.dark #accountFilterBtn.filter-available,
html.dark #accountFilterBtn.filter-admin,
html.dark #filterBtn.filter-empty,
html.dark .btn-danger,
html.dark .btn-success {
    color: #202124; 
    font-weight: 600;
}

html.dark .custom-dropdown__selected {
    background-color: #3c4043;
    border-color: var(--border-color);
}
html.dark .custom-dropdown__option:hover {
    background-color: #3c4043;
}

/* ==== Gaya Untuk Hybrid Dropdown ==== */

html.dark .hybrid-dropdown__selected {
    background-color: #3c4043;
    border-color: var(--border-color);
    color: var(--text-color);
}
html.dark .hybrid-dropdown__placeholder {
    color: var(--text-color-light);
}
html.dark .hybrid-dropdown__arrow {
    color: var(--text-color-light);
}
html.dark .hybrid-dropdown__options {
    background-color: var(--card-bg-color);
    border-color: var(--primary-color);
}
html.dark .hybrid-dropdown__option--create {
    color: var(--primary-color);
    border-bottom-color: var(--border-color);
}
html.dark .hybrid-dropdown__new-input-container {
     background-color: transparent;
}
html.dark .hybrid-dropdown__new-input {
    background-color: #4e5256;
    border-color: var(--border-color);
    color: var(--text-color);
}
html.dark .hybrid-dropdown__new-input:focus {
     background-color: #4e5256;
     border-color: var(--primary-color);
}
html.dark .hybrid-dropdown__action-btn {
    color: var(--text-color-light);
}
html.dark .hybrid-dropdown__action-btn:hover {
    background-color: var(--border-color);
}
html.dark .hybrid-dropdown__action-btn.edit:hover {
    color: var(--primary-color);
}
html.dark .hybrid-dropdown__action-btn.delete:hover {
    color: var(--danger-color);
}

html.dark .calendar-select {
    background-color: #3c4043;
    border-color: var(--border-color);
    color: var(--text-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23E8EAED' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
html.dark .calendar-header__nav:hover {
    background-color: #3c4043;
}

html.dark .image-uploader {
    background-color: #35363a;
    border-color: var(--border-color);
}
html.dark .image-uploader:hover, 
html.dark .image-uploader.drag-over {
    border-color: var(--primary-color);
    background-color: #3c4043;
}
html.dark .image-uploader__preview {
    background-color: var(--card-bg-color);
}

html.dark .signature-container {
    background-color: #ffffff;
    border-color: var(--border-color);
}

html.dark .modal {
    background-color: rgba(0,0,0,0.7);
}
html.dark .modal-header,
html.dark .modal-footer,
html.dark .sidebar__header,
html.dark .sidebar__footer {
    border-color: var(--border-color);
}

html.dark .loading-overlay {
    background-color: rgba(31, 31, 31, 0.5);
}

html.dark .notification {
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}
html.dark .notification.success,
html.dark .notification.error {
     color: #202124; 
     font-weight: 500;
}
html.dark .notification.success {
    background-color: var(--success-color);
}
html.dark .notification.error {
    background-color: var(--danger-color);
}

html.dark .card__quantity-chip {
    background-color: var(--primary-color);
    color: #202124;
    font-weight: 700;
}

/* Penyesuaian untuk Kartu yang Dipilih dalam Mode Gelap */
html.dark .card.is-selected {
    border-color: var(--primary-color);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

html.dark .card.is-selected .card__selection-icon {
    color: #4285f4;
}

html.dark .account-list-header {
    background-color: var(--background-color);
}

html.dark .account-list-item.is-selected {
    box-shadow: inset 0 0 0 2px var(--primary-color);
    background-color: var(--background-color);
}

html.dark .fab {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

html.dark ::-webkit-scrollbar-thumb {
    background-color: #444746;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #5f6368;
}

html.dark .date-separator__badge {
    background-color: #3c4043;
    border-color: var(--border-color);
}

html.dark .card-placeholder {
    background-color: var(--card-bg-color);
    background-image: linear-gradient(to right, var(--card-bg-color) 0%, #444746 20%, var(--card-bg-color) 40%, var(--card-bg-color) 100%);
}

html.dark .modal-tab-content code.language-bash {
    color: #abb2bf;
}

/* Penyesuaian untuk Komponen Modal Kamera di Mode Gelap */
html.dark .camera-select-wrapper{
    background: var(--background-color);
}
html.dark .camera-select-wrapper:hover {
    background-color: #3c4043;
}
html.dark .camera-select-list option {
    color: var(--text-color);
    background-color: var(--background-color);
}

/* Penyesuaian untuk Penampil Gambar di Mode Gelap */
html.dark .image-viewer {
    background: var(--glass-bg-dark);
    border: 1px solid var(--glass-border-dark);
}
html.dark .image-viewer__header {
    background: var(--card-bg-color);
}
html.dark .image-viewer__body {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Penyesuaian untuk Login Page di Mode Gelap */
html.dark .login-page-container .form-group input {
    background-color: rgba(0,0,0,0.2);
}
html.dark .login-actions .btn-secondary {
    background-color: rgba(255,255,255,0.1);
}
html.dark #recaptcha-widget-container {
    background-color: #1a1a1a;
}
html.dark .recaptcha-placeholder {
    background-color: rgba(0,0,0,0.2);
}

/* Dark Mode Adjustments for Badges */
html.dark .status-badge.normal {
    background-color: rgba(37, 211, 102, 0.2);
    color: #66bb6a;
    border-color: rgba(37, 211, 102, 0.4);
}

html.dark .status-badge.bad {
    background-color: rgba(230, 57, 70, 0.2);
    color: #f28b82;
    border-color: rgba(230, 57, 70, 0.4);
}

html.dark .status-badge.swapped-normal {
    background-color: rgba(138, 180, 248, 0.2);
    color: #8ab4f8;
    border-color: rgba(138, 180, 248, 0.4);
}

/* Dark Mode Funding Source Badges */
html.dark .badge-source-bos {
    background-color: rgba(138, 180, 248, 0.15);
    color: #8ab4f8;
    border-color: rgba(138, 180, 248, 0.3);
}

html.dark .badge-source-apbd {
    background-color: rgba(52, 211, 153, 0.15);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.3);
}

html.dark .badge-source-hibah {
    background-color: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

html.dark .badge-source-lainnya {
    background-color: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
    border-color: rgba(156, 163, 175, 0.3);
}

/* ==========================================================================
   Modul BHP, Barang Rusak, Lab PC, Admin Borrow & Audit Logs (Dark Mode)
   ========================================================================== */

/* --- BHP Module Dark Mode --- */
html.dark .bhp-header-actions,
html.dark .bhp-kpi-card,
html.dark .bhp-card,
html.dark .bhp-table-container {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
}

html.dark .bhp-search-box input,
html.dark .bhp-category-select {
    background-color: #3c4043;
    border-color: var(--border-color);
    color: var(--text-color);
}

html.dark .btn-bhp-print {
    background-color: #3c4043;
    border-color: var(--border-color);
    color: var(--text-color);
}
html.dark .btn-bhp-print:hover {
    background-color: #4e5256;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

html.dark .bhp-tab-btn {
    color: var(--text-color-light);
}
html.dark .bhp-tab-btn:hover {
    color: var(--text-color);
    background-color: rgba(255, 255, 255, 0.06);
}
html.dark .bhp-tab-btn.active {
    color: var(--primary-color);
}

html.dark .bhp-table th {
    background-color: #1e293b;
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

html.dark .bhp-table td {
    border-bottom-color: var(--border-color);
    color: var(--text-color);
}

html.dark .bhp-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.04);
}

html.dark .bhp-type-card {
    border-color: var(--border-color);
    background-color: var(--card-bg-color);
    color: var(--text-color);
}

/* --- Damaged Goods Module Dark Mode --- */
html.dark .damaged-header-actions,
html.dark .damaged-kpi-card,
html.dark .damaged-card,
html.dark .damaged-table-container {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
}

html.dark .damaged-search-box input,
html.dark .damaged-select-filter {
    background-color: #3c4043;
    border-color: var(--border-color);
    color: var(--text-color);
}

html.dark .damaged-tab-btn {
    color: var(--text-color-light);
}
html.dark .damaged-tab-btn:hover {
    color: var(--text-color);
    background-color: rgba(255, 255, 255, 0.06);
}
html.dark .damaged-tab-btn.active {
    color: #ef4444;
}

html.dark .damaged-table th {
    background-color: #1e293b;
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

html.dark .damaged-table td {
    border-bottom-color: var(--border-color);
    color: var(--text-color);
}

html.dark .damaged-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.04);
}

/* --- Lab PC Module Dark Mode --- */
html.dark .labpc-header-actions,
html.dark .labpc-kpi-card,
html.dark .labpc-card {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
}

html.dark .labpc-search-box input,
html.dark .labpc-select-filter {
    background-color: #3c4043;
    border-color: var(--border-color);
    color: var(--text-color);
}

html.dark .btn-labpc-print {
    background-color: #3c4043;
    border-color: var(--border-color);
    color: var(--text-color);
}
html.dark .btn-labpc-print:hover {
    background-color: #4e5256;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

html.dark .btn-labpc-quick-btn--ticket {
    background-color: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
}
html.dark .btn-labpc-quick-btn--ticket:hover {
    background-color: rgba(239, 68, 68, 0.28) !important;
    color: #fca5a5 !important;
}

html.dark .btn-labpc-quick-btn--booking {
    background-color: rgba(37, 99, 235, 0.18) !important;
    border-color: rgba(37, 99, 235, 0.4) !important;
    color: #60a5fa !important;
}
html.dark .btn-labpc-quick-btn--booking:hover {
    background-color: rgba(37, 99, 235, 0.28) !important;
    color: #93c5fd !important;
}

html.dark .btn-labpc-quick-btn--report {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fbbf24 !important;
}
html.dark .btn-labpc-quick-btn--report:hover {
    background-color: rgba(245, 158, 11, 0.25) !important;
    color: #fde68a !important;
}

html.dark .btn-labpc-quick-btn--floorplan {
    background-color: rgba(37, 99, 235, 0.18) !important;
    border-color: rgba(37, 99, 235, 0.4) !important;
    color: #60a5fa !important;
}
html.dark .btn-labpc-quick-btn--floorplan:hover {
    background-color: rgba(37, 99, 235, 0.28) !important;
    color: #93c5fd !important;
}

html.dark .labpc-room-pill {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
    color: var(--text-color-light);
}
html.dark .labpc-room-pill:hover {
    color: var(--text-color);
    border-color: var(--primary-color);
}
html.dark .labpc-room-pill.active {
    background-color: var(--primary-color);
    color: #0f172a;
    font-weight: 700;
}

html.dark .labpc-view-btn {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    border-color: var(--border-color);
}
html.dark .labpc-view-btn.active {
    background-color: var(--primary-color);
    color: #0f172a;
    font-weight: 700;
}

/* --- Admin Borrow Module Dark Mode --- */
html.dark .admin-borrow-catalog,
html.dark .admin-borrow-desk-card,
html.dark .admin-quick-card {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
}

html.dark .admin-quick-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

html.dark .admin-special-rules-card {
    background: rgba(30, 58, 138, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

html.dark .admin-special-rules-badge {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

html.dark .btn-duration-pill {
    background: var(--card-bg-color);
    border-color: var(--border-color);
    color: var(--text-color);
}
html.dark .btn-duration-pill:hover {
    border-color: var(--primary-color);
}
html.dark .btn-duration-pill.active {
    background: var(--primary-color);
    color: #0f172a;
    font-weight: 700;
}

html.dark .duration-summary-hint {
    background: rgba(30, 58, 138, 0.25);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}

html.dark .silent-notif-label {
    background: var(--card-bg-color);
    border-color: var(--border-color);
}
html.dark .silent-notif-label:hover {
    background: rgba(234, 179, 8, 0.08);
    border-color: rgba(234, 179, 8, 0.4);
}

html.dark #longTermLoanFields {
    background: rgba(30, 58, 138, 0.18) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

/* --- Audit Logs Module Dark Mode --- */
html.dark .audit-logs-card {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
}

html.dark .audit-search-box input,
html.dark .audit-action-select {
    background-color: #3c4043;
    border-color: var(--border-color);
    color: var(--text-color);
}

html.dark .data-table-custom thead tr {
    background: #1e293b;
    border-bottom-color: #334155;
    color: var(--text-color);
}

html.dark .data-table-custom td {
    border-bottom-color: var(--border-color);
    color: var(--text-color);
}

html.dark .data-table-custom tr.audit-row:hover td {
    background-color: rgba(255, 255, 255, 0.04);
}

/* --- Dark Mode Smart Overdue Alert --- */
html.dark .transaction-group.transaction-group--overdue {
    border-left: 4px solid #f87171 !important;
    background: rgba(239, 68, 68, 0.08);
}