/* ============================================================= * Ocroform Dark Mode * A minimal, class-based dark theme overlay that rides on top of * the existing Bootstrap 5 + panel.min.css stylesheets. * Activated by setting `data-theme="dark"` on . * ============================================================= */ :root { /* Smooth theme transitions */ --of-theme-transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } /* Light-mode default palette tokens we rely on in dark mode */ html[data-theme="dark"] { color-scheme: dark; /* Neutral surfaces */ --of-bg: #0f1220; --of-bg-elev: #161a2b; --of-bg-elev-2: #1d2238; --of-bg-soft: #11142a; --of-surface: #1a1f35; --of-surface-hover: #232a44; --of-border: #2a3150; --of-border-soft: #222843; /* Text */ --of-text: #e6e8f2; --of-text-muted: #a8adc7; --of-text-dim: #7d83a1; /* Brand */ --of-primary: #7c6cff; --of-primary-rgb: 124, 108, 255; /* Bootstrap overrides (scoped to dark) */ --bs-body-bg: var(--of-bg); --bs-body-color: var(--of-text); --bs-body-color-rgb: 230, 232, 242; --bs-body-bg-rgb: 15, 18, 32; --bs-light: var(--of-bg-elev); --bs-light-rgb: 22, 26, 43; --bs-dark: #e6e8f2; --bs-dark-rgb: 230, 232, 242; --bs-white: var(--of-bg-elev); --bs-white-rgb: 22, 26, 43; --bs-gray-100: #1a1f35; --bs-gray-200: #232a44; --bs-gray-300: #2a3150; --bs-gray-400: #3a4169; --bs-gray-500: #545b82; --bs-gray-600: #7d83a1; --bs-gray-700: #a8adc7; --bs-gray-800: #d0d3e3; --bs-gray-900: #e6e8f2; --bs-primary: var(--of-primary); --bs-primary-rgb: var(--of-primary-rgb); --bs-secondary: #4a4f7a; --bs-secondary-rgb: 74, 79, 122; --bs-border-color: var(--of-border); } /* ---------- Global base ---------- */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--of-bg) !important; color: var(--of-text); } html[data-theme="dark"] body, html[data-theme="dark"] .body-inside, html[data-theme="dark"] .panel-container, html[data-theme="dark"] .panel-main-container { background-color: var(--of-bg) !important; color: var(--of-text); } html[data-theme="dark"] * { transition: var(--of-theme-transition); } /* ---------- Navbar ---------- */ html[data-theme="dark"] .navbar.bg-light, html[data-theme="dark"] .navbar.navbar-light { background-color: var(--of-bg-elev) !important; border-bottom: 1px solid var(--of-border-soft); } html[data-theme="dark"] .navbar-light .navbar-nav .nav-link, html[data-theme="dark"] .navbar-light .navbar-brand { color: var(--of-text) !important; } html[data-theme="dark"] .of-navbar-brand { display: inline-flex; align-items: center; } html[data-theme="dark"] .of-brand-logo { display: block; } html[data-theme="dark"] .of-brand-logo-dark { display: block; } html[data-theme="dark"] .of-brand-logo-light { display: none; } .of-brand-logo-dark { display: none; } html[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover, html[data-theme="dark"] .navbar-light .navbar-nav .nav-link.active { color: var(--of-primary) !important; } html[data-theme="dark"] .navbar-toggler { border-color: var(--of-border); } html[data-theme="dark"] .navbar-toggler-icon { filter: invert(1) hue-rotate(180deg) brightness(1.2); } /* ---------- Dropdown menus ---------- */ html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .dropdown-menu-light { background-color: var(--of-bg-elev-2) !important; border: 1px solid var(--of-border); color: var(--of-text); --bs-dropdown-bg: var(--of-bg-elev-2); --bs-dropdown-link-color: var(--of-text); --bs-dropdown-link-hover-color: var(--of-text); --bs-dropdown-link-hover-bg: var(--of-surface-hover); --bs-dropdown-link-active-color: #fff; --bs-dropdown-link-active-bg: var(--of-primary); --bs-dropdown-border-color: var(--of-border); --bs-dropdown-divider-bg: var(--of-border-soft); } html[data-theme="dark"] .dropdown-item { color: var(--of-text) !important; } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--of-surface-hover) !important; color: var(--of-text) !important; } html[data-theme="dark"] .dropdown-item.active { background-color: var(--of-primary) !important; color: #fff !important; } /* ---------- Cards / panels / surfaces ---------- */ html[data-theme="dark"] .card, html[data-theme="dark"] .main-box, html[data-theme="dark"] .panel-main, html[data-theme="dark"] .auth-container, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .popover, html[data-theme="dark"] .offcanvas { background-color: var(--of-bg-elev) !important; color: var(--of-text); border-color: var(--of-border); } html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { background-color: var(--of-bg-elev-2) !important; border-color: var(--of-border); color: var(--of-text); } /* Utility background overrides */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light, html[data-theme="dark"] .bg-light-2 { background-color: var(--of-bg-elev) !important; color: var(--of-text); } html[data-theme="dark"] .bg-body { background-color: var(--of-bg) !important; } /* ---------- Text utilities ---------- */ html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-body, html[data-theme="dark"] .text-black { color: var(--of-text) !important; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary, html[data-theme="dark"] .text-secondary-light { color: var(--of-text-muted) !important; } html[data-theme="dark"] .text-primary { color: var(--of-primary) !important; } /* ---------- Tables ---------- */ html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--of-text); --bs-table-border-color: var(--of-border); --bs-table-striped-bg: rgba(255, 255, 255, 0.035); --bs-table-striped-color: var(--of-text); --bs-table-hover-bg: rgba(var(--of-primary-rgb), 0.08); --bs-table-hover-color: var(--of-text); color: var(--of-text); border-color: var(--of-border); } html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--of-text); border-bottom-color: var(--of-border-soft); } html[data-theme="dark"] .table thead, html[data-theme="dark"] .table thead th, html[data-theme="dark"] thead.bg-light { background-color: var(--of-bg-elev-2) !important; color: var(--of-text) !important; } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.035); color: var(--of-text); } /* Stronger contrast for nested document-detail tables */ html[data-theme="dark"] body#panelDocument .table-box, html[data-theme="dark"] body#panelDocument table.table { border-color: var(--of-border) !important; } html[data-theme="dark"] body#panelDocument .table-box > :not(caption) > * > *, html[data-theme="dark"] body#panelDocument table table > :not(caption) > * > * { padding: 0.78rem 0.95rem; vertical-align: top; } html[data-theme="dark"] body#panelDocument td.key { background-color: rgba(var(--of-primary-rgb), 0.08) !important; color: #f1f2fb !important; font-weight: 600; } html[data-theme="dark"] body#panelDocument td.value { background-color: rgba(255, 255, 255, 0.02) !important; } html[data-theme="dark"] body#panelDocument table table { background: linear-gradient(180deg, rgba(26, 31, 53, 0.98), rgba(17, 20, 42, 0.98)) !important; border-color: #3a4266 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] body#panelDocument table table thead th { background-color: #26304f !important; color: #f4f6ff !important; border-bottom-color: #465179 !important; } html[data-theme="dark"] body#panelDocument td.value > table.table.table-striped tbody > tr > * { background-color: #151b30; border-bottom-color: #2c3555; } html[data-theme="dark"] body#panelDocument td.value > table.table.table-striped tbody > tr:nth-of-type(odd) > * { background-color: #1d2640; } html[data-theme="dark"] body#panelDocument td.value > table.table.table-striped tbody > tr:nth-of-type(even) > * { background-color: #13192c; } html[data-theme="dark"] body#panelDocument td.value > table.table.table-striped tbody > tr:hover > * { background-color: rgba(var(--of-primary-rgb), 0.15) !important; } html[data-theme="dark"] body#panelDocument td.value table td, html[data-theme="dark"] body#panelDocument td.value table th { line-height: 1.6; } /* ---------- Forms ---------- */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] textarea, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="date"] { background-color: var(--of-surface) !important; color: var(--of-text) !important; border-color: var(--of-border) !important; } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder, html[data-theme="dark"] input::placeholder { color: var(--of-text-dim) !important; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: var(--of-surface) !important; color: var(--of-text) !important; border-color: var(--of-primary) !important; box-shadow: 0 0 0 0.2rem rgba(var(--of-primary-rgb), 0.25) !important; } html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-select:disabled, html[data-theme="dark"] textarea:disabled, html[data-theme="dark"] input:disabled, html[data-theme="dark"] select:disabled { background-color: rgba(168, 173, 199, 0.08) !important; color: var(--of-text-dim) !important; border-color: rgba(168, 173, 199, 0.22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); cursor: not-allowed; opacity: 0.8 !important; } html[data-theme="dark"] .input-group-text { background-color: var(--of-bg-elev-2) !important; color: var(--of-text) !important; border-color: var(--of-border) !important; } html[data-theme="dark"] .form-check-input { background-color: var(--of-surface); border-color: var(--of-border); } html[data-theme="dark"] .form-check-input:checked { background-color: var(--of-primary); border-color: var(--of-primary); } /* ---------- Buttons ---------- */ html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-outline-secondary { background-color: var(--of-bg-elev-2); color: var(--of-text); border-color: var(--of-border); } html[data-theme="dark"] .btn-light:hover, html[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--of-surface-hover); color: var(--of-text); border-color: var(--of-border); } html[data-theme="dark"] .btn-primary { background-color: var(--of-primary); border-color: var(--of-primary); } html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-primary:focus { background-color: #6a59f0; border-color: #6a59f0; } html[data-theme="dark"] a.btn { text-decoration: none; } html[data-theme="dark"] a.btn-primary, html[data-theme="dark"] a.btn-success, html[data-theme="dark"] a.btn-danger, html[data-theme="dark"] a.btn-warning, html[data-theme="dark"] a.btn-secondary, html[data-theme="dark"] a.btn-dark, html[data-theme="dark"] a.btn-info, html[data-theme="dark"] a.btn-primary:hover, html[data-theme="dark"] a.btn-success:hover, html[data-theme="dark"] a.btn-danger:hover, html[data-theme="dark"] a.btn-warning:hover, html[data-theme="dark"] a.btn-secondary:hover, html[data-theme="dark"] a.btn-dark:hover, html[data-theme="dark"] a.btn-info:hover, html[data-theme="dark"] a.btn-primary:focus, html[data-theme="dark"] a.btn-success:focus, html[data-theme="dark"] a.btn-danger:focus, html[data-theme="dark"] a.btn-warning:focus, html[data-theme="dark"] a.btn-secondary:focus, html[data-theme="dark"] a.btn-dark:focus, html[data-theme="dark"] a.btn-info:focus { color: #fff !important; } html[data-theme="dark"] a.btn-light, html[data-theme="dark"] a.btn-outline-secondary { color: var(--of-text) !important; } html[data-theme="dark"] a.btn-outline-primary { color: var(--of-primary) !important; border-color: rgba(var(--of-primary-rgb), 0.55) !important; } html[data-theme="dark"] a.btn-outline-primary:hover, html[data-theme="dark"] a.btn-outline-primary:focus { color: #fff !important; background-color: var(--of-primary) !important; border-color: var(--of-primary) !important; } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ---------- Borders & dividers ---------- */ html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end { border-color: var(--of-border) !important; } html[data-theme="dark"] hr { border-top-color: var(--of-border); color: var(--of-border); } /* ---------- Shadows (keep subtle) ---------- */ html[data-theme="dark"] .shadow, html[data-theme="dark"] .shadow-sm { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important; } /* ---------- Badges ---------- */ html[data-theme="dark"] .badge.bg-secondary { background-color: var(--of-bg-elev-2) !important; color: var(--of-text); border: 1px solid var(--of-border); } html[data-theme="dark"] .badge.bg-light { background-color: var(--of-bg-elev-2) !important; color: var(--of-text); } html[data-theme="dark"] .js-status-text, html[data-theme="dark"] .status-badge, html[data-theme="dark"] body#panelDocument .cursor-default.text-white.rounded-3 { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-weight: 600; } html[data-theme="dark"] .js-status-text.bg-dark-success, html[data-theme="dark"] .status-badge.bg-dark-success, html[data-theme="dark"] body#panelDocument .bg-dark-success.text-white.rounded-3, html[data-theme="dark"] .badge.bg-success { background-color: #22865f !important; color: #f7fffb !important; } html[data-theme="dark"] .js-status-text.bg-light-success, html[data-theme="dark"] .status-badge.bg-light-success { background-color: #35a46f !important; color: #f7fffb !important; } html[data-theme="dark"] .js-status-text.bg-warning, html[data-theme="dark"] .status-badge.bg-warning, html[data-theme="dark"] .badge.bg-warning { background-color: #f0bf57 !important; color: #2d2207 !important; } html[data-theme="dark"] .js-status-text.bg-danger, html[data-theme="dark"] .status-badge.bg-danger, html[data-theme="dark"] body#panelDocument .bg-danger.text-white.rounded-3, html[data-theme="dark"] .badge.bg-danger { background-color: #c95a67 !important; color: #fff5f6 !important; } html[data-theme="dark"] .badge.bg-info { background-color: #2f7da6 !important; color: #f4fbff !important; } html[data-theme="dark"] .badge.bg-info i { color: #f4fbff !important; } html[data-theme="dark"] .js-status-text.text-dark, html[data-theme="dark"] .status-badge.text-dark { background-color: rgba(168, 173, 199, 0.14) !important; color: var(--of-text) !important; border: 1px solid rgba(168, 173, 199, 0.16); } html[data-theme="dark"] .badge.bg-primary.bg-opacity-10.text-primary { background-color: rgba(var(--of-primary-rgb), 0.18) !important; color: #cfc8ff !important; border: 1px solid rgba(var(--of-primary-rgb), 0.28); } html[data-theme="dark"] .badge.bg-secondary.bg-opacity-10.text-secondary, html[data-theme="dark"] .badge.bg-secondary.bg-opacity-25 { background-color: rgba(168, 173, 199, 0.16) !important; color: #d6d9ea !important; border: 1px solid rgba(168, 173, 199, 0.16); } html[data-theme="dark"] .badge.bg-success.bg-opacity-10.text-success { background-color: rgba(34, 134, 95, 0.18) !important; color: #a8f0c8 !important; border: 1px solid rgba(34, 134, 95, 0.3); } html[data-theme="dark"] .badge.bg-danger.bg-opacity-10.text-danger { background-color: rgba(201, 90, 103, 0.18) !important; color: #ffb9c1 !important; border: 1px solid rgba(201, 90, 103, 0.28); } /* Keywords manage keeps several light-only local styles in the template */ html[data-theme="dark"] .manage-keywords-filters { background: linear-gradient(180deg, rgba(22, 26, 43, 0.98), rgba(16, 20, 36, 0.98)) !important; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid var(--of-border) !important; } html[data-theme="dark"] .manage-keywords-pagination { background-color: var(--of-bg-elev) !important; border-top: 1px solid var(--of-border) !important; } html[data-theme="dark"] .manage-keywords-filters .text-muted, html[data-theme="dark"] .manage-keywords-pagination .text-muted, html[data-theme="dark"] .manage-keywords-filters .form-label, html[data-theme="dark"] .search-input-wrapper .search-icon { color: var(--of-text-muted) !important; } html[data-theme="dark"] .table-header-sticky, html[data-theme="dark"] .table-header-sticky th { background-color: var(--of-bg-elev-2) !important; } html[data-theme="dark"] .table-header-sticky th { color: var(--of-text) !important; border-bottom-color: var(--of-border) !important; } html[data-theme="dark"] .sortable:hover { background-color: rgba(var(--of-primary-rgb), 0.1) !important; } html[data-theme="dark"] #keywordsTable tbody td { border-bottom-color: rgba(168, 173, 199, 0.18) !important; } html[data-theme="dark"] #keywordsTable tbody tr:hover { background-color: rgba(var(--of-primary-rgb), 0.08) !important; } html[data-theme="dark"] #keywordsTable tbody tr.selected { background-color: rgba(var(--of-primary-rgb), 0.16) !important; } html[data-theme="dark"] .keyword-text { background: linear-gradient(135deg, rgba(39, 48, 80, 0.96), rgba(24, 30, 51, 0.96)) !important; color: #eef1ff !important; border: 1px solid rgba(var(--of-primary-rgb), 0.24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } html[data-theme="dark"] .keyword-row .action-buttons { opacity: 0.55; } /* Job summary columns keep their semantic colors in dark mode */ html[data-theme="dark"] .table th.job-successful-count, html[data-theme="dark"] .table th.job-successful-count span, html[data-theme="dark"] .job-cell.job-successful-count { color: #89e4b2 !important; } html[data-theme="dark"] .table th.job-failed-count, html[data-theme="dark"] .table th.job-failed-count span, html[data-theme="dark"] .job-cell.job-failed-count { color: #ff9ca7 !important; } html[data-theme="dark"] .table th.job-duplicated-count, html[data-theme="dark"] .table th.job-duplicated-count span, html[data-theme="dark"] .job-cell.job-duplicated-count { color: #ffd479 !important; } html[data-theme="dark"] .table th.job-wrong-document-type-count, html[data-theme="dark"] .table th.job-wrong-document-type-count span, html[data-theme="dark"] .job-cell.job-wrong-document-type-count { color: #f59e0b !important; } /* ---------- Toasts ---------- */ html[data-theme="dark"] .toast { background-color: var(--of-bg-elev-2) !important; border-color: var(--of-border) !important; color: var(--of-text) !important; --bs-toast-bg: var(--of-bg-elev-2); --bs-toast-border-color: var(--of-border); --bs-toast-color: var(--of-text); } html[data-theme="dark"] .toast-header { background-color: var(--of-bg-elev) !important; border-bottom-color: var(--of-border) !important; color: var(--of-text) !important; --bs-toast-header-bg: var(--of-bg-elev); --bs-toast-header-border-color: var(--of-border); --bs-toast-header-color: var(--of-text); } html[data-theme="dark"] .toast-body { color: var(--of-text) !important; } /* ---------- Alerts ---------- */ html[data-theme="dark"] .alert { background-color: var(--of-bg-elev); color: var(--of-text); border-color: var(--of-border); } html[data-theme="dark"] .alert-success { border-left: 3px solid #28a745; } html[data-theme="dark"] .alert-danger { border-left: 3px solid #dc3545; } html[data-theme="dark"] .alert-warning { border-left: 3px solid #ffc107; } html[data-theme="dark"] .alert-info { border-left: 3px solid #0dcaf0; } /* ---------- Pagination ---------- */ html[data-theme="dark"] .page-link { background-color: var(--of-bg-elev); color: var(--of-text); border-color: var(--of-border); } html[data-theme="dark"] nav[aria-label="pagination"] { width: 100%; align-items: center; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap-reverse; } html[data-theme="dark"] nav[aria-label="pagination"] .pagination { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.5rem; margin-bottom: 0; } html[data-theme="dark"] nav[aria-label="pagination"] #paginationBy { min-width: 4rem; } html[data-theme="dark"] .page-link:hover { background-color: var(--of-surface-hover); color: var(--of-text); border-color: var(--of-border); } html[data-theme="dark"] .page-link:focus { color: var(--of-text); background-color: var(--of-surface-hover); border-color: var(--of-primary); box-shadow: 0 0 0 0.15rem rgba(var(--of-primary-rgb), 0.22) !important; } html[data-theme="dark"] .page-item.active .page-link { background-color: var(--of-primary); border-color: var(--of-primary); color: #fff; } html[data-theme="dark"] .page-item.disabled .page-link { background-color: rgba(168, 173, 199, 0.08) !important; color: var(--of-text-dim) !important; border-color: rgba(168, 173, 199, 0.2) !important; opacity: 0.82; } /* ---------- Links ---------- */ html[data-theme="dark"] a { color: var(--of-primary); } html[data-theme="dark"] a:hover { color: #9d91ff; } /* ---------- Scrollbar ---------- */ html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--of-bg-soft); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--of-border); border-radius: 6px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--of-surface-hover); } /* ---------- Breadcrumb ---------- */ html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .panel-breadcrumb { color: var(--of-text-muted); } /* ---------- Tabs ---------- */ html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--of-border) !important; } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--of-text-muted) !important; border-color: transparent !important; } html[data-theme="dark"] .nav-tabs .nav-link:hover, html[data-theme="dark"] .nav-tabs .nav-link:focus { color: var(--of-primary) !important; border-color: transparent transparent var(--of-border) !important; } html[data-theme="dark"] .nav-tabs .nav-link.active, html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link { background-color: var(--of-bg-elev-2) !important; color: var(--of-text) !important; border-color: var(--of-border) var(--of-border) var(--of-bg-elev-2) !important; } /* ---------- Floating form layouts ---------- */ html[data-theme="dark"] body#panelCreateJob .panel-main.main-box, html[data-theme="dark"] body#panelCreateUser .panel-main.main-box, html[data-theme="dark"] body#panelUser .panel-main.main-box, html[data-theme="dark"] body#panelCreateCompany .panel-main.main-box, html[data-theme="dark"] body#panelCompany .panel-main.main-box { background: transparent !important; box-shadow: none !important; border: 0 !important; } /* ---------- Daily dashboard ---------- */ html[data-theme="dark"] #dateRangeDisplay .alert { background: linear-gradient(135deg, rgba(var(--of-primary-rgb), 0.16), rgba(29, 34, 56, 0.96)) !important; border: 1px solid var(--of-border) !important; border-left: 4px solid var(--of-primary) !important; color: var(--of-text) !important; } html[data-theme="dark"] #dateRangeDisplay .alert-heading, html[data-theme="dark"] #dateRangeDisplay .text-primary, html[data-theme="dark"] #dateRangeDisplay .fw-semibold, html[data-theme="dark"] #dateRangeDisplay p { color: var(--of-text) !important; } html[data-theme="dark"] #dateRangeDisplay .text-muted, html[data-theme="dark"] #dateRangeDisplay #dateRangeDuration { color: var(--of-text-muted) !important; } html[data-theme="dark"] #dateRangeDisplay .badge.bg-primary, html[data-theme="dark"] .date-badge { background: var(--of-primary) !important; color: #fff !important; } html[data-theme="dark"] .filter-panel-section { background: var(--of-surface) !important; border-color: var(--of-border) !important; } html[data-theme="dark"] .filter-panel-section h6 { color: var(--of-text) !important; } html[data-theme="dark"] .filter-help-text, html[data-theme="dark"] .filter-option-count { color: var(--of-text-muted) !important; } html[data-theme="dark"] .filter-summary-badges .badge { background: rgba(var(--of-primary-rgb), 0.16) !important; color: var(--of-text) !important; border-color: rgba(var(--of-primary-rgb), 0.3) !important; } html[data-theme="dark"] .loading-overlay { background: rgba(15, 18, 32, 0.9) !important; } /* Keep upload widgets from flashing to light hover states */ html[data-theme="dark"] .bg-light-hover:hover { background-color: var(--of-bg-elev-2) !important; border-color: var(--of-primary) !important; } /* ---------- FilePond ---------- */ html[data-theme="dark"] .filepond--root { color: var(--of-text); } html[data-theme="dark"] .filepond--root > .filepond--panel-root, html[data-theme="dark"] .filepond--root > .filepond--panel-root .filepond--panel-top, html[data-theme="dark"] .filepond--root > .filepond--panel-root .filepond--panel-center, html[data-theme="dark"] .filepond--root > .filepond--panel-root .filepond--panel-bottom { background-color: var(--of-bg-elev-2) !important; } html[data-theme="dark"] .filepond--drop-label { color: var(--of-text-muted); } html[data-theme="dark"] .filepond--label-action { color: var(--of-primary); } html[data-theme="dark"] .filepond--drip { background-color: rgba(var(--of-primary-rgb), 0.18); } html[data-theme="dark"] .filepond--item-panel { background-color: #2a304c !important; } html[data-theme="dark"] .filepond--item[data-filepond-item-state="processing-complete"] .filepond--item-panel { background-color: #2f8f62 !important; } html[data-theme="dark"] .filepond--item[data-filepond-item-state*="error"] .filepond--item-panel, html[data-theme="dark"] .filepond--item[data-filepond-item-state*="invalid"] .filepond--item-panel { background-color: #c95a67 !important; } html[data-theme="dark"] .filepond--file-info-main, html[data-theme="dark"] .filepond--file-status-main { color: #f5f8ff !important; } html[data-theme="dark"] .filepond--file-info-sub, html[data-theme="dark"] .filepond--file-status-sub { color: rgba(245, 248, 255, 0.78) !important; } /* ---------- Report cards ---------- */ html[data-theme="dark"] .report-card { background-color: var(--of-bg-elev) !important; } html[data-theme="dark"] .report-card h1, html[data-theme="dark"] .report-card .border-top { background: var(--of-bg-elev-2) !important; color: var(--of-primary) !important; border-color: var(--of-border) !important; } html[data-theme="dark"] .report-card .title { color: var(--of-primary) !important; } html[data-theme="dark"] .report-card .subtitle { color: var(--of-text-muted) !important; } /* ---------- Code ---------- */ html[data-theme="dark"] code, html[data-theme="dark"] pre { background-color: var(--of-bg-soft); color: #e0b3ff; border-radius: 4px; } /* ============================================================= * Theme Toggle (sun/moon) — looks good in both themes. * ============================================================= */ .of-theme-toggle { --size: 36px; width: var(--size); height: var(--size); border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.04); color: #33315e; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: var(--of-theme-transition), transform .2s ease; position: relative; overflow: hidden; } .of-theme-toggle:hover { background: rgba(0, 0, 0, 0.08); transform: rotate(-8deg); } .of-theme-toggle svg { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .25s ease; } .of-theme-toggle .of-icon-sun { display: none; } .of-theme-toggle .of-icon-moon { display: inline-block; } html[data-theme="dark"] .of-theme-toggle { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #ffd66b; } html[data-theme="dark"] .of-theme-toggle:hover { background: rgba(255, 255, 255, 0.12); } html[data-theme="dark"] .of-theme-toggle .of-icon-sun { display: inline-block; } html[data-theme="dark"] .of-theme-toggle .of-icon-moon { display: none; } /* Nicely align inside the navbar list */ .of-theme-toggle-item { display: flex; align-items: center; margin-left: .5rem; } /* ============================================================= * Keep chat widget, login, signup usable in dark. * ============================================================= */ html[data-theme="dark"] .woot-widget-bubble { filter: brightness(.95); }