/* Light shell for authenticated app pages — use with */ /* Brand color tokens (inlined so this stylesheet stays self-contained on pages that don't link styles.css — e.g. quality-audit.html). */ :root { --tjx-red: #c31230; --tjx-red-dark: #8e0e22; --tjx-red-mid: #9c1028; --tjx-red-light: #d42845; --tjx-red-tint: #fef2f2; } /* Hide role-gated tabs/sections until auth resolves and the JS adds .role-resolved to body. Prevents the CI tabs from flashing in front of an LP user during the auth round-trip. */ body:not(.role-resolved) [data-ci-only], body:not(.role-resolved) [data-lp-only] { display: none !important; } body.app-light { background: #f9fafb !important; color: #111827; } body.app-light .bg-grid { background-image: linear-gradient(rgba(195, 18, 48, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(195, 18, 48, 0.04) 1px, transparent 1px) !important; } body.app-light .gradient-orb { opacity: 0.12 !important; } /* Navigation */ body.app-light .nav-glass { background: rgba(255, 255, 255, 0.96) !important; border-bottom: 1px solid rgba(195, 18, 48, 0.1) !important; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); } body.app-light .nav-link { color: #4b5563 !important; } body.app-light .nav-link:hover, body.app-light .nav-link.active { color: #c31230 !important; background: rgba(195, 18, 48, 0.06) !important; } /* User dropdown */ body.app-light .user-dropdown-menu { background: #ffffff !important; border: 1px solid #e5e7eb !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important; } body.app-light .user-dropdown-menu a { color: #374151 !important; } body.app-light .user-dropdown-menu a:hover { background: #f3f4f6 !important; color: #111827 !important; } body.app-light .user-dropdown-menu a.active { color: #c31230 !important; background: #fef2f2 !important; } body.app-light .user-dropdown-menu .divider { background: #e5e7eb !important; } body.app-light .user-dropdown-menu .border-white\/10, body.app-light .user-dropdown [class*="border-white"] { border-color: #e5e7eb !important; } /* Dashboard-style cards */ body.app-light .glass-card, body.app-light .metric-card, body.app-light .section-card, body.app-light .stat-box, body.app-light .category-badge { background: #ffffff !important; border: 1px solid rgba(195, 18, 48, 0.1) !important; backdrop-filter: none !important; } body.app-light .glass-card:hover, body.app-light .metric-card:hover { background: #fffdfd !important; border-color: rgba(195, 18, 48, 0.18) !important; box-shadow: 0 12px 28px rgba(17, 24, 39, 0.06) !important; } body.app-light .section-header { border-bottom-color: #e5e7eb !important; } body.app-light .quick-link { background: #ffffff !important; border: 1px solid #e5e7eb !important; } body.app-light .quick-link:hover { background: #fef2f2 !important; border-color: rgba(195, 18, 48, 0.2) !important; } body.app-light .quick-link-icon { color: #ffffff !important; } body.app-light .metric-label { color: #6b7280 !important; } body.app-light .metric-trend.neutral { color: #9ca3af !important; } body.app-light .metric-value { color: #111827 !important; } body.app-light .action-card { background: #f9fafb !important; } body.app-light .action-card:hover { background: #f3f4f6 !important; } body.app-light .action-card.info { border-left-color: #c31230 !important; } body.app-light .data-table th { color: #6b7280 !important; border-bottom-color: #e5e7eb !important; } body.app-light .data-table td { border-bottom-color: #f3f4f6 !important; color: #374151 !important; } body.app-light .data-table tr:hover td { background: #f9fafb !important; } body.app-light .form-select { background: #ffffff !important; border: 1px solid #d1d5db !important; color: #111827 !important; } body.app-light .form-select:focus { border-color: #c31230 !important; } body.app-light .form-select option { background: #ffffff !important; color: #111827 !important; } body.app-light .status-badge.inactive { background: #f3f4f6 !important; color: #6b7280 !important; } body.app-light ::-webkit-scrollbar-track { background: #f3f4f6 !important; } body.app-light ::-webkit-scrollbar-thumb { background: rgba(195, 18, 48, 0.25) !important; } /* Audit scheduler & similar */ body.app-light .page-card, body.app-light .project-card, body.app-light .audit-card { background: #ffffff !important; border: 1px solid rgba(195, 18, 48, 0.1) !important; backdrop-filter: none !important; } body.app-light .filter-tabs { background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; } body.app-light .filter-tab { color: #6b7280 !important; } body.app-light .filter-tab:hover { color: #111827 !important; background: #ffffff !important; } body.app-light .filter-tab.active { color: #ffffff !important; } body.app-light .form-input, body.app-light .form-textarea, body.app-light .form-select { background: #fafafa !important; border: 1px solid #e5e7eb !important; color: #111827 !important; } body.app-light .form-input::placeholder, body.app-light .form-textarea::placeholder { color: #9ca3af !important; } body.app-light .form-input:focus, body.app-light .form-textarea:focus, body.app-light .form-select:focus { border-color: #c31230 !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(195, 18, 48, 0.1) !important; } body.app-light .form-label { color: #374151 !important; } body.app-light .btn-cancel { background: #f3f4f6 !important; color: #374151 !important; border: 1px solid #e5e7eb !important; } body.app-light .btn-cancel:hover { background: #e5e7eb !important; } body.app-light .stat-card { background: #ffffff !important; border: 1px solid #e5e7eb !important; } /* Loading screen stays branded */ body.app-light .loading-screen { background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%) !important; } body.app-light .loading-screen .text-white\/70, body.app-light .loading-screen p { color: #6b7280 !important; } body.app-light .loading-screen .spinner { border-color: #e5e7eb !important; border-top-color: #c31230 !important; } /* Gemba Walk & similar — cards that used dark translucent backgrounds */ body.app-light .session-card { background: #ffffff !important; border: 1px solid #e5e7eb !important; } body.app-light .session-card:hover { border-color: rgba(195, 18, 48, 0.22) !important; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06); } body.app-light .question-card { background: #f9fafb !important; border: 1px solid #e5e7eb !important; } body.app-light .project-idea-card { background: #f0fdf4 !important; border-color: #bbf7d0 !important; } body.app-light .analytics-chart-card { background: #ffffff !important; border: 1px solid #e5e7eb !important; } body.app-light .analytics-stat-card { background: #ffffff !important; border: 1px solid #e5e7eb !important; } /* Project Tracking — KPI strip (was white / faint green on white) */ body.app-light .kpi-card { background: #ffffff !important; border: 1px solid rgba(195, 18, 48, 0.12) !important; backdrop-filter: none !important; } body.app-light .kpi-card:hover { background: #fffdfd !important; border-color: rgba(195, 18, 48, 0.2) !important; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06) !important; } body.app-light .kpi-label { color: #6b7280 !important; } body.app-light .kpi-value { color: #111827 !important; } body.app-light .kpi-trend { color: #6b7280 !important; } body.app-light .kpi-trend.positive { color: #15803d !important; } body.app-light .kpi-icon.blue { background: linear-gradient(135deg, rgba(195, 18, 48, 0.12), rgba(195, 18, 48, 0.06)) !important; color: #c31230 !important; } body.app-light .kpi-icon.green { background: linear-gradient(135deg, rgba(22, 163, 74, 0.15), rgba(22, 163, 74, 0.06)) !important; color: #15803d !important; } body.app-light .kpi-icon.orange { background: linear-gradient(135deg, rgba(234, 88, 12, 0.15), rgba(234, 88, 12, 0.06)) !important; color: #c2410c !important; } body.app-light .kpi-icon.purple { background: linear-gradient(135deg, rgba(195, 18, 48, 0.12), rgba(124, 58, 237, 0.08)) !important; color: #7c3aed !important; } body.app-light .kpi-icon.cyan { background: linear-gradient(135deg, rgba(8, 145, 178, 0.12), rgba(8, 145, 178, 0.05)) !important; color: #0e7490 !important; } /* Project cards — title was white on pale gradient */ body.app-light .project-card-header { background: linear-gradient(135deg, #fef2f2 0%, #f5f3ff 50%, #eff6ff 100%) !important; border-bottom: 1px solid #e5e7eb !important; } body.app-light .project-card-header::before { background: rgba(195, 18, 48, 0.06) !important; } body.app-light .project-title { color: #111827 !important; } body.app-light .project-category { color: #6b7280 !important; } body.app-light .meta-item { background: #f9fafb !important; border-color: #e5e7eb !important; } body.app-light .meta-label { color: #6b7280 !important; } body.app-light .meta-value { color: #991b1b !important; } body.app-light .project-savings { background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%) !important; border-color: #bbf7d0 !important; } body.app-light .savings-label { color: #166534 !important; } body.app-light .savings-value { color: #15803d !important; } body.app-light .project-footer { border-top-color: #e5e7eb !important; } /* Status pills — dark-theme neon greens were illegible on light fills */ body.app-light .status-badge.in-progress { background: #fef3c7 !important; color: #b45309 !important; } body.app-light .status-badge.completed { background: #dcfce7 !important; color: #166534 !important; } body.app-light .status-badge.planned { background: #fee2e2 !important; color: #b91c1c !important; } body.app-light .status-badge.on-hold { background: #ffedd5 !important; color: #c2410c !important; } body.app-light .status-badge.pending-approval { background: #fef3c7 !important; color: #b45309 !important; } body.app-light .status-badge.approved { background: #dcfce7 !important; color: #166534 !important; } body.app-light .status-badge.rejected { background: #fee2e2 !important; color: #b91c1c !important; } /* Inactive tab buttons next to KPIs */ body.app-light .tab-btn { background: #f3f4f6 !important; color: #4b5563 !important; border-color: #e5e7eb !important; } body.app-light .tab-btn:hover { color: #111827 !important; background: #ffffff !important; } /* Nav — hub name in brand red */ body.app-light .nav-hub-title { color: #c31230 !important; } /* Project Tracking — empty state & loading (page still used dark copy colors) */ body.app-light .empty-state i { color: #d1d5db !important; } body.app-light .empty-state h3 { color: #111827 !important; } body.app-light .empty-state p { color: #6b7280 !important; } body.app-light #loading-overlay { background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%) !important; } body.app-light #loading-overlay p { color: #6b7280 !important; } body.app-light #loading-overlay .spinner { border-color: #e5e7eb !important; border-top-color: #c31230 !important; } /* Project Tracking — list view row text was white on white card */ body.app-light .projects-grid.list-view .list-cell { color: #374151 !important; } body.app-light .projects-grid.list-view .list-cell.cipid-cell { color: #5b21b6 !important; } body.app-light .projects-grid.list-view .list-cell.title-cell { color: #111827 !important; } body.app-light .projects-grid.list-view .list-cell.savings-cell { color: #15803d !important; } body.app-light .list-header { background: #fef2f2 !important; border-color: rgba(195, 18, 48, 0.2) !important; color: #6b7280 !important; } body.app-light .view-toggle-btn { color: #6b7280 !important; background: #f3f4f6 !important; border-color: #e5e7eb !important; } body.app-light .view-toggle-btn:hover { color: #111827 !important; } /* ======================================== WHITE-ON-WHITE TEXT FIX Cards that become #fff under app-light must have their text-white children overridden. ======================================== */ body.app-light .glass-card > h4.text-white, body.app-light .glass-card h4.text-white, body.app-light .glass-card .text-white:not([class*="bg-"]):not(.quick-link-icon), body.app-light .page-card .text-white:not([class*="bg-"]):not(.quick-link-icon), body.app-light .session-card .text-white:not([class*="bg-"]), body.app-light .notification-card .text-white:not([class*="bg-"]), body.app-light .analytics-chart-card .text-white:not([class*="bg-"]), body.app-light .analytics-stat-card .text-white:not([class*="bg-"]) { color: #111827 !important; } body.app-light .glass-card .text-white\/90, body.app-light .page-card .text-white\/90, body.app-light .session-card .text-white\/90, body.app-light .glass-card [class*="text-white/9"], body.app-light .page-card [class*="text-white/9"] { color: #374151 !important; } body.app-light .glass-card .text-white\/80, body.app-light .glass-card .text-white\/70, body.app-light .page-card .text-white\/80, body.app-light .page-card .text-white\/70 { color: #4b5563 !important; } body.app-light .quick-link h4.text-white, body.app-light .quick-link .text-white:not(.quick-link-icon) { color: #111827 !important; } body.app-light .notification-card h4 { color: #111827 !important; } body.app-light .session-card .text-white\/60, body.app-light .session-card .text-white\/50 { color: #6b7280 !important; } /* Activity items in page-card */ body.app-light .page-card .activity-text, body.app-light .page-card .activity-item .text-white { color: #374151 !important; } /* Stat cards and metric labels that were white-on-dark */ body.app-light .stat-card .text-white:not([class*="bg-"]) { color: #111827 !important; } /* Yellow badge text on light backgrounds */ body.app-light .glass-card .text-yellow-300 { color: #b45309 !important; } body.app-light .glass-card .bg-yellow-500\/20 { background: #fef3c7 !important; } /* Table borders that were white-on-dark */ body.app-light .glass-card tr.border-b.border-white\/5, body.app-light .glass-card [class*="border-white"] { border-color: #e5e7eb !important; } /* CI Games — game cards on light background */ body.app-light .game-card { background: #ffffff !important; border: 1px solid #e5e7eb !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } body.app-light .game-card:hover { background: #ffffff !important; border-color: rgba(16, 185, 129, 0.4) !important; box-shadow: 0 12px 28px rgba(17, 24, 39, 0.08) !important; } body.app-light .game-card.selected { border: 2px solid #10b981 !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.15) !important; } /* Session card text for ci-games */ body.app-light .session-card h4 { color: #111827 !important; } body.app-light .session-card p { color: #4b5563 !important; } /* Audit card text */ body.app-light .audit-card .text-white:not([class*="bg-"]) { color: #111827 !important; } /* ============================================================ LP Audit (quality-audit.html) — light-theme overrides The page's inline