/* === variables.css === */ /* Funguka Platform - Design Tokens Sourced from the mobile app theme (contexts/ThemeContext + constants). */ :root { /* Brand palette */ --fg-primary: #1D3F8F; --fg-primary-600: #17357A; --fg-primary-700: #102A63; --fg-primary-50: #EEF2FB; --fg-primary-100: #DCE4F5; /* Sidebar palette (uses app brand blue) */ --fg-sidebar-bg: linear-gradient(180deg, #1E4494 0%, #162F6E 100%); --fg-sidebar-bg-flat: #1A3C88; --fg-sidebar-bg-light: var(--fg-primary-600); --fg-sidebar-text: rgba(255,255,255,.85); --fg-sidebar-text-hover: #fff; --fg-sidebar-active-bg: rgba(255,255,255,.18); --fg-sidebar-active-text: #fff; --fg-sidebar-border: rgba(255,255,255,.1); --fg-sidebar-search-bg: rgba(255,255,255,.1); --fg-orange: #F97316; --fg-orange-600: #E8620A; --fg-accent: #E8A520; --fg-bg: #F0F4FA; --fg-card: #FFFFFF; /* Legacy alias — many inline styles use `var(--fg-card-bg, #fff)`. Keep it mapped to --fg-card so those surfaces theme correctly without having to edit every view file. */ --fg-card-bg: var(--fg-card); --fg-border: #E2E8F0; --fg-muted: #F8FAFC; --fg-text: #0F172A; --fg-text-muted: #64748B; --fg-text-soft: #94A3B8; --fg-success: #16A34A; --fg-success-bg: #DCFCE7; --fg-danger: #DC2626; --fg-danger-bg: #FEE2E2; --fg-warning: #F59E0B; --fg-warning-bg: #FEF3C7; --fg-info: #0EA5E9; --fg-info-bg: #E0F2FE; /* Layout */ --fg-sidebar-w: 260px; --fg-topbar-h: 64px; --fg-radius-sm: 8px; --fg-radius: 12px; --fg-radius-lg: 16px; /* Shadows */ --fg-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --fg-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); --fg-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); /* Typography */ --fg-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Motion */ --fg-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* Bootstrap overrides */ :root { --bs-primary: var(--fg-primary); --bs-primary-rgb: 29, 63, 143; --bs-body-bg: var(--fg-bg); --bs-body-color: var(--fg-text); --bs-body-font-family: var(--fg-font); --bs-border-color: var(--fg-border); --bs-border-radius: var(--fg-radius); } /* ========================================================================== Dark theme — applied when . We override surface + text tokens only; brand colours stay the same so primary buttons / the sidebar gradient keep their identity. ========================================================================== */ html[data-theme="dark"] { --fg-bg: #0B1220; --fg-card: #121A2E; --fg-muted: #18223A; --fg-border: #243049; --fg-text: #E6ECF7; --fg-text-muted: #93A4C1; --fg-text-soft: #6B7C9A; --fg-primary-50: #1B2750; --fg-primary-100: #23336C; --fg-success-bg: #0F2E1F; --fg-danger-bg: #3A1418; --fg-warning-bg: #3A2A0E; --fg-info-bg: #0E2A3A; --fg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --fg-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); --fg-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55); --bs-body-bg: var(--fg-bg); --bs-body-color: var(--fg-text); --bs-border-color: var(--fg-border); } html[data-theme="dark"] body { background: var(--fg-bg); color: var(--fg-text); } html[data-theme="dark"] .fg-topbar { background: var(--fg-card); } html[data-theme="dark"] .fg-card, html[data-theme="dark"] .fg-user-menu, html[data-theme="dark"] .fg-user-menu::before { background: var(--fg-card); border-color: var(--fg-border); } html[data-theme="dark"] .fg-user, html[data-theme="dark"] .fg-icon-btn { background: var(--fg-muted); color: var(--fg-text); } html[data-theme="dark"] .fg-icon-btn:hover { background: var(--fg-primary-100); color: #fff; } html[data-theme="dark"] .fg-avatar.no-img { background: var(--fg-card); } html[data-theme="dark"] .fg-bell-count { border-color: var(--fg-card); } html[data-theme="dark"] .fg-page-head { background: linear-gradient(135deg, var(--fg-card) 0%, #17254A 100%); border-color: var(--fg-border); } html[data-theme="dark"] .fg-page-head h1 { color: #B9CBFF; } html[data-theme="dark"] .fg-page-head h1 > i { background: var(--fg-muted); border-color: var(--fg-border); color: #B9CBFF; } html[data-theme="dark"] .fg-page-head p strong { color: #B9CBFF; } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background: var(--fg-muted); color: var(--fg-text); border-color: var(--fg-border); } html[data-theme="dark"] .form-control::placeholder { color: var(--fg-text-soft); } html[data-theme="dark"] table { color: var(--fg-text); } html[data-theme="dark"] .fg-table thead th { background: var(--fg-muted); color: var(--fg-text-muted); } html[data-theme="dark"] .fg-table tbody tr:hover { background: var(--fg-muted); } html[data-theme="dark"] .fg-user-menu-item { color: var(--fg-text); } html[data-theme="dark"] .fg-user-menu-item:hover { background: var(--fg-primary-100); color: #fff; } html[data-theme="dark"] .fg-user-menu-item:hover i { color: #fff; } html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .modal-content { background: var(--fg-card); color: var(--fg-text); } /* ========================================================================== Dark-mode sweep — targeted overrides for hardcoded light surfaces that weren't using CSS vars. Grouped by area so future work is easy to scope. ========================================================================== */ /* Stat cards + inner pill */ html[data-theme="dark"] .fg-stat { background: var(--fg-card); border-color: var(--fg-border); } html[data-theme="dark"] .fg-stat-foot { background: var(--fg-muted); border-color: var(--fg-border); } html[data-theme="dark"] .fg-stat-pill { background: var(--fg-border); color: var(--fg-text-muted); } html[data-theme="dark"] .fg-stat-foot.tone-good .fg-stat-pill { background: rgba(22,163,74,.18); color: #86EFAC; } html[data-theme="dark"] .fg-stat-foot.tone-bad .fg-stat-pill { background: rgba(220,38,38,.18); color: #FCA5A5; } html[data-theme="dark"] .fg-stat-foot.tone-flat .fg-stat-pill { background: var(--fg-border); color: var(--fg-text-soft); } html[data-theme="dark"] .fg-stat-foot.state-new .fg-stat-pill { background: rgba(29,63,143,.35); color: #B9CBFF; } html[data-theme="dark"] .fg-stat.accent-orange .fg-stat-icon { background: rgba(249,115,22,.15); color: #FDBA74; } /* Tables */ html[data-theme="dark"] .fg-table { color: var(--fg-text); } html[data-theme="dark"] .fg-table th, html[data-theme="dark"] .fg-table td { border-color: var(--fg-border); } html[data-theme="dark"] .fg-table tbody tr { background: transparent; } html[data-theme="dark"] .fg-empty { color: var(--fg-text-soft); } /* Small pill chips (qty, counters) */ html[data-theme="dark"] .fg-qty-pill { background: var(--fg-muted); color: var(--fg-text); } /* Profile / change-password info table — the Name/Email/Role rows rendered too dark to read. Switch to card background + bright text. */ html[data-theme="dark"] .fg-card table { color: var(--fg-text); } html[data-theme="dark"] .fg-card table th { background: var(--fg-muted); color: var(--fg-text-muted); border-color: var(--fg-border); font-weight: 600; } html[data-theme="dark"] .fg-card table td { background: transparent; color: var(--fg-text); border-color: var(--fg-border); } html[data-theme="dark"] .fg-avatar-role { color: var(--fg-text-muted); } /* Case-detail sections — "Client's Personal Details" style cards */ html[data-theme="dark"] .fg-case-section { background: var(--fg-card); border-color: var(--fg-border); } html[data-theme="dark"] .fg-case-section-head { border-color: var(--fg-border); } html[data-theme="dark"] .fg-case-section-head h3 { color: var(--fg-text); } html[data-theme="dark"] .fg-case-row { border-color: var(--fg-border); } html[data-theme="dark"] .fg-case-row.odd { background: var(--fg-muted); } html[data-theme="dark"] .fg-case-row.even { background: var(--fg-card); } html[data-theme="dark"] .fg-case-label { color: var(--fg-text-muted); } html[data-theme="dark"] .fg-case-value { color: var(--fg-text); } /* Notification drawer + toast */ html[data-theme="dark"] .fg-drawer { background: var(--fg-card); color: var(--fg-text); } html[data-theme="dark"] .fg-drawer-head { background: linear-gradient(180deg, var(--fg-muted) 0%, var(--fg-card) 100%); border-bottom-color: var(--fg-border); } html[data-theme="dark"] .fg-drawer-title { color: var(--fg-text); } html[data-theme="dark"] .fg-drawer-mark, html[data-theme="dark"] .fg-drawer-close { color: var(--fg-text-muted); } html[data-theme="dark"] .fg-drawer-mark:hover { background: var(--fg-muted); color: var(--fg-text); } html[data-theme="dark"] .fg-drawer-body::-webkit-scrollbar-thumb { background: var(--fg-border); } html[data-theme="dark"] .fg-drawer-empty { color: var(--fg-text-soft); } html[data-theme="dark"] .fg-drawer-empty i { color: var(--fg-border); } html[data-theme="dark"] .fg-notif-item { border-bottom-color: var(--fg-border); } html[data-theme="dark"] .fg-notif-item:hover { background: var(--fg-muted); } html[data-theme="dark"] .fg-notif-title { color: var(--fg-text); } html[data-theme="dark"] .fg-notif-body { color: var(--fg-text-muted); } html[data-theme="dark"] .fg-notif-time { color: var(--fg-text-soft); } html[data-theme="dark"] .fg-drawer-foot { background: var(--fg-muted); border-top-color: var(--fg-border); } html[data-theme="dark"] .fg-drawer-viewall { background: var(--fg-card); border-color: var(--fg-border); color: var(--fg-text); } html[data-theme="dark"] .fg-drawer-viewall:hover { background: var(--fg-muted); } html[data-theme="dark"] .fg-toast { background: var(--fg-card); color: var(--fg-text); } html[data-theme="dark"] .fg-toast-title { color: var(--fg-text); } html[data-theme="dark"] .fg-toast-body { color: var(--fg-text-muted); } /* Analytics / Reports — tab bar, section chips, active-range badge */ html[data-theme="dark"] .fg-range-badge { background: rgba(29,63,143,.22); color: #B9CBFF; } html[data-theme="dark"] .fg-sec-chip { background: var(--fg-muted); border-color: var(--fg-border); color: var(--fg-text); } html[data-theme="dark"] .fg-sec-chip.is-active { background: var(--fg-primary); color: #fff; border-color: var(--fg-primary); } html[data-theme="dark"] .fg-sec-chip-dot { box-shadow: 0 0 0 2px var(--fg-card); } /* YouTube-style search + filter pill (used on forms/clients/notifications) */ html[data-theme="dark"] .fg-yt-search-input { background: var(--fg-muted); color: var(--fg-text); border-color: var(--fg-border); } html[data-theme="dark"] .fg-yt-search-input::placeholder { color: var(--fg-text-soft); } html[data-theme="dark"] .fg-yt-filter-btn { background: var(--fg-muted); border-color: var(--fg-border); color: var(--fg-text-muted); } html[data-theme="dark"] .fg-yt-filter-btn:hover, html[data-theme="dark"] .fg-yt-filter-btn.has-filter { background: var(--fg-primary-100); color: #fff; border-color: var(--fg-primary); } html[data-theme="dark"] .fg-filter-drop { background: var(--fg-card); border-color: var(--fg-border); } html[data-theme="dark"] .fg-filter-opt { background: var(--fg-muted); border-color: var(--fg-border); color: var(--fg-text-muted); } html[data-theme="dark"] .fg-filter-opt:hover { background: var(--fg-primary-100); color: #fff; } html[data-theme="dark"] .fg-filter-opt.active { background: var(--fg-primary); color: #fff; border-color: var(--fg-primary); } html[data-theme="dark"] .fg-active-filter { background: rgba(29,63,143,.25); color: #B9CBFF; } html[data-theme="dark"] .fg-active-filter .fg-af-x { background: rgba(29,63,143,.4); color: #fff; } /* Action icons in table rows (view / edit / delete) */ html[data-theme="dark"] .btn-view, html[data-theme="dark"] .btn-edit { background: var(--fg-muted); color: var(--fg-text); } html[data-theme="dark"] .btn-view:hover { background: rgba(14,165,233,.2); color: #7DD3FC; } html[data-theme="dark"] .btn-edit:hover { background: rgba(245,158,11,.2); color: #FCD34D; } html[data-theme="dark"] .btn-delete { background: rgba(220,38,38,.15); color: #FCA5A5; } html[data-theme="dark"] .btn-delete:hover{ background: rgba(220,38,38,.3); color: #fff; } /* Events / Education preview surfaces */ html[data-theme="dark"] .fg-media-item, html[data-theme="dark"] .fg-media-upload-zone, html[data-theme="dark"] .fg-pdf-preview, html[data-theme="dark"] .fg-preview-frame { background: var(--fg-muted); border-color: var(--fg-border); } html[data-theme="dark"] .ig-card, html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"] { background-color: var(--fg-card) !important; } html[data-theme="dark"] [style*="color:#0F172A"], html[data-theme="dark"] [style*="color: #0F172A"] { color: var(--fg-text) !important; } html[data-theme="dark"] [style*="border: 1px solid #e8e8e8"], html[data-theme="dark"] [style*="border:1px solid #e8e8e8"] { border-color: var(--fg-border) !important; } /* Bootstrap button-light / btn-outline-* — make them readable on dark. Every interactive state is covered so Bootstrap's :hover/:focus/:active rules (which land at higher specificity in some Bootstrap builds) can't flash a hardcoded white back in on press. */ html[data-theme="dark"] .btn.btn-light, html[data-theme="dark"] .btn-light, html[data-theme="dark"] a.btn-light, html[data-theme="dark"] button.btn-light { background-color: var(--fg-muted); color: var(--fg-text); border-color: var(--fg-border); } html[data-theme="dark"] .btn.btn-light:hover, html[data-theme="dark"] .btn-light:hover, html[data-theme="dark"] .btn.btn-light:focus, html[data-theme="dark"] .btn-light:focus, html[data-theme="dark"] .btn.btn-light:active, html[data-theme="dark"] .btn-light:active, html[data-theme="dark"] .btn.btn-light.active, html[data-theme="dark"] .btn-light:focus-visible { background-color: var(--fg-border); color: var(--fg-text); border-color: var(--fg-border); box-shadow: 0 0 0 3px rgba(29,63,143,.25); } html[data-theme="dark"] .btn.btn-light:disabled, html[data-theme="dark"] .btn-light.disabled { background-color: var(--fg-muted); color: var(--fg-text-soft); border-color: var(--fg-border); opacity: .6; } html[data-theme="dark"] .btn-secondary { background-color: var(--fg-muted); color: var(--fg-text); border-color: var(--fg-border); } html[data-theme="dark"] .btn-secondary:hover, html[data-theme="dark"] .btn-secondary:focus, html[data-theme="dark"] .btn-secondary:active { background-color: var(--fg-border); color: var(--fg-text); border-color: var(--fg-border); } html[data-theme="dark"] .btn-outline-primary { color: #B9CBFF; border-color: var(--fg-primary); background-color: transparent; } html[data-theme="dark"] .btn-outline-primary:hover, html[data-theme="dark"] .btn-outline-primary:focus, html[data-theme="dark"] .btn-outline-primary:active { background-color: var(--fg-primary); color: #fff; border-color: var(--fg-primary); } html[data-theme="dark"] .btn-outline-secondary { color: var(--fg-text-muted); border-color: var(--fg-border); background-color: var(--fg-muted); } html[data-theme="dark"] .btn-outline-secondary:hover, html[data-theme="dark"] .btn-outline-secondary:focus, html[data-theme="dark"] .btn-outline-secondary:active { background-color: var(--fg-border); color: var(--fg-text); border-color: var(--fg-border); } /* Bootstrap alerts / badges / nav-tabs */ html[data-theme="dark"] .alert-info { background: rgba(14,165,233,.15); color: #7DD3FC; border-color: rgba(14,165,233,.3); } html[data-theme="dark"] .alert-success { background: rgba(22,163,74,.15); color: #86EFAC; border-color: rgba(22,163,74,.3); } html[data-theme="dark"] .alert-warning { background: rgba(245,158,11,.15); color: #FCD34D; border-color: rgba(245,158,11,.3); } html[data-theme="dark"] .alert-danger { background: rgba(220,38,38,.15); color: #FCA5A5; border-color: rgba(220,38,38,.3); } html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--fg-border); } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--fg-text-muted); } html[data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--fg-border) var(--fg-border) transparent; color: var(--fg-text); } html[data-theme="dark"] .nav-tabs .nav-link.active { background: var(--fg-card); color: #B9CBFF; border-color: var(--fg-border) var(--fg-border) var(--fg-card); } html[data-theme="dark"] .pagination .page-link { background: var(--fg-card); color: var(--fg-text); border-color: var(--fg-border); } html[data-theme="dark"] .pagination .page-item.active .page-link { background: var(--fg-primary); border-color: var(--fg-primary); color: #fff; } html[data-theme="dark"] .pagination .page-item.disabled .page-link { color: var(--fg-text-soft); } /* Card headers with h3 titles (form sections, event cards, etc.) */ html[data-theme="dark"] .fg-card-head h3, html[data-theme="dark"] .fg-card h3 { color: var(--fg-text); } html[data-theme="dark"] .fg-card-head small, html[data-theme="dark"] .fg-card small { color: var(--fg-text-muted); } html[data-theme="dark"] .fg-muted { color: var(--fg-text-muted) !important; } html[data-theme="dark"] .text-muted { color: var(--fg-text-muted) !important; } html[data-theme="dark"] hr { border-color: var(--fg-border); opacity: .6; } html[data-theme="dark"] .form-label { color: var(--fg-text); } html[data-theme="dark"] .form-text { color: var(--fg-text-muted); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { border-color: var(--fg-primary); box-shadow: 0 0 0 3px rgba(29,63,143,.25); } /* Priority banner (legal officer assignments) — softer green glow in dark */ html[data-theme="dark"] .fg-priority-banner { background: radial-gradient(circle at 100% 0%, rgba(22,163,74,.18) 0, rgba(22,163,74,0) 240px), linear-gradient(135deg, var(--fg-card) 0%, #112A1C 100%); border-color: rgba(22,163,74,.35); } html[data-theme="dark"] .fg-priority-banner-head strong { color: #86EFAC; } html[data-theme="dark"] .fg-priority-item { background: var(--fg-muted); border-color: var(--fg-border); } html[data-theme="dark"] .fg-priority-item.is-unread { border-color: #16A34A; } html[data-theme="dark"] .fg-priority-title { color: var(--fg-text); } html[data-theme="dark"] a.fg-priority-title:hover { color: #B9CBFF; } html[data-theme="dark"] .fg-priority-tag { background: rgba(22,163,74,.2); color: #86EFAC; } html[data-theme="dark"] .fg-notif-priority-row { box-shadow: inset 3px 0 0 #16A34A; } html[data-theme="dark"] .fg-notif-unread-row { background: rgba(29,63,143,.18); } html[data-theme="dark"] .fg-notif-priority-row.fg-notif-unread-row { background: rgba(22,163,74,.10); } html[data-theme="dark"] .fg-notif-tbl-icon.primary { background: rgba(29,63,143,.22); color: #B9CBFF; } html[data-theme="dark"] .fg-notif-tbl-icon.warning { background: rgba(245,158,11,.18); color: #FCD34D; } html[data-theme="dark"] .fg-notif-tbl-icon.success { background: rgba(22,163,74,.18); color: #86EFAC; } html[data-theme="dark"] .fg-notif-tbl-icon.danger { background: rgba(220,38,38,.18); color: #FCA5A5; } html[data-theme="dark"] .fg-notif-tbl-icon.info { background: rgba(14,165,233,.18); color: #7DD3FC; } /* Sidebar footer — sits on the same gradient as the sidebar itself, but the user info block + sign-out button needed softer borders and a bit more contrast so it doesn't bleed into the body edge in dark mode. */ html[data-theme="dark"] .fg-sidebar-footer { border-top-color: rgba(255,255,255,.08); background: rgba(0,0,0,.18); } html[data-theme="dark"] .fg-sidebar-user { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.04); } html[data-theme="dark"] .fg-sidebar-user-name { color: #fff; } html[data-theme="dark"] .fg-sidebar-user-email { color: rgba(255,255,255,.7); } html[data-theme="dark"] .fg-sidebar-logout { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.9); } html[data-theme="dark"] .fg-sidebar-logout:hover { background: rgba(239,68,68,.22); color: #fff; border-color: rgba(239,68,68,.4); } html[data-theme="dark"] .fg-sidebar-copy { color: rgba(255,255,255,.45); } html[data-theme="dark"] .fg-sidebar-search-input { background: rgba(255,255,255,.08); color: #fff; } html[data-theme="dark"] .fg-sidebar-search-input::placeholder { color: rgba(255,255,255,.55); } /* Sidebar body itself — slightly darker gradient so dark-mode content feels anchored to a deeper navy instead of clashing with the light brand blue. */ html[data-theme="dark"] .fg-sidebar { background: linear-gradient(180deg, #0F2360 0%, #081747 100%); border-right: 1px solid rgba(255,255,255,.04); } html[data-theme="dark"] .fg-nav-section { color: rgba(255,255,255,.55); } html[data-theme="dark"] .fg-sidebar-backdrop { background: rgba(0,0,0,.65); } /* Settings page cards */ html[data-theme="dark"] .fg-theme-card, html[data-theme="dark"] .fg-lang-card, html[data-theme="dark"] .fg-notif-cat { background: var(--fg-card); border-color: var(--fg-border); } html[data-theme="dark"] .fg-notif-cat:hover { background: var(--fg-muted); border-color: var(--fg-primary); } html[data-theme="dark"] .fg-switch-track { background: var(--fg-border); } html[data-theme="dark"] .fg-notif-cat-meta strong { color: var(--fg-text); } html[data-theme="dark"] .fg-lang-card strong { color: var(--fg-text); } /* Status / category badges (.fg-badge success/danger/warning/info/primary) used on event cards, education cards, notifications, tables, etc. In dark mode the plain `--fg-success/danger/…` text on `--fg-*-bg` surfaces is too dim (dark-on-dark). Swap to brighter glyph colors + slightly more opaque tints so "Posted", "Draft", "Scheduled", category pills and everything else read clearly over dark backgrounds. */ html[data-theme="dark"] .fg-badge { border: 1px solid transparent; } html[data-theme="dark"] .fg-badge.success { background: rgba(22,163,74,.18); color: #86EFAC; border-color: rgba(22,163,74,.35); } html[data-theme="dark"] .fg-badge.danger { background: rgba(220,38,38,.18); color: #FCA5A5; border-color: rgba(220,38,38,.35); } html[data-theme="dark"] .fg-badge.warning { background: rgba(245,158,11,.18); color: #FCD34D; border-color: rgba(245,158,11,.35); } html[data-theme="dark"] .fg-badge.info { background: rgba(14,165,233,.18); color: #7DD3FC; border-color: rgba(14,165,233,.35); } html[data-theme="dark"] .fg-badge.primary { background: rgba(29,63,143,.3); color: #B9CBFF; border-color: rgba(29,63,143,.45); } /* Cover category chip sitting over event images keeps the readable white when there's a photo behind it; the glass blur from the inline style keeps it crisp. But when there's no photo (fallback logo state) the card uses .fg-cover-cat → .fg-badge.primary, so the override above already handles that. */ /* "Officer Attended the Client" + "Assigned Officer" — bottom cards on form detail and male-champion detail pages. The light theme uses a pastel-green gradient with dark-green label text which becomes unreadable on dark surfaces. */ html[data-theme="dark"] .fg-case-officer { background: linear-gradient(135deg, rgba(22,163,74,.14) 0%, var(--fg-card) 80%); border-color: rgba(22,163,74,.35); } html[data-theme="dark"] .fg-case-officer-label { color: #86EFAC; } html[data-theme="dark"] .fg-case-officer-name { color: var(--fg-text); } /* Reports / analytics tab strip + KPI cards + loading bar. These all live in analytics/index.php as inline