/* ===================================================== DARK MODE OVERRIDES Applied when has class "dark-mode" ===================================================== */ /* ── Dashboard ──────────────────────────────────────── */ body.dark-mode .dash-header { background: #161b27; border-color: #2a3347; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } body.dark-mode .dash-title { color: #c9d1d9; } body.dark-mode .dash-subtitle { color: #505868; } body.dark-mode .dash-title-icon { color: #5a9fd4; } body.dark-mode .dash-year-label { color: #505868; } body.dark-mode .dash-year-label i { color: #5a9fd4; } body.dark-mode .dash-card { background: #161b27; border-color: #2a3347; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } body.dark-mode .dash-card-header { background: #1c2333; border-bottom-color: #2a3347; color: #8ab4d8; } body.dark-mode .dash-card-header i { color: #5a9fd4; } body.dark-mode .dash-card-body { background: #161b27; } /* ── Page & layout ─────────────────────────────────── */ body.dark-mode { background: #0e1117 !important; color: #c9d1d9; } body.dark-mode .pusher { background: #0e1117; } body.dark-mode .ui.equal.width.stackable.padded.grid { background: #0e1117; } /* ── Top header bar ─────────────────────────────────── */ body.dark-mode .home-section .home-content { background: #161b27; border-bottom-color: #2a3347; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } body.dark-mode .home-section .home-content .text { color: #c9d1d9; } body.dark-mode .home-section .home-content .sidebar-toggle { color: #8ab4d8; } body.dark-mode .home-section .home-content .sidebar-toggle:hover { background: #1e2535; color: #c9d1d9; } body.dark-mode .theme-toggle { color: #f0c050 !important; } body.dark-mode .theme-toggle:hover { background: #1e2535 !important; color: #ffd966 !important; } /* ── Sidebar ────────────────────────────────────────── */ body.dark-mode .sidebar { background: linear-gradient(180deg, #0d1520 0%, #111825 60%, #131d2e 100%); box-shadow: 4px 0 16px rgba(0,0,0,0.5); } body.dark-mode .sidebar .nav-links li .sub-menu { background: rgba(0,0,0,0.3); } /* ── Form section cards ─────────────────────────────── */ body.dark-mode .form-section-card { background: #161b27; box-shadow: 0 2px 10px rgba(0,0,0,0.4); } body.dark-mode .form-section-header { background: #1c2333; border-bottom-color: #2a3347; color: #8ab4d8; } body.dark-mode .form-section-header i { color: #5a9fd4; } body.dark-mode .form-section-body { background: #161b27; } /* ── Form action bar ────────────────────────────────── */ body.dark-mode .form-action-bar { background: #161b27; border-bottom-color: #2a3347; } /* ── Semantic UI segments & grid ───────────────────── */ body.dark-mode .ui.segment, body.dark-mode .ui.segments { background: #161b27 !important; border-color: #2a3347 !important; color: #c9d1d9 !important; box-shadow: none !important; } body.dark-mode .ui.secondary.segment { background: #1a2030 !important; } body.dark-mode .ui.equal.width.stackable.padded.grid .row .column { background: transparent; } /* ── Semantic UI form inputs ────────────────────────── */ body.dark-mode .ui.form input[type="text"], body.dark-mode .ui.form input[type="email"], body.dark-mode .ui.form input[type="password"], body.dark-mode .ui.form input[type="number"], body.dark-mode .ui.form input[type="date"], body.dark-mode .ui.form input[type="time"], body.dark-mode .ui.form textarea, body.dark-mode .login-input, body.dark-mode .risk-matrix-cell input { background: #0e1117 !important; color: #c9d1d9 !important; border-color: #2a3347 !important; } body.dark-mode .ui.form input:focus, body.dark-mode .ui.form textarea:focus, body.dark-mode .login-input:focus { background: #161b27 !important; border-color: #4a7fb5 !important; } body.dark-mode .ui.form input::placeholder, body.dark-mode .ui.form textarea::placeholder { color: #4a5568 !important; } body.dark-mode .form-textarea-required { background: #1a1510 !important; border-color: #3a2a2a !important; } body.dark-mode .risk-result { background: #1a2030 !important; color: #8ab4d8 !important; border-color: #2a3a50 !important; } /* ── Semantic UI dropdowns ──────────────────────────── */ /* Normal dropdown */ body.dark-mode .ui.selection.dropdown, body.dark-mode .ui.selection.dropdown.active, body.dark-mode .ui.search.selection.dropdown { background: #1a1d24 !important; color: #a8b4c0 !important; border-color: #303444 !important; box-shadow: none !important; } body.dark-mode .ui.dropdown .menu { background: #1e2230 !important; border-color: #303444 !important; box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important; } body.dark-mode .ui.dropdown .menu .item { color: #a8b4c0 !important; border-top-color: #272b3a !important; } body.dark-mode .ui.dropdown .menu .item:hover { background: #252a3a !important; color: #c8d4e0 !important; } body.dark-mode .ui.dropdown .menu .item.selected, body.dark-mode .ui.dropdown .menu .item.active { background: #1e3050 !important; color: #7ab4e0 !important; font-weight: 600 !important; } body.dark-mode .ui.dropdown > .text { color: #a8b4c0 !important; } body.dark-mode .ui.dropdown > .default.text, body.dark-mode .ui.dropdown input.search { color: #505868 !important; background: transparent !important; } body.dark-mode i.dropdown.icon { color: #4a7fb5 !important; } /* ── Error-state dropdowns (required fields) ──────────────────────────── Mirror the exact selectors from semantic.css so ours always win. Use both background + background-color to override !important rules. ── */ body.dark-mode .ui.form .field.error .ui.dropdown, body.dark-mode .ui.form .fields.error .field .ui.dropdown { background: #201a1e !important; background-color: #201a1e !important; border-color: #4a2a35 !important; } body.dark-mode .ui.form .field.error .ui.dropdown:hover, body.dark-mode .ui.form .fields.error .field .ui.dropdown:hover { border-color: #4a2a35 !important; } body.dark-mode .ui.form .field.error .ui.dropdown:hover .menu, body.dark-mode .ui.form .fields.error .field .ui.dropdown:hover .menu { border-color: #4a2a35 !important; } /* Mirrors: .ui.form .field.error .ui.dropdown .text and .item */ body.dark-mode .ui.form .field.error .ui.dropdown .text, body.dark-mode .ui.form .field.error .ui.dropdown .item, body.dark-mode .ui.form .fields.error .field .ui.dropdown .text, body.dark-mode .ui.form .fields.error .field .ui.dropdown .item { background: #201a1e !important; background-color: #201a1e !important; color: #b89898 !important; } /* Menu wrapper */ body.dark-mode .ui.form .field.error .ui.dropdown .menu, body.dark-mode .ui.form .fields.error .field .ui.dropdown .menu { background: #1c1620 !important; background-color: #1c1620 !important; border-color: #4a2a35 !important; } /* Hover — mirrors: .ui.form .field.error .ui.dropdown .menu .item:hover */ body.dark-mode .ui.form .field.error .ui.dropdown .menu .item:hover, body.dark-mode .ui.form .fields.error .field .ui.dropdown .menu .item:hover { background: #2a1e28 !important; background-color: #2a1e28 !important; color: #d0b4b4 !important; } /* Selected — mirrors: .ui.form .field.error .ui.dropdown .menu .selected.item */ body.dark-mode .ui.form .field.error .ui.dropdown .menu .selected.item, body.dark-mode .ui.form .fields.error .field .ui.dropdown .menu .selected.item { background: #251c2a !important; background-color: #251c2a !important; color: #c8a8c8 !important; } /* Active — mirrors: .ui.form .field.error .ui.dropdown .menu .active.item (uses !important in semantic.css) */ body.dark-mode .ui.form .field.error .ui.dropdown .menu .active.item, body.dark-mode .ui.form .fields.error .field .ui.dropdown .menu .active.item { background: #2e1e30 !important; background-color: #2e1e30 !important; color: #c8a8c8 !important; } /* Error label */ body.dark-mode .ui.form .field.error > label, body.dark-mode .ui.form .fields.error .field > label { color: #b89898 !important; } /* ── Semantic UI labels ─────────────────────────────── */ body.dark-mode .ui.form .field > label, body.dark-mode .ui.form label, body.dark-mode .risk-matrix-label { color: #8ab4d8 !important; } /* ── Semantic UI accordion ──────────────────────────── */ body.dark-mode .ui.styled.accordion, body.dark-mode .ui.styled.fluid.accordion { background: #161b27 !important; border-color: #2a3347 !important; box-shadow: none !important; } body.dark-mode .ui.styled.accordion .title, body.dark-mode .form-accordion.ui.styled.accordion .title { color: #8ab4d8 !important; border-top-color: #2a3347 !important; } body.dark-mode .ui.styled.accordion .title:hover { background: #1c2333 !important; } body.dark-mode .ui.styled.accordion .content { background: #161b27 !important; color: #c9d1d9 !important; } /* ── Semantic UI table ──────────────────────────────── */ body.dark-mode .ui.table, body.dark-mode .ui.celled.table { background: #1e2028 !important; color: #a8b2bc !important; border-color: #2c2f3a !important; } body.dark-mode .ui.table thead th { background: #22252f !important; color: #7a9ab5 !important; border-color: #2c2f3a !important; } body.dark-mode .ui.table tbody tr { background: #1e2028 !important; color: #a8b2bc !important; } body.dark-mode .ui.table tbody tr:hover { background: #262a36 !important; color: #c4cdd6 !important; } body.dark-mode .ui.table td { border-color: #272a35 !important; } /* ── DataTable / grid ───────────────────────────────── */ body.dark-mode .grid-container { background: #1e2028; border-color: #2c2f3a; box-shadow: 0 2px 10px rgba(0,0,0,0.25); } body.dark-mode .grid-toolbar { background: #22252f; border-bottom-color: #2c2f3a; } body.dark-mode .grid-btn-default { background: #282c38; color: #90a4b8; border-color: #333849; } body.dark-mode .grid-btn-default:hover { background: #2e3345; color: #b0c4d8; } body.dark-mode .dt-top, body.dark-mode .dt-bottom { background: transparent; border-color: #272a35; color: #7a8ea0; } body.dark-mode .dt-top input, body.dark-mode .dt-top select { background: #1a1d24 !important; color: #a8b2bc !important; border-color: #303444 !important; } /* ── DataTable core — neutralise all default striping ── */ body.dark-mode table.dataTable, body.dark-mode table.grid-table { border-color: #2c2f3a !important; background: #1e2028 !important; } body.dark-mode table.dataTable thead, body.dark-mode table.grid-table thead { background: #22252f !important; } body.dark-mode table.dataTable thead tr, body.dark-mode table.grid-table thead tr { background: #22252f !important; } body.dark-mode table.dataTable thead th, body.dark-mode table.dataTable thead td, body.dark-mode table.grid-table thead th, body.dark-mode table.grid-table thead td { background: #22252f !important; color: #7a9ab5 !important; border-color: #2c2f3a !important; font-weight: 600 !important; } /* Neutralise DataTables' built-in odd/even striping overlay */ body.dark-mode table.dataTable.stripe tbody tr.odd, body.dark-mode table.dataTable.display tbody tr.odd, body.dark-mode table.dataTable tbody tr.odd, body.dark-mode table.grid-table tbody tr.odd { background: #1e2028 !important; } body.dark-mode table.dataTable.stripe tbody tr.even, body.dark-mode table.dataTable.display tbody tr.even, body.dark-mode table.dataTable tbody tr.even, body.dark-mode table.grid-table tbody tr.even { background: #1b1e26 !important; } /* Uniform text on every row */ body.dark-mode table.dataTable tbody tr, body.dark-mode table.grid-table tbody tr { color: #a8b4c0 !important; } body.dark-mode table.dataTable tbody tr td, body.dark-mode table.grid-table tbody tr td { color: #a8b4c0 !important; border-color: #272a35 !important; background: inherit !important; } /* Subtle hover — only lifts the row slightly */ body.dark-mode table.dataTable tbody tr:hover, body.dark-mode table.dataTable.stripe tbody tr:hover, body.dark-mode table.dataTable.display tbody tr:hover, body.dark-mode table.grid-table tbody tr:hover { background: #262b38 !important; } body.dark-mode table.dataTable tbody tr:hover td, body.dark-mode table.grid-table tbody tr:hover td { background: #262b38 !important; color: #c8d4e0 !important; } /* Selected row */ body.dark-mode table.dataTable tbody tr.selected, body.dark-mode table.grid-table tbody tr.selected { background: #1e2d42 !important; } body.dark-mode .dataTables_empty { color: #505868 !important; font-style: italic; } body.dark-mode .dt-processing, body.dark-mode .dataTables_processing { background: rgba(30,32,40,0.92) !important; color: #7a9ab5 !important; border-color: #2c2f3a !important; } /* Checkboxes in dark mode */ body.dark-mode .ui.checkbox input[type="checkbox"] { opacity: 0; } body.dark-mode .ui.checkbox label::before { background: #1a1d24 !important; border-color: #3a4055 !important; } body.dark-mode .ui.checkbox input:checked ~ label::before { background: #2e5a8e !important; border-color: #2e5a8e !important; } body.dark-mode .ui.checkbox input:checked ~ label::after { color: #fff !important; } /* ── Root cause table ───────────────────────────────── */ body.dark-mode .rc-table { border-color: #2c2f3a !important; background: #1e2028 !important; } body.dark-mode .rc-table thead tr { background: #22252f !important; } body.dark-mode .rc-table thead th { background: #22252f !important; color: #7a9ab5 !important; border-color: #2c2f3a !important; } body.dark-mode .rc-table tbody tr { background: #1e2028 !important; color: #a8b4c0 !important; } body.dark-mode .rc-table tbody tr:hover { background: #262b38 !important; color: #c8d4e0 !important; } body.dark-mode .rc-table td, body.dark-mode .rc-table th { border-color: #272a35 !important; } body.dark-mode .rc-remarks-box { background: #1e1a08 !important; border-color: #3a3010 !important; color: #d4c070 !important; } body.dark-mode .rc-remarks-box-readonly { background: #1e0e0e !important; border-color: #3a1a1a !important; color: #d47070 !important; } body.dark-mode .rc-action-bar { background: #1c2333; border-color: #2a3347; } /* ── Recipient tags ─────────────────────────────────── */ body.dark-mode .recipient-tag { background: #1a2535; border-color: #2a3a55; color: #8ab4d8; } /* ── Semantic UI messages ───────────────────────────── */ body.dark-mode .ui.message { background: #1c2333 !important; border-color: #2a3347 !important; color: #c9d1d9 !important; box-shadow: none !important; } body.dark-mode .ui.negative.message { background: #2a1515 !important; border-color: #4a2020 !important; color: #d47070 !important; } body.dark-mode .ui.positive.message, body.dark-mode .ui.success.message { background: #0d2a1a !important; border-color: #1a4a2a !important; color: #70d4a0 !important; } /* ── Semantic UI modal ──────────────────────────────── */ body.dark-mode .ui.modal { background: #161b27 !important; color: #c9d1d9 !important; } body.dark-mode .ui.modal .header { background: #1c2333 !important; color: #c9d1d9 !important; border-bottom-color: #2a3347 !important; } body.dark-mode .ui.modal .content { background: #161b27 !important; color: #c9d1d9 !important; } body.dark-mode .ui.modal .actions { background: #1c2333 !important; border-top-color: #2a3347 !important; } body.dark-mode .ui.dimmer { background: rgba(0,0,0,0.7) !important; } /* ── Pagination ─────────────────────────────────────── */ /* ── Dark mode pagination ───────────────────────────── */ body.dark-mode .dt-bottom .dt-paging .ui.pagination.menu, body.dark-mode .dt-bottom .dt-paging .dataTables_paginate .ui.pagination.menu { background: #1e2230 !important; border-color: #2c3044 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important; } body.dark-mode .dt-bottom .dt-paging .ui.pagination.menu .item { background: transparent !important; color: #7a8ea8 !important; } body.dark-mode .dt-bottom .dt-paging .ui.pagination.menu .item:hover { background: #262b3a !important; color: #a8c0d8 !important; } body.dark-mode .dt-bottom .dt-paging .ui.pagination.menu .active.item, body.dark-mode .dt-bottom .dt-paging .ui.pagination.menu .active.item:hover { background: #2a4a72 !important; color: #c8dff0 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important; } body.dark-mode .dt-bottom .dt-paging .ui.pagination.menu .item.previous, body.dark-mode .dt-bottom .dt-paging .ui.pagination.menu .item.next { color: #6a9abf !important; } body.dark-mode .dt-bottom .dt-paging .ui.pagination.menu .item.previous:hover, body.dark-mode .dt-bottom .dt-paging .ui.pagination.menu .item.next:hover { background: #262b3a !important; color: #a8c8e8 !important; } body.dark-mode .dt-bottom .dt-paging .ui.pagination.menu .disabled.item, body.dark-mode .dt-bottom .dt-paging .ui.pagination.menu .disabled.item:hover { background: transparent !important; color: #363d4e !important; } body.dark-mode .dt-bottom .dt-paging .ui.pagination.menu .ellipsis.item { color: #404a5a !important; } /* Fallback for non-Semantic paginate_button */ body.dark-mode .dt-bottom .dt-paging .paginate_button { background: transparent !important; color: #7a8ea8 !important; } body.dark-mode .dt-bottom .dt-paging .paginate_button.current { background: #2a4a72 !important; color: #c8dff0 !important; } /* ── Audit card ─────────────────────────────────────── */ body.dark-mode .audit-item { border-color: #272a35; } body.dark-mode .audit-label { color: #505868; } body.dark-mode .audit-label i { color: #5a9fd4; opacity: 0.8; } body.dark-mode .audit-value { color: #a8b4c0; } /* ── Misc text ──────────────────────────────────────── */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode p { color: #c9d1d9; } body.dark-mode a:not(.form-btn):not(.login-btn):not(.rc-inline-save):not(.sidebar .nav-links a) { color: #5a9fd4; } body.dark-mode .ui.divider { border-color: #2a3347 !important; }