/** * lbai-tokens.css — semantic colour token system for light and dark mode. * * ───────────────────────────────────────────────────────────────────────────────────────────── * WHY THIS FILE EXISTS * ───────────────────────────────────────────────────────────────────────────────────────────── * Measured inventory of the first-party components: * * body.dark-mode rules 702 across 13 stylesheets, with NO shared vocabulary * of which frozen 299 (single-listing-v2 113, dashboard-ui 86, core 42, * dashboard 30, header.php 28) * hardcoded white ink 215 declarations * hardcoded white bg 184 declarations * plugin dark support ZERO — listingpro-custom-features has 81 white inks, 37 white * backgrounds and not one dark-mode rule, and it renders booking * cards and status badges * * Thirteen stylesheets each invented their own dark palette, so "different components use * conflicting dark-mode rules" is literally true. This file introduces the one vocabulary * they can all agree on, and fixes the structural cause rather than the symptoms. * * ───────────────────────────────────────────────────────────────────────────────────────────── * THE STRUCTURAL CAUSE, AND THE ONE RULE THAT REPLACES IT * ───────────────────────────────────────────────────────────────────────────────────────────── * header.php prints, inline in , a colour-only rule with !important: * * body.dark-mode h1..h4, p, span, label, .ail-tab-btn, .ail-nav-item, * .ail-quick-action-item { color: var(--text-primary) !important; } * * In dark mode --text-primary is near-white. The rule sets no background, so every one of * those elements sitting on a surface that stayed light becomes near-white on near-white — * and being !important, a component cannot opt out by restating its own ink. That single * declaration is the origin of the "white text on white surface" class of bug, the * unreadable status labels, and most of the invisible icons. * * header.php is FROZEN, so the rule cannot be removed. It is instead SUPERSEDED, once, by a * rule that is context-aware because it reads a token instead of naming a colour: * * html body.dark-mode :is(h1..h4, p, span, label, …) { color: var(--lbai-text) !important; } * * That wins on SPECIFICITY, not source order: header.php's selector is (0,1,2) — one class, * two type selectors — and prefixing `html` makes this one (0,1,3). No source-order fight, no * dependence on enqueue timing. * * Because --lbai-text is a CUSTOM PROPERTY it INHERITS, so any component that declares * itself a pale surface re-points the token for its whole subtree in one line: * * body.dark-mode .some-pale-chip { --lbai-text: var(--lbai-text-on-pale); } * * That is the difference between a token system and an override list: N components need N * one-line surface declarations, not N × M selector overrides for every text element inside * them. This is explicitly NOT `* { color: white !important }` — nothing here forces a colour, * it forces a *token*, and the token is decided by the surface the text actually sits on. * * ───────────────────────────────────────────────────────────────────────────────────────────── * SCOPE DISCIPLINE * ───────────────────────────────────────────────────────────────────────────────────────────── * Light mode is defined with the SAME semantic tokens but the values are the product's * existing ones, so light rendering is unchanged. Brand colours are reused, never redesigned. * No frozen file is modified. Status hues keep their meaning; only the foreground/background * pairing is corrected. * * @package listing-by-atul-ingale */ /* ===================================================================================== 1. LIGHT TOKENS — the product's existing values, given semantic names. ===================================================================================== Values are taken from what the product already renders (style.css :root, core.css, dashboard-ui.css) so adopting the vocabulary changes nothing visually in light mode. ===================================================================================== */ :root { /* Surfaces, lightest to most elevated. */ --lbai-bg: #f5f6fb; --lbai-surface: #ffffff; --lbai-surface-2: #f8fafc; --lbai-surface-3: #f1f5f9; /* Ink. --lbai-text is the inheritable default; -strong/-muted/-subtle are the ladder. */ --lbai-text: #0f172a; --lbai-text-strong: #0b1220; --lbai-text-muted: #475569; --lbai-text-subtle: #64748b; /* The ink to use when text sits on a deliberately PALE surface in either mode. */ --lbai-text-on-pale: #0f172a; /* The ink to use on a saturated brand/status fill. */ --lbai-text-on-accent: #ffffff; --lbai-border: #e2e8f0; --lbai-border-strong: #cbd5e1; --lbai-link: #6d5efc; --lbai-link-hover: #574bd6; /* A FILL is not a link colour, and conflating the two was measurably wrong: using the dark-mode link tint as the active-pill background put white on a light purple at 2.36:1. Accent tokens exist for saturated fills that carry white text. */ --lbai-accent: #6d5efc; --lbai-accent-strong: #574bd6; --lbai-icon: #475569; --lbai-icon-muted: #94a3b8; --lbai-input-bg: #ffffff; --lbai-input-text: #0f172a; --lbai-input-border: #cbd5e1; --lbai-placeholder: #94a3b8; --lbai-focus: #6d5efc; --lbai-shadow: 0 1px 3px rgba(15, 23, 42, .08); /* Status: an ink + a surface that are guaranteed to pair. Hues are the product's own. */ --lbai-success: #15803d; --lbai-success-bg: #dcfce7; --lbai-warning: #92400e; --lbai-warning-bg: #fef3c7; --lbai-danger: #b91c1c; --lbai-danger-bg: #fee2e2; --lbai-info: #1d4ed8; --lbai-info-bg: #dbeafe; --lbai-neutral: #475569; --lbai-neutral-bg: #f1f5f9; --lbai-disabled-bg: #f1f5f9; --lbai-disabled-text: #94a3b8; } /* ===================================================================================== 2. DARK TOKENS — a coherent palette, not an inversion. ===================================================================================== Built on the dark values the product already approved (page #1a1a2e, card #16213e, raised #1f2a47, field #101a30, ink #f1f5f9) so this is a consolidation of existing decisions rather than a new theme. The admin-configurable emitter may override the first few at runtime; every value below is a fallback that is already AA-compliant. Status pairs are re-derived for dark: the HUE is preserved so meaning is unchanged, but the surface becomes a low-alpha tint of the hue and the ink becomes a light tint of it. That is what makes Confirmed / Pending / Rejected readable on a dark card instead of near-white on a pale pastel. ===================================================================================== */ body.dark-mode { --lbai-bg: #1a1a2e; --lbai-surface: #16213e; --lbai-surface-2: #1f2a47; --lbai-surface-3: #131c33; --lbai-text: #f1f5f9; --lbai-text-strong: #ffffff; --lbai-text-muted: #a5b4c8; --lbai-text-subtle: #8b9ab0; /* A pale surface still exists in dark mode (status chips, accent tiles). Text on it must go DARK, which is the opposite of what the forced rule in header.php would do. */ --lbai-text-on-pale: #0f172a; --lbai-text-on-accent: #ffffff; --lbai-border: #24304d; --lbai-border-strong: #35446b; --lbai-link: #a99cff; --lbai-link-hover: #c4b5fd; /* The fill stays close to the brand but a shade deeper than the light-mode value, because white-on-fill must still clear AA: white on #6d5efc measures 4.49:1, white on #5b4bd8 measures 6.1:1. Same hue family, no brand redesign. */ --lbai-accent: #5b4bd8; --lbai-accent-strong: #4c3fbe; --lbai-icon: #cbd5e1; --lbai-icon-muted: #8b9ab0; --lbai-input-bg: #101a30; --lbai-input-text: #f1f5f9; --lbai-input-border: #35446b; --lbai-placeholder: #8b9ab0; --lbai-focus: #c4b5fd; --lbai-shadow: 0 1px 3px rgba(0, 0, 0, .5); --lbai-success: #6ee7a8; --lbai-success-bg: rgba(22, 163, 74, .22); --lbai-warning: #fcd34d; --lbai-warning-bg: rgba(245, 158, 11, .20); --lbai-danger: #fca5a5; --lbai-danger-bg: rgba(220, 38, 38, .22); --lbai-info: #93c5fd; --lbai-info-bg: rgba(59, 130, 246, .22); --lbai-neutral: #cbd5e1; --lbai-neutral-bg: rgba(255, 255, 255, .10); --lbai-disabled-bg: rgba(255, 255, 255, .06); /* #7c8aa5 measured 4.16:1 on the composited disabled surface — below AA. A disabled control must still be READ, so the ink is raised rather than the state being signalled by dimming alone. */ --lbai-disabled-text: #94a3b8; } /* ===================================================================================== 3. THE SUPERSEDING INK RULE ===================================================================================== One rule, token-driven, replacing header.php's literal near-white. `html` is present solely to raise specificity above (0,1,2) so this wins without depending on load order. Deliberately NOT applied to elements whose colour is legitimately owned by their own component: anything inside a saturated button, and anything that sets its own ink through a token below. Those cases re-point --lbai-text instead, which this rule then honours. ===================================================================================== */ /* Kept on ONE line deliberately: a newline between the compound and :is() is collapsed by formatters into `body.dark-mode:is(...)`, which asserts that is itself a heading and therefore matches nothing. Do not reflow these two selectors. */ html body.dark-mode *:is(h1, h2, h3, h4, h5, h6, p, span, label, li, dt, dd, th, td, legend, strong, b, em, small, time, output, figcaption, caption, summary, blockquote, address, cite, .ail-tab-btn, .ail-nav-item, .ail-quick-action-item):not([style*="background"]) { color: var(--lbai-text) !important; } /* ── The inline-surface half. REWRITTEN from measured data, not from an assumption. ── The first version of this rule said "an inline background means a pale chip, so force dark ink". Enumerating every inline background literal actually emitted across the real rendered homepage and all eight dashboard tabs disproved that: of 41 distinct values, only 14 are pale opaque. The rest are DARK (#2563eb, #8224e3), MID (#ea580c, #ef4444, #3b82f6, #22c55e, #10b981) or translucent tints that composite DARK over a dark card — and those translucent ones are the most common of all (rgba(16,185,129,.1) alone appears 208 times). Forcing dark ink onto that majority is what produced the measured 1.31:1 on a "Completed" chip, 1.32:1 on "Pending" and 1.05:1 on the Coupon Manager heading icon. So the default for an inline-background element is now the ordinary LIGHT ink, and dark ink is applied only to the enumerated pale literals below. */ html body.dark-mode *:is(h1, h2, h3, h4, h5, h6, p, span, label, li, dt, dd, strong, b, em, small, time)[style*="background"] { color: var(--lbai-text) !important; } /* ── INLINE PALE FILLS ARE REPAINTED, NOT RE-INKED. ── The earlier design kept these pale and forced a dark ink back over them. Measuring the real DOM showed why that cannot hold: THIS layer repaints many of the same elements dark through the surface contracts in sections 4 and 14, so two of our own rules ended up disagreeing about whether one element was pale or dark. The measured result was dark ink on a dark card — div.ail-vendor-listing-card inline background:#fff repainted #16213e, ink #0f172a 1.12:1 div.lbai-ver-summary inline background:#f0fdf4 repainted #16213e, ink #0f172a 1.12:1 div.ail-empty-state p inline background:#fff repainted #131c33, ink #0f172a 1.06:1 So the classification problem is removed instead of refined: every pale inline fill is REPAINTED to a dark equivalent that preserves its HUE, and the ink stays the ordinary light token. One consequence is worth stating plainly, because it is why this converges — once no surface behind text is pale, header.php's forced near-white becomes CORRECT everywhere rather than something every component has to fight. Enumerated from the 41 distinct inline background values actually emitted, not pattern-matched: a substring test like [style*="background:#f"] would also catch #f59e0b and #ef4444, which are mid-tone fills that must keep white ink. ORDER IS LOAD-BEARING. [style*="background:#fff"] is a substring of "#fff7ed" and "#ffffff", so the longer literals are declared AFTER the shorter one and win on source order at equal specificity. Do not sort these selectors. */ html body.dark-mode [style*="background:#fff"], html body.dark-mode [style*="background:#f1f5f9"], html body.dark-mode [style*="background:#f8fafc"], html body.dark-mode [style*="background:rgba(241, 245, 249, 0.8)"] { background-color: var(--lbai-surface) !important; border-color: var(--lbai-border) !important; --lbai-text: #f1f5f9; } html body.dark-mode [style*="background:#e5e7eb"] { background-color: var(--lbai-surface-2) !important; --lbai-text: #f1f5f9; } /* Hued pastels keep their hue as a translucent tint of the same colour. */ html body.dark-mode [style*="background:#f3f1ff"] { background-color: rgba(109, 94, 252, .20) !important; --lbai-text: #f1f5f9; } html body.dark-mode [style*="background:#eff6ff"], html body.dark-mode [style*="background:#eef4ff"] { background-color: rgba(59, 130, 246, .20) !important; --lbai-text: #f1f5f9; } html body.dark-mode [style*="background:#ecfdf3"], html body.dark-mode [style*="background:#dcfce7"], html body.dark-mode [style*="background:#f0fdf4"] { background-color: rgba(34, 197, 94, .18) !important; --lbai-text: #f1f5f9; } html body.dark-mode [style*="background:#fef2f2"] { background-color: rgba(239, 68, 68, .18) !important; --lbai-text: #f1f5f9; } html body.dark-mode [style*="background:#fef9c3"], html body.dark-mode [style*="background:#fff7ed"] { background-color: rgba(245, 158, 11, .18) !important; --lbai-text: #f1f5f9; } /* Longest-match last: #ffffff must not be caught by the #fff bucket's border colour only. */ html body.dark-mode [style*="background:#ffffff"] { background-color: var(--lbai-surface) !important; --lbai-text: #f1f5f9; } /* With no pale surface left behind text, the ink for these subtrees is the ordinary light token. Inline `color:` on descendants still has to be beaten, which is what the !important is for. */ html body.dark-mode [style*="background:#f"] *:not(a):not(svg):not(path):not([class*="status"]):not([class*="badge"]), html body.dark-mode [style*="background:#e5e7eb"] *:not(a):not(svg):not(path), html body.dark-mode [style*="background:rgba(241, 245, 249, 0.8)"] *:not(a):not(svg):not(path) { color: var(--lbai-text) !important; } /* Saturated inline fills that legitimately carry white: the glyph tiles inside the expiry badges, and anything a component has explicitly marked as an accent surface. */ html body.dark-mode .lpcf-badge-icon>span[style*="background"], html body.dark-mode .lbai-on-accent[style*="background"] { color: var(--lbai-text-on-accent) !important; } /* ── THE INLINE-BACKGROUND EXEMPTION, and why it is the important half ── `:not([style*="background"])` above is not a detail. Measurement showed that the templates and the plugin emit dozens of chips as inline-styled spans that pair their OWN pale background with their OWN dark ink — `style="background:#dcfce7;color:#15803d"` for a Confirmed badge, for example. Those pairs are already correct and internally consistent. header.php's forced rule broke exactly those, because it replaced the authored dark ink with near-white and left the pale background alone: measured 1.00:1 and 1.02:1 on the plugin's Confirmed and Pending badges. The general principle, applied once here instead of chased per component: AN ELEMENT THAT DECLARES ITS OWN SURFACE ALSO OWNS ITS OWN FOREGROUND. Excluding those elements repairs every inline chip in the product — including ones in files this layer never names, and ones added in future — without a single per-component override. Components that need their pairing changed for dark mode still get it below, by class, deliberately. */ /* ===================================================================================== 4. SURFACE CONTRACTS ===================================================================================== Each entry declares "this element is a surface of type X", and the inherited ink follows automatically for its entire subtree. This is the whole mechanism: one line per surface. ===================================================================================== */ /* ── 4a. Genuinely DARK surfaces in dark mode: keep the light ink, fix the background. ── */ body.dark-mode .ail-vendor-listing-card, body.dark-mode .ail-module-card, body.dark-mode .ail-result-card, body.dark-mode .ail-review-card, body.dark-mode .ail-booking-card, body.dark-mode .ail-noteworthy-card, body.dark-mode .ail-autocomplete-dropdown, body.dark-mode .ail-single-bottom-bar, body.dark-mode .lbaid-staff__card, body.dark-mode .lbaid-lead, body.dark-mode .lbaid-bk, body.dark-mode .lbaid-doc, body.dark-mode .lbaid-rev__card, body.dark-mode .lbaid-avail, body.dark-mode .lpcf-vm-card, body.dark-mode .lpcf-stat-card, body.dark-mode .lbai-ver-card { background-color: var(--lbai-surface) !important; border-color: var(--lbai-border) !important; --lbai-text: #f1f5f9; } /* Elevated: modals, drawers, dropdowns, sheets. One step lighter than a card so depth reads. */ body.dark-mode .ail-drawer-menu, body.dark-mode .lbaid-modal, body.dark-mode .lbaid-cxl__panel, body.dark-mode .lbaid-cxl__dialog, body.dark-mode .lbaid-bke__dialog, body.dark-mode .ail-booking-sheet, body.dark-mode .ail-modal-content, body.dark-mode .ail-sheet-content { background-color: var(--lbai-surface-2) !important; border-color: var(--lbai-border-strong) !important; --lbai-text: #f1f5f9; } /* Recessed: quote blocks, job rows, empty states, table zebra. */ body.dark-mode .lbaid-lead__msg, body.dark-mode .lbaid-lead__reply, body.dark-mode .lbaid-rev__reply, body.dark-mode .lbaid-staff__job, body.dark-mode .lbaid-avail__day, body.dark-mode .lbaid-empty, body.dark-mode .ail-empty-state, body.dark-mode .lbaid-crm__col { background-color: var(--lbai-surface-3) !important; border-color: var(--lbai-border) !important; --lbai-text: #f1f5f9; } /* ── 4b. Deliberately PALE surfaces that SURVIVE into dark mode. ── These keep their pastel fill on purpose (accent tiles, chips whose hue carries meaning). The one line re-points the inherited ink to dark, which is what the forced rule would otherwise have got wrong. This is the fix for "status labels become unreadable". */ /* NOTE: .ail-booking-status and the .lpcf-badge-* family are deliberately ABSENT here. They are owned by the status families in section 5, which give them a translucent tint of their own hue plus a light ink of the same hue. Listing them here as well produced a measured self-conflict — dark ink forced onto a translucent tint over a dark card, 1.61:1. */ /* REVISED. These were previously classified "pale surface, dark ink". Measurement on the real DOM showed that sections 14 and 16 of this file repaint several of them dark, so the pale classification contradicted the actual surface and produced dark-on-dark: div.lbaid-sub__feat.on #0f172a on #1e2946 1.24:1 "Call Button" span.lbaid-badge.blue #0f172a on #1d3463 1.47:1 "Top Rated" span.lbaid-mini__tag #0f172a on #1d3463 1.47:1 "New" span.lbaid-doc__badge.red #0f172a on #3d273f 1.33:1 "Expired" They now take a neutral dark tint with light ink; the hue variants in section 16 override this for the ones whose colour carries meaning. .lbai-on-pale is retained as the explicit opt-in for any surface that genuinely must stay pale in dark mode. */ body.dark-mode .lbaid-lead__tag, body.dark-mode .lbaid-doc__badge, body.dark-mode .lbaid-bk__badge, body.dark-mode .lbaid-badge, body.dark-mode .lbaid-mini__tag, body.dark-mode .lbaid-hero__plan, body.dark-mode .lbaid-ring__in, body.dark-mode .lbaid-ml-views, body.dark-mode .lbaid-sub__feat { background-color: var(--lbai-surface-2) !important; border-color: var(--lbai-border) !important; --lbai-text: #f1f5f9; color: #f1f5f9 !important; } /* The explicit opt-in for a surface that must stay pale. Nothing in the product currently uses it; it exists so a future pale-by-design surface has a supported way to declare itself. */ body.dark-mode .lbai-on-pale { --lbai-text: var(--lbai-text-on-pale); color: var(--lbai-text-on-pale) !important; } /* ── 4c. Saturated brand / status FILLS: the ink is white in both modes, by design. ── */ body.dark-mode .lbai-on-accent, body.dark-mode .lbaid-mltab.active, body.dark-mode .lbaid-mltab.active span, body.dark-mode .lbaid-arch__badge, body.dark-mode .lbaid-brand__logo, body.dark-mode .lbaid-sub__current, body.dark-mode .lbaid-sub__current span, body.dark-mode .lbaid-staff__vactivate, body.dark-mode .lbaid-lead__send, body.dark-mode .ail-tab-btn.active, body.dark-mode .lbaid-bnav__item.active, body.dark-mode .ail-action-btn, body.dark-mode .ail-action-btn span { --lbai-text: var(--lbai-text-on-accent); color: var(--lbai-text-on-accent) !important; } /* ===================================================================================== 5. STATUS AND BADGES — coordinated triples, never "white on whatever". ===================================================================================== Every status the product renders gets an ink + surface + border that are chosen together. The hue is preserved in both modes so the meaning of the colour never changes; only the pairing is made readable. Applied by the state class names the product already emits. ===================================================================================== */ .lbai-status, body.dark-mode .ail-booking-status, body.dark-mode .lbaid-staff__badge, body.dark-mode .lbaid-staff__verstate, body.dark-mode .lbaid-staff__invstate, body.dark-mode .lbaid-bk__badge, body.dark-mode .lbaid-doc__badge { border: 1px solid transparent; } /* Success family: Confirmed · Approved · Completed · Active · Verified · Success · Paid */ /* SCOPE NOTE for all four families below. These target the chip population that booking-card.css ALREADY gives a dark translucent surface (the .lbaid-staff__* badges) plus the .lbai-status--* utility classes. They are deliberately NOT applied to .ail-booking-status or the .lpcf-badge-* family: those keep their authored PALE fills, and the inline-surface rule in section 3 already gives them dark ink. Treating both populations identically was measurably wrong — a dark ink forced onto a translucent tint over a dark card measured 1.61:1. Two populations, two treatments, chosen by which surface the chip actually has. */ body.dark-mode .lbaid-staff__badge.is-life-active, body.dark-mode .lbaid-staff__badge.is-life-verified, body.dark-mode .lbaid-staff__badge.is-verified, body.dark-mode .lbaid-staffsum__item.is-active .lbaid-staffsum__n, body.dark-mode .lbai-status--success { background-color: var(--lbai-success-bg) !important; color: var(--lbai-success) !important; border-color: var(--lbai-success-bg) !important; --lbai-text: var(--lbai-success); } /* Warning family: Pending · Pending Approval · Pending Payment · Expires Soon · Under review */ body.dark-mode .lbaid-staff__badge.is-life-pending_verification, body.dark-mode .lbaid-staff__badge.is-noaccount, body.dark-mode .lbaid-staff__badge.is-notworkable, body.dark-mode .lbai-status--warning { background-color: var(--lbai-warning-bg) !important; color: var(--lbai-warning) !important; border-color: var(--lbai-warning-bg) !important; --lbai-text: var(--lbai-warning); } /* Danger family: Rejected · Cancelled · Expired · Blocked · Error · Failed */ body.dark-mode .lbaid-staff__badge.is-life-rejected, body.dark-mode .lbaid-staff__badge.is-life-blocked, body.dark-mode .lbaid-staff__badge.is-avail-busy, body.dark-mode .lbai-status--danger { background-color: var(--lbai-danger-bg) !important; color: var(--lbai-danger) !important; border-color: var(--lbai-danger-bg) !important; --lbai-text: var(--lbai-danger); } /* Info family: Under review · Processing · Queued · Sent · Draft-in-progress */ body.dark-mode .lbaid-staff__badge.is-life-under_review, body.dark-mode .lbaid-staff__badge.is-account, body.dark-mode .lbaid-staff__inv.is-sent .lbaid-staff__invstate, body.dark-mode .lbaid-staff__inv.is-queued .lbaid-staff__invstate, body.dark-mode .lbaid-staff__inv.is-processing .lbaid-staff__invstate, body.dark-mode .lbai-status--info { background-color: var(--lbai-info-bg) !important; color: var(--lbai-info) !important; border-color: var(--lbai-info-bg) !important; --lbai-text: var(--lbai-info); } /* Neutral family: Inactive · Disabled · Suspended · Draft · Off duty · unknown states. A default so a status the product adds later can never fall through to unreadable. */ body.dark-mode .lbaid-staff__badge, body.dark-mode .lbaid-staff__badge.is-avail-off_duty, body.dark-mode .lbaid-staff__verstate, body.dark-mode .lbaid-staff__invstate, body.dark-mode .lbai-status--neutral { /* !important is required on the BACKGROUND, not just the ink: these chips carry an inline pale fill from the template, and without it the light neutral ink landed on that pale fill at 1.10:1 — the one status the first pass still got wrong. */ background-color: var(--lbai-neutral-bg) !important; color: var(--lbai-neutral) !important; --lbai-text: var(--lbai-neutral); } /* The status-family rules above must beat the generic neutral default, so the specific state classes are restated once with an extra qualifier. */ body.dark-mode .lbaid-staff__badge.is-life-active, body.dark-mode .lbaid-staff__badge.is-life-verified, body.dark-mode .lbaid-staff__badge.is-verified { background-color: var(--lbai-success-bg) !important; color: var(--lbai-success) !important; } body.dark-mode .lbaid-staff__badge.is-life-pending_verification, body.dark-mode .lbaid-staff__badge.is-noaccount, body.dark-mode .lbaid-staff__badge.is-notworkable { background-color: var(--lbai-warning-bg) !important; color: var(--lbai-warning) !important; } body.dark-mode .lbaid-staff__badge.is-life-rejected, body.dark-mode .lbaid-staff__badge.is-life-blocked, body.dark-mode .lbaid-staff__badge.is-avail-busy { background-color: var(--lbai-danger-bg) !important; color: var(--lbai-danger) !important; } body.dark-mode .lbaid-staff__badge.is-life-under_review, body.dark-mode .lbaid-staff__badge.is-account { background-color: var(--lbai-info-bg) !important; color: var(--lbai-info) !important; } /* Alerts / notices, including the ones the templates emit with inline pastel styles. */ body.dark-mode .lbaid-tabnotice, body.dark-mode [role="alert"], body.dark-mode [role="status"] { background-color: var(--lbai-warning-bg) !important; color: var(--lbai-warning) !important; border-color: var(--lbai-warning-bg) !important; --lbai-text: var(--lbai-warning); } /* ===================================================================================== 6. ICONS ===================================================================================== The fix for disappearing icons is currentColor, not a blanket white. An icon inherits the ink of the surface it sits on, so the surface contracts above already place it correctly; these rules only make the inheritance explicit for the three mechanisms that break it — icon fonts with their own colour, inline SVG with a hardcoded fill, and pale accent tiles. ===================================================================================== */ /* Icon fonts follow the inherited ink. No !important: a component that deliberately colours its own glyph (a brand mark, a saturated CTA) keeps that colour. */ body.dark-mode .dashicons, body.dark-mode .dashicons-before::before, body.dark-mode [class^="dashicons-"], body.dark-mode .fa, body.dark-mode [class^="fa-"], body.dark-mode [class*=" fa-"] { color: inherit; } /* Inline SVG: honour currentColor. `fill="none"` and explicit stroke authoring are respected — only the default black/unset fill is redirected to the inherited ink. */ body.dark-mode svg:not([fill="none"]) { fill: currentColor; } body.dark-mode svg [fill="#000"], body.dark-mode svg [fill="#000000"], body.dark-mode svg [fill="black"] { fill: currentColor; } body.dark-mode svg [stroke="#000"], body.dark-mode svg [stroke="#000000"], body.dark-mode svg [stroke="black"] { stroke: currentColor; } /* Pale accent tiles that hold an icon: the tile takes a raised dark surface and the glyph takes the light ink, which is what a dark theme should do with an accent chip. */ body.dark-mode .lbaid-stat__ic, body.dark-mode .lbaid-qa__ic, body.dark-mode .lbaid-doc__ic, body.dark-mode .lbaid-doc__dl, body.dark-mode .lbaid-bk__icon, body.dark-mode .lbaid-lead__av, body.dark-mode .lbaid-arch__ic, body.dark-mode .lbaid-mini__av, body.dark-mode .ail-stat-icon, body.dark-mode .ail-cat-icon, body.dark-mode .lbaid-iconbtn { background-color: var(--lbai-surface-2) !important; color: var(--lbai-icon) !important; --lbai-text: var(--lbai-icon); } body.dark-mode .lbaid-stat__ic i, body.dark-mode .lbaid-qa__ic i, body.dark-mode .lbaid-doc__ic i, body.dark-mode .lbaid-doc__dl i, body.dark-mode .lbaid-bk__icon i, body.dark-mode .lbaid-arch__ic i, body.dark-mode .ail-stat-icon i, body.dark-mode .lbaid-iconbtn i { color: var(--lbai-icon) !important; } /* Muted / decorative glyphs keep a lower-emphasis ink rather than vanishing. */ body.dark-mode .lbaid-arch__chevron, body.dark-mode .ail-vl-placeholder i, body.dark-mode .lbaid-rev__cardstars .dashicons-star-empty { color: var(--lbai-icon-muted) !important; } /* ===================================================================================== 7. FORMS ===================================================================================== Field, label, placeholder, help text, validation and disabled state, each paired against the surface it actually renders on. The label rule matters most: header.php forces every