/* themes.css — R3D3Y3 / PRAXION theme system
* v1.2 — Default (current LeafFilter look) + R3D3Y3 STUDIOS + PRAXIONS +
* Daylight + LeafFilter Modern + multi-portal Agent stack infra.
* Theme is applied via body[data-theme="..."] attribute, controlled by themes.js.
* Restricted themes (r3d3eye, praxions, lf-modern) require email gate (jamesd.lhss@gmail.com).
*
* ╔═══════════════════════════════════════════════════════════════════════╗
* ║ THEME RULES — DO NOT VIOLATE ║
* ╠═══════════════════════════════════════════════════════════════════════╣
* ║ 1. EVERY theme follows the SAME layout for data and buttons. ║
* ║ Sections render in the same order on every theme. Buttons sit in ║
* ║ the same positions. Pills go in the same row. Only the VISUAL ║
* ║ treatment (colors, fonts, shadows, animation timing) changes. ║
* ║ ║
* ║ 2. Theme blocks are ALLOWED to override: ║
* ║ - CSS custom properties (--r3d-bg, --r3d-text, --r3d-accent, …) ║
* ║ - background / color / border-color ║
* ║ - font-family / font-weight ║
* ║ - box-shadow / filter ║
* ║ - animation timing / cubic-bezier curves ║
* ║ ║
* ║ 3. Theme blocks are FORBIDDEN from overriding: ║
* ║ - display / flex-direction / grid-template-* (= layout) ║
* ║ - order / flex-order (= section reordering) ║
* ║ - position: absolute/fixed for repositioning sections ║
* ║ - hiding/showing whole sections (use feature flags instead) ║
* ║ ║
* ║ 4. Structural layout variants (Timeline, Field Mode, etc.) are NOT ║
* ║ themes — they're separate "Card Layout" selectors under Display. ║
* ║ ║
* ║ 5. User-facing labels use Agent vocabulary. Never "scrape", never ║
* ║ "automation". Workers are: GTR AGENT, CRM AGENT, DOC AGENT, ║
* ║ INBOX AGENT. ║
* ╚═══════════════════════════════════════════════════════════════════════╝
*
* BENCHMARK: rev 00525-2ts is the stable revert point. If themes break dashboard
* behavior, revert via:
* gcloud run services update-traffic lh-masterlog-agent-app \
* --to-revisions=lh-masterlog-agent-app-00525-2ts=100 --region=us-central1
*/
:root {
--r3d-bg: #FFFFFF;
--r3d-card-bg: #FFFFFF;
--r3d-card-border: #E5E7EB;
--r3d-text: #1A1A1A;
--r3d-text-muted: #6B7280;
--r3d-accent: #43A047;
--r3d-accent-dim: #2E7D32;
--r3d-warn: #F59E0B;
--r3d-danger: #EF4444;
--r3d-success: #10B981;
--r3d-card-shadow: 0 1px 3px rgba(0,0,0,0.06);
--r3d-anim-expand: cubic-bezier(0.4, 0, 0.2, 1);
--r3d-anim-time: 220ms;
}
/* ── R3D3Y3 STUDIOS — dark cyber-noir (JAMES ONLY) ─────────────────────────── */
body[data-theme="r3d3eye"] {
/* R3D3Y3 internal palette */
--r3d-bg: #050810;
--r3d-card-bg: #0A0A0A;
--r3d-card-border: #1A1A1A;
--r3d-text: #F5F5F5;
--r3d-text-muted: #888888;
--r3d-accent: #FF1A1A;
--r3d-accent-dim: #B00000;
--r3d-warn: #FFC700;
--r3d-danger: #FF4444;
--r3d-success: #00E5FF;
--r3d-card-shadow: 0 0 12px rgba(255,26,26,0.10), 0 1px 2px rgba(0,0,0,0.5);
--r3d-anim-expand: cubic-bezier(0.8, 0, 0.2, 1);
--r3d-anim-time: 180ms;
/* Universal palette override — themes EVERY element that uses --lf-*
across all 7 templates (dashboard, leads, settings, estimator, etc.).
LeafFilter green → red. Gold → cyan. All backgrounds → near-black. */
--lf-darkest: #000000;
--lf-dark: #0A0A0A;
--lf-primary: #FF1A1A;
--lf-mid: #FF4444;
--lf-accent: #FF6666;
--lf-light: #1A1A1A;
--lf-pale: #050810;
--lf-gold: #00E5FF;
--lf-goldlt: rgba(0,229,255,0.12);
--bg: #050810;
--card: #0A0A0A;
--text: #F5F5F5;
--muted: #888888;
--border: #1A1A1A;
--red: #FF4444;
--orange: #FF8800;
--green: #00E5FF;
}
body[data-theme="r3d3eye"] {
background: var(--r3d-bg) !important;
color: var(--r3d-text) !important;
}
body[data-theme="r3d3eye"] .lead-card,
body[data-theme="r3d3eye"] .my-leads-card,
body[data-theme="r3d3eye"] .est-recent-card {
background: var(--r3d-card-bg) !important;
border: 1px solid var(--r3d-card-border) !important;
color: var(--r3d-text) !important;
box-shadow: var(--r3d-card-shadow) !important;
position: relative;
}
body[data-theme="r3d3eye"] .lead-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 3px;
height: 100%;
background: var(--r3d-accent);
box-shadow: 0 0 8px var(--r3d-accent);
}
body[data-theme="r3d3eye"] .lc-header {
border-bottom: 1px solid var(--r3d-card-border) !important;
background: linear-gradient(180deg, rgba(255,26,26,0.04) 0%, transparent 100%) !important;
}
body[data-theme="r3d3eye"] .lead-cust,
body[data-theme="r3d3eye"] .lc-cust-unknown {
color: var(--r3d-text) !important;
}
/* ── PRAXIONS — AI-forward holographic (JAMES ONLY) ────────────────────────── */
body[data-theme="proxion"],
body[data-theme="praxions"] {
/* PRAXIONS internal palette */
--r3d-bg: #0B0E14;
--r3d-card-bg: #131722;
--r3d-card-border: #1F2330;
--r3d-text: #F5F5F5;
--r3d-text-muted: #888888;
--r3d-accent: #00E5FF;
--r3d-accent-dim: #00B8CC;
--r3d-warn: #FBBF24;
/* Universal palette — LF green → cyan. Gold → purple. */
--lf-darkest: #0B0E14;
--lf-dark: #131722;
--lf-primary: #00E5FF;
--lf-mid: #33EEFF;
--lf-accent: #66F2FF;
--lf-light: #1F2330;
--lf-pale: #0B0E14;
--lf-gold: #C4B5FD;
--lf-goldlt: rgba(196,181,253,0.15);
--bg: #0B0E14;
--card: #131722;
--text: #F5F5F5;
--muted: #888888;
--border: #1F2330;
--red: #FF4444;
--orange: #FBBF24;
--green: #34D399;
--_palette_END: 0; /* end-of-palette sentinel for diffability */
--r3d-danger: #FF1A1A;
--r3d-success: #34D399;
--r3d-card-shadow: 0 0 16px rgba(0,229,255,0.08), 0 1px 2px rgba(0,0,0,0.5);
--r3d-anim-expand: cubic-bezier(0.16, 1, 0.3, 1);
--r3d-anim-time: 260ms;
}
body[data-theme="proxion"],
body[data-theme="praxions"] {
background: var(--r3d-bg) !important;
color: var(--r3d-text) !important;
}
body[data-theme="proxion"] .lead-card,
body[data-theme="praxions"] .lead-card {
background: var(--r3d-card-bg) !important;
border: 1px solid var(--r3d-card-border) !important;
color: var(--r3d-text) !important;
box-shadow: var(--r3d-card-shadow) !important;
position: relative;
}
body[data-theme="proxion"] .lead-card::before,
body[data-theme="praxions"] .lead-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, #FF1A1A 0%, #00E5FF 100%);
}
body[data-theme="proxion"] .lc-header,
body[data-theme="praxions"] .lc-header {
border-bottom: 1px solid var(--r3d-card-border) !important;
}
body[data-theme="proxion"] .lead-cust,
body[data-theme="praxions"] .lead-cust {
color: var(--r3d-text) !important;
}
/* ── DAYLIGHT — clean bright (everyone) ────────────────────────────────────── */
body[data-theme="daylight"] {
/* DAYLIGHT internal palette */
--r3d-bg: #F7F6F2;
--r3d-card-bg: #FFFFFF;
--r3d-card-border: #EFEEE8;
--r3d-text: #1A1A1A;
--r3d-text-muted: #6B7280;
--r3d-accent: #3B82F6;
--r3d-accent-dim: #1D4ED8;
--r3d-card-shadow: 0 1px 3px rgba(0,0,0,0.05);
/* Universal palette — LF green → blue. Stays light. Clean SaaS feel. */
--lf-darkest: #1E3A8A;
--lf-dark: #1D4ED8;
--lf-primary: #3B82F6;
--lf-mid: #60A5FA;
--lf-accent: #93C5FD;
--lf-light: #DBEAFE;
--lf-pale: #EFF6FF;
--lf-gold: #F59E0B;
--lf-goldlt: #FEF3C7;
--bg: #F8FAFC;
--card: #FFFFFF;
--text: #1F2937;
--muted: #6B7280;
--border: #E5E7EB;
}
body[data-theme="daylight"] {
background: var(--r3d-bg) !important;
}
body[data-theme="daylight"] .lead-card {
background: var(--r3d-card-bg) !important;
border: 1px solid var(--r3d-card-border) !important;
box-shadow: var(--r3d-card-shadow) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
BUILD #115b — Six additional themes per rep request.
All themes share the same layout + button placement (universal rule:
"themes change colors/textures only, not structure"). Each block
overrides the --lf-* + universal vars (--bg/--card/--text/--muted/
--border) and the lead-card surface so cards adopt the palette.
═══════════════════════════════════════════════════════════════════════════ */
/* 🌑 MIDNIGHT — deep navy/charcoal professional dark */
body[data-theme="midnight"] {
--lf-darkest: #0F172A;
--lf-dark: #1E293B;
--lf-primary: #334155;
--lf-mid: #475569;
--lf-accent: #38BDF8;
--lf-light: #1E40AF;
--lf-pale: #0F172A;
--lf-gold: #FACC15;
--lf-goldlt: #422006;
--bg: #020617;
--card: #0F172A;
--text: #E2E8F0;
--muted: #94A3B8;
--border: #1E293B;
background: #020617 !important; color: #E2E8F0 !important;
}
body[data-theme="midnight"] .lead-card,
body[data-theme="midnight"] .my-leads-card,
body[data-theme="midnight"] .est-recent-card {
background: #0F172A !important;
border: 1px solid #1E293B !important;
color: #E2E8F0 !important;
box-shadow: 0 4px 18px rgba(0,0,0,0.35) !important;
}
/* build #115d — Header colors INTENTIONALLY left alone — result-type tint
(.lc-header.demo/.nodemo/.nosale/.canceled, default sale-green) must
win across ALL themes so reps can read result at a glance. */
/* 🌅 SUNSET — warm coral/orange */
body[data-theme="sunset"] {
--lf-darkest: #7C2D12;
--lf-dark: #C2410C;
--lf-primary: #EA580C;
--lf-mid: #F97316;
--lf-accent: #FB923C;
--lf-light: #FED7AA;
--lf-pale: #FFF7ED;
--lf-gold: #FCD34D;
--lf-goldlt: #FEF3C7;
--bg: #FFF7ED;
--card: #FFFFFF;
--text: #431407;
--muted: #9A3412;
--border: #FED7AA;
background: #FFF7ED !important; color: #431407 !important;
}
body[data-theme="sunset"] .lead-card,
body[data-theme="sunset"] .my-leads-card,
body[data-theme="sunset"] .est-recent-card {
background: #FFFFFF !important;
border: 1px solid #FED7AA !important;
box-shadow: 0 4px 16px rgba(234,88,12,0.12) !important;
}
/* lc-header omitted — result-type tint must win across themes. */
/* 🌊 OCEAN — cool teal/aqua */
body[data-theme="ocean"] {
--lf-darkest: #134E4A;
--lf-dark: #0F766E;
--lf-primary: #14B8A6;
--lf-mid: #2DD4BF;
--lf-accent: #5EEAD4;
--lf-light: #CCFBF1;
--lf-pale: #F0FDFA;
--lf-gold: #06B6D4;
--lf-goldlt: #CFFAFE;
--bg: #ECFEFF;
--card: #FFFFFF;
--text: #0F2A2A;
--muted: #475569;
--border: #99F6E4;
background: #ECFEFF !important; color: #0F2A2A !important;
}
body[data-theme="ocean"] .lead-card,
body[data-theme="ocean"] .my-leads-card,
body[data-theme="ocean"] .est-recent-card {
background: #FFFFFF !important;
border: 1px solid #99F6E4 !important;
box-shadow: 0 4px 16px rgba(20,184,166,0.12) !important;
}
/* lc-header omitted — result-type tint must win across themes. */
/* 🍂 AUTUMN — burnt orange + warm brown */
body[data-theme="autumn"] {
--lf-darkest: #44190B;
--lf-dark: #92400E;
--lf-primary: #B45309;
--lf-mid: #D97706;
--lf-accent: #F59E0B;
--lf-light: #FEF3C7;
--lf-pale: #FFFBEB;
--lf-gold: #FBBF24;
--lf-goldlt: #FEF3C7;
--bg: #FAF4E6;
--card: #FFFFFF;
--text: #3F1F0A;
--muted: #78350F;
--border: #FDE68A;
background: #FAF4E6 !important; color: #3F1F0A !important;
}
body[data-theme="autumn"] .lead-card,
body[data-theme="autumn"] .my-leads-card,
body[data-theme="autumn"] .est-recent-card {
background: #FFFFFF !important;
border: 1px solid #FDE68A !important;
box-shadow: 0 4px 16px rgba(180,83,9,0.12) !important;
}
/* lc-header omitted — result-type tint must win across themes. */
/* 🌿 SAGE — muted desaturated green, calm + professional */
body[data-theme="sage"] {
--lf-darkest: #1F2A1F;
--lf-dark: #4D6A4D;
--lf-primary: #688F68;
--lf-mid: #8FAE8F;
--lf-accent: #B5C9B5;
--lf-light: #DDE7DD;
--lf-pale: #EEF4EE;
--lf-gold: #C7A86A;
--lf-goldlt: #F2E8D2;
--bg: #F5F7F3;
--card: #FFFFFF;
--text: #1A2A1A;
--muted: #677867;
--border: #D7E0D2;
background: #F5F7F3 !important; color: #1A2A1A !important;
}
body[data-theme="sage"] .lead-card,
body[data-theme="sage"] .my-leads-card,
body[data-theme="sage"] .est-recent-card {
background: #FFFFFF !important;
border: 1px solid #D7E0D2 !important;
box-shadow: 0 2px 8px rgba(104,143,104,0.08) !important;
}
/* lc-header omitted — result-type tint must win across themes. */
/* ⚪ MINIMAL — monochrome ink-on-paper */
body[data-theme="minimal"] {
--lf-darkest: #000000;
--lf-dark: #1A1A1A;
--lf-primary: #2E2E2E;
--lf-mid: #5C5C5C;
--lf-accent: #8A8A8A;
--lf-light: #E5E5E5;
--lf-pale: #F5F5F5;
--lf-gold: #FBBF24;
--lf-goldlt: #FEF3C7;
--bg: #FFFFFF;
--card: #FFFFFF;
--text: #0A0A0A;
--muted: #6B6B6B;
--border: #E5E5E5;
background: #FFFFFF !important; color: #0A0A0A !important;
}
body[data-theme="minimal"] .lead-card,
body[data-theme="minimal"] .my-leads-card,
body[data-theme="minimal"] .est-recent-card {
background: #FFFFFF !important;
border: 1px solid #E5E5E5 !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
/* lc-header omitted — result-type tint must win across themes. */
/* ═══════════════════════════════════════════════════════════════════════════
BUILD #115c — Themes from yesterday's mockups (blueprint, glass,
monolith, terminal) ported into the live theme system. Layout stays
universal — only colors / textures / borders change.
═══════════════════════════════════════════════════════════════════════════ */
/* 📐 BLUEPRINT — drafting-table navy + amber + cyan accents */
body[data-theme="blueprint"] {
--lf-darkest: #051527;
--lf-dark: #0A2540;
--lf-primary: #1E3A5F;
--lf-mid: #60A5FA;
--lf-accent: #93C5FD;
--lf-light: #1E40AF;
--lf-pale: #0A2540;
--lf-gold: #FBBF24;
--lf-goldlt: #422006;
--bg: #0A2540;
--card: #082038;
--text: #E0F2FF;
--muted: #93C5FD;
--border: #1E3A5F;
background:
linear-gradient(rgba(96,165,250,0.06) 1px, transparent 1px) 0 0 / 20px 20px,
linear-gradient(90deg, rgba(96,165,250,0.06) 1px, transparent 1px) 0 0 / 20px 20px,
#0A2540 !important;
color: #E0F2FF !important;
}
body[data-theme="blueprint"] .lead-card,
body[data-theme="blueprint"] .my-leads-card,
body[data-theme="blueprint"] .est-recent-card {
background: rgba(8,32,56,0.92) !important;
border: 1.5px solid #60A5FA !important;
color: #E0F2FF !important;
box-shadow: 0 0 0 1px rgba(96,165,250,0.1), 0 4px 20px rgba(0,0,0,0.4) !important;
}
/* lc-header omitted — result-type tint must win across themes. */
/* 💎 GLASS — frosted glass with purple/cyan gradient bg */
body[data-theme="glass"] {
--lf-darkest: #1A0F2E;
--lf-dark: #2D1B47;
--lf-primary: #6D28D9;
--lf-mid: #A855F7;
--lf-accent: #C4B5FD;
--lf-light: #3B2A5C;
--lf-pale: #1A0F2E;
--lf-gold: #22D3EE;
--lf-goldlt: #0E7490;
--bg: #1A0F2E;
--card: rgba(20, 20, 35, 0.55);
--text: #F5F5F5;
--muted: #C4B5FD;
--border: rgba(168, 85, 247, 0.4);
background: linear-gradient(135deg, #1A0F2E 0%, #0F2540 40%, #0F2A2E 100%) !important;
color: #F5F5F5 !important;
}
body[data-theme="glass"] .lead-card,
body[data-theme="glass"] .my-leads-card,
body[data-theme="glass"] .est-recent-card {
background: rgba(20,20,35,0.55) !important;
border: 1px solid rgba(168,85,247,0.4) !important;
color: #F5F5F5 !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
/* lc-header omitted — result-type tint must win across themes. */
/* ⬛ MONOLITH — pure black + grey + white, ultra-clean editorial */
body[data-theme="monolith"] {
--lf-darkest: #000000;
--lf-dark: #0A0A0A;
--lf-primary: #1A1A1A;
--lf-mid: #2A2A2A;
--lf-accent: #F5F5F5;
--lf-light: #2A2A2A;
--lf-pale: #0A0A0A;
--lf-gold: #F5F5F5;
--lf-goldlt: #2A2A2A;
--bg: #1A1A1A;
--card: #0A0A0A;
--text: #F5F5F5;
--muted: #888888;
--border: #2A2A2A;
background: #1A1A1A !important; color: #F5F5F5 !important;
}
body[data-theme="monolith"] .lead-card,
body[data-theme="monolith"] .my-leads-card,
body[data-theme="monolith"] .est-recent-card {
background: #0A0A0A !important;
border: 1px solid #2A2A2A !important;
color: #F5F5F5 !important;
box-shadow: none !important;
border-radius: 0 !important;
transition: border-color 0.15s !important;
}
body[data-theme="monolith"] .lead-card:hover { border-color: #F5F5F5 !important; }
/* lc-header omitted — result-type tint must win across themes. */
/* 🖥️ TERMINAL — CRT-green monospace hacker chic */
body[data-theme="terminal"] {
--lf-darkest: #050805;
--lf-dark: #0A0F0A;
--lf-primary: #001A00;
--lf-mid: #008833;
--lf-accent: #00FF66;
--lf-light: #00331A;
--lf-pale: #0A0F0A;
--lf-gold: #FFAA00;
--lf-goldlt: #FFCC44;
--bg: #0A0F0A;
--card: #050805;
--text: #00FF66;
--muted: #00AA44;
--border: #00FF66;
background: #0A0F0A !important; color: #00FF66 !important;
font-family: 'JetBrains Mono', 'Courier New', monospace !important;
}
body[data-theme="terminal"] .lead-card,
body[data-theme="terminal"] .my-leads-card,
body[data-theme="terminal"] .est-recent-card {
background: #050805 !important;
border: 1.5px solid #00FF66 !important;
color: #00FF66 !important;
border-radius: 0 !important;
box-shadow: 0 0 12px rgba(0,255,102,0.15), inset 0 0 18px rgba(0,255,102,0.03) !important;
font-family: 'JetBrains Mono', 'Courier New', monospace !important;
}
/* lc-header omitted — result-type tint must win across themes. */
body[data-theme="terminal"] button {
background: transparent !important;
border: 1.5px solid #00FF66 !important;
color: #00FF66 !important;
font-family: 'JetBrains Mono', 'Courier New', monospace !important;
letter-spacing: 1.5px !important;
}
body[data-theme="terminal"] button:hover { background: #00FF66 !important; color: #050805 !important; }
/* ── Smooth theme-switch transitions (all themes) ────────────────────────────
Apply a short fade when CSS variables update so swapping themes via the
floating picker doesn't snap-change the whole page. Limit to color/bg
properties so layouts don't animate. */
body[data-theme] {
transition: background-color 220ms ease, color 220ms ease;
}
body[data-theme] .lead-card,
body[data-theme] .my-leads-card,
body[data-theme] .lc-header,
body[data-theme] .lc-body,
body[data-theme] .lc-body-wrap,
body[data-theme] button,
body[data-theme] input,
body[data-theme] select,
body[data-theme] textarea,
body[data-theme] .nav-btn,
body[data-theme] .quick-btn,
body[data-theme] .agent-btn,
body[data-theme] .est-card,
body[data-theme] .rank-card,
body[data-theme] .stat-card,
body[data-theme] .tab-btn,
body[data-theme] .tab-panel,
body[data-theme] .settings-section,
body[data-theme] .settings-section-header {
transition:
background-color 220ms ease,
color 220ms ease,
border-color 220ms ease,
box-shadow 220ms ease;
}
/* ── Inline-style fallback overrides for dark themes ──────────────────────────
Some templates use inline `style="background:#1B5E20"` / hardcoded
LeafFilter green / pale-green text and don't read CSS variables. In dark
themes those create unreadable light islands. These rules use attribute-
substring matching to catch the most common offenders. !important required
because inline styles outrank normal CSS specificity. */
body[data-theme="r3d3eye"] [style*="background:#fff"],
body[data-theme="r3d3eye"] [style*="background: #fff"],
body[data-theme="r3d3eye"] [style*="background:#FFFFFF"],
body[data-theme="r3d3eye"] [style*="background:#FFF"],
body[data-theme="praxions"] [style*="background:#fff"],
body[data-theme="praxions"] [style*="background: #fff"],
body[data-theme="praxions"] [style*="background:#FFFFFF"],
body[data-theme="praxions"] [style*="background:#FFF"] {
background-color: var(--card) !important;
color: var(--text) !important;
}
body[data-theme="r3d3eye"] [style*="background:#1B5E20"],
body[data-theme="r3d3eye"] [style*="background:#2E7D32"],
body[data-theme="r3d3eye"] [style*="background:#388E3C"],
body[data-theme="r3d3eye"] [style*="background:#43A047"],
body[data-theme="r3d3eye"] [style*="background:#0d3a14"] {
background: linear-gradient(135deg, var(--lf-darkest), var(--lf-primary)) !important;
}
body[data-theme="praxions"] [style*="background:#1B5E20"],
body[data-theme="praxions"] [style*="background:#2E7D32"],
body[data-theme="praxions"] [style*="background:#388E3C"],
body[data-theme="praxions"] [style*="background:#43A047"],
body[data-theme="praxions"] [style*="background:#0d3a14"] {
background: linear-gradient(135deg, var(--lf-darkest), var(--lf-primary)) !important;
}
/* Pale-green inline backgrounds (very common in chip/pill styles) */
body[data-theme="r3d3eye"] [style*="background:#E8F5E9"],
body[data-theme="r3d3eye"] [style*="background:#F1F8E9"],
body[data-theme="r3d3eye"] [style*="background:#F1F8F4"],
body[data-theme="r3d3eye"] [style*="background:#FFFDE7"],
body[data-theme="praxions"] [style*="background:#E8F5E9"],
body[data-theme="praxions"] [style*="background:#F1F8E9"],
body[data-theme="praxions"] [style*="background:#F1F8F4"],
body[data-theme="praxions"] [style*="background:#FFFDE7"] {
background-color: rgba(255,255,255,0.05) !important;
border-color: var(--border) !important;
}
/* Dark green text in inline styles — flip to lighter accent for legibility */
body[data-theme="r3d3eye"] [style*="color:#1B5E20"],
body[data-theme="r3d3eye"] [style*="color:#2E7D32"],
body[data-theme="r3d3eye"] [style*="color: #1B5E20"] {
color: var(--lf-primary) !important;
}
body[data-theme="praxions"] [style*="color:#1B5E20"],
body[data-theme="praxions"] [style*="color:#2E7D32"],
body[data-theme="praxions"] [style*="color: #1B5E20"] {
color: var(--lf-primary) !important;
}
/* Page-level body background — some templates set this inline */
body[data-theme="r3d3eye"] { color-scheme: dark; }
body[data-theme="proxion"],
body[data-theme="praxions"] { color-scheme: dark; }
body[data-theme="midnight"] { color-scheme: dark; }
body[data-theme="monolith"] { color-scheme: dark; }
body[data-theme="terminal"] { color-scheme: dark; }
body[data-theme="blueprint"] { color-scheme: dark; }
body[data-theme="glass"] { color-scheme: dark; }
/* ═══════════════════════════════════════════════════════════════════════════
BUILD #115d — Contrast pass for ALL dark themes (calendar, ranking
cards, info pills, tax tables, etc.). Catches inline-style hardcoded
light backgrounds / dark text that became unreadable on the new dark
themes. Mirrors the existing r3d3eye / praxions rules at lines 583+
but folds in midnight / monolith / terminal / blueprint / glass.
═══════════════════════════════════════════════════════════════════════════ */
/* White / near-white inline backgrounds → use theme card background */
body[data-theme="midnight"] [style*="background:#fff"],
body[data-theme="midnight"] [style*="background: #fff"],
body[data-theme="midnight"] [style*="background:#FFFFFF"],
body[data-theme="midnight"] [style*="background:#FFF"],
body[data-theme="monolith"] [style*="background:#fff"],
body[data-theme="monolith"] [style*="background: #fff"],
body[data-theme="monolith"] [style*="background:#FFFFFF"],
body[data-theme="monolith"] [style*="background:#FFF"],
body[data-theme="terminal"] [style*="background:#fff"],
body[data-theme="terminal"] [style*="background: #fff"],
body[data-theme="terminal"] [style*="background:#FFFFFF"],
body[data-theme="terminal"] [style*="background:#FFF"],
body[data-theme="blueprint"] [style*="background:#fff"],
body[data-theme="blueprint"] [style*="background: #fff"],
body[data-theme="blueprint"] [style*="background:#FFFFFF"],
body[data-theme="blueprint"] [style*="background:#FFF"],
body[data-theme="glass"] [style*="background:#fff"],
body[data-theme="glass"] [style*="background: #fff"],
body[data-theme="glass"] [style*="background:#FFFFFF"],
body[data-theme="glass"] [style*="background:#FFF"] {
background-color: var(--card) !important;
color: var(--text) !important;
}
/* Pale-green inline backgrounds (chip / pill / cal-day cell defaults) */
body[data-theme="midnight"] [style*="background:#E8F5E9"],
body[data-theme="midnight"] [style*="background:#F1F8E9"],
body[data-theme="midnight"] [style*="background:#F1F8F4"],
body[data-theme="midnight"] [style*="background:#C8E6C9"],
body[data-theme="monolith"] [style*="background:#E8F5E9"],
body[data-theme="monolith"] [style*="background:#F1F8E9"],
body[data-theme="monolith"] [style*="background:#F1F8F4"],
body[data-theme="monolith"] [style*="background:#C8E6C9"],
body[data-theme="terminal"] [style*="background:#E8F5E9"],
body[data-theme="terminal"] [style*="background:#F1F8E9"],
body[data-theme="terminal"] [style*="background:#F1F8F4"],
body[data-theme="terminal"] [style*="background:#C8E6C9"],
body[data-theme="blueprint"] [style*="background:#E8F5E9"],
body[data-theme="blueprint"] [style*="background:#F1F8E9"],
body[data-theme="blueprint"] [style*="background:#F1F8F4"],
body[data-theme="blueprint"] [style*="background:#C8E6C9"],
body[data-theme="glass"] [style*="background:#E8F5E9"],
body[data-theme="glass"] [style*="background:#F1F8E9"],
body[data-theme="glass"] [style*="background:#F1F8F4"],
body[data-theme="glass"] [style*="background:#C8E6C9"] {
background-color: rgba(255,255,255,0.05) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
/* Dark-green text in inline styles → flip to theme accent so it's readable */
body[data-theme="midnight"] [style*="color:#1B5E20"],
body[data-theme="midnight"] [style*="color:#2E7D32"],
body[data-theme="midnight"] [style*="color: #1B5E20"],
body[data-theme="monolith"] [style*="color:#1B5E20"],
body[data-theme="monolith"] [style*="color:#2E7D32"],
body[data-theme="monolith"] [style*="color: #1B5E20"],
body[data-theme="terminal"] [style*="color:#1B5E20"],
body[data-theme="terminal"] [style*="color:#2E7D32"],
body[data-theme="terminal"] [style*="color: #1B5E20"],
body[data-theme="blueprint"] [style*="color:#1B5E20"],
body[data-theme="blueprint"] [style*="color:#2E7D32"],
body[data-theme="blueprint"] [style*="color: #1B5E20"],
body[data-theme="glass"] [style*="color:#1B5E20"],
body[data-theme="glass"] [style*="color:#2E7D32"],
body[data-theme="glass"] [style*="color: #1B5E20"] {
color: var(--lf-accent) !important;
}
/* Pale-green / mint borders → theme border */
body[data-theme="midnight"] [style*="border:1.5px solid #C8E6C9"],
body[data-theme="midnight"] [style*="border:1px solid #C8E6C9"],
body[data-theme="midnight"] [style*="border-color:#C8E6C9"],
body[data-theme="monolith"] [style*="border:1.5px solid #C8E6C9"],
body[data-theme="monolith"] [style*="border:1px solid #C8E6C9"],
body[data-theme="monolith"] [style*="border-color:#C8E6C9"],
body[data-theme="terminal"] [style*="border:1.5px solid #C8E6C9"],
body[data-theme="terminal"] [style*="border:1px solid #C8E6C9"],
body[data-theme="terminal"] [style*="border-color:#C8E6C9"],
body[data-theme="blueprint"] [style*="border:1.5px solid #C8E6C9"],
body[data-theme="blueprint"] [style*="border:1px solid #C8E6C9"],
body[data-theme="blueprint"] [style*="border-color:#C8E6C9"],
body[data-theme="glass"] [style*="border:1.5px solid #C8E6C9"],
body[data-theme="glass"] [style*="border:1px solid #C8E6C9"],
body[data-theme="glass"] [style*="border-color:#C8E6C9"] {
border-color: var(--border) !important;
}
/* Calendar containers and ranking cards — push the universal --bg/--card/
--text values so they're not stuck on hardcoded white/green. The calendar
selectors below match the dashboard's calendar layout. */
body[data-theme="midnight"] .cal-wrap,
body[data-theme="midnight"] .calendar,
body[data-theme="midnight"] .cal-day,
body[data-theme="midnight"] .rank-card,
body[data-theme="midnight"] .stat-card,
body[data-theme="midnight"] .est-card,
body[data-theme="monolith"] .cal-wrap,
body[data-theme="monolith"] .calendar,
body[data-theme="monolith"] .cal-day,
body[data-theme="monolith"] .rank-card,
body[data-theme="monolith"] .stat-card,
body[data-theme="monolith"] .est-card,
body[data-theme="terminal"] .cal-wrap,
body[data-theme="terminal"] .calendar,
body[data-theme="terminal"] .cal-day,
body[data-theme="terminal"] .rank-card,
body[data-theme="terminal"] .stat-card,
body[data-theme="terminal"] .est-card,
body[data-theme="blueprint"] .cal-wrap,
body[data-theme="blueprint"] .calendar,
body[data-theme="blueprint"] .cal-day,
body[data-theme="blueprint"] .rank-card,
body[data-theme="blueprint"] .stat-card,
body[data-theme="blueprint"] .est-card,
body[data-theme="glass"] .cal-wrap,
body[data-theme="glass"] .calendar,
body[data-theme="glass"] .cal-day,
body[data-theme="glass"] .rank-card,
body[data-theme="glass"] .stat-card,
body[data-theme="glass"] .est-card {
background-color: var(--card) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
/* Quantified by live-HTML audit (2026-05-20 — 18 occurrences) — light-green
borders in inline styles. Map to themed border in dark themes. */
body[data-theme="r3d3eye"] [style*="border:1.5px solid #C8E6C9"],
body[data-theme="r3d3eye"] [style*="border:1px solid #C8E6C9"],
body[data-theme="r3d3eye"] [style*="border: 1px solid #C8E6C9"],
body[data-theme="r3d3eye"] [style*="border-color:#C8E6C9"],
body[data-theme="praxions"] [style*="border:1.5px solid #C8E6C9"],
body[data-theme="praxions"] [style*="border:1px solid #C8E6C9"],
body[data-theme="praxions"] [style*="border: 1px solid #C8E6C9"],
body[data-theme="praxions"] [style*="border-color:#C8E6C9"] {
border-color: var(--border) !important;
}
/* Pale-yellow / pale-orange chip backgrounds (warning/info pills) — keep the
warm tint but transparent in dark themes for legibility. */
body[data-theme="r3d3eye"] [style*="background:#FFF8E1"],
body[data-theme="r3d3eye"] [style*="background:#FFE0B2"],
body[data-theme="r3d3eye"] [style*="background:#FFF3E0"],
body[data-theme="r3d3eye"] [style*="background:#FFFDE7"],
body[data-theme="r3d3eye"] [style*="background:#FFF9C4"],
body[data-theme="praxions"] [style*="background:#FFF8E1"],
body[data-theme="praxions"] [style*="background:#FFE0B2"],
body[data-theme="praxions"] [style*="background:#FFF3E0"],
body[data-theme="praxions"] [style*="background:#FFFDE7"],
body[data-theme="praxions"] [style*="background:#FFF9C4"] {
background-color: rgba(255, 199, 0, 0.10) !important;
border-color: rgba(255, 199, 0, 0.35) !important;
}
/* Pale-red / error backgrounds — keep red tint but dark-mode friendly. */
body[data-theme="r3d3eye"] [style*="background:#FFEBEE"],
body[data-theme="r3d3eye"] [style*="background:#FCE4EC"],
body[data-theme="praxions"] [style*="background:#FFEBEE"],
body[data-theme="praxions"] [style*="background:#FCE4EC"] {
background-color: rgba(239, 68, 68, 0.12) !important;
border-color: rgba(239, 68, 68, 0.35) !important;
}
/* Pale-blue backgrounds (info pills) */
body[data-theme="r3d3eye"] [style*="background:#E3F2FD"],
body[data-theme="r3d3eye"] [style*="background:#BBDEFB"],
body[data-theme="praxions"] [style*="background:#E3F2FD"],
body[data-theme="praxions"] [style*="background:#BBDEFB"] {
background-color: rgba(96, 165, 250, 0.12) !important;
border-color: rgba(96, 165, 250, 0.35) !important;
}
/* Brown / warm text (commonly on yellow chip backgrounds) — flip to gold
so it stays legible on the now-tinted dark backgrounds. */
body[data-theme="r3d3eye"] [style*="color:#5D4037"],
body[data-theme="r3d3eye"] [style*="color:#3E2723"],
body[data-theme="r3d3eye"] [style*="color:#4E342E"],
body[data-theme="r3d3eye"] [style*="color: #5D4037"],
body[data-theme="praxions"] [style*="color:#5D4037"],
body[data-theme="praxions"] [style*="color:#3E2723"],
body[data-theme="praxions"] [style*="color:#4E342E"],
body[data-theme="praxions"] [style*="color: #5D4037"] {
color: var(--lf-gold) !important;
}
/* Inline-style background:linear-gradient(...#1B5E20...) catches the LH
primary green gradient pattern used in many cards. Already covered above,
but adding 0d3a14 (the darker green) for the header gradient explicitly. */
body[data-theme="r3d3eye"] [style*="linear-gradient(135deg,#0d3a14"],
body[data-theme="r3d3eye"] [style*="linear-gradient(135deg, #0d3a14"],
body[data-theme="praxions"] [style*="linear-gradient(135deg,#0d3a14"],
body[data-theme="praxions"] [style*="linear-gradient(135deg, #0d3a14"] {
background: linear-gradient(135deg, var(--lf-darkest), var(--lf-primary)) !important;
}
/* Text:#fff hardcoded — keep white in dark themes (already readable);
in light themes (lf-modern/daylight) it's normal. No override needed
for color:#fff specifically; just listed here so future contributors
don't waste time adding one. */
/* Light-mid grey text (#555 / #888 / #bbb / #aaa) reads OK on either light
or dark backgrounds — no override needed. */
/* ── Stacked-paper sticky headers for leads page (all themes) ──────────────── */
body[data-theme] .leads-list .lead-card .lc-header {
position: sticky;
top: var(--r3d-sticky-top, 60px);
z-index: 2;
transition: background var(--r3d-anim-time) var(--r3d-anim-expand);
}
/* Card-expanded animation (works with existing toggleLeadCard) */
body[data-theme] .lead-card .lc-body-wrap {
max-height: 0;
overflow: hidden;
transition: max-height var(--r3d-anim-time) var(--r3d-anim-expand),
opacity var(--r3d-anim-time) var(--r3d-anim-expand);
opacity: 0;
}
body[data-theme] .lead-card.card-expanded .lc-body-wrap {
max-height: 4000px;
opacity: 1;
}
/* ── Theme picker (floating, James only — injected by themes.js) ──────────────
Picker accents the CURRENT theme's primary color so it visually belongs no
matter which theme is active. Per-theme overrides below tune the glow. */
#r3d3-theme-picker {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 9999;
display: flex;
align-items: center;
gap: 8px;
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--lf-primary, rgba(255, 26, 26, 0.3));
border-radius: 999px;
padding: 6px 12px 6px 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 12px rgba(255, 26, 26, 0.15);
font-family: -apple-system, 'Segoe UI', sans-serif;
font-size: 12px;
user-select: none;
transition: border-color 220ms ease, box-shadow 220ms ease;
}
body[data-theme="lf-modern"] #r3d3-theme-picker,
body[data-theme="daylight"] #r3d3-theme-picker {
background: rgba(255, 255, 255, 0.92);
border-color: var(--lf-primary);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 12px rgba(0, 0, 0, 0.05);
}
body[data-theme="lf-modern"] #r3d3-theme-picker .lbl,
body[data-theme="daylight"] #r3d3-theme-picker .lbl,
body[data-theme="lf-modern"] #r3d3-theme-picker select,
body[data-theme="daylight"] #r3d3-theme-picker select {
color: var(--lf-darkest);
}
body[data-theme="lf-modern"] #r3d3-theme-picker select option,
body[data-theme="daylight"] #r3d3-theme-picker select option {
background: #FFFFFF;
color: var(--lf-darkest);
}
body[data-theme="praxions"] #r3d3-theme-picker {
border-color: #00E5FF;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 12px rgba(0, 229, 255, 0.25);
}
#r3d3-theme-picker .lbl {
font-size: 14px;
line-height: 1;
}
#r3d3-theme-picker select {
background: transparent;
color: #F5F5F5;
border: none;
outline: none;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
font-family: 'Courier New', monospace;
cursor: pointer;
padding-right: 4px;
}
#r3d3-theme-picker select option {
background: #0A0A0A;
color: #F5F5F5;
}
/* ═══════════════════════════════════════════════════════════════════════════
v1.1 — LeafFilter Modern theme
New card structure (floating portal + convo + full data) in LF green colors.
JAMES ONLY for v1.1; promote to public after design review.
═══════════════════════════════════════════════════════════════════════════ */
body[data-theme="lf-modern"] {
/* LF MODERN internal palette — keeps LF greens, modernizes bg/cards */
--r3d-bg: #F1F8F4;
--r3d-card-bg: #FFFFFF;
--r3d-card-border: #C8E6C9;
--r3d-text: #1B5E20;
--r3d-text-muted: #5D7C5F;
--r3d-accent: #2E7D32;
--r3d-accent-dim: #1B5E20;
--r3d-warn: #F9A825;
--r3d-danger: #C62828;
--r3d-success: #43A047;
--r3d-card-shadow: 0 2px 8px rgba(27, 94, 32, 0.10), 0 1px 2px rgba(0, 0, 0, 0.05);
/* Universal palette — KEEP LF greens (intentional brand alignment),
just refresh the neutral surfaces (bg/card/border) for a modern feel. */
--bg: #F1F8F4;
--card: #FFFFFF;
--text: #1B5E20;
--muted: #5D7C5F;
--border: #C8E6C9;
/* --lf-* greens intentionally NOT overridden — this theme leans into the
LeafFilter palette while refreshing the surrounding surfaces. */
}
body[data-theme="lf-modern"] {
background: var(--r3d-bg) !important;
}
body[data-theme="lf-modern"] .lead-card {
background: var(--r3d-card-bg) !important;
border: 1px solid var(--r3d-card-border) !important;
box-shadow: var(--r3d-card-shadow) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
PORTAL STACK — floating, multi-instance, left-anchored, bring-to-front
═══════════════════════════════════════════════════════════════════════════
Multiple workers can run at once. Each gets its own portal. They stack to
the left with ~36px horizontal offset per portal. The front portal is fully
visible; back portals peek out as slivers on the left. Tap any sliver to
bring that portal forward (others retain their relative order beneath).
Container: #r3d3-portal-stack (injected by themes.js if it doesn't exist)
Portal: .r3d3-portal[data-worker="gtr|crm|doc|email"]
States: .collapsed (42px), .expanded (220px), .back (dimmed)
Approval: .r3d3-portal-prompt + .r3d3-prompt-backdrop
═══════════════════════════════════════════════════════════════════════════ */
#r3d3-portal-stack {
position: fixed;
top: 0; left: 0; right: 0;
height: 0;
pointer-events: none;
z-index: 1500;
}
#r3d3-portal-stack .r3d3-portal { pointer-events: auto; }
.r3d3-portal {
position: fixed;
top: 12px;
/* left set via JS based on stack-position index */
width: min(360px, calc(100vw - 32px));
background: linear-gradient(135deg, var(--rp-from, #003D1F) 0%, var(--rp-mid, #006633) 50%, var(--rp-to, #00CC66) 100%);
border-radius: 14px;
box-shadow:
0 6px 24px var(--rp-shadow, rgba(0, 255, 136, 0.30)),
0 2px 6px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
overflow: hidden;
font-family: 'Courier New', 'IBM Plex Mono', monospace;
color: #FFF;
border: 1px solid var(--rp-border, rgba(0, 255, 136, 0.4));
transition:
height 380ms cubic-bezier(0.16, 1, 0.3, 1),
left 380ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 250ms,
filter 250ms,
transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer;
display: flex;
flex-direction: column;
}
.r3d3-portal.r3d3-collapsed { height: 42px; }
.r3d3-portal.r3d3-expanded { height: 220px; }
.r3d3-portal[data-worker="gtr"] { --rp-from: #003D1F; --rp-mid: #006633; --rp-to: #00CC66; --rp-border: rgba(0,255,136,0.4); --rp-shadow: rgba(0,255,136,0.30); }
.r3d3-portal[data-worker="crm"] { --rp-from: #001F3D; --rp-mid: #003366; --rp-to: #006699; --rp-border: rgba(0,180,255,0.4); --rp-shadow: rgba(0,180,255,0.30); }
.r3d3-portal[data-worker="doc"] { --rp-from: #3D1F00; --rp-mid: #663300; --rp-to: #CC6600; --rp-border: rgba(255,140,0,0.4); --rp-shadow: rgba(255,140,0,0.30); }
.r3d3-portal[data-worker="email"] { --rp-from: #1F003D; --rp-mid: #330066; --rp-to: #6600CC; --rp-border: rgba(168,85,247,0.4); --rp-shadow: rgba(168,85,247,0.30); }
.r3d3-portal.r3d3-back {
filter: brightness(0.65) saturate(0.85);
transform: scale(0.985);
}
.r3d3-portal.r3d3-back:hover {
filter: brightness(0.85) saturate(0.95);
}
.r3d3-portal-row {
height: 42px;
min-height: 42px;
display: flex;
align-items: center;
padding: 0 12px;
gap: 10px;
user-select: none;
}
.r3d3-portal-row .r3d3-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #FF1A1A;
flex-shrink: 0;
animation: r3d3-pulse 1s infinite;
box-shadow: 0 0 6px #FF1A1A;
}
@keyframes r3d3-pulse { 50% { opacity: 0.4; } }
.r3d3-portal-row .r3d3-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
flex-shrink: 0;
}
.r3d3-portal-row .r3d3-step {
font-size: 10px;
letter-spacing: 1px;
opacity: 0.85;
flex-shrink: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 90px;
}
.r3d3-portal-mini-bar {
flex: 1;
height: 4px;
background: rgba(0, 0, 0, 0.3);
border-radius: 2px;
overflow: hidden;
min-width: 20px;
}
.r3d3-portal-mini-fill {
height: 100%;
background: linear-gradient(90deg, #FFF, rgba(255,255,255,0.6));
transition: width 700ms ease;
}
.r3d3-portal-toggle, .r3d3-portal-close {
background: transparent;
border: none;
color: #FFF;
font-size: 13px;
cursor: pointer;
padding: 4px 6px;
flex-shrink: 0;
transition: transform 250ms;
}
.r3d3-portal-close { font-size: 16px; opacity: 0.7; }
.r3d3-portal-close:hover { opacity: 1; }
.r3d3-portal.r3d3-expanded .r3d3-portal-toggle { transform: rotate(180deg); }
.r3d3-portal-body {
flex: 1;
padding: 0 12px 12px;
display: flex;
flex-direction: column;
gap: 8px;
opacity: 0;
transition: opacity 200ms 180ms;
}
.r3d3-portal.r3d3-expanded .r3d3-portal-body { opacity: 1; }
.r3d3-portal.r3d3-collapsed .r3d3-portal-body { display: none; }
.r3d3-portal-video {
flex: 1;
background: #000;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.75);
font-size: 10px;
letter-spacing: 1.5px;
text-align: center;
padding: 10px;
background-image:
linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 50%),
repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px, transparent 2px, transparent 4px);
position: relative;
}
.r3d3-portal-video::after {
content: '◉ LIVE';
position: absolute;
top: 6px; right: 8px;
font-size: 9px;
color: #FF1A1A;
letter-spacing: 1px;
animation: r3d3-pulse 1s infinite;
}
/* build #115 — Real live-frame variant. The text-only video uses padding +
centered text; the live variant shrink-wraps a real ![]()
with a caption
strip at the bottom. */
.r3d3-portal-video-live {
padding: 0;
align-items: stretch;
justify-content: stretch;
min-height: 130px;
overflow: hidden;
}
.r3d3-portal-frame {
flex: 1;
width: 100%;
height: 100%;
max-height: 220px;
object-fit: contain;
background: #000;
display: block;
}
.r3d3-portal-video-caption {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 4px 8px;
font-size: 9px;
letter-spacing: 1.2px;
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.65));
color: rgba(255,255,255,0.85);
text-align: center;
}
.r3d3-portal-body-actions {
display: flex;
gap: 6px;
}
.r3d3-pbtn {
flex: 1;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #FFF;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 10px;
letter-spacing: 1.2px;
cursor: pointer;
font-weight: 700;
}
.r3d3-pbtn:hover { background: rgba(0, 0, 0, 0.6); }
.r3d3-pbtn.danger { color: #FF8888; border-color: rgba(255, 136, 136, 0.4); }
.r3d3-pbtn.warn { color: #FFD700; border-color: rgba(255, 215, 0, 0.4); }
/* APPROVAL PROMPT — pops OVER the portal stack */
.r3d3-portal-prompt {
position: fixed;
top: 64px;
left: 50%;
transform: translateX(-50%) translateY(-200%);
width: min(360px, calc(100vw - 32px));
z-index: 2000;
background: #FFFFFF;
color: #1A1A1A;
border-radius: 14px;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.2);
padding: 16px 18px 14px;
transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
font-family: -apple-system, 'Segoe UI', sans-serif;
}
.r3d3-portal-prompt.r3d3-active { transform: translateX(-50%) translateY(0); }
.r3d3-portal-prompt::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, #FBBF24 0%, #F59E0B 100%);
border-radius: 14px 14px 0 0;
}
.r3d3-portal-prompt h3 { font-size: 14px; font-weight: 800; color: #B45309; letter-spacing: 0.5px; margin: 4px 0 6px; }
.r3d3-portal-prompt p { font-size: 13px; color: #4B5563; margin-bottom: 14px; line-height: 1.55; }
.r3d3-portal-prompt-buttons { display: flex; gap: 8px; }
.r3d3-portal-prompt-buttons .r3d3-pbtn-modal {
flex: 1;
padding: 11px;
border-radius: 9px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
border: none;
letter-spacing: 0.5px;
font-family: -apple-system, 'Segoe UI', sans-serif;
}
.r3d3-portal-prompt-buttons .r3d3-approve { background: #10B981; color: #FFF; }
.r3d3-portal-prompt-buttons .r3d3-deny { background: #FEE2E2; color: #991B1B; }
.r3d3-prompt-backdrop {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0; pointer-events: none;
transition: opacity 300ms;
z-index: 1999;
}
.r3d3-prompt-backdrop.r3d3-active { opacity: 1; pointer-events: auto; }
/* ═══════════════════════════════════════════════════════════════════════════
* build #115aq — UNIVERSAL READABILITY SAFETY NET
*
* Rep directive: "all themes and dark mode equivalents needs a comprehensive
* audit to all writing and background colors. there is still unreadable
* content in all themes and light/dark mode. need everything visible."
*
* The codebase has thousands of inline-style colors hardcoded in HTML. They
* frequently break in dark mode (e.g. color:#1B5E20 on a #0F1A0F background
* is unreadable). Surgically auditing each one is unrealistic in one pass.
*
* Strategy: high-specificity overrides that force every theme variant to
* have legible foreground against its background. We do NOT touch layout,
* just patch readability holes.
* ═══════════════════════════════════════════════════════════════════════════ */
/* DARK MODE (data-dark="1") — text-color floor */
body[data-dark="1"] {
color: #E8F5E9;
background: #0a0a0a;
}
/* Any inline-styled text that hardcodes a green close to the dark bg
(#1B5E20, #0d3a14, #1a2620, #0d2a4a) flips to light green. The
selectors target the exact hex values to avoid touching elements that
already render fine. */
body[data-dark="1"] [style*="color:#1B5E20"],
body[data-dark="1"] [style*="color: #1B5E20"],
body[data-dark="1"] [style*="color:#0d3a14"],
body[data-dark="1"] [style*="color: #0d3a14"],
body[data-dark="1"] [style*="color:#1a2620"],
body[data-dark="1"] [style*="color: #1a2620"],
body[data-dark="1"] [style*="color:#0d2a4a"],
body[data-dark="1"] [style*="color: #0d2a4a"],
body[data-dark="1"] [style*="color:#222"],
body[data-dark="1"] [style*="color: #222"],
body[data-dark="1"] [style*="color:#333"],
body[data-dark="1"] [style*="color: #333"],
body[data-dark="1"] [style*="color:#37474F"],
body[data-dark="1"] [style*="color: #37474F"],
body[data-dark="1"] [style*="color:#5D4037"],
body[data-dark="1"] [style*="color: #5D4037"],
body[data-dark="1"] [style*="color:#6D4C41"],
body[data-dark="1"] [style*="color: #6D4C41"],
body[data-dark="1"] [style*="color:#4A148C"],
body[data-dark="1"] [style*="color: #4A148C"],
body[data-dark="1"] [style*="color:#1A237E"],
body[data-dark="1"] [style*="color: #1A237E"],
body[data-dark="1"] [style*="color:#1565C0"],
body[data-dark="1"] [style*="color: #1565C0"] {
color: #E8F5E9 !important;
}
/* Mid-tone greens and browns used as label/caption text — also unreadable. */
body[data-dark="1"] [style*="color:#558B2F"],
body[data-dark="1"] [style*="color: #558B2F"],
body[data-dark="1"] [style*="color:#33691E"],
body[data-dark="1"] [style*="color: #33691E"],
body[data-dark="1"] [style*="color:#2E7D32"],
body[data-dark="1"] [style*="color: #2E7D32"] {
color: #A5D6A7 !important;
}
/* White-bg cards inside dark mode → flip to a dark card so text stays
readable. Only target the most common card backgrounds. */
body[data-dark="1"] [style*="background:#fff"],
body[data-dark="1"] [style*="background: #fff"],
body[data-dark="1"] [style*="background:#FFFFFF"],
body[data-dark="1"] [style*="background: #FFFFFF"],
body[data-dark="1"] [style*="background-color:#fff"],
body[data-dark="1"] [style*="background-color: #fff"] {
background: #162A18 !important;
color: #E8F5E9 !important;
}
body[data-dark="1"] [style*="background:#F1F8E9"],
body[data-dark="1"] [style*="background: #F1F8E9"],
body[data-dark="1"] [style*="background:#E8F5E9"],
body[data-dark="1"] [style*="background: #E8F5E9"],
body[data-dark="1"] [style*="background:#FAFFFA"],
body[data-dark="1"] [style*="background: #FAFFFA"] {
background: #0F1A0F !important;
color: #E8F5E9 !important;
}
body[data-dark="1"] [style*="background:#FFF8E1"],
body[data-dark="1"] [style*="background: #FFF8E1"] {
background: #2A2410 !important;
color: #FFE082 !important;
}
body[data-dark="1"] [style*="background:#E3F2FD"],
body[data-dark="1"] [style*="background: #E3F2FD"] {
background: #102236 !important;
color: #BBDEFB !important;
}
body[data-dark="1"] [style*="background:#FFEBEE"],
body[data-dark="1"] [style*="background: #FFEBEE"] {
background: #2B1414 !important;
color: #FFCDD2 !important;
}
body[data-dark="1"] [style*="background:#EDE7F6"],
body[data-dark="1"] [style*="background: #EDE7F6"] {
background: #1B0F2E !important;
color: #D1C4E9 !important;
}
/* Inputs / textareas / selects — common readability blackhole in dark mode. */
body[data-dark="1"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body[data-dark="1"] textarea,
body[data-dark="1"] select {
background: #162A18 !important;
color: #E8F5E9 !important;
border-color: #2E5C30 !important;
}
body[data-dark="1"] input::placeholder,
body[data-dark="1"] textarea::placeholder {
color: #81C784 !important;
opacity: 0.7;
}
/* Restricted themes — apply the same safety net to r3d3eye / praxions /
lf-modern which all run on dark backgrounds. */
body[data-theme="r3d3eye"] [style*="color:#1B5E20"],
body[data-theme="praxions"] [style*="color:#1B5E20"],
body[data-theme="lf-modern"] [style*="color:#1B5E20"] {
color: var(--r3d-text, #E8F5E9) !important;
}
body[data-theme="r3d3eye"] [style*="background:#fff"],
body[data-theme="praxions"] [style*="background:#fff"] {
background: var(--r3d-card-bg, #1a1a2e) !important;
}
/* Element-type fallbacks: bare , , , , and
any unstyled paragraph should always inherit the theme text color. */
body[data-dark="1"] body,
body[data-dark="1"] main,
body[data-dark="1"] section,
body[data-dark="1"] article,
body[data-dark="1"] p:not([style*="color"]),
body[data-dark="1"] span:not([style*="color"]),
body[data-dark="1"] div:not([style*="color"]),
body[data-dark="1"] li:not([style*="color"]),
body[data-dark="1"] td:not([style*="color"]),
body[data-dark="1"] th:not([style*="color"]) {
color: #E8F5E9;
}
/* Force-visible: links should never be unreadable. */
body[data-dark="1"] a:not([style*="color"]),
body[data-theme="r3d3eye"] a:not([style*="color"]),
body[data-theme="praxions"] a:not([style*="color"]) {
color: #81C784;
}
body[data-dark="1"] a:not([style*="color"]):hover {
color: #C5E1A5;
}
/* ═══════════════════════════════════════════════════════════════════════════
* build #115ar — RESTRICTED THEMES SAFETY NET (r3d3eye / praxions / lf-modern)
*
* The dark-mode safety net targets [data-dark="1"]. Named themes set their
* own body[data-theme="..."] attribute and override CSS variables, but
* inline-styled hex colors in HTML templates bypass variables entirely.
* This block mirrors the dark-mode patches for each restricted theme.
* ═══════════════════════════════════════════════════════════════════════════ */
/* Foreground patches: any inline-styled element using one of the dark-on-light
greens / blues / browns gets remapped to a high-contrast theme color. */
body[data-theme="r3d3eye"] [style*="color:#1B5E20"],
body[data-theme="r3d3eye"] [style*="color: #1B5E20"],
body[data-theme="r3d3eye"] [style*="color:#0d3a14"],
body[data-theme="r3d3eye"] [style*="color: #0d3a14"],
body[data-theme="r3d3eye"] [style*="color:#1a2620"],
body[data-theme="r3d3eye"] [style*="color: #1a2620"],
body[data-theme="r3d3eye"] [style*="color:#0d2a4a"],
body[data-theme="r3d3eye"] [style*="color: #0d2a4a"],
body[data-theme="r3d3eye"] [style*="color:#5D4037"],
body[data-theme="r3d3eye"] [style*="color: #5D4037"],
body[data-theme="r3d3eye"] [style*="color:#37474F"],
body[data-theme="r3d3eye"] [style*="color: #37474F"],
body[data-theme="r3d3eye"] [style*="color:#1565C0"],
body[data-theme="r3d3eye"] [style*="color: #1565C0"],
body[data-theme="r3d3eye"] [style*="color:#222"],
body[data-theme="r3d3eye"] [style*="color: #222"],
body[data-theme="r3d3eye"] [style*="color:#333"],
body[data-theme="r3d3eye"] [style*="color: #333"],
body[data-theme="r3d3eye"] [style*="color:#558B2F"],
body[data-theme="r3d3eye"] [style*="color: #558B2F"],
body[data-theme="r3d3eye"] [style*="color:#2E7D32"],
body[data-theme="r3d3eye"] [style*="color: #2E7D32"] {
color: #F5F5F5 !important;
}
body[data-theme="praxions"] [style*="color:#1B5E20"],
body[data-theme="praxions"] [style*="color: #1B5E20"],
body[data-theme="praxions"] [style*="color:#0d3a14"],
body[data-theme="praxions"] [style*="color: #0d3a14"],
body[data-theme="praxions"] [style*="color:#1a2620"],
body[data-theme="praxions"] [style*="color: #1a2620"],
body[data-theme="praxions"] [style*="color:#0d2a4a"],
body[data-theme="praxions"] [style*="color: #0d2a4a"],
body[data-theme="praxions"] [style*="color:#5D4037"],
body[data-theme="praxions"] [style*="color: #5D4037"],
body[data-theme="praxions"] [style*="color:#37474F"],
body[data-theme="praxions"] [style*="color: #37474F"],
body[data-theme="praxions"] [style*="color:#1565C0"],
body[data-theme="praxions"] [style*="color: #1565C0"],
body[data-theme="praxions"] [style*="color:#222"],
body[data-theme="praxions"] [style*="color: #222"],
body[data-theme="praxions"] [style*="color:#333"],
body[data-theme="praxions"] [style*="color: #333"],
body[data-theme="praxions"] [style*="color:#558B2F"],
body[data-theme="praxions"] [style*="color: #558B2F"],
body[data-theme="praxions"] [style*="color:#2E7D32"],
body[data-theme="praxions"] [style*="color: #2E7D32"] {
color: #F5F5F5 !important;
}
body[data-theme="lf-modern"] [style*="color:#1B5E20"],
body[data-theme="lf-modern"] [style*="color: #1B5E20"],
body[data-theme="lf-modern"] [style*="color:#0d3a14"],
body[data-theme="lf-modern"] [style*="color: #0d3a14"],
body[data-theme="lf-modern"] [style*="color:#222"],
body[data-theme="lf-modern"] [style*="color: #222"] {
color: #FFFFFF !important;
}
/* Background patches: white cards inside dark themes → dark card surfaces. */
body[data-theme="r3d3eye"] [style*="background:#fff"],
body[data-theme="r3d3eye"] [style*="background: #fff"],
body[data-theme="r3d3eye"] [style*="background:#FFFFFF"],
body[data-theme="r3d3eye"] [style*="background: #FFFFFF"],
body[data-theme="r3d3eye"] [style*="background-color:#fff"],
body[data-theme="r3d3eye"] [style*="background-color: #fff"] {
background: #0A0A0A !important;
color: #F5F5F5 !important;
}
body[data-theme="praxions"] [style*="background:#fff"],
body[data-theme="praxions"] [style*="background: #fff"],
body[data-theme="praxions"] [style*="background:#FFFFFF"],
body[data-theme="praxions"] [style*="background: #FFFFFF"],
body[data-theme="praxions"] [style*="background-color:#fff"],
body[data-theme="praxions"] [style*="background-color: #fff"] {
background: #131722 !important;
color: #F5F5F5 !important;
}
body[data-theme="lf-modern"] [style*="background:#fff"],
body[data-theme="lf-modern"] [style*="background: #fff"] {
background: #1B5E20 !important;
color: #FFFFFF !important;
}
/* Pale green / yellow / blue cards in restricted dark themes. */
body[data-theme="r3d3eye"] [style*="background:#F1F8E9"],
body[data-theme="r3d3eye"] [style*="background: #F1F8E9"],
body[data-theme="r3d3eye"] [style*="background:#E8F5E9"],
body[data-theme="r3d3eye"] [style*="background: #E8F5E9"],
body[data-theme="praxions"] [style*="background:#F1F8E9"],
body[data-theme="praxions"] [style*="background: #F1F8E9"],
body[data-theme="praxions"] [style*="background:#E8F5E9"],
body[data-theme="praxions"] [style*="background: #E8F5E9"] {
background: #0A0A0A !important;
color: #F5F5F5 !important;
border-color: #2E5C30 !important;
}
body[data-theme="r3d3eye"] [style*="background:#FFF8E1"],
body[data-theme="r3d3eye"] [style*="background: #FFF8E1"],
body[data-theme="praxions"] [style*="background:#FFF8E1"],
body[data-theme="praxions"] [style*="background: #FFF8E1"] {
background: #1A1408 !important;
color: #FFE082 !important;
border-color: #5D4037 !important;
}
/* Inputs / textareas / selects across restricted themes. */
body[data-theme="r3d3eye"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body[data-theme="r3d3eye"] textarea,
body[data-theme="r3d3eye"] select,
body[data-theme="praxions"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body[data-theme="praxions"] textarea,
body[data-theme="praxions"] select {
background: #0A0A0A !important;
color: #F5F5F5 !important;
border-color: #2A2A2A !important;
}
body[data-theme="r3d3eye"] input::placeholder,
body[data-theme="r3d3eye"] textarea::placeholder,
body[data-theme="praxions"] input::placeholder,
body[data-theme="praxions"] textarea::placeholder {
color: #888 !important;
opacity: 0.85;
}
/* ═══════════════════════════════════════════════════════════════════════════
* build #115ar — LIGHT-MODE READABILITY (default theme)
*
* Catches the inverse problem: bright-color text on a near-white background
* that washes out — e.g. inline color:#FFD700 (gold) on white pages where
* the gold is invisible. Or color:#A5D6A7 (pale green) which is fine on
* dark cards but vanishes when the same chip is placed on a white card.
*
* We only patch where the body is in DEFAULT mode (no data-dark, no
* restricted theme) AND the element doesn't already have a dark bg.
* ═══════════════════════════════════════════════════════════════════════════ */
body:not([data-dark="1"]):not([data-theme="r3d3eye"]):not([data-theme="praxions"]):not([data-theme="lf-modern"]) [style*="color:#FFD700"]:not([style*="background"]),
body:not([data-dark="1"]):not([data-theme="r3d3eye"]):not([data-theme="praxions"]):not([data-theme="lf-modern"]) [style*="color: #FFD700"]:not([style*="background"]),
body:not([data-dark="1"]):not([data-theme="r3d3eye"]):not([data-theme="praxions"]):not([data-theme="lf-modern"]) [style*="color:#FFE082"]:not([style*="background"]),
body:not([data-dark="1"]):not([data-theme="r3d3eye"]):not([data-theme="praxions"]):not([data-theme="lf-modern"]) [style*="color: #FFE082"]:not([style*="background"]) {
color: #E65100 !important; /* gold → deep orange on white pages */
}
body:not([data-dark="1"]):not([data-theme="r3d3eye"]):not([data-theme="praxions"]):not([data-theme="lf-modern"]) [style*="color:#A5D6A7"]:not([style*="background"]),
body:not([data-dark="1"]):not([data-theme="r3d3eye"]):not([data-theme="praxions"]):not([data-theme="lf-modern"]) [style*="color: #A5D6A7"]:not([style*="background"]),
body:not([data-dark="1"]):not([data-theme="r3d3eye"]):not([data-theme="praxions"]):not([data-theme="lf-modern"]) [style*="color:#C8E6C9"]:not([style*="background"]),
body:not([data-dark="1"]):not([data-theme="r3d3eye"]):not([data-theme="praxions"]):not([data-theme="lf-modern"]) [style*="color: #C8E6C9"]:not([style*="background"]),
body:not([data-dark="1"]):not([data-theme="r3d3eye"]):not([data-theme="praxions"]):not([data-theme="lf-modern"]) [style*="color:#81C784"]:not([style*="background"]),
body:not([data-dark="1"]):not([data-theme="r3d3eye"]):not([data-theme="praxions"]):not([data-theme="lf-modern"]) [style*="color: #81C784"]:not([style*="background"]) {
color: #1B5E20 !important; /* pale green → forest green on white pages */
}
body:not([data-dark="1"]):not([data-theme="r3d3eye"]):not([data-theme="praxions"]):not([data-theme="lf-modern"]) [style*="color:#fff"]:not([style*="background"]),
body:not([data-dark="1"]):not([data-theme="r3d3eye"]):not([data-theme="praxions"]):not([data-theme="lf-modern"]) [style*="color: #fff"]:not([style*="background"]),
body:not([data-dark="1"]):not([data-theme="r3d3eye"]):not([data-theme="praxions"]):not([data-theme="lf-modern"]) [style*="color:#FFFFFF"]:not([style*="background"]),
body:not([data-dark="1"]):not([data-theme="r3d3eye"]):not([data-theme="praxions"]):not([data-theme="lf-modern"]) [style*="color: #FFFFFF"]:not([style*="background"]) {
color: #1B5E20 !important; /* white → forest green when no bg paired */
}
/* ═══════════════════════════════════════════════════════════════════════════
* build #115ar — UNIVERSAL TEXT/BUTTON CONTRAST FLOOR
*
* Buttons should always have visible text. Many inline button styles set
* a background but rely on inherited color — which can be wrong per theme.
* ═══════════════════════════════════════════════════════════════════════════ */
button:not([style*="color"]) {
/* Default to current text color; specific themes override below. */
}
body[data-dark="1"] button:not([style*="color"]):not(.disc-btn):not(.act-btn) {
color: #E8F5E9;
}
body[data-theme="r3d3eye"] button:not([style*="color"]):not(.disc-btn):not(.act-btn) {
color: #F5F5F5;
}
body[data-theme="praxions"] button:not([style*="color"]):not(.disc-btn):not(.act-btn) {
color: #F5F5F5;
}
/* Last-resort GUARANTEE: any text node whose parent has BOTH inline color
and background that happen to match (super-rare but possible) gets one
final override via a high-z-index visibility-promotion class. Activated
only by .lh-force-readable for surgical use. */
.lh-force-readable,
.lh-force-readable * {
text-shadow: 0 0 2px rgba(0,0,0,0.35) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
* build #115as — CALENDAR + BOX SECTIONS theme audit
*
* Per rep report: "calendar and other box sections still struggling to
* change background and writing color." The calendar uses inline styles
* like rgba(76,175,80,0.30) borders and #FFF8E1 backgrounds that bypass
* the previous safety net. This block hits them across every theme.
* ═══════════════════════════════════════════════════════════════════════════ */
/* CALENDAR — applies to dark mode + every restricted theme. */
body[data-dark="1"] #cal-grid,
body[data-theme="r3d3eye"] #cal-grid,
body[data-theme="praxions"] #cal-grid,
body[data-theme="lf-modern"] #cal-grid {
background: transparent !important;
color: #E8F5E9 !important;
}
body[data-dark="1"] #cal-grid > div,
body[data-theme="r3d3eye"] #cal-grid > div,
body[data-theme="praxions"] #cal-grid > div,
body[data-theme="lf-modern"] #cal-grid > div {
background: #0F1A0F !important;
color: #E8F5E9 !important;
border-color: #2E5C30 !important;
}
body[data-theme="r3d3eye"] #cal-grid > div {
background: #0A0A0A !important;
color: #F5F5F5 !important;
border-color: #1A1A1A !important;
}
body[data-theme="praxions"] #cal-grid > div {
background: #131722 !important;
color: #F5F5F5 !important;
border-color: #1F2330 !important;
}
/* Today / selected day highlights stay visible. */
body[data-dark="1"] #cal-grid > div[style*="background:#FFF8E1"],
body[data-theme="r3d3eye"] #cal-grid > div[style*="background:#FFF8E1"],
body[data-theme="praxions"] #cal-grid > div[style*="background:#FFF8E1"],
body[data-theme="lf-modern"] #cal-grid > div[style*="background:#FFF8E1"] {
background: #2A2410 !important;
color: #FFE082 !important;
border-color: #FFD54F !important;
}
body[data-dark="1"] #cal-grid > div span,
body[data-theme="r3d3eye"] #cal-grid > div span,
body[data-theme="praxions"] #cal-grid > div span,
body[data-theme="lf-modern"] #cal-grid > div span {
color: inherit !important;
}
/* Faded out-of-month days. */
body[data-dark="1"] #cal-grid > div[style*="color:#bbb"],
body[data-dark="1"] #cal-grid > div [style*="color:#bbb"],
body[data-theme="r3d3eye"] #cal-grid > div[style*="color:#bbb"],
body[data-theme="r3d3eye"] #cal-grid > div [style*="color:#bbb"],
body[data-theme="praxions"] #cal-grid > div[style*="color:#bbb"],
body[data-theme="praxions"] #cal-grid > div [style*="color:#bbb"] {
color: #5E7A5E !important;
}
/* Event chips inside calendar cells (money/percent labels). */
body[data-dark="1"] #cal-event-list,
body[data-theme="r3d3eye"] #cal-event-list,
body[data-theme="praxions"] #cal-event-list,
body[data-theme="lf-modern"] #cal-event-list {
color: #E8F5E9 !important;
}
/* SETTINGS sections — common card containers. */
body[data-dark="1"] .settings-section,
body[data-theme="r3d3eye"] .settings-section,
body[data-theme="praxions"] .settings-section,
body[data-theme="lf-modern"] .settings-section {
background: #162A18 !important;
color: #E8F5E9 !important;
border-color: #2E5C30 !important;
}
body[data-theme="r3d3eye"] .settings-section { background: #0A0A0A !important; border-color: #1A1A1A !important; color: #F5F5F5 !important; }
body[data-theme="praxions"] .settings-section { background: #131722 !important; border-color: #1F2330 !important; color: #F5F5F5 !important; }
body[data-dark="1"] .settings-section-header,
body[data-theme="r3d3eye"] .settings-section-header,
body[data-theme="praxions"] .settings-section-header,
body[data-theme="lf-modern"] .settings-section-header {
color: #E8F5E9 !important;
}
body[data-theme="r3d3eye"] .settings-section-header,
body[data-theme="praxions"] .settings-section-header { color: #F5F5F5 !important; }
body[data-dark="1"] .settings-section-body,
body[data-theme="r3d3eye"] .settings-section-body,
body[data-theme="praxions"] .settings-section-body,
body[data-theme="lf-modern"] .settings-section-body {
background: transparent !important;
color: #E8F5E9 !important;
}
body[data-theme="r3d3eye"] .settings-section-body,
body[data-theme="praxions"] .settings-section-body { color: #F5F5F5 !important; }
/* Admin rank-cards (Worker Timings panel, Commission Rules panel, etc.) */
body[data-dark="1"] .rank-card,
body[data-theme="r3d3eye"] .rank-card,
body[data-theme="praxions"] .rank-card,
body[data-theme="lf-modern"] .rank-card {
background: #162A18 !important;
color: #E8F5E9 !important;
border-color: #2E5C30 !important;
}
body[data-theme="r3d3eye"] .rank-card { background: #0A0A0A !important; border-color: #1A1A1A !important; color: #F5F5F5 !important; }
body[data-theme="praxions"] .rank-card { background: #131722 !important; border-color: #1F2330 !important; color: #F5F5F5 !important; }
body[data-dark="1"] .rank-card-title,
body[data-theme="r3d3eye"] .rank-card-title,
body[data-theme="praxions"] .rank-card-title,
body[data-theme="lf-modern"] .rank-card-title { color: #FFD54F !important; }
/* CFG-CARD (integration config cards in settings) */
body[data-dark="1"] [id^="cfg-card-"],
body[data-theme="r3d3eye"] [id^="cfg-card-"],
body[data-theme="praxions"] [id^="cfg-card-"],
body[data-theme="lf-modern"] [id^="cfg-card-"] {
background: transparent !important;
color: #E8F5E9 !important;
}
/* Sheet inputs (settings field labels) */
body[data-dark="1"] .sheet-field-label,
body[data-theme="r3d3eye"] .sheet-field-label,
body[data-theme="praxions"] .sheet-field-label,
body[data-theme="lf-modern"] .sheet-field-label {
color: #A5D6A7 !important;
}
body[data-theme="r3d3eye"] .sheet-field-label { color: #FF8888 !important; }
body[data-theme="praxions"] .sheet-field-label { color: #66F2FF !important; }
body[data-dark="1"] .sheet-input,
body[data-theme="r3d3eye"] .sheet-input,
body[data-theme="praxions"] .sheet-input,
body[data-theme="lf-modern"] .sheet-input {
background: #0F1A0F !important;
color: #E8F5E9 !important;
border-color: #2E5C30 !important;
}
body[data-theme="r3d3eye"] .sheet-input { background: #050810 !important; border-color: #1A1A1A !important; color: #F5F5F5 !important; }
body[data-theme="praxions"] .sheet-input { background: #0B0E14 !important; border-color: #1F2330 !important; color: #F5F5F5 !important; }
/* Connection pills (Not Connected / Connected) */
body[data-dark="1"] .conn-pill,
body[data-theme="r3d3eye"] .conn-pill,
body[data-theme="praxions"] .conn-pill,
body[data-theme="lf-modern"] .conn-pill {
filter: brightness(1.05);
}
/* Generic box-shadow restoration so cards on dark themes still feel layered */
body[data-dark="1"] .settings-section,
body[data-dark="1"] .rank-card,
body[data-theme="r3d3eye"] .settings-section,
body[data-theme="r3d3eye"] .rank-card,
body[data-theme="praxions"] .settings-section,
body[data-theme="praxions"] .rank-card {
box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.04) !important;
}
/* Headers / titles that hardcode forest green text — invisible against
dark-green backgrounds. Promote to bright green in any non-default mode. */
body[data-dark="1"] h1, body[data-dark="1"] h2, body[data-dark="1"] h3, body[data-dark="1"] h4 {
color: #A5D6A7 !important;
}
body[data-theme="r3d3eye"] h1, body[data-theme="r3d3eye"] h2, body[data-theme="r3d3eye"] h3, body[data-theme="r3d3eye"] h4 {
color: #FF6666 !important;
}
body[data-theme="praxions"] h1, body[data-theme="praxions"] h2, body[data-theme="praxions"] h3, body[data-theme="praxions"] h4 {
color: #66F2FF !important;
}
/* Catch any element using rgba(76,175,80,...) green-tint inline backgrounds
— these are calendar cells + sundry settings boxes. */
body[data-dark="1"] [style*="rgba(76,175,80"],
body[data-theme="r3d3eye"] [style*="rgba(76,175,80"],
body[data-theme="praxions"] [style*="rgba(76,175,80"] {
background: rgba(46,124,50,0.25) !important;
color: #E8F5E9 !important;
}
/* Anything with var(--lf-pale) or var(--lf-light) backgrounds */
body[data-dark="1"] [style*="background:var(--lf-pale)"],
body[data-dark="1"] [style*="background: var(--lf-pale)"],
body[data-dark="1"] [style*="background:var(--lf-light)"],
body[data-dark="1"] [style*="background: var(--lf-light)"] {
background: #0F1A0F !important;
color: #E8F5E9 !important;
}