/* * theme.css — Elite Art theme token layer + dark mode. * * Loaded after corporate.css. Defines semantic tokens whose light values * match the rendered appearance of corporate.css exactly, then re-points * shared components at those tokens so dark mode is driven entirely by the * [data-theme="dark"] attribute on (set pre-paint in base.html). * * Dark token definitions are scoped to @media screen so printed output * always falls back to the light palette. */ /* ------------------------------------------------------------------ */ /* 1. Tokens */ /* ------------------------------------------------------------------ */ :root { /* surfaces */ --bg-body: #f7f9fc; --bg-surface: #ffffff; --bg-surface-alt: #f5f5f5; --bg-inset: #e9ecef; /* text */ --text-primary: #495057; --text-secondary: #6c757d; --text-heading: #212121; /* lines & chrome */ --border-color: #dee2e6; --border-translucent: rgba(0, 0, 0, 0.125); --shadow-color: rgba(53, 64, 82, 0.05); --sidebar-bg: #262f3d; /* forms */ --input-bg: #ffffff; --input-border: #ced4da; --input-text: #495057; --input-placeholder: #adb5bd; /* tables */ --table-stripe: rgba(0, 0, 0, 0.02); --table-hover: rgba(0, 0, 0, 0.045); /* links (brand pink) */ --link-color: #e83e8c; --link-hover: #c22c76; /* status (used by dark alert overrides; light keeps stock BS values) */ --status-success: #4caf50; --status-warning: #ffc107; --status-danger: #f44336; --status-info: #00bcd4; } @media screen { [data-theme='dark'] { --bg-body: #16181d; --bg-surface: #22262e; --bg-surface-alt: #2a2f38; --bg-inset: #1c2027; --text-primary: #d6d8de; --text-secondary: #9aa0ab; --text-heading: #f0f1f3; --border-color: #3a4049; --border-translucent: rgba(255, 255, 255, 0.1); --shadow-color: rgba(0, 0, 0, 0.4); --sidebar-bg: #1b1f27; --input-bg: #1c2027; --input-border: #444b56; --input-text: #d6d8de; --input-placeholder: #6e7682; --table-stripe: rgba(255, 255, 255, 0.03); --table-hover: rgba(255, 255, 255, 0.06); /* brand pink lightened to pass AA on dark surfaces */ --link-color: #f0699f; --link-hover: #f48cbb; --status-success: #66bb6a; --status-warning: #ffca28; --status-danger: #ef5350; --status-info: #26c6da; /* native dark scrollbars + form widgets */ color-scheme: dark; } } /* ------------------------------------------------------------------ */ /* 2. Base remap (both themes — light stays pixel-identical) */ /* ------------------------------------------------------------------ */ body { color: var(--text-primary); background-color: var(--bg-body); } .card, .modal-content, .dropdown-menu, .list-group-item { color: var(--text-primary); background-color: var(--bg-surface); } footer.footer { background: var(--bg-surface); border-top-color: var(--border-color); } .sidebar, .sidebar-content { background: var(--sidebar-bg); } hr { border-top-color: var(--border-translucent); } .table { color: var(--text-primary); } .table td, .table th { border-top-color: var(--border-color); } .table thead th { border-bottom-color: var(--border-color); } .table-bordered, .table-bordered td, .table-bordered th { border-color: var(--border-color); } .form-control, .custom-select { color: var(--input-text); background-color: var(--input-bg); border-color: var(--input-border); } .form-control::placeholder { color: var(--input-placeholder); } .input-group-text { color: var(--text-primary); background-color: var(--bg-inset); border-color: var(--input-border); } .breadcrumb { background-color: var(--bg-inset); } .page-link { color: var(--text-secondary); background-color: var(--bg-surface); border-color: var(--border-color); } .page-link:hover { background-color: var(--bg-inset); border-color: var(--border-color); } .page-item.disabled .page-link { background-color: var(--bg-surface); border-color: var(--border-color); } .dropdown-menu-header, .dropdown-divider { border-bottom-color: var(--border-color); } .dropdown-divider { border-top-color: var(--border-color); } /* ------------------------------------------------------------------ */ /* 3. Dark-only component overrides */ /* ------------------------------------------------------------------ */ /* --- layout chrome --- */ [data-theme='dark'] .main, [data-theme='dark'] .content, [data-theme='dark'] .wrapper { background-color: var(--bg-body); } [data-theme='dark'] h1, [data-theme='dark'] h2, [data-theme='dark'] h3, [data-theme='dark'] h4, [data-theme='dark'] h5, [data-theme='dark'] h6 { color: var(--text-heading); } [data-theme='dark'] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.sidebar-link):not(.badge) { color: var(--link-color); } [data-theme='dark'] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.sidebar-link):not(.badge):hover { color: var(--link-hover); } /* --- topbar --- */ [data-theme='dark'] .navbar.bg-white, [data-theme='dark'] .navbar-light { background-color: var(--bg-surface) !important; border-bottom: 1px solid var(--border-color); } [data-theme='dark'] .navbar-light .navbar-nav .nav-link { color: var(--text-primary); } [data-theme='dark'] .hamburger, [data-theme='dark'] .hamburger:after, [data-theme='dark'] .hamburger:before { background: var(--text-primary); } /* --- cards --- */ [data-theme='dark'] .card { box-shadow: 0 0 0.875rem 0 var(--shadow-color); } [data-theme='dark'] .card-header, [data-theme='dark'] .card-footer { background-color: var(--bg-surface); border-color: var(--border-color); } [data-theme='dark'] .card-title { color: var(--text-heading); } [data-theme='dark'] .card-actions a { color: var(--text-primary); } /* --- tables --- */ [data-theme='dark'] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--table-stripe); } [data-theme='dark'] .table-hover tbody tr:hover { color: var(--text-primary); background-color: var(--table-hover); } [data-theme='dark'] .table .thead-light th { color: var(--text-primary); background-color: var(--bg-inset); border-color: var(--border-color); } /* --- forms --- */ [data-theme='dark'] .form-control:focus, [data-theme='dark'] .custom-select:focus { color: var(--input-text); background-color: var(--input-bg); border-color: #e83e8c; box-shadow: 0 0 0 0.2rem rgba(232, 62, 140, 0.25); } [data-theme='dark'] .form-control:disabled, [data-theme='dark'] .form-control[readonly] { background-color: var(--bg-inset); opacity: 0.7; } [data-theme='dark'] .custom-control-label::before { background-color: var(--input-bg); border-color: var(--input-border); } [data-theme='dark'] .custom-file-label { color: var(--input-text); background-color: var(--input-bg); border-color: var(--input-border); } [data-theme='dark'] .custom-file-label::after { color: var(--text-primary); background-color: var(--bg-inset); } [data-theme='dark'] label, [data-theme='dark'] legend { color: var(--text-primary); } /* --- buttons --- */ [data-theme='dark'] .btn-light { color: var(--text-primary); background-color: var(--bg-surface-alt); border-color: var(--border-color); } [data-theme='dark'] .btn-light:hover, [data-theme='dark'] .btn-light:focus { color: var(--text-heading); background-color: var(--bg-inset); border-color: var(--border-color); } [data-theme='dark'] .btn-outline-secondary { color: var(--text-primary); border-color: var(--input-border); } [data-theme='dark'] .btn-outline-secondary:hover { color: #fff; background-color: var(--text-secondary); border-color: var(--text-secondary); } [data-theme='dark'] .btn-outline-dark { color: var(--text-primary); border-color: var(--text-primary); } [data-theme='dark'] .close { color: var(--text-primary); text-shadow: none; } /* --- dropdowns / navs / pagination --- */ [data-theme='dark'] .dropdown-item { color: var(--text-primary); } [data-theme='dark'] .dropdown-item:focus, [data-theme='dark'] .dropdown-item:hover { color: var(--text-heading); background-color: var(--bg-inset); } [data-theme='dark'] .dropdown-header { color: var(--text-secondary); } [data-theme='dark'] .nav-tabs { border-bottom-color: var(--border-color); } [data-theme='dark'] .nav-tabs .nav-link.active { color: var(--text-heading); background-color: var(--bg-body); border-color: var(--border-color) var(--border-color) var(--bg-body); } [data-theme='dark'] .nav-tabs .nav-link:focus, [data-theme='dark'] .nav-tabs .nav-link:hover { border-color: var(--border-color) var(--border-color) var(--border-color); } [data-theme='dark'] .page-item.active .page-link { color: #fff; background-color: #e83e8c; border-color: #e83e8c; } /* --- modals / alerts / badges --- */ [data-theme='dark'] .modal-header, [data-theme='dark'] .modal-footer { border-color: var(--border-color); } [data-theme='dark'] .alert-success { color: #a5d6a7; background-color: rgba(76, 175, 80, 0.15); border-color: rgba(76, 175, 80, 0.4); } [data-theme='dark'] .alert-warning { color: #ffe082; background-color: rgba(255, 193, 7, 0.15); border-color: rgba(255, 193, 7, 0.4); } [data-theme='dark'] .alert-danger { color: #ef9a9a; background-color: rgba(244, 67, 54, 0.15); border-color: rgba(244, 67, 54, 0.4); } [data-theme='dark'] .alert-info { color: #80deea; background-color: rgba(0, 188, 212, 0.15); border-color: rgba(0, 188, 212, 0.4); } [data-theme='dark'] .alert-primary { color: #f8a5c2; background-color: rgba(232, 62, 140, 0.15); border-color: rgba(232, 62, 140, 0.4); } [data-theme='dark'] .alert-secondary { color: #a9c8ee; background-color: rgba(74, 144, 226, 0.15); border-color: rgba(74, 144, 226, 0.4); } [data-theme='dark'] .alert-light { color: var(--text-primary); background-color: var(--bg-surface-alt); border-color: var(--border-color); } [data-theme='dark'] .badge-light { color: var(--text-primary); background-color: var(--bg-surface-alt); } /* --- DataTables --- */ [data-theme='dark'] .dataTables_wrapper, [data-theme='dark'] div.dataTables_wrapper div.dataTables_info, [data-theme='dark'] div.dataTables_wrapper div.dataTables_length label, [data-theme='dark'] div.dataTables_wrapper div.dataTables_filter label { color: var(--text-primary); } [data-theme='dark'] div.dataTables_wrapper div.dataTables_filter input, [data-theme='dark'] div.dataTables_wrapper div.dataTables_length select { color: var(--input-text); background-color: var(--input-bg); border-color: var(--input-border); } [data-theme='dark'] table.dataTable td, [data-theme='dark'] table.dataTable th { border-color: var(--border-color); } [data-theme='dark'] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text-primary) !important; background: var(--bg-surface) !important; border-color: var(--border-color) !important; } [data-theme='dark'] .dataTables_wrapper .dataTables_paginate .paginate_button.current, [data-theme='dark'] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: #fff !important; background: #e83e8c !important; border-color: #e83e8c !important; } [data-theme='dark'] .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):hover { color: var(--text-heading) !important; background: var(--bg-inset) !important; border-color: var(--border-color) !important; } [data-theme='dark'] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, [data-theme='dark'] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--text-secondary) !important; background: var(--bg-surface) !important; } /* fixedColumns CDN CSS paints white over frozen cells and loads after theme.css (extendstyle block), hence !important */ [data-theme='dark'] .dtfc-fixed-left, [data-theme='dark'] .dtfc-fixed-right, [data-theme='dark'] table.dataTable tbody tr > .dtfc-fixed-left, [data-theme='dark'] table.dataTable tbody tr > .dtfc-fixed-right, [data-theme='dark'] table.dataTable thead tr > .dtfc-fixed-left, [data-theme='dark'] table.dataTable thead tr > .dtfc-fixed-right { background-color: var(--bg-surface) !important; } /* --- Select2 (bootstrap4 theme) --- */ [data-theme='dark'] .select2-container--bootstrap4 .select2-selection { color: var(--input-text); background-color: var(--input-bg); border-color: var(--input-border); } [data-theme='dark'] .select2-container--bootstrap4 .select2-selection__rendered, [data-theme='dark'] .select2-container--bootstrap4 .select2-selection__placeholder { color: var(--input-text); } [data-theme='dark'] .select2-dropdown { background-color: var(--bg-surface); border-color: var(--input-border); } [data-theme='dark'] .select2-search--dropdown .select2-search__field { color: var(--input-text); background-color: var(--input-bg); border-color: var(--input-border); } [data-theme='dark'] .select2-results__option { color: var(--text-primary); } [data-theme='dark'] .select2-container--bootstrap4 .select2-results__option--highlighted, [data-theme='dark'] .select2-results__option--highlighted { color: #fff; background-color: #e83e8c; } [data-theme='dark'] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice { color: var(--text-primary); background-color: var(--bg-inset); border-color: var(--border-color); } /* --- Bootstrap utility classes (must match BS4's !important) --- */ [data-theme='dark'] .bg-white { background-color: var(--bg-surface) !important; } [data-theme='dark'] .bg-light { background-color: var(--bg-surface-alt) !important; } /* corporate.css paints .bg-secondary pastel pink (#f7cee0) with white text; on dark surfaces use a deep rose so the white text passes AA */ [data-theme='dark'] .bg-secondary { background-color: #8c2f5c !important; } [data-theme='dark'] .text-dark { color: var(--text-heading) !important; } [data-theme='dark'] .text-muted { color: var(--text-secondary) !important; } [data-theme='dark'] .text-body { color: var(--text-primary) !important; } [data-theme='dark'] .border, [data-theme='dark'] .border-top, [data-theme='dark'] .border-right, [data-theme='dark'] .border-bottom, [data-theme='dark'] .border-left { border-color: var(--border-color) !important; } /* --- shared component classes (replace inline styles) --- */ .card-header-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; } /* --- misc --- */ [data-theme='dark'] .spinner-overlay { background-color: rgba(0, 0, 0, 0.65); } [data-theme='dark'] ::selection { background: rgba(232, 62, 140, 0.4); } /* ------------------------------------------------------------------ */ /* 4. Print guard — printed pages always render light */ /* ------------------------------------------------------------------ */ @media print { [data-theme='dark'], [data-theme='dark'] body { background: #fff; color: #000; color-scheme: light; } [data-theme='dark'] .bg-white { background-color: #fff !important; } [data-theme='dark'] .bg-light { background-color: #f5f5f5 !important; } [data-theme='dark'] .bg-secondary { background-color: #f7cee0 !important; } [data-theme='dark'] .text-dark { color: #212121 !important; } [data-theme='dark'] .text-muted { color: #6c757d !important; } }