/* ───────────────────────────────────────────── RACI Generator — Light Mode Theme Applied when is set. Overrides all dark-theme CSS variables and hardcoded dark colors across all templates. ───────────────────────────────────────────── */ /* ── Prevent flash of dark theme on page load ── */ html.light-pending { background: #f1f5f9 !important; } html.light-pending body { visibility: hidden; } /* ── CSS Variable Overrides ── */ body.light { --glass: rgba(0,0,0,0.03); --glass-strong: rgba(0,0,0,0.05); --glass-border: rgba(0,0,0,0.10); --glass-border-light: rgba(0,0,0,0.15); --glass-hover: rgba(0,0,0,0.06); --accent: #6366f1; --accent-bright: #4f46e5; --accent-glow: rgba(99,102,241,0.2); --cyan: #0891b2; --cyan-glow: rgba(8,145,178,0.15); --text: #1e293b; --text-muted: rgba(0,0,0,0.5); --text-dim: rgba(0,0,0,0.3); --bg-from: #f1f5f9; --bg-to: #e2e8f0; --red: #dc2626; --red-bg: rgba(220,38,38,0.10); --red-border: rgba(220,38,38,0.25); --amber: #d97706; --amber-bg: rgba(217,119,6,0.10); --amber-border: rgba(217,119,6,0.25); --green: #059669; --green-bg: rgba(5,150,105,0.10); --green-border: rgba(5,150,105,0.25); --rose: #e11d48; --rose-bg: rgba(225,29,72,0.10); --rose-border: rgba(225,29,72,0.25); --blue: #2563eb; --blue-bg: rgba(37,99,235,0.10); --blue-border: rgba(37,99,235,0.25); --bg-mid: #dbeafe; } /* ── Selection ── */ body.light ::selection { background: rgba(99,102,241,0.25); color: #1e293b; } body.light ::-moz-selection { background: rgba(99,102,241,0.25); color: #1e293b; } /* ── Scrollbar ── */ body.light ::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.2); } body.light ::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.35); } body.light * { scrollbar-color: rgba(99,102,241,0.2) transparent; } /* ── Focus ring ── */ body.light *:focus-visible { outline-color: var(--accent); } /* ── Body Background ── */ body.light { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #dbeafe 100%) !important; color: var(--text); } /* ── Animated Orbs — softer for light mode ── */ body.light::before { background: radial-gradient(circle, rgba(99,102,241,0.35), transparent 70%) !important; opacity: 0.3 !important; } body.light::after { background: radial-gradient(circle, rgba(8,145,178,0.30), transparent 70%) !important; opacity: 0.3 !important; } /* ── Header (index, dashboard, report) ── */ body.light .header { background: rgba(255,255,255,0.80) !important; border-bottom-color: rgba(0,0,0,0.08) !important; } body.light .header h1 { background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #0891b2 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ── Navigation ── */ body.light .nav-link { background: rgba(255,255,255,0.6) !important; border-color: rgba(0,0,0,0.10) !important; color: #475569 !important; } body.light .nav-link:hover { border-color: var(--accent) !important; color: var(--accent) !important; } body.light .nav-link.active { background: linear-gradient(135deg, #6366f1, #818cf8) !important; color: #fff !important; border-color: transparent !important; } body.light .btn-logout { border-color: rgba(0,0,0,0.12) !important; color: #64748b !important; } body.light .btn-logout:hover { border-color: var(--accent) !important; color: var(--accent) !important; } /* ── User Pill ── */ body.light .user-pill { background: rgba(255,255,255,0.7) !important; border-color: rgba(0,0,0,0.10) !important; } /* ── Container / Board ── */ body.light .container { color: var(--text); } /* ── Toolbar ── */ body.light .toolbar input[type="text"] { background: rgba(255,255,255,0.7) !important; border-color: rgba(0,0,0,0.12) !important; color: var(--text) !important; } body.light .toolbar input[type="text"]::placeholder { color: #94a3b8 !important; } body.light .toolbar-group { background: rgba(255,255,255,0.6) !important; border-color: rgba(0,0,0,0.10) !important; } body.light .btn-toolbar { color: #475569 !important; } body.light .btn-toolbar:hover { color: var(--accent) !important; } body.light .btn-toolbar.primary { background: linear-gradient(135deg, #6366f1, #818cf8) !important; color: #fff !important; } body.light .btn-toolbar.danger { color: var(--red) !important; } body.light .btn-clear { color: #64748b !important; } body.light .btn-clear:hover { color: var(--accent) !important; } /* ── Filter Multi-Select ── */ body.light .filter-multi-btn { background: rgba(255,255,255,0.7) !important; border-color: rgba(0,0,0,0.12) !important; color: var(--text) !important; } body.light .filter-multi-panel { background: rgba(255,255,255,0.96) !important; border-color: rgba(0,0,0,0.12) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; } body.light .filter-multi-panel label { color: var(--text) !important; } body.light .filter-multi-panel label:hover { background: rgba(99,102,241,0.08) !important; } /* ── Table ── */ body.light .table-wrap { background: rgba(255,255,255,0.70) !important; border-color: rgba(0,0,0,0.10) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important; } body.light th { background: rgba(248,250,252,0.95) !important; color: #64748b !important; border-bottom-color: rgba(0,0,0,0.10) !important; } body.light td { border-bottom-color: rgba(0,0,0,0.05) !important; color: var(--text) !important; } body.light tbody tr:hover td { background: rgba(99,102,241,0.05) !important; } body.light tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent) !important; } body.light tbody tr.active td { background: rgba(99,102,241,0.08) !important; } body.light tbody tr.active td:first-child { box-shadow: inset 3px 0 0 var(--accent) !important; } body.light tbody tr:nth-child(even) td { background: rgba(0,0,0,0.015) !important; } body.light tbody tr:nth-child(even):hover td { background: rgba(99,102,241,0.05) !important; } body.light td[contenteditable="true"]:focus { background: rgba(99,102,241,0.08) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; } /* ── Badges ── */ body.light .badge { font-weight: 700 !important; } /* ── Dropdown Menus ── */ body.light .dropdown-menu { background: rgba(255,255,255,0.96) !important; border-color: rgba(0,0,0,0.12) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; } body.light .dropdown-menu div { color: var(--text) !important; } body.light .dropdown-menu div:hover { background: rgba(99,102,241,0.08) !important; } /* ── Cell-Select Dropdowns ── */ body.light .cs-trigger:hover { background: rgba(99,102,241,0.06) !important; border-color: rgba(0,0,0,0.12) !important; } body.light .cs-empty { color: #94a3b8 !important; } body.light .cs-arrow { color: #94a3b8 !important; } body.light .cell-select-menu { background: rgba(255,255,255,0.97) !important; border-color: rgba(0,0,0,0.12) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05) !important; } body.light .csm-search { color: var(--text) !important; border-bottom-color: rgba(0,0,0,0.08) !important; } body.light .csm-search::placeholder { color: #94a3b8 !important; } body.light .csm-option { color: var(--text) !important; } body.light .csm-option:hover { background: rgba(99,102,241,0.08) !important; } body.light .csm-option.active { background: rgba(99,102,241,0.12) !important; } body.light .csm-option.csm-none { color: #94a3b8 !important; } body.light .csm-option.csm-create { color: var(--accent) !important; border-top-color: rgba(0,0,0,0.06) !important; } body.light .csm-label { color: #94a3b8 !important; } body.light .csm-no-results { color: #94a3b8 !important; } /* ── Add Row ── */ body.light .add-row td { background: rgba(99,102,241,0.04) !important; border-top-color: rgba(99,102,241,0.15) !important; } body.light .add-row:hover td { background: rgba(99,102,241,0.07) !important; } body.light .add-row td:first-child { box-shadow: inset 3px 0 0 var(--accent) !important; } body.light .add-row input, body.light .add-row select { background: rgba(255,255,255,0.8) !important; border-color: rgba(0,0,0,0.12) !important; color: var(--text) !important; } body.light .add-row select option { background: #fff !important; color: var(--text) !important; } /* ── New User Inline Popup ── */ body.light .new-user-inline { background: rgba(255,255,255,0.96) !important; border-color: rgba(0,0,0,0.12) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; } /* ── Modals ── */ body.light .modal-overlay { background: rgba(0,0,0,0.25) !important; } body.light .modal { background: rgba(255,255,255,0.96) !important; border-color: rgba(0,0,0,0.12) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.12) !important; } body.light .modal h2 { background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #0891b2 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } body.light .modal-subtitle { color: #64748b !important; } body.light .modal-hint { color: #94a3b8 !important; } body.light .btn-modal-cancel { background: rgba(0,0,0,0.04) !important; color: #64748b !important; border-color: rgba(0,0,0,0.10) !important; } body.light .btn-modal-cancel:hover { border-color: var(--accent) !important; color: var(--accent) !important; } /* ── Detail Panel ── */ body.light .panel-overlay { background: rgba(0,0,0,0.15) !important; } body.light .detail-panel { background: rgba(255,255,255,0.92) !important; border-left-color: rgba(0,0,0,0.08) !important; box-shadow: -8px 0 40px rgba(0,0,0,0.08) !important; } body.light .panel-header h2 { background: linear-gradient(135deg, #1e293b, #4f46e5) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } body.light .panel-meta { color: #64748b !important; } body.light .panel-close { color: #94a3b8 !important; } body.light .panel-close:hover { color: var(--red) !important; } body.light .section-title { color: #475569 !important; } body.light .detail-field label { color: #64748b !important; } body.light .detail-field input, body.light .detail-field select { background: rgba(255,255,255,0.8) !important; border-color: rgba(0,0,0,0.12) !important; color: var(--text) !important; } body.light .detail-field select option { background: #fff !important; color: var(--text) !important; } /* ── Comments ── */ body.light .comment-item { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.06) !important; } body.light .comment-form textarea { background: rgba(255,255,255,0.7) !important; border-color: rgba(0,0,0,0.10) !important; color: var(--text) !important; } body.light .cf-dropzone { background: rgba(99,102,241,0.04) !important; border-color: rgba(99,102,241,0.2) !important; } body.light .cf-dropzone.dragover { background: rgba(99,102,241,0.08) !important; } body.light .file-preview { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.08) !important; } body.light .cf-user { color: #64748b !important; } body.light .btn-attach { color: #64748b !important; } /* ── Timeline / History ── */ body.light .timeline::before { background: linear-gradient(180deg, var(--accent), rgba(99,102,241,0.1)) !important; } body.light .timeline-item { color: #475569 !important; } /* ── Toast ── */ body.light .toast { background: rgba(5,150,105,0.12) !important; border-color: var(--green-border) !important; color: var(--green) !important; } body.light .toast.error { background: rgba(220,38,38,0.12) !important; border-color: var(--red-border) !important; color: var(--red) !important; } /* ── Lightbox ── */ body.light .lightbox { background: rgba(0,0,0,0.6) !important; } /* ── Empty State ── */ body.light .empty-state .es-icon { background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(99,102,241,0.05)) !important; } body.light .empty-state h3 { background: linear-gradient(135deg, #4338ca, #6366f1) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } body.light .empty-state .es-num { background: linear-gradient(135deg, #6366f1, #818cf8) !important; color: #fff !important; } body.light .empty-state p, body.light .empty-state .es-step { color: #64748b !important; } /* ── Legend / Hints ── */ body.light .legend { color: #64748b !important; } body.light .legend b { color: var(--accent) !important; } body.light .kbd-hint { color: #94a3b8 !important; } body.light .kbd-hint kbd { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.10) !important; } /* ── Stat Chips (board header) ── */ body.light .stat-chip { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; } /* ── Help Grid ── */ body.light .help-card { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.06) !important; } body.light .help-card h4 { color: var(--accent) !important; } body.light .help-card p { color: #475569 !important; } body.light .help-card kbd { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.10) !important; } /* ── Tooltips ── */ body.light [data-tip]::after { background: rgba(255,255,255,0.96) !important; color: #1e293b !important; border-color: rgba(0,0,0,0.10) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.10) !important; } /* ── Scrollbar ── */ body.light .table-wrap { scrollbar-color: rgba(99,102,241,0.25) transparent !important; } body.light .table-wrap::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.25) !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Dashboard-Specific Overrides ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ body.light .welcome h2 { background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #0891b2 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } body.light .welcome p { color: #64748b !important; } body.light .stat-card { background: rgba(255,255,255,0.70) !important; border-color: rgba(0,0,0,0.08) !important; } body.light .sc-label { color: #64748b !important; } body.light .sc-sub { color: #94a3b8 !important; } body.light .section-card { background: rgba(255,255,255,0.70) !important; border-color: rgba(0,0,0,0.08) !important; } body.light .section-card .sc-header { border-bottom-color: rgba(0,0,0,0.06) !important; } body.light .section-card .sc-header h3 { color: var(--text) !important; } body.light .sc-empty { color: #94a3b8 !important; } body.light .task-item { border-bottom-color: rgba(0,0,0,0.04) !important; } body.light .task-item a { color: var(--text) !important; } body.light .ti-id { color: #94a3b8 !important; } body.light .completion-card { background: rgba(255,255,255,0.70) !important; border-color: rgba(0,0,0,0.08) !important; } body.light .ci-title { color: var(--text) !important; } body.light .ci-sub { color: #64748b !important; } body.light .ring-bg { stroke: rgba(0,0,0,0.06) !important; } body.light .impact-bar-track { background: rgba(0,0,0,0.04) !important; } body.light .team-name { color: var(--text) !important; } body.light .team-row { border-bottom-color: rgba(0,0,0,0.04) !important; } body.light .activity-item { border-bottom-color: rgba(0,0,0,0.04) !important; } body.light .ai-user { color: var(--accent) !important; } body.light .ai-time { color: #94a3b8 !important; } body.light .ai-text { color: #475569 !important; } body.light .ai-task { color: var(--accent) !important; } body.light .overdue-days { color: var(--red) !important; } body.light .qa-btn { background: rgba(255,255,255,0.7) !important; border-color: rgba(0,0,0,0.10) !important; color: #475569 !important; } body.light .qa-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; } body.light .qa-btn.primary { background: linear-gradient(135deg, #6366f1, #818cf8) !important; color: #fff !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Report-Specific Overrides ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ body.light .report-header h1 { background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #0891b2 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } body.light .report-header .report-meta { color: #64748b !important; } body.light .stats-grid .stat-card, body.light .stats-row .stat-card { background: rgba(255,255,255,0.70) !important; border-color: rgba(0,0,0,0.08) !important; } body.light .report-section { background: rgba(255,255,255,0.70) !important; border-color: rgba(0,0,0,0.08) !important; } body.light .report-section h2 { color: var(--text) !important; border-bottom-color: rgba(0,0,0,0.06) !important; } body.light .report-section h2::after { background: var(--accent) !important; } body.light .report-table-wrap th { background: rgba(248,250,252,0.95) !important; color: #64748b !important; border-color: rgba(0,0,0,0.08) !important; } body.light .report-table-wrap td { border-color: rgba(0,0,0,0.05) !important; color: var(--text) !important; } body.light .report-table-wrap tbody tr:hover td { background: rgba(99,102,241,0.04) !important; } body.light .report-table-wrap .rp-avatar { color: #fff !important; } body.light .btn-print { background: linear-gradient(135deg, #6366f1, #818cf8) !important; color: #fff !important; } /* Comms log */ body.light .comms-task-block { background: rgba(0,0,0,0.02) !important; } body.light .comms-task-header { background: rgba(0,0,0,0.03) !important; } body.light .comms-item { border-color: rgba(0,0,0,0.06) !important; } body.light .comms-meta { color: #64748b !important; } body.light .comms-text { color: #475569 !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Login-Specific Overrides ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ body.light .page .header h1 { background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #0891b2 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } body.light .subtitle { color: #64748b !important; } body.light .section-label { color: #94a3b8 !important; } body.light .divider { color: #94a3b8 !important; } body.light .divider::before, body.light .divider::after { background: rgba(0,0,0,0.10) !important; } body.light .user-card { background: rgba(255,255,255,0.60) !important; border-color: rgba(0,0,0,0.08) !important; } body.light .user-card:hover { border-color: var(--accent) !important; background: rgba(255,255,255,0.80) !important; } body.light .user-card .name { color: var(--text) !important; } body.light .new-user-section { background: rgba(255,255,255,0.50) !important; border-color: rgba(0,0,0,0.08) !important; } body.light .new-user-form input[type="text"] { background: rgba(255,255,255,0.8) !important; border-color: rgba(0,0,0,0.12) !important; color: var(--text) !important; } body.light .new-user-form input[type="text"]::placeholder { color: #94a3b8 !important; } body.light .color-row label { color: #64748b !important; } body.light .footer-note { color: #94a3b8 !important; } body.light .footer-link { background: rgba(255,255,255,0.60) !important; border-color: rgba(0,0,0,0.08) !important; color: #64748b !important; } body.light .footer-link:hover { border-color: var(--accent) !important; color: var(--accent) !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Pitch & FAQ Page Overrides ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ body.light .hero h1, body.light .faq-header h1 { background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #0891b2 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } body.light .tagline { color: #64748b !important; } body.light .hero .elevator { background: rgba(255,255,255,0.60) !important; border-color: rgba(0,0,0,0.08) !important; color: var(--text) !important; } body.light .hero .elevator b { color: var(--accent) !important; } body.light .feature-card, body.light .target-card { background: rgba(255,255,255,0.60) !important; border-color: rgba(0,0,0,0.08) !important; } body.light .feature-card:hover, body.light .target-card:hover { border-color: rgba(0,0,0,0.15) !important; } body.light .feature-card h3 { color: var(--text) !important; } body.light .feature-card p { color: #64748b !important; } body.light .feature-card .fc-icon { background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(99,102,241,0.06)) !important; } body.light .advantages { background: rgba(255,255,255,0.60) !important; border-color: rgba(0,0,0,0.08) !important; } body.light .advantages h2 { background: linear-gradient(135deg, #4338ca, #6366f1) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } body.light .adv-item span { color: #64748b !important; } body.light .target-card b { color: var(--accent) !important; } body.light .btn-back { background: rgba(255,255,255,0.60) !important; border-color: rgba(0,0,0,0.08) !important; color: #64748b !important; } body.light .btn-back:hover { border-color: var(--accent) !important; color: var(--accent) !important; } body.light .faq-section-title { color: var(--accent) !important; border-bottom-color: rgba(0,0,0,0.08) !important; } body.light .faq-item { background: rgba(255,255,255,0.60) !important; border-color: rgba(0,0,0,0.08) !important; } body.light .faq-item:hover { border-color: rgba(0,0,0,0.15) !important; } body.light .faq-q { color: var(--text) !important; } body.light .faq-arrow { color: #94a3b8 !important; } body.light .faq-a-inner { color: #475569 !important; } body.light .faq-a-inner b { color: var(--text) !important; } body.light .faq-a-inner code { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; color: var(--accent) !important; } body.light .pitch-footer, body.light .faq-footer { color: #94a3b8 !important; border-top-color: rgba(0,0,0,0.06) !important; } body.light .pitch-footer a, body.light .faq-footer a { color: var(--accent) !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Theme Toggle Switch ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .theme-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; -webkit-user-select: none; } .theme-toggle .toggle-track { width: 40px; height: 22px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15); border-radius: 11px; position: relative; transition: all 0.25s; } body.light .theme-toggle .toggle-track { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.15); } .theme-toggle .toggle-thumb { width: 16px; height: 16px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: all 0.25s; box-shadow: 0 1px 4px rgba(0,0,0,0.2); } body.light .theme-toggle .toggle-thumb { left: 20px; background: var(--accent); } .theme-toggle .toggle-icon { font-size: 14px; line-height: 1; width: 16px; text-align: center; } .theme-toggle .toggle-label { font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.3px; }