/* assets/layout.css */ :root { --topbar-h: 0; /* no topbar anymore */ --sidebar-w: 260px; } /* fixed sidebar that starts from the top */ .sidebar-fixed { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w); overflow-y: auto; background: var(--mantine-color-body); border-right: 1px solid var(--mantine-color-gray-3); } /* main page content area */ .main-content { margin-left: var(--sidebar-w); padding: 1rem; background-color: var(--mantine-color-body); color: var(--mantine-color-text); min-height: 100vh; transition: background-color 0.2s ease, color 0.2s ease; } /* ================================================================ DARK MODE — comprehensive overrides for Bootstrap + HTML elements Triggered by Mantine's data-mantine-color-scheme="dark" on ================================================================ */ /* --- Core: body, text, backgrounds --- */ [data-mantine-color-scheme="dark"] body { background-color: var(--mantine-color-dark-7); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="light"] body { background-color: var(--mantine-color-gray-0); color: var(--mantine-color-black); } /* Generic text color for any element inside page-content */ [data-mantine-color-scheme="dark"] #page-content, [data-mantine-color-scheme="dark"] #app-shell { color: var(--mantine-color-dark-0); } /* --- Bootstrap Cards --- */ [data-mantine-color-scheme="dark"] .card { background-color: var(--mantine-color-dark-6); border-color: var(--mantine-color-dark-4); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .card-header, [data-mantine-color-scheme="dark"] .card-footer { background-color: var(--mantine-color-dark-5); border-color: var(--mantine-color-dark-4); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .card-body { color: var(--mantine-color-dark-0); } /* --- Bootstrap Tables --- */ [data-mantine-color-scheme="dark"] .table, [data-mantine-color-scheme="dark"] table { color: var(--mantine-color-dark-0); border-color: var(--mantine-color-dark-4); } [data-mantine-color-scheme="dark"] .table > thead { background-color: var(--mantine-color-dark-5); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .table > thead > tr > th { background-color: var(--mantine-color-dark-5); color: var(--mantine-color-dark-0); border-color: var(--mantine-color-dark-4); } [data-mantine-color-scheme="dark"] .table > tbody > tr > td { color: var(--mantine-color-dark-0); border-color: var(--mantine-color-dark-4); } [data-mantine-color-scheme="dark"] .table > tbody > tr { background-color: var(--mantine-color-dark-6); } [data-mantine-color-scheme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--mantine-color-dark-5); } [data-mantine-color-scheme="dark"] .table-hover > tbody > tr:hover { background-color: var(--mantine-color-dark-4); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .table-bordered { border-color: var(--mantine-color-dark-4); } [data-mantine-color-scheme="dark"] .table-bordered > thead > tr > th, [data-mantine-color-scheme="dark"] .table-bordered > tbody > tr > td { border-color: var(--mantine-color-dark-4); } /* --- Dash DataTable --- */ [data-mantine-color-scheme="dark"] .dash-spreadsheet-container { background-color: var(--mantine-color-dark-6); } [data-mantine-color-scheme="dark"] .dash-spreadsheet-container .dash-header, [data-mantine-color-scheme="dark"] .dash-spreadsheet-container th { background-color: var(--mantine-color-dark-5) !important; color: var(--mantine-color-dark-0) !important; border-color: var(--mantine-color-dark-4) !important; } [data-mantine-color-scheme="dark"] .dash-spreadsheet-container td { background-color: var(--mantine-color-dark-6) !important; color: var(--mantine-color-dark-0) !important; border-color: var(--mantine-color-dark-4) !important; } [data-mantine-color-scheme="dark"] .dash-spreadsheet-container td.focused { background-color: var(--mantine-color-dark-4) !important; } [data-mantine-color-scheme="dark"] .dash-spreadsheet-container .dash-filter input { background-color: var(--mantine-color-dark-5) !important; color: var(--mantine-color-dark-0) !important; border-color: var(--mantine-color-dark-4) !important; } /* --- Bootstrap Forms / Inputs --- */ [data-mantine-color-scheme="dark"] .form-control, [data-mantine-color-scheme="dark"] .form-select, [data-mantine-color-scheme="dark"] input[type="text"], [data-mantine-color-scheme="dark"] input[type="email"], [data-mantine-color-scheme="dark"] input[type="password"], [data-mantine-color-scheme="dark"] input[type="number"], [data-mantine-color-scheme="dark"] input[type="search"], [data-mantine-color-scheme="dark"] textarea, [data-mantine-color-scheme="dark"] select { background-color: var(--mantine-color-dark-5); color: var(--mantine-color-dark-0); border-color: var(--mantine-color-dark-4); } [data-mantine-color-scheme="dark"] .form-control:focus, [data-mantine-color-scheme="dark"] .form-select:focus { background-color: var(--mantine-color-dark-4); color: var(--mantine-color-dark-0); border-color: var(--mantine-color-blue-6); } [data-mantine-color-scheme="dark"] .form-control::placeholder { color: var(--mantine-color-dark-2); } [data-mantine-color-scheme="dark"] .form-label, [data-mantine-color-scheme="dark"] label { color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .form-text { color: var(--mantine-color-dark-2); } [data-mantine-color-scheme="dark"] .input-group-text { background-color: var(--mantine-color-dark-5); color: var(--mantine-color-dark-0); border-color: var(--mantine-color-dark-4); } /* --- Bootstrap Modals --- */ [data-mantine-color-scheme="dark"] .modal-content { background-color: var(--mantine-color-dark-6); color: var(--mantine-color-dark-0); border-color: var(--mantine-color-dark-4); } [data-mantine-color-scheme="dark"] .modal-header { background-color: var(--mantine-color-dark-5); border-color: var(--mantine-color-dark-4); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-mantine-color-scheme="dark"] .modal-footer { background-color: var(--mantine-color-dark-5); border-color: var(--mantine-color-dark-4); } [data-mantine-color-scheme="dark"] .modal-body { color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .modal-backdrop { background-color: rgba(0, 0, 0, 0.7); } /* --- Bootstrap Alerts --- */ [data-mantine-color-scheme="dark"] .alert { border-color: var(--mantine-color-dark-4); } [data-mantine-color-scheme="dark"] .alert-info { background-color: rgba(13, 110, 253, 0.15); color: #6ea8fe; border-color: rgba(13, 110, 253, 0.3); } [data-mantine-color-scheme="dark"] .alert-success { background-color: rgba(25, 135, 84, 0.15); color: #75b798; border-color: rgba(25, 135, 84, 0.3); } [data-mantine-color-scheme="dark"] .alert-warning { background-color: rgba(255, 193, 7, 0.15); color: #ffda6a; border-color: rgba(255, 193, 7, 0.3); } [data-mantine-color-scheme="dark"] .alert-danger { background-color: rgba(220, 53, 69, 0.15); color: #ea868f; border-color: rgba(220, 53, 69, 0.3); } [data-mantine-color-scheme="dark"] .alert-primary { background-color: rgba(13, 110, 253, 0.15); color: #6ea8fe; border-color: rgba(13, 110, 253, 0.3); } [data-mantine-color-scheme="dark"] .alert-secondary { background-color: rgba(108, 117, 125, 0.15); color: #a7acb1; border-color: rgba(108, 117, 125, 0.3); } /* --- Bootstrap List Groups --- */ [data-mantine-color-scheme="dark"] .list-group-item { background-color: var(--mantine-color-dark-6); color: var(--mantine-color-dark-0); border-color: var(--mantine-color-dark-4); } [data-mantine-color-scheme="dark"] .list-group-item:hover { background-color: var(--mantine-color-dark-5); } [data-mantine-color-scheme="dark"] .list-group-item.active { background-color: var(--mantine-color-blue-7); border-color: var(--mantine-color-blue-7); } /* --- Bootstrap Dropdowns --- */ [data-mantine-color-scheme="dark"] .dropdown-menu { background-color: var(--mantine-color-dark-6); border-color: var(--mantine-color-dark-4); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .dropdown-item { color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .dropdown-item:hover, [data-mantine-color-scheme="dark"] .dropdown-item:focus { background-color: var(--mantine-color-dark-4); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .dropdown-divider { border-color: var(--mantine-color-dark-4); } /* --- Bootstrap Accordion --- */ [data-mantine-color-scheme="dark"] .accordion-item { background-color: var(--mantine-color-dark-6); border-color: var(--mantine-color-dark-4); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .accordion-button { background-color: var(--mantine-color-dark-5); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .accordion-button:not(.collapsed) { background-color: var(--mantine-color-dark-4); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .accordion-body { background-color: var(--mantine-color-dark-6); color: var(--mantine-color-dark-0); } /* --- Bootstrap Tabs / Nav --- */ [data-mantine-color-scheme="dark"] .nav-tabs { border-color: var(--mantine-color-dark-4); } [data-mantine-color-scheme="dark"] .nav-tabs .nav-link { color: var(--mantine-color-dark-1); } [data-mantine-color-scheme="dark"] .nav-tabs .nav-link:hover { border-color: var(--mantine-color-dark-3); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .nav-tabs .nav-link.active { background-color: var(--mantine-color-dark-6); border-color: var(--mantine-color-dark-4) var(--mantine-color-dark-4) var(--mantine-color-dark-6); color: var(--mantine-color-dark-0); } /* --- Bootstrap Pagination --- */ [data-mantine-color-scheme="dark"] .page-link { background-color: var(--mantine-color-dark-6); border-color: var(--mantine-color-dark-4); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .page-link:hover { background-color: var(--mantine-color-dark-4); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .page-item.active .page-link { background-color: var(--mantine-color-blue-7); border-color: var(--mantine-color-blue-7); } [data-mantine-color-scheme="dark"] .page-item.disabled .page-link { background-color: var(--mantine-color-dark-5); color: var(--mantine-color-dark-3); } /* --- Bootstrap Breadcrumbs --- */ [data-mantine-color-scheme="dark"] .breadcrumb { background-color: transparent; } [data-mantine-color-scheme="dark"] .breadcrumb-item a { color: var(--mantine-color-blue-4); } [data-mantine-color-scheme="dark"] .breadcrumb-item.active { color: var(--mantine-color-dark-2); } /* --- Bootstrap Progress --- */ [data-mantine-color-scheme="dark"] .progress { background-color: var(--mantine-color-dark-5); } /* --- Bootstrap Tooltips & Popovers --- */ [data-mantine-color-scheme="dark"] .popover { background-color: var(--mantine-color-dark-5); border-color: var(--mantine-color-dark-4); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .popover-header { background-color: var(--mantine-color-dark-4); border-color: var(--mantine-color-dark-3); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .popover-body { color: var(--mantine-color-dark-0); } /* --- Miscellaneous HTML elements --- */ [data-mantine-color-scheme="dark"] hr { border-color: var(--mantine-color-dark-4); opacity: 0.5; } [data-mantine-color-scheme="dark"] a { color: var(--mantine-color-blue-4); } [data-mantine-color-scheme="dark"] code { color: #e685b5; background-color: var(--mantine-color-dark-5); } [data-mantine-color-scheme="dark"] pre { background-color: var(--mantine-color-dark-5); color: var(--mantine-color-dark-0); border-color: var(--mantine-color-dark-4); } /* --- Headings inside dark-mode content --- */ [data-mantine-color-scheme="dark"] h1, [data-mantine-color-scheme="dark"] h2, [data-mantine-color-scheme="dark"] h3, [data-mantine-color-scheme="dark"] h4, [data-mantine-color-scheme="dark"] h5, [data-mantine-color-scheme="dark"] h6 { color: var(--mantine-color-dark-0); } /* --- Badges: keep readable in dark mode --- */ [data-mantine-color-scheme="dark"] .badge.bg-light, [data-mantine-color-scheme="dark"] .badge.bg-light.text-dark { background-color: var(--mantine-color-dark-4) !important; color: var(--mantine-color-dark-0) !important; } /* Nested elements inside light badges (code, span, etc.) */ [data-mantine-color-scheme="dark"] .badge.bg-light code, [data-mantine-color-scheme="dark"] .badge.bg-light span { color: var(--mantine-color-dark-0) !important; background-color: transparent !important; } /* Nested badges inside badges (e.g. weekday pills inside region badges) */ [data-mantine-color-scheme="dark"] .badge .badge.bg-light { background-color: var(--mantine-color-dark-3) !important; color: var(--mantine-color-dark-0) !important; } [data-mantine-color-scheme="dark"] .badge.bg-dark { background-color: var(--mantine-color-dark-3) !important; color: var(--mantine-color-dark-0) !important; } /* Warning badges: keep bright text */ [data-mantine-color-scheme="dark"] .badge.bg-warning.text-dark { color: #000 !important; /* keep dark text on yellow — it's bright enough */ } /* All text-dark utility should flip in dark mode */ [data-mantine-color-scheme="dark"] .text-dark { color: var(--mantine-color-dark-0) !important; } [data-mantine-color-scheme="dark"] .text-muted { color: var(--mantine-color-dark-2) !important; } /* --- Table header overrides for dark mode --- */ [data-mantine-color-scheme="dark"] .table-light, [data-mantine-color-scheme="dark"] .table-light > th, [data-mantine-color-scheme="dark"] .table-light > td, [data-mantine-color-scheme="dark"] thead.table-light tr, [data-mantine-color-scheme="dark"] thead.table-light tr th { background-color: var(--mantine-color-dark-5) !important; color: var(--mantine-color-dark-0) !important; border-color: var(--mantine-color-dark-4) !important; } /* --- Bootstrap table in dark mode: fix striped row colors --- */ [data-mantine-color-scheme="dark"] .table > tbody > tr { background-color: var(--mantine-color-dark-6) !important; color: var(--mantine-color-dark-0) !important; } [data-mantine-color-scheme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--mantine-color-dark-5) !important; color: var(--mantine-color-dark-0) !important; } [data-mantine-color-scheme="dark"] .table-striped > tbody > tr:nth-of-type(even) > * { background-color: var(--mantine-color-dark-6) !important; color: var(--mantine-color-dark-0) !important; } [data-mantine-color-scheme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--mantine-color-dark-4) !important; color: var(--mantine-color-dark-0) !important; } /* --- Bootstrap close buttons --- */ [data-mantine-color-scheme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* --- Sidebar border in dark mode --- */ [data-mantine-color-scheme="dark"] #sidebar { border-color: var(--mantine-color-dark-4) !important; } /* --- Topbar border in dark mode --- */ [data-mantine-color-scheme="dark"] #topbar { border-color: var(--mantine-color-dark-4) !important; } /* --- Dash dcc.Dropdown --- */ [data-mantine-color-scheme="dark"] .Select-control, [data-mantine-color-scheme="dark"] .Select-menu-outer { background-color: var(--mantine-color-dark-5) !important; border-color: var(--mantine-color-dark-4) !important; color: var(--mantine-color-dark-0) !important; } [data-mantine-color-scheme="dark"] .Select-value-label, [data-mantine-color-scheme="dark"] .Select-placeholder, [data-mantine-color-scheme="dark"] .Select-input > input { color: var(--mantine-color-dark-0) !important; } [data-mantine-color-scheme="dark"] .Select-option { background-color: var(--mantine-color-dark-5); color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .Select-option.is-focused { background-color: var(--mantine-color-dark-4); } [data-mantine-color-scheme="dark"] .VirtualizedSelectFocusedOption { background-color: var(--mantine-color-dark-4); } /* dcc.Dropdown v2 selectors */ [data-mantine-color-scheme="dark"] .dash-dropdown .Select-control { background-color: var(--mantine-color-dark-5) !important; border-color: var(--mantine-color-dark-4) !important; } [data-mantine-color-scheme="dark"] .dash-dropdown .Select-multi-value-wrapper .Select-value { background-color: var(--mantine-color-dark-4); border-color: var(--mantine-color-dark-3); color: var(--mantine-color-dark-0); } /* --- Scrollbars in dark mode --- */ [data-mantine-color-scheme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-mantine-color-scheme="dark"] ::-webkit-scrollbar-track { background: var(--mantine-color-dark-6); } [data-mantine-color-scheme="dark"] ::-webkit-scrollbar-thumb { background: var(--mantine-color-dark-3); border-radius: 4px; } [data-mantine-color-scheme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--mantine-color-dark-2); } /* --- Plotly charts: make text and gridlines readable in dark mode --- */ [data-mantine-color-scheme="dark"] .js-plotly-plot .plotly .xtick text, [data-mantine-color-scheme="dark"] .js-plotly-plot .plotly .ytick text, [data-mantine-color-scheme="dark"] .js-plotly-plot .plotly .g-gtitle text, [data-mantine-color-scheme="dark"] .js-plotly-plot .plotly .g-xtitle text, [data-mantine-color-scheme="dark"] .js-plotly-plot .plotly .g-ytitle text { fill: #c1c2c5 !important; } [data-mantine-color-scheme="dark"] .js-plotly-plot .plotly .gridlayer line, [data-mantine-color-scheme="dark"] .js-plotly-plot .plotly .zerolinelayer line { stroke: #373A40 !important; } /* --- Dash DataTable dark mode overrides (handles conditional styles) --- */ [data-mantine-color-scheme="dark"] .dash-table-container { color: var(--mantine-color-dark-0); } [data-mantine-color-scheme="dark"] .dash-table-container .dash-spreadsheet-container table { color: var(--mantine-color-dark-0) !important; } /* Previous & Next page buttons */ [data-mantine-color-scheme="dark"] .dash-table-container .previous-next-container button { color: var(--mantine-color-dark-0) !important; } /* --- bg-white bootstrap utility in dark mode --- */ [data-mantine-color-scheme="dark"] .bg-white { background-color: var(--mantine-color-dark-6) !important; } [data-mantine-color-scheme="dark"] .bg-light { background-color: var(--mantine-color-dark-5) !important; } [data-mantine-color-scheme="dark"] .border { border-color: var(--mantine-color-dark-4) !important; } [data-mantine-color-scheme="dark"] .border-bottom { border-bottom-color: var(--mantine-color-dark-4) !important; } [data-mantine-color-scheme="dark"] .border-top { border-top-color: var(--mantine-color-dark-4) !important; } [data-mantine-color-scheme="dark"] .shadow-sm, [data-mantine-color-scheme="dark"] .shadow { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4) !important; } /* --- Mantine Paper / Card in dark mode (catch-all) --- */ [data-mantine-color-scheme="dark"] .mantine-Paper-root { color: var(--mantine-color-dark-0); }