/* nspect_light.css Light mode overrides — applied when has class "light-mode" All dark colours are flipped to light equivalents. */ /* ─── Body & Bootstrap dark-class overrides ─────────────────────────── */ html.light-mode body { background-color: #ffffff !important; color: #212529 !important; } html.light-mode .bg-dark { background-color: #f4f4f4 !important; } html.light-mode .text-light { color: #212529 !important; } html.light-mode .text-muted { color: #6c757d !important; } /* ─── Navbar ─────────────────────────────────────────────────────────── */ html.light-mode .simple-navbar { background-color: #f4f4f4; color: #212529; border-bottom: 1px solid #dee2e6; } html.light-mode .navbar-left a { color: #212529; } html.light-mode .navbar-right a { color: #212529; } html.light-mode .navbar-right button { border-color: #343a40; color: #343a40; } html.light-mode .navbar-right button:hover { background-color: #343a40; color: #ffffff; } /* Theme toggle button — always visible regardless of mode */ html.light-mode #theme-toggle-btn { border-color: #343a40; color: #343a40; } html.light-mode #theme-toggle-btn:hover { background-color: #343a40; color: #ffffff; } /* ─── Sidebar ────────────────────────────────────────────────────────── */ html.light-mode .sidebar-ns { background-color: #f4f4f4; border-right-color: #dee2e6; } html.light-mode .sidebar-ns a, html.light-mode .sidebar-ns .nav-link { color: #212529; } html.light-mode .sidebar-ns a:hover, html.light-mode .sidebar-ns .nav-link:hover { color: #0d6efd; } /* ─── Main content ───────────────────────────────────────────────────── */ html.light-mode .main-content-ns { background-color: #ffffff; border-left-color: #dee2e6; color: #212529; } /* ─── Footer ─────────────────────────────────────────────────────────── */ html.light-mode .footer { background-color: #f4f4f4 !important; color: #212529 !important; } html.light-mode .footer a { color: #495057 !important; } html.light-mode .footer a:hover { color: #212529 !important; } /* ─── Accordion (accordion-dark) ─────────────────────────────────────── */ html.light-mode .accordion.accordion-dark .accordion-item { background-color: #ffffff; border-color: #dee2e6; color: #212529; } html.light-mode .accordion.accordion-dark .accordion-button { background-color: #f8f9fa; color: #212529; } html.light-mode .accordion.accordion-dark .accordion-button.collapsed { background-color: #f8f9fa; color: #6c757d; } html.light-mode .accordion.accordion-dark .accordion-button:not(.collapsed) { background-color: #e3ecf7; color: #212529; border-bottom-color: #dee2e6; } html.light-mode .accordion.accordion-dark .accordion-button:focus { box-shadow: 0 0 0 2px #6ea8fe; } html.light-mode .accordion.accordion-dark .accordion-body { background-color: #ffffff; color: #212529; } /* Restore default Bootstrap chevron (no invert) */ html.light-mode .accordion.accordion-dark .accordion-button::after { filter: none; opacity: 1; } /* Bootstrap accordion items using bg-dark directly */ html.light-mode .accordion-item.bg-dark { background-color: #ffffff !important; color: #212529 !important; border-color: #dee2e6 !important; } html.light-mode .accordion-button.bg-dark { background-color: #f8f9fa !important; color: #212529 !important; } /* ─── Cards ──────────────────────────────────────────────────────────── */ html.light-mode .card { background-color: #ffffff; border-color: #dee2e6; color: #212529; } html.light-mode .card.bg-dark { background-color: #ffffff !important; color: #212529 !important; border-color: #dee2e6 !important; } html.light-mode .card-header { background-color: #f8f9fa; border-bottom-color: #dee2e6; color: #212529; } html.light-mode .card-body { background-color: #ffffff; color: #212529; } /* ─── Tables ─────────────────────────────────────────────────────────── */ html.light-mode .table-dark { --bs-table-bg: #ffffff !important; --bs-table-striped-bg: #f8f9fa !important; --bs-table-hover-bg: #e9ecef !important; --bs-table-border-color: #dee2e6 !important; --bs-table-color: #212529 !important; color: #212529 !important; border-color: #dee2e6 !important; } html.light-mode .table-dark th, html.light-mode .table-dark td { color: #212529 !important; border-color: #dee2e6 !important; } /* ─── DataTables ─────────────────────────────────────────────────────── */ html.light-mode .dataTables_wrapper .dataTables_filter label, html.light-mode .dataTables_wrapper .dataTables_length label { color: #495057; } html.light-mode .dataTables_wrapper .dataTables_filter input, html.light-mode .dataTables_wrapper .dataTables_length select { background-color: #ffffff; color: #212529; border: 1px solid #ced4da; } html.light-mode .dataTables_wrapper .dataTables_paginate .paginate_button, html.light-mode .dataTables_wrapper .dataTables_paginate .pagination .page-link { color: #495057 !important; } html.light-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current, html.light-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover, html.light-mode .dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link, html.light-mode .dataTables_wrapper .dataTables_paginate .pagination .page-link:hover { color: #ffffff !important; background-color: #495057 !important; border-color: #6c757d !important; } html.light-mode .dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link, html.light-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: #adb5bd !important; } html.light-mode .dataTables_wrapper .dataTables_info { color: #6c757d; } html.light-mode table.dataTable thead th { color: #212529; border-bottom-color: #dee2e6; } /* ─── Form controls ──────────────────────────────────────────────────── */ html.light-mode .form-control, html.light-mode .form-select { background-color: #ffffff; color: #212529; border-color: #ced4da; } html.light-mode .form-control:focus, html.light-mode .form-select:focus { background-color: #ffffff; color: #212529; border-color: #86b7fe; } /* ─── Bootstrap list-group ───────────────────────────────────────────── */ html.light-mode .list-group-item { background-color: #ffffff; color: #212529; border-color: #dee2e6; } html.light-mode .list-group-item-action:hover { background-color: #f8f9fa; color: #212529; } /* ─── Modals ─────────────────────────────────────────────────────────── */ html.light-mode .modal-content { background-color: #ffffff; color: #212529; } html.light-mode .modal-header, html.light-mode .modal-footer { border-color: #dee2e6; } /* ─── Dropdowns ──────────────────────────────────────────────────────── */ html.light-mode .dropdown-menu { background-color: #ffffff; border-color: #dee2e6; } html.light-mode .dropdown-item { color: #212529; } html.light-mode .dropdown-item:hover { background-color: #f8f9fa; color: #212529; }