/* ============================================================================ Report design system — the ONE look for every /reports/* page. Flat cards, slight outline, no gradients, no hover on non-clickable containers (golden rule). Everything themes through css/themes/_variables.css tokens, so dark mode needs only the small override block at the bottom. Page CSS on report pages should shrink to page-specific layout only, with namespaced classes — shared structure lives here. Plan: docs/features/report-pages-redesign-plan.md ============================================================================ */ /* ---- Page wrapper ------------------------------------------------------- Wrap every report page root in .report-page. Besides spacing, it neutralizes glass-card hover/shimmer for any legacy card inside (same effect as .static-cards) so partially-migrated pages already obey the golden rule. */ .report-page { display: flex; flex-direction: column; gap: 1rem; } .report-page .glass-card:hover { transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03) !important; } .report-page .glass-card:hover::before { opacity: 0; animation: none; } /* Legacy date-controls-card inherits a max-width from cards.css; on report pages every section spans the full container. */ .report-page .date-controls-card { max-width: none; width: 100%; } /* ---- The report card ----------------------------------------------------- */ .report-card { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } .report-card .report-card-body { padding: 1rem 1.25rem; } /* ---- Section header (icon + title + right-side actions) ------------------ */ .report-section-header { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--surface-border-light); flex-wrap: wrap; } .report-section-header .rsh-icon { color: var(--text-secondary); font-size: 1rem; line-height: 1; } .report-section-header .rsh-title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--text-heading); } .report-section-header .rsh-subtitle { font-size: 0.78rem; color: var(--text-secondary); } .report-section-header .rsh-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } /* Neutral count pill for headers ("128 records") */ .report-count-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); border: 1px solid var(--surface-border); background: var(--surface-elevated); color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---- KPI stat strip ------------------------------------------------------- One .report-card.report-stats containing .report-stat cells. Divided strip (like Client Re-engagement) rather than floating tiles. NOT clickable → no hover, ever. */ .report-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); overflow: hidden; /* clips the leading divider of each wrapped row */ } .report-stat { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.1rem; border-left: 1px solid var(--surface-border-light); margin-left: -1px; /* first cell of each row: divider clipped by overflow */ min-width: 0; } .report-stat .rs-icon { flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); font-size: 1.05rem; background: var(--rs-tint-bg, var(--surface-elevated)); color: var(--rs-tint-fg, var(--text-secondary)); } .report-stat .rs-text { min-width: 0; /* lets rs-label ellipsize inside the grid cell */ } .report-stat .rs-value { font-size: 1.3rem; font-weight: 700; line-height: 1.15; color: var(--text-heading); font-variant-numeric: tabular-nums; white-space: nowrap; } .report-stat .rs-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .report-stat .rs-sub { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .report-stat .rs-delta { font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; } .report-stat .rs-delta.up { color: var(--rs-good, #15803d); } .report-stat .rs-delta.down { color: var(--rs-bad, #b91c1c); } /* Icon tints — semantic accents, solid tints only (no gradients). */ .rs-tint-green { --rs-tint-bg: rgba(25, 135, 84, 0.12); --rs-tint-fg: #15803d; } .rs-tint-blue { --rs-tint-bg: rgba(61, 139, 253, 0.12); --rs-tint-fg: #1d4ed8; } .rs-tint-purple { --rs-tint-bg: rgba(124, 74, 201, 0.12); --rs-tint-fg: #6d28d9; } .rs-tint-amber { --rs-tint-bg: rgba(168, 123, 11, 0.14); --rs-tint-fg: #b45309; } .rs-tint-red { --rs-tint-bg: rgba(220, 53, 69, 0.12); --rs-tint-fg: #b91c1c; } .rs-tint-slate { --rs-tint-bg: rgba(90, 107, 125, 0.12); --rs-tint-fg: #475569; } /* ---- Filter bar ----------------------------------------------------------- Structure rendered by ReportFilterBar.razor. All controls share min-height so rows stay aligned at every breakpoint (golden rule #2). */ .report-filterbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.8rem 1.25rem; } .report-filterbar .rfb-group { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .report-filterbar .rfb-right { margin-left: auto; /* stays right-aligned when the row wraps */ display: flex; align-items: center; gap: 0.4rem; } .report-filterbar .btn, .report-filterbar .form-select, .report-filterbar .form-control, .report-filterbar input[type="date"] { min-height: 40px; font-size: 0.82rem; } .report-filterbar .form-select, .report-filterbar .form-control { width: auto; } /* Quick-range / preset pill buttons */ .rfb-pill { padding: 0.35rem 0.8rem; border-radius: var(--radius-pill); border: 1px solid var(--surface-border); background: var(--surface-card); color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .rfb-pill:hover:not(.active) { background: var(--surface-hover); color: var(--text-primary); } .rfb-pill.active { background: var(--text-heading); border-color: var(--text-heading); color: var(--text-inverse); } /* ---- Tables --------------------------------------------------------------- .report-card.report-table-card > (.report-section-header) > .report-table-scroll > table.report-table */ .report-table-scroll { overflow-x: auto; max-height: 560px; overflow-y: auto; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } table.report-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 0.84rem; color: var(--text-primary); } table.report-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-elevated); color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--surface-border); white-space: nowrap; } table.report-table tbody td { padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--surface-border-light); vertical-align: middle; } table.report-table tbody tr:last-child td { border-bottom: none; } table.report-table tbody tr:hover td { background: var(--table-hover-bg); /* rows are data targets; subtle read-assist only */ } table.report-table tfoot td { padding: 0.6rem 0.9rem; background: var(--surface-elevated); border-top: 1px solid var(--surface-border); font-weight: 600; } /* ---- Chart host ----------------------------------------------------------- Base class the Components/Charts/* components rely on. (Previously defined only inside two page