/*
* EVE AI Core — Government Security Design System
* Central theme file. Include on every page:
*
*
* Provides: design tokens, typography, header/nav, footer, utility classes.
* Individual pages only need page-specific layout CSS inline.
*/
/* ── Google Fonts (also loadable via in ) ─────────────── */
/* @import removed — fonts already loaded via in index.html to avoid render-blocking chain-load on mobile */
/* ── Design Tokens ─────────────────────────────────────────────────── */
:root {
/* Backgrounds — Dark by default (prevents FOUC; light theme overrides via [data-theme="light"]) */
--bg-primary: #0b0f17;
--bg-secondary: #111827;
--bg-tertiary: #1f2937;
--bg-card: rgba(17, 24, 39, 0.8);
--bg-header: rgba(11, 15, 23, 0.95);
/* Borders */
--border-primary: #1a2444;
--border-hover: #2a3a5a;
--border-subtle: rgba(255, 255, 255, 0.06);
/* Accent Colors */
--accent-primary: #4a90e2;
--accent-secondary: #c8a84e;
--accent-safe: #22c55e;
--accent-alert: #ef4444;
--accent-warning: #fbbf24;
--accent-governance: #6366f1;
/* Text */
--text-primary: #e5e7eb;
--text-secondary: #9ca3af;
--text-heading: #e5e7eb;
--text-muted: #9ca3af;
--text-on-accent: #ffffff;
/* Typography */
--font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'IBM Plex Mono', 'Consolas', monospace;
/* Radii */
--radius-sm: 2px;
--radius-md: 4px;
/* ── Semantic Surface System ─────────────────────────────────────
* 5 elevation levels. Always use the paired --text-on-N and
* --text-muted-on-N tokens — never cross levels.
*
* Level | Use case
* ──────────────────────────────────────────────────────────────
* 0 | Page / body background
* 1 | Cards, panels, sidebar body
* 2 | Raised panels, inline popovers
* 3 | Modal dialogs, sheets
* 4 | Dropdowns, tooltips, floating menus (highest z-surface)
* ─────────────────────────────────────────────────────────────── */
/* Surface 0 — page */
--surface-0: #0b0f17;
--surface-0-border: rgba(255, 255, 255, 0.04);
--text-on-0: #e5e7eb;
--text-muted-on-0: #9ca3af;
/* Surface 1 — cards / panels */
--surface-1: #111827;
--surface-1-border: rgba(255, 255, 255, 0.07);
--text-on-1: #e5e7eb;
--text-muted-on-1: #9ca3af;
/* Surface 2 — raised panels */
--surface-2: #1f2937;
--surface-2-border: rgba(255, 255, 255, 0.09);
--text-on-2: #d4d9e4;
--text-muted-on-2: #8a91a8;
/* Surface 3 — modals / sheets */
--surface-3: #1c2240;
--surface-3-border: rgba(255, 255, 255, 0.11);
--text-on-3: #e2e6ef;
--text-muted-on-3: #9299b0;
/* Surface 4 — dropdowns / tooltips */
--surface-4: #1f2545;
--surface-4-border: rgba(255, 255, 255, 0.13);
--text-on-4: #e2e6ef;
--text-muted-on-4: #9299b0;
/* Interactive overlays — add as ::before pseudo or background on :hover/:active */
--hover-overlay: rgba(255, 255, 255, 0.05);
--active-overlay: rgba(255, 255, 255, 0.09);
--focus-ring: rgba(74, 144, 226, 0.5);
/* ── Sidebar tokens — sidebar is ALWAYS dark regardless of page theme ── */
--sidebar-bg: #12121a;
--sidebar-border: rgba(255, 255, 255, 0.08);
--sidebar-text: rgba(255, 255, 255, 0.88);
--sidebar-text-muted: rgba(255, 255, 255, 0.60);
--sidebar-text-heading: #f0f2f8;
--sidebar-hover-bg: rgba(255, 255, 255, 0.07);
--sidebar-active-bg: rgba(74, 144, 226, 0.20);
--sidebar-active-text: #4a90e2;
--sidebar-section-text: rgba(255, 255, 255, 0.60);
--sidebar-width: 220px;
--sidebar-collapsed: 60px;
/* ── Spacing scale (4-px grid) ────────────────────────────────────── */
--space-0: 0px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
/* ── Typography scale ─────────────────────────────────────────────── */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 20px;
--text-xl: 28px;
--text-2xl: 36px;
--text-3xl: 48px;
/* ── Line heights ─────────────────────────────────────────────────── */
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
/* ── Border radii ─────────────────────────────────────────────────── */
/* --radius-sm and --radius-md defined above */
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-full: 9999px;
/* ── Shadows ──────────────────────────────────────────────────────── */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.45);
/* ── Layout ───────────────────────────────────────────────────────── */
--page-max-width: 1400px;
--content-padding: 24px;
--section-gap: var(--space-8);
--card-padding: var(--space-6);
/* ── Alias: border-color → border-primary ─────────────────────────── */
--border-color: var(--border-primary);
}
/* ── Dark theme alias (same as :root defaults) ─────────────────────── */
[data-theme="dark"] {
--bg-primary: #0b0f17;
--bg-secondary: #111827;
--bg-tertiary: #1f2937;
--bg-card: rgba(17, 24, 39, 0.8);
--bg-header: rgba(11, 15, 23, 0.95);
--border-primary: #1a2444;
--border-hover: #2a3a5a;
--border-subtle: rgba(255, 255, 255, 0.06);
--accent-primary: #4a90e2;
--accent-secondary: #c8a84e;
--accent-safe: #22c55e;
--accent-alert: #ef4444;
--accent-warning: #fbbf24;
--accent-governance: #6366f1;
--text-primary: #e5e7eb;
--text-secondary: #9ca3af;
--text-heading: #e5e7eb;
--text-muted: #9ca3af;
--text-on-accent: #ffffff;
/* Surface tokens — dark (same as :root) */
--surface-0: #0b0f17; --surface-0-border: rgba(255,255,255,0.04); --text-on-0: #e5e7eb; --text-muted-on-0: #9ca3af;
--surface-1: #111827; --surface-1-border: rgba(255,255,255,0.07); --text-on-1: #e5e7eb; --text-muted-on-1: #9ca3af;
--surface-2: #161b35; --surface-2-border: rgba(255,255,255,0.09); --text-on-2: #d4d9e4; --text-muted-on-2: #8a91a8;
--surface-3: #1c2240; --surface-3-border: rgba(255,255,255,0.11); --text-on-3: #e2e6ef; --text-muted-on-3: #9299b0;
--surface-4: #1f2545; --surface-4-border: rgba(255,255,255,0.13); --text-on-4: #e2e6ef; --text-muted-on-4: #9299b0;
--hover-overlay: rgba(255,255,255,0.05); --active-overlay: rgba(255,255,255,0.09); --focus-ring: rgba(74,144,226,0.5);
/* Sidebar tokens — dark theme (same as :root) */
--sidebar-bg: #12121a; --sidebar-border: rgba(255,255,255,0.08);
--sidebar-text: rgba(255,255,255,0.72); --sidebar-text-muted: rgba(255,255,255,0.40);
--sidebar-text-heading: #e2e6ef; --sidebar-hover-bg: rgba(255,255,255,0.05);
--sidebar-active-bg: rgba(74,144,226,0.20); --sidebar-active-text: #4a90e2;
--sidebar-section-text: rgba(255,255,255,0.38);
}
/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ── Base Typography ───────────────────────────────────────────────── */
body {
font-family: var(--font-sans);
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
a {
color: var(--accent-primary);
text-decoration: none;
transition: color 0.2s;
}
a:hover {
color: var(--accent-primary);
filter: brightness(1.25);
}
/* ── Header / Navigation ──────────────────────────────────────────── */
.theme-header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 16px 40px;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--bg-header);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-primary);
z-index: 100;
}
.theme-logo {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 16px;
font-weight: 600;
letter-spacing: 4px;
text-transform: uppercase;
text-decoration: none;
color: var(--text-heading);
}
.theme-logo-icon {
width: 44px;
height: 44px;
object-fit: contain;
border-radius: var(--radius-sm);
}
.theme-nav {
display: flex;
gap: 24px;
align-items: center;
}
.theme-nav a {
color: var(--text-secondary);
text-decoration: none;
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: color 0.2s;
}
.theme-nav a:hover {
color: var(--accent-primary);
filter: brightness(1.25);
}
.theme-nav a.active {
color: var(--accent-primary);
}
/* ── Footer ────────────────────────────────────────────────────────── */
/* All footer variants always use dark background — never white, regardless of theme */
.footer, .footer--simple, .theme-footer, .app-footer {
background: #0a0e1a !important;
border-top-color: #1a2444 !important;
}
[data-theme="light"] .footer,
[data-theme="light"] .footer--simple,
[data-theme="light"] .theme-footer,
[data-theme="light"] .app-footer {
background: #0a0e1a !important;
border-top-color: #1a2444 !important;
color: #7a8299 !important;
}
[data-theme="light"] .footer-links a,
[data-theme="light"] .theme-footer a {
color: #7a8299 !important;
}
[data-theme="light"] .footer-links a:hover,
[data-theme="light"] .theme-footer a:hover {
color: #c8cdd8 !important;
}
[data-theme="light"] .footer-brand h3,
[data-theme="light"] .footer-links h4,
[data-theme="light"] .footer-bottom {
color: #c8cdd8 !important;
border-top-color: #1a2444 !important;
}
.theme-footer {
text-align: center;
padding: 40px;
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
border-top: 1px solid var(--border-primary);
}
.theme-footer a {
color: var(--accent-primary);
text-decoration: none;
}
.theme-footer a:hover {
color: var(--accent-primary);
filter: brightness(1.25);
}
.theme-footer-brand {
margin-top: 8px;
opacity: 0.5;
}
/* ── Section Headers ───────────────────────────────────────────────── */
.section-label {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-secondary);
}
.page-classification {
text-align: center;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-secondary);
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 32px;
opacity: 0.6;
}
/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
display: inline-block;
padding: 12px 24px;
border: none;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
text-decoration: none;
transition: background 0.2s;
}
.btn-primary {
background: var(--accent-primary);
color: var(--text-on-accent);
}
.btn-primary:hover {
background: #5a9ee8;
color: var(--text-on-accent);
}
.btn-outline {
background: transparent;
color: var(--text-primary);
border: 1px solid var(--border-primary);
}
.btn-outline:hover {
border-color: var(--border-hover);
color: var(--text-heading);
}
/* ── Cards ─────────────────────────────────────────────────────────── */
.theme-card {
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: var(--radius-md);
padding: 24px;
transition: border-color 0.2s;
}
.theme-card:hover {
border-color: var(--border-hover);
}
/* ── Info / Alert / Status Boxes ───────────────────────────────────── */
.box-info {
background: rgba(74, 144, 226, 0.06);
border: 1px solid rgba(74, 144, 226, 0.2);
border-radius: var(--radius-md);
padding: 24px;
margin: 32px 0;
}
.box-info h3 {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent-primary);
margin-bottom: 12px;
}
.box-alert {
background: rgba(239, 68, 68, 0.06);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: var(--radius-md);
padding: 24px;
margin: 32px 0;
}
.box-alert h3 {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent-alert);
margin-bottom: 12px;
}
.box-status {
background: rgba(34, 197, 94, 0.06);
border: 1px solid rgba(34, 197, 94, 0.2);
border-radius: var(--radius-md);
padding: 24px;
margin: 32px 0;
}
.box-status h3 {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent-safe);
margin-bottom: 12px;
}
.box-warning {
background: rgba(251, 191, 36, 0.06);
border: 1px solid rgba(251, 191, 36, 0.2);
border-radius: var(--radius-md);
padding: 24px;
margin: 32px 0;
}
.box-warning h3 {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent-warning);
margin-bottom: 12px;
}
/* ── Code Blocks ───────────────────────────────────────────────────── */
.code-block {
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius-md);
padding: 16px;
margin: 16px 0;
font-family: var(--font-mono);
font-size: 13px;
overflow-x: auto;
color: var(--text-primary);
}
code {
font-family: var(--font-mono);
font-size: 0.9em;
background: rgba(74, 144, 226, 0.1);
padding: 2px 6px;
border-radius: var(--radius-sm);
}
/* ── Monospace Labels (Section Titles, Table Headers) ──────────────── */
.mono-label {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-heading);
}
/* ── Legal Text ────────────────────────────────────────────────────── */
.legal-text {
font-size: 13px;
color: var(--text-secondary);
font-family: var(--font-mono);
line-height: 1.8;
}
/* ══════════════════════════════════════════════════════════════════════
THEME VARIANTS
Set via: (default)
Switch with: document.documentElement.dataset.theme = 'midnight';
══════════════════════════════════════════════════════════════════════ */
/* ── Midnight Theme ────────────────────────────────────────────────── */
[data-theme="midnight"] {
--bg-primary: #0b0d1a;
--bg-secondary: #111428;
--bg-card: rgba(17, 20, 40, 0.85);
--bg-header: rgba(11, 13, 26, 0.95);
--border-primary: #1e2850;
--border-hover: #2e3e6a;
--border-subtle: rgba(255, 255, 255, 0.05);
--accent-primary: #4a90e2;
--accent-secondary: #5ba0f2;
--accent-safe: #34d399;
--accent-alert: #f87171;
--accent-warning: #fbbf24;
--accent-governance: #818cf8;
--text-primary: #cbd5e1;
--text-secondary: #64748b;
--text-heading: #e2e8f0;
--text-muted: #475569;
--text-on-accent: #ffffff;
}
/* ── Emerald Theme ─────────────────────────────────────────────────── */
[data-theme="emerald"] {
--bg-primary: #071210;
--bg-secondary: #0c1b17;
--bg-card: rgba(12, 27, 23, 0.85);
--bg-header: rgba(7, 18, 16, 0.95);
--border-primary: #14342c;
--border-hover: #1e5045;
--border-subtle: rgba(255, 255, 255, 0.05);
--accent-primary: #10b981;
--accent-secondary: #6ee7b7;
--accent-safe: #22c55e;
--accent-alert: #ef4444;
--accent-warning: #f59e0b;
--accent-governance: #6366f1;
--text-primary: #c2d8d0;
--text-secondary: #6d8f84;
--text-heading: #e0f0ea;
--text-muted: #4a6d62;
--text-on-accent: #ffffff;
}
/* ── Amber Theme ───────────────────────────────────────────────────── */
[data-theme="amber"] {
--bg-primary: #12100a;
--bg-secondary: #1a1710;
--bg-card: rgba(26, 23, 16, 0.85);
--bg-header: rgba(18, 16, 10, 0.95);
--border-primary: #332a18;
--border-hover: #4d3f25;
--border-subtle: rgba(255, 255, 255, 0.05);
--accent-primary: #d97706;
--accent-secondary: #fbbf24;
--accent-safe: #22c55e;
--accent-alert: #ef4444;
--accent-warning: #f59e0b;
--accent-governance: #6366f1;
--text-primary: #d4c8b0;
--text-secondary: #8c7d62;
--text-heading: #ede4d0;
--text-muted: #6b5e46;
--text-on-accent: #ffffff;
}
/* ── Crimson Theme ─────────────────────────────────────────────────── */
[data-theme="crimson"] {
--bg-primary: #120a0e;
--bg-secondary: #1a1015;
--bg-card: rgba(26, 16, 21, 0.85);
--bg-header: rgba(18, 10, 14, 0.95);
--border-primary: #331828;
--border-hover: #4d253d;
--border-subtle: rgba(255, 255, 255, 0.05);
--accent-primary: #e11d48;
--accent-secondary: #fb7185;
--accent-safe: #22c55e;
--accent-alert: #ef4444;
--accent-warning: #fbbf24;
--accent-governance: #818cf8;
--text-primary: #d4b8c4;
--text-secondary: #8c6278;
--text-heading: #ede0e6;
--text-muted: #6b4658;
--text-on-accent: #ffffff;
}
/* ── Light Theme ───────────────────────────────────────────────────── */
[data-theme="light"] {
--bg-primary: #f0f2f5;
--bg-secondary: #e5e7eb;
--bg-tertiary: #d1d5db;
--bg-card: rgba(255, 255, 255, 0.9);
--bg-header: rgba(10, 14, 26, 0.97); /* header always dark, even in light mode */
--border-primary: #d1d5db;
--border-hover: #9ca3af;
--border-subtle: rgba(0, 0, 0, 0.07);
--accent-primary: #2563eb;
--accent-secondary: #3a7bd0;
--accent-safe: #16a34a;
--accent-alert: #dc2626;
--accent-warning: #d97706;
--accent-governance: #4f46e5;
--text-primary: #374151;
--text-secondary: #6b7280;
--text-heading: #111827;
--text-muted: #9ca3af;
--text-on-accent: #ffffff;
/* Surface tokens — light theme flips */
--surface-0: #f0f2f5; --surface-0-border: rgba(0,0,0,0.07); --text-on-0: #374151; --text-muted-on-0: #6b7280;
--surface-1: #ffffff; --surface-1-border: rgba(0,0,0,0.08); --text-on-1: #1f2937; --text-muted-on-1: #6b7280;
--surface-2: #f8fafc; --surface-2-border: rgba(0,0,0,0.08); --text-on-2: #1f2937; --text-muted-on-2: #64748b;
--surface-3: #ffffff; --surface-3-border: rgba(0,0,0,0.10); --text-on-3: #111827; --text-muted-on-3: #6b7280;
--surface-4: #ffffff; --surface-4-border: rgba(0,0,0,0.12); --text-on-4: #111827; --text-muted-on-4: #6b7280;
--hover-overlay: rgba(0,0,0,0.04); --active-overlay: rgba(0,0,0,0.07); --focus-ring: rgba(37,99,235,0.4);
/* Sidebar tokens — light theme keeps sidebar DARK (sidebar never flips to light) */
--sidebar-bg: #12121a; --sidebar-border: rgba(255,255,255,0.08);
--sidebar-text: rgba(255,255,255,0.72); --sidebar-text-muted: rgba(255,255,255,0.40);
--sidebar-text-heading: #e2e6ef; --sidebar-hover-bg: rgba(255,255,255,0.05);
--sidebar-active-bg: rgba(74,144,226,0.20); --sidebar-active-text: #4a90e2;
--sidebar-section-text: rgba(255,255,255,0.38);
}
/* ── Theme Nav Toggle (header dropdown) ───────────────────────────── */
#theme-nav-toggle {
position: relative;
cursor: pointer;
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
transition: color 0.2s;
user-select: none;
}
#theme-nav-toggle:hover {
color: var(--text-heading);
}
.theme-nav-dropdown {
position: absolute;
top: calc(100% + 12px);
right: -12px;
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius-md);
padding: 8px 0;
min-width: 180px;
z-index: 200;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.theme-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
cursor: pointer;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
transition: background 0.15s, color 0.15s;
}
.theme-nav-item:hover {
background: rgba(74, 144, 226, 0.08);
color: var(--text-heading);
}
.theme-nav-item.active {
color: var(--accent-primary);
}
.theme-nav-item.active::after {
content: '✓';
margin-left: auto;
font-size: 10px;
}
.theme-nav-swatch {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* ── Mobile Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
.theme-header {
padding: 12px 20px;
}
.theme-nav {
gap: 16px;
}
.theme-nav a {
font-size: 11px;
}
.btn {
padding: 10px 18px;
font-size: 12px;
}
}
@media (max-width: 480px) {
.theme-header {
padding: 10px 16px;
}
.theme-nav {
gap: 12px;
}
.theme-nav a {
font-size: 10px;
letter-spacing: 0.05em;
}
}
/* ============================================================
CONTRAST GUARD -- WCAG 4.5:1 minimum enforcement
These !important rules override any per-component color that
would produce white-on-white or black-on-dark failures.
Targets: sidebar text, veto/alert banners, ledger tables.
IMPORTANT: The sidebar is ALWAYS dark regardless of page theme.
Sidebar text rules therefore ALWAYS use --sidebar-text (light
values) and must NEVER be overridden with dark colors from the
light theme token set.
============================================================ */
/* ── Sidebar: guaranteed light text on always-dark sidebar background ── */
/* Nav items, section labels, nav text use sidebar-specific tokens */
.sidebar .nav-item-label,
.sidebar .section-label,
.sidebar [class*="nav-text"],
.sidebar [class*="sidebar-label"] {
color: var(--sidebar-text) !important;
}
/* Chat history items that may appear inside sidebar */
.sidebar .chat-history-item .chat-title,
.sidebar .chat-history-item .chat-meta {
color: var(--sidebar-text) !important;
}
/* User name/email — scoped to .sidebar so non-sidebar usage inherits page theme */
.sidebar .user-name,
.sidebar-footer .user-name {
color: #e0e0e0 !important;
}
.sidebar .user-email,
.sidebar-footer .user-email {
color: rgba(255, 255, 255, 0.55) !important;
}
/* Chat history items outside sidebar still need readable text */
.chat-history-item .chat-title,
.chat-history-item .chat-meta {
color: var(--text-primary) !important;
}
/* ── Sidebar global dark guard — force dark bg in ALL themes ── */
/* This prevents any per-page light-theme body/container rules from
leaking a light background onto the sidebar. */
.sidebar,
#sidebar,
#shared-sidebar {
background: #12121a !important;
background-color: #12121a !important;
color: rgba(255, 255, 255, 0.88) !important;
border-right-color: rgba(255, 255, 255, 0.08) !important;
}
/* Light theme explicit override — belt + suspenders */
[data-theme="light"] .sidebar,
[data-theme="light"] #sidebar,
[data-theme="light"] #shared-sidebar {
background: #12121a !important;
background-color: #12121a !important;
color: rgba(255, 255, 255, 0.88) !important;
}
/* Propagate color to all direct children so nothing inherits page-body color */
.sidebar *,
#sidebar *,
#shared-sidebar * {
color: inherit;
}
/* Nav items explicit color so inherited color works correctly */
.sidebar .nav-item,
#sidebar .nav-item {
color: rgba(255, 255, 255, 0.88);
}
.sidebar .nav-item:hover,
#sidebar .nav-item:hover {
background: rgba(255, 255, 255, 0.07);
color: #ffffff;
}
.sidebar .nav-section-title,
#sidebar .nav-section-title {
color: rgba(255, 255, 255, 0.60);
}
.sidebar .nav-section-title:hover,
#sidebar .nav-section-title:hover {
background: rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.80);
}
/* ── Veto / alert banners: always high contrast ── */
[class*="veto-"][class*="hard"],
[class*="charter-block"],
[class*="hard-block"],
.alert-banner,
.degraded-mode-banner {
color: #ffffff !important;
}
[class*="soft-block"],
.warning-banner {
color: var(--text-primary, #e5e7eb) !important;
}
/* ── Ledger / governance tables ── */
.ledger-table td,
.ledger-table th,
[class*="claims-table"] td,
[class*="claims-table"] th,
.governance-table td,
.governance-table th {
color: var(--text-primary) !important;
}
/* ── Light theme: enforce dark text on formerly-white page surfaces ── */
/* NOTE: .chat-history-title intentionally excluded — sidebar stays dark regardless of theme */
[data-theme="light"] .user-name,
[data-theme="light"] .user-email {
color: #111827 !important;
}
/* Chat history title — always light on dark sidebar background */
.sidebar .chat-history-item .chat-history-title,
#sidebar .chat-history-item .chat-history-title,
[data-theme="light"] .sidebar .chat-history-item .chat-history-title,
[data-theme="light"] #sidebar .chat-history-item .chat-history-title {
color: rgba(255, 255, 255, 0.85) !important;
}
/* Chat history hover — full white on dark sidebar */
.sidebar .chat-history-item:hover .chat-history-title,
#sidebar .chat-history-item:hover .chat-history-title {
color: #ffffff !important;
}
/* Sidebar footer user info — always light text (dark bg) */
.sidebar-footer .user-name,
[data-theme="light"] .sidebar-footer .user-name {
color: #e0e0e0 !important;
}
.sidebar-footer .user-email,
[data-theme="light"] .sidebar-footer .user-email {
color: rgba(255, 255, 255, 0.55) !important;
}
[data-theme="light"] .ledger-table td,
[data-theme="light"] .ledger-table th,
[data-theme="light"] [class*="claims-table"] td,
[data-theme="light"] [class*="claims-table"] th,
[data-theme="light"] .governance-table td,
[data-theme="light"] .governance-table th {
color: #111827 !important;
}