/* Ons huis — aanvulling op het MudTheme (Theme/OnsHuisTheme.cs), bron: docs/STIJLGIDS.md. Hier staan de tokens zonder MudTheme-eigenschap (§1 "eigen custom token") en de layoutregels. Themaregel (§1): kleuren alleen via var(--mud-palette-*) of deze --oh-*-tokens; donker hangt aan (gezet door App.razor/MainLayout via js/theme.js), nooit aan een media-query op het systeemthema. */ @font-face{font-family:"Roboto";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/Roboto-var.woff2") format("woff2")} @font-face{font-family:"Roboto Mono";font-style:normal;font-weight:100 700;font-display:swap;src:url("../fonts/RobotoMono-var.woff2") format("woff2")} :root{ --oh-warning-tekst:#B34A00; --oh-info-tekst:#01579B; --oh-blad-kop:#EEF1F5; --oh-blad-lijn:rgba(0,0,0,.16); --oh-toon1:#1E4E79; --oh-toon2:rgba(0,0,0,.38); --oh-actief:rgba(30,78,121,.08); --oh-hover:rgba(0,0,0,.04); --oh-kaart:#FFFFFF; --oh-elev1:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); --oh-elev3:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23); --oh-mono:"Roboto Mono",ui-monospace,monospace; } html[data-theme="dark"]{ --oh-warning-tekst:#FFB74D; --oh-info-tekst:#29B6F6; --oh-blad-kop:#2A2A2A; --oh-blad-lijn:rgba(255,255,255,.16); --oh-toon1:#7FB3E5; --oh-toon2:rgba(255,255,255,.38); --oh-actief:rgba(127,179,229,.14); --oh-hover:rgba(255,255,255,.06); --oh-kaart:#242424; --oh-elev1:0 1px 3px rgba(0,0,0,.5); --oh-elev3:0 4px 10px rgba(0,0,0,.6); color-scheme:dark; } html,body{margin:0;font-family:"Roboto",system-ui,sans-serif;-webkit-font-smoothing:antialiased} body{background:var(--mud-palette-background)} .oh-root{min-height:100vh;background:var(--mud-palette-background);color:var(--mud-palette-text-primary)} .oh-num,.mud-table-cell.oh-num{font-variant-numeric:tabular-nums} span.oh-num{white-space:nowrap} .oh-facts.mud-table,.oh-facts .mud-table-container{background:transparent} .oh-mono{font-family:var(--oh-mono);font-variant-numeric:tabular-nums} /* kaarten (§3): in donker een eigen kaartvlak #242424 */ .oh-card.mud-paper{background:var(--oh-kaart);box-shadow:var(--oh-elev1);border-radius:4px} .oh-card-klik.mud-paper{transition:box-shadow 150ms} .oh-card-klik.mud-paper:hover{box-shadow:var(--oh-elev3)} /* chat: eigen bericht op primary (accentvlak), ander bericht op het kaartvlak */ .oh-chat-mine.mud-paper{background:var(--mud-palette-primary);color:var(--mud-palette-primary-text)} .oh-chat-other.mud-paper{background:var(--oh-kaart)} /* content: max 1200 px, gutter 24 (16 onder 600 px) */ .oh-content{max-width:1200px;margin:0 auto;padding:24px} .oh-stack{display:flex;flex-direction:column;gap:24px} .oh-grid2{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px;align-items:start} @media (max-width:959.98px){.oh-grid2{grid-template-columns:minmax(0,1fr)}} /* lade */ .oh-nav-group{padding:16px 16px 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mud-palette-text-secondary)} .oh-nav-sub .mud-nav-link{padding-left:56px !important;min-height:36px} .oh-nav-sub .mud-nav-link-text{font-size:14px} /* onderbalk (mob-04): alleen onder 600 px */ .oh-bottomnav{display:none} @media (max-width:599.98px){ .oh-bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1200;height:64px; background:var(--mud-palette-surface);border-top:1px solid var(--mud-palette-divider); padding-bottom:env(safe-area-inset-bottom)} .oh-bottomnav a,.oh-bottomnav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; font:500 12px/1.2 "Roboto",system-ui,sans-serif;color:var(--mud-palette-text-secondary);text-decoration:none; background:none;border:0;cursor:pointer;min-height:48px} .oh-bottomnav a.active{color:var(--mud-palette-primary)} .oh-bottomnav .oh-bn-icon{position:relative;display:inline-flex} .oh-bottomnav .oh-bn-badge{position:absolute;top:-6px;right:-12px;min-width:16px;height:16px;border-radius:8px;padding:0 4px; background:var(--mud-palette-error);color:var(--mud-palette-error-text);font-size:10px;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--mud-palette-surface)} .mud-appbar .mud-toolbar-appbar{height:56px;min-height:56px} .oh-desktop-only{display:none !important} } @media (min-width:600px){.oh-mobile-only{display:none !important}} /* paginaschil (SectionShellLite): ruim vanaf 600 px, 24 px vanaf 960 px (zoals pa-4 pa-md-6) */ .oh-shell{max-width:1100px;padding:16px} @media (min-width:960px){.oh-shell{padding:24px}} .oh-appbar-title{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:0 1 auto;line-height:1.2} .oh-appbar-page{font:500 16px/1.15 "Roboto",system-ui,sans-serif;letter-spacing:.0075em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* telefoon: de h1 is verborgen, dus de paginanaam nooit afkappen maar zo nodig over twee regels */ @media (max-width:599.98px){.oh-appbar-page{white-space:normal;overflow:visible;text-overflow:clip}} .oh-appbar-sub{font:400 12px/1.3 "Roboto",system-ui,sans-serif;letter-spacing:.03333em;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Tabbalken (alle breedtes): MudBlazor animeert .mud-tabs-tabbar-wrapper met `transition: .3s` op álles, ook de geërfde tekstkleur; bij een themawissel bleef de inactieve tab dan even donker op donker (indeling-contrast, 25-9). Alleen de verschuiving animeert; de tabtekst krijgt expliciet de paletkleur. */ .mud-tabs-tabbar-content .mud-tabs-tabbar-wrapper{transition-property:transform} .mud-tabs-tabbar:not(:is(.mud-tabs-tabbar-primary,.mud-tabs-tabbar-secondary,.mud-tabs-tabbar-tertiary,.mud-tabs-tabbar-info,.mud-tabs-tabbar-success,.mud-tabs-tabbar-warning,.mud-tabs-tabbar-error,.mud-tabs-tabbar-dark)) .mud-tab:not(.mud-tab-active):not(.mud-disabled){color:var(--mud-palette-text-primary)} /* Mobile first: volle breedte (STIJLGIDS §12a, sjoerd 25-9-2026). Onder 600 px: - de container heeft geen eigen marge voor kaarten en balken: kaarten (.mud-paper/.mud-card op het hoogste niveau, .mud-alert, .oh-review-card), tabbalken en werkbalken lopen van rand tot rand (negatieve marge = de 16 px-gutter die alleen losse tekst houdt, zodat die gelijk staat met de tekst in de kaarten); - kaarten zonder radius en zonder schaduw, 8 px achtergrond ertussen, 16 px binnenmarge; - alleen losse kaarten direct in de pagina: kaarten in een raster dat twee kolommen kan krijgen (.oh-card-grid, zoals de galerij bij 568–599 px) houden de gutter, anders overlappen de kolommen; - tabbalk direct onder de app bar en daar blijvend (sticky), vegen i.p.v. pijlen, met een vervagende rand, nooit afgekapte labels (geen uppercase, geen minimumbreedte); - dialogen als bottom sheet over de volle breedte; titels klein, de paginanaam staat in de app bar. */ @media (max-width:599.98px){ .oh-content{padding:8px 16px 88px} .oh-shell{padding:0;max-width:none} .oh-content > .mud-container{padding-left:0;padding-right:0} .oh-content > .mud-container.py-4{padding-top:0 !important} .oh-content .mud-paper:not(:where(.mud-paper .mud-paper,.mud-card .mud-paper,.oh-paper-inline,.mud-tabs-tabbar,.oh-card-grid > *)), .oh-content .mud-card:not(:where(.mud-paper .mud-card,.oh-card-grid > *)), .oh-content .mud-alert:not(:where(.mud-paper .mud-alert,.mud-card .mud-alert)), .oh-content .mud-table:not(:where(.mud-paper .mud-table,.mud-card .mud-table)), .oh-content .oh-review-card{ margin-left:-16px !important;margin-right:-16px !important;max-width:none !important; border-radius:0 !important;box-shadow:none !important;margin-top:0 !important;margin-bottom:8px !important} .oh-content .mud-paper:not(:where(.mud-paper .mud-paper)):is(.pa-3,.pa-4,.pa-5,.pa-6), .oh-content .mud-card:not(:where(.mud-paper .mud-card)) .mud-card-content{padding-left:16px !important;padding-right:16px !important} .oh-content .mud-paper:not(:where(.mud-paper .mud-paper)):is(.pa-5,.pa-6){padding-top:16px !important;padding-bottom:16px !important} .oh-content .mud-paper.mud-paper-outlined:not(:where(.mud-paper .mud-paper)){border-left:0;border-right:0} .oh-stack,.oh-grid2,.oh-review-list{gap:8px} .oh-content :is(.oh-stack,.oh-grid2,.oh-review-list) > *{margin-bottom:0 !important} /* titels: de paginanaam staat in de app bar; wat overblijft is h5/h6-formaat met weinig lucht */ .oh-page-title-dup{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .oh-content .mud-typography-h4{font-size:1.5rem;line-height:1.334} .oh-content .mud-typography-h5{font-size:1.25rem;line-height:1.4;font-weight:500} .oh-page-title.mb-4,.oh-page-title.mb-2{margin-bottom:8px !important} .oh-page-subtitle{margin:0 0 8px !important} /* tabbalk: volle breedte, sluit aan op de app bar (56 px) en blijft daar */ .oh-tabs-slot,.oh-section-tabs:not(.oh-tabs-slot .oh-section-tabs){position:sticky;top:56px;z-index:20; margin:-8px -16px 8px !important;background:var(--mud-palette-surface);border-bottom:1px solid var(--mud-palette-divider)} .oh-tabs-slot .oh-section-tabs{margin:0 !important} .oh-section-tabs .mud-tabs-tabbar{border:0 !important;border-radius:0} .oh-inbox-toolbar > .mud-tabs{margin:0 -16px;width:calc(100% + 32px) !important} .mud-tabs-scroll-button{display:none !important} .oh-content .mud-tabs-tabbar-content{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent)} .oh-content .mud-tabs-tabbar-content::-webkit-scrollbar{display:none} .oh-content .mud-tabs-tabbar-wrapper{transform:none !important;min-width:100%} .oh-content .mud-tabs-tabbar-wrapper > :not(.mud-tab-slider){flex:1 0 auto;display:flex} .oh-content .mud-tab{min-width:0 !important;max-width:none !important;padding:6px 16px; white-space:nowrap;text-transform:none;letter-spacing:.01em;font-size:.9375rem} /* werkbalken (segment, chips, menu "Weergave"): één compacte regel die zo nodig opzij scrolt */ .oh-content .oh-tl-toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 8px;padding:0 16px;gap:8px; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent)} .oh-content .oh-tl-toolbar::-webkit-scrollbar{display:none} .oh-content .oh-tl-toolbar > *,.oh-content .oh-tl-toolbar .mud-chip{flex:none} .oh-content .oh-tl-toolbar .mud-menu .mud-button-root{text-transform:none;letter-spacing:.01em} .oh-content .oh-agenda-head{top:104px} /* dialogen: bottom sheet over de volle breedte */ .mud-dialog-container{align-items:flex-end !important;justify-content:stretch !important;padding:0 !important} .mud-dialog-container .mud-dialog{position:relative !important;inset:auto !important;width:100% !important;max-width:none !important; margin:0 !important;border-radius:4px 4px 0 0;max-height:calc(100dvh - 56px);padding-bottom:env(safe-area-inset-bottom)} } /* feitentabel (§4 tabellen: dense, kop 12 px uppercase) */ .oh-facts th{font-size:12px !important;text-transform:uppercase;letter-spacing:.08em;color:var(--mud-palette-text-secondary)} .oh-facts td{height:36px} .oh-leeg{font-style:italic;color:var(--mud-palette-text-secondary)} /* stepper (mijlpalen) */ .oh-stepper{display:flex;align-items:flex-start;gap:0;list-style:none;margin:0;padding:0} .oh-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;padding:0 8px;min-width:0} .oh-step::after{content:"";position:absolute;top:12px;left:calc(50% + 16px);right:calc(-50% + 16px);height:2px;background:var(--mud-palette-divider)} .oh-step:last-child::after{display:none} .oh-step-dot{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font:500 12px/1 "Roboto",sans-serif;border:2px solid var(--mud-palette-text-secondary);color:var(--mud-palette-text-secondary);background:var(--mud-palette-surface)} .oh-step.done .oh-step-dot{background:var(--mud-palette-primary);border-color:var(--mud-palette-primary);color:var(--mud-palette-primary-text)} .oh-step.current .oh-step-dot{border-color:var(--mud-palette-primary);color:var(--mud-palette-primary);box-shadow:0 0 0 3px var(--oh-actief)} .oh-step-title{margin-top:8px;font-size:14px;line-height:1.3} .oh-step-date{font-size:12px;color:var(--mud-palette-text-secondary)} .oh-stepbar{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:8px 0;color:inherit;font:inherit;cursor:pointer;text-align:left} .oh-stepbar-dots{display:inline-flex;gap:6px} .oh-stepbar-dots i{width:10px;height:10px;border-radius:50%;border:2px solid var(--mud-palette-text-secondary)} .oh-stepbar-dots i.done{background:var(--mud-palette-primary);border-color:var(--mud-palette-primary)} .oh-stepbar-dots i.current{border-color:var(--mud-palette-primary);box-shadow:0 0 0 3px var(--oh-actief)} /* statuschips tonaal (stijl-09) */ .oh-chip-tonal.mud-chip{background:color-mix(in srgb,currentColor 8%,transparent) !important} /* warning/info als tekst op een tint: de -tekst-tokens (§1), de vlakkleur haalt daar geen 4,5:1 (thema-matrix) */ .mud-alert-text-warning,.mud-alert-text-warning .mud-alert-icon,.mud-chip-text.mud-chip-color-warning{color:var(--oh-warning-tekst)} .mud-alert-text-info,.mud-alert-text-info .mud-alert-icon,.mud-chip-text.mud-chip-color-info{color:var(--oh-info-tekst)} /* huiskop */ .oh-house{display:flex;gap:24px;align-items:center} .oh-house-foto{width:160px;height:107px;object-fit:cover;border-radius:4px;flex:none;background:var(--oh-blad-kop)} .oh-house-foto-leeg{display:flex;align-items:center;justify-content:center;color:var(--mud-palette-text-secondary)} @media (max-width:599.98px){.oh-house-foto{width:96px;height:64px}.oh-house{gap:16px}} /* deadline: warning-tekst i.p.v. warning-vlak (contrast) */ .oh-deadline{border-left:4px solid var(--mud-palette-warning)} .oh-deadline-dagen{color:var(--oh-warning-tekst);font-weight:500} .oh-nu{font-size:16px} /* login/uitnodiging */ .oh-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--mud-palette-background)} .oh-auth-card{width:100%;max-width:400px;padding:32px} .oh-codes{font-family:var(--oh-mono);display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;font-size:15px} :focus-visible{outline:2px solid var(--mud-palette-primary);outline-offset:2px} .mud-appbar :focus-visible{outline-color:var(--mud-palette-appbar-text)} .oh-menu-actief{background:var(--oh-actief)} .oh-menu-actief .mud-menu-item-text{font-weight:500} @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important}} @media print{.mud-appbar,.mud-drawer,.oh-bottomnav{display:none !important}.oh-card.mud-paper{box-shadow:none}} .oh-sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} h1:focus,h1:focus-visible{outline:none}