/* ========================================================================== BRAIN ERP — project-wide theme overrides. Loaded AFTER assets/css/style.css in every layout, so anything here wins over the theme defaults without editing the vendor stylesheet. Light mode is intentionally untouched: the theme's own :root values (--body-bg: 242 246 249) still apply. ========================================================================== */ /* -------------------------------------------------------------------------- Dark mode project background — #0B0D14 `--body-bg` is the token the theme uses for the page canvas (`body { background-color: rgb(var(--body-bg)) }`) and for every surface that is meant to sit flush with it, so setting it once recolours the whole app. Values are space separated RGB channels, not hex — that is the format the theme's rgb(var(--token)) calls expect. The app chrome (left menu, header, footer) is pinned to the same colour in the section below, so the whole frame reads as one surface. Content surfaces that sit ON that canvas — cards/.box, modals, dropdowns — use a separate token, `--dark-bg` (#1E293B), and deliberately stay lighter so they read as elevated. To flatten those too, add `--dark-bg: 11 13 20;` to the html.dark block below. -------------------------------------------------------------------------- */ html.dark, .dark { --body-bg: 11 13 20; /* #0B0D14 */ } /* Belt and braces: a few theme rules paint the canvas directly rather than through the token. Keep them on the same colour. */ html.dark body { background-color: rgb(var(--body-bg)); } /* -------------------------------------------------------------------------- Dark mode chrome — left menu, header and footer on the same #0B0D14 Everything below is scoped to `html.dark`. That matters: the layout puts data-menu-styles="dark" on even in LIGHT mode, so scoping by the attribute alone would darken the sidebar on light pages too. Light mode is left exactly as it was. -------------------------------------------------------------------------- */ /* Left menu. Redefining the token on .app-sidebar rather than setting background-color is deliberate. The theme paints the sidebar, its logo header, and every fly-out submenu with `background-color: rgb(var(--dark-bg))` — several of those with !important behind long [data-nav-style][toggled] selector chains that are hard to outrank. Because custom properties inherit, moving the token recolours all of them at once, in every nav style (vertical, closed, icon-hover, doublemenu, horizontal), with no specificity fight. It also carries the .app-sidebar::before image overlay along. */ html.dark .app-sidebar { --dark-bg: 11 13 20; } /* Header. Set the colour directly here instead of moving the token, so dropdown panels rendered inside the header (profile, notifications, search) keep the lighter elevated surface and stay readable against it. !important is required: layouts/header.blade.php hardcodes style="background-color:#1E293B" on the
element, and an inline style beats any normal rule. Scoping to html.dark means that inline colour still applies in light mode, so light pages look exactly as before. */ html.dark .header, html.dark .app-header { background-color: #0B0D14 !important; } /* Footer. The layout footer carries an inline `style="background-color:unset"`, which beats any normal rule and leaves it transparent, so !important is needed to pin the colour. Scoped to the page footer — modal/card footers (.ti-modal-footer, .box-footer) are untouched. */ html.dark body > footer, html.dark .page > footer, html.dark footer.mt-auto, html.dark .footer { background-color: #0B0D14 !important; }