/* ============================================================ Minno People — Dark Theme (Visual Studio Dark style) Applied when Grey-only accent — no purple/violet tints. ============================================================ */ [data-theme="dark"] { /* Tell the browser to render native controls (inputs, selects, scrollbars) in dark mode */ color-scheme: dark; /* ---- Brand scale remapped to VS Dark greys ---- */ --violet-50: #252526; --violet-100: #2D2D30; --violet-200: #3F3F46; --violet-300: #555558; --violet-400: #6B6B6B; --violet-500: #858585; --violet-600: #9E9E9E; --violet-700: #BBBBBB; --violet-800: #CCCCCC; --violet-900: #D4D4D4; --violet-950: #E8E8E8; /* ---- VS Dark neutrals ---- */ --ink-50: #252526; --ink-100: #2D2D30; --ink-200: #3F3F46; --ink-300: #555558; --ink-400: #858585; --ink-500: #9E9E9E; --ink-600: #BBBBBB; --ink-700: #CCCCCC; --ink-800: #D4D4D4; --ink-900: #E8E8E8; /* ---- Semantic (keep meaningful status colours) ---- */ --success-50: #1a2e22; --success-500: #4EC9B0; --success-700: #6FD9BE; --warning-50: #2e2200; --warning-500: #DCDCAA; --warning-700: #E8E8B0; --danger-50: #2e1515; --danger-500: #F48771; --danger-700: #F9A899; --info-50: #0d1926; --info-500: #569CD6; /* ---- Surfaces ---- */ --bg-app: #1E1E1E; --bg-surface: #252526; --bg-elevated: #2D2D30; --bg-subtle: #2D2D30; --bg-sidebar: linear-gradient(180deg, #252526 0%, #2D2D30 55%, #333337 100%); /* ---- Borders ---- */ --border-subtle: rgba(255, 255, 255, 0.07); --border-default: rgba(255, 255, 255, 0.11); --border-strong: rgba(255, 255, 255, 0.18); --border-focus: #858585; /* ---- Text ---- */ --text-primary: #D4D4D4; --text-secondary: #9E9E9E; --text-tertiary: #6B6B6B; --text-on-brand: #FFFFFF; --text-brand: #CCCCCC; /* ---- Shadows ---- */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.4); --shadow-sm: 0 2px 4px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4); --shadow-lg: 0 12px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.4); --shadow-xl: 0 24px 48px rgba(0,0,0,0.7), 0 8px 16px rgba(0,0,0,0.5); --shadow-brand: 0 8px 24px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.20); --shadow-brand-lg: 0 16px 40px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.25); } /* ============================================================ Body & global ============================================================ */ [data-theme="dark"] body { background: var(--bg-app); background-attachment: fixed; color: var(--text-primary); } [data-theme="dark"] ::selection { background: rgba(255,255,255,0.15); color: #D4D4D4; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--ink-200); border-color: var(--bg-app); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--ink-300); } /* ============================================================ Topbar ============================================================ */ [data-theme="dark"] .topbar { background: var(--bg-surface); border-bottom-color: var(--border-default); color: var(--text-primary); } [data-theme="dark"] .topbar-title { color: var(--text-primary); } /* ============================================================ Cards & surfaces ============================================================ */ [data-theme="dark"] .card, [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu { background: var(--bg-surface); border-color: var(--border-default); color: var(--text-primary); } [data-theme="dark"] .card-header, [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); } [data-theme="dark"] .dropdown-item { color: var(--text-primary); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background: var(--bg-elevated); color: var(--text-primary); } /* ============================================================ Forms & inputs ============================================================ */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .input-group-text { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: var(--bg-elevated); border-color: var(--border-focus); color: var(--text-primary); box-shadow: 0 0 0 3px rgba(255,255,255,0.10); } [data-theme="dark"] .form-control::placeholder { color: var(--ink-400); } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-select:disabled { background: var(--bg-subtle); color: var(--ink-400); } [data-theme="dark"] .form-label { color: var(--text-primary); } [data-theme="dark"] .form-text { color: var(--text-secondary); } /* ============================================================ Tables ============================================================ */ [data-theme="dark"] .table { --bs-table-bg: #252526; --bs-table-color: #D4D4D4; --bs-table-border-color: rgba(255,255,255,0.11); --bs-table-striped-bg: rgba(255,255,255,0.04); --bs-table-striped-color: #D4D4D4; --bs-table-hover-bg: rgba(255,255,255,0.07); --bs-table-hover-color: #D4D4D4; --bs-table-active-bg: rgba(255,255,255,0.10); --bs-table-active-color: #D4D4D4; color: #D4D4D4; border-color: rgba(255,255,255,0.11); } [data-theme="dark"] .table > :not(caption) > * > * { background-color: var(--bs-table-bg); color: var(--bs-table-color); border-bottom-color: var(--bs-table-border-color); } [data-theme="dark"] .table thead > tr > th, [data-theme="dark"] .table thead > tr > td { background-color: #2D2D30; color: #9E9E9E; border-color: rgba(255,255,255,0.11); } [data-theme="dark"] .table tbody > tr > td, [data-theme="dark"] .table tbody > tr > th { background-color: #252526; color: #D4D4D4; border-color: rgba(255,255,255,0.07); } [data-theme="dark"] .table tfoot > tr > td, [data-theme="dark"] .table tfoot > tr > th { background-color: #2D2D30; color: #D4D4D4; border-color: rgba(255,255,255,0.11); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-striped-bg: rgba(255,255,255,0.04); background-color: rgba(255,255,255,0.04); color: #D4D4D4; } [data-theme="dark"] .table-hover > tbody > tr:hover > * { --bs-table-hover-bg: rgba(255,255,255,0.07); background-color: rgba(255,255,255,0.07); color: #D4D4D4; } [data-theme="dark"] .table-bordered > :not(caption) > *, [data-theme="dark"] .table-bordered > :not(caption) > * > * { border-color: rgba(255,255,255,0.11); } [data-theme="dark"] .table-light, [data-theme="dark"] .table thead.table-light tr, [data-theme="dark"] .table thead.table-light th { --bs-table-bg: #2D2D30 !important; background-color: #2D2D30 !important; color: #9E9E9E !important; } /* ============================================================ Buttons ============================================================ */ [data-theme="dark"] .btn-primary { background: linear-gradient(180deg, #555558, #3F3F46); color: #E8E8E8; border-color: transparent; } [data-theme="dark"] .btn-primary:hover { background: linear-gradient(180deg, #6B6B6B, #555558); color: #fff; } [data-theme="dark"] .btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-default); } [data-theme="dark"] .btn-secondary:hover { background: var(--ink-200); border-color: var(--border-strong); } [data-theme="dark"] .btn-ghost { background: transparent; color: var(--text-primary); border-color: transparent; } [data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.07); } [data-theme="dark"] .btn-outline-primary { color: #CCCCCC; border-color: #555558; } [data-theme="dark"] .btn-outline-primary:hover { background: rgba(255,255,255,0.08); color: #E8E8E8; border-color: #858585; } [data-theme="dark"] .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-default); } [data-theme="dark"] .btn-outline-secondary:hover { background: var(--bg-elevated); color: var(--text-primary); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.5); } /* ============================================================ Alerts ============================================================ */ [data-theme="dark"] .alert-warning { background: #2e2200; border-color: #4a3800; color: #DCDCAA; } [data-theme="dark"] .alert-success { background: #1a2e22; border-color: #1e4030; color: #4EC9B0; } [data-theme="dark"] .alert-danger { background: #2e1515; border-color: #4a2020; color: #F48771; } [data-theme="dark"] .alert-info { background: #0d1926; border-color: #0f2035; color: #569CD6; } /* ============================================================ Badges ============================================================ */ [data-theme="dark"] .badge.bg-success { background: #1a3d2e !important; color: #4EC9B0; } [data-theme="dark"] .badge.bg-danger { background: #3d1a1a !important; color: #F48771; } [data-theme="dark"] .badge.bg-warning { background: #3d3000 !important; color: #DCDCAA; } [data-theme="dark"] .badge.bg-info { background: #0d1e35 !important; color: #569CD6; } [data-theme="dark"] .badge.bg-secondary { background: #3A3A3D !important; color: #CCCCCC; } [data-theme="dark"] .badge.bg-primary { background: #3F3F46 !important; color: #D4D4D4; } /* ============================================================ KPI / stat cards ============================================================ */ [data-theme="dark"] .kpi-card { background: var(--bg-surface); border-color: var(--border-default); } [data-theme="dark"] .kpi-card .kpi-value { color: var(--text-primary); } [data-theme="dark"] .kpi-card .kpi-label { color: var(--text-secondary); } [data-theme="dark"] .kpi-icon { background: rgba(255,255,255,0.08) !important; color: #9E9E9E !important; } [data-theme="dark"] .kpi-card.accent-success .kpi-icon { background: rgba(78,201,176,0.15) !important; color: #4EC9B0 !important; } [data-theme="dark"] .kpi-card.accent-danger .kpi-icon { background: rgba(244,135,113,0.15) !important; color: #F48771 !important; } [data-theme="dark"] .kpi-card.accent-warning .kpi-icon { background: rgba(220,220,170,0.12) !important; color: #DCDCAA !important; } [data-theme="dark"] .kpi-card.accent-info .kpi-icon { background: rgba(86,156,214,0.15) !important; color: #569CD6 !important; } [data-theme="dark"] .kpi-card.accent-success .kpi-value { color: #4EC9B0; } [data-theme="dark"] .kpi-card.accent-danger .kpi-value { color: #F48771; } [data-theme="dark"] .kpi-card.accent-warning .kpi-value { color: #DCDCAA; } [data-theme="dark"] .kpi-delta.up { background: rgba(78,201,176,0.15); color: #4EC9B0; } [data-theme="dark"] .kpi-delta.down { background: rgba(244,135,113,0.15); color: #F48771; } [data-theme="dark"] .kpi-delta.neutral { background: rgba(255,255,255,0.08); color: #858585; } /* ============================================================ Chips ============================================================ */ [data-theme="dark"] .chip { background: rgba(255,255,255,0.07); color: var(--text-secondary); } [data-theme="dark"] .chip.chip-live { background: rgba(255,255,255,0.08); color: #CCCCCC; border-color: rgba(255,255,255,0.15); } /* ============================================================ Status badges ============================================================ */ [data-theme="dark"] .status-badge.present { background: rgba(78,201,176,0.15); color: #4EC9B0; } [data-theme="dark"] .status-badge.present::before { background: #4EC9B0; } [data-theme="dark"] .status-badge.late { background: rgba(220,220,170,0.12); color: #DCDCAA; } [data-theme="dark"] .status-badge.late::before { background: #DCDCAA; } [data-theme="dark"] .status-badge.absent { background: rgba(244,135,113,0.15); color: #F48771; } [data-theme="dark"] .status-badge.absent::before { background: #F48771; } [data-theme="dark"] .status-badge.pending { background: rgba(86,156,214,0.15); color: #569CD6; } [data-theme="dark"] .status-badge.pending::before { background: #569CD6; } /* ============================================================ Card title icon-wrap & card footer ============================================================ */ [data-theme="dark"] .card-title .icon-wrap { background: rgba(255,255,255,0.08); color: #9E9E9E; } [data-theme="dark"] .card-footer { background: var(--bg-elevated); border-top-color: var(--border-default); } /* ============================================================ Avatars — emp-avatar colour palette & generic avatar ============================================================ */ /* Base: white text stays, just dim the inset highlight */ [data-theme="dark"] .avatar, [data-theme="dark"] .emp-avatar { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); } /* Default .avatar (sidebar & generic) — muted grey */ [data-theme="dark"] .avatar { background: linear-gradient(135deg, #555558, #3F3F46); color: #E8E8E8; } /* Per-colour slots: keep hue identity but darken + desaturate for dark bg */ [data-theme="dark"] .emp-avatar.color-1 { background: linear-gradient(135deg, #4A3580, #2E1B5C); color: #D4D4D4; } /* violet */ [data-theme="dark"] .emp-avatar.color-2 { background: linear-gradient(135deg, #7A6020, #5A4415); color: #DCDCAA; } /* amber */ [data-theme="dark"] .emp-avatar.color-3 { background: linear-gradient(135deg, #1A5C44, #0D3D2C); color: #4EC9B0; } /* green */ [data-theme="dark"] .emp-avatar.color-4 { background: linear-gradient(135deg, #7A2550, #541535); color: #F48771; } /* pink */ [data-theme="dark"] .emp-avatar.color-5 { background: linear-gradient(135deg, #1E3A7A, #0F2254); color: #9CDCFE; } /* blue */ [data-theme="dark"] .emp-avatar.color-6 { background: linear-gradient(135deg, #7A1E2E, #540F1C); color: #F48771; } /* rose */ /* Employee card avatar: Bootstrap bg-primary-subtle + text-primary → dark-friendly grey */ [data-theme="dark"] .bg-primary-subtle { background: rgba(255,255,255,0.10) !important; } [data-theme="dark"] .text-primary { color: #CCCCCC !important; } /* Sidebar footer avatar-fallback */ [data-theme="dark"] .sidebar-footer .avatar-fallback { background: linear-gradient(135deg, #555558, #3F3F46); color: #E8E8E8; } /* ============================================================ Sidebar brand logo area ============================================================ */ /* Replace the purple gradient backdrop with the dark sidebar colour */ [data-theme="dark"] .sidebar-logo { background: linear-gradient(180deg, #252526 0%, #252526 70%, rgba(37,37,38,0) 100%) !important; } /* Brand accent text: swap purple-to-amber gradient for a plain light grey */ [data-theme="dark"] .sidebar-logo .brand .brand-accent, [data-theme="dark"] .sidebar-logo .brand:link .brand-accent, [data-theme="dark"] .sidebar-logo .brand:visited .brand-accent, [data-theme="dark"] .sidebar-logo .brand:hover .brand-accent, [data-theme="dark"] .sidebar-logo .brand:active .brand-accent, [data-theme="dark"] .sidebar-logo .brand:focus .brand-accent { background: none; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: #9E9E9E; color: #9E9E9E; } /* ============================================================ Quick actions ============================================================ */ [data-theme="dark"] .quick-action { background: var(--bg-surface); border-color: var(--border-default); color: var(--text-primary); } [data-theme="dark"] .quick-action:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); color: #D4D4D4; } [data-theme="dark"] .qa-icon { background: rgba(255,255,255,0.08); color: #9E9E9E; } /* ============================================================ Sidebar ============================================================ */ [data-theme="dark"] .sidebar { background: var(--bg-sidebar); } [data-theme="dark"] .sidebar .nav-section { color: rgba(212,212,212,0.40); } [data-theme="dark"] .sidebar a { color: rgba(212,212,212,0.75); } [data-theme="dark"] .sidebar a:hover { background: rgba(255,255,255,0.07); color: #D4D4D4; } [data-theme="dark"] .sidebar a.active { background: rgba(255,255,255,0.12); color: #E8E8E8; } /* ============================================================ Org button in topbar ============================================================ */ [data-theme="dark"] .topbar-org button, [data-theme="dark"] .topbar-org > div { background: #2D2D30 !important; border-color: #3F3F46 !important; color: #D4D4D4 !important; } /* ============================================================ Nav search inside sidebar ============================================================ */ [data-theme="dark"] #navSearchWrap .input-group { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; } /* ============================================================ Pagination ============================================================ */ [data-theme="dark"] .page-link { background: var(--bg-surface); border-color: var(--border-default); color: #CCCCCC; } [data-theme="dark"] .page-link:hover { background: var(--bg-elevated); border-color: var(--border-default); color: #D4D4D4; } [data-theme="dark"] .page-item.active .page-link { background: #555558; border-color: #555558; color: #E8E8E8; } [data-theme="dark"] .page-item.disabled .page-link { background: var(--bg-surface); color: var(--ink-400); } /* ============================================================ List groups ============================================================ */ [data-theme="dark"] .list-group-item { background: var(--bg-surface); border-color: var(--border-default); color: var(--text-primary); } [data-theme="dark"] .list-group-item:hover { background: var(--bg-elevated); } [data-theme="dark"] .list-group-item.active { background: #555558; border-color: #555558; color: #E8E8E8; } /* ============================================================ Nav tabs ============================================================ */ [data-theme="dark"] .nav-tabs { border-color: var(--border-default); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-secondary); border-color: transparent; } [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--border-default); color: var(--text-primary); } [data-theme="dark"] .nav-tabs .nav-link.active { background: var(--bg-surface); border-color: var(--border-default) var(--border-default) var(--bg-surface); color: var(--text-primary); } /* ============================================================ Theme toggle button ============================================================ */ #themeToggleBtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); border: 1px solid var(--border-default); background: transparent; color: var(--text-primary); cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; font-size: 1rem; padding: 0; } #themeToggleBtn:hover { background: rgba(255,255,255,0.08); border-color: var(--border-strong); } /* ============================================================ Misc helpers ============================================================ */ [data-theme="dark"] .text-muted { color: var(--ink-400) !important; } [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: var(--border-default) !important; } [data-theme="dark"] hr { border-color: var(--border-default); opacity: 1; } [data-theme="dark"] .vr { background: var(--border-default); opacity: 1; } /* ============================================================ Code / pre blocks ============================================================ */ [data-theme="dark"] pre, [data-theme="dark"] code { background: #1E1E1E; color: #D4D4D4; border-color: var(--border-default); } /* ============================================================ Attendance & Self-Attendance Calendar — day cells ============================================================ */ [data-theme="dark"] .day-cell { background: #2D2D30 !important; border-color: #3F3F46 !important; color: #D4D4D4; } [data-theme="dark"] .day-cell:hover { border-color: #858585 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.35) !important; } [data-theme="dark"] .day-cell.today { border-color: #858585 !important; box-shadow: 0 0 0 3px rgba(255,255,255,0.12) !important; } [data-theme="dark"] .day-cell.empty { background: transparent !important; border-color: transparent !important; } [data-theme="dark"] .att-present { background: rgba(78,201,176,0.12) !important; border-color: rgba(78,201,176,0.35) !important; } [data-theme="dark"] .att-absent { background: rgba(244,135,113,0.12) !important; border-color: rgba(244,135,113,0.35) !important; } [data-theme="dark"] .att-halfday { background: rgba(220,220,170,0.10) !important; border-color: rgba(220,220,170,0.30) !important; } [data-theme="dark"] .att-late { background: rgba(206,145,120,0.12) !important; border-color: rgba(206,145,120,0.35) !important; } [data-theme="dark"] .att-earlyleave { background: rgba(206,145,120,0.12) !important; border-color: rgba(206,145,120,0.35) !important; } [data-theme="dark"] .att-weekoff { background: rgba(255,255,255,0.04) !important; border-color: #3F3F46 !important; } [data-theme="dark"] .att-holiday { background: rgba(86,156,214,0.12) !important; border-color: rgba(86,156,214,0.30) !important; } [data-theme="dark"] .att-leave { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.18) !important; } [data-theme="dark"] .day-cell.has-capture { background: rgba(78,201,176,0.12) !important; border-color: rgba(78,201,176,0.35) !important; } [data-theme="dark"] .day-num { color: #D4D4D4 !important; } [data-theme="dark"] .day-time { color: #858585 !important; } [data-theme="dark"] .day-name-inside { color: #858585 !important; } [data-theme="dark"] .day-duration { color: #858585 !important; } [data-theme="dark"] .cal-header, [data-theme="dark"] .day-header { color: #9E9E9E !important; } [data-theme="dark"] .override-dot { border-color: #2D2D30 !important; } [data-theme="dark"] .summary-pill { background: #2D2D30 !important; border-color: #3F3F46 !important; color: #D4D4D4 !important; } /* ============================================================ Roster list — card & list view ============================================================ */ [data-theme="dark"] .roster-cards .card .d-flex [style*="background:#F3F0FF"], [data-theme="dark"] .roster-cards .card .d-flex [style*="background:#EDE9FE"] { background: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .roster-cards .card [style*="color:#7C3AED"], [data-theme="dark"] .roster-cards .card .text-purple { color: #9E9E9E !important; } [data-theme="dark"] .roster-cards .card [style*="color:#64748B"] { color: #858585 !important; } [data-theme="dark"] .roster-cards .card .text-dark { color: #D4D4D4 !important; } [data-theme="dark"] .bg-purple-subtle { background: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .text-purple { color: #9E9E9E !important; } [data-theme="dark"] .bg-purple { background: rgba(255,255,255,0.14) !important; color: #D4D4D4 !important; } [data-theme="dark"] .bg-purple-light { background: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .bg-secondary-subtle{ background: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .text-secondary { color: #858585 !important; } [data-theme="dark"] .bg-info-subtle { background: rgba(86,156,214,0.15) !important; } [data-theme="dark"] .text-info { color: #569CD6 !important; } [data-theme="dark"] .shift-clock .clock-bg { stroke: #3F3F46; } [data-theme="dark"] .shift-clock .clock-fg { stroke: #858585; } [data-theme="dark"] .shift-clock .clock-marker { fill: #9E9E9E; } [data-theme="dark"] .btn-purple { background: linear-gradient(90deg, #555558 0%, #3F3F46 100%) !important; border-color: #555558 !important; color: #E8E8E8 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .btn-purple:hover, [data-theme="dark"] .btn-purple:focus { background: linear-gradient(90deg, #6B6B6B 0%, #555558 100%) !important; color: #fff !important; } [data-theme="dark"] .btn-outline-purple { background: transparent !important; color: #CCCCCC !important; border-color: #555558 !important; } [data-theme="dark"] .btn-outline-purple:hover, [data-theme="dark"] .btn-outline-purple:focus { background: rgba(255,255,255,0.08) !important; color: #E8E8E8 !important; border-color: #858585 !important; } /* ============================================================ Wallet page — override hardcoded inline light colours ============================================================ */ /* Balance card gradient — keep readable but go grey */ [data-theme="dark"] .card[style*="linear-gradient(135deg,var(--ys-primary)"] { background: linear-gradient(135deg, #3F3F46, #2D2D30) !important; color: #E8E8E8 !important; } /* Total top-ups / deductions summary cards — hardcoded #0F172A text */ [data-theme="dark"] [style*="color:#0F172A"] { color: #D4D4D4 !important; } /* Table thead hardcoded #F8FAFC background */ [data-theme="dark"] thead[style*="background:#F8FAFC"] { background: #2D2D30 !important; } [data-theme="dark"] thead[style*="background:#F8FAFC"] th { color: #9E9E9E !important; } /* Transaction type badges — inline pastel backgrounds */ [data-theme="dark"] .badge[style*="background:#DCFCE7"] { background: rgba(78,201,176,0.15) !important; color: #4EC9B0 !important; } [data-theme="dark"] .badge[style*="background:#FEE2E2"] { background: rgba(244,135,113,0.15) !important; color: #F48771 !important; } [data-theme="dark"] .badge[style*="background:#FEF3C7"], [data-theme="dark"] .badge[style*="background:#FEF9C3"] { background: rgba(220,220,170,0.13) !important; color: #DCDCAA !important; } /* Amount column hardcoded green / red */ [data-theme="dark"] td[style*="color:#166534"] { color: #4EC9B0 !important; } [data-theme="dark"] td[style*="color:#991B1B"] { color: #F48771 !important; } /* ============================================================ icon-wrap inline colour overrides (app-wide) Targets hardcoded background/color on standalone .icon-wrap elements used across WhatsAppCost, Dashboard quick-actions, etc. ============================================================ */ /* Green icon-wrap: #dcfce7 / #16a34a */ [data-theme="dark"] .icon-wrap[style*="background:#dcfce7"] { background: rgba(78,201,176,0.14) !important; color: #4EC9B0 !important; } /* Yellow icon-wrap: #fef9c3 / #a16207 */ [data-theme="dark"] .icon-wrap[style*="background:#fef9c3"] { background: rgba(220,220,170,0.12) !important; color: #DCDCAA !important; } /* Blue icon-wrap: #dbeafe / #1d4ed8 and similar */ [data-theme="dark"] .icon-wrap[style*="background:#dbeafe"] { background: rgba(86,156,214,0.14) !important; color: #569CD6 !important; } /* Red/danger icon-wrap */ [data-theme="dark"] .icon-wrap[style*="background:#fee2e2"] { background: rgba(244,135,113,0.14) !important; color: #F48771 !important; } /* Any icon-wrap using violet CSS vars: var(--violet-100) / var(--violet-600) Already handled by the dark-theme token remapping, but ensure text stays readable */ [data-theme="dark"] .icon-wrap[style*="var(--violet-100)"] { background: rgba(255,255,255,0.08) !important; color: #9E9E9E !important; } /* alert-light (used in WhatsAppCost "Last updated" box) */ [data-theme="dark"] .alert-light { background: #2D2D30 !important; border-color: rgba(255,255,255,0.11) !important; color: #D4D4D4 !important; }