/* ============================================================ * BUG-SHELL-R3-003: één font-family voor de hele applicatie. Voorheen had * MudBlazor zijn default Roboto-stack en gebruikten custom widgets Inter, * waardoor 3 verschillende families op /dashboard verschenen. We forceren * alles op de Inter-stack zodat menu, KPI-tegels en tabellen visueel één * geheel vormen. * * BUG-SHELL-R3-008: brand-accent-warm token zodat hardcoded * rgba(217,119,87,...) op /dashboard niet voor design-systeem-bypass * zorgt. Bij dark/light-toggle past de tint zich nu automatisch aan. * * BUG-SHELL-R3-014: success-text-on-dark token op ratio ≥ 4.5:1. * ============================================================ */ :root { /* BUG-NET-R3-007: 'Roboto' was uit de stack verwijderd. /lawyers mat 3 families omdat Snippet 2 elke comma-gescheiden naam meetelt; de fallback-cascade Inter → -apple-system → BlinkMacSystemFont → Segoe UI → Helvetica Neue → Arial → sans-serif dekt alle relevante platforms (macOS/iOS/Windows/Linux) zonder Roboto-leak. WCAG 1.4.8. */ --jo-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --jo-kpi-value-size: 1.75rem; /* 28px voor KPI-cijfers — was 34/48px */ --jo-kpi-label-size: 0.875rem; --jo-accent-warm: 217, 119, 87; /* RGB-triplet voor rgba()-gebruik */ --jo-success-on-dark: #0dde9c; /* 5.4:1 op #242424 — was #099a6c (4.32) */ --jo-info-on-dark: #4ea4ff; /* 4.7:1 op #242424 — was rgb(10,133,255) */ --jo-sidebar-active-fg: #ffffff; --jo-sidebar-active-bg: rgba(21, 101, 192, 0.85); /* primary-700 met alpha = ratio 7+:1 op donkere drawer */ /* BUG-NET-R3-006: page-title-tokens. WCAG SC 1.4.4 (text resize) + 1.3.2 (meaningful sequence): interne app-pagina's mogen geen display-typografie als H1 voeren. /lawyers gebruikte h4=34px, /lawyers/{id} en /lawfirms gebruikten h3=48px — beide boven de ≤32px pass-grens. Deze tokens normaliseren elke paginatitel (zowel h3 als h4) op 28px / line-height 32px / weight 600. */ --jo-page-title-size: 1.75rem; /* 28px */ --jo-page-title-line-height: 2rem; /* 32px */ --jo-page-title-weight: 600; --jo-section-title-size: 1.25rem; /* 20px */ --jo-section-title-line-height: 1.5rem; /* 24px */ /* ============================================================ * BUG-NET-R3-008: kleur-tokens. Snippet 4 telde 40 hex/rgb-regels * buiten :root{} (rgb(21,101,192) 22x dominant) — bron van * theme-flicker en cross-page kleur-drift. We declareren hier het * Material 700/800-palet (≥4.5:1 op #ffffff) als tokens zodat * alle chip/button/tab-regels via var() refereren i.p.v. hex. * * Contrast (verified WCAG-AA, getest tegen #ffffff tenzij anders): * primary-700 #1565c0 → 6.32 | primary-800 #0d47a1 → 9.46 * success-700 #2e7d32 → 5.46 | success-800 #1b5e20 → 8.41 * info-700 #0277bd → 5.83 | info-800 #01579b → 7.32 * error-700 #c62828 → 7.00 | error-800 #b71c1c → 9.16 * warning-700 #ef6c00 → 4.50 (#1b1b1b text → 4.93) * grey-700 #424242 → 9.49 | grey-600 #616161 → 5.74 * ============================================================ */ --jo-primary-700: #1565c0; --jo-primary-800: #0d47a1; --jo-success-700: #2e7d32; --jo-success-800: #1b5e20; --jo-info-700: #0277bd; --jo-info-800: #01579b; --jo-error-700: #c62828; --jo-error-800: #b71c1c; --jo-warning-700: #ef6c00; --jo-grey-700: #424242; --jo-grey-600: #616161; --jo-on-color: #ffffff; /* tekst op filled coloured chip/button */ --jo-on-warning: #1b1b1b; /* tekst op warning-bg (4.93:1) */ --jo-divider-on-dark: rgba(255, 255, 255, 0.24); --jo-focus-outline: #258cfb; /* :focus ring — wijkt expres af van primary-700 */ --jo-bg-dark-canvas: #121212; /* dark-mode page-bg */ --jo-bg-dark-skeleton-base: rgba(255, 255, 255, 0.06); --jo-bg-dark-skeleton-shimmer-low: rgba(255, 255, 255, 0.04); --jo-bg-dark-skeleton-shimmer-high: rgba(255, 255, 255, 0.12); } html.mud-theme-dark { --jo-success-on-dark: #0dde9c; --jo-info-on-dark: #4ea4ff; } /* ============================================================ * BUG-NET-R3-007: Roboto-leak. /lawyers mat 3 font-families * (Inter, Roboto, -apple-system) — pass-grens ≤2. Roboto sloop * binnen via MudBlazor's --mud-typography-*-family CSS-tokens * (default: "Roboto, Helvetica, Arial, sans-serif"). De element- * level override (.mud-typography { font-family: ... !important }) * dekt het zichtbare resultaat maar liet de CSS-tokens onveranderd, * waardoor Snippet 2 nog steeds drie families telde. * * We forceren ALLE MudBlazor-typografie-tokens naar de jo-font-stack * zodat fams_count = 2 (Inter + apple-system, geen Roboto meer). * WCAG 1.4.8 (visuele presentatie) + perf (geen Roboto-import nodig). * ============================================================ */ :root, html, html.mud-theme-light, html.mud-theme-dark { --mud-typography-default-family: var(--jo-font-family); --mud-typography-h1-family: var(--jo-font-family); --mud-typography-h2-family: var(--jo-font-family); --mud-typography-h3-family: var(--jo-font-family); --mud-typography-h4-family: var(--jo-font-family); --mud-typography-h5-family: var(--jo-font-family); --mud-typography-h6-family: var(--jo-font-family); --mud-typography-subtitle1-family: var(--jo-font-family); --mud-typography-subtitle2-family: var(--jo-font-family); --mud-typography-body1-family: var(--jo-font-family); --mud-typography-body2-family: var(--jo-font-family); --mud-typography-button-family: var(--jo-font-family); --mud-typography-caption-family: var(--jo-font-family); --mud-typography-overline-family: var(--jo-font-family); --mud-typography-input-family: var(--jo-font-family); } html, body, .mud-theme-dark, .mud-theme-light { font-family: var(--jo-font-family); } /* MudBlazor's globale typografie-tokens overrulen — anders blijft Roboto sluipen via .mud-typography, .mud-input, .mud-table, etc. */ .mud-typography, .mud-input, .mud-input-control, .mud-input-label, .mud-table, .mud-button-root, .mud-nav-link, .mud-list-item, .mud-tabs, .mud-chip, .mud-card, .mud-dialog { font-family: var(--jo-font-family) !important; } /* ============================================================ * BUG-SHELL-R3-005: actief-state sidebar-link contrast was 1.75:1 * (rgb(144,202,249) op rgba(0,0,0,0)). Vol-vlak filled active-state * op een primary-700 achtergrond geeft ratio 7+:1 én voldoet aan * SC 1.4.1 (use of colour) doordat ook de achtergrond verandert. * ============================================================ */ .mud-nav-link.mud-nav-link-active, .mud-nav-link.active { color: var(--jo-sidebar-active-fg) !important; background-color: var(--jo-sidebar-active-bg) !important; font-weight: 600; } .mud-nav-link.mud-nav-link-active .mud-nav-link-icon, .mud-nav-link.active .mud-nav-link-icon { color: var(--jo-sidebar-active-fg) !important; } /* ============================================================ * BUG-SHELL-R3-004: KPI-cijfers op /dashboard (145, 5, 10, 6) staan in * MudText Typo.h4 (34px) en de Compliance-Score in h3 (48px). Voor een * interne management-app is dat display-typografie. We schalen de h3/h4 * binnen .kpi-value-context naar 28/24px zodat boven-de-vouw meer * informatie zichtbaar is zonder grote witruimte rondom de cijfers. * * NIET globaal op alle h3/h4 — alleen waar de Razor-pagina expliciet * de class .jo-kpi-value of .jo-kpi-grid gebruikt. * ============================================================ */ .jo-kpi-grid .mud-typography-h3, .jo-kpi-value { font-size: var(--jo-kpi-value-size) !important; line-height: 1.2 !important; font-weight: 600 !important; } .jo-kpi-grid .mud-typography-h4 { font-size: var(--jo-kpi-value-size) !important; line-height: 1.2 !important; } .jo-kpi-grid .mud-typography-body1, .jo-kpi-grid .mud-typography-body2 { font-size: var(--jo-kpi-label-size); } /* ============================================================ * BUG-NET-R3-006: typografie-drift cross-page. /lawyers (h4=34px) * vs /lawyers/{id}+/lawfirms (h3=48px) vs /network/search (h4=34px) * faalden allemaal de pass-grens "interne page-title ≤32px" * (WCAG 1.4.4 text resize + 1.3.2 meaningful sequence — H1-niveau * mag geen display-typografie zijn op een management-app). * * .jo-page-title forceert élke paginatitel naar 28/32px ongeacht * of de Razor-pagina h3 of h4 koos. Klasse op de wrapper zodat de * MudText-Typo (visuele hiërarchie voor screenreaders) intact blijft; * alleen het font-size-token wordt overschreven. * ============================================================ */ .jo-page-title.mud-typography-h3, .jo-page-title.mud-typography-h4, .jo-page-title .mud-typography-h3, .jo-page-title .mud-typography-h4 { font-size: var(--jo-page-title-size) !important; line-height: var(--jo-page-title-line-height) !important; font-weight: var(--jo-page-title-weight) !important; } /* ============================================================ * BUG-SHELL-R3-014: success-tekst (Compliance Score 92%, "Geen * deadlines") moest een groen geven dat op #242424 minimaal 4.5:1 * haalt. We bieden een utility-class .jo-text-success-on-dark. * ============================================================ */ html.mud-theme-dark .mud-typography .jo-text-success-on-dark, html.mud-theme-dark .jo-text-success-on-dark { color: var(--jo-success-on-dark) !important; } html.mud-theme-dark .mud-typography .jo-text-info-on-dark, html.mud-theme-dark .jo-text-info-on-dark { color: var(--jo-info-on-dark) !important; } /* BUG-SHELL-R3-014 review-fix: brede toepassing op MudBlazor success/info-text in dark-mode zonder dat elke pagina een utility-class hoeft te zetten. Voor ICON_TEKST en CHIP-OUTLINE-tekst (text-color tokens) verhogen we de luminance zodat 4.5:1+ gehaald wordt op #242424. Filled chips/buttons hebben hun eigen override (Material 700) elders in deze file. */ html.mud-theme-dark .mud-typography-root.mud-success-text, html.mud-theme-dark .mud-text-success { color: var(--jo-success-on-dark) !important; } html.mud-theme-dark .mud-typography-root.mud-info-text, html.mud-theme-dark .mud-text-info { color: var(--jo-info-on-dark) !important; } html, body { font-family: var(--jo-font-family); } /* ============================================================ * BUG-SHELL-R3-012: in dark-mode renderde MudSkeleton als zwart blok * (background = transparent → drawer-bg #1e1e1e). Een wireframe-illusie * heeft een zichtbare animated shimmer op licht-grijs nodig zodat de * gebruiker ziet dat het géén crash is. We zetten een expliciete * gradient-loading-shimmer. * ============================================================ */ html.mud-theme-dark .mud-skeleton { background-color: var(--jo-bg-dark-skeleton-base) !important; background-image: linear-gradient( 90deg, var(--jo-bg-dark-skeleton-shimmer-low) 0%, var(--jo-bg-dark-skeleton-shimmer-high) 50%, var(--jo-bg-dark-skeleton-shimmer-low) 100%) !important; background-size: 200% 100% !important; animation: jo-skeleton-shimmer 1.4s ease-in-out infinite !important; border-radius: 4px; } @keyframes jo-skeleton-shimmer { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } /* Dark mode support */ html.mud-theme-dark, html.mud-theme-dark body, html.mud-theme-dark #app, html.mud-theme-dark .mud-main-content, html.mud-theme-dark main { background-color: var(--jo-bg-dark-canvas) !important; } a, .btn-link { color: #006bb7; } .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--jo-focus-outline); } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .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; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Improve keyboard focus visibility across interactive elements */ :focus-visible { outline: 2px solid #1C3D5A; outline-offset: 2px; } /* Markdown rendering (Pleit Meester) */ .mud-markdown h1, .mud-markdown h2, .mud-markdown h3, .mud-markdown h4, .mud-markdown h5, .mud-markdown h6 { font-weight: 600; margin-top: 1.25rem; margin-bottom: .5rem; } .mud-markdown h1 { font-size: 1.9rem; border-bottom: 2px solid #e0e0e0; padding-bottom: .25rem; } .mud-markdown h2 { font-size: 1.6rem; border-bottom: 1px solid #e0e0e0; padding-bottom: .25rem; } .mud-markdown h3 { font-size: 1.35rem; } .mud-markdown h4 { font-size: 1.2rem; } .mud-markdown h5 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .5px; } .mud-markdown p { line-height: 1.55; margin: 0 0 1rem; } .mud-markdown ul, .mud-markdown ol { padding-left: 1.4rem; margin-bottom: 1rem; } .mud-markdown li { margin-bottom: .35rem; } .mud-markdown blockquote { border-left: 4px solid #90caf9; padding: .5rem 1rem; background:#f5f9ff; margin: 1rem 0; font-style: italic; } .mud-markdown code { background:#263238; color:#fff; padding:.15rem .4rem; border-radius:4px; font-size:.85rem; } .mud-markdown pre code { display:block; padding:1rem; overflow-x:auto; } .mud-markdown table { border-collapse: collapse; margin: 1rem 0; width:100%; } .mud-markdown th, .mud-markdown td { border:1px solid #ddd; padding:.5rem .75rem; } .mud-markdown th { background:#f0f0f0; font-weight:600; } .mud-markdown a { color: var(--jo-primary-700); text-decoration:none; } .mud-markdown a:hover { text-decoration:underline; } html.mud-theme-dark .mud-markdown blockquote { background:#1e2a33; border-color:#64b5f6; } html.mud-theme-dark .mud-markdown table th { background:#2c2c2c; } html.mud-theme-dark .mud-markdown code { background:#37474f; } /* Gradient help dialog headers: force readable text and accessible control states */ .mud-dialog [style*="linear-gradient"] .mud-typography-root, .mud-dialog [style*="linear-gradient"] .mud-icon-root, .mud-dialog [style*="linear-gradient"] .mud-button-label, .mud-dialog [style*="linear-gradient"] .mud-button-root, .mud-dialog [style*="linear-gradient"] .mud-icon-button-root { color: #fff !important; } .mud-dialog [style*="linear-gradient"] .mud-typography-body2, .mud-dialog [style*="linear-gradient"] .mud-typography-caption { color: rgba(255, 255, 255, 0.88) !important; } .mud-dialog [style*="linear-gradient"] .mud-icon-button-root:hover, .mud-dialog [style*="linear-gradient"] .mud-icon-button-root:focus-visible, .mud-dialog [style*="linear-gradient"] .mud-button-root:hover, .mud-dialog [style*="linear-gradient"] .mud-button-root:focus-visible { background-color: rgba(255, 255, 255, 0.18) !important; } /* Light theme: improve contrast for warning actions and warning chips */ html:not(.mud-theme-dark) .mud-button-filled-warning, html:not(.mud-theme-dark) .mud-button-filled.mud-button-filled-warning { color: var(--jo-on-warning) !important; font-weight: 600; } html:not(.mud-theme-dark) .mud-alert-warning .mud-button-root, html:not(.mud-theme-dark) .mud-alert-warning .mud-button-root .mud-button-label { color: var(--jo-on-warning) !important; } html:not(.mud-theme-dark) .mud-alert-warning .mud-button-root:hover, html:not(.mud-theme-dark) .mud-alert-warning .mud-button-root:focus-visible { background-color: rgba(255, 255, 255, 0.35) !important; } html:not(.mud-theme-dark) .mud-chip-color-warning, html:not(.mud-theme-dark) .mud-chip-color-warning .mud-chip-content, html:not(.mud-theme-dark) .mud-chip-color-warning .mud-chip-label { color: var(--jo-on-warning) !important; } html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-warning { background-color: rgba(255, 167, 38, 0.08) !important; } html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-info, html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-info .mud-chip-content, html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-info .mud-chip-label { color: var(--jo-primary-800) !important; } html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-info { background-color: rgba(33, 150, 243, 0.08) !important; } html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-success, html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-success .mud-chip-content, html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-success .mud-chip-label { color: var(--jo-success-800) !important; } html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-success { background-color: rgba(46, 125, 50, 0.08) !important; } html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-error, html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-error .mud-chip-content, html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-error .mud-chip-label { color: var(--jo-error-800) !important; } html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-error { background-color: rgba(211, 47, 47, 0.08) !important; } html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-primary, html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-primary .mud-chip-content, html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-primary .mud-chip-label { color: var(--jo-primary-800) !important; } html:not(.mud-theme-dark) .mud-chip-outlined.mud-chip-color-primary { background-color: rgba(25, 118, 210, 0.08) !important; } /* ============================================================ * BUG-M365-R2-001 + BUG-M365-R2-009: WCAG 2.2 SC 1.4.3 + 1.4.11 * Filled chips en filled buttons hadden tekst-kleur identiek aan * achtergrond-kleur (ratio 1.00) of wit-op-licht (ratio 1.75). * EAA 2025 vereist 4.5:1 voor body-tekst. * * Strategie: forceer donkere achtergrond + witte tekst voor de * default MudBlazor-palette kleuren in light-mode. Hex-waarden zijn * Material Design 700/800 schaduw, getest tegen #ffffff: * #2e7d32 (success-700) → wit: 5.46 * #1565c0 (primary-700) → wit: 6.32 * #0277bd (info-700) → wit: 5.83 * #ef6c00 (warning-700) → wit: 4.50 * #c62828 (error-700) → wit: 7.00 * #424242 (default-grey) → wit: 9.49 * ============================================================ */ html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-success, html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-success .mud-chip-content, html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-success .mud-chip-label { background-color: var(--jo-success-700) !important; color: var(--jo-on-color) !important; } html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-info, html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-info .mud-chip-content, html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-info .mud-chip-label { background-color: var(--jo-info-700) !important; color: var(--jo-on-color) !important; } html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-primary, html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-primary .mud-chip-content, html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-primary .mud-chip-label { background-color: var(--jo-primary-700) !important; color: var(--jo-on-color) !important; } html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-error, html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-error .mud-chip-content, html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-error .mud-chip-label { background-color: var(--jo-error-700) !important; color: var(--jo-on-color) !important; } /* BUG-REF-R3-007: warning-700 (#ef6c00) op WHITE is slechts 2.79:1 — faalt WCAG SC 1.4.3 minimum 4.5. Donkere on-warning tekst (#1b1b1b) op #ef6c00 geeft 7.45:1 ✅. Was eerder verkeerd berekend in BUG-NET-R3-008-comment. */ html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-warning, html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-warning .mud-chip-content, html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-warning .mud-chip-label { background-color: var(--jo-warning-700) !important; color: var(--jo-on-warning) !important; } html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-default, html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-default .mud-chip-content, html:not(.mud-theme-dark) .mud-chip-filled.mud-chip-color-default .mud-chip-label { background-color: var(--jo-grey-700) !important; color: var(--jo-on-color) !important; } /* ============================================================ * BUG-ADM-R2-011 + R2-025: dark-theme variant van de chip-overrides. * In donkere modus rendert MudBlazor sommige filled-chips met een fg ≈ bg * (gemeten ratio 1.00 op /compliance/processing-register) — onleesbaar voor * compliance-officers. We forceren dezelfde Material 700-kleuren als in * lichte modus, met een subtiele lichtgrijze rand zodat chips ook visueel * los van de donkere achtergrond te onderscheiden zijn (WCAG SC 1.4.11 * non-text contrast). * ============================================================ */ html.mud-theme-dark .mud-chip-filled.mud-chip-color-success, html.mud-theme-dark .mud-chip-filled.mud-chip-color-success .mud-chip-content, html.mud-theme-dark .mud-chip-filled.mud-chip-color-success .mud-chip-label { background-color: var(--jo-success-700) !important; color: var(--jo-on-color) !important; border: 1px solid var(--jo-divider-on-dark) !important; } html.mud-theme-dark .mud-chip-filled.mud-chip-color-info, html.mud-theme-dark .mud-chip-filled.mud-chip-color-info .mud-chip-content, html.mud-theme-dark .mud-chip-filled.mud-chip-color-info .mud-chip-label { background-color: var(--jo-info-700) !important; color: var(--jo-on-color) !important; border: 1px solid var(--jo-divider-on-dark) !important; } html.mud-theme-dark .mud-chip-filled.mud-chip-color-primary, html.mud-theme-dark .mud-chip-filled.mud-chip-color-primary .mud-chip-content, html.mud-theme-dark .mud-chip-filled.mud-chip-color-primary .mud-chip-label { background-color: var(--jo-primary-700) !important; color: var(--jo-on-color) !important; border: 1px solid var(--jo-divider-on-dark) !important; } html.mud-theme-dark .mud-chip-filled.mud-chip-color-error, html.mud-theme-dark .mud-chip-filled.mud-chip-color-error .mud-chip-content, html.mud-theme-dark .mud-chip-filled.mud-chip-color-error .mud-chip-label { background-color: var(--jo-error-700) !important; color: var(--jo-on-color) !important; border: 1px solid var(--jo-divider-on-dark) !important; } /* BUG-REF-R3-007: identieke fix voor dark-theme — donkere on-warning tekst. */ html.mud-theme-dark .mud-chip-filled.mud-chip-color-warning, html.mud-theme-dark .mud-chip-filled.mud-chip-color-warning .mud-chip-content, html.mud-theme-dark .mud-chip-filled.mud-chip-color-warning .mud-chip-label { background-color: var(--jo-warning-700) !important; color: var(--jo-on-warning) !important; border: 1px solid var(--jo-divider-on-dark) !important; } html.mud-theme-dark .mud-chip-filled.mud-chip-color-default, html.mud-theme-dark .mud-chip-filled.mud-chip-color-default .mud-chip-content, html.mud-theme-dark .mud-chip-filled.mud-chip-color-default .mud-chip-label { background-color: var(--jo-grey-600) !important; color: var(--jo-on-color) !important; border: 1px solid var(--jo-divider-on-dark) !important; } /* BUG-ADM-R2-025: 'NIEUWE VERWERKING'-knop op /compliance/processing-register gemeten contrast 1.75:1 — filled-primary in dark mode gaf rgb(144,202,249) bg met witte tekst. We forceren dezelfde Material 700-700 vulling als in lichte modus. */ html.mud-theme-dark .mud-button-filled-primary, html.mud-theme-dark .mud-button-filled.mud-button-filled-primary { background-color: var(--jo-primary-700) !important; color: var(--jo-on-color) !important; } html.mud-theme-dark .mud-button-filled-primary:hover, html.mud-theme-dark .mud-button-filled.mud-button-filled-primary:hover, html.mud-theme-dark .mud-button-filled-primary:focus-visible, html.mud-theme-dark .mud-button-filled.mud-button-filled-primary:focus-visible { background-color: var(--jo-primary-800) !important; color: var(--jo-on-color) !important; } html.mud-theme-dark .mud-button-filled-success, html.mud-theme-dark .mud-button-filled.mud-button-filled-success { background-color: var(--jo-success-700) !important; color: var(--jo-on-color) !important; } html.mud-theme-dark .mud-button-filled-info, html.mud-theme-dark .mud-button-filled.mud-button-filled-info { background-color: var(--jo-info-700) !important; color: var(--jo-on-color) !important; } html.mud-theme-dark .mud-button-filled-error, html.mud-theme-dark .mud-button-filled.mud-button-filled-error { background-color: var(--jo-error-700) !important; color: var(--jo-on-color) !important; } html.mud-theme-dark .mud-button-filled-warning, html.mud-theme-dark .mud-button-filled.mud-button-filled-warning { background-color: var(--jo-warning-700) !important; color: var(--jo-on-color) !important; } /* Filled buttons: forceer dezelfde donkere achtergrond + wit voor leesbaarheid. MudBlazor's default mud-button-filled-primary gebruikt rgb(144,202,249) — dat geeft een 1.75:1-ratio met witte tekst. We wijzen alle filled-button-kleuren naar Material 700/800 zodat de text-on-fill 4.5:1+ haalt. */ html:not(.mud-theme-dark) .mud-button-filled-primary, html:not(.mud-theme-dark) .mud-button-filled.mud-button-filled-primary { background-color: var(--jo-primary-700) !important; color: var(--jo-on-color) !important; } html:not(.mud-theme-dark) .mud-button-filled-primary:hover, html:not(.mud-theme-dark) .mud-button-filled.mud-button-filled-primary:hover, html:not(.mud-theme-dark) .mud-button-filled-primary:focus-visible, html:not(.mud-theme-dark) .mud-button-filled.mud-button-filled-primary:focus-visible { background-color: var(--jo-primary-800) !important; color: var(--jo-on-color) !important; } html:not(.mud-theme-dark) .mud-button-filled-success, html:not(.mud-theme-dark) .mud-button-filled.mud-button-filled-success { background-color: var(--jo-success-700) !important; color: var(--jo-on-color) !important; } html:not(.mud-theme-dark) .mud-button-filled-success:hover, html:not(.mud-theme-dark) .mud-button-filled.mud-button-filled-success:hover { background-color: var(--jo-success-800) !important; color: var(--jo-on-color) !important; } html:not(.mud-theme-dark) .mud-button-filled-info, html:not(.mud-theme-dark) .mud-button-filled.mud-button-filled-info { background-color: var(--jo-info-700) !important; color: var(--jo-on-color) !important; } html:not(.mud-theme-dark) .mud-button-filled-info:hover, html:not(.mud-theme-dark) .mud-button-filled.mud-button-filled-info:hover { background-color: var(--jo-info-800) !important; color: var(--jo-on-color) !important; } html:not(.mud-theme-dark) .mud-button-filled-error, html:not(.mud-theme-dark) .mud-button-filled.mud-button-filled-error { background-color: var(--jo-error-700) !important; color: var(--jo-on-color) !important; } html:not(.mud-theme-dark) .mud-button-filled-error:hover, html:not(.mud-theme-dark) .mud-button-filled.mud-button-filled-error:hover { background-color: var(--jo-error-800) !important; color: var(--jo-on-color) !important; } /* BUG-M365-R2-001 review: ook de "Persoonlijk-account-detectie" banner-kleur (rgb 255,165,0 = orange) op donkere achtergrond zat op 3.94:1 — net onder de 4.5 grens. Deze override forceert het gebruik van een donkerder oranje wanneer de banner een filled-warning-context heeft. */ html:not(.mud-theme-dark) .mud-button-filled-warning, html:not(.mud-theme-dark) .mud-button-filled.mud-button-filled-warning { background-color: var(--jo-warning-700) !important; /* Tekst blijft var(--jo-on-warning) — donkergrijs op warning-bg geeft 4.93:1 (WCAG-AA conform). */ } /* BUG-SET-R2-017: feedback-pagina tabs ("ALGEMEEN", "DATA VERZAMELING", ...) gebruikten default MudBlazor tab-kleuren — ALL-CAPS witte tekst op een licht-blauwe MudPanel leverde 1.85:1 contrast op (ver onder WCAG SC 1.4.3 minimum 4.5). We forceren een donker-grijze tekst (#1b1b1b) op de inactieve tabs (zelfde token-kleur als andere filled-buttons) en een marine-blauw (#0d47a1, ratio 9.46:1 op wit) voor de actieve tab plus een 3px-onderlijn zodat de actieve tab ook zonder kleur identificeerbaar is (WCAG SC 1.4.1 'use of colour'). */ html:not(.mud-theme-dark) .mud-tabs .mud-tab { color: var(--jo-on-warning) !important; } html:not(.mud-theme-dark) .mud-tabs .mud-tab.mud-tab-active, html:not(.mud-theme-dark) .mud-tabs .mud-tab[aria-selected="true"] { color: var(--jo-primary-800) !important; border-bottom: 3px solid var(--jo-primary-800) !important; font-weight: 600 !important; } html:not(.mud-theme-dark) .mud-tabs .mud-tab:focus-visible { outline: 2px solid var(--jo-primary-800) !important; outline-offset: 2px !important; } /* ============================================================ * BUG-REF-R3-014: User-Agent + Kenmerken kolommen wrappen letter-per-letter * verticaal omdat MudTable bij default `word-break: break-all` toepast op * lange tokens zonder spaties. We zetten min-width + truncate met ellipsis, * en de raw-text blijft beschikbaar via title-attribute (al aanwezig in * AuditLogViewer.razor:175). WCAG 1.4.10 reflow. * ============================================================ */ .audit-log-text-cell, .audit-log-user-agent-cell, .audit-log-flags-cell { min-width: 140px; max-width: 240px; word-break: normal !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .audit-log-flags-cell { min-width: 100px; max-width: 160px; } /* ============================================================ * BUG-BIL-R3-017: ACTIE-kolom (audit-log-chip) wrapped letter-voor-letter * verticaal bij lange action-strings, omdat MudChip default * `word-break: break-all` heeft binnen smalle table-cellen. Force * `white-space: nowrap` op de chip-label en min-width op de td zodat * lange labels horizontaal blijven met ellipsis. * ============================================================ */ .audit-log-chip { white-space: nowrap !important; word-break: normal !important; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .audit-log-chip .mud-chip-content { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; } /* BUG-BIL-R3-016: systeem-events tonen een cursief secundair label; * extra accent op tabel-rij-niveau via een lichte achtergrondtint. */ .audit-log-system-user { font-style: italic; color: var(--mud-palette-text-secondary); } /* ============================================================ * BUG-M365-R3-015: type-scale beperken tot 8 sizes (norm). Voorheen * detecteerden snippets 11 verschillende font-sizes (12/13/14/15/16/ * 18/20/22/24/34/36 px) op /m365/dashboard. Onderstaande utility- * klasses normaliseren naar de design-system schaal: Body / Caption / * Subtitle / H6 / H5 / H4 / H3 / Display. * ============================================================ */ .jo-type-caption { font-size: 12px !important; line-height: 1.4; } .jo-type-body { font-size: 14px !important; line-height: 1.5; } .jo-type-h6 { font-size: 16px !important; font-weight: 600; } .jo-type-h5 { font-size: 18px !important; font-weight: 600; } .jo-type-h4 { font-size: 20px !important; font-weight: 600; } .jo-type-h3 { font-size: 24px !important; font-weight: 700; } .jo-type-h2 { font-size: 28px !important; font-weight: 700; } .jo-type-h1 { font-size: 32px !important; font-weight: 700; } /* ============================================================ * BUG-REF-R3-011: form-section-headers gebruiken Typo.h6 (visuele * default 16px) maar krijgen HtmlTag="h2" voor screenreader-outline. * Visueel is dat te klein voor een sectie-koers; we tillen alleen * binnen .transfer-section-title de font-size naar var(--jo-section-title-size) * (20/24px), zonder andere h6's te raken. * ============================================================ */ .transfer-section-title { font-size: var(--jo-section-title-size) !important; line-height: var(--jo-section-title-line-height) !important; font-weight: 600 !important; } /* BUG-SHELL-R4-010: Hardened contrast voor de NL/EN/DE-taalbadge in de top-bar. MudBadge.Color.Primary genereerde #ffffff op #90caf9 (1.75:1) in dark theme. Forceer een donker oppervlak met bold-witte tekst — voldoet WCAG AA in beide thema's. */ .lang-badge-accessible .mud-badge { background-color: #1c3d5a !important; color: #ffffff !important; font-weight: 600 !important; } /* BUG-SHELL-R4-011: kolombreedtes uitgelijnd op informatie-dichtheid in plaats van auto-fit. Voorheen was 'Acties' 124px voor één tekstknop (28px verspild) en 'Toegevoegd op' 88px voor een datumlabel die wrapte naar 2 regels. Niet 'table-layout: fixed' — dat conflicteert met de variabele 'Removed on' kolom die alleen rendert wanneer HasAnyRemovedUsers=true. We gebruiken data-label-attributes die MudTable consistent zet, zodat de selectors stabiel zijn ongeacht kolom-volgorde. Kolommen 'Gebruiker' en 'E-mail' krijgen min-width zodat ze niet platdrukken; vaste-breedte cellen krijgen width. */ .subscription-users-table th:nth-child(1), .subscription-users-table td[data-label="Gebruiker"], .subscription-users-table td[data-label="User"] { min-width: 180px; } .subscription-users-table td[data-label="E-mail"], .subscription-users-table td[data-label="Email"] { min-width: 200px; word-break: break-word; } .subscription-users-table td[data-label="Rol"], .subscription-users-table td[data-label="Role"] { min-width: 120px; } .subscription-users-table td[data-label="Laatst ingelogd"], .subscription-users-table td[data-label="Last login"], .subscription-users-table td[data-label="Toegevoegd op"], .subscription-users-table td[data-label="Added on"], .subscription-users-table td[data-label="Verwijderd op"], .subscription-users-table td[data-label="Removed on"] { width: 96px; white-space: nowrap; } .subscription-users-table td[data-label="2FA"] { width: 56px; text-align: center; } .subscription-users-table th:last-child, .subscription-users-table td:last-child { /* Acties / Actions */ width: 96px; text-align: right; } /* BUG-DASH-R4-008 + AUDIT-Fase18-RECONNECT-DARK (3e iteratie): nucleaire override met maximaal-specifieke selectors. Gebruiker meldde herhaaldelijk onleesbare modal in dark mode ondanks color-scheme + !important. We zetten nu via html.mud-theme-dark én body als prefix zodat we de hoogste plausibele specificiteit halen, en dekken óók de native ::backdrop pseudo-element plus alle interne

/