/* ── ArhivaDeFacturi – Dark Mode overrides ───────────────────────────────── Applied when is set by dark-mode.js Bootstrap's own component variables handle most of the work; these rules fix hardcoded colours in app.css / arhiva.css. ──────────────────────────────────────────────────────────────────────── */ /* Override ADF CSS custom properties — fixes all variable-based components (KPI strip, period tabs, card titles, adf-card-sub, etc.) in one place */ [data-bs-theme=dark] { --adf-fg: #e2e8f0; --adf-fg-2: #c8d3e0; --adf-muted: #8a9bb0; --adf-muted-2: #6c7d95; --adf-paper: #141b2d; --adf-surface: #1e2a40; --adf-surface-2: #243050; --adf-hair: #2d3a52; --adf-hair-2: #2d3a52; --adf-accent-ink: #93c5fd; --adf-success-soft: rgba(16, 185, 129, 0.18); --adf-danger-soft: rgba(239, 68, 68, 0.18); --adf-warning-soft: rgba(245, 158, 11, 0.18); --adf-accent-soft: rgba(77, 147, 244, 0.18); } /* Sidebar dark — keyed on [data-bs-theme=dark] on so it applies immediately from the early head script, preventing the light-then-dark flicker. (app.css has the same rules under body[data-menu-color=dark] but that attribute is only set after DOMContentLoaded by dark-mode.js, too late to avoid FOUC.) */ [data-bs-theme=dark] .app-sidebar-menu { background-color: #001b2f; box-shadow: none; } [data-bs-theme=dark] .app-sidebar-menu #sidebar-menu > ul > li > a { color: #7d8099; } [data-bs-theme=dark] .app-sidebar-menu #sidebar-menu > ul > li > a:hover, [data-bs-theme=dark] .app-sidebar-menu #sidebar-menu > ul > li > a:focus, [data-bs-theme=dark] .app-sidebar-menu #sidebar-menu > ul > li > a:active { color: #ffffff; } [data-bs-theme=dark] .app-sidebar-menu #sidebar-menu > ul > li > a svg { fill: rgba(125, 128, 153, 0.2); } [data-bs-theme=dark] .app-sidebar-menu #sidebar-menu .menu-title { color: #7d8099; } [data-bs-theme=dark] .app-sidebar-menu #sidebar-menu .menuitem-active > a, [data-bs-theme=dark] .app-sidebar-menu #sidebar-menu .menuitem-active .active { color: #ffffff; background-color: #2d3a52; } [data-bs-theme=dark] .app-sidebar-menu .nav-second-level li a, [data-bs-theme=dark] .app-sidebar-menu .nav-thrid-level li a { color: #7d8099; } [data-bs-theme=dark] .app-sidebar-menu .nav-second-level li a:focus, [data-bs-theme=dark] .app-sidebar-menu .nav-second-level li a:hover, [data-bs-theme=dark] .app-sidebar-menu .nav-thrid-level li a:focus, [data-bs-theme=dark] .app-sidebar-menu .nav-thrid-level li a:hover { background: transparent; color: #ffffff; } [data-bs-theme=dark] .app-sidebar-menu .nav-second-level li.active > a, [data-bs-theme=dark] .app-sidebar-menu .nav-thrid-level li.active > a { color: #ffffff; background-color: #2d3a52; border-radius: 0.475rem; } [data-bs-theme=dark] .logo-box .logo-dark { display: none; } [data-bs-theme=dark] .logo-box .logo-light { display: block; } /* Topbar */ [data-bs-theme=dark] .topbar-custom { background-color: #1a2232; box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3); } [data-bs-theme=dark] .topbar-custom .topnav-menu .nav-link { color: #adb5bd; } [data-bs-theme=dark] .topbar-custom .topnav-menu .nav-link:hover { color: #ffffff; } /* Content page background */ [data-bs-theme=dark] .content-page { background-color: #141b2d; } /* Cards */ [data-bs-theme=dark] .card { background-color: #1e2a40; border-color: #2d3a52; } [data-bs-theme=dark] .card-header, [data-bs-theme=dark] .card-footer { background-color: #1a2438; border-color: #2d3a52; } /* Dropdowns */ [data-bs-theme=dark] .dropdown-menu { background-color: #1e2a40; border-color: #2d3a52; } [data-bs-theme=dark] .dropdown-item { color: #adb5bd; } [data-bs-theme=dark] .dropdown-item:hover, [data-bs-theme=dark] .dropdown-item:focus { background-color: #2d3a52; color: #ffffff; } [data-bs-theme=dark] .dropdown-header { color: #6c757d; } /* Notification dropdown */ [data-bs-theme=dark] .notification-list .noti-title { border-bottom: 1px solid #2d3a52; } /* Tables */ [data-bs-theme=dark] .table { --bs-table-bg: #1e2a40; --bs-table-striped-bg: #1a2438; --bs-table-hover-bg: #243050; --bs-table-border-color: #2d3a52; color: #dee2e6; } /* Form controls */ [data-bs-theme=dark] .form-control, [data-bs-theme=dark] .form-select { background-color: #1a2438; border-color: #2d3a52; color: #dee2e6; } [data-bs-theme=dark] .form-control:focus, [data-bs-theme=dark] .form-select:focus { background-color: #1a2438; border-color: #4D93F4; color: #dee2e6; } /* Input groups */ [data-bs-theme=dark] .input-group-text { background-color: #243050; border-color: #2d3a52; color: #adb5bd; } /* Modals */ [data-bs-theme=dark] .modal-content { background-color: #1e2a40; border-color: #2d3a52; } [data-bs-theme=dark] .modal-header, [data-bs-theme=dark] .modal-footer { border-color: #2d3a52; } /* Alerts */ [data-bs-theme=dark] .alert-warning { background-color: #3d2f00; border-color: #5a4500; color: #ffc107; } [data-bs-theme=dark] .alert-danger { background-color: #3d0000; border-color: #5a0000; color: #f87171; } /* Footer */ [data-bs-theme=dark] .footer { background-color: #1a2232; border-top: 1px solid #2d3a52; color: #6c757d; } /* DataTables */ [data-bs-theme=dark] .dataTables_wrapper .dataTables_filter input, [data-bs-theme=dark] .dataTables_wrapper .dataTables_length select { background-color: #1a2438; border-color: #2d3a52; color: #dee2e6; } [data-bs-theme=dark] .dataTables_wrapper .dataTables_info, [data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button { color: #adb5bd !important; } [data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #2d3a52 !important; border-color: #2d3a52 !important; color: #ffffff !important; } [data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #4D93F4 !important; border-color: #4D93F4 !important; color: #ffffff !important; } /* Quill editor */ [data-bs-theme=dark] .ql-toolbar { background-color: #1a2438; border-color: #2d3a52 !important; } [data-bs-theme=dark] .ql-container { background-color: #141b2d; border-color: #2d3a52 !important; color: #dee2e6; } [data-bs-theme=dark] .ql-toolbar .ql-stroke { stroke: #adb5bd; } [data-bs-theme=dark] .ql-toolbar .ql-fill { fill: #adb5bd; } [data-bs-theme=dark] .ql-toolbar button:hover .ql-stroke { stroke: #ffffff; } /* Badges - keep readable on dark */ [data-bs-theme=dark] .badge.bg-light { background-color: #2d3a52 !important; color: #dee2e6 !important; } /* Text muted adjustment */ [data-bs-theme=dark] .text-muted { color: #8a9bb0 !important; } /* Borders */ [data-bs-theme=dark] .border, [data-bs-theme=dark] .border-bottom, [data-bs-theme=dark] .border-top { border-color: #2d3a52 !important; } /* List groups */ [data-bs-theme=dark] .list-group-item { background-color: #1e2a40; border-color: #2d3a52; color: #dee2e6; } /* Nav tabs */ [data-bs-theme=dark] .nav-tabs { border-color: #2d3a52; } [data-bs-theme=dark] .nav-tabs .nav-link { color: #adb5bd; } [data-bs-theme=dark] .nav-tabs .nav-link.active { background-color: #1e2a40; border-color: #2d3a52 #2d3a52 #1e2a40; color: #ffffff; } /* Scrollbars in dark mode — scoped to the DataTables scroll container only. Global ::-webkit-scrollbar rules switch ALL page scrollbars from OS-native to CSS-rendered, breaking light mode. Targeting specific elements avoids that. */ [data-bs-theme=dark] .dataTables_scrollBody { scrollbar-color: #2d3a52 #1a2438; /* Firefox */ scrollbar-width: thin; } [data-bs-theme=dark] .dataTables_scrollBody::-webkit-scrollbar { height: 6px; width: 6px; } [data-bs-theme=dark] .dataTables_scrollBody::-webkit-scrollbar-track { background: #1a2438; } [data-bs-theme=dark] .dataTables_scrollBody::-webkit-scrollbar-thumb { background: #2d3a52; border-radius: 3px; } [data-bs-theme=dark] .dataTables_scrollBody::-webkit-scrollbar-thumb:hover { background: #3d4f6e; } /* Bootstrap tooltips — BS5 dark mode flips tooltip to white-bg/dark-text; override the variables so tooltips stay dark on dark pages */ [data-bs-theme=dark] .tooltip { --bs-tooltip-bg: #1e2a40; --bs-tooltip-color: #dee2e6; } /* ApexCharts in dark mode */ [data-bs-theme=dark] .apexcharts-canvas { background: transparent; } [data-bs-theme=dark] .apexcharts-tooltip { background: #1e2a40 !important; border-color: #2d3a52 !important; color: #dee2e6 !important; } [data-bs-theme=dark] .apexcharts-tooltip-title { background: #1a2438 !important; border-bottom-color: #2d3a52 !important; color: #dee2e6 !important; } [data-bs-theme=dark] .apexcharts-xaxistooltip, [data-bs-theme=dark] .apexcharts-yaxistooltip { background: #1e2a40 !important; border-color: #2d3a52 !important; color: #dee2e6 !important; } /* ApexCharts axis labels and legend text */ [data-bs-theme=dark] .apexcharts-yaxis text, [data-bs-theme=dark] .apexcharts-xaxis text, [data-bs-theme=dark] .apexcharts-datalabel text, [data-bs-theme=dark] .apexcharts-legend-text { fill: #c8d3e0 !important; color: #c8d3e0 !important; } [data-bs-theme=dark] .apexcharts-gridline { stroke: #2d3a52; } [data-bs-theme=dark] .apexcharts-grid line { stroke: #2d3a52; } /* Body background — covers any gap between card and footer */ [data-bs-theme=dark] body { background-color: #141b2d; } /* Sidebar — default link colors */ [data-bs-theme=dark] #sidebar-menu > ul > li > a, [data-bs-theme=dark] .nav-second-level li a, [data-bs-theme=dark] .nav-third-level li a { color: #adb5bd; } /* Sidebar — hover */ [data-bs-theme=dark] #sidebar-menu > ul > li > a:not([data-bs-toggle]):hover, [data-bs-theme=dark] #sidebar-menu > ul > li > a:not([data-bs-toggle]):focus, [data-bs-theme=dark] .nav-second-level li a:hover, [data-bs-theme=dark] .nav-second-level li a:focus, [data-bs-theme=dark] .nav-third-level li a:hover, [data-bs-theme=dark] .nav-third-level li a:focus { color: #ffffff !important; background-color: #243050 !important; } /* Sidebar — active / selected item */ [data-bs-theme=dark] #sidebar-menu .menuitem-active > a:not([data-bs-toggle]), [data-bs-theme=dark] #sidebar-menu .menuitem-active .active { color: #ffffff !important; background-color: #2d3a52 !important; } /* Sidebar — active item icon accent */ [data-bs-theme=dark] #sidebar-menu .menuitem-active > a .menu-icon, [data-bs-theme=dark] #sidebar-menu .menuitem-active > a i { color: #4D93F4 !important; } /* Dashboard period-tab active button — use accent instead of --adf-fg (--adf-fg is now light, so bg:light + color:white would be unreadable) */ [data-bs-theme=dark] .dash-period-tabs button.active { background: #4D93F4 !important; color: #ffffff !important; } /* Dark mode toggle button */ [data-bs-theme=dark] #dark-mode-toggle { color: #adb5bd; background: transparent; } [data-bs-theme=dark] #dark-mode-toggle:hover { color: #ffffff; } /* Status bar (Archive section in dashboard) — value numbers */ [data-bs-theme=dark] .status-bar-grid > div > div:nth-child(2) { color: #e2e8f0 !important; } /* Status bar — "healthy" badge */ [data-bs-theme=dark] .status-bar-grid > div > div:nth-child(2) > span { background: rgba(16, 185, 129, 0.2) !important; color: #6ee7b7 !important; } /* Segment tabs (Top customers, Sales flow period tabs) — active button --adf-fg is now light in dark mode so we switch to accent blue */ [data-bs-theme=dark] .segment button { color: #8a9bb0; } [data-bs-theme=dark] .segment button:hover { color: #e2e8f0; } [data-bs-theme=dark] .segment button.active { background: #4D93F4 !important; color: #ffffff !important; } /* DataTables — full dark override. DataTables restructures the DOM after AJAX draw (wraps in dataTables_wrapper, adds .odd/.even to rows) so we must target its own selectors, not just .table. */ [data-bs-theme=dark] .dataTables_wrapper { background-color: #1e2a40; color: #dee2e6; } [data-bs-theme=dark] .dataTables_scrollBody, [data-bs-theme=dark] .dataTables_scrollHead, [data-bs-theme=dark] .dataTables_scrollFoot { background-color: #1e2a40; } [data-bs-theme=dark] table.dataTable { background-color: #1e2a40; } [data-bs-theme=dark] table.dataTable tbody tr, [data-bs-theme=dark] table.dataTable tbody tr.odd, [data-bs-theme=dark] table.dataTable tbody tr.even { background-color: #1e2a40 !important; } [data-bs-theme=dark] table.dataTable tbody td, [data-bs-theme=dark] table.dataTable tbody tr.odd td, [data-bs-theme=dark] table.dataTable tbody tr.even td, [data-bs-theme=dark] table.dataTable tbody th { background-color: #1e2a40 !important; color: #dee2e6; border-color: #2d3a52; } [data-bs-theme=dark] table.dataTable tbody tr:hover td, [data-bs-theme=dark] table.dataTable tbody tr:hover th { background-color: #243050 !important; } /* Bootstrap table cells (for non-DataTables tables) */ [data-bs-theme=dark] .table > :not(caption) > * > * { background-color: #1e2a40 !important; color: #dee2e6; } /* Bootstrap pagination (used by DataTables Bootstrap 5 integration) */ [data-bs-theme=dark] .pagination .page-item .page-link { background-color: #1e2a40; border-color: #2d3a52; color: #adb5bd; } [data-bs-theme=dark] .pagination .page-item.active .page-link { background-color: #4D93F4 !important; border-color: #4D93F4 !important; color: #ffffff !important; } [data-bs-theme=dark] .pagination .page-item.disabled .page-link { background-color: #1a2438; border-color: #2d3a52; color: #6c757d; } /* Accordion (companies page — open/active tab) */ [data-bs-theme=dark] .accordion-item { background-color: #1e2a40; border-color: #2d3a52; } [data-bs-theme=dark] .accordion-button { background-color: #1e2a40; color: #adb5bd; } [data-bs-theme=dark] .accordion-button:not(.collapsed) { background-color: #243050; color: #e2e8f0; box-shadow: inset 0 -1px 0 #2d3a52; } [data-bs-theme=dark] .accordion-button::after { filter: invert(0.7) brightness(1.5); } [data-bs-theme=dark] .accordion-collapse { background-color: #1e2a40; } /* Profile page — tab content has hardcoded bg-white utility class */ [data-bs-theme=dark] .tab-content { background-color: #141b2d !important; } [data-bs-theme=dark] .bg-white { background-color: #1e2a40 !important; } /* Page-specific inline style overrides */ [data-bs-theme=dark] .search-form { background-color: #1e2a40; } /* Bootstrap bg-light utility — overrides card-header bg-light, etc. bg-light applies !important so we need !important to beat it */ [data-bs-theme=dark] .bg-light { background-color: #243050 !important; color: #c8d3e0 !important; }