/* ============================================================ 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; } /* ============================================================ Certificate run - stage indicator (Examen) ============================================================ */ .run-stages { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0 2px; } .run-stage { display: flex; align-items: center; gap: 8px; } .run-stage-marker { width: 28px; height: 28px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; font-size: var(--font-sm); font-weight: var(--weight-semibold, 600); background: var(--color-surface-emphasis); color: var(--color-text-subtle); border: 1px solid var(--color-border-strong); flex: 0 0 auto; } .run-stage.done .run-stage-marker { background: var(--color-success); border-color: var(--color-success); color: var(--color-text-on-brand); } .run-stage.current .run-stage-marker { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-text-on-brand); } .run-stage-label { font-size: var(--font-base); color: var(--color-text-subtle); white-space: nowrap; } .run-stage.done .run-stage-label { color: var(--color-text-muted); } .run-stage.current .run-stage-label { color: var(--color-text-strong); font-weight: var(--weight-semibold, 600); } .run-stage-connector { flex: 0 0 22px; height: 2px; background: var(--color-border-strong); border-radius: 1px; } .run-stage-connector.done { background: var(--color-success); } /* ---- PDF.js consent viewer ---- */ .pdf-viewer-host { height: 85vh; overflow: auto; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface-subtle); padding: 8px 0; } .pdf-viewer-page { margin: 12px auto; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } .pdf-viewer-page canvas { display: block; } /* Two-line truncation for long grid text; full text via title tooltip. */ .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Disabled controls must read as disabled - the ported button styles set their own backgrounds, which overrode Bootstrap's dimming. */ .btn:disabled, .btn.disabled, fieldset:disabled .btn { opacity: .5; cursor: not-allowed; box-shadow: none; } /* ---- Bulk evidence modal ---- */ .bulk-pane { display: flex; flex-direction: column; min-height: 0; } .bulk-pane-divided { border-left: 1px solid var(--color-border); padding-left: 1.5rem; } @media (max-width: 991.98px) { .bulk-pane-divided { border-left: none; padding-left: 0; } } .bulk-pane-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--color-border); } .bulk-pane-title { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-faint); margin-right: auto; } .bulk-list { overflow-y: auto; max-height: 52vh; margin-top: .15rem; } .bulk-row { display: flex; align-items: flex-start; gap: .7rem; padding: .6rem .35rem; border-bottom: 1px solid var(--color-border); border-radius: 3px; } .bulk-row:last-child { border-bottom: none; } .bulk-row:hover { background: var(--color-surface-subtle); } .bulk-row.is-selected { background: color-mix(in srgb, var(--color-brand) 8%, transparent); } .bulk-row .form-check { margin: .1rem 0 0; } .bulk-row-body { flex: 1 1 auto; min-width: 0; } .bulk-row-title { display: block; line-height: 1.35; } .bulk-meta { display: block; font-size: .8rem; color: var(--color-text-faint); margin-top: .12rem; } .bulk-count { flex: none; font-size: .82rem; white-space: nowrap; padding-top: .1rem; } /* Wider than Blazorise's ExtraLarge: this screen is a working surface. */ .modal .modal-dialog.bulk-dialog { max-width: min(1240px, 94vw); } /* Snackbar messages carry document names and counts - they must wrap rather than run off the edge. */ .snackbar { max-width: min(560px, 92vw); } /* Blazorise's own snackbar stylesheet loads after this one and sets nowrap + ellipsis on .snackbar-body, so these need the extra specificity to win. */ .snackbar .snackbar-body, .snackbar-stack .snackbar-body { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.4; } /* The browser owns a file input's "No file chosen" text and it cannot be rewritten - it goes stale the moment the input is read and reset, sitting beside the app's own line saying which file it has. Every FileEdit here reports its selection itself, so the native text is hidden rather than left to contradict it. The Choose file button keeps its own colour. */ input[type="file"] { color: transparent; } /* The overview strip: the numbers are the links, so they wear the link colour and answer on hover - a link dressed as body text is a link nobody finds. */ .stat-link { text-decoration: none; } .stat-link .stat-number { font-size: 1.9rem; font-weight: 600; color: var(--bs-primary); } .stat-link:hover .stat-number { text-decoration: underline; }