/* ============================================================ ClinicMaster — Home dashboard styles Glass / gradient-mesh aesthetic. Served by both hosts at _content/ClinicMaster.UI/css/dashboard.css. Mirrors dashboard-mockups/03-modern-glass.html — keep in sync if visual tweaks are made. ============================================================ */ .cm-dash { --cm-primary: #1976D2; --cm-accent: #7C3AED; --cm-pink: #EC4899; --cm-teal: #14B8A6; --cm-amber: #F59E0B; --cm-rose: #F43F5E; --cm-emerald: #10B981; --cm-text: #0B1220; --cm-text-secondary: #475569; --cm-text-tertiary: #94A3B8; color: var(--cm-text); font-family: 'Inter', -apple-system, sans-serif; /* Why NOT `margin: -16px; min-height: calc(100vh - 64px)`: In Blazor WebAssembly the happily scrolls itself, but in MAUI BlazorWebView the scroll container is MudMainContent (overflow-y:auto) under a fixed-height MudLayout. A negative margin combined with a viewport-relative min-height pushed our content slightly outside MudMainContent's box, which the WebView reads as "no overflow here" and stops responding to wheel/touch — the page appears frozen. Sitting naturally inside the parent's padding fixes it on both hosts. */ background: radial-gradient(1200px 600px at -10% -20%, rgba(124,58,237,.18), transparent 60%), radial-gradient(900px 600px at 110% 0%, rgba(20,184,166,.18), transparent 60%), radial-gradient(900px 600px at 50% 120%, rgba(25,118,210,.18), transparent 60%), #F4F6FB; padding: 16px; border-radius: 20px; /* Fill the viewport even when the dashboard content is short — same fix the list shell got. No negative margin, just min-height. */ min-height: calc(100vh - 96px); } .cm-dash .glass { background: rgba(255,255,255,.65); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.04); border-radius: 20px; } /* ─── HERO ─────────────────────────────────────────────────── */ .cm-dash .hero { padding: 28px 32px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden; gap: 16px; } .cm-dash .hero-text h1 { font-size: 30px; font-weight: 700; letter-spacing: -.8px; line-height: 1.1; margin: 0 0 6px; background: linear-gradient(135deg, #0B1220 0%, #475569 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .cm-dash .hero-text p { font-size: 14px; color: var(--cm-text-secondary); margin: 0; } .cm-dash .hero-text .accent { color: var(--cm-rose); font-weight: 600; } .cm-dash .hero-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .cm-dash .chip { background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.9); padding: 8px 14px; border-radius: 100px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; color: var(--cm-text); box-shadow: 0 1px 3px rgba(15,23,42,.05); cursor: pointer; transition: transform .15s; border: 0; font-family: inherit; } .cm-dash .chip:hover { transform: translateY(-1px); } .cm-dash .chip-primary { background: linear-gradient(135deg, #1976D2 0%, #7C3AED 100%); color: white; border-color: transparent; box-shadow: 0 4px 12px rgba(25,118,210,.3); } .cm-dash .chip .mi { font-size: 16px; color: var(--cm-text-secondary); } .cm-dash .chip-primary .mi { color: white; } /* ─── KPI ──────────────────────────────────────────────────── */ .cm-dash .kpi-grid { display: grid; /* Column count is driven by --kpi-cols (set inline per dashboard) so a view with fewer KPIs still fills the row instead of leaving an empty track. Media queries below override the whole property, so mobile collapsing keeps working. */ grid-template-columns: repeat(var(--kpi-cols, 4), 1fr); gap: 20px; margin-bottom: 24px; } .cm-dash .kpi { padding: 24px; position: relative; overflow: hidden; transition: transform .2s cubic-bezier(.4,0,.2,1); } .cm-dash .kpi:hover { transform: translateY(-3px); } .cm-dash .kpi::before { content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--accent-color, var(--cm-primary)); opacity: .12; filter: blur(20px); } .cm-dash .kpi-icon-wrap { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-color, var(--cm-primary)), var(--accent-color-2, var(--cm-primary))); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; box-shadow: 0 6px 16px var(--accent-shadow, rgba(25,118,210,.3)); } .cm-dash .kpi-icon-wrap .mi { color: white; font-size: 22px; } .cm-dash .kpi-label { font-size: 12px; font-weight: 600; color: var(--cm-text-secondary); letter-spacing: .3px; text-transform: uppercase; margin-bottom: 6px; } .cm-dash .kpi-value { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -1.5px; margin-bottom: 10px; background: linear-gradient(135deg, var(--accent-color, var(--cm-primary)), var(--accent-color-2, var(--cm-primary))); -webkit-background-clip: text; background-clip: text; color: transparent; } .cm-dash .kpi-unit { font-size: 18px; color: var(--cm-text-secondary); font-weight: 600; } .cm-dash .kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cm-dash .kpi-sub { font-size: 12px; color: var(--cm-text-secondary); } .cm-dash .trend-pill { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 100px; font-size: 11px; font-weight: 700; flex-shrink: 0; } .cm-dash .trend-up { background: rgba(16,185,129,.15); color: #047857; } .cm-dash .trend-down { background: rgba(244,63,94,.15); color: #BE123C; } .cm-dash .trend-flat { background: rgba(148,163,184,.18); color: var(--cm-text-secondary); } .cm-dash .kpi-blue { --accent-color: #1976D2; --accent-color-2: #42A5F5; --accent-shadow: rgba(25,118,210,.3); } .cm-dash .kpi-rose { --accent-color: #F43F5E; --accent-color-2: #EC4899; --accent-shadow: rgba(244,63,94,.3); } .cm-dash .kpi-teal { --accent-color: #14B8A6; --accent-color-2: #10B981; --accent-shadow: rgba(20,184,166,.3); } .cm-dash .kpi-amber { --accent-color: #F59E0B; --accent-color-2: #F97316; --accent-shadow: rgba(245,158,11,.3); } /* ─── ROW LAYOUT ───────────────────────────────────────────── */ .cm-dash .row { display: grid; /* Default is schedule (2fr) + side panel (1fr). A dashboard with no side panel sets --row-cols:1fr so the single card spans the full width. Media queries below force 1fr on small screens regardless. */ grid-template-columns: var(--row-cols, 2fr 1fr); gap: 20px; margin-bottom: 20px; } .cm-dash .card-pad { padding: 24px 28px; } .cm-dash .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; } .cm-dash .card-title { font-size: 16px; font-weight: 700; letter-spacing: -.3px; display: flex; align-items: center; gap: 10px; } .cm-dash .card-title .ti { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #1976D2, #7C3AED); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cm-dash .card-title .ti.lab { background: linear-gradient(135deg, #F43F5E, #EC4899); } .cm-dash .card-title .ti.docs { background: linear-gradient(135deg, #14B8A6, #10B981); } .cm-dash .card-title .ti .mi { color: white; font-size: 16px; } .cm-dash .card-action { font-size: 12px; font-weight: 600; color: var(--cm-primary); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 100px; background: rgba(25,118,210,.08); transition: background .15s; border: 0; font-family: inherit; } .cm-dash .card-action:hover { background: rgba(25,118,210,.15); } /* ─── CHART ─────────────────────────────────────────────── */ .cm-dash .chart-svg { width: 100%; height: 220px; } .cm-dash .chart-stats { display: flex; gap: 28px; margin-bottom: 14px; flex-wrap: wrap; } .cm-dash .cs-num { font-size: 24px; font-weight: 800; letter-spacing: -.5px; } .cm-dash .cs-lbl { font-size: 11px; color: var(--cm-text-secondary); text-transform: uppercase; letter-spacing: .5px; } /* Class names are prefixed `cs-` to avoid MudBlazor's bare `.red`/`.green`/`.amber` utility helpers, which set background-color and otherwise paint the number cell. */ .cm-dash .cs-num.cs-green { color: var(--cm-emerald); } .cm-dash .cs-num.cs-red { color: var(--cm-rose); } .cm-dash .cs-num.cs-amber { color: var(--cm-amber); } /* ─── QUICK ACTIONS ──────────────────────────────────────── */ .cm-dash .qa-grid { display: grid; /* Tile count is driven by --qa-cols (set inline). Using a variable — not an inline grid-template-columns — lets the mobile media query below still collapse the tiles to a single column. */ grid-template-columns: repeat(var(--qa-cols, 2), 1fr); gap: 12px; } .cm-dash .qa-tile { /*