/** * Dark mode overrides for the Sneat (free) Bootstrap 5 template. * Activated by adding the class `dark-mode` to the element. * Palette mirrors the official Sneat dark theme for visual consistency. */ html.dark-mode { --bs-body-bg: #232333; --bs-body-bg-rgb: 35, 35, 51; --bs-body-color: #b8b8cd; --bs-body-color-rgb: 184, 184, 205; --bs-heading-color: #d5d5ec; --bs-border-color: #434968; --bs-secondary-color: #8b8ba7; --tb-paper: #2b2c40; --tb-paper-2: #232333; --tb-elevated: #2f3050; --tb-input-bg: #232333; --tb-text: #b8b8cd; --tb-text-strong: #d5d5ec; --tb-muted: #8b8ba7; --tb-placeholder: #9a9ab9; --tb-border: #444564; --tb-border-soft: rgba(255, 255, 255, 0.08); --tb-hover: rgba(255, 255, 255, 0.04); } /* ---------- Base ---------- */ html.dark-mode, html.dark-mode body { background-color: var(--tb-paper-2) !important; color: var(--tb-text); } html.dark-mode .bg-body, html.dark-mode .layout-wrapper, html.dark-mode .layout-page, html.dark-mode .content-wrapper { background-color: var(--tb-paper-2) !important; } /* ---------- Typography ---------- */ html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6, html.dark-mode .h1, html.dark-mode .h2, html.dark-mode .h3, html.dark-mode .h4, html.dark-mode .h5, html.dark-mode .h6 { color: var(--tb-text-strong) !important; } html.dark-mode .text-dark, html.dark-mode .text-body, html.dark-mode .text-heading, html.dark-mode .text-black, html.dark-mode .fw-semibold, html.dark-mode .fw-bold, html.dark-mode label, html.dark-mode p, html.dark-mode span:not(.badge):not([class*="bg-"]):not([class*="text-"]) { color: var(--tb-text); } html.dark-mode .text-muted, html.dark-mode .text-secondary, html.dark-mode small, html.dark-mode .small { color: var(--tb-muted) !important; } html.dark-mode a:not([class*="btn"]):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item):not(.menu-link):not(.badge):not(.dropdown-toggle) { color: #a5b4fc; } /* Solid (anchor) buttons keep readable white text on their accent fill */ html.dark-mode a.btn-primary, html.dark-mode a.btn-success, html.dark-mode a.btn-info, html.dark-mode a.btn-warning, html.dark-mode a.btn-danger, html.dark-mode a.btn-secondary, html.dark-mode a.btn-dark, html.dark-mode .btn-primary, html.dark-mode .btn-success, html.dark-mode .btn-info, html.dark-mode .btn-warning, html.dark-mode .btn-danger, html.dark-mode .btn-secondary, html.dark-mode .btn-dark { color: #fff !important; } /* ---------- Cards ---------- */ html.dark-mode .card, html.dark-mode .card-body, html.dark-mode .card-header, html.dark-mode .card-footer { background-color: var(--tb-paper) !important; color: var(--tb-text); border-color: var(--tb-border-soft); } html.dark-mode .card { box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4) !important; } html.dark-mode .card-header, html.dark-mode .card-footer { border-color: var(--tb-border-soft); } /* ---------- Sidebar menu ---------- */ html.dark-mode .bg-menu-theme { background-color: var(--tb-paper) !important; } html.dark-mode .menu-vertical, html.dark-mode #layout-menu { background-color: var(--tb-paper) !important; } html.dark-mode .bg-menu-theme .menu-link, html.dark-mode .bg-menu-theme .menu-horizontal-wrapper .menu-inner > .menu-item .menu-link { color: var(--tb-text); } html.dark-mode .bg-menu-theme .menu-link:hover, html.dark-mode .bg-menu-theme .menu-item:not(.menu-item-closing) > .menu-link:hover { background-color: var(--tb-hover); color: var(--tb-text-strong); } html.dark-mode .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) { background-color: rgba(79, 70, 229, 0.16); color: #a5b4fc; } html.dark-mode .bg-menu-theme .menu-item.active > .menu-link { color: #a5b4fc; } html.dark-mode .bg-menu-theme .menu-sub > .menu-item.active > .menu-link { color: #a5b4fc; } html.dark-mode .bg-menu-theme .menu-header-text { color: var(--tb-muted); } html.dark-mode .bg-menu-theme .menu-inner > .menu-item.active:before { background-color: #6366f1; } html.dark-mode .menu-divider, html.dark-mode .bg-menu-theme .menu-divider { border-color: var(--tb-border-soft); } html.dark-mode .app-brand-text { color: var(--tb-text-strong) !important; } /* ---------- Navbar ---------- */ html.dark-mode .bg-navbar-theme { background-color: var(--tb-paper) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } html.dark-mode .navbar-detached { background-color: var(--tb-paper) !important; } html.dark-mode .layout-navbar .navbar-nav .nav-link, html.dark-mode .layout-navbar i { color: var(--tb-text) !important; } /* ---------- Footer ---------- */ html.dark-mode .bg-footer-theme, html.dark-mode .content-footer { background-color: var(--tb-paper) !important; color: var(--tb-text); } /* ---------- Dropdowns ---------- */ html.dark-mode .dropdown-menu { background-color: var(--tb-elevated) !important; border-color: var(--tb-border-soft); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); } html.dark-mode .dropdown-item { color: var(--tb-text); } html.dark-mode .dropdown-item:hover, html.dark-mode .dropdown-item:focus { background-color: var(--tb-hover); color: var(--tb-text-strong); } html.dark-mode .dropdown-item.active, html.dark-mode .dropdown-item:active { background-color: rgba(79, 70, 229, 0.18); color: #a5b4fc; } html.dark-mode .dropdown-divider, html.dark-mode hr { border-color: var(--tb-border-soft); color: var(--tb-border-soft); } html.dark-mode .dropdown-header { color: var(--tb-muted); } /* ---------- Modals ---------- */ html.dark-mode .modal-content { background-color: var(--tb-paper) !important; color: var(--tb-text); border-color: var(--tb-border-soft); } html.dark-mode .modal-header, html.dark-mode .modal-footer { border-color: var(--tb-border-soft); } html.dark-mode .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ---------- Offcanvas ---------- */ html.dark-mode .offcanvas { background-color: var(--tb-paper) !important; color: var(--tb-text); } /* ---------- Tables ---------- */ html.dark-mode .table { --bs-table-bg: transparent; --bs-table-color: var(--tb-text); color: var(--tb-text); border-color: var(--tb-border); } html.dark-mode .table > :not(caption) > * > * { background-color: transparent; color: var(--tb-text); border-bottom-color: var(--tb-border-soft); } html.dark-mode .table thead th, html.dark-mode .table th { color: var(--tb-muted) !important; border-color: var(--tb-border-soft); background-color: var(--tb-paper-2) !important; } html.dark-mode .table-hover > tbody > tr:hover > * { background-color: var(--tb-hover); color: var(--tb-text-strong); } html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.02); color: var(--tb-text); } /* bootstrap-table */ html.dark-mode .fixed-table-container, html.dark-mode .bootstrap-table .fixed-table-container { border-color: var(--tb-border-soft); } html.dark-mode .fixed-table-toolbar, html.dark-mode .fixed-table-pagination { color: var(--tb-text); } html.dark-mode .bootstrap-table .fixed-table-footer, html.dark-mode .fixed-table-body { background-color: var(--tb-paper) !important; } /* ---------- Pagination ---------- */ html.dark-mode .page-link { background-color: var(--tb-paper) !important; border-color: var(--tb-border-soft); color: var(--tb-text); } html.dark-mode .page-item.active .page-link { background-color: #6366f1 !important; border-color: #6366f1 !important; color: #fff; } html.dark-mode .page-item.disabled .page-link { background-color: var(--tb-paper-2) !important; color: var(--tb-muted); } /* ---------- Forms ---------- */ html.dark-mode .form-control, html.dark-mode .form-select, html.dark-mode textarea, html.dark-mode .input-group-text { background-color: var(--tb-paper-2) !important; border-color: var(--tb-border) !important; color: var(--tb-text) !important; -webkit-text-fill-color: var(--tb-text) !important; caret-color: var(--tb-text) !important; } html.dark-mode .form-control:focus, html.dark-mode .form-select:focus { background-color: var(--tb-paper-2) !important; border-color: #6366f1 !important; box-shadow: 0 0 0 0.15rem rgba(79, 70, 229, 0.25); } html.dark-mode .form-control::placeholder, html.dark-mode textarea::placeholder, html.dark-mode input::placeholder, html.dark-mode .select2-search__field::placeholder { color: #9a9ab9 !important; opacity: 1 !important; } html.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9a9ab9 !important; } html.dark-mode .form-control:disabled, html.dark-mode .form-control[readonly], html.dark-mode .form-select:disabled { background-color: #1f2030 !important; color: var(--tb-muted) !important; } html.dark-mode .form-check-input { background-color: var(--tb-paper-2); border-color: var(--tb-border); } html.dark-mode .form-check-input:checked { background-color: #6366f1; border-color: #6366f1; } html.dark-mode .form-label, html.dark-mode .col-form-label { color: var(--tb-text); } html.dark-mode .form-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='%23b8b8cd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); } /* ---------- Select2 ---------- */ html.dark-mode .select2-dropdown { background-color: var(--tb-paper-2) !important; border-color: var(--tb-border) !important; color: var(--tb-text) !important; } /* Inner selection layer stays transparent (the wrapper is the dark field) */ html.dark-mode .select2-container--default .select2-selection--single, html.dark-mode .select2-container--default .select2-selection--multiple { background-color: transparent !important; border: 0 !important; color: var(--tb-text) !important; } html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--tb-text) !important; } html.dark-mode .select2-results__option { background-color: var(--tb-paper-2) !important; color: var(--tb-text) !important; } html.dark-mode .select2-results__option--highlighted, html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #6366f1 !important; color: #fff !important; } html.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--tb-elevated) !important; border-color: var(--tb-border) !important; color: var(--tb-text) !important; } html.dark-mode .select2-search__field { background-color: var(--tb-paper-2) !important; color: var(--tb-text) !important; } /* ---------- Nav tabs / pills ---------- */ html.dark-mode .nav-tabs, html.dark-mode .nav-tabs .nav-link { border-color: var(--tb-border-soft); color: var(--tb-text); } html.dark-mode .nav-tabs .nav-link.active { background-color: var(--tb-paper) !important; color: #a5b4fc !important; border-bottom-color: #6366f1; } html.dark-mode .nav-pills .nav-link { color: var(--tb-text); } /* ---------- Breadcrumb ---------- */ html.dark-mode .breadcrumb, html.dark-mode .breadcrumb-item, html.dark-mode .breadcrumb-item a { color: var(--tb-muted); } html.dark-mode .breadcrumb-item.active { color: var(--tb-text-strong); } html.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: var(--tb-muted); } /* ---------- List group / accordion ---------- */ html.dark-mode .list-group-item { background-color: var(--tb-paper) !important; border-color: var(--tb-border-soft); color: var(--tb-text); } html.dark-mode .accordion-item, html.dark-mode .accordion-button { background-color: var(--tb-paper) !important; color: var(--tb-text); border-color: var(--tb-border-soft); } html.dark-mode .accordion-button:not(.collapsed) { background-color: var(--tb-elevated) !important; color: #a5b4fc; } /* ---------- Backgrounds utilities ---------- */ html.dark-mode .bg-white, html.dark-mode .bg-light { background-color: var(--tb-paper) !important; } html.dark-mode .bg-lighter, html.dark-mode .bg-body-tertiary { background-color: var(--tb-paper-2) !important; } /* ---------- Borders ---------- */ html.dark-mode .border, html.dark-mode .border-top, html.dark-mode .border-bottom, html.dark-mode .border-start, html.dark-mode .border-end, html.dark-mode .border-light { border-color: var(--tb-border-soft) !important; } /* ---------- Alerts (subtle) ---------- */ html.dark-mode .alert { border-color: var(--tb-border-soft); } /* ---------- Tooltips & popovers ---------- */ html.dark-mode .tooltip-inner { background-color: var(--tb-elevated); color: var(--tb-text); } html.dark-mode .popover { background-color: var(--tb-elevated); border-color: var(--tb-border-soft); } html.dark-mode .popover-body, html.dark-mode .popover-header { background-color: var(--tb-elevated); color: var(--tb-text); } /* ---------- Misc ---------- */ html.dark-mode .text-primary { color: #a5b4fc !important; } html.dark-mode .btn-outline-secondary { color: var(--tb-text); border-color: var(--tb-border); } html.dark-mode .table-responsive, html.dark-mode .perfect-scrollbar-on { background-color: transparent; } /* Avatar placeholders / initials keep readable */ html.dark-mode .avatar-initial { color: #fff; } /* DateRangePicker / datepicker popups */ html.dark-mode .daterangepicker, html.dark-mode .bootstrap-datetimepicker-widget { background-color: var(--tb-elevated) !important; color: var(--tb-text) !important; border-color: var(--tb-border-soft) !important; } html.dark-mode .daterangepicker .calendar-table { background-color: var(--tb-elevated) !important; border-color: var(--tb-border-soft) !important; } html.dark-mode .daterangepicker td.available:hover, html.dark-mode .daterangepicker th.available:hover { background-color: var(--tb-hover) !important; } html.dark-mode .daterangepicker td.off { background-color: var(--tb-paper-2) !important; color: var(--tb-muted) !important; } /* Theme toggle button icon */ html.dark-mode .theme-toggle-icon .bx-sun { display: inline-block; } html.dark-mode .theme-toggle-icon .bx-moon { display: none; } .theme-toggle-icon .bx-sun { display: none; } .theme-toggle-icon .bx-moon { display: inline-block; } /* ========================================================================= Refinements: tab panels, charts, label chips, field borders ========================================================================= */ /* ---------- Tab content panels (were hardcoded white) ---------- */ html.dark-mode .tab-content, html.dark-mode .nav-align-top > .tab-content, html.dark-mode .nav-align-right > .tab-content, html.dark-mode .nav-align-bottom > .tab-content, html.dark-mode .nav-align-left > .tab-content { background: var(--tb-paper) !important; background-color: var(--tb-paper) !important; border-color: var(--tb-border-soft) !important; color: var(--tb-text); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.35) !important; } html.dark-mode .nav-tabs { border-bottom-color: var(--tb-border-soft); } html.dark-mode .nav-tabs .nav-link { color: var(--tb-text); border-color: transparent; } html.dark-mode .nav-tabs .nav-link:hover, html.dark-mode .nav-tabs .nav-link:focus { color: var(--tb-text-strong); border-bottom-color: transparent; } html.dark-mode .nav-tabs .nav-link.active, html.dark-mode .nav-tabs .nav-item.show .nav-link { background-color: var(--tb-paper) !important; color: #a5b4fc !important; border-color: var(--tb-border-soft) var(--tb-border-soft) var(--tb-paper) !important; } html.dark-mode .nav-tabs .nav-link.active, html.dark-mode .nav-tabs .nav-link.active:hover, html.dark-mode .nav-tabs .nav-link.active:focus { border-bottom-color: var(--tb-paper) !important; } html.dark-mode .nav-align-top .nav-tabs .nav-link.active { box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.35); } /* ---------- ApexCharts text / grid / tooltip ---------- */ html.dark-mode .apexcharts-text, html.dark-mode .apexcharts-text tspan, html.dark-mode text.apexcharts-text, html.dark-mode .apexcharts-datalabel, html.dark-mode .apexcharts-datalabel-label, html.dark-mode .apexcharts-datalabel-value, html.dark-mode .apexcharts-datalabels text, html.dark-mode .apexcharts-xaxis-label, html.dark-mode .apexcharts-yaxis-label, html.dark-mode .apexcharts-title-text { fill: var(--tb-text) !important; } html.dark-mode .apexcharts-legend-text { color: var(--tb-text) !important; } html.dark-mode .apexcharts-gridline, html.dark-mode .apexcharts-grid-borders line { stroke: var(--tb-border-soft) !important; } html.dark-mode .apexcharts-tooltip, html.dark-mode .apexcharts-tooltip.apexcharts-theme-light { background: var(--tb-elevated) !important; color: var(--tb-text) !important; border-color: var(--tb-border-soft) !important; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5) !important; } html.dark-mode .apexcharts-tooltip-title, html.dark-mode .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background: var(--tb-paper-2) !important; border-color: var(--tb-border-soft) !important; color: var(--tb-text-strong) !important; } html.dark-mode .apexcharts-xaxistooltip, html.dark-mode .apexcharts-yaxistooltip { background: var(--tb-elevated) !important; color: var(--tb-text) !important; border-color: var(--tb-border-soft) !important; } /* ---------- Label chips (bg-label-*) ---------- */ html.dark-mode .bg-label-primary { background-color: rgba(79, 70, 229, 0.16) !important; color: #a5b4fc !important; } html.dark-mode .bg-label-secondary { background-color: rgba(133, 146, 163, 0.18) !important; color: #b6c0cd !important; } html.dark-mode .bg-label-success { background-color: rgba(113, 221, 55, 0.16) !important; color: #8ee65f !important; } html.dark-mode .bg-label-danger { background-color: rgba(255, 62, 29, 0.16) !important; color: #ff7a66 !important; } html.dark-mode .bg-label-warning { background-color: rgba(255, 171, 0, 0.16) !important; color: #ffc459 !important; } html.dark-mode .bg-label-info { background-color: rgba(3, 195, 236, 0.16) !important; color: #4fd6f5 !important; } html.dark-mode .bg-label-dark { background-color: rgba(255, 255, 255, 0.10) !important; color: #d5d5ec !important; } /* ---------- Field borders that render too light ---------- */ html.dark-mode .form-control, html.dark-mode .form-select, html.dark-mode .input-group-text, html.dark-mode textarea, html.dark-mode .dataTable input, html.dark-mode .search input, html.dark-mode .bootstrap-table .search input, html.dark-mode .form-floating > .form-control, html.dark-mode .flatpickr-input, html.dark-mode .daterangepicker .form-control { border-color: var(--tb-border) !important; } /* intl-tel-input adopts dark surface */ html.dark-mode .iti__country-list { background-color: var(--tb-elevated) !important; color: var(--tb-text) !important; border-color: var(--tb-border-soft) !important; } html.dark-mode .iti__country.iti__highlight { background-color: var(--tb-hover) !important; } html.dark-mode .iti__dial-code { color: var(--tb-muted) !important; } /* ---------- Misc dashboard widgets ---------- */ html.dark-mode .alert-primary { background-color: rgba(79, 70, 229, 0.12); color: #b9bbff; border-color: rgba(79, 70, 229, 0.25); } html.dark-mode .card-title, html.dark-mode .card-header .card-title { color: var(--tb-text-strong) !important; } /* Progress bars track */ html.dark-mode .progress { background-color: rgba(255, 255, 255, 0.08) !important; } /* ---------- FullCalendar (list & calendar tabs) ---------- */ html.dark-mode .fc, html.dark-mode .fc-view, html.dark-mode .fc-view > table, html.dark-mode .fc-scroller, html.dark-mode .fc-list, html.dark-mode .fc-list-table { background-color: var(--tb-paper) !important; color: var(--tb-text) !important; } html.dark-mode .fc-unthemed th, html.dark-mode .fc-unthemed td, html.dark-mode .fc th, html.dark-mode .fc td, html.dark-mode .fc-divider, html.dark-mode .fc-row, html.dark-mode .fc-popover, html.dark-mode .fc-list-heading td, html.dark-mode .fc-list-view, html.dark-mode .fc-unthemed .fc-list-heading td { border-color: var(--tb-border-soft) !important; background-color: transparent !important; color: var(--tb-text) !important; } html.dark-mode .fc-list-heading td, html.dark-mode .fc-list-empty { background-color: var(--tb-paper-2) !important; color: var(--tb-text-strong) !important; } html.dark-mode .fc-day-top, html.dark-mode .fc-day-number, html.dark-mode .fc-day-header, html.dark-mode .fc-col-header-cell, html.dark-mode .fc-toolbar h2, html.dark-mode .fc-list-item-title, html.dark-mode .fc-list-item-time { color: var(--tb-text) !important; } html.dark-mode .fc-day.fc-today, html.dark-mode .fc-unthemed td.fc-today { background-color: rgba(79, 70, 229, 0.10) !important; } html.dark-mode .fc-list-item:hover td { background-color: var(--tb-hover) !important; } html.dark-mode .fc button, html.dark-mode .fc-button { background-color: var(--tb-elevated) !important; border-color: var(--tb-border) !important; color: var(--tb-text) !important; text-shadow: none !important; } html.dark-mode .fc-state-active, html.dark-mode .fc-button-active { background-color: #6366f1 !important; color: #fff !important; } /* ========================================================================= ROOT-LEVEL: third-party plugin surfaces + hardcoded white catch-alls These target every remaining component that ships a hardcoded light background/border so dark mode is consistent app-wide. ========================================================================= */ /* ---------- Dropzone (Bulk Upload drag & drop) ---------- */ html.dark-mode .dropzone { background: var(--tb-paper-2) !important; background-color: var(--tb-paper-2) !important; border: 2px dashed var(--tb-border) !important; color: var(--tb-text) !important; } html.dark-mode .dropzone:hover { border-color: #6366f1 !important; } html.dark-mode .dropzone .dz-message, html.dark-mode .dropzone .dz-message .note, html.dark-mode .dropzone .dz-message span { color: var(--tb-text) !important; } html.dark-mode .dropzone .dz-preview .dz-image { background: var(--tb-elevated) !important; } html.dark-mode .dropzone .dz-preview .dz-details { background-color: rgba(43, 44, 64, 0.9) !important; color: var(--tb-text) !important; } html.dark-mode .dropzone .dz-preview .dz-filename span, html.dark-mode .dropzone .dz-preview .dz-size span { background: transparent !important; color: var(--tb-text) !important; } html.dark-mode .dropzone .dz-preview:hover .dz-image img { filter: none; } /* ---------- TinyMCE editor chrome ---------- */ html.dark-mode .tox-tinymce { border-color: var(--tb-border) !important; } html.dark-mode .tox .tox-toolbar, html.dark-mode .tox .tox-toolbar__primary, html.dark-mode .tox .tox-toolbar-overlord, html.dark-mode .tox .tox-menubar, html.dark-mode .tox .tox-edit-area__iframe, html.dark-mode .tox .tox-statusbar, html.dark-mode .tox-toolbar__group { background-color: var(--tb-paper) !important; border-color: var(--tb-border-soft) !important; } html.dark-mode .tox .tox-tbtn, html.dark-mode .tox .tox-tbtn svg, html.dark-mode .tox .tox-statusbar a, html.dark-mode .tox .tox-statusbar__path-item, html.dark-mode .tox .tox-mbtn { color: var(--tb-text) !important; fill: var(--tb-text) !important; } html.dark-mode .tox .tox-tbtn:hover, html.dark-mode .tox .tox-mbtn:hover { background-color: var(--tb-hover) !important; } html.dark-mode .tox .tox-menu, html.dark-mode .tox .tox-collection__item { background-color: var(--tb-elevated) !important; color: var(--tb-text) !important; } /* ---------- Toastr ---------- */ html.dark-mode #toast-container > .toast { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5) !important; } /* ---------- Tribute (mentions dropdown) ---------- */ html.dark-mode .tribute-container ul { background: var(--tb-elevated) !important; border-color: var(--tb-border-soft) !important; color: var(--tb-text) !important; } html.dark-mode .tribute-container li { color: var(--tb-text) !important; } html.dark-mode .tribute-container li.highlight, html.dark-mode .tribute-container li:hover { background: #6366f1 !important; color: #fff !important; } /* ---------- DataTables ---------- */ html.dark-mode .dataTables_wrapper, html.dark-mode .dataTables_info, html.dark-mode .dataTables_length, html.dark-mode .dataTables_filter, html.dark-mode .dataTables_paginate { color: var(--tb-text) !important; } html.dark-mode table.dataTable tbody tr { background-color: transparent !important; } html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--tb-text) !important; } /* ---------- Flatpickr ---------- */ html.dark-mode .flatpickr-calendar { background: var(--tb-elevated) !important; color: var(--tb-text) !important; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5) !important; } html.dark-mode .flatpickr-months, html.dark-mode .flatpickr-month, html.dark-mode .flatpickr-weekday, html.dark-mode .flatpickr-weekdays { background: transparent !important; color: var(--tb-text) !important; fill: var(--tb-text) !important; } html.dark-mode .flatpickr-day { color: var(--tb-text) !important; } html.dark-mode .flatpickr-day.flatpickr-disabled, html.dark-mode .flatpickr-day.prevMonthDay, html.dark-mode .flatpickr-day.nextMonthDay { color: var(--tb-muted) !important; } html.dark-mode .flatpickr-day:hover { background: var(--tb-hover) !important; border-color: var(--tb-hover) !important; } html.dark-mode .flatpickr-day.selected { background: #6366f1 !important; border-color: #6366f1 !important; color: #fff !important; } /* ---------- Lightbox ---------- */ html.dark-mode .lb-data .lb-caption { color: #fff !important; } html.dark-mode .lb-dataContainer, html.dark-mode .lb-outerContainer { background-color: var(--tb-paper) !important; } /* ---------- Bootstrap-table toolbar / pagination dropdowns ---------- */ html.dark-mode .fixed-table-toolbar .dropdown-menu, html.dark-mode .fixed-table-pagination .dropdown-menu { background-color: var(--tb-elevated) !important; } html.dark-mode .fixed-table-pagination .page-list .btn, html.dark-mode .fixed-table-toolbar .btn { background-color: var(--tb-input-bg) !important; border-color: var(--tb-border) !important; color: var(--tb-text) !important; } /* ---------- Inline white backgrounds (catch-all) ---------- */ html.dark-mode [style*="background:#fff"], html.dark-mode [style*="background: #fff"], html.dark-mode [style*="background:#FFF"], html.dark-mode [style*="background: #FFF"], html.dark-mode [style*="background-color:#fff"], html.dark-mode [style*="background-color: #fff"], html.dark-mode [style*="background-color:#ffffff"], html.dark-mode [style*="background-color: #ffffff"], html.dark-mode [style*="background:#ffffff"], html.dark-mode [style*="background: #ffffff"], html.dark-mode [style*="background:white"], html.dark-mode [style*="background: white"], html.dark-mode [style*="background-color:white"], html.dark-mode [style*="background-color: white"] { background-color: var(--tb-paper) !important; } /* ---------- Generic light surface utilities ---------- */ html.dark-mode .bg-white, html.dark-mode .bg-body, html.dark-mode .bg-lightest, html.dark-mode .card.bg-white, html.dark-mode .well, html.dark-mode .panel, html.dark-mode .box { background-color: var(--tb-paper) !important; color: var(--tb-text) !important; } /* Inputs: unify all field surfaces to one dark input color */ html.dark-mode .form-control, html.dark-mode .form-select, html.dark-mode .form-control-plaintext, html.dark-mode textarea, html.dark-mode .input-group-text, html.dark-mode .custom-select, html.dark-mode select, html.dark-mode input[type="text"], html.dark-mode input[type="email"], html.dark-mode input[type="password"], html.dark-mode input[type="number"], html.dark-mode input[type="search"], html.dark-mode input[type="url"], html.dark-mode input[type="tel"], html.dark-mode input[type="date"], html.dark-mode input[type="time"] { background-color: var(--tb-input-bg) !important; border-color: var(--tb-border) !important; color: var(--tb-text) !important; -webkit-text-fill-color: var(--tb-text) !important; } html.dark-mode input[type="date"]::-webkit-calendar-picker-indicator, html.dark-mode input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.8); } /* Browser autofill (Chrome/Edge): the browser forces its own text color via -webkit-text-fill-color and a light background, which plain `color`/`background` cannot override — making autofilled email/password invisible on dark fields. Re-assert the dark surface + light text so saved credentials stay readable. */ html.dark-mode input:-webkit-autofill, html.dark-mode input:-webkit-autofill:hover, html.dark-mode input:-webkit-autofill:focus, html.dark-mode input:-webkit-autofill:active, html.dark-mode textarea:-webkit-autofill, html.dark-mode select:-webkit-autofill { -webkit-text-fill-color: var(--tb-text) !important; caret-color: var(--tb-text) !important; -webkit-box-shadow: 0 0 0 1000px var(--tb-input-bg) inset !important; box-shadow: 0 0 0 1000px var(--tb-input-bg) inset !important; border-color: var(--tb-border) !important; transition: background-color 9999s ease-in-out 0s !important; } /* ---------- Strong tab fallback: inactive tabs in Sneat nav-align blocks ---------- */ html.dark-mode .nav-align-top > .nav.nav-tabs, html.dark-mode .nav-align-top > ul.nav-tabs, html.dark-mode .nav-align-top .nav-tabs, html.dark-mode .nav-align-right .nav-tabs, html.dark-mode .nav-align-bottom .nav-tabs, html.dark-mode .nav-align-left .nav-tabs { border-color: var(--tb-border-soft) !important; border-bottom-color: var(--tb-border-soft) !important; } html.dark-mode .nav-align-top .nav-tabs .nav-link:not(.active), html.dark-mode .nav-align-right .nav-tabs .nav-link:not(.active), html.dark-mode .nav-align-bottom .nav-tabs .nav-link:not(.active), html.dark-mode .nav-align-left .nav-tabs .nav-link:not(.active), html.dark-mode .nav-tabs .nav-link:not(.active) { background: var(--tb-paper-2) !important; background-color: var(--tb-paper-2) !important; border-color: var(--tb-border-soft) !important; color: var(--tb-text) !important; box-shadow: none !important; } html.dark-mode .nav-align-top .nav-tabs .nav-link:not(.active):hover, html.dark-mode .nav-align-right .nav-tabs .nav-link:not(.active):hover, html.dark-mode .nav-align-bottom .nav-tabs .nav-link:not(.active):hover, html.dark-mode .nav-align-left .nav-tabs .nav-link:not(.active):hover, html.dark-mode .nav-tabs .nav-link:not(.active):hover { background: var(--tb-hover) !important; background-color: var(--tb-hover) !important; border-color: var(--tb-border) !important; color: var(--tb-text-strong) !important; } html.dark-mode .nav-align-top .nav-tabs .nav-item:not(:first-child) .nav-link, html.dark-mode .nav-align-bottom .nav-tabs .nav-item:not(:first-child) .nav-link, html.dark-mode .nav-align-left .nav-tabs .nav-item:not(:first-child) .nav-link, html.dark-mode .nav-align-right .nav-tabs .nav-item:not(:first-child) .nav-link { border-left-color: var(--tb-border-soft) !important; border-top-color: var(--tb-border-soft) !important; } /* ---------- Select2 OUTER wrapper (custom.css forces white bg+border) ---------- */ /* High-specificity override so the white box around every Select2 disappears. */ html.dark-mode .select2.select2-container.select2-container--default:not(#global-search + .select2-container) { background-color: var(--tb-input-bg) !important; border-color: var(--tb-border) !important; color: var(--tb-text) !important; } html.dark-mode .select2-container--default .select2-selection__rendered, html.dark-mode .select2-container--default .select2-selection__placeholder { color: var(--tb-text) !important; } html.dark-mode .select2-container--default .select2-selection__choice { background-color: var(--tb-elevated) !important; border-color: var(--tb-border) !important; color: var(--tb-text) !important; } html.dark-mode .select2-container--default .select2-selection__choice__remove { color: var(--tb-muted) !important; border-color: var(--tb-border) !important; } /* Single-select clear (x) and arrow visible on dark */ html.dark-mode .select2-container--default .select2-selection__clear { color: var(--tb-muted) !important; }