/* ========================================================== DARK MODE — Perfect Paver Co Triggered by body.dark-mode or html.dark-mode Black background (#0a0a0a), keeps green (#69BE28) & blue (#2c66c3) branding ========================================================== */ /* ============= 1. BASE ============= */ .dark-mode body, body.dark-mode, html.dark-mode body { background: #0a0a0a !important; color: #e2e8f0 !important; } body.dark-mode.centered, html.dark-mode body.centered { background: #0a0a0a !important; } /* ============= 2. TOP BAR ============= */ body.dark-mode .top-bar, html.dark-mode .top-bar { background: #111111 !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important; border-bottom: 1px solid #1e1e1e; } body.dark-mode .top-bar .link, html.dark-mode .top-bar .link { color: #69BE28 !important; } /* ============= 2B. HTML-LEVEL DARK MODE (FOUC prevention) ============= */ /* The inline script adds dark-mode to before exists. These html.dark-mode selectors ensure elements are dark immediately, before dark-mode.js adds the class to . */ html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 { color: #e2e8f0 !important; } html.dark-mode label, html.dark-mode legend { color: #cbd5e1 !important; } html.dark-mode .link { color: #69BE28 !important; } html.dark-mode .wrap, html.dark-mode .wrap-small, html.dark-mode .container, html.dark-mode .admin-container { background: #151515 !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important; } html.dark-mode input, html.dark-mode select, html.dark-mode textarea { background: #1e1e1e !important; color: #e2e8f0 !important; border-color: #333 !important; } html.dark-mode button { border-color: #333 !important; } html.dark-mode .admin-card { background: #151515 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; border-color: #333 !important; } html.dark-mode .admin-card-content h3 { color: #e2e8f0 !important; } html.dark-mode .admin-card-content p { color: #94a3b8 !important; } html.dark-mode .tool-card, html.dark-mode .form-card, html.dark-mode .dashboard-section, html.dark-mode .dashboard-container { background: #151515 !important; color: #e2e8f0 !important; border-color: #2a2a2a !important; } html.dark-mode .tool-card h4 { color: #e2e8f0 !important; } html.dark-mode .tool-card p { color: #94a3b8 !important; } html.dark-mode .modal-content, html.dark-mode .quiz-panel { background: #151515 !important; color: #e2e8f0 !important; } html.dark-mode p { color: #cbd5e1 !important; } /* ============= 3. GLOBAL TYPOGRAPHY ============= */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, body.dark-mode .wrap > h1, body.dark-mode .wrap-small h1, body.dark-mode #videoTitle, body.dark-mode .section-header { color: #e2e8f0 !important; } body.dark-mode label, body.dark-mode legend { color: #cbd5e1 !important; } body.dark-mode .link { color: #69BE28 !important; } body.dark-mode a:not(.link):not(button):not([style*="background"]) { color: #60a5fa; } body.dark-mode small { color: #94a3b8 !important; } /* ============= 4. WHITE/LIGHT BACKGROUND → DARK ============= */ body.dark-mode .dashboard-section, body.dark-mode .dashboard-container, body.dark-mode .tool-card, body.dark-mode .form-card, body.dark-mode .admin-card, body.dark-mode .onboarding-card, body.dark-mode .offboarding-card, body.dark-mode .feedback-card, body.dark-mode .ft-card, body.dark-mode .day-card, body.dark-mode .stat-card, body.dark-mode .rate-card, body.dark-mode .info-card, body.dark-mode .request-item, body.dark-mode .coaching-card, body.dark-mode .commission-card, body.dark-mode .commission-section, body.dark-mode .video-card, body.dark-mode .step-card, body.dark-mode .training-card-content, body.dark-mode .quick-link, body.dark-mode .nav-item { background: #151515 !important; color: #e2e8f0 !important; border-color: #2a2a2a !important; } body.dark-mode .tool-card h4 { color: #e2e8f0 !important; } body.dark-mode .tool-card p { color: #94a3b8 !important; } body.dark-mode .tool-card:hover { border-color: #69BE28 !important; } body.dark-mode .table-container, body.dark-mode .filter-section, body.dark-mode .reports-header, body.dark-mode .timesheet-header, body.dark-mode .admin-header, body.dark-mode .action-bar, body.dark-mode .events-list, body.dark-mode .panel, body.dark-mode .employee-selector, body.dark-mode .benefits-container, body.dark-mode .comparison-table, body.dark-mode .contact-box, body.dark-mode .exception-report, body.dark-mode .export-progress { background: #151515 !important; color: #e2e8f0 !important; } body.dark-mode .wrap-small { background: #151515 !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important; } body.dark-mode .event-item, body.dark-mode .month-nav { background: #1a1a1a !important; } body.dark-mode .punch-item, body.dark-mode .no-punches-day { background: #1a1a1a !important; } body.dark-mode .punch-item.edited { background: #1a1a0a !important; } body.dark-mode .punch-item.benefit { background: #0a1a0a !important; } body.dark-mode .employee-dropdown, body.dark-mode .employee-list, body.dark-mode .user-list { background: #151515 !important; } body.dark-mode .employee-option:hover, body.dark-mode .department-option:hover, body.dark-mode .employee-item:hover, body.dark-mode .user-item:hover, body.dark-mode .select-user-btn { background: #1a1a1a !important; } body.dark-mode .checklist-item { background: #151515 !important; } body.dark-mode .checklist-item.completed { background: #0a1a0f !important; } body.dark-mode .form-stat, body.dark-mode .form-item, body.dark-mode .form-sign-box, body.dark-mode .form-content-section, body.dark-mode .form-field-value, body.dark-mode .form-detail-value, body.dark-mode .assign-section, body.dark-mode .assign-box, body.dark-mode .assign-form-option, body.dark-mode .fs-item { background: #151515 !important; color: #e2e8f0 !important; } body.dark-mode .sop-admin-item { background: #151515 !important; } body.dark-mode .sop-admin-actions button { background: #1a1a1a !important; color: #e2e8f0 !important; border-color: #333 !important; } body.dark-mode .uploaded-file, body.dark-mode .attachment-link { background: #1a1a1a !important; color: #e2e8f0 !important; } body.dark-mode .ft-pdf-upload, body.dark-mode .file-upload-area { background: #111 !important; border-color: #444 !important; color: #94a3b8 !important; } body.dark-mode .file-upload-area:hover, body.dark-mode .ft-pdf-upload:hover { background: #1a1a1a !important; } body.dark-mode .ft-toolbar, body.dark-mode .sop-toolbar { background: #1a1a1a !important; border-color: #333 !important; } body.dark-mode .ft-toolbar button, body.dark-mode .sop-toolbar button { background: #222 !important; color: #e2e8f0 !important; border-color: #444 !important; } body.dark-mode .ft-editor, body.dark-mode .sop-editor { background: #151515 !important; border-color: #333 !important; color: #e2e8f0 !important; } /* Wildcard: force ALL text inside rich text editors light (catches inline styles from Firestore) */ body.dark-mode .ft-editor *, body.dark-mode .sop-editor * { color: #e2e8f0 !important; } body.dark-mode .filters { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .quiz-question { background: #151515 !important; } body.dark-mode .quiz-choices label { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .quiz-choices label:hover { background: #222 !important; border-color: #2c66c3 !important; } body.dark-mode .quiz-summary { background: #151515 !important; } /* ============= 5. ALL MODALS ============= */ body.dark-mode .modal-content, body.dark-mode .user-modal-content, body.dark-mode .ft-modal, body.dark-mode .sop-modal-box, body.dark-mode .edit-modal-box, body.dark-mode .form-sign-box, body.dark-mode .assign-box, body.dark-mode .confirm-dialog, body.dark-mode .quiz-panel, body.dark-mode .feedback-modal-content, body.dark-mode .payroll-modal-content { background: #151515 !important; color: #e2e8f0 !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important; } body.dark-mode .quiz-panel h2, body.dark-mode .quiz-panel h3, body.dark-mode .feedback-modal-content h2 { color: #e2e8f0 !important; } body.dark-mode .quiz-panel label, body.dark-mode .feedback-modal label { color: #cbd5e1 !important; } body.dark-mode .quiz-panel select, body.dark-mode .quiz-panel input, body.dark-mode .quiz-panel textarea, body.dark-mode .feedback-modal select, body.dark-mode .feedback-modal input, body.dark-mode .feedback-modal textarea { background: #1e1e1e !important; color: #e2e8f0 !important; border-color: #333 !important; } body.dark-mode .feedback-cancel { background: #2a2a2a !important; color: #e2e8f0 !important; } body.dark-mode .feedback-cancel:hover { background: #333 !important; } body.dark-mode .quiz-panel .btn-secondary { background: #1e1e1e !important; color: #e2e8f0 !important; border-color: #333 !important; } body.dark-mode .quiz-panel .btn-secondary:hover { background: #2a2a2a !important; border-color: #69BE28 !important; } body.dark-mode .quiz-panel [style*="background: #f8fafc"], body.dark-mode .quiz-panel [style*="background:#f8fafc"] { background: #1a1a1a !important; } body.dark-mode .quiz-panel [style*="color: #1e293b"], body.dark-mode .quiz-panel [style*="color:#1e293b"] { color: #e2e8f0 !important; } body.dark-mode .modal-header, body.dark-mode .ft-modal-header, body.dark-mode .sop-modal-header { border-bottom-color: #2a2a2a !important; } body.dark-mode .modal-footer, body.dark-mode .ft-modal-footer, body.dark-mode .sop-modal-footer, body.dark-mode .modal-actions { border-top-color: #2a2a2a !important; } body.dark-mode .modal-title, body.dark-mode .ft-modal-header h2, body.dark-mode .ft-modal-header .modal-subtitle, body.dark-mode .sop-modal-header h2 { color: #e2e8f0 !important; } body.dark-mode .close-modal, body.dark-mode .modal-close, body.dark-mode .user-modal-close, body.dark-mode .close-btn, body.dark-mode .close { color: #666 !important; } body.dark-mode .close-modal:hover, body.dark-mode .modal-close:hover, body.dark-mode .user-modal-close:hover, body.dark-mode .close-btn:hover, body.dark-mode .close:hover { color: #e2e8f0 !important; background: #222 !important; } /* ============= 6. DARK TEXT → LIGHT ============= */ /* Primary dark text */ body.dark-mode .tool-card h4, body.dark-mode .tool-card h3, body.dark-mode .form-card h3, body.dark-mode .card-title, body.dark-mode .reports-title, body.dark-mode .day-title, body.dark-mode .punch-type, body.dark-mode .section-title, body.dark-mode .panel-title, body.dark-mode .ft-title, body.dark-mode .ft-card .ft-title, body.dark-mode .event-item-title, body.dark-mode .month-title, body.dark-mode .form-type, body.dark-mode .sop-admin-title, body.dark-mode .sop-admin-item .sop-admin-title, body.dark-mode .form-item-title, body.dark-mode .form-sign-title, body.dark-mode .stat-value, body.dark-mode .form-stat-value, body.dark-mode .user-item-name, body.dark-mode .employee-name, body.dark-mode .selected-employee-name, body.dark-mode .request-dates, body.dark-mode .form-field-value, body.dark-mode .form-detail-value, body.dark-mode .department-option span, body.dark-mode .checklist-item-title, body.dark-mode .detail-value, body.dark-mode .modal-title, body.dark-mode .modal-header, body.dark-mode .exception-employee, body.dark-mode .ft-version-item .ver-label, body.dark-mode .assign-form-option .afo-info h4, body.dark-mode .fs-item-title, body.dark-mode .employee-option .emp-name, body.dark-mode .form-content-section, body.dark-mode .form-detail-label, body.dark-mode .admin-card h3 { color: #e2e8f0 !important; } /* Secondary/muted text */ body.dark-mode .tool-card p, body.dark-mode .admin-card p, body.dark-mode .card-subtitle, body.dark-mode .detail-label, body.dark-mode .reports-subtitle, body.dark-mode .day-hours, body.dark-mode .punch-time, body.dark-mode .form-label, body.dark-mode .audit-text, body.dark-mode .stat-label, body.dark-mode .form-stat-label, body.dark-mode .stat-badge-label, body.dark-mode .filter-label, body.dark-mode .user-item-email, body.dark-mode .employee-details, body.dark-mode .employee-dept, body.dark-mode .checklist-item-description, body.dark-mode .progress-text, body.dark-mode .feedback-date, body.dark-mode .feedback-manager, body.dark-mode .feedback-meta, body.dark-mode .feedback-details, body.dark-mode .rate-input-group span, body.dark-mode .rate-note, body.dark-mode .form-detail, body.dark-mode .form-field-label, body.dark-mode .form-item-meta, body.dark-mode .request-details, body.dark-mode .form-group small, body.dark-mode .sop-admin-meta, body.dark-mode .sop-admin-item .sop-admin-meta, body.dark-mode .sop-order-handle, body.dark-mode .ft-card .ft-desc, body.dark-mode .ft-card .ft-meta span, body.dark-mode .ft-card .ft-actions button, body.dark-mode .ft-version-item .ver-date, body.dark-mode .ft-version-item .ver-changelog, body.dark-mode .ft-modal-header .modal-subtitle, body.dark-mode .event-item-details, body.dark-mode .event-item-description, body.dark-mode .no-events, body.dark-mode .day-number, body.dark-mode .wf-step .wf-label, body.dark-mode .status-tab, body.dark-mode .subtitle, body.dark-mode .loading, body.dark-mode .loading-spinner, body.dark-mode .empty-state, body.dark-mode .empty-state-text, body.dark-mode .empty-placeholder, body.dark-mode .no-announcements, body.dark-mode .quiz-progress, body.dark-mode .assign-form-option .afo-info p, body.dark-mode .fs-item-meta, body.dark-mode .employee-option .emp-dept, body.dark-mode .info-tab, body.dark-mode .mgr-tab { color: #94a3b8 !important; } /* ============= 7. BORDERS → DARK ============= */ body.dark-mode .tool-card, body.dark-mode .onboarding-card, body.dark-mode .offboarding-card, body.dark-mode .stat-card, body.dark-mode .form-card, body.dark-mode .ft-card, body.dark-mode .checklist-item, body.dark-mode .employee-list, body.dark-mode .assign-form-option, body.dark-mode .form-field-value, body.dark-mode .form-detail-value, body.dark-mode .form-content-section, body.dark-mode .form-item, body.dark-mode .fs-item, body.dark-mode .sop-admin-item, body.dark-mode .request-item { border-color: #2a2a2a !important; } body.dark-mode .employee-item, body.dark-mode .employee-option, body.dark-mode .user-item, body.dark-mode .user-list { border-color: #2a2a2a !important; } body.dark-mode .status-tabs, body.dark-mode .card-actions, body.dark-mode .feedback-attachments, body.dark-mode .feedback-actions, body.dark-mode .info-tabs, body.dark-mode .mgr-tabs, body.dark-mode .nav-tabs, body.dark-mode .rate-note, body.dark-mode .section-title, body.dark-mode .ft-version-item, body.dark-mode .ft-content-toggle, body.dark-mode .ft-toolbar, body.dark-mode .ft-editor, body.dark-mode .sop-toolbar, body.dark-mode .sop-editor, body.dark-mode .sop-cancel-btn, body.dark-mode .employee-dropdown, body.dark-mode .filters, body.dark-mode .comparison-table td, body.dark-mode .info-card, body.dark-mode .section h2 { border-color: #2a2a2a !important; } /* Table borders */ body.dark-mode th { background: #1a1a1a !important; color: #94a3b8 !important; border-bottom-color: #2a2a2a !important; } body.dark-mode td { color: #cbd5e1 !important; border-bottom-color: #1e1e1e !important; } body.dark-mode tbody tr:hover { background-color: #1a1a1a !important; } body.dark-mode .table-header, body.dark-mode .forms-table th { background: #1a1a1a !important; color: #94a3b8 !important; border-color: #2a2a2a !important; } body.dark-mode .forms-table td { color: #e2e8f0 !important; border-color: #1e1e1e !important; } body.dark-mode .comparison-table tr:nth-child(even) { background: #111 !important; } body.dark-mode hr { border-color: #2a2a2a !important; } /* ============= 8. INPUTS / SELECTS / TEXTAREAS ============= */ body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: #1a1a1a !important; color: #e2e8f0 !important; border-color: #333 !important; } body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: #555 !important; } body.dark-mode input:focus, body.dark-mode select:focus, body.dark-mode textarea:focus { border-color: #69BE28 !important; outline-color: #69BE28; } body.dark-mode input[readonly] { background: #111 !important; color: #94a3b8 !important; } body.dark-mode option { background: #1a1a1a !important; color: #e2e8f0 !important; } /* ============= 9. BUTTONS ============= */ body.dark-mode .btn-secondary, body.dark-mode .btn-action.secondary, body.dark-mode .ft-btn-cancel, body.dark-mode .sop-cancel-btn, body.dark-mode .form-sign-cancel, body.dark-mode .edit-modal-actions .cancel-btn { background: #2a2a2a !important; color: #e2e8f0 !important; border-color: #444 !important; } body.dark-mode .btn-secondary:hover, body.dark-mode .btn-action.secondary:hover, body.dark-mode .ft-btn-cancel:hover, body.dark-mode .sop-cancel-btn:hover, body.dark-mode .form-sign-cancel:hover, body.dark-mode .edit-modal-actions .cancel-btn:hover { background: #333 !important; } body.dark-mode .ft-card .ft-actions button { background: #1a1a1a !important; color: #e2e8f0 !important; border-color: #333 !important; } body.dark-mode .ft-card .ft-actions button:hover { background: #222 !important; } body.dark-mode .ft-content-toggle button { background: #1a1a1a !important; color: #e2e8f0 !important; } body.dark-mode button:disabled { background: #222 !important; color: #555 !important; } body.dark-mode .filter-btn { background: #1a1a1a !important; color: #94a3b8 !important; border-color: #333 !important; } body.dark-mode .filter-btn:hover, body.dark-mode .filter-btn.active { background: #69BE28 !important; color: white !important; border-color: #69BE28 !important; } /* ============= 10. TABS / NAVIGATION ============= */ body.dark-mode .tab-btn, body.dark-mode .nav-tab, body.dark-mode .benefit-tab, body.dark-mode .status-tab, body.dark-mode .mgr-tab { background: #1a1a1a !important; color: #94a3b8 !important; border-color: #333 !important; } body.dark-mode .tab-btn.active, body.dark-mode .tab-btn:hover, body.dark-mode .nav-tab.active, body.dark-mode .nav-tab:hover, body.dark-mode .benefit-tab.active, body.dark-mode .benefit-tab:hover, body.dark-mode .status-tab.active, body.dark-mode .status-tab:hover, body.dark-mode .mgr-tab.active, body.dark-mode .mgr-tab:hover { background: #69BE28 !important; color: #000 !important; border-color: #69BE28 !important; } /* info-tab keeps original transparent design with bottom-border accent */ body.dark-mode .info-tab { background: none !important; color: #94a3b8 !important; border-bottom-color: transparent !important; } body.dark-mode .info-tab.active { background: none !important; color: #e2e8f0 !important; border-bottom-color: #69BE28 !important; } body.dark-mode .info-tab:hover { color: #e2e8f0 !important; background: none !important; } body.dark-mode .info-tabs { border-bottom-color: #333 !important; } body.dark-mode .nav-tabs { background: #111 !important; border-color: #2a2a2a !important; } /* ============= 11. SELECTED STATES ============= */ body.dark-mode .selected-employee-badge, body.dark-mode .employee-item.selected { background: #1a2a3a !important; border-color: #2c66c3 !important; color: #60a5fa !important; } /* ============= 12. ALERT/NOTICE BOXES ============= */ body.dark-mode .validation-errors { background: #1a0a0a !important; border-color: #7f1d1d !important; color: #fca5a5 !important; } body.dark-mode .audit-trail { background: #1a1a0a !important; border-color: #92400e !important; color: #fbbf24 !important; } body.dark-mode .archive-section { background: #1a1a0a !important; border-color: #92400e !important; } body.dark-mode .archive-section-title { color: #fbbf24 !important; } body.dark-mode .archive-section-description { color: #d97706 !important; } body.dark-mode .general-info-card { background: #0a1a0a !important; border-color: #166534 !important; color: #4ade80 !important; } body.dark-mode .tips-info { background: #1a1a0a !important; border-color: #92400e !important; } body.dark-mode .sign-acknowledge-section { background: #1a1a0a !important; border-color: #92400e !important; } /* ============= 13. MESSAGES ============= */ body.dark-mode .msg.error { background-color: #2d1515 !important; color: #f87171 !important; border-color: #7f1d1d !important; } body.dark-mode .msg.success, body.dark-mode .success-msg, body.dark-mode .success-notice, body.dark-mode .already-signed-info { background-color: #0a2e14 !important; color: #4ade80 !important; border-color: #166534 !important; } /* ============= 14. WORKFLOW/PROGRESS ============= */ body.dark-mode .wf-connector { background: #333 !important; } body.dark-mode .wf-dot { background: #333 !important; border-color: #333 !important; } body.dark-mode .progress-bar { background: #333 !important; } /* ============= 15. CALENDAR ============= */ body.dark-mode .calendar-header { background: #151515 !important; color: #e2e8f0 !important; border-color: #2a2a2a !important; } body.dark-mode .events-section { background: #151515 !important; color: #e2e8f0 !important; } body.dark-mode .event-card { background: #1a1a1a !important; color: #e2e8f0 !important; border-color: #2a2a2a !important; } body.dark-mode .event-title { color: #e2e8f0 !important; } body.dark-mode .event-description { color: #94a3b8 !important; } body.dark-mode .calendar-legend { background: #151515 !important; color: #e2e8f0 !important; } body.dark-mode .month-title { color: #e2e8f0 !important; } body.dark-mode .calendar-day { background: #151515 !important; border-color: #2a2a2a !important; color: #e2e8f0 !important; } body.dark-mode .calendar-day:hover { background: #1a1a1a !important; } body.dark-mode .calendar-day.today { border-color: #69BE28 !important; background: #111 !important; } body.dark-mode .calendar-day.other-month { background: #0a0a0a !important; color: #555 !important; } body.dark-mode .calendar-grid { background: #2a2a2a !important; border-color: #2a2a2a !important; } /* ============= 16. SIDEBAR / STEP LIST ============= */ body.dark-mode .step-list, body.dark-mode .sidebar { background: #111111 !important; } body.dark-mode .step-list li { color: #94a3b8 !important; } body.dark-mode .step-list li.active, body.dark-mode .step-list li:hover { background: #1a1a1a !important; color: #69BE28 !important; } /* ============= 17. POLICY ITEMS ============= */ body.dark-mode .policy-item { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .policy-item:hover { border-color: #69BE28 !important; } body.dark-mode .policy-item-number, body.dark-mode .collapse-icon { color: #69BE28 !important; } body.dark-mode .policy-item-title { color: #e2e8f0 !important; } body.dark-mode .policy-item-category { background: #1a1a1a !important; color: #94a3b8 !important; } /* ============= 18. VIDEO ITEMS ============= */ body.dark-mode .vid-item { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .vid-item:hover { border-color: #69BE28 !important; } body.dark-mode .vid-item-title { color: #e2e8f0 !important; } body.dark-mode .vid-item-subtitle { color: #94a3b8 !important; } /* ============= 19. PROGRESS DASHBOARD ============= */ body.dark-mode .progress-dashboard { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important; } /* ============= 20. FOOTER ============= */ body.dark-mode .site-footer, body.dark-mode .bottom-bar, body.dark-mode footer { background: #111111 !important; border-top-color: #1e1e1e !important; color: #94a3b8 !important; } body.dark-mode .site-footer a, body.dark-mode .bottom-bar a, body.dark-mode footer a { color: #69BE28 !important; cursor: pointer; } body.dark-mode .footer-divider { color: #444 !important; } /* ============= 21. SCROLLBARS ============= */ body.dark-mode ::-webkit-scrollbar { width: 8px; height: 8px; } body.dark-mode ::-webkit-scrollbar-track { background: #0a0a0a; } body.dark-mode ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #555; } /* ============= 22. HOVER STATES ============= */ body.dark-mode .tool-card:hover { border-color: #69BE28 !important; box-shadow: 0 4px 12px rgba(105, 190, 40, 0.15) !important; } body.dark-mode .admin-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important; } body.dark-mode .form-card:hover, body.dark-mode .feedback-card:hover, body.dark-mode .coaching-card:hover, body.dark-mode .video-card:hover, body.dark-mode .step-card:hover, body.dark-mode .onboarding-card:hover, body.dark-mode .sop-admin-item:hover { border-color: #69BE28 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; } body.dark-mode .ft-card:hover { border-color: #69BE28 !important; } body.dark-mode .assign-form-option:hover { background: #1a1a1a !important; border-color: #69BE28 !important; } body.dark-mode .request-item:hover, body.dark-mode .form-item:hover { background: #1a1a1a !important; } /* ============= 23. INLINE STYLE OVERRIDES ============= */ body.dark-mode [style*="background: white"], body.dark-mode [style*="background:white"], body.dark-mode [style*="background:#fff"], body.dark-mode [style*="background: #fff"], body.dark-mode [style*="background: #ffffff"], body.dark-mode [style*="background:#ffffff"] { background: #151515 !important; } body.dark-mode [style*="background: #f3f4f6"], body.dark-mode [style*="background:#f3f4f6"], body.dark-mode [style*="background: #f3f4f7"], body.dark-mode [style*="background:#f3f4f7"], body.dark-mode [style*="background: #f8fafc"], body.dark-mode [style*="background:#f8fafc"], body.dark-mode [style*="background: #f9fafb"], body.dark-mode [style*="background:#f9fafb"], body.dark-mode [style*="background: #f1f5f9"], body.dark-mode [style*="background:#f1f5f9"], body.dark-mode [style*="background: #f8f9fa"], body.dark-mode [style*="background:#f8f9fa"] { background: #111111 !important; } /* Inline dark text → light */ body.dark-mode [style*="color: #1e293b"], body.dark-mode [style*="color:#1e293b"], body.dark-mode [style*="color: #1a1a1a"], body.dark-mode [style*="color: #111"], body.dark-mode [style*="color:#111"], body.dark-mode [style*="color: #0f172a"], body.dark-mode [style*="color: #002244"], body.dark-mode [style*="color:#002244"], body.dark-mode [style*="color: #1a202c"], body.dark-mode [style*="color: #1f2937"], body.dark-mode [style*="color:#1f2937"], body.dark-mode [style*="color: #334155"], body.dark-mode [style*="color:#334155"] { color: #e2e8f0 !important; } body.dark-mode [style*="color: #374151"], body.dark-mode [style*="color:#374151"], body.dark-mode [style*="color: #475569"], body.dark-mode [style*="color:#475569"], body.dark-mode [style*="color: #6b7280"], body.dark-mode [style*="color:#6b7280"], body.dark-mode [style*="color: #64748b"], body.dark-mode [style*="color:#64748b"], body.dark-mode [style*="color: #94a3b8"], body.dark-mode [style*="color:#94a3b8"], body.dark-mode [style*="color: #9ca3af"], body.dark-mode [style*="color:#9ca3af"] { color: #94a3b8 !important; } body.dark-mode [style*="border-top: 1px solid #e5e7eb"], body.dark-mode [style*="border-bottom: 1px solid #e5e7eb"], body.dark-mode [style*="border: 1px solid #e5e7eb"], body.dark-mode [style*="border: 1px solid #e2e8f0"], body.dark-mode [style*="border: 2px solid #e2e8f0"], body.dark-mode [style*="border: 2px solid #e5e7eb"], body.dark-mode [style*="border: 1px solid #d1d5db"], body.dark-mode [style*="border-top: 2px solid #e9ecef"], body.dark-mode [style*="border-bottom: 2px solid #e5e7eb"], body.dark-mode [style*="border: 2px solid #e9ecef"] { border-color: #2a2a2a !important; } body.dark-mode [style*="box-shadow: 0 1px 3px rgba(0,0,0,0.1)"], body.dark-mode [style*="box-shadow: 0 2px 8px rgba(0,0,0,0.08)"], body.dark-mode [style*="box-shadow: 0 2px 12px rgba(0,0,0,0.08)"] { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; } /* ============= 24. DOCUMENT LINKS ============= */ body.dark-mode .document-link { color: #60a5fa !important; } /* ============= 25. NOTE BOXES ============= */ body.dark-mode .note { background: #151515 !important; border-color: #333 !important; color: #cbd5e1 !important; } /* ============= 26. BENEFITS PAGE ============= */ body.dark-mode .benefits-container { background: #151515 !important; } body.dark-mode .comparison-table { background: #151515 !important; } body.dark-mode .contact-box { background: #111 !important; } body.dark-mode .section h2 { color: #e2e8f0 !important; border-color: #2a2a2a !important; } body.dark-mode .section h3 { color: #93c5fd !important; } body.dark-mode .section p, body.dark-mode .section li { color: #cbd5e1 !important; } body.dark-mode .info-card { background: #1a1a1a !important; border-color: #2a2a2a !important; } body.dark-mode .info-card h3 { color: #93c5fd !important; } body.dark-mode .info-card p, body.dark-mode .info-card li { color: #cbd5e1 !important; } /* ============= 27. TOGGLE BUTTON ============= */ .dark-mode-toggle { display: flex; align-items: center; cursor: pointer; padding: 6px 10px; border-radius: 20px; background: #f3f4f6; border: 1px solid #d1d5db; font-size: 16px; transition: all 0.3s ease; user-select: none; -webkit-user-select: none; gap: 6px; white-space: nowrap; } .dark-mode-toggle:hover { background: #e5e7eb; } body.dark-mode .dark-mode-toggle { background: #1a1a1a !important; border-color: #333 !important; } body.dark-mode .dark-mode-toggle:hover { background: #222 !important; } .toggle-track { position: relative; width: 36px; height: 20px; background: #d1d5db; border-radius: 10px; transition: background 0.3s ease; flex-shrink: 0; } body.dark-mode .toggle-track { background: #69BE28 !important; } .toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 50%; transition: transform 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } body.dark-mode .toggle-thumb { transform: translateX(16px); } /* ============= 28. SMOOTH TRANSITION ============= */ body.dark-mode-transitioning, body.dark-mode-transitioning *, body.dark-mode-transitioning *::before, body.dark-mode-transitioning *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } /* ============= 29. PAYROLL BANNER ============= */ body.dark-mode #payrollActionBanner [style*="background: #fef2f2"] { background: #1a0a0a !important; } /* ============= 30. LOCK STATUS ============= */ body.dark-mode .lock-status.locked { background: #1a0a0a !important; color: #f87171 !important; border-color: #7f1d1d !important; } body.dark-mode .lock-status.unlocked { background: #0a1a0a !important; color: #4ade80 !important; border-color: #166534 !important; } /* ============= 31. DELETE/ACTION BUTTONS ============= */ body.dark-mode .delete-state-btn { background: #1a0a0a !important; color: #f87171 !important; border-color: #7f1d1d !important; } body.dark-mode .action-btn.edit { background: #1a2a3a !important; color: #60a5fa !important; } body.dark-mode .action-btn.delete { background: #1a0a0a !important; color: #f87171 !important; } /* ============= 32. COACHING TYPE BADGES ============= */ body.dark-mode .type-observation { background: #1a2a3a !important; } body.dark-mode .type-general { background: #1f1a2e !important; } body.dark-mode .type-skill { background: #0a2e14 !important; } body.dark-mode .type-behavior { background: #2e2a0a !important; } body.dark-mode .type-recognition { background: #2e0a1a !important; } body.dark-mode .type-goal { background: #1a1a2e !important; } body.dark-mode .edited-badge { background: #2e2a0a !important; } body.dark-mode .selected-employee { background: #2e2a0a !important; color: #fbbf24 !important; } /* ============= 33. TIMECLOCK ============= */ body.dark-mode .clock-display { color: #e2e8f0 !important; } /* ============= 34. EXCEPTION ITEMS ============= */ body.dark-mode .exception-item { background: #1a0a0a !important; border-color: #7f1d1d !important; } /* ============= 35. HIGHLIGHT BOX (benefits enrollment info) ============= */ body.dark-mode .highlight-box { color: #e2e8f0 !important; background: linear-gradient(135deg, rgba(102,126,234,0.12) 0%, rgba(0,51,102,0.15) 100%) !important; border-left-color: #667eea !important; } body.dark-mode .highlight-box[style*="background: #ecfdf5"] { background: #0a1a0f !important; } body.dark-mode .highlight-box strong { color: #93c5fd !important; } body.dark-mode .highlight-box li, body.dark-mode .highlight-box p { color: #cbd5e1 !important; } /* =========================================================== 36+ SUB-PAGE DARK MODE FIXES Covers timesheet, onboarding, sign-forms, offboarding, coaching, my-information, my-forms, view-forms, commission, lifecycle, intake, notification-roles, auto-reports, etc. =========================================================== */ /* ============= 36. TIMESHEET PAGE ============= */ body.dark-mode .timesheet-container { color: #e2e8f0 !important; } body.dark-mode .day-header { border-bottom-color: #2a2a2a !important; } body.dark-mode .day-title { color: #e2e8f0 !important; } body.dark-mode .punch-type { color: #e2e8f0 !important; } body.dark-mode .punch-time { color: #94a3b8 !important; } body.dark-mode .no-punches, body.dark-mode .no-punches-day { color: #94a3b8 !important; background: #1a1a1a !important; } body.dark-mode .modal-header, body.dark-mode .modal-title { color: #e2e8f0 !important; } body.dark-mode .form-label { color: #cbd5e1 !important; } body.dark-mode .form-input, body.dark-mode .form-textarea, body.dark-mode .date-input { background: #1a1a1a !important; color: #e2e8f0 !important; border-color: #333 !important; } body.dark-mode .cancel-btn { background: #2a2a2a !important; color: #e2e8f0 !important; border-color: #444 !important; } body.dark-mode .cancel-btn:hover { background: #333 !important; } body.dark-mode .audit-trail { background: #1a1a0a !important; border-color: #92400e !important; color: #fbbf24 !important; } body.dark-mode .audit-label { color: #fbbf24 !important; } body.dark-mode .audit-text { color: #94a3b8 !important; } body.dark-mode .week-summary { background: linear-gradient(135deg, #0a1a2e 0%, #0a2040 100%) !important; } /* ============= 37. ONBOARDING PAGE ============= */ body.dark-mode .btn-secondary { background: #2a2a2a !important; color: #e2e8f0 !important; border-color: #444 !important; } body.dark-mode .btn-secondary:hover { background: #333 !important; border-color: #555 !important; } body.dark-mode .status-tabs { border-bottom-color: #2a2a2a !important; } body.dark-mode .status-tab { color: #94a3b8 !important; } body.dark-mode .status-tab.active { color: #667eea !important; border-bottom-color: #667eea !important; } body.dark-mode .status-tab:hover { color: #667eea !important; } body.dark-mode .card-header { color: #e2e8f0 !important; } body.dark-mode .card-title { color: #e2e8f0 !important; } body.dark-mode .card-subtitle { color: #94a3b8 !important; } /* Onboarding status badges — dark tinted versions */ body.dark-mode .status-badge.initiated, body.dark-mode .status-badge.job-offer-sent, body.dark-mode .status-badge.internal-offer-sent { background: #2e2a0a !important; color: #fbbf24 !important; } body.dark-mode .status-badge.employee-pending, body.dark-mode .status-badge.employee-completion, body.dark-mode .status-badge.internal-offer-accepted { background: #0a1a2e !important; color: #60a5fa !important; } body.dark-mode .status-badge.manager-additional-info, body.dark-mode .status-badge.manager-review { background: #2e0a1a !important; color: #f9a8d4 !important; } body.dark-mode .status-badge.payroll-setup, body.dark-mode .status-badge.portal-setup { background: #1a1a2e !important; color: #a5b4fc !important; } body.dark-mode .status-badge.completed { background: #0a2e14 !important; color: #4ade80 !important; } body.dark-mode .promotion-badge { background: #1a1a2e !important; color: #a5b4fc !important; } body.dark-mode .detail-item { color: #e2e8f0 !important; } body.dark-mode .detail-label { color: #94a3b8 !important; } body.dark-mode .detail-value { color: #e2e8f0 !important; } body.dark-mode .card-actions { border-top-color: #2a2a2a !important; } body.dark-mode .btn-action { background: #1a2a3a !important; color: #e2e8f0 !important; } body.dark-mode .btn-action:hover { background: #2a3a4a !important; } body.dark-mode .btn-action.secondary { background: #2a2a2a !important; color: #94a3b8 !important; } body.dark-mode .btn-action.secondary:hover { background: #333 !important; } /* Workflow steps */ body.dark-mode .wf-step .wf-dot { background: #333 !important; border-color: #333 !important; color: #94a3b8 !important; } body.dark-mode .wf-step.done .wf-dot { background: #10b981 !important; border-color: #10b981 !important; color: white !important; } body.dark-mode .wf-step.active .wf-dot { background: #151515 !important; border-color: #2c66c3 !important; color: #60a5fa !important; box-shadow: 0 0 0 4px rgba(44,102,195,0.25) !important; } body.dark-mode .wf-step .wf-label { color: #94a3b8 !important; } body.dark-mode .wf-step.done .wf-label { color: #4ade80 !important; } body.dark-mode .wf-step.active .wf-label { color: #60a5fa !important; } body.dark-mode .wf-connector { background: #333 !important; } body.dark-mode .wf-connector.done { background: #10b981 !important; } /* ============= 38. SIGN-FORMS PAGE ============= */ body.dark-mode .page-container { background: #151515 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important; } body.dark-mode #progressBar { background: #1a1a1a !important; border-color: #333 !important; } body.dark-mode #progressText { color: #94a3b8 !important; } body.dark-mode .progress-track { background: #333 !important; } body.dark-mode .greeting { color: #e2e8f0 !important; } body.dark-mode .greeting strong { color: #60a5fa !important; } body.dark-mode .forms-section h2 { color: #e2e8f0 !important; } body.dark-mode .form-card { border-color: #2a2a2a !important; } body.dark-mode .form-card.is-signed { border-color: #10b981 !important; } body.dark-mode .form-card.is-signed .form-card-header { background: #0a2e14 !important; } body.dark-mode .form-card.is-signed .form-card-header:hover { background: #0d3a1a !important; } body.dark-mode .form-card-header { background: #1a1a1a !important; } body.dark-mode .form-card-header:hover { background: #222 !important; } body.dark-mode .form-card-title { color: #e2e8f0 !important; } body.dark-mode .form-required-badge { background: #2e2a0a !important; color: #fbbf24 !important; border-color: #92400e !important; } body.dark-mode .toggle-arrow { color: #94a3b8 !important; } body.dark-mode .form-card-body { border-top-color: #2a2a2a !important; } body.dark-mode .signed-badge { background: #0a2e14 !important; color: #4ade80 !important; border-color: #166534 !important; } body.dark-mode .form-content-area { background: #111 !important; border-color: #2a2a2a !important; color: #cbd5e1 !important; } /* Wildcard: force ALL text inside form content areas light (catches inline styles from rich text) */ body.dark-mode .form-content-area * { color: #cbd5e1 !important; } body.dark-mode .form-content-area h1, body.dark-mode .form-content-area h2, body.dark-mode .form-content-area h3, body.dark-mode .form-content-area h4, body.dark-mode .form-content-area h5 { color: #e2e8f0 !important; } body.dark-mode .form-content-area strong { color: #e2e8f0 !important; } body.dark-mode .card-sig-section { background: #0a1a2e !important; border-color: #1e3a5f !important; } body.dark-mode .card-sig-header { color: #60a5fa !important; } body.dark-mode .card-sig-note { color: #94a3b8 !important; } body.dark-mode .card-sig-row { color: #cbd5e1 !important; } body.dark-mode .card-sig-inputs label { color: #94a3b8 !important; } body.dark-mode .card-sig-inputs input { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .card-sig-inputs input[readonly] { background: #111 !important; color: #94a3b8 !important; } body.dark-mode .card-signed-confirm { background: #0a2e14 !important; border-color: #166534 !important; color: #4ade80 !important; } body.dark-mode #finalizeBar { background: #0a2e14 !important; border-color: #10b981 !important; } body.dark-mode #finalizeBar h3 { color: #4ade80 !important; } body.dark-mode #finalizeBar p { color: #cbd5e1 !important; } body.dark-mode .no-forms-box { color: #94a3b8 !important; } body.dark-mode #successBox h2 { color: #4ade80 !important; } body.dark-mode #successBox p { color: #94a3b8 !important; } body.dark-mode .error-box, body.dark-mode #errorContainer .error-box { background: #1a0a0a !important; border-color: #7f1d1d !important; color: #f87171 !important; } body.dark-mode .fill-fields label { color: #94a3b8 !important; } body.dark-mode .fill-fields input, body.dark-mode .fill-fields textarea { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } /* ============= 39. OFFBOARDING PAGE ============= */ body.dark-mode .offboard-container { color: #e2e8f0 !important; } body.dark-mode .employee-search-section .search-input, body.dark-mode .search-input { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .search-input:focus { border-color: #2c66c3 !important; } body.dark-mode .department-filter { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .employee-item { border-bottom-color: #2a2a2a !important; color: #e2e8f0 !important; } body.dark-mode .employee-item:hover { background: #1a1a1a !important; } body.dark-mode .employee-item.selected { background: #0a1a2e !important; border-left-color: #2c66c3 !important; } body.dark-mode .employee-name { color: #e2e8f0 !important; } body.dark-mode .employee-details { color: #94a3b8 !important; } body.dark-mode .selected-employee-badge { background: #0a1a2e !important; border-color: #2c66c3 !important; } body.dark-mode .selected-employee-name { color: #60a5fa !important; } body.dark-mode .checklist-item { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .checklist-item.completed { background: #0a1a0f !important; border-color: #10b981 !important; } body.dark-mode .checklist-item-title { color: #e2e8f0 !important; } body.dark-mode .checklist-item.completed .checklist-item-title { color: #4ade80 !important; } body.dark-mode .checklist-item-description { color: #94a3b8 !important; } body.dark-mode .step-icon { opacity: 0.9; } body.dark-mode .step-done-badge { color: #4ade80 !important; } body.dark-mode .archive-section { background: #1a1a0a !important; border-color: #92400e !important; } body.dark-mode .archive-section-title { color: #fbbf24 !important; } body.dark-mode .archive-section-description { color: #d97706 !important; } body.dark-mode .progress-bar { background: #333 !important; } body.dark-mode .progress-text { color: #94a3b8 !important; } body.dark-mode .loading-state { color: #94a3b8 !important; } body.dark-mode .empty-state { color: #94a3b8 !important; } body.dark-mode .empty-state-icon { opacity: 0.7; } /* ============= 40. COACHING / FEEDBACK ============= */ body.dark-mode .panel { background: #151515 !important; color: #e2e8f0 !important; } body.dark-mode .panel-title { color: #e2e8f0 !important; } body.dark-mode .feedback-card { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .feedback-date, body.dark-mode .feedback-manager, body.dark-mode .feedback-meta { color: #94a3b8 !important; } body.dark-mode .feedback-details { color: #cbd5e1 !important; } body.dark-mode .feedback-actions { border-top-color: #2a2a2a !important; } body.dark-mode .feedback-attachments { border-top-color: #2a2a2a !important; } body.dark-mode .attachment-link { background: #1a1a1a !important; color: #60a5fa !important; } body.dark-mode .attachment-link:hover { background: #222 !important; } body.dark-mode .no-feedback { color: #94a3b8 !important; } body.dark-mode .section-divider::before, body.dark-mode .section-divider::after { background: #333 !important; } body.dark-mode .action-btn.edit { background: #0a1a2e !important; color: #60a5fa !important; } body.dark-mode .action-btn.delete { background: #1a0a0a !important; color: #f87171 !important; } /* ============= 41. MY INFORMATION / MANAGE EMPLOYEE FORMS ============= */ body.dark-mode .info-header h1 { color: #e2e8f0 !important; } body.dark-mode .info-tabs { border-bottom-color: #2a2a2a !important; } body.dark-mode .info-tab { color: #94a3b8 !important; } body.dark-mode .info-tab:hover, body.dark-mode .info-tab.active { color: #69BE28 !important; } body.dark-mode .info-card { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .info-card-title { color: #e2e8f0 !important; border-bottom-color: #69BE28 !important; } body.dark-mode .info-field label { color: #94a3b8 !important; } body.dark-mode .info-field input, body.dark-mode .info-field select { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .info-field input[readonly] { background: #111 !important; color: #94a3b8 !important; } body.dark-mode .form-stat { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .form-stat-value { color: #e2e8f0 !important; } body.dark-mode .form-stat-label { color: #94a3b8 !important; } body.dark-mode .form-item { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .form-item-title { color: #e2e8f0 !important; } body.dark-mode .form-item-meta { color: #94a3b8 !important; } body.dark-mode .form-content-section { background: #111 !important; border-color: #2a2a2a !important; color: #cbd5e1 !important; } body.dark-mode .form-content-section h4 { color: #e2e8f0 !important; } body.dark-mode .form-sign-box { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .form-sign-title { color: #e2e8f0 !important; border-bottom-color: #69BE28 !important; } body.dark-mode .sign-acknowledge-section { background: #1a1a0a !important; border-color: #92400e !important; } body.dark-mode .sign-acknowledge-section label { color: #e2e8f0 !important; } body.dark-mode .form-sign-cancel { background: #2a2a2a !important; color: #e2e8f0 !important; border-color: #444 !important; } body.dark-mode .form-sign-cancel:hover { background: #333 !important; } body.dark-mode .already-signed-info { background: #0a2e14 !important; color: #4ade80 !important; border-color: #166534 !important; } body.dark-mode .form-field-value { color: #e2e8f0 !important; background: #111 !important; border-color: #2a2a2a !important; } body.dark-mode .form-field-label, body.dark-mode .form-detail-label { color: #94a3b8 !important; } body.dark-mode .form-detail-value { color: #e2e8f0 !important; background: #111 !important; border-color: #2a2a2a !important; } body.dark-mode .mgr-tabs { border-bottom-color: #2a2a2a !important; } body.dark-mode .mgr-tab { color: #94a3b8 !important; } body.dark-mode .mgr-tab:hover, body.dark-mode .mgr-tab.active { color: #69BE28 !important; } body.dark-mode .assign-section { background: #151515 !important; } body.dark-mode .assign-section h3 { color: #e2e8f0 !important; border-bottom-color: #69BE28 !important; } body.dark-mode .assign-form-option { border-color: #2a2a2a !important; } body.dark-mode .assign-form-option:hover { background: #0a1a0f !important; border-color: #69BE28 !important; } body.dark-mode .assign-form-option .afo-info h4 { color: #e2e8f0 !important; } body.dark-mode .assign-form-option .afo-info p { color: #94a3b8 !important; } body.dark-mode .fs-item { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .fs-item-title { color: #e2e8f0 !important; } body.dark-mode .fs-item-meta { color: #94a3b8 !important; } body.dark-mode .assign-box { background: #151515 !important; } body.dark-mode .assign-box h3 { color: #e2e8f0 !important; } body.dark-mode .employee-selector { background: #151515 !important; } body.dark-mode .employee-selector h3 { color: #e2e8f0 !important; } body.dark-mode .employee-search-wrap input { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .employee-dropdown { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .employee-option { border-bottom-color: #1e1e1e !important; } body.dark-mode .employee-option:hover { background: #1a1a1a !important; } body.dark-mode .employee-option .emp-name { color: #e2e8f0 !important; } body.dark-mode .employee-option .emp-dept { color: #94a3b8 !important; } /* ============= 42. MY-FORMS / VIEW-FORMS ============= */ body.dark-mode .subtitle { color: #94a3b8 !important; } body.dark-mode .stat-card { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .stat-value { color: #e2e8f0 !important; } body.dark-mode .stat-label { color: #94a3b8 !important; } body.dark-mode .stat-badge { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .stat-badge-label { color: #94a3b8 !important; } body.dark-mode .form-type { color: #e2e8f0 !important; } body.dark-mode .form-detail { color: #94a3b8 !important; } body.dark-mode .empty-state-text { color: #e2e8f0 !important; } body.dark-mode .form-card { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .modal-content { background: #151515 !important; color: #e2e8f0 !important; } body.dark-mode .modal-header { border-bottom-color: #2a2a2a !important; color: #e2e8f0 !important; } body.dark-mode .modal-header h2 { color: #e2e8f0 !important; } body.dark-mode .modal-close { color: #94a3b8 !important; } body.dark-mode .modal-close:hover { background: #222 !important; color: #e2e8f0 !important; } body.dark-mode .modal-actions { border-top-color: #2a2a2a !important; } body.dark-mode .filters { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .filter-group label { color: #94a3b8 !important; } body.dark-mode .filter-group input, body.dark-mode .filter-group select { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .forms-table th { background: #1a1a1a !important; color: #94a3b8 !important; border-color: #2a2a2a !important; } body.dark-mode .forms-table td { border-color: #1e1e1e !important; color: #e2e8f0 !important; } body.dark-mode .forms-table tr:hover { background: #1a1a1a !important; } /* ============= 43. COMMISSION PAGES ============= */ body.dark-mode .admin-header { background: #151515 !important; } body.dark-mode .admin-header h1 { color: #e2e8f0 !important; } body.dark-mode .admin-header p { color: #94a3b8 !important; } body.dark-mode .tab-btn { background: #1a1a1a !important; color: #94a3b8 !important; } body.dark-mode .tab-btn:hover { background: #222 !important; } body.dark-mode .tab-btn.active { background: #69BE28 !important; color: #fff !important; } body.dark-mode .commission-section { background: #151515 !important; } body.dark-mode .commission-card { background: #151515 !important; } body.dark-mode .commission-card h2, body.dark-mode .commission-card h3 { color: #e2e8f0 !important; border-bottom-color: #2a2a2a !important; } body.dark-mode .rate-card { background: #1a1a1a !important; border-color: #2a2a2a !important; } body.dark-mode .rate-card h4 { color: #e2e8f0 !important; } body.dark-mode .rate-input-group label { color: #94a3b8 !important; } body.dark-mode .rate-input-group input { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .rate-input-group span { color: #94a3b8 !important; } body.dark-mode .rate-note { color: #94a3b8 !important; border-top-color: #2a2a2a !important; } body.dark-mode .rate-table th { background: #1a1a1a !important; color: #94a3b8 !important; } body.dark-mode .rate-table td { border-bottom-color: #1e1e1e !important; color: #e2e8f0 !important; } body.dark-mode .general-info-card { background: #0a1a0a !important; border-color: #166534 !important; } body.dark-mode .general-info-card h4 { color: #4ade80 !important; } body.dark-mode .general-info-card textarea { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .success-notice { background: #0a2e14 !important; border-color: #10b981 !important; color: #4ade80 !important; } body.dark-mode .tips-info { background: #1a1a0a !important; border-color: #92400e !important; } body.dark-mode .tips-info h4 { color: #fbbf24 !important; } body.dark-mode .tips-info p { color: #d97706 !important; } body.dark-mode .delete-state-btn { background: #1a0a0a !important; color: #f87171 !important; border-color: #7f1d1d !important; } body.dark-mode .info-box { background: #0a1a2e !important; border-color: #1e3a5f !important; } body.dark-mode .info-box p { color: #60a5fa !important; } body.dark-mode .info-box.warning { background: #1a1a0a !important; border-color: #92400e !important; } body.dark-mode .info-box.warning p { color: #fbbf24 !important; } body.dark-mode .disclaimer { background: #1a0a0a !important; border-color: #7f1d1d !important; } body.dark-mode .disclaimer p { color: #f87171 !important; } body.dark-mode .not-eligible h2 { color: #e2e8f0 !important; } body.dark-mode .not-eligible p { color: #94a3b8 !important; } body.dark-mode .state-selector { background: #151515 !important; } body.dark-mode .state-selector label { color: #94a3b8 !important; } body.dark-mode .state-selector select { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode #loadingState { color: #94a3b8 !important; } /* -- 43b. Commission Admin — New Dynamic Elements -- */ body.dark-mode .state-bar { background: #151515 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } body.dark-mode .state-bar label { color: #94a3b8 !important; } body.dark-mode .state-select { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .state-count { background: #1a2744 !important; color: #60a5fa !important; } body.dark-mode .btn-view-tab { background: #1a1a1a !important; color: #94a3b8 !important; border-color: #333 !important; } body.dark-mode .btn-view-tab:hover { background: #222 !important; color: #e2e8f0 !important; } body.dark-mode .btn-view-tab.active { background: #002244 !important; color: #fff !important; border-color: #002244 !important; } body.dark-mode .btn-add-state { background: #0a2e14 !important; color: #4ade80 !important; border: 1px solid #166534 !important; } body.dark-mode .btn-add-state:hover { background: #166534 !important; } body.dark-mode .btn-delete-state { background: #1a0a0a !important; color: #f87171 !important; border-color: #7f1d1d !important; } body.dark-mode .btn-delete-state:hover { background: #3b0a0a !important; } body.dark-mode .btn-add-job-type { background: #0a2e14 !important; color: #4ade80 !important; border-color: #166534 !important; } body.dark-mode .btn-add-job-type:hover { background: #166534 !important; } body.dark-mode .btn-remove-row { color: #f87171 !important; } body.dark-mode .btn-remove-row:hover { background: #3b0a0a !important; } body.dark-mode .rate-table input[type="number"], body.dark-mode .rate-table input[type="text"] { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .rate-table select { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .rate-table tr:hover td { background: #1a1a1a !important; } body.dark-mode .state-badge { background: #002244 !important; color: #e2e8f0 !important; } body.dark-mode .modal-body label { color: #94a3b8 !important; } body.dark-mode .modal-body input, body.dark-mode .modal-body select { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .modal-btn-cancel { background: #1a1a1a !important; border-color: #333 !important; color: #94a3b8 !important; } body.dark-mode .modal-btn-cancel:hover { background: #222 !important; color: #e2e8f0 !important; } body.dark-mode .modal-header h2 { color: #e2e8f0 !important; } body.dark-mode .save-btn { background: #69BE28 !important; color: #fff !important; } body.dark-mode .save-btn:disabled { background: #333 !important; color: #666 !important; } /* ============= 44. EMPLOYEE LIFECYCLE ============= */ body.dark-mode .option-card { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .option-card:hover { border-color: #69BE28 !important; } body.dark-mode .option-title { color: #e2e8f0 !important; } body.dark-mode .option-description { color: #94a3b8 !important; } /* ============= 45. EMPLOYEE INTAKE FORM ============= */ body.dark-mode .intake-container { background: #151515 !important; } body.dark-mode .form-header h1 { color: #e2e8f0 !important; } body.dark-mode .form-header p { color: #94a3b8 !important; } body.dark-mode .welcome-box { background: #0a1a2e !important; border-color: #1e3a5f !important; } body.dark-mode .welcome-box h3 { color: #60a5fa !important; } body.dark-mode .welcome-box p { color: #93c5fd !important; } body.dark-mode .section-title { background: #1e293b !important; color: #e2e8f0 !important; border-left-color: #818cf8 !important; } body.dark-mode .radio-item label { color: #cbd5e1 !important; } body.dark-mode .btn-secondary { background: #333 !important; color: #e2e8f0 !important; } body.dark-mode .btn-secondary:hover { background: #444 !important; } body.dark-mode .form-buttons, body.dark-mode .action-buttons { border-top-color: #2a2a2a !important; } body.dark-mode .agreement-box { background: #1a1a0a !important; border-color: #92400e !important; } body.dark-mode .agreement-box p { color: #d97706 !important; } body.dark-mode .error-box { background: #1a0a0a !important; border-color: #7f1d1d !important; } body.dark-mode .error-box h3 { color: #f87171 !important; } body.dark-mode .error-box p { color: #fca5a5 !important; } /* ============= 45b. ACCEPT OFFER PAGE ============= */ body.dark-mode .offer-container { background: #151515 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important; } body.dark-mode .offer-greeting { color: #e2e8f0 !important; } body.dark-mode .offer-greeting strong { color: #60a5fa !important; } body.dark-mode .offer-details { background: #1a1a1a !important; border-color: #2a2a2a !important; } body.dark-mode .offer-details h3 { color: #e2e8f0 !important; } body.dark-mode .detail-row { border-bottom-color: #2a2a2a !important; } body.dark-mode .detail-row-cell { background: #1e1e1e !important; } body.dark-mode .detail-grid-header { color: #e2e8f0 !important; } body.dark-mode .detail-grid-text { color: #e2e8f0 !important; } body.dark-mode .detail-grid-sub { color: #94a3b8 !important; } body.dark-mode .detail-label { color: #94a3b8 !important; } body.dark-mode .detail-value { color: #e2e8f0 !important; } body.dark-mode .offer-version { background: #2e2a0a !important; border-color: #92400e !important; color: #fbbf24 !important; } body.dark-mode .offer-legal { background: #0a1a2e !important; border-color: #1e3a5f !important; color: #93c5fd !important; } body.dark-mode .offer-legal strong { color: #bfdbfe !important; } body.dark-mode .consent-item label { color: #e2e8f0 !important; } body.dark-mode .success-box h2 { color: #4ade80 !important; } body.dark-mode .success-box p { color: #94a3b8 !important; } body.dark-mode .success-box .redirect-note { background: #0a1a2e !important; border-color: #1e3a5f !important; color: #93c5fd !important; } /* ============= 45c. ONBOARDING REVIEW PAGE ============= */ body.dark-mode .review-container { background: #151515 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important; } body.dark-mode .page-header h1 { color: #e2e8f0 !important; } body.dark-mode .page-header p { color: #94a3b8 !important; } body.dark-mode .page-header { border-bottom-color: #818cf8 !important; } body.dark-mode .status-bar { background: #0a1a2e !important; border-color: #1e3a5f !important; } body.dark-mode .status-bar-title { color: #60a5fa !important; } body.dark-mode .status-bar-subtitle { color: #93c5fd !important; } body.dark-mode .status-badge { background: #2e2a0a !important; color: #fbbf24 !important; } body.dark-mode .info-item { background: #1a1a1a !important; border-color: #2a2a2a !important; } body.dark-mode .info-label { color: #94a3b8 !important; } body.dark-mode .info-value { color: #e2e8f0 !important; } body.dark-mode .info-value.empty { color: #555 !important; } body.dark-mode .notes-section { background: #1a1a0a !important; border-color: #92400e !important; } body.dark-mode .notes-section h4 { color: #fbbf24 !important; } body.dark-mode .notes-section p { color: #d97706 !important; } /* ============= 45d. ONBOARDING ADDITIONAL INFO PAGE ============= */ body.dark-mode .requirements-container { background: #151515 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important; } body.dark-mode .employee-info-card { background: #0a1a2e !important; border-color: #1e3a5f !important; } body.dark-mode .employee-info-card h2 { color: #60a5fa !important; } body.dark-mode .employee-info-item { color: #93c5fd !important; } body.dark-mode .checkbox-item { background: #1a1a1a !important; border-color: #2a2a2a !important; } body.dark-mode .checkbox-item:hover { border-color: #818cf8 !important; background: #0a1a2e !important; } body.dark-mode .checkbox-item label { color: #e2e8f0 !important; } body.dark-mode .hint-text { color: #555 !important; } /* ============= 45e. ONBOARDING PORTAL SETUP PAGE ============= */ body.dark-mode .portal-container { background: #151515 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important; } body.dark-mode .employee-summary { background: #0a1a2e !important; border-color: #1e3a5f !important; } body.dark-mode .employee-summary h3 { color: #60a5fa !important; } body.dark-mode .summary-label { color: #94a3b8 !important; } body.dark-mode .summary-value { color: #e2e8f0 !important; } body.dark-mode .training-section { background: #1a1a1a !important; border-color: #2a2a2a !important; } body.dark-mode .info-box { background: #1a1a0a !important; border-color: #92400e !important; } body.dark-mode .info-box p { color: #d97706 !important; } body.dark-mode .help-text { color: #94a3b8 !important; } /* ============= 45f. ONBOARDING DETAILS PAGE ============= */ body.dark-mode .details-container { background: #151515 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important; } body.dark-mode .top-bar { background: #151515 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important; } body.dark-mode .status-badge.completed, body.dark-mode .status-badge.portal-setup { background: #0a2e14 !important; color: #4ade80 !important; } body.dark-mode .status-badge.employee-pending { background: #0a1a2e !important; color: #60a5fa !important; } body.dark-mode .status-badge.manager-review { background: #2e0a1a !important; color: #f472b6 !important; } body.dark-mode .status-badge.payroll-setup { background: #1a0a2e !important; color: #a78bfa !important; } /* ============= 46. ADMIN NOTIFICATION ROLES ============= */ body.dark-mode .role-card { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .role-card h3 { color: #e2e8f0 !important; } body.dark-mode .role-card .role-desc { color: #94a3b8 !important; } body.dark-mode .email-tag { background: #1a1a2e !important; color: #a5b4fc !important; } body.dark-mode .email-tag .remove-email { color: #818cf8 !important; } body.dark-mode .add-email-row input { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .save-bar { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .save-bar .status-text { color: #94a3b8 !important; } /* ============= 47. AUTO REPORTS ============= */ body.dark-mode .report-card { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .report-title h3 { color: #e2e8f0 !important; } body.dark-mode .report-description { color: #94a3b8 !important; } body.dark-mode .toggle-label { color: #94a3b8 !important; } body.dark-mode .report-settings { background: #1a1a1a !important; } body.dark-mode .setting-label { color: #cbd5e1 !important; } body.dark-mode .setting-help { color: #666 !important; } body.dark-mode .add-recipient-row input { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .schedule-select { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .status-badge.inactive { background: #1a1a1a !important; color: #94a3b8 !important; } body.dark-mode .last-run { color: #666 !important; } /* ============= 48. ACTIVITY REPORT ============= */ body.dark-mode .data-table { background: #151515 !important; } body.dark-mode .data-table th { background: #1a1a1a !important; color: #94a3b8 !important; border-bottom-color: #2a2a2a !important; } body.dark-mode .data-table th:hover { background: #222 !important; } body.dark-mode .data-table td { border-bottom-color: #1e1e1e !important; color: #cbd5e1 !important; } body.dark-mode .data-table tr:hover { background: #1a1a0a !important; } body.dark-mode .page-bar { background: #333 !important; } body.dark-mode .insight-card { background: linear-gradient(135deg, #1a1a0a, #2a2a0a) !important; } body.dark-mode .insight-title { color: #fbbf24 !important; } body.dark-mode .insight-list li { color: #d97706 !important; border-bottom-color: rgba(217,119,6,0.2) !important; } /* ============= 49. TIME-OFF MANAGEMENT ============= */ body.dark-mode .upload-section { background: #151515 !important; border-left-color: #667eea !important; } body.dark-mode .upload-section h3 { color: #e2e8f0 !important; } body.dark-mode .upload-section p { color: #94a3b8 !important; } body.dark-mode .file-name { color: #cbd5e1 !important; } body.dark-mode .employee-table { background: #151515 !important; } body.dark-mode .employee-table th { background: #1a1a1a !important; color: #94a3b8 !important; border-bottom-color: #2a2a2a !important; } body.dark-mode .employee-table td { border-bottom-color: #1e1e1e !important; color: #e2e8f0 !important; } body.dark-mode .employee-table tr:hover { background: #1a1a1a !important; } body.dark-mode .balance-input { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .form-section { background: #151515 !important; } body.dark-mode .form-group label { color: #cbd5e1 !important; } body.dark-mode .form-group small { color: #94a3b8 !important; } body.dark-mode .request-item { background: #151515 !important; border-color: #2a2a2a !important; } body.dark-mode .request-dates { color: #e2e8f0 !important; } body.dark-mode .request-details { color: #94a3b8 !important; } /* Manager Request Modal (manage-time-off) */ body.dark-mode .mgr-btn { background: #667eea !important; } body.dark-mode .mgr-btn:hover { background: #5a6fd6 !important; } body.dark-mode .mgr-modal { background: #151515 !important; } body.dark-mode .mgr-modal-header { border-bottom-color: #2a2a2a !important; } body.dark-mode .mgr-modal-header h2 { color: #e2e8f0 !important; } body.dark-mode .mgr-modal-close { color: #94a3b8 !important; } body.dark-mode .mgr-modal-close:hover { background: #252525 !important; color: #e2e8f0 !important; } body.dark-mode .mgr-modal-body .form-group label { color: #cbd5e1 !important; } body.dark-mode .mgr-modal-body .form-group small { color: #94a3b8 !important; } body.dark-mode .mgr-modal-body .form-group input, body.dark-mode .mgr-modal-body .form-group select, body.dark-mode .mgr-modal-body .form-group textarea { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .manager-badge { background: #667eea !important; color: #fff !important; } body.dark-mode .employee-search-wrap input { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode .employee-dropdown { background: #1a1a1a !important; border-color: #333 !important; } body.dark-mode .employee-dropdown-item { color: #e2e8f0 !important; border-bottom-color: #2a2a2a !important; } body.dark-mode .employee-dropdown-item:hover { background: #252525 !important; } body.dark-mode .employee-dropdown-item .emp-dept { color: #94a3b8 !important; } body.dark-mode .selected-employee-tag { background: #0a1a2e !important; border-color: #1e3a5f !important; color: #93c5fd !important; } body.dark-mode .selected-employee-tag .remove-employee { color: #94a3b8 !important; } body.dark-mode .selected-employee-tag .remove-employee:hover { color: #ef4444 !important; } body.dark-mode .emp-balance-card { background: linear-gradient(135deg, #0a1a2e 0%, #0c1e3a 100%) !important; border-color: #1e3a5f !important; } body.dark-mode .emp-balance-card h4 { color: #93c5fd !important; } body.dark-mode .emp-balance-item { background: #151515 !important; } body.dark-mode .emp-balance-item .bal-label { color: #94a3b8 !important; } body.dark-mode .emp-balance-item .bal-value { color: #60a5fa !important; } body.dark-mode .emp-balance-item .bal-unit { color: #94a3b8 !important; } /* ============= 50. FILTER BARS & PAGE INFO ============= */ body.dark-mode .filter-bar select, body.dark-mode .filter-bar input { background: #1a1a1a !important; border-color: #333 !important; color: #e2e8f0 !important; } body.dark-mode #paginationControls { background: #1a1a1a !important; } body.dark-mode #pageInfo { color: #94a3b8 !important; } body.dark-mode #processingStatus { background: #1a1a1a !important; color: #94a3b8 !important; } /* ============= 51. ADDITIONAL INLINE STYLE OVERRIDES ============= */ /* Light pastel backgrounds used everywhere inline */ body.dark-mode [style*="background: #eff6ff"], body.dark-mode [style*="background:#eff6ff"] { background: #0a1a2e !important; } body.dark-mode [style*="background: #f0f9ff"], body.dark-mode [style*="background:#f0f9ff"] { background: #0a1a2e !important; } body.dark-mode [style*="background: #f0fdf4"], body.dark-mode [style*="background:#f0fdf4"] { background: #0a1a0f !important; } body.dark-mode [style*="background: #fef3c7"], body.dark-mode [style*="background:#fef3c7"] { background: #1a1a0a !important; } body.dark-mode [style*="background: #fffbeb"], body.dark-mode [style*="background:#fffbeb"] { background: #1a1a0a !important; } body.dark-mode [style*="background:linear-gradient(135deg,#fffbeb"], body.dark-mode [style*="background: linear-gradient(135deg, #fffbeb"] { background: linear-gradient(135deg, #1a1a0a, #2a2a0a) !important; } body.dark-mode [style*="background: #fafafa"], body.dark-mode [style*="background:#fafafa"] { background: #111 !important; } body.dark-mode [style*="background: #dbeafe"], body.dark-mode [style*="background:#dbeafe"] { background: #0a1a2e !important; } body.dark-mode [style*="background: #fee2e2"], body.dark-mode [style*="background:#fee2e2"] { background: #1a0a0a !important; } body.dark-mode [style*="background: #fce7f3"], body.dark-mode [style*="background:#fce7f3"] { background: #1a0a1a !important; } body.dark-mode [style*="background: #e0e7ff"], body.dark-mode [style*="background:#e0e7ff"] { background: #1a1a2e !important; } body.dark-mode [style*="background: #d1fae5"], body.dark-mode [style*="background:#d1fae5"] { background: #0a2e14 !important; } body.dark-mode [style*="background: #ecfdf5"], body.dark-mode [style*="background:#ecfdf5"] { background: #0a1a0f !important; } body.dark-mode [style*="background: #fef2f2"], body.dark-mode [style*="background:#fef2f2"] { background: #1a0a0a !important; } body.dark-mode [style*="background: #fff5f5"], body.dark-mode [style*="background:#fff5f5"] { background: #1a0a0a !important; } body.dark-mode [style*="background: #ede9fe"], body.dark-mode [style*="background:#ede9fe"] { background: #1a0a2e !important; } body.dark-mode [style*="background: #eef2ff"], body.dark-mode [style*="background:#eef2ff"] { background: #1a1a2e !important; } body.dark-mode [style*="background: #e5e7eb"], body.dark-mode [style*="background:#e5e7eb"] { background: #333 !important; } body.dark-mode [style*="background: #fefce8"], body.dark-mode [style*="background:#fefce8"] { background: #1a1a0a !important; } body.dark-mode [style*="background-color: white"], body.dark-mode [style*="background-color:white"] { background-color: #151515 !important; } /* Inline dark text → light */ body.dark-mode [style*="color: #92400e"], body.dark-mode [style*="color:#92400e"] { color: #fbbf24 !important; } body.dark-mode [style*="color: #78350f"], body.dark-mode [style*="color:#78350f"] { color: #d97706 !important; } body.dark-mode [style*="color: #065f46"], body.dark-mode [style*="color:#065f46"] { color: #4ade80 !important; } body.dark-mode [style*="color: #991b1b"], body.dark-mode [style*="color:#991b1b"] { color: #f87171 !important; } body.dark-mode [style*="color: #c53030"], body.dark-mode [style*="color:#c53030"] { color: #f87171 !important; } body.dark-mode [style*="color: #4b5563"], body.dark-mode [style*="color:#4b5563"] { color: #94a3b8 !important; } body.dark-mode [style*="color: #1e40af"], body.dark-mode [style*="color:#1e40af"] { color: #60a5fa !important; } body.dark-mode [style*="color: #166534"], body.dark-mode [style*="color:#166534"] { color: #4ade80 !important; } body.dark-mode [style*="color: #b45309"], body.dark-mode [style*="color:#b45309"] { color: #fbbf24 !important; } body.dark-mode [style*="color: #0c4a6e"], body.dark-mode [style*="color:#0c4a6e"] { color: #38bdf8 !important; } body.dark-mode [style*="color: #111827"], body.dark-mode [style*="color:#111827"] { color: #e2e8f0 !important; } body.dark-mode [style*="color: #15803d"], body.dark-mode [style*="color:#15803d"] { color: #4ade80 !important; } body.dark-mode [style*="color: #3730a3"], body.dark-mode [style*="color:#3730a3"] { color: #a5b4fc !important; } body.dark-mode [style*="color: #9f1239"], body.dark-mode [style*="color:#9f1239"] { color: #f9a8d4 !important; } body.dark-mode [style*="color: #0f172a"], body.dark-mode [style*="color:#0f172a"] { color: #e2e8f0 !important; } body.dark-mode [style*="color: #1a202c"], body.dark-mode [style*="color:#1a202c"] { color: #e2e8f0 !important; } body.dark-mode [style*="color: #1e3a8a"], body.dark-mode [style*="color:#1e3a8a"] { color: #93c5fd !important; } body.dark-mode [style*="color: #7f1d1d"], body.dark-mode [style*="color:#7f1d1d"] { color: #fca5a5 !important; } body.dark-mode [style*="color: #dc2626"], body.dark-mode [style*="color:#dc2626"] { color: #f87171 !important; } body.dark-mode [style*="color: #ef4444"], body.dark-mode [style*="color:#ef4444"] { color: #f87171 !important; } /* Inline border overrides */ body.dark-mode [style*="border: 1px solid #bfdbfe"], body.dark-mode [style*="border: 2px solid #bfdbfe"] { border-color: #1e3a5f !important; } body.dark-mode [style*="border: 1px solid #fcd34d"], body.dark-mode [style*="border: 2px solid #fcd34d"] { border-color: #92400e !important; } body.dark-mode [style*="border: 1px solid #bbf7d0"], body.dark-mode [style*="border: 2px solid #bbf7d0"] { border-color: #166534 !important; } body.dark-mode [style*="border: 1px solid #fecaca"], body.dark-mode [style*="border: 2px solid #fecaca"] { border-color: #7f1d1d !important; } body.dark-mode [style*="border: 1px solid #feb2b2"] { border-color: #7f1d1d !important; } body.dark-mode [style*="border: 1px solid #6ee7b7"] { border-color: #166534 !important; } body.dark-mode [style*="border: 2px solid #d1d5db"], body.dark-mode [style*="border: 1px solid #d1d5db"] { border-color: #333 !important; } body.dark-mode [style*="border: 2px solid #e5e7eb"], body.dark-mode [style*="border: 1px solid #e5e7eb"] { border-color: #2a2a2a !important; } body.dark-mode [style*="border: 2px solid #dc2626"] { border-color: #7f1d1d !important; } body.dark-mode [style*="border: 2px solid #fbbf24"] { border-color: #92400e !important; } body.dark-mode [style*="border: 2px solid #10b981"] { border-color: #10b981 !important; } /* ============= 52. BODY BACKGROUND OVERRIDE ============= */ /* Many sub-pages set body { background: #f3f4f7 } in their inline