/* ===================================================================== WeCourier Theme System â€” Glass-morphism + Dark/Light mode --------------------------------------------------------------------- - Scoped via the [data-we-theme] attribute on (set early in header.blade.php to prevent a flash of the wrong theme). - Light mode keeps the existing look and layers tasteful frosted glass on key surfaces (navbar, sidebar, cards, modals, dropdowns). - Dark mode is fully additive: every rule is scoped under html[data-we-theme="dark"] so it never affects light mode. - Data tables are kept crisp/solid for readability. - Pure presentation. No markup/structure assumptions beyond classes already present in the Bootstrap admin theme. ===================================================================== */ :root { --we-glass-blur: 14px; --we-radius: 16px; /* Light-mode glass tokens */ --we-glass-bg: rgba(255, 255, 255, 0.62); --we-glass-border: rgba(15, 23, 42, 0.08); --we-glass-shadow: 0 8px 28px rgba(15, 23, 42, 0.08); } /* Smooth the transition when the user flips themes */ html[data-we-theme] body, html[data-we-theme] .card, html[data-we-theme] .modal-content, html[data-we-theme] .nav-left-sidebar, html[data-we-theme] .dropdown-menu { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ===================================================================== 1. GLASS-MORPHISM (applies in BOTH light and dark) ===================================================================== */ /* Cards. IMPORTANT: exclude cards that intentionally carry their own colored background (dashboard gradient stat tiles). Otherwise this rule's higher specificity would overwrite their gradients with plain glass. */ html[data-we-theme] .card:not(.cm-metric-card) { background: var(--we-glass-bg); -webkit-backdrop-filter: blur(var(--we-glass-blur)); backdrop-filter: blur(var(--we-glass-blur)); border: 1px solid var(--we-glass-border); border-radius: var(--we-radius); box-shadow: var(--we-glass-shadow); } html[data-we-theme] .card:not(.cm-metric-card) > .card-header { background: transparent; border-bottom: 1px solid var(--we-glass-border); } /* Sidebar */ html[data-we-theme] .nav-left-sidebar { -webkit-backdrop-filter: blur(var(--we-glass-blur)); backdrop-filter: blur(var(--we-glass-blur)); background: var(--we-glass-bg); border-right: 1px solid var(--we-glass-border); } /* Dropdown menus */ html[data-we-theme] .dropdown-menu { -webkit-backdrop-filter: blur(var(--we-glass-blur)); backdrop-filter: blur(var(--we-glass-blur)); background: var(--we-glass-bg); border: 1px solid var(--we-glass-border); border-radius: 12px; box-shadow: var(--we-glass-shadow); } /* Modals. Keep the frosted aesthetic but use a near-solid panel so form fields stay readable over busy page content (the 0.62 glass bg is too transparent for modals and reads as "broken"). Dark mode sets its own opaque value below. */ html[data-we-theme] .modal-content { -webkit-backdrop-filter: blur(var(--we-glass-blur)); backdrop-filter: blur(var(--we-glass-blur)); background: rgba(255, 255, 255, 0.97); border: 1px solid var(--we-glass-border); border-radius: var(--we-radius); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22); } /* ===================================================================== 2. DARK MODE ===================================================================== */ html[data-we-theme="dark"] { /* Dark glass tokens override the light ones */ --we-glass-bg: rgba(22, 32, 50, 0.55); --we-glass-border: rgba(255, 255, 255, 0.08); --we-glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --we-dark-bg: #0b1220; --we-dark-surface: #131c2e; --we-dark-text: #ffffff; /* primary text = pure white in dark mode */ --we-dark-muted: #cbd5e1; /* "muted" text = slate-300, still light/legible */ --we-dark-border: rgba(255, 255, 255, 0.14); } /* Base canvas. NOTE on `.dashboard-content`: a few pages (Tickets, etc.) override it to a light cream `background-color: var(--surface)` â€” adding it here keeps that override dark in dark mode without us having to touch each blade. */ html[data-we-theme="dark"] body, html[data-we-theme="dark"] .dashboard-main-wrapper, html[data-we-theme="dark"] .dashboard-ecommerce, html[data-we-theme="dark"] .main-content, html[data-we-theme="dark"] .dashboard-content { background-color: var(--we-dark-bg) !important; color: var(--we-dark-text); } /* General text */ html[data-we-theme="dark"] body, html[data-we-theme="dark"] p, html[data-we-theme="dark"] span, html[data-we-theme="dark"] label, html[data-we-theme="dark"] li, html[data-we-theme="dark"] td, html[data-we-theme="dark"] th, html[data-we-theme="dark"] h1, html[data-we-theme="dark"] h2, html[data-we-theme="dark"] h3, html[data-we-theme="dark"] h4, html[data-we-theme="dark"] h5, html[data-we-theme="dark"] h6, html[data-we-theme="dark"] .page-header, html[data-we-theme="dark"] .breadcrumb-item { color: var(--we-dark-text); } html[data-we-theme="dark"] .text-muted, html[data-we-theme="dark"] .text-dark, html[data-we-theme="dark"] small.text-muted { color: var(--we-dark-muted) !important; } html[data-we-theme="dark"] .text-black, html[data-we-theme="dark"] .text-body { color: var(--we-dark-text) !important; } /* Cards / panels in dark (gradient stat tiles keep their own colors) */ html[data-we-theme="dark"] .card:not(.cm-metric-card) { background: var(--we-glass-bg); border-color: var(--we-glass-border); color: var(--we-dark-text); } html[data-we-theme="dark"] .card:not(.cm-metric-card) > .card-header, html[data-we-theme="dark"] .card:not(.cm-metric-card) .card-title, html[data-we-theme="dark"] .card:not(.cm-metric-card) > .card-footer { background-color: transparent !important; /* beats inline background:#fff on some headers */ color: var(--we-dark-text); border-color: var(--we-glass-border) !important; } /* ===================================================================== Dashboard "Cargo Summary" metric tiles (`.cm-metric-card`) --------------------------------------------------------------------- In light mode, dashboard.blade.php intentionally FLATTENS every gradient variant (.cm-metric-card--indigo / --teal / --orange / ...) to a plain white card with dark text, via this rule (inline in the blade template): .we-dashboard .cm-metric-card, .we-dashboard .cm-metric-card--indigo, ... { background: #fff !important; color: var(--we-dark) !important; } That `background: #fff !important` survives into dark mode because our generic `html[data-we-theme="dark"] .card` recolor explicitly excludes `.cm-metric-card` (the original intention was to preserve gradient stat tiles on other pages). Result: white card + the white text we were forcing â†’ the entire label/value/sub-text disappears in dark mode while only the icon remains visible. That's exactly the bug in the user's screenshot. Fix: scope a dark-surface override to `.we-dashboard .cm-metric-card` (specificity 0,3,1 â€” beats the inline `.we-dashboard .cm-metric-card` at 0,2,0 even though both have `!important`). Then use a soft light-on-dark palette for the text instead of pure #fff so the numbers don't glare. Selector includes every gradient modifier so merchant + admin dashboards are covered with one block. ===================================================================== */ html[data-we-theme="dark"] .we-dashboard .cm-metric-card, html[data-we-theme="dark"] .we-dashboard .cm-metric-card--indigo, html[data-we-theme="dark"] .we-dashboard .cm-metric-card--teal, html[data-we-theme="dark"] .we-dashboard .cm-metric-card--orange, html[data-we-theme="dark"] .we-dashboard .cm-metric-card--blue, html[data-we-theme="dark"] .we-dashboard .cm-metric-card--purple, html[data-we-theme="dark"] .we-dashboard .cm-metric-card--slate { background: var(--we-dark-surface) !important; color: var(--we-dark-text) !important; border: 1px solid var(--we-dark-border) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important; } /* Subtle hover lift kept, but recoloured for the dark surface */ html[data-we-theme="dark"] .we-dashboard .cm-metric-card:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.50) !important; border-color: rgba(0, 168, 232, 0.35) !important; } /* Icon chip: switch the light-mode `rgba(0,0,0,0.06)` tint to a matching light tint on the dark surface, and tint the glyph with the accent colour for a touch of brand. */ html[data-we-theme="dark"] .we-dashboard .cm-metric-card .cm-metric-icon { background-color: rgba(255, 255, 255, 0.06) !important; color: var(--we-accent, #00a8e8) !important; } html[data-we-theme="dark"] .we-dashboard .cm-metric-card .cm-metric-icon i { color: var(--we-accent, #00a8e8) !important; } /* Text palette: label = muted, value = strong, sub = muted */ html[data-we-theme="dark"] .we-dashboard .cm-metric-card .cm-metric-label { color: var(--we-dark-muted) !important; opacity: 1; } html[data-we-theme="dark"] .we-dashboard .cm-metric-card .cm-metric-value { color: var(--we-dark-text) !important; } html[data-we-theme="dark"] .we-dashboard .cm-metric-card .cm-metric-sub { color: var(--we-dark-muted) !important; opacity: 1; } /* Fallback for any `.cm-metric-card` that ISN'T inside a `.we-dashboard` wrapper (in case the same tile is reused on a future page). Keep the text light and visible on whatever surface it ends up on. */ html[data-we-theme="dark"] .cm-metric-card .cm-metric-label, html[data-we-theme="dark"] .cm-metric-card .cm-metric-sub { color: var(--we-dark-muted) !important; } html[data-we-theme="dark"] .cm-metric-card .cm-metric-value { color: var(--we-dark-text) !important; } /* ===================================================================== Dashboard "Transiting Cargoes" card + "Shipping Rates" panel --------------------------------------------------------------------- Both panels live inside `.we-dashboard` and hardcode light colours (inline `style="color:#0f172a"` for the card titles, inline `style="background:#fff"` on the card-header and table rows, `.we-dashboard table.table thead th { color: rgba(0,0,0,0.84)!important }` for the column headers, and `.we-dashboard .cm-rate-item { background: #fff }` + `.we-dashboard .cm-rate-title { color: var(--we-dark) }` for the rate list). In dark mode all of that lands on the dark canvas and reads as invisible text on white chips or invisible dark text on dark surfaces (exactly the two screenshots). The fix is one block scoped under `html[data-we-theme="dark"] .we-dashboard`, which beats every `.we-dashboard <â€¦>` rule on specificity (+1 attribute). Inline `style="color:#0f172a"` and `color: rgba(15,23,42â€¦)` are caught with substring attribute selectors so we don't have to touch the blade markup. ===================================================================== */ /* --- Transiting Cargoes: card title + table headers --- */ /* Inline `style="color:#0f172a"` titles in the card header */ html[data-we-theme="dark"] .we-dashboard [style*="color:#0f172a"], html[data-we-theme="dark"] .we-dashboard [style*="color: #0f172a"], html[data-we-theme="dark"] .we-dashboard [style*="color:rgb(15,23,42)"], html[data-we-theme="dark"] .we-dashboard [style*="color: rgb(15, 23, 42)"], html[data-we-theme="dark"] .we-dashboard [style*="color: rgba(15,23,42"], html[data-we-theme="dark"] .we-dashboard [style*="color: rgba(15, 23, 42"] { color: var(--we-dark-text) !important; } /* Inline `style="background:#fff"` chips inside .we-dashboard cards already get our generic dark-surface recolor higher up in this file (search for `[style*="background:#fff"]`), so card headers + table thead/tbody rows pick up the dark surface automatically. */ /* Dashboard table column headers: the blade rule forces them to `rgba(0,0,0,0.84) !important` on a `rgba(0,0,0,0.04)` chip â€” invisible on dark. Force light text + a faint white tint chip instead. */ html[data-we-theme="dark"] .we-dashboard table.table thead th, html[data-we-theme="dark"] .we-dashboard table.table thead td { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--we-dark-text) !important; border-color: var(--we-dark-border) !important; } html[data-we-theme="dark"] .we-dashboard table.table tbody td, html[data-we-theme="dark"] .we-dashboard table.table tbody th { border-color: var(--we-dark-border) !important; } /* The 1px row-separator divs in the transiting-cargoes table use inline `style="height:1px; background: rgba(15,23,42,0.06)"` â€” substring-match the rgba and recolor as a hairline on dark. */ html[data-we-theme="dark"] .we-dashboard [style*="background: rgba(15,23,42,0.06)"], html[data-we-theme="dark"] .we-dashboard [style*="background: rgba(15, 23, 42, 0.06)"], html[data-we-theme="dark"] .we-dashboard [style*="background:rgba(15,23,42,0.06)"] { background-color: var(--we-dark-border) !important; } /* --- Shipping Rates panel --- */ /* Panel container: the blade rule sets `.cm-rates-panel .card-header { background:#fff }` directly (no `!important`), our card-header recolor in section 2 catches it. Reinforce the body too. */ html[data-we-theme="dark"] .we-dashboard .cm-rates-panel, html[data-we-theme="dark"] .we-dashboard .cm-rates-panel .card-header, html[data-we-theme="dark"] .we-dashboard .cm-rates-panel .card-body { background-color: transparent !important; color: var(--we-dark-text) !important; } /* Search input inside the panel */ html[data-we-theme="dark"] .we-dashboard .cm-rates-search { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--we-dark-text) !important; border-color: var(--we-dark-border) !important; } html[data-we-theme="dark"] .we-dashboard .cm-rates-search::placeholder { color: var(--we-dark-muted) !important; } /* Section headers ("EXCHANGE RATES", "SEA SHIPPING RATES", "AIR SHIPPING RATES"). Blade rule forces them to `var(--we-dark)` (near-black) â€” make them muted-light instead. */ html[data-we-theme="dark"] .we-dashboard .cm-rate-section-title h6 { color: var(--we-dark-muted) !important; } /* Rate items: blade rule paints them `background:#fff` with a near- black title/amount. Repaint as a dark surface with light text. */ html[data-we-theme="dark"] .we-dashboard .cm-rate-item { background: var(--we-dark-surface) !important; border: 1px solid var(--we-dark-border) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30) !important; } html[data-we-theme="dark"] .we-dashboard .cm-rate-item:hover { border-color: rgba(0, 168, 232, 0.35) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45) !important; } html[data-we-theme="dark"] .we-dashboard .cm-rate-title, html[data-we-theme="dark"] .we-dashboard .cm-rate-amount { color: var(--we-dark-text) !important; } html[data-we-theme="dark"] .we-dashboard .cm-rate-meta { color: var(--we-dark-muted) !important; } /* --- View All / Manage outline buttons in the panel headers --- These are `.btn-outline-primary` and are already styled by the global outline-primary dark rules elsewhere; no extra work needed. */ /* ===================================================================== Supplier Tracking Numbers â€” `.tracking-status-badge` (pending / received / shipped) pills --------------------------------------------------------------------- In `tracking_numbers/index.blade.php` the pills are defined for light mode as dark-text-on-pastel-bg: .tracking-status-badge--pending { color:#8a6d3b; background:#fff7df; } .tracking-status-badge--received { color:#0f6f62; background:#e4fbf5; } .tracking-status-badge--shipped { color:#0a4f94; background:#e8f3ff; } In dark mode, the badge `` gets retinted to `var(--we-dark-text)` by our generic text rule `html[data-we-theme="dark"] span { color:â€¦ }` (specificity 0,1,2) which beats the per-badge class rule (0,1,0). The pastel background survives, the dark foreground does not â€” so the text appears as a near-white wash on a cream pill (the "ghost" badges in the user's screenshot). Fix: give each variant a dark-mode-native palette â€” tinted translucent background of the same hue, a brighter coloured foreground, matching border â€” at specificity (0,2,1) which beats the generic span rule. The `__dot` uses `background: currentColor`, so it picks up the new foreground colour automatically. ===================================================================== */ html[data-we-theme="dark"] .tracking-status-badge--pending { color: #fbbf24 !important; /* amber-400 */ background: rgba(251, 191, 36, 0.14) !important; border-color: rgba(251, 191, 36, 0.32) !important; } html[data-we-theme="dark"] .tracking-status-badge--received { color: #34d399 !important; /* emerald-400 */ background: rgba(52, 211, 153, 0.14) !important; border-color: rgba(52, 211, 153, 0.32) !important; } html[data-we-theme="dark"] .tracking-status-badge--shipped { color: #60a5fa !important; /* sky-400 */ background: rgba(96, 165, 250, 0.14) !important; border-color: rgba(96, 165, 250, 0.32) !important; } /* The dot already inherits `currentColor`, but re-assert for safety in case any other rule paints the dot directly. */ html[data-we-theme="dark"] .tracking-status-badge .tracking-status-badge__dot { background: currentColor !important; } /* ===================================================================== Sidebar in dark (desktop) --------------------------------------------------------------------- header.blade.php contains an inline rule .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link { color: var(--we-dark) !important; /* near-black */ } that bleeds into dark mode. We re-assert the dark palette at matching specificity (also class-level, !important) but loaded LATER in the cascade (this file is appended last in header.blade.php) so it wins without needing markup changes. We also bump the panel background opacity so the sidebar reads as a clearly framed surface rather than a faint wash over the body, and theme the profile card + language dropdown that live inside it. ===================================================================== */ html[data-we-theme="dark"] .nav-left-sidebar, html[data-we-theme="dark"] .sidebar-dark.nav-left-sidebar { background: rgba(13, 20, 34, 0.92) !important; border-right: 1px solid var(--we-dark-border) !important; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25); } /* Link text + icons: force light palette over the inline near-black */ html[data-we-theme="dark"] .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link, html[data-we-theme="dark"] .nav-left-sidebar .navbar-nav .nav-link { color: var(--we-dark-text) !important; } html[data-we-theme="dark"] .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link i, html[data-we-theme="dark"] .nav-left-sidebar .navbar-nav .nav-link i { color: var(--we-accent, #00a8e8) !important; } /* Hover/focus: subtle white tint, brighter text */ html[data-we-theme="dark"] .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link:hover, html[data-we-theme="dark"] .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link:focus { background-color: rgba(255, 255, 255, 0.07) !important; color: #fff !important; } html[data-we-theme="dark"] .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link:hover i, html[data-we-theme="dark"] .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link:focus i { color: #fff !important; } /* Active / expanded: accent fill, white fg */ html[data-we-theme="dark"] .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link.active, html[data-we-theme="dark"] .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link[aria-expanded="true"] { background-color: var(--we-accent, #00a8e8) !important; color: #fff !important; } html[data-we-theme="dark"] .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link.active i, html[data-we-theme="dark"] .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link[aria-expanded="true"] i { color: #fff !important; } /* Submenu items â€” the user complained the "Air"/"Sea" subitems read as faint blue-grey (`--we-dark-muted`) in dark mode and the inline header.blade.php rule paints the .active subitem in `var(--we-selection)` (sky-blue, same as the active background) â†’ invisible. Repaint everything LIGHT so all sidebar text is clearly readable in dark mode. Light mode is untouched. */ html[data-we-theme="dark"] .nav-left-sidebar .submenu .nav .nav-item .nav-link { color: var(--we-dark-text) !important; /* off-white, NOT muted */ } html[data-we-theme="dark"] .nav-left-sidebar .submenu .nav .nav-item .nav-link i { color: var(--we-accent, #00a8e8) !important; /* keep brand-coloured icon glyph */ } html[data-we-theme="dark"] .nav-left-sidebar .submenu .nav .nav-item .nav-link:hover, html[data-we-theme="dark"] .nav-left-sidebar .submenu .nav .nav-item .nav-link:focus { background-color: rgba(255, 255, 255, 0.06) !important; color: #fff !important; } html[data-we-theme="dark"] .nav-left-sidebar .submenu .nav .nav-item .nav-link:hover i, html[data-we-theme="dark"] .nav-left-sidebar .submenu .nav .nav-item .nav-link:focus i { color: #fff !important; } /* Active submenu item â€” high-specificity override that beats the inline header.blade.php rule .sidebar-dark.nav-left-sidebar .submenu .nav .nav-item .nav-link.active { color: var(--we-selection) !important; } (specificity 0,7,0). Ours is 0,8,1 so wins, plus we re-paint the icon glyph from sky-blue to white for matching contrast against the subtle white-tint background highlight. */ html[data-we-theme="dark"] .sidebar-dark.nav-left-sidebar .submenu .nav .nav-item .nav-link.active, html[data-we-theme="dark"] .nav-left-sidebar .submenu .nav .nav-item .nav-link.active { background-color: rgba(255, 255, 255, 0.08) !important; color: #fff !important; border-right-color: var(--we-accent, #00a8e8) !important; } html[data-we-theme="dark"] .sidebar-dark.nav-left-sidebar .submenu .nav .nav-item .nav-link.active i, html[data-we-theme="dark"] .nav-left-sidebar .submenu .nav .nav-item .nav-link.active i { color: #fff !important; } html[data-we-theme="dark"] .nav-left-sidebar .navbar-heading, html[data-we-theme="dark"] .nav-left-sidebar .nav-divider { color: var(--we-dark-muted) !important; } /* Sidebar header card: greeting + role */ html[data-we-theme="dark"] .nav-left-sidebar .we-sidebar-profile, html[data-we-theme="dark"] .nav-left-sidebar .we-sidebar-profile.card { background-color: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--we-dark-border) !important; color: var(--we-dark-text) !important; } html[data-we-theme="dark"] .nav-left-sidebar .we-sidebar-profile .font-weight-bold { color: var(--we-dark-text) !important; } html[data-we-theme="dark"] .nav-left-sidebar .we-sidebar-profile .text-muted { color: var(--we-dark-muted) !important; } /* Language dropdown trigger inside the sidebar */ html[data-we-theme="dark"] .nav-left-sidebar .lang-dropdown .dropdown-toggle, html[data-we-theme="dark"] .nav-left-sidebar .lang-dropdown .btn { background-color: rgba(255, 255, 255, 0.05) !important; border-color: var(--we-dark-border) !important; color: var(--we-dark-text) !important; } /* Offcanvas wrapper that hosts the desktop sidebar carries .bg-white; make sure it adopts the dark panel surface so no white halo leaks around the fixed sidebar on first paint. */ html[data-we-theme="dark"] .navbar-collapse.offcanvas-nav.bg-white, html[data-we-theme="dark"] .navbar-collapse.offcanvas.bg-white { background-color: transparent !important; } /* Belt-and-suspenders: some pages also rely on .offcanvas-header / border utilities inside the sidebar â€” keep them dark-friendly. */ html[data-we-theme="dark"] #offcanvasDarkNavbar .offcanvas-header.border-bottom { border-bottom-color: var(--we-dark-border) !important; } /* The submenu wrapper sits in a collapse div with white default bg; reset */ html[data-we-theme="dark"] .nav-left-sidebar .submenu, html[data-we-theme="dark"] .nav-left-sidebar .submenu .nav { background-color: transparent !important; } /* In case any global rule (e.g. table dark theme) leaks color:#fff onto sidebar text, re-affirm on the highest-specificity selector we can use. */ html[data-we-theme="dark"] .nav-left-sidebar .navbar-nav > li > .nav-link, html[data-we-theme="dark"] .nav-left-sidebar .navbar-nav .nav-divider, html[data-we-theme="dark"] .nav-left-sidebar .nav-link i { color: var(--we-dark-text) !important; } html[data-we-theme="dark"] .nav-left-sidebar .navbar-nav > li > .nav-link i { color: var(--we-accent, #00a8e8) !important; } /* ===================================================================== Top navbar / header bar in dark --------------------------------------------------------------------- The desktop topbar in navber.blade.php is wrapped in a div with `.text-bg-dark` (Bootstrap util forcing solid black + white text). On top of that sits the inner `.admin-topbar-inner` and the outer `.navbar.transparent` fixed bar. Without overrides we end up with two competing dark surfaces (one almost-black chip + one weak rgba bar), so the bar reads as fragmented and the search/profile float without a clear frame. The rules below give the topbar ONE clear dark surface and theme the controls that sit on it. ===================================================================== */ /* --- Single, clearly framed dark surface for the whole topbar --- CRITICAL: do NOT apply `backdrop-filter` to any ANCESTOR of `.admin-topbar-inner`. The inner bar is `position: fixed` and is meant to span the full viewport; per CSS spec, an ancestor with `backdrop-filter` (or `transform`/`filter`/`perspective`/`will-change` for those) becomes the new containing block for fixed descendants â€” which would trap the topbar inside `.dashboard-header` (which lives inside `.w-90` inside `.container`, max-width ~1140px) and squeeze every item into a narrow strip on the left of the screen. That was the dark-mode breakage we were debugging. We therefore: - Apply the dark BACKGROUND to every layer (so any visible chip is dark, no matter which actually paints first). - Apply the BACKDROP-FILTER blur only to `.admin-topbar-inner` itself (which is already fixed, so creating a containing block on itself doesn't change its own positioning). */ html[data-we-theme="dark"] .navbar.transparent, html[data-we-theme="dark"] .dashboard-header, html[data-we-theme="dark"] .dashboard-header .navbar, html[data-we-theme="dark"] .admin-topbar-inner { background: rgba(11, 18, 32, 0.96) !important; color: var(--we-dark-text); } /* Backdrop blur ONLY on the fixed topbar itself â€” safe because it has no fixed descendants whose containing block we'd be redefining. */ html[data-we-theme="dark"] .admin-topbar-inner { -webkit-backdrop-filter: blur(var(--we-glass-blur)); backdrop-filter: blur(var(--we-glass-blur)); } /* Bottom hairline on the visible inner bar (which is what the user actually sees on the page). */ html[data-we-theme="dark"] .admin-topbar-inner { border-bottom: 1px solid var(--we-dark-border) !important; } /* Neutralise Bootstrap's `.text-bg-dark` forced palette inside the topbar so it inherits our theme surface instead of painting a hard black chip. */ html[data-we-theme="dark"] .navbar.transparent .text-bg-dark { background-color: transparent !important; color: var(--we-dark-text) !important; } /* --- LAYOUT: keep the desktop topbar on a single nowrap row --- Root cause of the "stacked / broken topbar" we saw in dark mode: `.admin-topbar-inner` is `display:flex` but inherits Bootstrap's `.navbar { flex-wrap: wrap }` from its parent class. Any child widening by even a couple of pixels (e.g. a border we previously added to `.admin-top-gs-input-wrap`) pushes the row past 100% and the children wrap onto separate lines. Pinning the row to nowrap with sane flex bases fixes it without touching markup. Scoped to lg+ so the intended mobile stacked layout is preserved. */ @media (min-width: 992px) { html[data-we-theme="dark"] .admin-topbar-inner { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 14px; width: 100%; min-height: 60px; padding: 8px 18px; box-sizing: border-box; } /* Logo: fixed pillar on the left */ html[data-we-theme="dark"] .admin-topbar-inner .navbar-brand { flex: 0 0 auto; margin: 0; padding: 0; display: inline-flex; align-items: center; } html[data-we-theme="dark"] .admin-topbar-inner .navbar-brand img.logo { max-height: 36px; width: auto; } /* Search holder: takes remaining space, allowed to shrink */ html[data-we-theme="dark"] .admin-topbar-inner .admin-top-gs-holder { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; } /* Right nav (To Do + profile): natural width, no wrap */ html[data-we-theme="dark"] .admin-topbar-inner #navbarSupportedContent { flex: 0 0 auto !important; width: auto !important; } html[data-we-theme="dark"] .admin-topbar-inner .navbar-right-top { flex-wrap: nowrap !important; gap: 10px; margin: 0 !important; } html[data-we-theme="dark"] .admin-topbar-inner .navbar-right-top .nav-item { border-right: 0 !important; } } /* --- Topbar text + profile menu (link colours) --- */ html[data-we-theme="dark"] .navbar.transparent .navbar-right-top .nav-link, html[data-we-theme="dark"] .navbar.transparent .nav-user .nav-link, html[data-we-theme="dark"] .navbar.transparent .navbar-right-top .nav-item { color: var(--we-dark-text) !important; border-color: var(--we-dark-border) !important; } /* --- Topbar general-search input + submit pill --- IMPORTANT: do NOT add a border to `.admin-top-gs-input-wrap`. The wrap is `position: relative` and its icon/button children use `position: absolute` against it; adding a border was widening the pill and was a contributor to the row overflowing on dark mode. The `.admin-top-gs-input` itself already carries the visible pill border. */ html[data-we-theme="dark"] .admin-top-gs-input-wrap { background: transparent !important; border: 0 !important; box-sizing: border-box; } html[data-we-theme="dark"] .admin-top-gs-input { background-color: rgba(255, 255, 255, 0.06) !important; color: var(--we-dark-text) !important; border: 1px solid var(--we-dark-border) !important; box-shadow: none !important; } html[data-we-theme="dark"] .admin-top-gs-input:hover, html[data-we-theme="dark"] .admin-top-gs-input:focus { background-color: rgba(255, 255, 255, 0.09) !important; border-color: var(--we-accent, #00a8e8) !important; box-shadow: 0 0 0 .15rem rgba(0, 168, 232, 0.18) !important; } html[data-we-theme="dark"] .admin-top-gs-input::placeholder { color: var(--we-dark-muted) !important; } html[data-we-theme="dark"] .admin-top-gs-icon { color: var(--we-dark-muted) !important; } html[data-we-theme="dark"] .admin-top-gs-btn, html[data-we-theme="dark"] .admin-top-gs-btn:hover, html[data-we-theme="dark"] .admin-top-gs-btn:focus { background-color: var(--we-accent, #00a8e8) !important; border-color: var(--we-accent, #00a8e8) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(0, 168, 232, 0.25) !important; } /* --- Mobile (< lg) topbar polish --- The mobile layout intentionally stacks (logo row â†’ search row â†’ actions row). We just need to make sure each row reads well on the dark surface and the controls (hamburger / profile / To-Do) have matching weight. */ @media (max-width: 991.98px) { html[data-we-theme="dark"] .navbar.transparent { padding: 10px 12px !important; } html[data-we-theme="dark"] .navbar.transparent .navbar-other { gap: 8px; } html[data-we-theme="dark"] .navbar.transparent .navbar-other .navbar-nav.flex-row { gap: 8px; flex-wrap: nowrap; } html[data-we-theme="dark"] .admin-top-gs-mobile-row .admin-top-gs-input { background-color: rgba(255, 255, 255, 0.06) !important; color: var(--we-dark-text) !important; border-color: var(--we-dark-border) !important; } html[data-we-theme="dark"] .offcanvas-nav-btn { background-color: rgba(255, 255, 255, 0.06); border: 1px solid var(--we-dark-border); border-radius: 10px; padding: 6px 10px; } } /* Tables â€” kept crisp/solid for readability; only recolor for dark */ html[data-we-theme="dark"] table.table { color: var(--we-dark-text); background-color: transparent; } html[data-we-theme="dark"] table.table tbody td, html[data-we-theme="dark"] table.table tbody th { background-color: var(--we-dark-surface) !important; color: var(--we-dark-text) !important; border-color: var(--we-dark-border) !important; } /* Keep the strong dark header from the existing theme (#00171f) â€” it already reads well in dark mode, so only ensure the hover stays subtle. */ html[data-we-theme="dark"] table.table.table-hover tbody tr:hover > *, html[data-we-theme="dark"] table.table tbody tr:hover > * { background-color: rgba(255, 255, 255, 0.05) !important; } html[data-we-theme="dark"] .table-bordered, html[data-we-theme="dark"] .table-bordered td, html[data-we-theme="dark"] .table-bordered th { border-color: var(--we-dark-border) !important; } /* Forms in dark */ html[data-we-theme="dark"] .form-control, html[data-we-theme="dark"] .custom-select, html[data-we-theme="dark"] select.form-control, html[data-we-theme="dark"] textarea.form-control, html[data-we-theme="dark"] .input-group-text, html[data-we-theme="dark"] .select2-container--default .select2-selection--single, html[data-we-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: rgba(255, 255, 255, 0.04) !important; color: var(--we-dark-text) !important; border-color: var(--we-dark-border) !important; } html[data-we-theme="dark"] .form-control::placeholder, html[data-we-theme="dark"] input::placeholder, html[data-we-theme="dark"] textarea::placeholder { color: var(--we-dark-muted) !important; opacity: 1; } html[data-we-theme="dark"] .form-control:focus { background-color: rgba(255, 255, 255, 0.06) !important; border-color: var(--we-accent, #00a8e8) !important; box-shadow: 0 0 0 .2rem rgba(0, 168, 232, 0.22) !important; } /* Select2 dropdown panel + rendered text */ html[data-we-theme="dark"] .select2-dropdown { background-color: var(--we-dark-surface) !important; border-color: var(--we-dark-border) !important; color: var(--we-dark-text) !important; } html[data-we-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, html[data-we-theme="dark"] .select2-results__option { color: var(--we-dark-text) !important; } html[data-we-theme="dark"] .select2-results__option--highlighted { background-color: var(--we-accent, #00a8e8) !important; } /* Dropdown menus in dark */ html[data-we-theme="dark"] .dropdown-menu { background: rgba(19, 28, 46, 0.92); border-color: var(--we-dark-border); } html[data-we-theme="dark"] .dropdown-menu .dropdown-item { color: var(--we-dark-text); } html[data-we-theme="dark"] .dropdown-divider { border-color: var(--we-dark-border); } /* ===================================================================== Modals in dark mode â€” clean opaque panel --------------------------------------------------------------------- The base `.modal-content` rule (section 1) layers a `backdrop-filter: blur(â€¦)` + a soft `box-shadow: 0 24px 60px rgba(15,23,42,0.22)` and uses a near-transparent background â€” designed for light mode where the modal sits over white content and the blur reads as frosted glass. On the dark canvas, that combo produces the "halo / shadow" the user screenshotted on the Bulk SMS modal: the semi-transparent panel (rgba(â€¦,0.92)) lets the bright sidebar / topbar / accent pills leak through and tint the modal teal/cyan, the backdrop blur swirls those leaks into a glow, and the soft shadow extends the halo further. Fix in dark mode: - Make the panel FULLY OPAQUE (`var(--we-dark-surface)`) so nothing bleeds through. - Drop the backdrop blur (no longer needed when the panel is solid; also avoids creating a new containing block that could trap any fixed children inside the modal). - Use a tight, neutral drop shadow instead of the soft halo. - Darken the modal backdrop a notch so the modal pops cleanly off the page behind it. */ html[data-we-theme="dark"] .modal-content { background: var(--we-dark-surface) !important; border: 1px solid var(--we-dark-border) !important; color: var(--we-dark-text); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html[data-we-theme="dark"] .modal-header, html[data-we-theme="dark"] .modal-footer { border-color: var(--we-dark-border) !important; background: transparent !important; } /* The Bootstrap 5 backdrop is `background:#000; opacity:.5` by default, which on a dark page lifts the modal only weakly. Push it darker so the page behind reads as out-of-focus and the modal stands out. */ html[data-we-theme="dark"] .modal-backdrop, html[data-we-theme="dark"] .modal-backdrop.show { background-color: #000 !important; opacity: 0.72 !important; } /* ===================================================================== Bulk SMS modal (#bulkSmsModal) â€” dark mode --------------------------------------------------------------------- The modal nests several Bootstrap utility classes (`.card.bg-light`, `.bg-white` location tiles, `.badge-light`, `.alert-success`, a `border-dashed` wrapper, a nav-pills tab strip, etc.). Our generic dark rules recolor `.bg-light` and `.bg-white` to `--we-dark-surface` â€” the same shade as the modal panel â€” so every card edge disappears and the modal reads as a flat washed-out block with no input boundaries (exactly what's in the user's screenshot, where it looks like "I can't input anything"). Fix: scope a slightly LIFTED surface (`rgba(255,255,255,0.04)`) to the modal's nested cards / tiles so each region is visibly separated from the modal background, and brighten + outline the form controls. ===================================================================== */ /* Modal header text â€” force high contrast against the dark surface */ html[data-we-theme="dark"] #bulkSmsModal .modal-header, html[data-we-theme="dark"] #bulkSmsModal .modal-header * { color: var(--we-dark-text) !important; } html[data-we-theme="dark"] #bulkSmsModal .modal-title { color: var(--we-dark-text) !important; } html[data-we-theme="dark"] #bulkSmsModal .modal-header .text-muted { color: var(--we-dark-muted) !important; } /* Inner cards (Bulk SMS Campaign, Target Locations, Personalize, Compose pane, etc.) â€” give them a SLIGHTLY lifted background so they stand apart from the modal surface and have visible edges. */ html[data-we-theme="dark"] #bulkSmsModal .card, html[data-we-theme="dark"] #bulkSmsModal .card.bg-light, html[data-we-theme="dark"] #bulkSmsModal .card.border-dashed, html[data-we-theme="dark"] #bulkSmsModal .card.border { background-color: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--we-dark-border) !important; color: var(--we-dark-text) !important; } html[data-we-theme="dark"] #bulkSmsModal .border-dashed { border-style: dashed !important; border-color: rgba(255, 255, 255, 0.18) !important; } html[data-we-theme="dark"] #bulkSmsModal .card .card-body, html[data-we-theme="dark"] #bulkSmsModal .card .font-weight-bold { color: var(--we-dark-text) !important; } html[data-we-theme="dark"] #bulkSmsModal .card .text-muted, html[data-we-theme="dark"] #bulkSmsModal .card .small.text-muted, html[data-we-theme="dark"] #bulkSmsModal .text-muted { color: var(--we-dark-muted) !important; } /* Round icon chips (`rounded-circle.bg-white` and `.bg-light`) inside the modal â€” give them a subtle white tint so they read as a chip and the icon stays visible. */ html[data-we-theme="dark"] #bulkSmsModal .rounded-circle.bg-white, html[data-we-theme="dark"] #bulkSmsModal .rounded-circle.bg-light { background-color: rgba(255, 255, 255, 0.08) !important; border-color: var(--we-dark-border) !important; } html[data-we-theme="dark"] #bulkSmsModal .rounded-circle.bg-white i, html[data-we-theme="dark"] #bulkSmsModal .rounded-circle.bg-light i { color: var(--we-dark-muted) !important; } /* SMS-count / segment badges (badge-light with border) */ html[data-we-theme="dark"] #bulkSmsModal .bulk-sms-badge, html[data-we-theme="dark"] #bulkSmsModal .badge-light.border { background-color: rgba(255, 255, 255, 0.06) !important; border-color: var(--we-dark-border) !important; color: var(--we-dark-text) !important; } /* Location tiles: blade renders them as `.location-tile.border.bg-white` â€” make each tile a distinct lifted card, with a brand-accent state for the currently selected tile. */ html[data-we-theme="dark"] #bulkSmsModal .location-tile.bg-white, html[data-we-theme="dark"] #bulkSmsModal .location-tile { background-color: rgba(255, 255, 255, 0.04) !important; border-color: var(--we-dark-border) !important; color: var(--we-dark-text) !important; } html[data-we-theme="dark"] #bulkSmsModal .location-tile.bg-light, html[data-we-theme="dark"] #bulkSmsModal .location-tile.border-primary { background-color: rgba(0, 168, 232, 0.10) !important; border-color: var(--we-accent, #00a8e8) !important; } html[data-we-theme="dark"] #bulkSmsModal .location-tile .text-muted { color: var(--we-dark-muted) !important; } /* Tabs strip (Compose / Templates): the active pill keeps the brand accent; the inactive one becomes a subtle outlined chip on dark. */ html[data-we-theme="dark"] #bulkSmsModal .nav-pills .nav-link { color: var(--we-dark-muted) !important; } html[data-we-theme="dark"] #bulkSmsModal .nav-pills .nav-link.active { background-color: var(--we-accent, #00a8e8) !important; color: #fff !important; } /* Form controls inside the modal (textarea, search, etc.) */ html[data-we-theme="dark"] #bulkSmsModal textarea.form-control, html[data-we-theme="dark"] #bulkSmsModal input.form-control, html[data-we-theme="dark"] #bulkSmsModal select.form-control { background-color: rgba(255, 255, 255, 0.06) !important; color: var(--we-dark-text) !important; border-color: var(--we-dark-border) !important; } html[data-we-theme="dark"] #bulkSmsModal textarea.form-control::placeholder, html[data-we-theme="dark"] #bulkSmsModal input.form-control::placeholder { color: var(--we-dark-muted) !important; } html[data-we-theme="dark"] #bulkSmsModal textarea.form-control:focus, html[data-we-theme="dark"] #bulkSmsModal input.form-control:focus { background-color: rgba(255, 255, 255, 0.09) !important; border-color: var(--we-accent, #00a8e8) !important; box-shadow: 0 0 0 .15rem rgba(0, 168, 232, 0.18) !important; } /* Token / placeholder buttons */ html[data-we-theme="dark"] #bulkSmsModal .token-btn { background-color: rgba(255, 255, 255, 0.05) !important; border-color: var(--we-dark-border) !important; color: var(--we-dark-text) !important; } html[data-we-theme="dark"] #bulkSmsModal .token-btn:hover { background-color: rgba(255, 255, 255, 0.10) !important; color: #fff !important; } /* Success alert at the bottom of the locations panel */ html[data-we-theme="dark"] #bulkSmsModal .alert-success { background-color: rgba(34, 197, 94, 0.10) !important; border-color: rgba(34, 197, 94, 0.30) !important; color: #86efac !important; } html[data-we-theme="dark"] #bulkSmsModal .alert-success * { color: #86efac !important; } /* btn-light controls (the chevron toggle on the Locations row) */ html[data-we-theme="dark"] #bulkSmsModal .btn-light { background-color: rgba(255, 255, 255, 0.06) !important; border-color: var(--we-dark-border) !important; color: var(--we-dark-text) !important; } html[data-we-theme="dark"] #bulkSmsModal .btn-light:hover, html[data-we-theme="dark"] #bulkSmsModal .btn-light:focus { background-color: rgba(255, 255, 255, 0.12) !important; color: #fff !important; } /* ===================================================================== Modal close button (Ã— in the top-right) â€” dark mode --------------------------------------------------------------------- Two flavours exist in this codebase, and they need DIFFERENT treatment in dark mode: - Bootstrap 4 `.close` is a `