/* 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. */

@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;
}
[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)}

/* 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-content{padding:16px 16px 88px}
  .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:#fff;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}}

/* 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}

/* 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)}

@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}