/* ===== PSIRT Global Light Theme ===== */ /* Applied when .light-theme is set on */ /* --- Core Variables --- */ .light-theme { --bg-primary: #f8fafc; --bg-secondary: #f1f5f9; --bg-card: #ffffff; --bg-elevated: #f8fafc; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --accent-primary: #2563eb; --accent-secondary: #7c3aed; --accent-success: #059669; --accent-warning: #d97706; --accent-danger: #dc2626; --border-color: rgba(0, 0, 0, 0.1); --border-subtle: rgba(0, 0, 0, 0.08); } /* --- Body & Base (override hardcoded dark backgrounds) --- */ .light-theme body { background: #f8fafc !important; color: #0f172a !important; } /* =============================================== */ /* ===== CONTRAST & TEXT LEGIBILITY FIXES ===== */ /* =============================================== */ /* Advisories stat pills (the gray boxes at top: TOTAL, CRITICAL, etc.) */ .light-theme .psirt-total-pill { background: #fff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important; } .light-theme .psirt-total-pill:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; } .light-theme .psirt-total-val { /* Don't override — let inline severity colors (#ef4444, #f97316, etc.) show through. The "Total" pill uses var(--text-primary) which the variable override already handles. */ } .light-theme .psirt-total-label { color: #64748b !important; } /* Workflow node card text — fix near-invisible white text on white bg */ .light-theme .df-node-body { color: #334155 !important; } .light-theme .df-node-body .node-label { color: #0f172a !important; } .light-theme .df-node-body .node-detail { color: #64748b !important; } .light-theme .drawflow_content_node { color: #0f172a !important; } /* Drawflow node header text */ .light-theme .df-node-header { color: #fff !important; } /* Condition output port labels */ .light-theme .drawflow-node .output::after { background: rgba(0, 0, 0, .65) !important; color: #fff !important; } /* Node group overlays */ .light-theme .wf-group-overlay { border-color: rgba(59, 130, 246, .3) !important; background: rgba(59, 130, 246, .04) !important; } .light-theme .wf-group-label { color: #2563eb !important; background: rgba(255, 255, 255, .9) !important; } /* Global text contrast anchors */ .light-theme h1, .light-theme h2, .light-theme h3, .light-theme h4 { color: #0f172a !important; } .light-theme p { color: #334155 !important; } .light-theme label { color: #475569 !important; } /* =============================================== */ /* ===== ADVISORIES PAGE ===== */ /* =============================================== */ /* Cards */ .light-theme .psirt-card { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .06) !important; } .light-theme .psirt-card:hover { border-color: #cbd5e1 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .08) !important; } .light-theme .psirt-card-meta { border-top-color: #e2e8f0 !important; } /* Chart cards */ .light-theme .chart-card { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .06) !important; } /* Detail modal */ .light-theme .detail-panel { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 24px 64px rgba(0, 0, 0, .15) !important; } .light-theme .detail-panel-header { border-bottom-color: #e2e8f0 !important; } .light-theme .detail-overlay { background: rgba(0, 0, 0, .3) !important; } /* Filter Bar */ .light-theme .psirt-filter-bar { background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .98)) !important; border-color: #e2e8f0 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, .06) !important; } .light-theme .psirt-filter-pill { background: #fff !important; border-color: #e2e8f0 !important; color: #475569 !important; } .light-theme .psirt-filter-pill:hover { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #0f172a !important; } .light-theme .psirt-filter-pill.active { background: var(--accent-primary) !important; border-color: var(--accent-primary) !important; color: #fff !important; } /* Search */ .light-theme .psirt-search { background: #fff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } .light-theme .psirt-search:focus { background: #fff !important; border-color: var(--accent-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1) !important; } .light-theme .psirt-search::placeholder { color: #94a3b8 !important; } /* Insights */ .light-theme .insights-header { background: linear-gradient(135deg, #fff, #f8fafc) !important; border-color: #e2e8f0 !important; } .light-theme .insights-header:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; } .light-theme .insight-mini-stat { background: #fff !important; border-color: #e2e8f0 !important; } .light-theme .psirt-empty-state { background: #fff !important; border-color: #e2e8f0 !important; } /* Vendor dropdowns */ .light-theme .vendor-trigger { background: #fff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } .light-theme .vendor-trigger:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; } .light-theme .vendor-dropdown { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 12px 40px rgba(0, 0, 0, .12) !important; } .light-theme .vendor-dropdown-header { border-bottom-color: #e2e8f0 !important; } .light-theme .vendor-option:hover { background: #f1f5f9 !important; } .light-theme .vendor-option input[type="checkbox"] { border-color: #cbd5e1 !important; background: #fff !important; } /* Custom selects (status, range) */ .light-theme .custom-select-trigger { background: #fff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } .light-theme .custom-select-trigger:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; } .light-theme .custom-dropdown { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 12px 40px rgba(0, 0, 0, .12) !important; } .light-theme .custom-option:hover { background: #f1f5f9 !important; } /* Checkboxes */ .light-theme .psirt-card input[type="checkbox"], .light-theme table input[type="checkbox"] { background: #fff !important; border-color: #cbd5e1 !important; } .light-theme .psirt-card input[type="checkbox"]:hover, .light-theme table input[type="checkbox"]:hover { border-color: var(--accent-primary) !important; background: rgba(37, 99, 235, .05) !important; } /* Header buttons */ .light-theme .psirt-header-btn { background: #fff !important; border-color: #e2e8f0 !important; color: #334155 !important; } .light-theme .psirt-header-btn:hover { background: #f1f5f9 !important; border-color: #cbd5e1 !important; } /* View toggle */ .light-theme .psirt-view-toggle button { background: #fff !important; border-color: #e2e8f0 !important; color: #64748b !important; } .light-theme .psirt-view-toggle button.active { background: var(--accent-primary) !important; border-color: var(--accent-primary) !important; color: #fff !important; } /* Severity Badges */ .light-theme .psirt-severity-badge.critical { background: #fef2f2 !important; color: #dc2626 !important; border-color: #fecaca !important; } .light-theme .psirt-severity-badge.high { background: #fff7ed !important; color: #ea580c !important; border-color: #fed7aa !important; } .light-theme .psirt-severity-badge.medium { background: #fffbeb !important; color: #d97706 !important; border-color: #fde68a !important; } .light-theme .psirt-severity-badge.low { background: #ecfdf5 !important; color: #059669 !important; border-color: #a7f3d0 !important; } /* SLA Badge */ .light-theme .psirt-sla-badge.overdue { background: #fef2f2 !important; color: #dc2626 !important; border-color: #fecaca !important; } .light-theme .psirt-sla-badge { background: #fffbeb !important; color: #d97706 !important; } /* Status Select */ .light-theme .status-select { background: #f1f5f9 !important; color: #0f172a !important; border-color: #e2e8f0 !important; } /* Recommended Actions */ .light-theme .recom-section { background: #fefce8 !important; border-color: #fef08a !important; } .light-theme .recom-section .recom-title { color: #a16207 !important; } .light-theme .recom-section ul li { color: #475569 !important; } /* CVE chip */ .light-theme .cve-chip { background: #eff6ff !important; color: #2563eb !important; border-color: #bfdbfe !important; } /* Source chips */ .light-theme .source-chip { background: #f1f5f9 !important; color: #475569 !important; border-color: #e2e8f0 !important; } /* =============================================== */ /* ===== ANALYTICS PAGE ===== */ /* =============================================== */ /* Summary Stats */ .light-theme .summary-stat { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important; } /* KPI Cards */ .light-theme .kpi-card { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important; } /* Chart Panels */ .light-theme .chart-panel { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important; } /* Header buttons */ .light-theme .header-btn.advisories { background: #f5f3ff !important; color: #7c3aed !important; border-color: #ddd6fe !important; } .light-theme .header-btn.advisories:hover { background: #ede9fe !important; } .light-theme .header-btn.export { background: #fffbeb !important; color: #d97706 !important; border-color: #fde68a !important; } .light-theme .header-btn.export:hover { background: #fef3c7 !important; } /* =============================================== */ /* ===== WORKFLOW BUILDER ===== */ /* =============================================== */ /* Top bar */ .light-theme .wf-topbar { background: #fff !important; border-bottom: 1px solid #e2e8f0 !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .04) !important; } .light-theme .wf-topbar-title { color: #475569 !important; } .light-theme .wf-topbar-sep { background: #e2e8f0 !important; } /* Workflow select dropdown */ .light-theme .wf-topbar-select { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #0f172a !important; } .light-theme .wf-topbar-select:focus { border-color: var(--accent-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08) !important; } /* Toolbar buttons */ .light-theme .wf-topbar .wf-btn { background: #fff !important; border-color: #e2e8f0 !important; color: #334155 !important; } .light-theme .wf-topbar .wf-btn:hover { background: #f1f5f9 !important; border-color: #cbd5e1 !important; } .light-theme .wf-topbar .wf-btn-primary { background: var(--accent-primary) !important; border-color: var(--accent-primary) !important; color: #fff !important; } .light-theme .wf-topbar .wf-btn-success { background: var(--accent-success) !important; border-color: var(--accent-success) !important; color: #fff !important; } .light-theme .wf-topbar .wf-btn-danger { background: transparent !important; border-color: #e2e8f0 !important; color: var(--accent-danger) !important; } .light-theme .wf-select { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #0f172a !important; } .light-theme .wf-active-badge { border-color: #e2e8f0 !important; background: #f1f5f9 !important; color: #64748b !important; } .light-theme .wf-active-badge.active { background: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #059669 !important; } /* Node Palette */ .light-theme .wf-palette { background: #fff !important; border-right: 1px solid #e2e8f0 !important; } .light-theme .wf-palette-heading { color: #64748b !important; } .light-theme .wf-palette-node { color: #334155 !important; background: transparent !important; } .light-theme .wf-palette-node:hover { background: #f1f5f9 !important; } .light-theme .wf-props-search input, .light-theme .wf-palette input[type="text"] { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #0f172a !important; } .light-theme .wf-props-search input:focus, .light-theme .wf-palette input[type="text"]:focus { border-color: var(--accent-primary) !important; background: #fff !important; } .light-theme .wf-palette-group-toggle { color: #64748b !important; } /* Canvas */ .light-theme .wf-canvas { background: #f1f5f9 !important; } .light-theme #drawflow { background-color: #f1f5f9 !important; background-image: linear-gradient(rgba(0, 0, 0, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .04) 1px, transparent 1px) !important; } /* Drawflow node cards — refined light mode */ .light-theme .drawflow .drawflow-node { background: #fff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .06), 0 0 0 0 transparent !important; transition: box-shadow .2s, border-color .2s, transform .15s !important; } .light-theme .drawflow .drawflow-node:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .08) !important; border-color: #cbd5e1 !important; } .light-theme .drawflow .drawflow-node.selected { border-color: var(--accent-primary) !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, .15), 0 4px 16px rgba(37, 99, 235, .1) !important; } .light-theme .drawflow .drawflow_content_node { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: none !important; color: #0f172a !important; } /* Header — slim accent bar + tinted background instead of solid color block */ .light-theme .df-node-header { color: #fff !important; border-radius: 11px 11px 0 0 !important; padding: 6px 12px !important; font-size: 10px !important; letter-spacing: 1px !important; opacity: .92 !important; } /* Make headers slightly softer by reducing opacity on the colored bg */ .light-theme .df-node-header.cat-trigger { background: #059669 !important; } .light-theme .df-node-header.cat-condition { background: #2563eb !important; } .light-theme .df-node-header.cat-action { background: #7c3aed !important; } .light-theme .df-node-header.cat-review { background: #d97706 !important; } .light-theme .df-node-header.cat-timer { background: #0891b2 !important; } .light-theme .df-node-header.cat-flow { background: #475569 !important; } /* Body text */ .light-theme .df-node-body { padding: 8px 12px !important; } /* Port dots — refined */ .light-theme .drawflow .drawflow-node .input { background: #e2e8f0 !important; border: 2px solid #94a3b8 !important; } .light-theme .drawflow .drawflow-node .output { background: #3b82f6 !important; border-color: #2563eb !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, .12) !important; } /* Connection lines — lighter for light mode */ .light-theme .drawflow .connection .main-path { stroke: #93c5fd !important; stroke-width: 2px !important; } .light-theme .drawflow .connection .main-path:hover { stroke: #3b82f6 !important; } /* Properties Panel */ .light-theme .wf-props { background: #fff !important; border-left: 1px solid #e2e8f0 !important; } .light-theme .wf-props-empty { color: #94a3b8 !important; } .light-theme .wf-props-title { color: #0f172a !important; } .light-theme .wf-props-section-header { color: #475569 !important; border-bottom-color: #e2e8f0 !important; } .light-theme .wf-props-section-header:hover { background: #f8fafc !important; } .light-theme .wf-props-section-body label { color: #475569 !important; } .light-theme .wf-props-section-body input, .light-theme .wf-props-section-body select, .light-theme .wf-props-section-body textarea { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #0f172a !important; } .light-theme .wf-props-section-body input:focus, .light-theme .wf-props-section-body select:focus, .light-theme .wf-props-section-body textarea:focus { background: #fff !important; border-color: var(--accent-primary) !important; } /* Floating toolbar */ .light-theme #wfFloatingToolbar { background: rgba(255, 255, 255, .92) !important; border-color: #e2e8f0 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, .1) !important; } .light-theme #wfFloatingToolbar button { color: #475569 !important; } .light-theme #wfFloatingToolbar button:hover { background: #f1f5f9 !important; color: #0f172a !important; } .light-theme #zoomLevel { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #475569 !important; } /* Toolbar more menu */ .light-theme .toolbar-more-menu { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 8px 32px rgba(0, 0, 0, .12) !important; } .light-theme .toolbar-more-grid button { color: #475569 !important; } .light-theme .toolbar-more-grid button:hover { background: #f1f5f9 !important; color: #0f172a !important; } /* Runs Panel */ .light-theme #runsPanel { background: #fff !important; border-top: 1px solid #e2e8f0 !important; box-shadow: 0 -4px 16px rgba(0, 0, 0, .06) !important; } .light-theme .runs-panel-header { border-bottom-color: #e2e8f0 !important; background: #f8fafc !important; } .light-theme .runs-close-btn { color: #64748b !important; } .light-theme .runs-close-btn:hover { background: #f1f5f9 !important; color: #0f172a !important; } .light-theme #runsPanelResizeHandle div { background: rgba(0, 0, 0, .12) !important; } .light-theme .runs-empty { color: #64748b !important; } .light-theme .runs-mode-btn { color: #64748b !important; } /* Dialogs */ .light-theme .wf-dialog-overlay { background: rgba(0, 0, 0, .25) !important; } .light-theme .wf-dialog { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 20px 48px rgba(0, 0, 0, .12) !important; } .light-theme .wf-dialog-title { color: #0f172a !important; } .light-theme .wf-dialog-message { color: #475569 !important; } .light-theme .wf-dialog input { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #0f172a !important; } /* Context menu */ .light-theme .wf-context-menu { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 8px 32px rgba(0, 0, 0, .12) !important; } .light-theme .wf-context-item { color: #334155 !important; } .light-theme .wf-context-item:hover { background: #f1f5f9 !important; } /* Version / Template panels */ .light-theme .wf-version-panel, .light-theme .wf-template-panel { background: #fff !important; border-color: #e2e8f0 !important; } /* =============================================== */ /* ===== ADMIN PAGE ===== */ /* =============================================== */ /* Stat cards */ .light-theme .stat-card { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important; } /* Admin tabs */ .light-theme .admin-tabs { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important; } .light-theme .admin-tab { color: #64748b !important; } .light-theme .admin-tab.active { background: #eff6ff !important; color: #2563eb !important; } .light-theme .admin-tab:hover:not(.active) { background: #f1f5f9 !important; color: #334155 !important; } /* Admin sections (table containers) */ .light-theme .admin-section { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important; } /* Users table */ .light-theme .users-table th { color: #64748b !important; border-bottom-color: #e2e8f0 !important; background: #f8fafc !important; } .light-theme .users-table td { border-bottom-color: #f1f5f9 !important; color: #334155 !important; } .light-theme .users-table tr:hover td { background: #f8fafc !important; } .light-theme .user-email { color: #0f172a !important; } .light-theme .user-name { color: #64748b !important; } /* Role select in table */ .light-theme .role-select { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #0f172a !important; } /* Role badges */ .light-theme .role-badge.super_admin { background: #fffbeb !important; color: #b45309 !important; } .light-theme .role-badge.admin { background: #f5f3ff !important; color: #7c3aed !important; } .light-theme .role-badge.analyst { background: #eff6ff !important; color: #2563eb !important; } .light-theme .role-badge.viewer { background: #ecfdf5 !important; color: #059669 !important; } /* Admin search & role filter */ .light-theme .admin-search { background: #fff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } .light-theme .admin-search:focus { border-color: var(--accent-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08) !important; } .light-theme .admin-search::placeholder { color: #94a3b8 !important; } .light-theme .role-filter { background: #fff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } /* Action buttons */ .light-theme .btn-sm.toggle { background: #f1f5f9 !important; color: #475569 !important; } .light-theme .btn-sm.toggle:hover { background: #e2e8f0 !important; color: #0f172a !important; } .light-theme .btn-sm.force-logout { background: #fef2f2 !important; color: #dc2626 !important; border-color: #fecaca !important; } .light-theme .btn-sm.force-logout:hover { background: #fee2e2 !important; } .light-theme .btn-sm.unlock { background: #eff6ff !important; color: #2563eb !important; border-color: #bfdbfe !important; } .light-theme .btn-sm.unlock:hover { background: #dbeafe !important; } .light-theme .btn-sm.reset { background: #fffbeb !important; color: #d97706 !important; border-color: #fde68a !important; } .light-theme .btn-sm.reset:hover { background: #fef3c7 !important; } /* 2FA icons */ .light-theme .two-fa-icon.off { background: #f1f5f9 !important; color: #94a3b8 !important; } .light-theme .two-fa-icon.on { background: #ecfdf5 !important; } /* Config sections */ .light-theme .config-section { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important; } .light-theme .config-section h3 { color: #0f172a !important; } .light-theme .config-group label { color: #475569 !important; } .light-theme .config-group select, .light-theme .config-group input[type="text"], .light-theme .config-group input[type="number"] { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #0f172a !important; } .light-theme .config-group select:focus, .light-theme .config-group input:focus { border-color: var(--accent-primary) !important; background: #fff !important; } /* Invite row */ .light-theme .invite-row input, .light-theme .invite-row select { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #0f172a !important; } .light-theme .invite-row input:focus, .light-theme .invite-row select:focus { border-color: var(--accent-primary) !important; background: #fff !important; } .light-theme .invite-row .form-group label { color: #64748b !important; } /* Audit table */ .light-theme .audit-table th { color: #64748b !important; border-bottom-color: #e2e8f0 !important; background: #f8fafc !important; } .light-theme .audit-table td { border-bottom-color: #f1f5f9 !important; color: #475569 !important; } .light-theme .audit-action { color: #0f172a !important; } /* Audit controls */ .light-theme .audit-controls select, .light-theme .audit-controls input[type="date"] { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #0f172a !important; } .light-theme .audit-controls label { color: #64748b !important; } .light-theme .btn-csv { background: #ecfdf5 !important; color: #059669 !important; border-color: #a7f3d0 !important; } .light-theme .btn-csv:hover { background: #d1fae5 !important; } /* Empty state */ .light-theme .empty-state { color: #94a3b8 !important; } /* Alerts */ .light-theme .alert-success { background: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #059669 !important; } .light-theme .alert-error { background: #fef2f2 !important; border-color: #fecaca !important; color: #dc2626 !important; } /* Admin page description */ .light-theme .admin-page>p { color: #64748b !important; } /* =============================================== */ /* ===== MODALS (Teams + Workflow) ===== */ /* =============================================== */ /* Teams modals */ .light-theme .modal-panel { background: #fff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .12) !important; } .light-theme .modal-panel h3 { color: #0f172a !important; } .light-theme .modal-field label { color: #64748b !important; } .light-theme .modal-field input, .light-theme .modal-field select, .light-theme .modal-field textarea { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #0f172a !important; } .light-theme .modal-field input:focus, .light-theme .modal-field select:focus, .light-theme .modal-field textarea:focus { background: #fff !important; border-color: var(--accent-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08) !important; } .light-theme .modal-field input::placeholder { color: #94a3b8 !important; } /* Workflow modals */ .light-theme .wf-modal { background: #fff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .12) !important; } .light-theme .wf-modal h3 { color: #0f172a !important; } .light-theme .wf-field label { color: #64748b !important; } .light-theme .wf-field input, .light-theme .wf-field select, .light-theme .wf-field textarea { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #0f172a !important; } .light-theme .wf-field input:focus, .light-theme .wf-field select:focus { background: #fff !important; border-color: var(--accent-primary) !important; } .light-theme .wf-field input::placeholder { color: #94a3b8 !important; } /* Delete confirmation modal */ .light-theme .modal-panel .btn-danger, .light-theme .modal-panel button[style*="background:rgba(239, 68, 68"], .light-theme .modal-panel button[onclick*="delete"] { background: #fef2f2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important; } /* Modal cancel/secondary buttons */ .light-theme .modal-panel .btn-secondary, .light-theme .wf-modal .wf-btn:not(.wf-btn-primary) { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #475569 !important; } /* =============================================== */ /* ===== WORKFLOW CONTEXT MENU & TOAST ===== */ /* =============================================== */ .light-theme .wf-context-menu { background: #fff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .1) !important; } .light-theme .wf-context-menu button { color: #334155 !important; } .light-theme .wf-context-menu button:hover { background: #f1f5f9 !important; color: #0f172a !important; } .light-theme .wf-context-menu button.danger { color: #dc2626 !important; } .light-theme .wf-context-menu button.danger:hover { background: #fef2f2 !important; } /* Toasts */ .light-theme .wf-toast { background: #fff !important; border: 1px solid #a7f3d0 !important; color: #059669 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, .08) !important; } /* Workflow tooltip */ .light-theme .wf-node-tooltip { background: #fff !important; border-color: #e2e8f0 !important; color: #334155 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .1) !important; } .light-theme .wf-node-tooltip .tt-title { color: #0f172a !important; } /* Output port labels in light mode */ .light-theme .drawflow-node .output::after { background: rgba(0, 0, 0, .06) !important; } /* =============================================== */ /* ===== SETTINGS PAGE ===== */ /* =============================================== */ .light-theme .settings-card { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .06) !important; } .light-theme .settings-section-title { color: #0f172a !important; } .light-theme .settings-label { color: #475569 !important; } .light-theme .settings-input, .light-theme .settings-textarea { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #0f172a !important; } .light-theme .settings-input:focus, .light-theme .settings-textarea:focus { background: #fff !important; border-color: var(--accent-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1) !important; } /* Settings section cards (the actual class used in settings.html) */ .light-theme .settings-section { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important; } /* Form inputs (hardcoded rgba backgrounds) */ .light-theme .form-input { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #0f172a !important; } .light-theme .form-input:focus { background: #fff !important; border-color: var(--accent-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1) !important; } .light-theme .form-input::placeholder { color: #94a3b8 !important; } /* Outline buttons */ .light-theme .settings-page .btn-outline, .light-theme .settings-section .btn-outline { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #475569 !important; } .light-theme .settings-page .btn-outline:hover, .light-theme .settings-section .btn-outline:hover { background: #f1f5f9 !important; color: #0f172a !important; } /* Danger buttons */ .light-theme .settings-page .btn-danger { background: #fef2f2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important; } /* Status badges */ .light-theme .status-badge.disabled { background: #f1f5f9 !important; color: #64748b !important; border: 1px solid #e2e8f0 !important; } .light-theme .status-badge.enabled { background: #ecfdf5 !important; color: #059669 !important; border: 1px solid #a7f3d0 !important; } /* Passkey items */ .light-theme .passkey-item { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; } /* Backup codes */ .light-theme .backup-codes { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; } .light-theme .backup-codes span { color: #d97706 !important; } /* Settings page description text */ .light-theme .settings-page>p { color: #64748b !important; } /* Settings icon */ .light-theme .settings-page h1 i[data-lucide] { color: #3b82f6 !important; } /* Settings alerts */ .light-theme .settings-page .alert-success { background: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #059669 !important; } .light-theme .settings-page .alert-error { background: #fef2f2 !important; border-color: #fecaca !important; color: #dc2626 !important; } /* =============================================== */ /* ===== TEAMS / KANBAN PAGE ===== */ /* =============================================== */ .light-theme .kanban-column { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important; } .light-theme .kanban-column-header { border-bottom-color: #e2e8f0 !important; } .light-theme .kanban-column-name { color: #0f172a !important; } .light-theme .kanban-column-desc { color: #64748b !important; } .light-theme .kanban-member-count { background: #f1f5f9 !important; color: #64748b !important; } .light-theme .kanban-column-actions button:hover { background: #f1f5f9 !important; color: #0f172a !important; } /* Teams topbar */ .light-theme .teams-topbar { background: #fff !important; border-bottom: 1px solid #e2e8f0 !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .04) !important; } .light-theme .teams-topbar-brand { color: #0f172a !important; } .light-theme .topbar-sep { background: #e2e8f0 !important; } .light-theme .topbar-title { color: #475569 !important; } /* Teams page buttons */ .light-theme .btn { background: #fff !important; border-color: #e2e8f0 !important; color: #475569 !important; } .light-theme .btn:hover { background: #f1f5f9 !important; color: #0f172a !important; border-color: #cbd5e1 !important; } .light-theme .btn-primary { background: var(--accent-primary) !important; color: #fff !important; border-color: var(--accent-primary) !important; } .light-theme .btn-primary:hover { background: #1d4ed8 !important; } .light-theme .btn-success { background: var(--accent-success) !important; color: #fff !important; border-color: var(--accent-success) !important; } .light-theme .btn-danger { background: transparent !important; color: #dc2626 !important; border-color: #fecaca !important; } .light-theme .btn-danger:hover { background: #fef2f2 !important; } /* Member cards */ .light-theme .member-card { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important; } .light-theme .member-card:hover { border-color: #cbd5e1 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, .08) !important; } .light-theme .member-name { color: #0f172a !important; } .light-theme .member-email { color: #64748b !important; } .light-theme .member-card-actions button:hover { background: #f1f5f9 !important; color: #0f172a !important; } /* Role badges (teams) */ .light-theme .member-role-badge.lead { background: #fffbeb !important; color: #b45309 !important; border-color: #fde68a !important; } .light-theme .member-role-badge.member { background: #eff6ff !important; color: #2563eb !important; border-color: #bfdbfe !important; } .light-theme .member-role-badge.observer { background: #f1f5f9 !important; color: #64748b !important; border-color: #e2e8f0 !important; } /* Add member / add team */ .light-theme .kanban-add-member button { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #64748b !important; } .light-theme .kanban-add-member button:hover { background: #eff6ff !important; border-color: #bfdbfe !important; color: var(--accent-primary) !important; } .light-theme .kanban-add-member { border-top-color: #e2e8f0 !important; } .light-theme .kanban-add-column { border-color: #e2e8f0 !important; color: #94a3b8 !important; } .light-theme .kanban-add-column:hover { border-color: #bfdbfe !important; background: #eff6ff !important; color: var(--accent-primary) !important; } /* Modals (teams) */ .light-theme .modal-panel { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .12) !important; } .light-theme .modal-panel h3 { color: #0f172a !important; } .light-theme .modal-field label { color: #64748b !important; } .light-theme .modal-field input, .light-theme .modal-field select, .light-theme .modal-field textarea { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #0f172a !important; } .light-theme .modal-field input:focus, .light-theme .modal-field select:focus, .light-theme .modal-field textarea:focus { border-color: var(--accent-primary) !important; background: #fff !important; } /* Severity toggles */ .light-theme .sev-toggle { background: #f8fafc !important; border-color: #e2e8f0 !important; } .light-theme .sev-toggle:hover { border-color: #cbd5e1 !important; } .light-theme .sev-toggle.active { background: #fff !important; } /* Toast (teams) */ .light-theme .toast { background: #fff !important; border-color: #e2e8f0 !important; color: #0f172a !important; box-shadow: 0 8px 32px rgba(0, 0, 0, .12) !important; } /* Notification badges */ .light-theme .kanban-notify-badge.email { background: #eff6ff !important; color: #2563eb !important; } .light-theme .kanban-notify-badge.webhook { background: #f5f3ff !important; color: #7c3aed !important; } /* =============================================== */ /* ===== GLOBAL UTILITIES ===== */ /* =============================================== */ /* Scrollbar */ .light-theme ::-webkit-scrollbar { width: 8px; height: 8px; } .light-theme ::-webkit-scrollbar-track { background: transparent; } .light-theme ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .light-theme ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Toasts */ .light-theme .wf-toast { background: #0f172a !important; color: #f1f5f9 !important; } /* Generic select/option styling for inline selects */ .light-theme select, .light-theme option { background: #fff; color: #0f172a; } /* Generic input styling for any inputs not yet covered */ .light-theme input[type="text"], .light-theme input[type="email"], .light-theme input[type="password"], .light-theme input[type="number"], .light-theme input[type="search"], .light-theme input[type="date"], .light-theme textarea, .light-theme select { color-scheme: light; }