/* ============================================================ Design tokens ============================================================ */ :root { /* Brand */ --color-brand: #2563eb; --color-brand-hover: #1d4ed8; --color-brand-active: #1e40af; /* Text */ --color-text: #0f172a; --color-text-strong: #1e293b; --color-text-header: #334155; --color-text-label: #374151; --color-text-muted: #475569; --color-text-subtle: #64748b; --color-text-faint: #94a3b8; --color-text-placeholder: #9ca3af; --color-text-input: #111827; --color-text-on-brand: #ffffff; /* Surface */ --color-surface: #ffffff; --color-surface-app: #f8fafc; --color-surface-subtle: #f1f5f9; --color-surface-emphasis: #e2e8f0; --color-surface-sidebar: #1e293b; /* Border */ --color-border: #e5e7eb; --color-border-strong: #e2e8f0; --color-border-input: #d1d5db; /* Status */ --color-success: #16a34a; --color-success-modified: #26b050; --color-danger: #dc2626; --color-danger-bright: #e50000; --color-warning: #ca8a04; --color-warning-strong: #b45309; --color-info: #0284c7; /* Radii */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-pill: 999px; /* Type sizes (6-step scale) */ --font-xs: 11px; /* uppercase labels, micro meta */ --font-sm: 12px; /* small text, meta */ --font-base: 13px; /* table cells, UI */ --font-md: 14px; /* body, inputs, buttons */ --font-lg: 15px; /* section titles */ --font-xl: 22px; /* page titles */ /* Font weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; /* Shadows */ --shadow-button: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04); --shadow-sticky: 0 -4px 12px rgba(15, 23, 42, 0.08); --ring-brand: 0 0 0 3px rgba(37, 99, 235, 0.15); --ring-brand-soft: 0 0 0 3px rgba(37, 99, 235, 0.1); /* Letter spacing */ --letter-tight: -0.01em; --letter-wide: 0.05em; --letter-wider: 0.06em; /* Line heights */ --line-tight: 1.25; /* headings */ --line-snug: 1.35; /* dense UI text */ --line-base: 1.5; /* body */ --line-relaxed: 1.65; /* long-form copy */ /* Transitions */ --transition-fast: 0.12s ease; /* Font family */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', 'Helvetica Neue', Arial, sans-serif; } /* ============================================================ Dark theme — token overrides. Toggled by setting data-theme="dark" on . Brand and status colours are intentionally preserved so brand identity stays consistent across themes. ============================================================ */ :root[data-theme="dark"] { /* Text */ --color-text: #f1f5f9; --color-text-strong: #e2e8f0; --color-text-header: #cbd5e1; --color-text-label: #cbd5e1; --color-text-muted: #94a3b8; --color-text-subtle: #94a3b8; --color-text-faint: #64748b; --color-text-placeholder: #cbd5e1; --color-text-input: #f1f5f9; /* Surface */ --color-surface: #1e293b; /* card surface */ --color-surface-app: #0f172a; /* page background */ --color-surface-subtle: #334155; /* hover/badge bg */ --color-surface-emphasis: #475569; --color-surface-sidebar: #0b1220; /* slightly darker than card so sidebar still reads as a distinct rail */ /* Border */ --color-border: #334155; --color-border-strong: #475569; --color-border-input: #475569; /* Shadows — softer on dark, with a slightly lighter accent */ --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-sticky: 0 -4px 12px rgba(0, 0, 0, 0.35); } /* Sidebar overrides for dark mode — the original rule uses --color-text-strong (#1e293b); explicitly point it at the dark-mode sidebar token to keep visual separation from the content surface. */ :root[data-theme="dark"] .b-layout-sider, :root[data-theme="dark"] .b-layout-sider-content { background-color: var(--color-surface-sidebar) !important; } /* Top bar in dark mode — Blazorise applies Bootstrap's bg-white via Background="Background.White" on the Bar; need !important to win. */ :root[data-theme="dark"] .b-layout-header, :root[data-theme="dark"] .b-layout-header .b-bar, :root[data-theme="dark"] .b-layout-header .bg-white { background-color: var(--color-surface) !important; } /* Card / table header backgrounds in dark mode use the card surface */ :root[data-theme="dark"] .b-table thead th { background-color: var(--color-surface-subtle); } /* DataGrid row hover in dark */ :root[data-theme="dark"] .b-table tbody tr:hover td { background-color: var(--color-surface-subtle); } /* Form-control input background in dark — Bootstrap base is white */ :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select, :root[data-theme="dark"] input.form-control { background-color: var(--color-surface-app); color: var(--color-text-input); } /* Disabled / readonly form-control — Bootstrap falls back to its light-grey --bs-secondary-bg which reads as white edges against the dark page. Pin to a dark surface with muted text instead. */ :root[data-theme="dark"] .form-control:disabled, :root[data-theme="dark"] .form-control[readonly], :root[data-theme="dark"] .form-select:disabled, :root[data-theme="dark"] input.form-control:disabled, :root[data-theme="dark"] input.form-control[readonly] { background-color: var(--color-surface-subtle); color: var(--color-text-faint); border-color: var(--color-border-input); opacity: 1; } /* Blazorise disabled Autocomplete sets the OUTER wrapper to a light grey via .dropdown.dropdown-disabled.b-is-autocomplete - flips the visible edges around the disabled input to light grey too. Match the inner input's dark surface so it reads as one piece. */ :root[data-theme="dark"] .dropdown.dropdown-disabled.b-is-autocomplete { background-color: var(--color-surface-subtle); } /* Topbar search box in dark */ :root[data-theme="dark"] .topbar-search .global-search-box input { background-color: var(--color-surface-subtle); border-color: var(--color-border-strong); } :root[data-theme="dark"] .topbar-search .global-search-box input:focus { background-color: var(--color-surface); } /* Secondary buttons in dark */ :root[data-theme="dark"] .btn-secondary { background-color: var(--color-surface-subtle); border-color: var(--color-border-strong); color: var(--color-text); } :root[data-theme="dark"] .btn-secondary:hover { background-color: var(--color-surface-emphasis); border-color: var(--color-border-strong); color: var(--color-text-strong); } /* Category badge background in dark */ :root[data-theme="dark"] .category-badge { background: var(--color-surface-subtle); border-color: var(--color-border-strong); } /* Chip background in dark (inactive) */ :root[data-theme="dark"] .category-chip { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text-muted); } /* Recent-toggle background */ :root[data-theme="dark"] .recent-toggle { background: var(--color-surface-app); border-color: var(--color-border); } :root[data-theme="dark"] .recent-toggle-btn.active { background: var(--color-surface); } /* Skeleton shimmer for dark */ :root[data-theme="dark"] .list-skeleton-row { background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-surface-subtle) 50%, var(--color-surface) 100%); background-size: 200% 100%; } /* List rows / dashboard rows hover on dark */ :root[data-theme="dark"] .dashboard-row:hover { background: var(--color-surface-subtle); } /* Blazorise DataGrid pagination buttons (First / Prev / page numbers / Next / Last) don't pick up Bootstrap's data-bs-theme — force token colours here. */ :root[data-theme="dark"] .pagination .page-link, :root[data-theme="dark"] .b-table-pagination .page-link, :root[data-theme="dark"] .b-table-pagination button, :root[data-theme="dark"] .b-table-pagination .btn, :root[data-theme="dark"] nav[aria-label*="pagination"] .page-link, :root[data-theme="dark"] .pagination .page-item .btn { background-color: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } :root[data-theme="dark"] .pagination .page-link:hover, :root[data-theme="dark"] .b-table-pagination .page-link:hover, :root[data-theme="dark"] .b-table-pagination button:hover { background-color: var(--color-surface-subtle) !important; } :root[data-theme="dark"] .pagination .page-item.active .page-link, :root[data-theme="dark"] .pagination .page-item .page-link.active { background-color: var(--color-brand) !important; border-color: var(--color-brand) !important; color: #fff !important; } :root[data-theme="dark"] .pagination .page-item.disabled .page-link { color: var(--color-text-faint) !important; background-color: var(--color-surface-app) !important; } /* Dropdown menus (Autocomplete suggestions, BarDropdownMenu, etc.) — Bootstrap doesn't always flip these. Force dark surface + hover state. */ :root[data-theme="dark"] .dropdown-menu { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text); } :root[data-theme="dark"] .dropdown-menu .dropdown-item { color: var(--color-text); } :root[data-theme="dark"] .dropdown-menu .dropdown-item:hover, :root[data-theme="dark"] .dropdown-menu .dropdown-item:focus, :root[data-theme="dark"] .dropdown-menu .dropdown-item.active, :root[data-theme="dark"] .dropdown-menu .dropdown-item.focused, :root[data-theme="dark"] .dropdown-menu .dropdown-item.focus, :root[data-theme="dark"] .dropdown-menu .dropdown-item.is-active, :root[data-theme="dark"] .dropdown-menu .dropdown-item.b-is-active, :root[data-theme="dark"] .dropdown-menu .dropdown-item[aria-selected="true"], :root[data-theme="dark"] .dropdown-menu .b-is-autocomplete-suggestion.focused, :root[data-theme="dark"] .dropdown-menu .b-is-autocomplete-suggestion-focused { background-color: var(--color-surface-subtle) !important; color: var(--color-text) !important; } /* Belt-and-braces: cover children so a colored child element can't stay light when the parent flips. */ :root[data-theme="dark"] .dropdown-menu .dropdown-item.active *, :root[data-theme="dark"] .dropdown-menu .dropdown-item:hover *, :root[data-theme="dark"] .dropdown-menu .dropdown-item[aria-selected="true"] * { color: inherit; } /* DataGrid selected row — Blazorise / Bootstrap apply a light blue highlight that makes text unreadable in dark mode. Use a subtle brand-tinted overlay instead. */ :root[data-theme="dark"] .b-table tbody tr.selected td, :root[data-theme="dark"] .b-table tbody tr.b-table-row-selected td, :root[data-theme="dark"] .b-table tbody tr.table-active td, :root[data-theme="dark"] .b-table tbody tr.table-primary td, :root[data-theme="dark"] .table > tbody > tr.table-active > *, :root[data-theme="dark"] .table > tbody > tr.table-primary > * { background-color: rgba(37, 99, 235, 0.15) !important; color: var(--color-text) !important; --bs-table-bg-state: transparent; } html, body { font-family: var(--font-family); font-size: var(--font-md); line-height: var(--line-base); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a, .btn-link { color: var(--color-brand); } .btn-primary { color: #fff; background-color: var(--color-brand); border-color: var(--color-brand-hover); } .btn-primary:hover { background-color: var(--color-brand-hover); border-color: var(--color-brand-active); } /* ============================================================ Sidebar — branded dark blue-grey (var(--color-text-strong) / slate-800) ============================================================ */ .b-layout-sider, .b-layout-sider-content { background-color: var(--color-text-strong) !important; /*overflow: hidden;*/ } .b-layout-sider { flex-shrink: 0; } /* Sidebar brand — clip overflow so logo doesn't bleed when collapsed */ .b-layout-sider .b-bar-brand, .b-layout-sider .b-bar-brand .b-bar-item, .b-layout-sider .b-bar-brand .b-bar-link { overflow: hidden; } .b-layout-sider .b-bar-brand img { max-width: 100%; height: auto; } /* Sidebar nav links — hover */ .b-layout-sider .b-bar-link:hover, .b-layout-sider .b-bar-dropdown-toggle:hover { background-color: rgba(255, 255, 255, 0.06) !important; } /* Sidebar active nav item — full-width solid blue (parent + dropdown items) */ .b-layout-sider .nav-link.active, .b-layout-sider .b-bar-link.active, .b-layout-sider .b-bar-item .nav-link.active, .b-layout-sider .b-bar-dropdown-item.active, .b-layout-sider .dropdown-item.active { background-color: var(--color-brand) !important; color: #fff !important; } /* Brand link should never show active highlight */ .b-layout-sider .b-bar-brand .nav-link.active, .b-layout-sider .b-bar-brand .b-bar-link.active, .b-layout-sider .b-bar-brand .nav-link { background-color: transparent !important; } /* ============================================================ Content area edge — clean seam between sidebar and content ============================================================ */ .b-layout-sider + .b-layout { border-left: 1px solid var(--color-border); /*min-width: 0;*/ } /* ============================================================ Top bar — light with bottom border ============================================================ */ .b-layout-header { border-bottom: 1px solid var(--color-border); } .b-layout-header .b-bar { box-shadow: none !important; } .b-layout-header .b-bar-link, .b-layout-header .b-bar-dropdown-toggle { color: var(--color-text-header) !important; font-weight: var(--weight-medium); } .b-layout-header .b-bar-link:hover, .b-layout-header .b-bar-dropdown-toggle:hover { color: var(--color-brand) !important; } /* User actions (profile, logout) in top bar */ .b-layout-header .nav-link, .b-layout-header .nav-link .svg-inline--fa, .b-layout-header .nav-link i { color: var(--color-text-muted) !important; } .b-layout-header .nav-link:hover, .b-layout-header .nav-link:hover .svg-inline--fa, .b-layout-header .nav-link:hover i { color: var(--color-brand) !important; } /* ============================================================ Content area — off-white background ============================================================ */ .b-layout-content { background-color: var(--color-surface-app); } /* Mouse-click focus is silent; keyboard focus shows a branded ring. */ .btn:focus, .btn-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus, a:focus { outline: none; box-shadow: none; } .btn:focus-visible, .btn-link:focus-visible, button:focus-visible, [role="button"]:focus-visible, a:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: var(--radius-md); } .form-control:focus-visible, .form-select:focus-visible { box-shadow: var(--ring-brand); border-color: var(--color-brand); } .form-check-input:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 1px; } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-success-modified); } .invalid { outline: 1px solid var(--color-danger-bright); } .validation-message { color: var(--color-danger-bright); } .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." } .darker-border-checkbox.form-check-input { border-color: #929292; } /* ============================================================ Sidebar user pod — bottom-left identity & preferences ============================================================ */ .b-layout-sider .b-bar-end { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 6px; } .user-pod { padding: 4px 8px; } .user-pod .dropdown { width: 100%; } .user-pod .user-pod-trigger { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--radius-md); background: transparent; border: none; color: rgba(255, 255, 255, 0.85); text-align: left; cursor: pointer; transition: background-color var(--transition-fast); } .user-pod .user-pod-trigger:hover, .user-pod .user-pod-trigger:focus { background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: none; } .user-pod .user-pod-trigger::after { /* Hide Bootstrap's default dropdown caret — we use the avatar as the visual affordance instead. */ display: none; } .user-pod-avatar { font-size: 24px; flex: 0 0 auto; color: rgba(255, 255, 255, 0.75); } .user-pod-name { font-size: var(--font-base); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } /* Collapsed sidebar — hide the name, keep just the avatar */ .b-layout-sider.b-bar-collapsed .user-pod-name { display: none; } /* Dropdown menu styling for the user pod popover */ .user-pod .dropdown-menu { min-width: 200px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); padding: 6px; } .user-pod .dropdown-item { border-radius: var(--radius-md); padding: 8px 10px; font-size: var(--font-base); display: flex; align-items: center; } .user-pod-logout-item { list-style: none; margin: 0; padding: 0; } .user-pod-logout-item form { margin: 0; } .user-pod-logout { width: 100%; text-align: left; background: transparent; border: none; color: var(--color-danger); cursor: pointer; } .user-pod-logout:hover, .user-pod-logout:focus { background: var(--color-surface-subtle); color: var(--color-danger); } /* ============================================================ Shared report row (used by Dashboard + RecentReportsPanel) ============================================================ */ .dashboard-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-md); cursor: pointer; color: var(--color-text); text-decoration: none; min-height: 40px; transition: background-color var(--transition-fast), color var(--transition-fast); } .dashboard-row:hover { background: var(--color-surface-subtle); color: var(--color-text); text-decoration: none; } .dashboard-row:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } .row-primary { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .row-project { font-size: var(--font-md); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .row-client { font-weight: var(--weight-normal); color: var(--color-text-muted); } .row-site { font-size: var(--font-base); color: var(--color-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .row-meta { flex: 0 0 auto; text-align: right; font-size: var(--font-sm); color: var(--color-text-faint); white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; } .row-meta .author { font-weight: var(--weight-medium); color: var(--color-text-muted); } /* ============================================================ Recent reports panel (used on report home pages) ============================================================ */ .recent-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 14px 12px 10px 12px; } .recent-panel-header { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 8px 4px; } .recent-panel-title { font-size: var(--font-xs); letter-spacing: var(--letter-wider); text-transform: uppercase; color: var(--color-text-muted); font-weight: var(--weight-semibold); } .recent-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-app); } .recent-toggle-btn { background: transparent; border: none; padding: 4px 10px; font-size: var(--font-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); cursor: pointer; } .recent-toggle-btn:hover { color: var(--color-brand); } .recent-toggle-btn.active { background: #fff; color: var(--color-brand); box-shadow: var(--shadow-button); } .recent-empty { font-size: var(--font-base); color: var(--color-text-faint); padding: 20px 8px; text-align: center; line-height: 1.5; } .recent-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 4px 10px 4px; padding: 8px 0 0 0; border-top: 1px dashed var(--color-border); } .recent-filter-select { flex: 0 1 220px; min-width: 140px; padding: 4px 8px; font-size: var(--font-sm); color: var(--color-text-strong); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; } .recent-filter-select:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.15); } .recent-filter-clear { margin-left: auto; background: transparent; border: none; color: var(--color-brand); font-size: var(--font-sm); font-weight: var(--weight-medium); cursor: pointer; padding: 4px 6px; } .recent-filter-clear:hover { text-decoration: underline; } .recent-footer { margin-top: 8px; padding: 6px 4px 0 4px; font-size: var(--font-sm); color: var(--color-text-faint); text-align: center; border-top: 1px dashed var(--color-border); } /* ============================================================ Report home pages — hero strip (search + new) ============================================================ */ .report-hero { display: flex; gap: 12px; align-items: center; } .report-hero-search { flex: 1 1 auto; min-width: 0; } .report-hero-search .autocomplete, .report-hero-search .dropdown, .report-hero-search input.form-control { width: 100%; } .report-hero-search input.form-control { height: 40px; border-radius: var(--radius-lg); border-color: var(--color-border); font-size: var(--font-md); } .report-hero-search input.form-control:focus { border-color: var(--color-brand); box-shadow: var(--ring-brand); } /* ============================================================ List pages — loading skeleton ============================================================ */ .list-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 16px 0; } .list-skeleton-row { height: 42px; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--color-surface-subtle) 0%, var(--color-border-strong) 50%, var(--color-surface-subtle) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite ease-in-out; } /* Vary widths for natural feel */ .list-skeleton-row:nth-child(1) { width: 100%; } .list-skeleton-row:nth-child(2) { width: 96%; } .list-skeleton-row:nth-child(3) { width: 100%; } .list-skeleton-row:nth-child(4) { width: 92%; } .list-skeleton-row:nth-child(5) { width: 98%; } /* ============================================================ DataGrid — empty state ============================================================ */ .b-table-empty-row td, .table tbody tr.b-table-empty-row td { text-align: center; color: var(--color-text-faint); padding: 40px 16px !important; font-size: var(--font-base); border: none !important; } /* ============================================================ Edit pages — flatten inner tab-panel cards ============================================================ */ .tab-content .tab-pane .card { border: none; box-shadow: none; background: transparent; } .tab-content .tab-pane .card .card-body { padding: 0 0 8px 0; } /* Section cards that have a CardHeader — show a subtle label rule */ .tab-content .tab-pane .card .card-header { background: transparent; border: none; border-bottom: 1px solid var(--color-border); padding: 4px 0 8px 0; } .tab-content .tab-pane .card .card-header .card-title { font-size: var(--font-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-wider); color: var(--color-text-muted); } /* ============================================================ Edit pages — sticky action bar ============================================================ */ .edit-actions-sticky { position: sticky; bottom: 0; z-index: 20; background: var(--color-surface); border-top: 1px solid var(--color-border-strong); box-shadow: var(--shadow-sticky); padding: 14px 24px; display: flex; gap: 8px; align-items: center; margin-top: 16px; } /* ============================================================ Generation tray (top bar) ============================================================ */ /* Search + tray live in one flex row we control (the Blazorise bar's own start/end groups stack on this layout), so placement is independent of it. */ .b-layout-header .topbar-row, .b-layout-header .topbar-row .b-bar-item { width: 100%; flex: 1 1 auto; } .topbar-row-inner { display: flex; align-items: center; width: 100%; } .topbar-tray { margin-left: auto; margin-right: 24px; position: relative; } /* The tray dropdown must float as an overlay, not sit in flow (which would stretch the flex row and grow the whole header when opened). */ .topbar-tray .dropdown-menu { position: absolute !important; top: calc(100% + 6px); right: 0; left: auto !important; z-index: 1100; } /* Subtle borderless icon button instead of the default white btn-light box. */ .gen-tray-toggle.btn, .gen-tray-toggle.btn:active, .gen-tray-toggle.btn:focus { position: relative; background: transparent !important; border: none !important; box-shadow: none !important; color: var(--color-text-header) !important; padding: 4px 8px; font-size: 1.15rem; line-height: 1; } .gen-tray-toggle.btn:hover { color: var(--color-brand) !important; } /* Hide Bootstrap's dropdown caret - the cloud icon is the affordance. */ .gen-tray-toggle.dropdown-toggle::after { display: none; } .gen-tray-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #16a34a; color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; } /* ============================================================ Edit pages — generating indicator ============================================================ */ .generating-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-base); font-weight: var(--weight-medium); color: var(--color-brand); margin-left: auto; } .generating-indicator .spinner-border { width: 1rem; height: 1rem; border-width: 2px; color: var(--color-brand); } /* ============================================================ Edit pages — breadcrumb ============================================================ */ .edit-breadcrumb { font-size: var(--font-base); margin-top: 14px; margin-bottom: 10px; } .edit-breadcrumb a { color: var(--color-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } .edit-breadcrumb a:hover { color: var(--color-brand); } /* ============================================================ Typography ============================================================ */ h1, h2, h3, h4, h5, h6 { color: var(--color-text); letter-spacing: var(--letter-tight); line-height: var(--line-tight); font-weight: var(--weight-semibold); } /* Page-level headings — all non-dashboard pages use , which renders as h4. Match the Dashboard heading style. */ .b-layout-content h4 { font-size: var(--font-xl); } /* ============================================================ Cards ============================================================ */ .card { background-color: var(--color-surface); border-color: var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); } .card-header { background-color: transparent; border-bottom-color: var(--color-border); padding: 10px 16px; } .card-title { font-size: var(--font-lg); font-weight: var(--weight-semibold); color: var(--color-text); margin: 0; } /* ============================================================ Tabs ============================================================ */ .nav-tabs { border-bottom-color: var(--color-border); gap: 2px; flex-wrap: wrap; } .nav-tabs .nav-link { font-size: var(--font-base); font-weight: var(--weight-medium); color: var(--color-text-muted); border-radius: var(--radius-md) var(--radius-md) 0 0; padding: 7px 14px; border-color: transparent; white-space: nowrap; transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); } .nav-tabs .nav-link:hover { color: var(--color-brand); background-color: var(--color-surface-subtle); border-color: transparent; } .nav-tabs .nav-link.active { color: var(--color-brand); font-weight: var(--weight-semibold); background-color: var(--color-surface); border-color: var(--color-border) var(--color-border) var(--color-surface); } /* ============================================================ Form fields ============================================================ */ .b-field-label, .form-label, label.form-label, label.b-field-label { font-size: var(--font-base); font-weight: var(--weight-medium); color: var(--color-text-label) !important; margin-bottom: 4px; } .form-control, .form-select { border-radius: var(--radius-md); border-color: var(--color-border-input); font-size: var(--font-md); color: var(--color-text-input); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-control:focus, .form-select:focus { border-color: var(--color-brand); box-shadow: var(--ring-brand-soft); } .form-control::placeholder, input.form-control::placeholder, .form-select::placeholder { color: var(--color-text-placeholder) !important; opacity: 1; } /* Bootstrap floating labels keep the placeholder transparent (the label sits in its place). The !important rule above otherwise re-shows the placeholder, so it collides with the floating label - re-assert transparency for form-floating inputs (more specific + !important, so it wins). Fixes the /Account/* management fields. */ .form-floating > .form-control::placeholder, .form-floating > input.form-control::placeholder { color: transparent !important; } /* ============================================================ Buttons ============================================================ */ .btn { border-radius: var(--radius-md); font-size: var(--font-md); font-weight: var(--weight-medium); transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } /* Tactile press feedback on real button clicks (only when not disabled). Cancel the transition during press so it feels snappy. */ .btn:not(:disabled):active { transform: translateY(1px); transition-duration: 0s; } .btn-secondary { background-color: var(--color-surface-subtle); border-color: var(--color-border-strong); color: var(--color-text-header); } .btn-secondary:hover { background-color: var(--color-border-strong); border-color: #cbd5e1; color: var(--color-text-strong); } /* ============================================================ DataGrid / Tables ============================================================ */ .b-table { font-size: var(--font-base); } .b-table thead th { font-size: var(--font-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-wide); color: var(--color-text-muted); background-color: var(--color-surface-app); border-bottom: 1px solid var(--color-border) !important; padding: 8px 12px; } .b-table tbody td { padding: 8px 12px; color: var(--color-text-strong); border-bottom-color: var(--color-surface-subtle) !important; vertical-align: middle; } .b-table tbody tr:hover td { background-color: var(--color-surface-app); } .cell-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* Muted product list shown under a tested-system description in the grids. Wraps freely to as many lines as needed so full product names are visible (no ellipsis). Normal wrapping (not white-space:nowrap) means it never widens the table / forces a horizontal scrollbar. Colour is theme-aware for contrast. */ .ts-products-line { color: var(--color-text-subtle); font-size: 12px; margin-top: 3px; white-space: normal; overflow-wrap: anywhere; } .page-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 16px 0 12px 0; } .page-title-row h4 { margin: 0; } .topbar-search { flex: 1 1 auto; max-width: 480px; min-width: 240px; margin-left: 24px; } .topbar-search .global-search-box .autocomplete, .topbar-search .global-search-box { width: 100%; position: relative; } .topbar-search .global-search-box input { background-color: var(--color-surface); border-color: #cbd5e1; } .topbar-search .global-search-box input:focus { background-color: var(--color-surface); border-color: var(--color-brand); box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.15); } /* Suggestions dropdown: at least the input width, but allowed to grow wider for legibility */ .topbar-search .global-search-box .dropdown-menu { min-width: 100%; width: max-content; max-width: min(640px, calc(100vw - 32px)); overflow-x: hidden; } .topbar-search .global-search-box .dropdown-menu .dropdown-item { overflow: hidden; } /* Allow flex children to shrink so the inner ellipsis works */ .topbar-search .global-search-box .dropdown-menu .dropdown-item > div, .topbar-search .global-search-box .dropdown-menu .dropdown-item > div > div { min-width: 0; } /* Truncate any long line inside each suggestion row */ .topbar-search .global-search-box .dropdown-menu .dropdown-item small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Product category chip filter bar (Tested Product Library) */ .category-chip-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .category-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--font-base); font-weight: var(--weight-medium); color: var(--color-text-muted); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .category-chip:hover { border-color: var(--chip-color, var(--color-text-faint)); color: var(--chip-color, var(--color-text-muted)); } .category-chip.active { background: var(--chip-color, var(--color-text-muted)); border-color: var(--chip-color, var(--color-text-muted)); color: #fff; } .category-chip.active .chip-dot { background: #fff; } .chip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--chip-color, var(--color-text-faint)); flex: 0 0 auto; } .category-count { font-size: var(--font-xs); color: inherit; opacity: 0.75; margin-left: 2px; } /* Per-row category badge inside the grid */ .category-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--color-surface-subtle); color: var(--chip-color, var(--color-text-muted)); font-size: var(--font-sm); font-weight: var(--weight-semibold); border: 1px solid var(--color-border-strong); white-space: nowrap; } /* ============================================================ Status text — inline status indicator with icon + label (CardHeader: Ready / N incomplete / Saved h:mm tt) ============================================================ */ .status-text { display: inline-flex; align-items: center; font-size: var(--font-sm); font-weight: var(--weight-medium); color: var(--color-text-subtle); } .status-text--success { color: var(--color-success); } .status-text--warning { color: var(--color-warning-strong); } .status-text--muted { color: var(--color-text-subtle); font-weight: var(--weight-normal); } /* Inline parent-project link inside a report edit card header */ .parent-project-link { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; padding: 2px 8px; font-size: var(--font-sm); font-weight: var(--weight-medium); color: var(--color-brand); text-decoration: none; border-radius: var(--radius-md); transition: background-color var(--transition-fast); } .parent-project-link:hover { background-color: var(--color-surface-subtle); color: var(--color-brand-hover); text-decoration: none; } .parent-project-link i { font-size: 12px; } /* ============================================================ Type pill — coloured badge identifying the report/project type in edit page headers, paired with a coloured left bar on the card ============================================================ */ .type-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: #fff; white-space: nowrap; line-height: 1.2; margin-right: 10px; vertical-align: middle; } .type-pill i { font-size: 0.9em; } /* Per-attribute mismatch indicator (TestedSystemEditForm). Sits beside the FieldLabel text and shows a tooltip explaining the baseline requirement. */ .field-mismatch-icon { color: #dc3545; margin-left: 6px; font-size: 0.9em; cursor: help; } /* Summary strip at the top of a section listing all attributes that don't match the baseline. Each pill is one mismatched attribute. */ .section-mismatch-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px 0; padding: 10px 14px; background-color: rgba(220, 53, 69, 0.08); border: 1px solid rgba(220, 53, 69, 0.3); border-radius: 6px; font-size: 0.85rem; } .section-mismatch-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #dc3545; margin-right: 4px; } .section-mismatch-pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; background-color: var(--color-surface); border: 1px solid rgba(220, 53, 69, 0.35); border-radius: 999px; color: #dc3545; font-weight: 500; line-height: 1.3; } .section-mismatch-pill .pill-req { color: var(--color-text-muted); font-weight: 400; } /* Baseline match-count badge on each system row (FacadeEdit systems list). Shows "X/Y" where X = matched attributes, Y = baseline-specified attributes. */ .baseline-score { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; } .baseline-score--full { color: var(--color-success); } .baseline-score--partial { color: #dc3545; } /* ============================================================ Facade comparison grid - attribute rows x system columns ============================================================ */ .compare-toolbar { margin-bottom: 12px; } .compare-grid-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 8px; } .compare-grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.875rem; } .compare-grid th, .compare-grid td { padding: 8px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--color-border); } .compare-grid thead th { background: var(--color-surface-subtle); font-weight: 600; position: sticky; top: 0; z-index: 2; } /* Sticky first two columns so Attribute + Baseline stay visible while scrolling systems */ .compare-attr-col { position: sticky; left: 0; width: 190px; min-width: 190px; background: var(--color-surface); font-weight: 600; z-index: 1; } .compare-baseline-col { position: sticky; left: 190px; width: 150px; min-width: 150px; background: var(--color-surface-subtle); font-weight: 500; box-shadow: 1px 0 0 var(--color-border); } .compare-grid thead .compare-attr-col, .compare-grid thead .compare-baseline-col { z-index: 3; } .compare-sys-col { min-width: 110px; } .compare-score-row td { background: var(--color-surface-emphasis); font-weight: 700; } .compare-cell--ok { color: var(--color-success); } .compare-cell--fail { color: #dc3545; font-weight: 600; } /* Identity rows (Reference ID, Description) at the top of the compare grid - not baseline comparisons, so neutral weight and allowed to wrap (Description can be long) within a capped width instead of the default nowrap. */ .compare-grid td.compare-meta-cell { white-space: normal; overflow-wrap: anywhere; max-width: 240px; vertical-align: top; font-weight: 400; } .page-title-with-pill { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ============================================================ Empty state — unified "no results" pattern ============================================================ */ .empty-state { text-align: center; color: var(--color-text-faint); font-size: var(--font-base); padding: 24px 16px; line-height: var(--line-relaxed); } /* ============================================================ Form-field primitives ------------------------------------------------------------ .field-required — add to a FieldLabel to append a red * .field-error — apply to a FieldLabel when validation fails (turns label and the * red) .field-help — small helper text shown below an input .field-error-message — validation feedback shown below an input ============================================================ */ .field-required::after { content: " *"; color: var(--color-danger); font-weight: var(--weight-semibold); } .field-error, .field-error.field-required::after { color: var(--color-danger); } .field-help { display: block; margin-top: 2px; font-size: var(--font-sm); color: var(--color-text-faint); line-height: var(--line-snug); } .field-error-message { display: block; margin-top: 2px; font-size: var(--font-sm); color: var(--color-danger); line-height: var(--line-snug); } /* ============================================================ System Editor side-nav layout - Used on the Facade Report Tested Systems tab to navigate between sections of the selected system without nested accordions or tabs. - Desktop (>= 992px): vertical rail on the left, content on the right. - Below 992px: horizontal scrollable strip stacked above the content so the form stays usable on narrow screens. ============================================================ */ .system-editor { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1.5rem; align-items: start; } .system-editor-nav { display: flex; flex-direction: column; gap: 2px; padding: 0.25rem; background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); position: sticky; top: 1rem; } .system-editor-nav-item { appearance: none; background: transparent; border: 0; border-radius: var(--radius-sm); padding: 0.45rem 0.75rem; text-align: left; font-size: var(--font-sm); color: var(--color-text-label); cursor: pointer; line-height: var(--line-snug); white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .system-editor-nav-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .system-editor-nav-item-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); box-shadow: 0 0 0 2px var(--color-surface-subtle); } .system-editor-nav-item.active .system-editor-nav-item-dot { /* Keep the dot legible on the brand-blue active background. */ box-shadow: 0 0 0 2px var(--color-brand); } .system-editor-nav-item:hover { background: var(--color-surface); color: var(--color-text-strong); } .system-editor-nav-item:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 1px; } .system-editor-nav-item.active { background: var(--color-brand); color: var(--color-text-on-brand); font-weight: var(--weight-semibold); } .system-editor-nav-item.active:hover { background: var(--color-brand-hover); color: var(--color-text-on-brand); } .system-editor-nav-divider { height: 1px; margin: 0.4rem 0.25rem; background: var(--color-border-strong); } .system-editor-content { min-width: 0; } @media (max-width: 991.98px) { .system-editor { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .system-editor-nav { flex-direction: row; overflow-x: auto; position: static; padding: 0.25rem; gap: 0.25rem; -webkit-overflow-scrolling: touch; } .system-editor-nav-item { flex: 0 0 auto; } .system-editor-nav-divider { width: 1px; height: auto; margin: 0.25rem 0.25rem; align-self: stretch; } } /* ---- Project command center ---- */ .cc-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--font-md); min-width: 0; } .cc-identity__sep { color: var(--color-text-muted); } /* Shared column template so the header row and every data row line up. */ .cc-table { --cc-cols: 150px 110px 185px 110px 76px 1fr; } .cc-head { display: grid; grid-template-columns: var(--cc-cols); align-items: center; column-gap: 12px; padding: 0 8px 8px; border-bottom: 1px solid var(--color-border); } .cc-head > span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; color: var(--color-text-faint); white-space: nowrap; } .cc-rows { display: flex; flex-direction: column; } /* Fixed-column grid so type / issue / status / owner / modified line up vertically across every row (a per-row auto grid would size independently). */ .cc-row { display: grid; grid-template-columns: var(--cc-cols); align-items: center; column-gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--color-border); min-height: 48px; } .cc-row:last-child { border-bottom: none; } /* Report type doubles as a link to that report's editor (the Open button stays too). */ .cc-row__type { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; color: var(--color-text); text-decoration: none; } .cc-row__type:hover { color: var(--color-brand); } /* Underline only the label text on hover - not the type icon (an underline on the anchor would run under the icon too). */ .cc-row__type:hover .cc-row__type-label { text-decoration: underline; } .cc-row__issue, .cc-row__owner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-sm); } .cc-row__issue { color: var(--color-text-muted); } .cc-row__owner { color: var(--color-text); } .cc-row__when { font-size: var(--font-sm); color: var(--color-text-muted); white-space: nowrap; } /* Actions split into a left-anchored main group (Open + Generate) and a right-pinned destructive group, so "Open" lands in the same place on every row and Delete is visually separated from the safe actions. */ .cc-row__actions { display: flex; align-items: center; gap: 8px; width: 100%; } .cc-row__actions-main { display: flex; align-items: center; gap: 8px; min-width: 0; } .cc-row__actions-danger { margin-left: auto; padding-left: 12px; border-left: 1px solid var(--color-border); } .cc-row__placeholder { color: var(--color-text-faint); } /* MissingFieldsBadge carries a start margin for inline use on edit-page headers; inside the grid cell it should sit flush so it lines up under the Status header. */ .cc-row__badge .status-text { margin-left: 0 !important; }