/* ============================================================ LIGHT MODE - Complete Override System ============================================================ Selector: [data-theme="light"] on This file MUST load LAST in the CSS chain to override: - visionos-polish.css (unscoped dark-mode !important rules) - layout.css (dark backgrounds, white text) - modern-ui.css (dark card/button defaults) All rules use !important to beat visionos-polish.css specificity. ============================================================ */ /* ===== LIGHT MODE CSS VARIABLES ===== */ /* Already defined in base.css [data-theme="light"] block, but some components reference raw colors instead of variables. These overrides catch everything. */ /* ===== GLOBAL BACKGROUND & TEXT RESET ===== */ /* Override visionos-polish.css body background */ [data-theme="light"] body { background: #f5f7fa !important; color: #0e143e !important; } /* Override visionos-polish.css global text color on body, p, span, div, label */ [data-theme="light"] body, [data-theme="light"] p, [data-theme="light"] span, [data-theme="light"] div, [data-theme="light"] label, [data-theme="light"] .text, [data-theme="light"] .description { color: #0e143e; } /* Override visionos-polish.css heading/title white !important */ [data-theme="light"] .section-title, [data-theme="light"] .rail-title, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] strong, [data-theme="light"] .hero-title, [data-theme="light"] .category-title, [data-theme="light"] .help-card h4, [data-theme="light"] .section-title-premium, [data-theme="light"] .category-group-title, [data-theme="light"] .category-item-title, [data-theme="light"] .hero-issue-title, [data-theme="light"] .guided-option-name { color: #0e143e !important; } /* Override visionos-polish.css subtitle/secondary white !important */ [data-theme="light"] .section-subtle, [data-theme="light"] .helper-card .section-subtle, [data-theme="light"] .rail-card .section-subtle, [data-theme="light"] .help-card .section-subtle, [data-theme="light"] p.hero-subtitle, [data-theme="light"] .search-helper, [data-theme="light"] .hero-subtitle, [data-theme="light"] .category-group-count, [data-theme="light"] .category-item-sub, [data-theme="light"] .hero-issue-sub, [data-theme="light"] .quick-tool-label, [data-theme="light"] .section-subtitle, [data-theme="light"] .guided-option-abbrev { color: #495057 !important; } /* Override visionos-polish.css details white color */ [data-theme="light"] details, [data-theme="light"] details summary, [data-theme="light"] details summary div { color: #0e143e !important; } /* Override visionos-polish.css mobile menu items */ [data-theme="light"] .mobile-menu-item span, [data-theme="light"] .mobile-menu-title, [data-theme="light"] .mobile-menu-section label { color: #0e143e !important; } /* Override visionos-polish.css suggestions row */ [data-theme="light"] .suggestions-row, [data-theme="light"] .suggestions-row * { color: #0e143e !important; } /* Override visionos-polish.css recent list */ [data-theme="light"] .recent-list, [data-theme="light"] .recent-list * { color: #0e143e !important; } /* Override visionos-polish.css modal text */ [data-theme="light"] .modal, [data-theme="light"] .modal * { color: #0e143e; } /* Override visionos-polish.css status text */ [data-theme="light"] #online-status, [data-theme="light"] #status-text { color: #495057 !important; } /* ===== AMBIENT BACKGROUND ===== */ /* Override visionos-polish.css dark radial gradient on body */ [data-theme="light"] .ambient-bg { background: radial-gradient(900px 520px at 18% -10%, rgba(0, 175, 210, 0.06), transparent 65%), radial-gradient(740px 420px at 88% -6%, rgba(14, 20, 62, 0.04), transparent 62%), radial-gradient(640px 300px at 50% 98%, rgba(0, 175, 210, 0.03), transparent 70%) !important; } /* ===== HEADER ===== */ /* header.css already handles [data-theme="light"] .header */ /* But we need to fix the header controls that visionos-polish breaks */ [data-theme="light"] .header-greeting { color: var(--text-secondary) !important; } [data-theme="light"] .header-greeting .assistant-name { color: var(--accent) !important; } /* ===== BUTTONS ===== */ /* Override visionos-polish.css button white color */ [data-theme="light"] .btn-primary, [data-theme="light"] .btn-secondary, [data-theme="light"] button { color: #0e143e !important; } /* Buttons that SHOULD keep white text (colored backgrounds) */ [data-theme="light"] .search-btn, [data-theme="light"] .btn-primary, [data-theme="light"] button.primary, [data-theme="light"] .btn.primary, [data-theme="light"] .nda-accept-btn, [data-theme="light"] .wo-action-btn.primary, [data-theme="light"] .primary-btn, [data-theme="light"] .mode-btn.active, [data-theme="light"] .settings-mode-btn.active, [data-theme="light"] .qr-category-pill.active, [data-theme="light"] .filter-chip.active, [data-theme="light"] .search-premium-btn, [data-theme="light"] .builder-btn.primary { color: #ffffff !important; } /* Header icon buttons */ [data-theme="light"] .btn-icon { background: rgba(14, 20, 62, 0.08) !important; color: var(--jfp-navy) !important; } [data-theme="light"] .btn-icon:hover { background: var(--accent-cta) !important; color: #fff !important; } /* Hamburger hover fix */ [data-theme="light"] .hamburger-btn:hover span { background: #fff !important; } /* ===== INPUT FIELDS ===== */ /* Override visionos-polish.css white text + dark background on inputs */ [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select, [data-theme="light"] .input-field { color: #0e143e !important; background: #ffffff !important; border-color: rgba(14, 20, 62, 0.15) !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #757575 !important; } /* Theme toggle hidden checkbox - don't mess with it */ [data-theme="light"] .theme-toggle input, [data-theme="light"] .settings-toggle-switch input { background: transparent !important; border-color: transparent !important; } /* ===== SEARCH BOX ===== */ [data-theme="light"] .search-box { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.12) !important; box-shadow: 0 2px 8px rgba(14, 20, 62, 0.08) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="light"] .search-box:focus-within { border-color: var(--accent) !important; box-shadow: 0 2px 12px rgba(0, 175, 210, 0.15), 0 0 0 3px rgba(0, 175, 210, 0.1) !important; } [data-theme="light"] .search-box input { color: #0e143e !important; background: transparent !important; border-color: transparent !important; } [data-theme="light"] .search-box input::placeholder { color: #757575 !important; } [data-theme="light"] .search-btn { background: var(--accent-cta) !important; box-shadow: 0 2px 8px rgba(0, 175, 210, 0.3) !important; } [data-theme="light"] .search-btn:hover { background: var(--accent-hover) !important; box-shadow: 0 4px 12px rgba(0, 175, 210, 0.4) !important; } /* Premium search override */ [data-theme="light"] .search-premium { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.12) !important; box-shadow: 0 2px 8px rgba(14, 20, 62, 0.08) !important; } [data-theme="light"] .search-premium input { color: #0e143e !important; background: transparent !important; } [data-theme="light"] .search-premium input::placeholder { color: #757575 !important; } /* ===== FILTER CHIPS (Vendor / Equipment pills) ===== */ [data-theme="light"] .filter-chip { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.15) !important; color: #495057 !important; } [data-theme="light"] .filter-chip:hover { background: rgba(0, 175, 210, 0.06) !important; border-color: var(--accent-cta) !important; color: var(--accent-cta) !important; } [data-theme="light"] .filter-chip.active { background: var(--accent-cta) !important; color: #ffffff !important; border-color: var(--accent-cta) !important; } /* Filter label text */ [data-theme="light"] .context-filters div[style*="color: var(--text-tertiary)"] { color: #757575 !important; } /* Active filter display */ [data-theme="light"] #active-filter-display { background: rgba(0, 175, 210, 0.08) !important; border-color: rgba(0, 175, 210, 0.3) !important; color: #0e143e !important; } /* ===== WORK ORDER INLINE ROW ===== */ [data-theme="light"] .wo-inline { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.12) !important; } [data-theme="light"] .wo-inline input { color: #0e143e !important; background: transparent !important; border-color: transparent !important; } [data-theme="light"] .wo-inline input::placeholder { color: #757575 !important; } [data-theme="light"] .wo-skip-btn { color: #757575 !important; } [data-theme="light"] .wo-skip-btn:hover { color: var(--accent) !important; } /* WO section and context panel */ [data-theme="light"] .wo-section { background: linear-gradient(135deg, #ffffff 0%, rgba(24, 144, 215, 0.03) 100%) !important; } [data-theme="light"] .wo-info-card { background: #f8f9fa !important; } [data-theme="light"] .wo-history-section { background: #f8f9fa !important; } [data-theme="light"] .wo-history-item { background: #ffffff !important; } /* Override visionos-polish WO prominent */ [data-theme="light"] .wo-lookup-prominent { background: rgba(0, 175, 210, 0.06) !important; border-color: rgba(0, 175, 210, 0.25) !important; } [data-theme="light"] .wo-lookup-prominent .wo-title { color: #0e143e !important; } [data-theme="light"] .wo-lookup-prominent input { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.15) !important; color: #0e143e !important; } /* ===== QUICK CARDS (Common Issues) ===== */ [data-theme="light"] .quick-card { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; box-shadow: 0 2px 8px rgba(14, 20, 62, 0.06) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="light"] .quick-card:hover { border-color: var(--accent-cta) !important; box-shadow: 0 4px 16px rgba(0, 175, 210, 0.12) !important; transform: translateY(-2px); } [data-theme="light"] .quick-card-icon { /* Emojis are fine as-is */ } [data-theme="light"] .quick-card-title { color: #0e143e !important; } [data-theme="light"] .quick-card-desc { color: #495057 !important; } /* Diagnostic tiles light mode */ [data-theme="light"] .diag-tile { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; box-shadow: 0 2px 8px rgba(14, 20, 62, 0.06) !important; } [data-theme="light"] .diag-tile:hover { border-color: var(--accent-cta) !important; box-shadow: 0 4px 16px rgba(0, 175, 210, 0.12) !important; } [data-theme="light"] .diag-tile-label { color: #0e143e !important; } /* Section labels */ [data-theme="light"] .section-label { color: #757575 !important; } /* ===== TOOLS ROW (Quick Reference, Wiring, Guided Flow links) ===== */ [data-theme="light"] .tool-link { color: var(--accent) !important; } [data-theme="light"] .tool-link:hover { opacity: 0.8; } /* ===== CARD TOOLTIPS ===== */ [data-theme="light"] .card-tooltip { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.12) !important; box-shadow: 0 8px 32px rgba(14, 20, 62, 0.15) !important; } [data-theme="light"] .card-tooltip::after { border-top-color: rgba(14, 20, 62, 0.12) !important; } [data-theme="light"] .quick-card.tooltip-flip .card-tooltip::after { border-top-color: transparent !important; border-bottom-color: rgba(14, 20, 62, 0.12) !important; } [data-theme="light"] .card-tooltip-heading { color: var(--accent-cta) !important; } [data-theme="light"] .card-tooltip-text { color: #495057 !important; } /* ===== CARDS (Generic) ===== */ [data-theme="light"] .card, [data-theme="light"] .glass-card { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; color: #0e143e !important; box-shadow: 0 2px 8px rgba(14, 20, 62, 0.06) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="light"] .card::before { display: none !important; } [data-theme="light"] .card:hover, [data-theme="light"] .glass-card:hover { border-color: var(--accent-cta) !important; box-shadow: 0 4px 16px rgba(0, 175, 210, 0.1) !important; } [data-theme="light"] .card h2, [data-theme="light"] .card h3, [data-theme="light"] .glass-card h2, [data-theme="light"] .glass-card h3 { color: #0e143e !important; } [data-theme="light"] .card p, [data-theme="light"] .glass-card p { color: #495057 !important; } /* Hero card override */ [data-theme="light"] .card.hero-card, [data-theme="light"] .hero-card { background: #ffffff !important; border-color: rgba(0, 175, 210, 0.2) !important; box-shadow: 0 4px 16px rgba(14, 20, 62, 0.08) !important; } [data-theme="light"] .hero-card-premium { background: #ffffff !important; border-color: rgba(0, 175, 210, 0.15) !important; box-shadow: 0 4px 20px rgba(14, 20, 62, 0.08) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="light"] .hero-card-premium::before, [data-theme="light"] .hero-card-premium::after { display: none !important; } /* ===== HELPER / RAIL / HELP / TIP / BUILDER CARDS ===== */ /* Override visionos-polish.css dark navy backgrounds */ [data-theme="light"] .helper-card, [data-theme="light"] .rail-card, [data-theme="light"] .help-card, [data-theme="light"] .tip-card, [data-theme="light"] details.builder-premium summary, [data-theme="light"] details.builder-premium > div { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; color: #0e143e !important; } [data-theme="light"] .tip-card, [data-theme="light"] .tip-card * { color: #0e143e !important; } [data-theme="light"] .help-card ul li { color: #495057 !important; } [data-theme="light"] .help-link, [data-theme="light"] .help-card button, [data-theme="light"] .help-actions button { background: rgba(0, 175, 210, 0.08) !important; color: #0e143e !important; border-color: rgba(0, 175, 210, 0.2) !important; } [data-theme="light"] .help-link:hover, [data-theme="light"] .help-card button:hover, [data-theme="light"] .help-actions button:hover { background: rgba(0, 175, 210, 0.15) !important; color: #0e143e !important; } [data-theme="light"] .builder-card { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; } [data-theme="light"] .builder-btn { color: #0e143e !important; background: rgba(0, 175, 210, 0.08) !important; border-color: rgba(0, 175, 210, 0.2) !important; } [data-theme="light"] .builder-btn.primary { color: #ffffff !important; } /* ===== WIZARD CARD ===== */ [data-theme="light"] .wizard-card { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; box-shadow: 0 2px 12px rgba(14, 20, 62, 0.08) !important; backdrop-filter: none !important; } [data-theme="light"] .wizard-card .hint { color: #757575 !important; } /* ===== DOCK ===== */ [data-theme="light"] .dock { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; box-shadow: 0 2px 8px rgba(14, 20, 62, 0.06) !important; backdrop-filter: none !important; } /* ===== CATEGORY CARDS (layout.css) ===== */ [data-theme="light"] .category-card { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; box-shadow: 0 2px 8px rgba(14, 20, 62, 0.06) !important; backdrop-filter: none !important; } [data-theme="light"] .category-card:hover { border-color: rgba(0, 175, 210, 0.4) !important; box-shadow: 0 4px 16px rgba(0, 175, 210, 0.1) !important; } [data-theme="light"] .category-card.primary { border-color: rgba(0, 175, 210, 0.3) !important; background: rgba(0, 175, 210, 0.04) !important; } [data-theme="light"] .category-title { color: #0e143e !important; } [data-theme="light"] .category-sub { color: #757575 !important; } [data-theme="light"] .category-label { color: #0e143e !important; } [data-theme="light"] .category-desc { color: #495057 !important; } [data-theme="light"] .category-icon { background: #f0f2f5 !important; } /* ===== CATEGORY GROUP (VisionOS hierarchical) ===== */ [data-theme="light"] .category-group { background: rgba(14, 20, 62, 0.02) !important; border-color: rgba(14, 20, 62, 0.08) !important; } [data-theme="light"] .category-group:hover { background: rgba(14, 20, 62, 0.03) !important; border-color: rgba(0, 175, 210, 0.15) !important; } [data-theme="light"] .category-group-header { color: #0e143e !important; } [data-theme="light"] .category-group-header:hover { background: rgba(0, 175, 210, 0.04) !important; } [data-theme="light"] .category-group-title { color: #0e143e !important; } [data-theme="light"] .category-group-count { color: #757575 !important; } [data-theme="light"] .category-group-chevron { color: #757575 !important; } [data-theme="light"] .category-group-icon { background: linear-gradient(135deg, rgba(0, 175, 210, 0.1) 0%, rgba(0, 100, 200, 0.06) 100%) !important; border-color: rgba(0, 175, 210, 0.15) !important; } [data-theme="light"] .category-item { background: rgba(14, 20, 62, 0.02) !important; border-color: rgba(14, 20, 62, 0.06) !important; } [data-theme="light"] .category-item:hover { background: rgba(0, 175, 210, 0.06) !important; border-color: rgba(0, 175, 210, 0.2) !important; } [data-theme="light"] .category-item-title { color: #0e143e !important; } [data-theme="light"] .category-item-sub { color: #757575 !important; } /* ===== HERO ISSUE BUTTONS ===== */ [data-theme="light"] .hero-issue-btn { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; } [data-theme="light"] .hero-issue-btn:hover { background: rgba(0, 175, 210, 0.04) !important; border-color: rgba(0, 175, 210, 0.3) !important; } [data-theme="light"] .hero-issue-btn .hero-issue-title { color: #0e143e !important; } [data-theme="light"] .hero-issue-btn .hero-issue-sub { color: #757575 !important; } /* ===== MODE TABS ===== */ [data-theme="light"] .mode-tabs { background: #f0f2f5 !important; border-color: rgba(14, 20, 62, 0.08) !important; } [data-theme="light"] .mode-tab { color: #495057 !important; } [data-theme="light"] .mode-tab:hover:not(.active) { color: #0e143e !important; background: rgba(14, 20, 62, 0.04) !important; } /* ===== MODE SELECTOR + MODE BUTTONS ===== */ [data-theme="light"] .mode-selector { background: #f0f2f5 !important; } [data-theme="light"] .mode-btn { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.12) !important; color: #495057 !important; } [data-theme="light"] .mode-btn:hover { color: var(--accent-cta) !important; background: rgba(0, 175, 210, 0.06) !important; border-color: rgba(0, 175, 210, 0.3) !important; } [data-theme="light"] .mode-btn.active { background: linear-gradient(135deg, var(--accent-cta) 0%, var(--accent) 100%) !important; color: #ffffff !important; border-color: transparent !important; } /* ===== ADVANCED/EXPERT PANELS (Insight + Live Widget) ===== */ /* insight-panel already has [data-theme="light"] in modals.css but need to override visionos-polish too */ [data-theme="light"] .insight-panel { background: #ffffff !important; border-color: rgba(24, 144, 215, 0.15) !important; box-shadow: 0 2px 12px rgba(14, 20, 62, 0.06) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: none !important; } [data-theme="light"] .insight-panel::before { display: none !important; } [data-theme="light"] .insight-panel:hover { border-color: rgba(24, 144, 215, 0.3) !important; box-shadow: 0 4px 20px rgba(24, 144, 215, 0.1) !important; } [data-theme="light"] .insight-title { background: linear-gradient(135deg, var(--jfp-navy) 0%, var(--jfp-blue-dark) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } [data-theme="light"] .insight-subtitle { color: #495057 !important; } [data-theme="light"] .insight-stat { background: rgba(24, 144, 215, 0.05) !important; border-color: rgba(24, 144, 215, 0.12) !important; } [data-theme="light"] .insight-stat::before { display: none !important; } [data-theme="light"] .insight-stat:hover { background: rgba(24, 144, 215, 0.08) !important; border-color: rgba(24, 144, 215, 0.25) !important; } [data-theme="light"] .insight-stat-value { color: var(--accent-cta) !important; text-shadow: none !important; } [data-theme="light"] .insight-stat-label { color: #757575 !important; } /* Live Widget */ [data-theme="light"] .live-widget { background: #ffffff !important; border-color: rgba(24, 144, 215, 0.12) !important; box-shadow: 0 2px 12px rgba(14, 20, 62, 0.06) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="light"] .live-widget::before { display: none !important; } [data-theme="light"] .live-widget:hover { border-color: rgba(24, 144, 215, 0.3) !important; box-shadow: 0 4px 20px rgba(24, 144, 215, 0.08) !important; } [data-theme="light"] .live-widget-header span { color: #0e143e !important; } [data-theme="light"] .live-indicator { color: #757575 !important; } [data-theme="light"] .live-indicator span { color: #757575 !important; } /* Station lookup input (expert mode) */ [data-theme="light"] #station-lookup { background: #f8f9fa !important; border-color: rgba(14, 20, 62, 0.12) !important; color: #0e143e !important; } [data-theme="light"] #station-autocomplete { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.12) !important; box-shadow: 0 4px 12px rgba(14, 20, 62, 0.1) !important; } [data-theme="light"] #station-status { color: #757575 !important; } /* Elastic query textarea */ [data-theme="light"] #elastic-query { background: #f8f9fa !important; border-color: rgba(14, 20, 62, 0.12) !important; color: #0e143e !important; } /* Weather advisory */ [data-theme="light"] #weather-advisory { background: #f8f9fa !important; color: #495057 !important; } /* ===== QUICK TOOL BUTTONS (VisionOS) ===== */ [data-theme="light"] .quick-tool-btn { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.08) !important; } [data-theme="light"] .quick-tool-btn:hover { background: rgba(0, 175, 210, 0.04) !important; border-color: rgba(0, 175, 210, 0.2) !important; } [data-theme="light"] .quick-tool-icon { background: linear-gradient(135deg, rgba(0, 175, 210, 0.08) 0%, rgba(0, 100, 200, 0.04) 100%) !important; border-color: rgba(0, 175, 210, 0.1) !important; } [data-theme="light"] .quick-tool-label { color: #0e143e !important; } /* ===== SIDE MENU ===== */ [data-theme="light"] .side-menu { background: #ffffff !important; border-right: 1px solid rgba(14, 20, 62, 0.1) !important; } [data-theme="light"] .side-menu-header { color: #0e143e !important; border-bottom-color: rgba(14, 20, 62, 0.1) !important; } [data-theme="light"] .side-menu-header h2 { color: #0e143e !important; } [data-theme="light"] .side-menu-header .btn-icon { color: #495057 !important; } [data-theme="light"] .side-menu-section { border-bottom-color: rgba(14, 20, 62, 0.08) !important; } [data-theme="light"] .side-menu-title { color: #757575 !important; } [data-theme="light"] .side-menu-item { color: #0e143e !important; } [data-theme="light"] .side-menu-item:hover { color: var(--accent) !important; } /* ===== SETTINGS POPOUT ===== */ [data-theme="light"] .settings-popout { background: #ffffff !important; box-shadow: 0 20px 60px rgba(14, 20, 62, 0.15) !important; } [data-theme="light"] .settings-popout-header { background: linear-gradient(135deg, rgba(0, 175, 210, 0.08) 0%, rgba(14, 20, 62, 0.04) 100%) !important; } [data-theme="light"] .settings-popout-name { color: #0e143e !important; } [data-theme="light"] .settings-popout-email { color: #495057 !important; } [data-theme="light"] .settings-popout-close { color: #757575 !important; } [data-theme="light"] .settings-popout-close:hover { color: #0e143e !important; } [data-theme="light"] .settings-popout-row { border-bottom-color: rgba(14, 20, 62, 0.06) !important; } [data-theme="light"] .settings-popout-label { color: #495057 !important; } [data-theme="light"] .settings-popout-select { background: #f8f9fa !important; border-color: rgba(14, 20, 62, 0.12) !important; color: #0e143e !important; } [data-theme="light"] .settings-popout-hint { color: var(--accent) !important; } [data-theme="light"] .settings-mode-btn { background: #f8f9fa !important; border-color: rgba(14, 20, 62, 0.12) !important; color: #0e143e !important; } [data-theme="light"] .settings-toggle-slider { background: rgba(14, 20, 62, 0.15) !important; } [data-theme="light"] .settings-popout-auth-btn { background: #f8f9fa !important; border-color: rgba(14, 20, 62, 0.12) !important; color: #0e143e !important; } [data-theme="light"] .settings-popout-auth-btn:hover { background: var(--accent-cta) !important; color: #ffffff !important; border-color: var(--accent-cta) !important; } [data-theme="light"] .settings-popout-footer { color: #757575 !important; border-top-color: rgba(14, 20, 62, 0.06) !important; } /* ===== NDA MODAL ===== */ [data-theme="light"] .nda-modal-content { background: #ffffff !important; box-shadow: 0 20px 60px rgba(14, 20, 62, 0.15) !important; } [data-theme="light"] .nda-modal-body { color: #0e143e !important; } [data-theme="light"] .nda-modal-body p, [data-theme="light"] .nda-modal-body li { color: #0e143e !important; } [data-theme="light"] .nda-signature-input { background: #f8f9fa !important; color: #0e143e !important; border-color: rgba(14, 20, 62, 0.15) !important; } [data-theme="light"] .nda-signature-legal { color: #757575 !important; } [data-theme="light"] .nda-signature-label { color: #0e143e !important; } /* ===== WELCOME MODAL ===== */ [data-theme="light"] .welcome-modal h2, [data-theme="light"] [data-modal="welcome"] h2 { color: #0e143e !important; } [data-theme="light"] .welcome-modal p, [data-theme="light"] [data-modal="welcome"] p { color: #495057 !important; } /* ===== GUIDED ISSUE MODAL ===== */ [data-theme="light"] .guided-issue-card { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; } [data-theme="light"] .guided-issue-header { border-bottom-color: rgba(14, 20, 62, 0.1) !important; } [data-theme="light"] .guided-issue-footer { border-top-color: rgba(14, 20, 62, 0.1) !important; } [data-theme="light"] .guided-issue-card .btn-icon { color: #495057 !important; } [data-theme="light"] .guided-option { background: rgba(14, 20, 62, 0.02) !important; border-color: rgba(14, 20, 62, 0.08) !important; } [data-theme="light"] .guided-option:hover { background: rgba(0, 175, 210, 0.05) !important; border-color: rgba(0, 175, 210, 0.2) !important; } [data-theme="light"] .guided-option.selected { background: rgba(0, 175, 210, 0.1) !important; border-color: rgba(0, 175, 210, 0.4) !important; box-shadow: 0 0 12px rgba(0, 175, 210, 0.1) !important; } [data-theme="light"] .guided-option-name { color: #0e143e !important; } [data-theme="light"] .guided-option-abbrev { color: #757575 !important; } [data-theme="light"] .guided-step + .guided-step { border-top-color: rgba(14, 20, 62, 0.08) !important; } /* ===== DIAGNOSTIC MODAL ===== */ [data-theme="light"] .diagnostic-modal-content { background: #ffffff !important; } [data-theme="light"] .diagnostic-modal-header { border-bottom-color: rgba(14, 20, 62, 0.1) !important; } [data-theme="light"] .diagnostic-modal-header h3 { color: #0e143e !important; } [data-theme="light"] .diagnostic-modal-header .close-btn { color: #757575 !important; } [data-theme="light"] .diag-action-btn { background: #f8f9fa !important; border-color: rgba(14, 20, 62, 0.1) !important; } [data-theme="light"] .diag-action-btn:hover { background: #e9ecef !important; border-color: var(--accent) !important; } [data-theme="light"] .diag-btn-title { color: #0e143e !important; } [data-theme="light"] .diag-btn-desc { color: #495057 !important; } /* ===== HELP MODAL ===== */ [data-theme="light"] .help-modal { background: rgba(14, 20, 62, 0.3) !important; } [data-theme="light"] .help-modal-card { background: #ffffff !important; box-shadow: 0 20px 60px rgba(14, 20, 62, 0.15) !important; } [data-theme="light"] .help-panel { background: #f8f9fa !important; border-color: rgba(14, 20, 62, 0.08) !important; } [data-theme="light"] .help-panel h5 { color: #0e143e !important; } [data-theme="light"] .help-panel p { color: #495057 !important; } /* ===== ANSWER SECTION ===== */ [data-theme="light"] #answer-section { color: #0e143e !important; } [data-theme="light"] #answer-section h2, [data-theme="light"] #answer-section h3 { color: #0e143e !important; } [data-theme="light"] #answer-section p { color: #495057 !important; } [data-theme="light"] #answer-section .card { background: #ffffff !important; } [data-theme="light"] .answer-card { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; } [data-theme="light"] .result-card { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; color: #0e143e !important; } /* ===== QUICK REFERENCE SECTION ===== */ [data-theme="light"] .quick-ref-card { background: #f8f9fa !important; border-color: rgba(14, 20, 62, 0.1) !important; } [data-theme="light"] .quick-ref-card:hover { background: #e9ecef !important; border-color: var(--accent) !important; } [data-theme="light"] .quick-ref-title { color: #0e143e !important; } [data-theme="light"] .quick-ref-desc { color: #495057 !important; } /* QR Card styles */ [data-theme="light"] .qr-card { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; } [data-theme="light"] .qr-card.expanded { border-color: var(--jfp-blue) !important; } [data-theme="light"] .qr-card-header:hover { background: #f8f9fa !important; } [data-theme="light"] .qr-card-title { color: #0e143e !important; } [data-theme="light"] .qr-card-summary { color: #495057 !important; } [data-theme="light"] .qr-expand-icon { color: #757575 !important; } [data-theme="light"] .qr-card-body { border-top-color: rgba(14, 20, 62, 0.08) !important; } [data-theme="light"] .qr-content { color: #495057 !important; } [data-theme="light"] .qr-category-pill { background: #f0f2f5 !important; color: #0e143e !important; } [data-theme="light"] .qr-category-pill:hover { background: #e9ecef !important; } [data-theme="light"] .qr-related-chip { background: #f8f9fa !important; border-color: rgba(14, 20, 62, 0.1) !important; color: #495057 !important; } /* Error code chips */ [data-theme="light"] .error-code-chip { background: rgba(14, 20, 62, 0.06) !important; color: #0e143e !important; } /* ===== WIRING DIAGRAMS / TABLES ===== */ [data-theme="light"] table { color: #0e143e !important; } [data-theme="light"] table th { background: #f0f2f5 !important; color: #0e143e !important; } [data-theme="light"] table td { border-color: rgba(14, 20, 62, 0.1) !important; color: #0e143e !important; } /* ===== WORK ORDER SECTION ===== */ [data-theme="light"] #wo-section { color: #0e143e !important; } [data-theme="light"] #wo-result div { color: #0e143e !important; } /* ===== KNOWLEDGE BASE ===== */ [data-theme="light"] .knowledge-item { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; color: #0e143e !important; } /* ===== COMPLIANCE ===== */ [data-theme="light"] .compliance-card { color: #0e143e !important; } /* ===== LOADING SPINNER ===== */ [data-theme="light"] .spinner { border-color: rgba(14, 20, 62, 0.12) !important; border-top-color: var(--accent-cta) !important; } /* ===== SYNC CACHE BUTTON ===== */ [data-theme="light"] #sync-cache-btn { border-color: rgba(14, 20, 62, 0.15) !important; background: #f8f9fa !important; color: #495057 !important; } [data-theme="light"] #sync-cache-btn:hover { background: #e9ecef !important; } /* ===== VOICE BUTTON ===== */ [data-theme="light"] .voice-btn-active { color: white !important; /* Keep white on red bg */ } /* ===== CONFIDENTIALITY FOOTER ===== */ [data-theme="light"] .confidentiality-footer { background: linear-gradient(135deg, var(--jfp-navy) 0%, #0a1628 100%) !important; color: rgba(255, 255, 255, 0.9) !important; /* Footer stays dark navy for branding - text stays white */ } /* ===== FOOTER ===== */ /* Footer keeps navy background for branding consistency */ [data-theme="light"] .footer { background: var(--jfp-navy) !important; color: rgba(255, 255, 255, 0.85) !important; } [data-theme="light"] .footer * { color: rgba(255, 255, 255, 0.7) !important; } [data-theme="light"] .footer strong { color: rgba(255, 255, 255, 1) !important; } /* ===== VOICE SETTINGS MODAL ===== */ /* Voice settings modal uses inline styles with var() - those already resolve correctly from base.css variables. Override the ones that use fallback colors. */ [data-theme="light"] #voice-settings-modal > div { background: #ffffff !important; color: #0e143e !important; } [data-theme="light"] #voice-settings-modal h2 { color: #0e143e !important; } [data-theme="light"] #voice-settings-modal button[onclick="closeVoiceSettings()"] { color: #495057 !important; } [data-theme="light"] #voice-settings-modal label { color: #0e143e !important; } [data-theme="light"] #voice-settings-modal div[style*="background: var(--bg-secondary"] { background: #f8f9fa !important; } [data-theme="light"] #preview-status { color: #757575 !important; } /* ===== INLINE STYLE OVERRIDES ===== */ /* Elements with inline background: rgba(255,255,255,0.05) or similar which are invisible on a white background */ [data-theme="light"] div[style*="background: rgba(255,255,255,0.0"] { background: rgba(14, 20, 62, 0.03) !important; } [data-theme="light"] div[style*="background: rgba(255,255,255,0.1"] { background: rgba(14, 20, 62, 0.04) !important; } /* Inline white text overrides */ [data-theme="light"] #answer-section h2[style*="color: #fff"], [data-theme="light"] #answer-section h2[style*="color:#fff"], [data-theme="light"] .main-content h2[style*="color: #fff"], [data-theme="light"] .main-content h2[style*="color:#fff"], [data-theme="light"] .main h2[style*="color: #fff"], [data-theme="light"] .main h2[style*="color:#fff"] { color: #0e143e !important; } /* Close buttons with inline white - make dark */ [data-theme="light"] button[style*="color: #fff"], [data-theme="light"] button[style*="color:#fff"], [data-theme="light"] button[style*="color: var(--text-primary, #fff)"] { color: #0e143e !important; } /* But preserve white text on colored-bg buttons */ [data-theme="light"] button[style*="background: var(--primary)"], [data-theme="light"] button[style*="background: #4caf50"], [data-theme="light"] button[style*="background: #2e7d32"], [data-theme="light"] button[style*="background: #f44336"], [data-theme="light"] button[style*="background: #ef5350"], [data-theme="light"] button[style*="background: linear-gradient"], [data-theme="light"] button[style*="background: var(--accent"] { color: #ffffff !important; } /* Paragraphs with inline dark-bg-assumed muted colors */ [data-theme="light"] p[style*="color: #c5d4e8"], [data-theme="light"] p[style*="color:#c5d4e8"], [data-theme="light"] p[style*="color: #C5D4E8"], [data-theme="light"] p[style*="color:#C5D4E8"] { color: #495057 !important; } [data-theme="light"] div[style*="color: rgba(255, 255, 255"] { color: #495057 !important; } [data-theme="light"] span[style*="color: rgba(255, 255, 255"] { color: #495057 !important; } /* Inline color: white divs */ [data-theme="light"] div[style*="color: white"] { color: #0e143e !important; } [data-theme="light"] span[style*="color: white"] { color: #0e143e !important; } /* Inline background dark cards in answer section */ [data-theme="light"] div[style*="background: var(--card-bg"] { background: #ffffff !important; } [data-theme="light"] div[style*="background: var(--bg-secondary"] { background: #f8f9fa !important; } [data-theme="light"] div[style*="background: var(--bg-card"] { background: #ffffff !important; } /* ===== DIAGNOSTIC FLOW INLINE STYLES ===== */ [data-theme="light"] div[style*="font-size: 64px"][style*="color: white"] { color: #757575 !important; } [data-theme="light"] div[style*="color: white"][style*="margin-top: 16px"] { color: #495057 !important; } /* Step numbers with blue bg keep white text */ [data-theme="light"] div[style*="background: #1976d2"][style*="color: white"] { color: white !important; } /* ===== MODAL BACKGROUNDS ===== */ [data-theme="light"] div[style*="background: white"][style*="border-radius"] { border: 1px solid rgba(14, 20, 62, 0.1) !important; box-shadow: 0 4px 20px rgba(14, 20, 62, 0.1) !important; } /* ===== MOBILE MENU ===== */ [data-theme="light"] .mobile-menu { background: #ffffff !important; } [data-theme="light"] .mobile-menu-header { border-bottom-color: rgba(14, 20, 62, 0.1) !important; } [data-theme="light"] .mobile-menu-title { color: #757575 !important; } [data-theme="light"] .mobile-menu-item { color: #0e143e !important; } [data-theme="light"] .mobile-menu-item:hover { background: #f8f9fa !important; color: var(--accent) !important; } /* ===== SCROLLBAR STYLING ===== */ [data-theme="light"] ::-webkit-scrollbar-track { background: rgba(14, 20, 62, 0.02) !important; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(14, 20, 62, 0.12) !important; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(14, 20, 62, 0.2) !important; } /* ===== SKELETON LOADING ===== */ [data-theme="light"] .skeleton { background: linear-gradient(90deg, rgba(14, 20, 62, 0.04) 25%, rgba(14, 20, 62, 0.08) 50%, rgba(14, 20, 62, 0.04) 75%) !important; background-size: 200% 100%; } /* ===== GLASS EFFECTS ===== */ /* Override glass variables for light mode */ [data-theme="light"] .glass-card::before { display: none !important; } /* ===== TOOLTIP / POPOVER ===== */ [data-theme="light"] .tooltip-content { background: #ffffff !important; color: #0e143e !important; border: 1px solid rgba(14, 20, 62, 0.1) !important; box-shadow: 0 4px 16px rgba(14, 20, 62, 0.1) !important; } /* ===== SEARCH RESULTS ===== */ [data-theme="light"] .result-card { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; color: #0e143e !important; } /* ===== EMERGENCY CONTACTS ===== */ [data-theme="light"] a[href^="tel:"] { background: #f8f9fa !important; color: #0e143e !important; } [data-theme="light"] a[href^="tel:"] strong { color: #0e143e !important; } /* ===== PROGRESS BAR / STEPS ===== */ [data-theme="light"] .step-circle { color: #ffffff !important; /* White text on colored circle */ } [data-theme="light"] .step-label { color: #495057 !important; } [data-theme="light"] .progress-step.active .step-label { color: var(--accent-cta) !important; } /* ===== SUGGESTION CHIPS ===== */ [data-theme="light"] .suggestion-chip { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.1) !important; color: #495057 !important; } [data-theme="light"] .suggestion-chip:hover { border-color: rgba(0, 175, 210, 0.3) !important; } /* ===== JFP USER BADGE ===== */ [data-theme="light"] .jfp-user-badge { background: rgba(0, 175, 210, 0.08) !important; border-color: rgba(0, 175, 210, 0.2) !important; color: #0e143e !important; } /* ===== INPUT ACTIONS ===== */ [data-theme="light"] .input-actions { background: rgba(14, 20, 62, 0.04) !important; border-color: rgba(14, 20, 62, 0.08) !important; } [data-theme="light"] .input-action-btn { background: #ffffff !important; color: #0e143e !important; } /* ===== SECTION DIVIDER ===== */ [data-theme="light"] .section-divider { background: linear-gradient(90deg, transparent, rgba(14, 20, 62, 0.1), transparent) !important; } /* ===== LAYOUT.CSS SPECIFIC OVERRIDES ===== */ /* Layout.css hero-subtitle hard-coded to #C5D4E8 */ [data-theme="light"] .hero-subtitle { color: #495057 !important; } /* Layout.css help-card ul hard-coded to #C5D4E8 */ [data-theme="light"] .help-card ul { color: #495057 !important; } /* Layout.css help-panel p hard-coded to #C5D4E8 */ [data-theme="light"] .help-panel p { color: #495057 !important; } /* Layout.css wizard-card hint */ [data-theme="light"] .wizard-card .hint { color: #757575 !important; } /* Layout.css rail-title hard-coded to #D0DDED */ [data-theme="light"] .rail-title { color: #757575 !important; } /* Layout.css category-sub hard-coded to #A0B0D0 */ [data-theme="light"] .category-sub { color: #757575 !important; } /* Layout.css category-title hard-coded to #FFFFFF */ [data-theme="light"] .category-title { color: #0e143e !important; } /* Layout.css help-link hard-coded to #FFFFFF */ [data-theme="light"] .help-link { color: #0e143e !important; } /* Layout.css builder-btn hard-coded to #FFFFFF */ [data-theme="light"] .builder-btn { color: #0e143e !important; } /* Layout.css recent-meta */ [data-theme="light"] .recent-meta { color: #757575 !important; } /* ===== CENTERING FIX ===== */ /* Keep answer section left-aligned regardless of theme */ #answer-section { text-align: left; } #answer-section > .card, #answer-section > div { text-align: left; } /* ===== NEARBY SITE CHIPS ===== */ /* Base chips use var(--bg-card) (#151D3A dark navy) - illegible on light bg */ [data-theme="light"] .nearby-site-chip { background: #ffffff !important; border-color: rgba(14, 20, 62, 0.15) !important; color: #495057 !important; box-shadow: 0 1px 3px rgba(14, 20, 62, 0.06) !important; } [data-theme="light"] .nearby-site-chip:hover { background: rgba(0, 175, 210, 0.06) !important; border-color: var(--accent-cta) !important; color: var(--accent-cta) !important; } [data-theme="light"] .nearby-site-chip.active { background: rgba(0, 175, 210, 0.1) !important; border-color: var(--accent-cta) !important; color: var(--accent-cta) !important; font-weight: 600; } [data-theme="light"] .nearby-site-chip .chip-distance { color: #757575 !important; } [data-theme="light"] .nearby-sites-container { background: transparent !important; } /* Nearby site badge (selected site pill) */ [data-theme="light"] .nearby-site-badge { background: rgba(0, 175, 210, 0.08) !important; border-color: var(--accent-cta) !important; color: var(--accent-cta) !important; } /* ===== BASIC MODE INSTRUCTION TEXT ===== */ /* Inline style uses var(--text-secondary) which is #C5D4E8 - invisible on white */ [data-theme="light"] .mode-basic-only div { color: #495057 !important; } /* ===== LOADING INDICATOR / CHAT LOADING ===== */ [data-theme="light"] .loading-bubble, [data-theme="light"] .chat-loading { background: #f0f2f5 !important; color: #495057 !important; border-color: #e0e4eb !important; } [data-theme="light"] .loading-bubble *, [data-theme="light"] .chat-loading * { color: #495057 !important; } /* ===== SAFETY BANNERS (STOP banner in responses) ===== */ /* Keep red/warning backgrounds but ensure text contrast */ [data-theme="light"] .safety-box { background: rgba(255, 59, 48, 0.06) !important; border-color: rgba(255, 59, 48, 0.25) !important; } [data-theme="light"] .safety-box h3 { color: #d32f2f !important; } [data-theme="light"] .safety-box ul, [data-theme="light"] .safety-box li { color: #495057 !important; } [data-theme="light"] .safety-alert-banner { border-color: rgba(255, 59, 48, 0.3) !important; } [data-theme="light"] .safety-banner-elevated { background: rgba(255, 59, 48, 0.06) !important; } [data-theme="light"] .safety-keyword { color: #0e143e !important; } /* ===== INLINE STYLE VAR OVERRIDES ===== */ /* Elements using var(--text-secondary) inline - #C5D4E8 on dark, need #495057 on light */ [data-theme="light"] [style*="color:var(--text-secondary)"], [data-theme="light"] [style*="color: var(--text-secondary)"] { color: #495057 !important; } /* Elements using var(--text-muted) inline - #8B99B5 on dark */ [data-theme="light"] [style*="color:var(--text-muted)"], [data-theme="light"] [style*="color: var(--text-muted)"] { color: #757575 !important; } /* Elements using var(--text-primary) inline on dark bg assumed */ [data-theme="light"] [style*="color:var(--text-primary)"], [data-theme="light"] [style*="color: var(--text-primary)"] { color: #0e143e !important; } /* Elements using var(--bg-card) as background */ [data-theme="light"] [style*="background:var(--bg-card)"], [data-theme="light"] [style*="background: var(--bg-card)"] { background: #ffffff !important; } /* ===== ANSWER CONTENT CONTRAST ===== */ /* Bold/strong text in answers */ [data-theme="light"] .chat-bubble-bot strong { color: #0e143e !important; } /* Lists inside bot responses */ [data-theme="light"] .chat-bubble-bot ul, [data-theme="light"] .chat-bubble-bot ol, [data-theme="light"] .chat-bubble-bot li { color: #1d3557 !important; } /* Code blocks in responses */ [data-theme="light"] .chat-bubble-bot code { background: rgba(14, 20, 62, 0.06) !important; color: #0e143e !important; } [data-theme="light"] .chat-bubble-bot pre { background: #f0f2f5 !important; border-color: rgba(14, 20, 62, 0.1) !important; } /* Links in bot responses */ [data-theme="light"] .chat-bubble-bot a { color: var(--accent-cta) !important; } /* Source/citation chips in responses */ [data-theme="light"] .source-chip, [data-theme="light"] .citation-chip { background: #f8f9fa !important; border-color: rgba(14, 20, 62, 0.12) !important; color: #495057 !important; } [data-theme="light"] .source-chip:hover, [data-theme="light"] .citation-chip:hover { background: rgba(0, 175, 210, 0.06) !important; border-color: var(--accent-cta) !important; color: var(--accent-cta) !important; } /* ===== SAFETY REQUIREMENTS DETAIL (expandable in STOP banner) ===== */ [data-theme="light"] .safety-requirements-detail { background: rgba(255, 59, 48, 0.04) !important; color: #495057 !important; } [data-theme="light"] .safety-requirements-detail li { color: #495057 !important; } /* ===== PRINT MEDIA ===== */ @media print { [data-theme="light"] body { background: white !important; } }