/* ============================================================ Admin Dark Mode Overrides Activated when is set. Bootstrap 5 handles most components via CSS vars; this file covers third-party widgets (DataTables, Buttons) and custom components that Bootstrap cannot reach automatically. ============================================================ */ /* ── DataTables: search input & length select ── */ [data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input[type="search"], [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select { background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); border-radius: 0.375rem; } [data-bs-theme="dark"] .crud-dt-search input[type="search"], [data-bs-theme="dark"] .crud-dt-search .crud-dt-search-input { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%239aa4af' d='M10 4a6 6 0 1 0 3.87 10.58l4.27 4.27 1.41-1.41-4.27-4.27A6 6 0 0 0 10 4zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z'/%3e%3c/svg%3e"); } [data-bs-theme="dark"] .crud-dt-checkbox { border-color: rgba(255, 255, 255, 0.35); } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input[type="search"]:focus { border-color: rgba(var(--bs-primary-rgb), 0.5); box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15); outline: 0; } /* Select arrow fix for dark bg */ [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select { 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='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 14px 10px; padding-right: 1.75rem; appearance: none; } /* Select2 dark mode */ [data-bs-theme="dark"] .select2-container--default .select2-selection--single, [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); } [data-bs-theme="dark"] .select2-container--default .select2-selection--single { min-height: calc(1.5em + 0.75rem + 2px); } [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered { color: var(--bs-body-color); } [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9aa4af; } [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #adb5bd transparent transparent transparent; } [data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #adb5bd transparent; } [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__clear, [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__clear { color: #adb5bd; } [data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single, [data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple, [data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single, [data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--multiple { border-color: rgba(var(--bs-primary-rgb), 0.5); box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15); } [data-bs-theme="dark"] .select2-dropdown { background-color: #18212b; border-color: rgba(255, 255, 255, 0.12); color: var(--bs-body-color); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.42); } [data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field, [data-bs-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field { background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); } [data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field:focus, [data-bs-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field:focus { border-color: rgba(var(--bs-primary-rgb), 0.5); box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15); outline: 0; } [data-bs-theme="dark"] .select2-container--default .select2-results__option { color: var(--bs-body-color); } [data-bs-theme="dark"] .select2-container--default .select2-results__option--selected { background-color: rgba(255, 255, 255, 0.06); color: #f3f6fb; } [data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: rgba(var(--bs-primary-rgb), 0.24); color: #f3f6fb; } [data-bs-theme="dark"] .select2-container--default .select2-results__option--disabled { color: #7f8a96; } /* ── DataTables Buttons (vendor CSS hardcodes colors; override here) ── */ [data-bs-theme="dark"] .dt-buttons .btn, [data-bs-theme="dark"] .dt-buttons .dt-button { color: #adb5bd; border-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.04); } [data-bs-theme="dark"] .dt-buttons .btn:hover, [data-bs-theme="dark"] .dt-buttons .dt-button:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .dt-buttons .btn:focus-visible, [data-bs-theme="dark"] .dt-buttons .dt-button:focus-visible { box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1); outline: 0; } [data-bs-theme="dark"] .dt-buttons .btn:active, [data-bs-theme="dark"] .dt-buttons .dt-button:active { color: #fff; background-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.45); } [data-bs-theme="dark"] .dt-buttons .voucher-dt-export-btn, [data-bs-theme="dark"] .dt-buttons .dt-button.voucher-dt-export-btn { background-color: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); } [data-bs-theme="dark"] .dt-button-collection { border-color: rgba(255, 255, 255, 0.1); background: #18212b; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.42); } [data-bs-theme="dark"] .dt-button-collection .dt-button { color: #d0d7e2; } [data-bs-theme="dark"] .dt-button-collection .dt-button:hover, [data-bs-theme="dark"] .dt-button-collection .dt-button:focus-visible { background: rgba(255, 255, 255, 0.08); color: #fff; } [data-bs-theme="dark"] .dt-button-collection .dt-button.dt-button-active, [data-bs-theme="dark"] .dt-button-collection .dt-button.dt-button-active-a { background: rgba(var(--bs-primary-rgb), 0.2); color: #9fcbff; } /* ── DataTables info / pagination colors ── */ [data-bs-theme="dark"] .dataTables_wrapper .dataTables_info, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--bs-body-color); } /* ── CRUD toolbar extras ── */ [data-bs-theme="dark"] .crud-dt-show-deleted { color: var(--bs-body-color); } [data-bs-theme="dark"] .crud-action-btn { opacity: 0.8; } [data-bs-theme="dark"] .crud-action-btn:hover { opacity: 1; } [data-bs-theme="dark"] .report-filter-card, [data-bs-theme="dark"] .report-table-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .report-filter-card .form-label { color: rgba(226, 232, 240, 0.72); } [data-bs-theme="dark"] .report-summary-card { border-color: rgba(var(--report-card-accent-rgb), 0.24); background: linear-gradient(180deg, rgba(var(--report-card-accent-rgb), 0.18), rgba(21, 29, 40, 0.9)); box-shadow: 0 0.7rem 1.35rem rgba(0, 0, 0, 0.22); } [data-bs-theme="dark"] .report-summary-card .text-body-secondary.small { color: rgba(226, 232, 240, 0.68) !important; } [data-bs-theme="dark"] .report-summary-card .fs-4, [data-bs-theme="dark"] .report-summary-card .fw-semibold { color: #f8fafc; } [data-bs-theme="dark"] .report-table-footer > * > * { background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.18), rgba(21, 29, 40, 0.96)) !important; color: #e5edf7; border-top-color: rgba(255, 255, 255, 0.12) !important; } [data-bs-theme="dark"] .report-table-footer .report-table-total-label { color: #9fcbff; } [data-bs-theme="dark"] .report-table-footer .report-table-footer-spacer { background: transparent !important; border-color: transparent !important; color: transparent !important; box-shadow: none !important; } [data-bs-theme="dark"] .trial-balance-group-row > * { background: linear-gradient(180deg, rgba(148, 163, 184, 0.16), rgba(21, 29, 40, 0.94)) !important; border-top-color: rgba(255, 255, 255, 0.1) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; color: #dbe7f5; } [data-bs-theme="dark"] .trial-balance-group-label { color: #c9e2ff; } [data-bs-theme="dark"] .sidebar-group { background: transparent; border-color: rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .sidebar-group.is-active { background: transparent; border-color: rgba(241, 184, 97, 0.24); } [data-bs-theme="dark"] .sidebar-group-icon { background: rgba(255, 255, 255, 0.045); color: #f2f4f8; } [data-bs-theme="dark"] .sidebar-group-items { border-left-color: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .sidebar-link:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .sidebar-link.is-active { background: linear-gradient(135deg, rgba(241, 184, 97, 0.24) 0%, rgba(170, 113, 37, 0.2) 100%); border-color: rgba(241, 184, 97, 0.34); box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.22); } [data-bs-theme="dark"] .sidebar-link-meta { color: rgba(255, 255, 255, 0.5); } [data-bs-theme="dark"] .topbar-context-card { border-color: rgba(241, 184, 97, 0.18); background: rgba(255, 255, 255, 0.04); } [data-bs-theme="dark"] .topbar-context-label { color: rgba(255, 255, 255, 0.56); } [data-bs-theme="dark"] .topbar-branch-select { color: #f3f6fb; color-scheme: dark; } [data-bs-theme="dark"] .topbar-branch-select option { background-color: #18212b; color: #f3f6fb; } [data-bs-theme="dark"] { --admin-page-icon-color: #f1b861; --admin-page-icon-bg: linear-gradient(135deg, rgba(241, 184, 97, 0.2) 0%, rgba(181, 108, 37, 0.12) 100%); --admin-page-icon-ring: inset 0 0 0 1px rgba(241, 184, 97, 0.28); } /* ── Table striped row subtle accent ── */ [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255, 255, 255, 0.04); } /* ── Modal: header & footer ── */ /* These rules complement the Bootstrap CSS-var styles in admin.css. */ [data-bs-theme="dark"] .modal-header { background: linear-gradient( 135deg, rgba(var(--bs-primary-rgb), 0.14) 0%, rgba(255, 255, 255, 0.02) 100% ); border-bottom-color: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .modal-header .admin-modal-icon { background: rgba(241, 184, 97, 0.18); color: #f1b861; } [data-bs-theme="dark"] .modal-header .modal-title { color: #f1c67e; } [data-bs-theme="dark"] .modal-footer { background: var(--bs-tertiary-bg); border-top-color: rgba(255, 255, 255, 0.1); } /* ── Card & content surfaces ── */ [data-bs-theme="dark"] .card { border-color: rgba(255, 255, 255, 0.1); } /* ── Toastr dark-mode visibility ── */ [data-bs-theme="dark"] #toast-container > div { opacity: 0.95; } /* ── Auth pages ── */ [data-bs-theme="dark"] .auth-body { background: radial-gradient(circle at top left, rgba(13, 110, 253, 0.2), transparent 28%), radial-gradient(circle at bottom right, rgba(25, 135, 84, 0.14), transparent 24%), linear-gradient(180deg, #11161d 0%, #1a212b 100%); } [data-bs-theme="dark"] .auth-card { background: rgba(25, 33, 43, 0.94); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3); } [data-bs-theme="dark"] .auth-panel-form { background: rgba(25, 33, 43, 0.94); } [data-bs-theme="dark"] .auth-form-title, [data-bs-theme="dark"] .auth-form-copy, [data-bs-theme="dark"] .auth-form .form-label { color: var(--bs-body-color); } [data-bs-theme="dark"] .menu-settings-card { border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.26); } [data-bs-theme="dark"] .menu-settings-list-item { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)); border-color: rgba(255, 255, 255, 0.1); color: var(--bs-body-color); } [data-bs-theme="dark"] .menu-settings-list-item:hover, [data-bs-theme="dark"] .menu-settings-list-item.is-active { border-color: rgba(241, 184, 97, 0.45); } [data-bs-theme="dark"] .menu-settings-list-item__icon { background: rgba(241, 184, 97, 0.16); color: #f1c67e; } [data-bs-theme="dark"] .menu-settings-editor { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .menu-icon-preview { background: rgba(241, 184, 97, 0.08); border-color: rgba(241, 184, 97, 0.25); } [data-bs-theme="dark"] .menu-icon-option__svg, [data-bs-theme="dark"] .menu-icon-preview__icon { color: #f1c67e; } [data-bs-theme="dark"] .auth-input-group .auth-input-icon { background: rgba(255, 255, 255, 0.04); color: #9aa4af; border-color: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .auth-input-group .form-control, [data-bs-theme="dark"] .auth-input-group .form-select { border-color: rgba(255, 255, 255, 0.1); } /* ── Error pages ── */ [data-bs-theme="dark"] .error-shell { background: rgba(25, 33, 43, 0.94); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.32); } [data-bs-theme="dark"] .error-title { color: #f3f6fb; } [data-bs-theme="dark"] .error-copy { color: #9aa4af; } [data-bs-theme="dark"] .error-kicker { background: rgba(var(--bs-primary-rgb), 0.16); } [data-bs-theme="dark"] .error-visual-badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* ── Global confirm dialog ── */ [data-bs-theme="dark"] .jconfirm.jconfirm-admin .jconfirm-bg { background-color: rgba(2, 6, 23, 0.78) !important; } [data-bs-theme="dark"] .jconfirm.jconfirm-admin .jconfirm-box { background: linear-gradient(180deg, #1b2430 0%, #141b24 100%) !important; box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.42) !important; color: #e5edf7 !important; } [data-bs-theme="dark"] .jconfirm.jconfirm-admin .jconfirm-title { color: #f3f6fb !important; } [data-bs-theme="dark"] .jconfirm.jconfirm-admin .jconfirm-content { color: #b7c2d0 !important; } [data-bs-theme="dark"] .jconfirm.jconfirm-admin .jconfirm-buttons { border-top-color: rgba(255, 255, 255, 0.08) !important; background: rgba(255, 255, 255, 0.02) !important; } [data-bs-theme="dark"] .jconfirm.jconfirm-admin.jconfirm-dark .jconfirm-box, [data-bs-theme="dark"] .jconfirm.jconfirm-admin.jconfirm-modern .jconfirm-box { background: linear-gradient(180deg, #1b2430 0%, #141b24 100%) !important; color: #e5edf7 !important; } [data-bs-theme="dark"] .jconfirm.jconfirm-admin.jconfirm-dark .jconfirm-box div.jconfirm-title-c, [data-bs-theme="dark"] .jconfirm.jconfirm-admin.jconfirm-modern .jconfirm-box div.jconfirm-title-c, [data-bs-theme="dark"] .jconfirm.jconfirm-admin.jconfirm-dark .jconfirm-box div.jconfirm-title-c .jconfirm-title, [data-bs-theme="dark"] .jconfirm.jconfirm-admin.jconfirm-modern .jconfirm-box div.jconfirm-title-c .jconfirm-title { color: #f3f6fb !important; } [data-bs-theme="dark"] .jconfirm.jconfirm-admin.jconfirm-dark .jconfirm-box div.jconfirm-content, [data-bs-theme="dark"] .jconfirm.jconfirm-admin.jconfirm-modern .jconfirm-box div.jconfirm-content, [data-bs-theme="dark"] .jconfirm.jconfirm-admin.jconfirm-dark .jconfirm-box div.jconfirm-content-pane, [data-bs-theme="dark"] .jconfirm.jconfirm-admin.jconfirm-modern .jconfirm-box div.jconfirm-content-pane { color: #b7c2d0 !important; } [data-bs-theme="dark"] .jconfirm.jconfirm-admin.jconfirm-dark .jconfirm-box .jconfirm-buttons, [data-bs-theme="dark"] .jconfirm.jconfirm-admin.jconfirm-modern .jconfirm-box .jconfirm-buttons { border-top-color: rgba(255, 255, 255, 0.08) !important; background: rgba(255, 255, 255, 0.02) !important; } [data-bs-theme="dark"] .jconfirm.jconfirm-admin .jconfirm-box div.jconfirm-closeIcon { color: #d0d7e2 !important; } [data-bs-theme="dark"] .jconfirm.jconfirm-admin .jconfirm-buttons .btn-outline-secondary { color: #d0d7e2 !important; border-color: rgba(255, 255, 255, 0.16) !important; background: rgba(255, 255, 255, 0.04) !important; } [data-bs-theme="dark"] .jconfirm.jconfirm-admin .jconfirm-buttons .btn-outline-secondary:hover { color: #fff !important; border-color: rgba(255, 255, 255, 0.28) !important; background: rgba(255, 255, 255, 0.08) !important; } [data-bs-theme="dark"] .jconfirm.jconfirm-admin .jconfirm-buttons .btn-danger { color: #fff !important; }