/* ============================================================================
DARK THEME OVERLAY
============================================================================
This file ONLY contains dark theme overrides.
Include this AFTER all your existing CSS files.
To enable: Add data-theme="dark" to or
Usage:
============================================================================ */
/* Only apply styles when dark theme is active */
[data-theme="dark"] {
color-scheme: dark;
}
/* ==========================================================================
BODY & BACKGROUNDS
========================================================================== */
[data-theme="dark"] body {
background-color: #1e1e1e;
color: #e0e0e0;
}
[data-theme="dark"] .wrapper-body {
background-color: #1e1e1e;
}
/* ==========================================================================
CARDS, PANELS & CONTAINERS
========================================================================== */
[data-theme="dark"] .component {
background-color: #2d2d2d;
}
[data-theme="dark"] .panel-content,
[data-theme="dark"] .mainEditDataContainer {
background-color: #252525;
border-color: #0f4148 !important;
}
[data-theme="dark"] .panel-header {
background-color: #2d2d2d;
border-color: #0f4148;
}
[data-theme="dark"] .tab-pane {
background-color: #252525;
}
[data-theme="dark"] .shade-container {
background-color: #252525;
}
[data-theme="dark"] .div-forText {
background-color: rgba(45, 45, 45, 0.8);
border-color: #0f4148;
}
[data-theme="dark"] .entitylist {
background-color: #252525;
}
/* ==========================================================================
TABLES & ROWS
========================================================================== */
[data-theme="dark"] .table {
background-color: #252525;
border-color: #0f4148;
}
[data-theme="dark"] .header .cell {
background-color: #333 !important;
color: #e0e0e0 !important;
}
[data-theme="dark"] .cell {
background-color: #252525 !important;
border-color: #0f4148 !important;
color: #e0e0e0 !important;
}
[data-theme="dark"] .clickable-row:hover .cell {
background-color: #333 !important;
}
[data-theme="dark"] .cell-content {
color: #e0e0e0 !important;
}
/* ==========================================================================
FORMS & INPUTS
========================================================================== */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
background-color: #041c1f !important;
color: #e0e0e0 !important;
border-color: #0f4148 !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
background-color: #041c1f !important;
color: #e0e0e0 !important;
border-color: #0f4148 !important;
box-shadow: 0 0 0 2px rgba(0, 113, 128, 0.25);
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] input:disabled {
background-color: #737373;
color: #888;
}
/* [data-theme="dark"] *::placeholder, */
[data-theme="dark"] *::placeholder {
color: #4d4c4c !important;
}
[data-theme="dark"] .form-check-input {
background-color: #333;
border-color: #0f4148;
}
[data-theme="dark"] .fake-textarea {
background-color: #041c1f !important;
color: #e0e0e0 !important;
border-color: #0f4148 !important;
}
/* ==========================================================================
LABELS & TEXT
========================================================================== */
[data-theme="dark"] label {
color: #e0e0e0 !important;
}
[data-theme="dark"] h2 {
color: #7db3d9 !important;
}
[data-theme="dark"] h3 {
color: #e0e0e0 !important;
}
[data-theme="dark"] h4 {
color: #e0e0e0 !important;
}
[data-theme="dark"] .boxlabel {
background-color: #333!important;
color: #e0e0e0!important;
border-color: #0f4148!important;
}
[data-theme="dark"] .boxdate {
background-color: #333!important;
color: #e0e0e0!important;
border-color: #0f4148!important;
}
[data-theme="dark"] .current-stage-label {
background-color: #333!important;
color: #e0e0e0!important;
border-color: #0f4148!important;
}
/* ==========================================================================
NAVIGATION & TABS
========================================================================== */
[data-theme="dark"] .nav-link {
color: #e0e0e0 !important;
background-color: #2d2d2d !important;
border-color: #0f4148 !important;
}
[data-theme="dark"] .nav-link:hover {
background-color: #383838 !important;
}
[data-theme="dark"] .nav-link.active {
background-color: #007180 !important;
color: #fff !important;
}
[data-theme="dark"] .nav-bubble {
background-color: #444 !important;
color: #e0e0e0 !important;
}
[data-theme="dark"] .nav-tabs {
border-color: #0f4148 !important;
}
/* ==========================================================================
BUTTONS
========================================================================== */
[data-theme="dark"] .btn.btn-default {
background-color: #3a3a3a;
color: #e0e0e0;
border-color: #0f4148;
}
[data-theme="dark"] .btn.btn-default:hover {
background-color: #444;
}
[data-theme="dark"] .status-btn {
background-color: rgb(57 75 77) !important;
color: #e0e0e0 !important;
/* border-color: #666 !important; */
}
[data-theme="dark"] .status-btn:hover {
background-color: #007180 !important;
color: #fff !important;
}
[data-theme="dark"] #searchTextButton {
background-color: #333;
color: #aaa;
border-color: #0f4148;
}
/* ==========================================================================
DROPDOWNS
========================================================================== */
[data-theme="dark"] .dropdown-menu {
background-color: #2d2d2d;
border-color: #0f4148;
}
[data-theme="dark"] .dropdown-item {
color: #e0e0e0;
}
[data-theme="dark"] .dropdown-item:hover {
background-color: #007180 !important;
color: #fff !important;
}
[data-theme="dark"] .dropdown-divider {
border-color: #0f4148;
}
/* ==========================================================================
TIMELINE
========================================================================== */
[data-theme="dark"] .timeline-item {
background-color: #2d2d2d;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .timeline-item:hover {
background-color: #353535;
}
[data-theme="dark"] .timeline-title {
color: #e0e0e0;
}
[data-theme="dark"] .timeline-meta {
color: #999;
}
[data-theme="dark"] .timeline-circle {
border-color: #0f4148;
}
[data-theme="dark"] .priority-badge {
/* background-color: #3a3a3a; */
color: #484848;
}
[data-theme="dark"] .gutter-icon {
background-color: #3a3a3a;
border-color: #0f4148;
}
[data-theme="dark"] .gutter-icon:hover {
background-color: #444;
}
/* ==========================================================================
ACTIVITY & NOTES
========================================================================== */
[data-theme="dark"] .activity-card {
background: linear-gradient(135deg, rgba(255, 234, 167, 0.08) 0%, rgba(0, 113, 128, 0.12) 100%);
}
[data-theme="dark"] .activity-item-content {
background-color: rgba(45, 45, 45, 0.7);
}
[data-theme="dark"] .activity-note-text {
background-color: #2a2a2a;
color: #e0e0e0;
border-color: #0f4148;
}
[data-theme="dark"] .activity-file-name {
color: #e0e0e0;
}
[data-theme="dark"] .activity-link {
color: #5dade2;
}
[data-theme="dark"] .activity-btn-download,
[data-theme="dark"] .activity-btn-delete,
[data-theme="dark"] .activity-btn-strike {
color: #aaa;
}
[data-theme="dark"] .postit-note {
background: linear-gradient(135deg, rgba(255, 234, 167, 0.644) 0%, rgba(253, 203, 110, 0.411) 100%);
}
[data-theme="dark"] .note-subject pre {
background-color: #2a2a2a;
color: #e0e0e0;
border-color: #0f4148;
}
[data-theme="dark"] .note-action {
color: #e0e0e0;
}
[data-theme="dark"] .note-action strong {
color: #0bb4cb;
}
[data-theme="dark"] .note-metadata {
border-top-color: #444;
color: #0bb4cb;
}
[data-theme="dark"] .note-item-count {
background-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .activity-empty-state {
color: #888;
}
[data-theme="dark"] .activity-type-badge {
background-color: rgb(255 160 0 / 58%);
color: #2b3130;
}
/* ==========================================================================
MODALS
========================================================================== */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .confirmation-modal-content {
background-color: #2d2d2d;
color: #e0e0e0;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .confirmation-modal-header {
background-color: #333;
border-color: #0f4148;
}
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .confirmation-modal-footer {
background-color: #333;
border-color: #0f4148;
}
[data-theme="dark"] .modal-title,
[data-theme="dark"] .confirmation-modal-title {
color: #7db3d9;
}
[data-theme="dark"] .modal-body,
[data-theme="dark"] .confirmation-modal-body {
color: #ccc;
}
[data-theme="dark"] .confirm-btn-cancel {
background-color: transparent;
color: #aaa;
border-color: #0f4148;
}
[data-theme="dark"] .confirm-btn-cancel:hover {
background-color: #3a3a3a;
color: #e0e0e0;
}
[data-theme="dark"] .btn-close {
filter: invert(0.8);
}
/* ==========================================================================
ALERTS
========================================================================== */
[data-theme="dark"] .alert {
background-color: #2d2d2d;
color: #e0e0e0;
border-color: #0f4148;
}
[data-theme="dark"] .alert-warning {
background-color: rgba(255, 193, 7, 0.9);
border-color: rgba(255, 193, 7, 0.9);
color: #3e2c55;
}
[data-theme="dark"] .alert-danger {
background-color: rgba(220, 53, 69, 0.8);
border-color: rgba(220, 53, 69, 0.8);
}
[data-theme="dark"] .alert-success {
background-color: rgba(40, 167, 69, 0.7);
border-color: rgba(40, 167, 69, 0.7);
}
/* ==========================================================================
INSTRUCTIONS
========================================================================== */
[data-theme="dark"] .instruction {
background-color: #2a2a2a;
}
[data-theme="dark"] .information-instruction {
background-color: rgba(253, 181, 19, 0.12);
}
[data-theme="dark"] .warning-instruction {
background-color: #2a2a2a;
}
[data-theme="dark"] .error-instruction {
background-color: rgba(202, 43, 44, 0.15);
}
/* ==========================================================================
ACCORDIONS
========================================================================== */
[data-theme="dark"] #formsAccordion .accordion-item {
background-color: #252525;
border-color: #0f4148;
}
[data-theme="dark"] #formsAccordion .accordion-button {
background-color: #333;
color: #e0e0e0;
}
[data-theme="dark"] #formsAccordion .accordion-button:not(.collapsed) {
background-color: rgba(0, 113, 128, 0.2);
color: #5dade2;
}
[data-theme="dark"] #formsAccordion .accordion-button::after {
filter: invert(0.7);
}
[data-theme="dark"] #formsAccordion .accordion-body {
background-color: #2a2a2a;
}
[data-theme="dark"] #formsAccordion h3 {
color: #5dade2;
}
[data-theme="dark"] #formsAccordion hr {
border-color: #0f4148;
}
[data-theme="dark"] p,
[data-theme="dark"] .p,
[data-theme="dark"] .page_section
[data-theme="dark"] p,
[data-theme="dark"] .section-diagonal-left
[data-theme="dark"] p,
[data-theme="dark"] .section-diagonal-right
[data-theme="dark"] p,
[data-theme="dark"] p.form-text
[data-theme="dark"] span
{
color: #bdbdbd;
}
/* ==========================================================================
COLUMN DROPDOWNS & FILTERS
========================================================================== */
[data-theme="dark"] .column-dropdown-menu {
background-color: #2d2d2d;
border-color: #0f4148;
}
[data-theme="dark"] .column-dropdown-menu.show {
background-color: #2d2d2d;
}
[data-theme="dark"] .column-dropdown-header {
background-color: #333;
border-color: #0f4148;
}
[data-theme="dark"] .column-dropdown-section .section-label {
color: #999;
}
[data-theme="dark"] .column-dropdown-divider {
background-color: #444;
}
[data-theme="dark"] .sort-option {
background-color: #2d2d2d;
color: #e0e0e0;
border-color: #0f4148;
}
[data-theme="dark"] .sort-option:hover {
background-color: rgba(77, 166, 255, 0.1);
border-color: #5dade2;
}
[data-theme="dark"] .sort-option.active {
background-color: rgba(77, 166, 255, 0.15);
border-color: #5dade2;
color: #5dade2;
}
[data-theme="dark"] .sort-option .option-icon {
background-color: #3a3a3a;
color: #999;
}
[data-theme="dark"] .sort-option.active .option-icon {
background-color: #5dade2;
color: #1a1a1a;
}
[data-theme="dark"] .sort-option .option-desc {
color: #777;
}
[data-theme="dark"] .filter-search-input {
background-color: #333;
color: #e0e0e0;
border-color: #0f4148;
}
[data-theme="dark"] .filter-options-container {
background-color: #2a2a2a;
border-color: #0f4148;
}
[data-theme="dark"] .filter-option:hover {
background-color: #3a3a3a;
}
[data-theme="dark"] .filter-option.select-all {
border-color: #0f4148;
}
[data-theme="dark"] .column-dropdown-menu .filter-label {
color: #e0e0e0;
}
[data-theme="dark"] .column-dropdown-footer {
background-color: #333;
border-color: #0f4148;
}
[data-theme="dark"] .column-close-btn {
color: #999;
border-color: #0f4148;
}
[data-theme="dark"] .column-close-btn:hover {
background-color: #3a3a3a;
color: #e0e0e0;
}
[data-theme="dark"] .header-search-input {
background-color: #333;
color: #e0e0e0;
border-color: #0f4148;
}
[data-theme="dark"] .header-search-input::placeholder {
color: #9e9e9e;
}
[data-theme="dark"] .sortable-table .header .cell.column-header:hover {
background-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .sortable-table .header .cell.column-header.dropdown-open {
background-color: rgba(93, 173, 226, 0.15);
}
[data-theme="dark"] .header-indicators .dropdown-trigger {
background-color: rgba(255, 255, 255, 0.1);
color: #999;
}
[data-theme="dark"] .column-header:hover .header-indicators .dropdown-trigger {
background-color: rgba(93, 173, 226, 0.2);
color: #5dade2;
}
[data-theme="dark"] .sort-badge {
background-color: #5dade2;
}
/* ==========================================================================
MOBILE FILTER BAR
========================================================================== */
[data-theme="dark"] .mobile-filter-bar {
background-color: #2d2d2d;
border-color: #0f4148;
}
[data-theme="dark"] .mobile-search-input {
background-color: #333;
color: #e0e0e0;
border-color: #0f4148;
}
[data-theme="dark"] .mobile-dropdown-btn {
background-color: #333;
color: #e0e0e0;
border-color: #0f4148;
}
[data-theme="dark"] .mobile-dropdown-btn.active {
background-color: rgba(93, 173, 226, 0.15);
border-color: #5dade2;
color: #5dade2;
}
[data-theme="dark"] .mobile-dropdown-menu {
background-color: #2d2d2d;
border-color: #0f4148;
}
[data-theme="dark"] .mobile-dropdown-option {
color: #e0e0e0;
}
[data-theme="dark"] .mobile-dropdown-option:hover {
background-color: #3a3a3a;
}
[data-theme="dark"] .mobile-dropdown-option.active {
background-color: rgba(93, 173, 226, 0.15);
color: #5dade2;
}
[data-theme="dark"] .mobile-filter-header {
background-color: #333;
border-color: #0f4148;
}
[data-theme="dark"] .mobile-filter-title {
color: #e0e0e0;
}
[data-theme="dark"] .mobile-filter-close-btn {
color: #999;
border-color: #0f4148;
}
[data-theme="dark"] .mobile-filter-option:hover {
background-color: #3a3a3a;
}
[data-theme="dark"] .mobile-filter-option.mobile-select-all {
border-color: #0f4148;
}
/* ==========================================================================
NO RESULTS
========================================================================== */
[data-theme="dark"] .no-cases-inline {
background-color: #2a2a2a;
border-color: #0f4148;
}
[data-theme="dark"] .no-cases-text {
color: #999;
}
[data-theme="dark"] .no-cases-text strong {
color: #e0e0e0;
}
[data-theme="dark"] .clear-filters-btn {
background-color: #2d2d2d;
color: #5dade2;
border-color: #5dade2;
}
[data-theme="dark"] .clear-filters-btn:hover {
background-color: #5dade2;
color: #1a1a1a;
}
[data-theme="dark"] .bg-primary.text-white.p-5.mb-4.rounded {
background-color: #2d2d2d;
}
/* ==========================================================================
HELP PANEL
========================================================================== */
[data-theme="dark"] #help {
background-color: #2d2d2d;
border-color: #444;
color: #e0e0e0;
}
[data-theme="dark"] #help h1,
[data-theme="dark"] h1,
[data-theme="dark"] #help h2 {
color: #5dade2;
}
[data-theme="dark"] #help .tip {
background-color: rgba(0, 64, 128, 0.2);
}
[data-theme="dark"] #help .warning {
background-color: rgba(255, 153, 0, 0.12);
}
[data-theme="dark"] #help code {
background-color: #3a3a3a;
}
/* ==========================================================================
LINKS
========================================================================== */
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
color: #5dade2;
}
[data-theme="dark"] .link-container {
background-color: #2d2d2d;
border-color: #0f4148;
}
[data-theme="dark"] .link-container .link {
color: #5dade2;
}
[data-theme="dark"] .link-form-control {
background-color: #333;
color: #5dade2;
border-color: #0f4148 !important;
}
/* ==========================================================================
FILE CONTAINERS
========================================================================== */
[data-theme="dark"] .file-container {
background-color: rgba(61, 26, 114, 0.12) !important;
border-color: #0f4148;
}
[data-theme="dark"] .file-container .filename {
color: #e0e0e0;
}
/* ==========================================================================
LOADING OVERLAY
========================================================================== */
[data-theme="dark"] #load-mask {
background-color: rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] #page-loader {
background-color: rgba(0, 0, 0, 0.7);
}
/* ==========================================================================
SCROLLBARS (Webkit)
========================================================================== */
[data-theme="dark"] ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
background: #2a2a2a;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: #555;
border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: #666;
}
/* ==========================================================================
MISC
========================================================================== */
[data-theme="dark"] .ai-text {
background-color: rgba(60, 219, 58, 0.05);
box-shadow: 0px 0px 18px rgba(77, 166, 255, 0.15);
color: #0bb4cb;
}
[data-theme="dark"] pre {
background-color: #2a2a2a;
color: #e0e0e0;
}
[data-theme="dark"] code {
background-color: #3a3a3a;
color: #e0e0e0;
}
[data-theme="dark"] hr {
border-color: #444;
}
[data-theme="dark"] .remove-role-btn {
background-color: rgba(248, 113, 113, 0.12);
border-color: #555;
}
/* ==========================================================================
THEME TOGGLE BUTTON STYLES
========================================================================== */
.theme-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
color: #333;
}
.theme-toggle:hover {
background-color: #e0e0e0;
border-color: #007180;
}
[data-theme="dark"] .theme-toggle {
background-color: #3a3a3a;
border-color: #555;
color: #e0e0e0;
}
[data-theme="dark"] .theme-toggle:hover {
background-color: #444;
border-color: #007180;
}
.theme-toggle-icon {
font-size: 18px;
line-height: 1;
}
.theme-toggle-text {
font-weight: 500;
}
/* Menu item version */
.nav-theme-toggle {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
cursor: pointer;
transition: background-color 0.2s ease;
color: inherit;
text-decoration: none !important;
}
.nav-theme-toggle:hover {
background-color: rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .nav-theme-toggle:hover {
background-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] h5{
color:#fff;
}
/* ==========================================================================
HELP DOCUMENT STYLES - DARK THEME
========================================================================== */
[data-theme="dark"] .card {
background-color: #2d2d2d;
border-color: #0f4148;
}
[data-theme="dark"] .card-header {
background-color: #333 !important;
border-color: #0f4148;
}
[data-theme="dark"] .card-header.bg-primary,
[data-theme="dark"] .card-header.bg-secondary {
background-color: #007180 !important;
}
[data-theme="dark"] .card-body {
background-color: #252525;
color: #e0e0e0;
}
[data-theme="dark"] .bg-light {
background-color: #333 !important;
}
[data-theme="dark"] .bg-warning.bg-opacity-10 {
background-color: rgba(255, 193, 7, 0.15) !important;
}
[data-theme="dark"] .border-start {
border-color: #0f4148 !important;
}
[data-theme="dark"] .border-start.border-primary {
border-color: #5dade2 !important;
}
[data-theme="dark"] .border-start.border-warning {
border-color: #ffc107 !important;
}
[data-theme="dark"] .border-start.border-danger {
border-color: #dc3545 !important;
}
[data-theme="dark"] .border-start.border-info {
border-color: #0bb4cb !important;
}
[data-theme="dark"] .border-start.border-secondary {
border-color: #6c757d !important;
}
[data-theme="dark"] .badge.bg-dark {
background-color: #0f4148 !important;
}
[data-theme="dark"] .badge.bg-primary {
background-color: #007180 !important;
}
[data-theme="dark"] .badge.bg-info {
background-color: #0bb4cb !important;
}
[data-theme="dark"] .text-muted {
color: #999 !important;
}
[data-theme="dark"] .text-primary {
color: #5dade2 !important;
}
[data-theme="dark"] .text-secondary {
color: #aaa !important;
}
[data-theme="dark"] .rounded {
border: 1px solid #0f4148;
}
/* ============================================================================
LIGHT THEME EXPLICIT STYLES
============================================================================
Add these to ensure light mode displays correctly when dark mode is NOT active
============================================================================ */
/* Only apply when NOT in dark mode (default/light theme) */
:root:not([data-theme="dark"]) body,
body:not([data-theme="dark"]) {
background-color: #ffffff;
color: #212529;
}
/* Cards */
:root:not([data-theme="dark"]) .card,
body:not([data-theme="dark"]) .card {
background-color: #fff;
border-color: rgba(0, 0, 0, 0.125);
}
:root:not([data-theme="dark"]) .card-body,
body:not([data-theme="dark"]) .card-body {
background-color: #fff;
color: #212529;
}
/* Ensure bg-light works properly */
:root:not([data-theme="dark"]) .bg-light,
body:not([data-theme="dark"]) .bg-light {
background-color: #f8f9fa !important;
}
/* Badge colors - explicit light mode */
:root:not([data-theme="dark"]) .badge.bg-info,
body:not([data-theme="dark"]) .badge.bg-info {
background-color: #0dcaf0 !important;
color: #000 !important;
}
:root:not([data-theme="dark"]) .badge.bg-warning,
body:not([data-theme="dark"]) .badge.bg-warning {
background-color: #ffc107 !important;
color: #000 !important;
}
:root:not([data-theme="dark"]) .badge.bg-secondary,
body:not([data-theme="dark"]) .badge.bg-secondary {
background-color: #6c757d !important;
color: #fff !important;
}
:root:not([data-theme="dark"]) .badge.bg-success,
body:not([data-theme="dark"]) .badge.bg-success {
background-color: #198754 !important;
color: #fff !important;
}
:root:not([data-theme="dark"]) .badge.bg-danger,
body:not([data-theme="dark"]) .badge.bg-danger {
background-color: #dc3545 !important;
color: #fff !important;
}
:root:not([data-theme="dark"]) .badge.bg-primary,
body:not([data-theme="dark"]) .badge.bg-primary {
background-color: #0d6efd !important;
color: #fff !important;
}
:root:not([data-theme="dark"]) .badge.bg-dark,
body:not([data-theme="dark"]) .badge.bg-dark {
background-color: #212529 !important;
color: #fff !important;
}
/* Alert boxes - light mode */
:root:not([data-theme="dark"]) .alert-success,
body:not([data-theme="dark"]) .alert-success {
background-color: #d1e7dd;
border-color: #badbcc;
color: #0f5132;
}
:root:not([data-theme="dark"]) .alert-danger,
body:not([data-theme="dark"]) .alert-danger {
background-color: #f8d7da;
border-color: #f5c2c7;
color: #842029;
}
:root:not([data-theme="dark"]) .alert-warning,
body:not([data-theme="dark"]) .alert-warning {
background-color: #fff3cd;
border-color: #ffecb5;
color: #664d03;
}
:root:not([data-theme="dark"]) .alert-info,
body:not([data-theme="dark"]) .alert-info {
background-color: #cff4fc;
border-color: #b6effb;
color: #055160;
}
/* Text colors - light mode */
:root:not([data-theme="dark"]) .text-primary,
body:not([data-theme="dark"]) .text-primary {
color: #0d6efd !important;
}
:root:not([data-theme="dark"]) .text-secondary,
body:not([data-theme="dark"]) .text-secondary {
color: #6c757d !important;
}
:root:not([data-theme="dark"]) .text-muted,
body:not([data-theme="dark"]) .text-muted {
color: #6c757d !important;
}
:root:not([data-theme="dark"]) .text-success,
body:not([data-theme="dark"]) .text-success {
color: #198754 !important;
}
:root:not([data-theme="dark"]) .text-danger,
body:not([data-theme="dark"]) .text-danger {
color: #dc3545 !important;
}
:root:not([data-theme="dark"]) .text-info,
body:not([data-theme="dark"]) .text-info {
color: #0dcaf0 !important;
}
/* Border colors - light mode */
:root:not([data-theme="dark"]) .border-start.border-primary,
body:not([data-theme="dark"]) .border-start.border-primary {
border-color: #0d6efd !important;
}
:root:not([data-theme="dark"]) .border-start.border-warning,
body:not([data-theme="dark"]) .border-start.border-warning {
border-color: #ffc107 !important;
}
:root:not([data-theme="dark"]) .border-start.border-danger,
body:not([data-theme="dark"]) .border-start.border-danger {
border-color: #dc3545 !important;
}
:root:not([data-theme="dark"]) .border-start.border-info,
body:not([data-theme="dark"]) .border-start.border-info {
border-color: #0dcaf0 !important;
}
:root:not([data-theme="dark"]) .border-start.border-secondary,
body:not([data-theme="dark"]) .border-start.border-secondary {
border-color: #6c757d !important;
}
/* Headers */
:root:not([data-theme="dark"]) h5,
body:not([data-theme="dark"]) h5 {
color: #212529;
}
:root:not([data-theme="dark"]) .card-header.bg-primary,
body:not([data-theme="dark"]) .card-header.bg-primary {
background-color: #0d6efd !important;
}
:root:not([data-theme="dark"]) .card-header.bg-secondary,
body:not([data-theme="dark"]) .card-header.bg-secondary {
background-color: #6c757d !important;
}