/* Design tokens — mirrors the palette/typography/spacing/shadow/radius scale documented in the implementation plan's UI Design System section. RmTheme.cs (Theme/RmTheme.cs) feeds the same color values into MudBlazor's own theming system; these custom properties exist for the CSS that sits outside MudBlazor's component styles (page-level layout, future custom components). */ :root { /* Color */ --rm-navy: #0d1b2a; --rm-azure: #2e86de; --rm-teal: #48cfad; --rm-amber: #f7b731; --rm-ruby: #e74c3c; --rm-surface: #f8f9fc; --rm-text-primary: #1a1a2e; --rm-text-secondary: #5b6b82; /* Typography scale */ --rm-font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --rm-font-size-xs: 0.75rem; --rm-font-size-sm: 0.875rem; --rm-font-size-md: 1rem; --rm-font-size-lg: 1.25rem; --rm-font-size-xl: 1.5rem; --rm-font-size-2xl: 2rem; /* Spacing scale */ --rm-space-1: 4px; --rm-space-2: 8px; --rm-space-3: 12px; --rm-space-4: 16px; --rm-space-6: 24px; --rm-space-8: 32px; /* Shadow levels */ --rm-shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.06); --rm-shadow-md: 0 4px 12px rgba(13, 27, 42, 0.10); --rm-shadow-lg: 0 12px 32px rgba(13, 27, 42, 0.16); /* Border radius system */ --rm-radius-sm: 6px; --rm-radius-md: 10px; --rm-radius-lg: 16px; } :root[data-mud-color-scheme="dark"] { --rm-surface: #111827; --rm-text-primary: #f9fafb; --rm-text-secondary: #9ca3af; } /* * Anti-FOUC dark mode: applied immediately when the inline script stamps * data-rm-dark on (before the browser paints the body). Colors match * RmTheme.PaletteDark exactly so MudBlazor's hydration is a no-op visually. * color-scheme tells the browser to use dark native controls (scrollbars etc.) * before MudBlazor's JS wiring fires. */ html[data-rm-dark] { color-scheme: dark; background-color: #111827; } html[data-rm-dark] body { background-color: #111827; color: #F9FAFB; } html, body { font-family: var(--rm-font-family); } .content { padding-top: 1.1rem; } h1:focus { outline: none; } /* ───────────────────────────────────────────────────────────── Phase 4 — Animations & Micro-Interactions ───────────────────────────────────────────────────────────── */ /* Page entrance: 200ms fade + 8px slide-up. Triggered by @key on .rm-page-content in MainLayout so it fires on every Blazor navigation. */ @keyframes rm-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .rm-page-content { animation: rm-page-in 200ms ease-out both; } /* Card hover lift — add rm-card class to MudPaper elements that should lift. @media (hover: hover) prevents sticky hover state on touchscreens. */ @media (hover: hover) { .rm-card { transition: transform 150ms ease, box-shadow 150ms ease; } .rm-card:hover { transform: translateY(-2px); box-shadow: var(--rm-shadow-lg) !important; } } /* Button press haptic: 80ms scale-down on :active for all MudBlazor primary buttons */ .mud-button-root:active { transform: scale(0.97); transition: transform 80ms ease !important; } /* ───────────────────────────────────────────────────────────── Phase 4 — Responsive Design ───────────────────────────────────────────────────────────── */ /* Data grids: horizontal scroll on phones so columns aren't truncated */ @media (max-width: 600px) { .mud-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Give tables a minimum readable width so they scroll rather than collapse */ .mud-table-root { min-width: 540px; } } /* KPI grid: auto-fill so cards reflow 3→2→1 across breakpoints */ .rm-kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } /* ───────────────────────────────────────────────────────────── Phase 4 — Dark Mode enhancements ───────────────────────────────────────────────────────────── */ /* Frosted glass sidebar when dark mode is active */ [data-mud-color-scheme="dark"] .mud-drawer { background: rgba(17, 24, 39, 0.85) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-right: 1px solid rgba(255, 255, 255, 0.06) !important; } /* ───────────────────────────────────────────────────────────── Branded empty-state illustrations (used by EmptyState.razor) ───────────────────────────────────────────────────────────── */ .rm-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; color: var(--rm-text-secondary); } .rm-empty-state svg { width: 120px; height: 120px; margin-bottom: 24px; opacity: 0.75; } /* ───────────────────────────────────────────────────────────── MudTabs — full-height click target fix MudBlazor tabs can render with an implicit height that clips the bottom portion of the tab header row, making only the top ~half of each tab button respond to clicks. Force the button and its wrapper to fill the full header height so the entire visible area is clickable. ───────────────────────────────────────────────────────────── */ .mud-tabs .mud-tab { height: 48px; min-height: 48px; align-self: stretch; display: flex; align-items: center; justify-content: center; } .mud-tabs .mud-tab-header { min-height: 48px; } .mud-tabs .mud-tabs-header { min-height: 48px; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } /* ───────────────────────────────────────────────────────────── ERO Dashboard — hero bar, unpaid strip, lower panels ───────────────────────────────────────────────────────────── */ .rm-ero-hero { background: linear-gradient(135deg, #0d1b2a 0%, #1a3a5c 55%, #1e6db5 100%); border-radius: var(--rm-radius-lg); padding: 28px 32px; position: relative; overflow: hidden; color: white; } .rm-ero-hero-bg { position: absolute; right: 0; top: 0; bottom: 0; width: 55%; opacity: 0.055; pointer-events: none; } .rm-ero-hero-label { color: rgba(255,255,255,0.6); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.8px; font-weight: 600; margin-bottom: 6px; } .rm-ero-hero-amount { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 800; color: white; line-height: 1.1; } .rm-ero-hero-period { color: rgba(255,255,255,0.68); font-size: 1rem; font-weight: 400; margin-left: 10px; } .rm-ero-hero-year { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); border-radius: 20px; padding: 5px 16px; color: rgba(255,255,255,0.92); font-size: 0.8rem; font-weight: 600; white-space: nowrap; } .rm-ero-hero-quip { color: rgba(72, 207, 173, 0.92); font-size: 0.82rem; font-style: italic; margin-top: 14px; } /* Unpaid-due strip */ .rm-ero-unpaid { border-radius: var(--rm-radius-md); padding: 18px 24px; margin-bottom: 24px; position: relative; overflow: hidden; color: white; } .rm-ero-unpaid-debt { background: linear-gradient(135deg, #7c2d12 0%, #c2410c 100%); } .rm-ero-unpaid-clear { background: linear-gradient(135deg, #14532d 0%, #16a34a 100%); } .rm-ero-unpaid-amount { font-size: 1.5rem; font-weight: 700; color: white; line-height: 1.2; } .rm-ero-unpaid-label { color: rgba(255,255,255,0.75); font-size: 0.95rem; font-weight: 400; margin-left: 8px; } .rm-ero-unpaid-prior { color: rgba(255,220,170,0.95); font-size: 0.8rem; margin-top: 4px; } /* Lower panel headers (Revenue by Bill Method, Month vs Prior) */ .rm-panel-header-blue { background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%); padding: 14px 20px; border-radius: var(--rm-radius-md) var(--rm-radius-md) 0 0; color: white; } .rm-panel-header-purple { background: linear-gradient(135deg, #2d1b69 0%, #7c3aed 100%); padding: 14px 20px; border-radius: var(--rm-radius-md) var(--rm-radius-md) 0 0; color: white; } .rm-panel-header h6, .rm-panel-header-blue h6, .rm-panel-header-purple h6 { color: white !important; margin: 0; font-weight: 700; } .rm-panel-header-sub { color: rgba(255,255,255,0.68); font-size: 0.78rem; margin-top: 2px; } /* ───────────────────────────────────────────────────────────── Admin Dashboard — hero bar, panel headers, quick actions ───────────────────────────────────────────────────────────── */ .rm-admin-hero { background: linear-gradient(135deg, #0d1b2a 0%, #0b3d52 50%, #005d4b 100%); border-radius: var(--rm-radius-lg); padding: 24px 32px 14px; position: relative; overflow: hidden; color: white; } .rm-admin-hero-bg { position: absolute; right: 0; top: 0; bottom: 0; width: 60%; opacity: 0.055; pointer-events: none; } .rm-admin-hero-label { color: rgba(255,255,255,0.58); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.8px; font-weight: 600; margin-bottom: 6px; } .rm-admin-hero-amount { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 800; color: white; line-height: 1.1; margin-bottom: 10px; } /* Additional admin panel header colours */ .rm-panel-header-teal { background: linear-gradient(135deg, #004d40 0%, #00897b 100%); padding: 14px 20px; border-radius: var(--rm-radius-md) var(--rm-radius-md) 0 0; color: white; } .rm-panel-header-navy { background: linear-gradient(135deg, #0d1b2a 0%, #1a3a5c 100%); padding: 14px 20px; border-radius: var(--rm-radius-md) var(--rm-radius-md) 0 0; color: white; } .rm-panel-header-amber { background: linear-gradient(135deg, #7c2d12 0%, #b45309 100%); padding: 14px 20px; border-radius: var(--rm-radius-md) var(--rm-radius-md) 0 0; color: white; } .rm-panel-header-teal h6, .rm-panel-header-navy h6, .rm-panel-header-amber h6 { color: white !important; margin: 0; font-weight: 700; } .rm-quick-actions { background: linear-gradient(135deg, #0d1b2a 0%, #1a3a5c 100%); border-radius: var(--rm-radius-md); padding: 20px 24px; margin-top: 24px; } /* ───────────────────────────────────────────────────────────── Reusable page banner (search + report pages) ───────────────────────────────────────────────────────────── */ .rm-page-banner { border-radius: var(--rm-radius-lg); padding: 20px 28px; margin-bottom: 20px; position: relative; overflow: hidden; color: white; } .rm-page-banner-bg { position: absolute; right: 0; top: 0; bottom: 0; width: 52%; opacity: 0.07; pointer-events: none; } .rm-page-banner-title { font-size: 1.2rem; font-weight: 700; color: white; margin-bottom: 3px; position: relative; z-index: 1; } .rm-page-banner-sub { color: rgba(255,255,255,0.72); font-size: 0.8rem; position: relative; z-index: 1; } .rm-banner-affiliates { background: linear-gradient(135deg, #0d47a1 0%, #1976d2 55%, #039be5 100%); } .rm-banner-members { background: linear-gradient(135deg, #006064 0%, #00838f 55%, #26c6da 100%); } .rm-banner-reports { background: linear-gradient(135deg, #2d1b69 0%, #5e35b1 55%, #7c3aed 100%); } /* ───────────────────────────────────────────────────────────── Customer / Affiliate detail heroes + glass sub-tiles ───────────────────────────────────────────────────────────── */ /* TaxPayer / Customer → teal */ .rm-customer-hero { background: linear-gradient(135deg, #004d40 0%, #006064 50%, #00838f 100%); border-radius: var(--rm-radius-lg); padding: 28px 32px; position: relative; overflow: hidden; color: white; margin-bottom: 24px; transition: box-shadow 200ms ease; } /* ERO / Affiliate → navy */ .rm-affiliate-hero { background: linear-gradient(135deg, #0d1b2a 0%, #1a237e 55%, #1565c0 100%); border-radius: var(--rm-radius-lg); padding: 28px 32px; position: relative; overflow: hidden; color: white; margin-bottom: 24px; transition: box-shadow 200ms ease; } /* Delinquent → 2px red glow outline */ .rm-delinquent-hero { box-shadow: 0 0 0 2px #ef4444, 0 0 0 7px rgba(239, 68, 68, 0.18) !important; } /* Decorative background SVG wrapper */ .rm-detail-hero-bg { position: absolute; right: 0; top: 0; bottom: 0; width: 44%; opacity: 0.055; pointer-events: none; } /* Name + subtitle typography */ .rm-hero-name { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; color: white; line-height: 1.1; } .rm-hero-sub { color: rgba(255,255,255,0.68); font-size: 0.875rem; margin-top: 5px; } /* Delinquent badge shown inside hero */ .rm-delinquent-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(239,68,68,0.2); border: 1px solid rgba(239,68,68,0.5); border-radius: 6px; padding: 3px 10px; margin-bottom: 10px; color: #fca5a5; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } /* Glass sub-tiles inside hero */ .rm-hero-tile { background: rgba(0,0,0,0.22); border-radius: 10px; padding: 14px 16px 12px; height: 100%; border: 1px solid rgba(255,255,255,0.1); position: relative; overflow: hidden; } .rm-hero-tile-icon { position: absolute; right: 8px; bottom: 6px; opacity: 0.14; pointer-events: none; line-height: 0; } .rm-hero-tile-label { color: rgba(255,255,255,0.55); font-size: 0.67rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 8px; } .rm-hero-tile-row { color: white; font-size: 0.875rem; line-height: 1.6; } .rm-hero-tile-row-muted { color: rgba(255,255,255,0.7); font-size: 0.84rem; line-height: 1.55; } /* ── Billing status tile (AffiliateDetail admin read-only) ── */ .rm-billing-status-tile { border-radius: 12px; padding: 18px 24px; display: flex; align-items: center; gap: 16px; color: white; } .rm-bst-active { background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 55%, #43a047 100%); } .rm-bst-card-expired { background: linear-gradient(135deg, #7c2d12 0%, #c2410c 100%); } .rm-bst-inactive { background: linear-gradient(135deg, #451a03 0%, #92400e 55%, #b45309 100%); } .rm-bst-not-configured { background: linear-gradient(135deg, #1a1a2e 0%, #374151 100%); } /* ── CreditCard.razor first-time billing setup panel ── */ .rm-billing-setup-panel { background: linear-gradient(135deg, #0d1b2a 0%, #1a237e 55%, #1565c0 100%); border-radius: 14px; padding: 28px 32px; position: relative; overflow: hidden; color: white; } .rm-billing-setup-bg { position: absolute; inset: 0; pointer-events: none; opacity: 0.1; } .rm-billing-setup-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; } .rm-billing-setup-sub { font-size: 0.9rem; opacity: 0.82; max-width: 520px; line-height: 1.5; } .rm-billing-setup-card-wrap { margin-top: 20px; border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; padding: 12px 14px; background: rgba(0,0,0,0.2); min-height: 44px; }