/* ─── EmiCash Design System — Unfold theme overrides ─── Selectors below are matched against Unfold's actual compiled markup (unfold/components/card.html, unfold/helpers/label.html, badge.html, button.html, layouts/unauthenticated.html) — not guessed class names. */ :root { --emicash-crimson: #dc2626; --emicash-crimson-deep: #b91c1c; /* Unfold's own theme knob — every element using .rounded-default (buttons, inputs, dropdowns) picks this up automatically. */ --border-radius: 10px; } /* 1. Card geometry — unfold/components/card.html is the only place that combines flex-col + grow + overflow-hidden + rounded-default, so this selector reaches every card without also resizing buttons/inputs. */ .rounded-default.flex-col.overflow-hidden { border-radius: 1rem; /* 16px */ } /* 2. Primary buttons & links — bg-primary-600 is already emerald via COLORS.primary, this layers the brand's gradient + glow on top. */ button.bg-primary-600, a.bg-primary-600 { background: linear-gradient( 135deg, var(--color-primary-600), var(--color-primary-700) ) !important; border: none !important; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25); transition: box-shadow 0.2s ease-in-out; } button.bg-primary-600:hover, a.bg-primary-600:hover { box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35); } /* 3. Status badges (unfold/helpers/label.html + badge.html) — remap Unfold's stock green/red to the EmiCash emerald/crimson tokens. */ .bg-green-100 { background-color: rgba(16, 185, 129, 0.12) !important; } .text-green-700 { color: var(--color-primary-700) !important; } .dark .dark\:bg-green-500\/20 { background-color: rgba(16, 185, 129, 0.2) !important; } .dark .dark\:text-green-400 { color: var(--color-primary-400) !important; } .bg-red-100 { background-color: rgba(220, 38, 38, 0.12) !important; } .text-red-700 { color: var(--emicash-crimson-deep) !important; } .dark .dark\:bg-red-500\/20 { background-color: rgba(220, 38, 38, 0.2) !important; } .dark .dark\:text-red-400 { color: #f87171 !important; } /* 4. Monetary figures — tabular-nums keeps digits from jittering width as amounts update/sort; harmless on non-numeric text so applied broadly. */ body { font-variant-numeric: tabular-nums; } /* 5. Balance/KPI hero cards — opt-in via this class (see templates/admin/ index.html "Solde AfrikPay" card) instead of a blanket card override, since most cards should stay neutral. */ .emicash-balance-card { background: linear-gradient( 135deg, var(--color-primary-600) 0%, var(--color-primary-800) 100% ) !important; border: none !important; box-shadow: 0 10px 25px -5px rgba(5, 150, 105, 0.35); } .emicash-balance-card, .emicash-balance-card * { color: #f0fdf4 !important; } .emicash-balance-card .material-symbols-outlined { color: rgba(240, 253, 244, 0.7) !important; } /* 6. Login screen — subtle brand glow (unfold/layouts/unauthenticated.html puts "login" directly on ). */ body.login { background: radial-gradient(circle at 15% 15%, rgba(16, 185, 129, 0.08) 0%, transparent 45%), radial-gradient(circle at 85% 85%, rgba(220, 38, 38, 0.04) 0%, transparent 40%); }