/* Actie/status-badge (created/updated/deleted-achtige kleurcodering) — globaal, want gedeeld tussen
   AdminAudit.razor en AdminHealth.razor (CSS-isolatie zou de class anders niet laten toepassen). */
/* Maatvoering uit de gedeelde pill-basis onderaan dit bestand; hier alleen tone-kleuren. */
.audit-created { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.audit-updated { background: var(--tone-info-bg);    color: var(--tone-info-fg); }
.audit-deleted { background: var(--tone-danger-bg);  color: var(--tone-danger-fg); }
.audit-neutral { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }

/* .empty-hint (Home.razor + Reports.razor) — globaal, want gedeeld tussen beide pagina's
   (CSS-isolatie zou de class anders niet laten toepassen op de tweede pagina). */
.empty-hint {
  color: var(--begra-gray-600);
  font-size: .9rem;
  padding: .5rem 0;
}

/* Rol-badge (Info.razor + StatusFlow.razor) — globaal, want gedeeld tussen beide pagina's
   (CSS-isolatie zou de class anders niet laten toepassen op de tweede pagina). */
/* Maatvoering uit de gedeelde pill-basis; kleuren via tone-tokens (dark mode volgt automatisch). */
.role-admin          { background: var(--tone-danger-bg);  color: var(--tone-danger-fg); }
.role-montageplanner { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.role-inkoop         { background: var(--tone-info-bg);    color: var(--tone-info-fg); }
.role-projectleider  { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.role-lezer          { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }
.role-extern         { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }

/* Screen-reader-only utility (sr-only pattern) — globaal, want gebruikt door meerdere componenten
   zonder eigen scoped .razor.css (CSS-isolatie zou de class anders niet laten toepassen). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Merk-, grijs-, status- en tone-tokens en het lettertype Open Sans komen uit één bron: css/begra-tokens.css
   (src/Shared/Branding, ook gebruikt door de monteurs-PWA). Hier alleen de tokens die specifiek zijn voor de kantoorapp;
   een token uit begra-tokens.css wordt hier niet opnieuw gedeclareerd (BrandingTokensTests). */
:root {
  /* Grafische vulling in accentkleur (balken, KPI-accent, planningbalken): in dark mode haalt
     --begra-primary op de donkere kaart/track maar 2.3:1 — niet-tekstcontrast vraagt 3:1. */
  --primary-fill:var(--begra-primary);
  /* Eén "geselecteerd"-vlak (actief menu-item, geselecteerde rij/optie, aangevinkte chip). */
  --selected-bg:var(--begra-primary-light);

  --begra-surface:#FFF;          /* verhoogd paneel (dropdowns, popovers) */

  --focus-ring:rgba(0,92,185,.22);
  --focus-ring-solid:#005CB9;
  --overlay-bg:rgba(15,23,42,.45);          /* dialog-/sidebar-backdrop */
  --on-primary:#fff;                        /* tekst op primaire vlakken */
  --primary-soft:rgba(0,92,185,.18);        /* zachte primaire achtergrond (selectie/hover) */
  --hover-bg:var(--begra-gray-100);         /* neutrale hover-achtergrond */
  /* Rand van invulvelden/checkboxen/schakelaars: >=3:1 tegen wit en de paginatint (WCAG 1.4.11);
     --begra-gray-200 haalde maar 1.26:1. Uitgeschakelde velden houden bewust de lichte rand. */
  --input-border:#8C8C8C;
  --input-border-hover:var(--begra-gray-600);

  /* Zijmenu (licht thema); dark-waarden in [data-theme="dark"]. */
  --sidebar-bg:#F9FAFB;
  --sidebar-fg:var(--begra-dark);
  --sidebar-border:var(--begra-gray-200);
  --sidebar-link:var(--begra-gray-600);
  --sidebar-link-hover:var(--begra-dark);
  --sidebar-hover-bg:rgba(0,0,0,.045);
  --sidebar-active-fg:var(--begra-primary-text);
  --sidebar-section:var(--begra-gray-500);

  /* Design-tokens voor vorm/diepte/beweging — één plek zodat kaarten, knoppen, velden en
     dialogen dezelfde afronding en schaduwtaal delen. Afronding: xs = codechips/vinkjes,
     sm = knoppen/velden, md = kaarten/panelen (ook voor de oude 8/12px), lg = dialogen, pill = chips/badges. */
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-pill:999px;
  /* Lettergroottes (rem): 2xs alleen voor tellers/badges; kleiner dan .6875rem wordt niet gebruikt. */
  --fs-2xs:.6875rem;
  --fs-xs:.75rem;
  --fs-sm:.8125rem;
  --fs-md:.875rem;
  --fs-base:.9375rem;
  --fs-lg:1.0625rem;
  --fs-xl:1.25rem;
  --fs-2xl:1.625rem;
  --fs-3xl:2rem;
  /* Ruimte in stappen van 4px (+ benoemde aliassen die al in componenten gebruikt werden). */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem;
  --space-xs:var(--space-1); --space-sm:var(--space-2); --space-md:var(--space-4); --space-lg:var(--space-6); --space-xl:var(--space-8);
  --font-mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  /* Hoogte van bedieningselementen: compact (tabel/btn-sm), standaard (knop/veld), touch (mobiel). */
  --control-h-sm:32px;
  --control-h:42px;
  --control-h-touch:44px;
  /* Breakpoints (alleen als documentatie; media queries kunnen geen custom properties lezen):
     480 = telefoon · 640 = grote telefoon/klein tablet · 768 = tablet/mobiel menu ·
     1024 = smalle laptop (smallere sidebar) · 1300 = projectdetail met chatkolom ·
     1600/1800 = brede topbar (langere gebruikersnaam, resp. tekstlabels bij de icoonknoppen). */
  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 4px 12px rgba(15,23,42,.08),0 1px 3px rgba(15,23,42,.06);
  --shadow-lg:0 16px 48px rgba(15,23,42,.16),0 4px 12px rgba(15,23,42,.08);
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:.16s;
  --dur-fast:.12s;
  --dur-slow:.24s;
  --ease-in:cubic-bezier(.4,0,1,1);
  /* Intrede/uitloop van overlays, toasts, dialogen en panelen. --dur-exit moet gelijk blijven aan
     LeaveTransition.Duration (Services/LeaveTransition.cs, 150ms): pas daarna verdwijnt het element uit de DOM. */
  --dur-enter:.2s;
  --dur-exit:.15s;           /* = LeaveTransition.Duration */
  --dur-spin:.8s;
  --dur-pulse:1.6s;          /* trage opacity-puls (status-/bezig-indicatoren) */
  --input-bg:var(--begra-white);
  --topbar-bg:rgba(255,255,255,.85);
  /* Hover-vlakken/-randen voor secundaire knoppen en tabjes. */
  --surface-hover:var(--begra-gray-100);
  --border-hover:var(--begra-gray-400);
  --table-head-bg:var(--begra-gray-100);

  /* Stapelvolgorde — één schaal voor de hele app. */
  --z-sticky:5;
  --z-topbar:10;
  --z-sidebar:20;
  --z-popover:150;
  --z-dialog:200;
  --z-context-menu:210;      /* boven dialogen (rijmenu in een dialoog), onder dialoog-popovers en toasts */
  --z-dialog-popover:250;
  --z-toast:300;
  --z-error:1000;
  --z-banner:1900;
  --z-overlay:2000;
  --z-skiplink:10000;
  --z-tour:10001;

  /* Chat (WhatsApp-weergave) — namen/waarden gelijk aan het monteursportaal (wwwroot/monteur/css/app.css). */
  --wa-bubble-out:#DCF8C6;
  --wa-bubble-out-text:#1A1A1A;
  /* Tijd/leesbevestiging in een eigen (groene) bubbel: 5.0:1 (licht) resp. 4.7:1 (dark) op --wa-bubble-out. */
  --wa-out-meta:#5B6B57;
  --wa-out-author:#00754A;
  --wa-header:#075E54;
  --wa-accent:#00A884;
  --wa-accent-hover:#029670;
  --wa-input-bg:#F5F5F5;
  --wa-input-field:var(--begra-white);
  --wa-input-border:var(--input-border);
  --wa-input-text:var(--begra-dark);
  --wa-sep-bg:#FFFFFF;
  --wa-sep-fg:var(--begra-gray-600);
  --wa-quote-bg:rgba(0,0,0,.06);
  --wa-read:#53BDEB;
  /* Ongelezen-teller (chat): WhatsApp-groen, 4.9:1 met witte tekst. */
  --unread-badge:#008069;
}

[data-theme="dark"] {
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 14px rgba(0,0,0,.45);
  --shadow-lg:0 20px 56px rgba(0,0,0,.6);
  --input-bg:#1A1A1A;           /* invulvelden net lichter dan de kaart voor duidelijk contrast */
  --topbar-bg:rgba(15,15,15,.85);
  --overlay-bg:rgba(0,0,0,.65);
  --primary-soft:rgba(96,165,250,.18);
  /* Was 4 verschillende blauwtinten (rgba(0,92,185,.2/.22), primary-soft, primary-light); nu één. */
  --selected-bg:rgba(96,165,250,.18);
  /* = --status-1-dot dark: 3.7:1 op de balktrack (#262626), 4.5:1 op de kaart. */
  --primary-fill:#2680D8;
  /* 3.3:1 op het invulveld (#1A1A1A) en 3.5:1 op de kaart; --begra-gray-300 (#404040) haalde 1.7:1. */
  --input-border:#6B6B6B;
  --sidebar-bg:#0F0F0F;
  --sidebar-fg:#FFF;
  --sidebar-border:#1F1F1F;
  --sidebar-link:rgba(255,255,255,.72);
  --sidebar-link-hover:#FFF;
  --sidebar-hover-bg:rgba(255,255,255,.06);
  --sidebar-active-fg:#FFF;
  --sidebar-section:rgba(255,255,255,.5);
  --hover-bg:rgba(255,255,255,.04);
  /* ATR-achtig donker thema (near-black met subtiele cards): grijzen, status-stippen en tone-tokens staan in css/begra-tokens.css. */
  --begra-surface:#1F1F1F;       /* verhoogd paneel (dropdowns, popovers) */
  --focus-ring:rgba(0,92,185,.35);
  --focus-ring-solid:#60A5FA;
  /* Lichtblauw vlak (#E5F0FA) was in dark mode een fel wit-blauw blok; tekst erop via --begra-primary-text. */
  --begra-primary-light:rgba(96,165,250,.14);
  --surface-hover:#2A2A2A;
  --border-hover:#4A4A4A;
  --table-head-bg:#1A1A1A;
  --wa-bubble-out:#025C4C;
  --wa-bubble-out-text:#E9EDEF;
  --wa-out-meta:#B4CCC8;
  --wa-out-author:#8FE0B5;
  --wa-header:#202C33;
  --wa-input-bg:#202C33;
  --wa-input-field:#2A3942;
  --wa-input-border:#6E7F88;     /* 3.4:1 op de invoerbalk (#202C33); de oude #2A3942 viel weg (1.2:1) */
  --wa-input-text:#E9EDEF;
  --wa-sep-bg:#233138;
  --wa-sep-fg:#E9EDEF;
  --wa-quote-bg:rgba(255,255,255,.08);
}

html,body{font-family:"Open Sans","Segoe UI",sans-serif;font-size:16px;line-height:1.5;color:var(--begra-dark);background:var(--begra-gray-100);margin:0;padding:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
*,*::before,*::after{box-sizing:border-box;}
h1{font-size:1.625rem;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:0 0 1rem;} h2{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;line-height:1.25;margin:0 0 .75rem;} h3{font-size:1.0625rem;font-weight:600;line-height:1.3;margin:0 0 .5rem;}
/* Alleen de ondertitel direct onder de paginatitel is gedempt; "h2+p" maakte ook gewone inhoud
   na elke sectie-/dialoogkop grijs (kaartintro's hebben hun eigen regel bij .begra-card). */
h1+p{color:var(--begra-gray-600);}
.text-muted{color:var(--begra-gray-600);}
/* Slanke, themabewuste scrollbars i.p.v. de dikke systeem-balk (Chromium + Firefox). */
*{scrollbar-width:thin;scrollbar-color:var(--begra-gray-300) transparent;}
::-webkit-scrollbar{width:8px;height:8px;} ::-webkit-scrollbar-thumb{background:var(--begra-gray-300);border-radius:8px;border:2px solid transparent;background-clip:padding-box;} ::-webkit-scrollbar-track{background:transparent;}
/* iteration-count:1 voorkomt dat oneindige animaties (spinners, conn-pulse) met .01ms razendsnel gaan flikkeren. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}
/* Bezig-indicatoren mogen bij reduced motion niet bevriezen (dan lijkt de app vastgelopen):
   i.p.v. draaien een trage opacity-puls zonder beweging. */
@keyframes busyPulse{0%,100%{opacity:1}50%{opacity:.35}}
/* Ook de laad-placeholder (SkeletonLoader) en de verbindingsstip (ConnectionStatusIndicator) pulseren
   bewust: de globale reduce-regel hierboven bevroor ze anders (ze lijken dan statisch/"vastgelopen"). */
@media (prefers-reduced-motion:reduce){[data-busy],.chat-send-btn.busy svg,.skeleton-loader__row,.conn-dot{animation:busyPulse var(--dur-pulse,1.6s) ease-in-out infinite!important;}}
:where(button,[role=button],[tabindex],summary,a,select,input,textarea):focus-visible{outline:2px solid var(--focus-ring-solid);outline-offset:2px;}
a,.btn-link{color:var(--begra-primary-dark);text-decoration:none;} a:hover{text-decoration:underline;}
/* :where() houdt de specificiteit van "a"/".btn-link" gelijk aan de regel hierboven (anders
   wint [data-theme="dark"] a — attribute+element — altijd van los-staande klassen op <a>
   (knoppen, tegels), en kregen die in dark mode ongewild blauwe linktekst i.p.v. hun eigen kleur). */
:where([data-theme="dark"]) a,:where([data-theme="dark"]) .btn-link{color:var(--begra-primary-text);}
/* .btn-link staat ook op <button>-elementen (zie o.a. ProjectDetail.razor) — zonder deze reset
   blijft de browser-default knop-chrome (witte achtergrond, rand, padding) zichtbaar. */
button.btn-link{background:none;border:none;padding:0;font:inherit;cursor:pointer;}
button.btn-link:not(:disabled):hover{text-decoration:underline;}
/* Uitgeschakelde tekstknop zag er identiek uit als een actieve link (o.a. NAV-acties, AdminNavOutbox). */
button.btn-link:disabled{opacity:.5;cursor:not-allowed;text-decoration:none;}
/* Selecteren/kopiëren: inhoud (titels, projectnummers, IBAN, adressen, mail- en foutteksten) is
   standaard selecteerbaar; alleen bedieningselementen (menu, topbar, knoppen, labels, tabelkoppen,
   tabs/chips, sleepgrepen, menu's) niet — anders selecteert dubbelklikken of slepen er tekst in. */
.begra-sidebar,.begra-topbar,button,[role=button],[role=menu],[role=tab],label,th,summary,.nav-link,
.btn-begra-primary,.btn-begra-secondary,.btn-begra-danger-outline,.btn-icon,.status-tabs,.chip,.filter-chips,.segmented,
.settings-nav,.dg-th,.dg-menu,.ctx-menu,.doc-tile,.sidebar-backdrop,.dialog-backdrop{-webkit-user-select:none;user-select:none;}
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text;}
/* ── Invulvelden ─────────────────────────────────────────────────────────── */
input,select,textarea{font-size:.9375rem;font-family:inherit;padding:.5625rem .875rem;border:1px solid var(--input-border);border-radius:var(--radius-sm);background:var(--input-bg);color:var(--begra-dark);width:100%;min-height:var(--control-h);line-height:1.4;box-shadow:inset 0 1px 2px rgba(15,23,42,.04);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease);}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{box-shadow:none;}
textarea{min-height:0;resize:vertical;line-height:1.5;}
/* Ongeldige velden (aria-invalid/.invalid) houden hun rode rand ook bij hover — zie de regel onderaan. */
input:hover:not(:disabled):not(:read-only):not(:focus):not([aria-invalid="true"]):not(.invalid),select:hover:not(:disabled):not(:focus):not([aria-invalid="true"]):not(.invalid),textarea:hover:not(:disabled):not(:read-only):not(:focus):not([aria-invalid="true"]):not(.invalid){border-color:var(--input-border-hover);}
input:focus,select:focus,textarea:focus{outline:2px solid var(--focus-ring-solid);outline-offset:1px;border-color:var(--begra-primary);box-shadow:0 0 0 3px var(--focus-ring);}
[data-theme="dark"] input:focus,[data-theme="dark"] select:focus,[data-theme="dark"] textarea:focus{border-color:var(--begra-primary-text);box-shadow:0 0 0 3px rgba(96,165,250,.28);}
input::placeholder,textarea::placeholder{color:var(--begra-gray-500);opacity:1;}
/* Readonly (NAV-gekoppelde velden) vs disabled: allebei niet-bewerkbaar, maar visueel te vlak op de
   dark-mode-kaartachtergrond — geen enkel onderscheid met een normaal invulveld (zie ProjectEdit.razor). */
input:disabled,select:disabled,textarea:disabled,input[readonly],textarea[readonly]{background:var(--begra-gray-100);color:var(--begra-gray-600);cursor:not-allowed;border-color:var(--begra-gray-200);box-shadow:none;border-style:dashed;}
input[readonly],textarea[readonly]{cursor:default;border-style:solid;}
a.btn-begra-primary[aria-disabled=true],a.btn-begra-secondary[aria-disabled=true],a.btn-begra-danger-outline[aria-disabled=true]{pointer-events:none;opacity:.5;}
[data-theme="dark"] input:disabled,[data-theme="dark"] select:disabled,[data-theme="dark"] textarea:disabled,[data-theme="dark"] input[readonly],[data-theme="dark"] textarea[readonly]{background:var(--begra-gray-100);border-color:var(--begra-gray-200);}
select:not([multiple]){appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;background-size:16px;padding-right:2.25rem;cursor:pointer;}
select:disabled{background-image:none;cursor:not-allowed;}
/* Datum/tijd-pickers: het native kalender-icoon meekleuren met het thema. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(.85);}
input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7;} input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:1;}
/* Bestandskiezer: de browser-default knop oogt als een vreemde eend — meenemen in de knoppenstijl. */
input[type="file"]{padding:.375rem .5rem;cursor:pointer;}
input[type="file"]::file-selector-button{font:inherit;font-size:.8125rem;font-weight:600;padding:.375rem .75rem;margin-right:.75rem;border:1px solid var(--begra-gray-300);border-radius:var(--radius-sm);background:var(--begra-white);color:var(--begra-dark);cursor:pointer;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
input[type="file"]::file-selector-button:hover{background:var(--begra-gray-100);border-color:var(--begra-gray-400);}
[data-theme="dark"] input[type="file"]::file-selector-button{background:var(--begra-surface);}
/* Checkbox/radio: accentkleur + iets groter; anders piepkleine grijze systeemvinkjes tussen 42px-velden. */
input[type="checkbox"],input[type="radio"]{accent-color:var(--primary-fill);width:1.125rem;height:1.125rem;min-height:0;padding:0;margin:0;flex-shrink:0;cursor:pointer;box-shadow:none;}
input[type="checkbox"]{border-radius:var(--radius-xs);}
input[type="checkbox"]:disabled,input[type="radio"]:disabled{cursor:not-allowed;border-style:solid;}
label{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.005em;margin-bottom:.375rem;color:var(--begra-gray-900);}
label .required,.required{color:var(--tone-danger-fg);font-weight:700;margin-left:.125rem;}
/* Label-look voor alleen-lezen waarden (geen formulierbesturing, dus geen <label>). */
.field-label{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.005em;margin-bottom:.375rem;color:var(--begra-gray-900);}
.form-grid>div>.field-label{margin-bottom:.5rem;}
/* Echte link in een klikbare rij/lijstitem: toetsenbordbedienbaar; rij-klik blijft werken voor de muis. */
.row-link{color:inherit;text-decoration:none;}
.row-link:hover{text-decoration:underline;}
.row-link:focus-visible{outline:2px solid var(--focus-ring-solid);outline-offset:2px;border-radius:2px;}
/* Skip-link: onzichtbaar tot hij focus krijgt. */
.skip-link{position:absolute;left:.5rem;top:-3.5rem;z-index:var(--z-skiplink);padding:.5rem 1rem;background:var(--begra-primary);color:var(--on-primary);border-radius:var(--radius-sm);font-weight:600;text-decoration:none;}
.skip-link:focus{top:.5rem;}
main.content:focus{outline:none;}
.logout-form{display:inline-flex;margin:0;}
small,.field-hint{display:block;font-size:.8125rem;color:var(--begra-gray-600);margin-top:.375rem;line-height:1.4;}

/* ── Knoppen ─────────────────────────────────────────────────────────────── */
.btn-begra-primary,.btn-begra-secondary,.btn-begra-danger-outline{border-radius:var(--radius-sm);padding:.5625rem 1.125rem;font-weight:600;font-size:.9375rem;line-height:1.2;cursor:pointer;min-height:42px;display:inline-flex;align-items:center;gap:.5rem;justify-content:center;text-decoration:none;white-space:nowrap;user-select:none;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);}
.btn-begra-primary:not(:disabled):active,.btn-begra-secondary:not(:disabled):active,.btn-begra-danger-outline:not(:disabled):active{transform:translateY(1px);}
.btn-begra-primary{background:var(--begra-primary);color:var(--on-primary);border:1px solid var(--begra-primary);box-shadow:0 1px 2px rgba(0,92,185,.25);}
.btn-begra-primary:not(:disabled):hover{background:var(--begra-primary-dark);border-color:var(--begra-primary-dark);box-shadow:0 3px 8px rgba(0,92,185,.3);}
.btn-begra-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}
a.btn-begra-primary:hover,a.btn-begra-secondary:hover,a.btn-begra-danger-outline:hover{text-decoration:none;}
.btn-begra-secondary{background:var(--begra-white);color:var(--begra-dark);border:1px solid var(--begra-gray-300);box-shadow:var(--shadow-sm);}
.btn-begra-secondary:not(:disabled):hover{background:var(--begra-gray-100);border-color:var(--begra-gray-400);}
[data-theme="dark"] .btn-begra-secondary{background:var(--begra-surface);border-color:var(--begra-gray-300);}
[data-theme="dark"] .btn-begra-secondary:not(:disabled):hover{background:var(--surface-hover);border-color:var(--border-hover);}
/* .btn-begra-secondary:disabled ontbrak — in tegenstelling tot .btn-begra-primary (regel hierboven)
   zag een disabled secundaire knop (o.a. paginering, sluiten/annuleren-dialogen, QR-download)
   er identiek uit als actief: volle kleur + pointer-cursor. */
.btn-begra-secondary:disabled{opacity:.5;cursor:not-allowed;}
/* Rood omlijnde variant voor destructieve acties (o.a. "Annuleren" naast Wijzigen/QR-code in
   ProjectDetail.razor) — anders staan 3 gelijke grijze .btn-begra-secondary-knoppen naast elkaar
   zonder visueel onderscheid tussen normale en onomkeerbare acties. */
/* Tekst via --tone-danger-fg (>=4.5:1 in beide thema's; --begra-red haalt als tekst maar 4.23:1). */
.btn-begra-danger-outline{background:var(--begra-white);color:var(--tone-danger-fg);border:1px solid color-mix(in srgb,var(--tone-danger-fg) 55%,transparent);}
.btn-begra-danger-outline:not(:disabled):hover{background:var(--tone-danger-bg);border-color:var(--tone-danger-fg);}
.btn-begra-danger-outline:disabled{opacity:.5;cursor:not-allowed;}
[data-theme="dark"] .btn-begra-danger-outline{background:var(--begra-surface);}
.btn-icon{background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);min-height:40px;min-width:40px;padding:.25rem .5rem;cursor:pointer;font-size:1.125rem;line-height:1;color:var(--begra-dark);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.btn-icon:hover{background:var(--begra-gray-100);border-color:var(--begra-gray-200);}
[data-theme="dark"] .btn-icon:hover{background:rgba(255,255,255,.06);border-color:var(--begra-gray-300);}
/* Knoppen/links hadden — i.t.t. inputs (zie Invulvelden) — geen zichtbare focus-stijl voor
   toetsenbordnavigatie (vielen terug op de browser-default outline, o.a. zichtbaar als
   oranje kader rond .nav-link). Alle overige klikbare elementen (navigatie, tabelkoppen,
   sluitknoppen, wizard-navigatie) krijgen dezelfde ring als knoppen/inputs.
   Geen eigen border-radius hier: de outline volgt de afronding van het element zelf (pillen blijven pillen). */
a:focus-visible,.btn-begra-primary:focus-visible,.btn-begra-secondary:focus-visible,.btn-begra-danger-outline:focus-visible,.btn-icon:focus-visible,.btn-hamburger:focus-visible,.status-tabs button:focus-visible,.nav-link:focus-visible,.begra-table th button:focus-visible,.link-button:focus-visible,.toast-close:focus-visible,#blazor-error-ui .dismiss:focus-visible,.search-field .search-clear:focus-visible,.mpt-close:focus-visible,.mpt-prev:focus-visible,.mpt-next:focus-visible,.mpt-finish:focus-visible,.chat-reply-btn:focus-visible,.chat-aftercare-btn:focus-visible,.chat-reply-cancel:focus-visible,.nav-finance-tasks>summary:focus-visible,.dg-chip-x:focus-visible{outline:2px solid var(--focus-ring-solid);outline-offset:2px;box-shadow:0 0 0 3px var(--focus-ring);}
/* .btn-sm: globaal, want gedeeld tussen ProjectDetail.razor en Reports.razor (CSS-isolatie zou
   de class anders niet laten toepassen op Reports.razor). */
.btn-sm{min-height:var(--control-h-sm);padding:.25rem .65rem;font-size:.8125rem;gap:.375rem;}
.btn-theme{display:inline-flex;align-items:center;gap:.375rem;}
/* Topbarlabels (thema, rondleiding, wachtwoord, uitloggen, dev-rol) alleen op zeer brede schermen:
   met labels (en een lokaal account + lange naam) past de topbar pas vanaf ±1750px op één regel.
   Daaronder icoon + title/aria-label. */
.btn-theme-label{font-size:.8125rem;font-weight:600;display:none;}
@media(min-width:1800px){.btn-theme-label{display:inline;}}
/* ── Kaarten ─────────────────────────────────────────────────────────────── */
.begra-card{background:var(--begra-white);border:1px solid var(--begra-gray-200);border-radius:var(--radius-md);padding:1.5rem;box-shadow:var(--shadow-sm);transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);}
/* Alleen klikbare kaarten "liften" bij hover; statische panelen (formuliersecties, tabellen) niet —
   dat gaf een onrustig flikkerend effect bij het bewegen van de muis over een pagina. */
a.begra-card:hover,.begra-card.clickable:hover{box-shadow:var(--shadow-md);border-color:var(--begra-gray-300);}
.begra-card>h2:first-child,.begra-card>h3:first-child{margin-top:0;}
/* Opeenvolgende kaarten buiten een formulier (o.a. AdminHealth, Reports) — vaste 1rem tussenruimte.
   Niet binnen grid-containers (dashboard-/info-/module-/capability-grid): daar regelt `gap` de afstand
   en zou een margin de cellen scheef trekken. */
.begra-card+.begra-card{margin-top:1rem;}
/* Expliciete lijst i.p.v. [class*="grid"]: die ving ook niet-grids als .grid-span-all/.form-grid-full. */
:is(.dashboard-grid,.info-grid,.module-grid,.capability-grid,.arch-grid,.kpi-grid,.nm-grid,.form-grid,.doc-grid,.sf-intro-grid,.sf-fork-grid,.sf-checklist-grid,.charts-row,.planning-summary)>.begra-card+.begra-card{margin-top:0;}
/* Formuliersecties (ProjectEdit.razor): meerdere .begra-card's onder elkaar zonder marge liepen
   optisch in elkaar over — duidelijke afstand + iets meer lucht onder de sectiekop. */
form .begra-card+.begra-card{margin-top:1.25rem;}
/* Kaarttitel met scheidingslijn (globaal); opt-out met .no-divider op de h2. */
.begra-card>h2:first-child:not(.no-divider){margin:0 0 1.5rem;padding-bottom:.875rem;border-bottom:1px solid var(--begra-gray-200);font-size:1.0625rem;}
.begra-card>h2:first-child:not(.no-divider)+p{margin:-.75rem 0 1.5rem;font-size:.875rem;color:var(--begra-gray-600);}
.card-subtitle{margin:0 0 .75rem;font-size:.9375rem;font-weight:600;}
/* Vaste actiebalk onderaan een formulier (opslaan/annuleren) — blijft zichtbaar bij lange formulieren. */
.form-actions{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-top:1.5rem;padding:1rem 1.25rem;position:sticky;bottom:0;background:var(--begra-white);border:1px solid var(--begra-gray-200);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:var(--z-sticky);}
.form-actions .validation-message{margin:0;flex-basis:100%;}
@media(max-width:480px){.form-actions .btn-begra-primary,.form-actions .btn-begra-secondary{flex:1 1 auto;}}

/* ── Topbar & sidebar ────────────────────────────────────────────────────── */
.begra-topbar{background:var(--topbar-bg);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--begra-gray-200);min-height:64px;padding:.5rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;position:sticky;top:0;z-index:var(--z-topbar);}
.begra-topbar img{height:38px;} .begra-topbar .spacer{flex:1;}
.begra-topbar>strong{font-size:1.0625rem;letter-spacing:-.01em;}
/* Desktop: menu blijft staan bij scrollen (sticky, schermhoog) en scrolt zelf als het langer is dan het scherm.
   Mobiel overschrijft dit met de uitschuifbare fixed-variant. */
/* Kleuren via de --sidebar-*-tokens (licht in :root, donker in [data-theme="dark"]). */
.begra-sidebar{background:var(--sidebar-bg);color:var(--sidebar-fg);width:280px;position:sticky;top:0;align-self:flex-start;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:1rem .75rem;flex-shrink:0;border-right:1px solid var(--sidebar-border);}
.begra-sidebar .nav-link{display:flex;align-items:center;gap:.75rem;color:var(--sidebar-link);padding:.625rem .875rem;margin:.125rem 0;border-radius:var(--radius-sm);text-decoration:none;font-weight:500;font-size:.9375rem;line-height:1.25;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);position:relative;}
.begra-sidebar .nav-link:hover{color:var(--sidebar-link-hover);background:var(--sidebar-hover-bg);text-decoration:none;}
.begra-sidebar .nav-link.active{color:var(--sidebar-active-fg);background:var(--selected-bg);font-weight:600;}
.begra-sidebar .nav-link.active::before{content:"";position:absolute;left:-.75rem;top:.5rem;bottom:.5rem;width:3px;border-radius:0 3px 3px 0;background:var(--primary-fill);}
.begra-sidebar .nav-link .nav-ico{width:20px;height:20px;flex-shrink:0;color:currentColor;opacity:.8;}
.begra-sidebar .nav-link.active .nav-ico{opacity:1;color:var(--begra-primary-text);}
.begra-sidebar .nav-section{padding:1.125rem .875rem .375rem;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sidebar-section);font-weight:700;}
.begra-sidebar .nav-section:first-child{padding-top:.25rem;}
.page{display:flex;min-height:100vh;}
/* min-width:0 is nodig: een flex-item met flex:1 krimpt standaard niet onder zijn intrinsieke
   inhoudsbreedte (min-width:auto) — met brede, niet-wrappende content zoals .status-tabs
   (nowrap-pills) duwde .main de hele pagina breder dan de viewport, met horizontale overflow
   en afgesneden content op mobiel tot gevolg. */
.main{flex:1;min-width:0;display:flex;flex-direction:column;} .content{padding:1.5rem;flex:1;}
/* Lichte pagina-intrede (fade + 4px omhoog) op het eerste blok van elke pagina — subtiel genoeg om
   niet op te vallen als animatie, wel genoeg om een routewissel als "nieuw" te laten aanvoelen.
   Alleen het eerste kind, zodat later gerenderde content (lazy lists, dialogs) niet steeds opnieuw
   inschuift. prefers-reduced-motion: geen beweging.
   Een open contextmenu/dialoog vóór de paginakop (Home, Planning, Projectdetail) wordt zelf even het
   eerste kind: de tweede selector houdt dan dezelfde animatie op de kop, zodat die bij het sluiten
   niet opnieuw afspeelt (zelfde animation-name = geen herstart). */
.content>:first-child:not(.ctx-backdrop):not(.dialog-backdrop),
.content>:is(.ctx-backdrop,.dialog-backdrop):first-child+:is(.ctx-menu,.dialog)+*{animation:pageIn var(--dur-enter) var(--ease) both;}
@keyframes pageIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.content>:first-child:not(.ctx-backdrop):not(.dialog-backdrop),.content>:is(.ctx-backdrop,.dialog-backdrop):first-child+:is(.ctx-menu,.dialog)+*{animation:none;}}
/* Maatvoering uit de gedeelde pill-basis (onderaan), zodat statusbadge en tone-pillen naast elkaar even hoog zijn. */
.status-badge{letter-spacing:.01em;background:var(--status-1-bg);color:var(--status-1-fg);}
/* Kleuren uit --status-N-bg/-fg (contrastcorrecties zitten in de tokens). */
.status-badge.s1{background:var(--status-1-bg);color:var(--status-1-fg);} .status-badge.s4{background:var(--status-4-bg);color:var(--status-4-fg);} .status-badge.s5{background:var(--status-5-bg);color:var(--status-5-fg);} .status-badge.s6{background:var(--status-6-bg);color:var(--status-6-fg);} .status-badge.s7{background:var(--status-7-bg);color:var(--status-7-fg);} .status-badge.s8{background:var(--status-8-bg);color:var(--status-8-fg);} .status-badge.s9{background:var(--status-9-bg);color:var(--status-9-fg);} .status-badge.s10{background:var(--status-10-bg);color:var(--status-10-fg);} .status-badge.s11{background:var(--status-11-bg);color:var(--status-11-fg);}
/* NAV-koppelingsicoon (NavSyncBadge: link = ooit gekoppeld, refresh = actief hersynchroniseerd): rond icoonvlak, geen tekstpill — kleuren via de neutral-tone. */
.badge-nav{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:var(--radius-pill);background:var(--tone-neutral-bg);color:var(--tone-neutral-fg);border:1px solid var(--begra-gray-300);font-size:.9375rem;line-height:1;cursor:default;flex-shrink:0;}
.col-nav-icon{width:1%;white-space:nowrap;text-align:center;padding-left:.75rem;padding-right:.75rem;}
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;}
.info-card{background:var(--begra-white);border:1px solid var(--begra-gray-200);border-radius:var(--radius-md);padding:1.25rem;box-shadow:var(--shadow-sm);}
.info-card>h2:first-child,.info-card>h3:first-child{margin-top:0;}
.begra-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--begra-white);border:1px solid var(--begra-gray-200);border-radius:var(--radius-md);overflow:hidden;font-size:.9375rem;}
.begra-table th,.begra-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--begra-gray-200);vertical-align:middle;}
.begra-table th{background:var(--table-head-bg);font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--begra-gray-600);white-space:nowrap;}
.begra-table th button{background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:.25rem;font-weight:700;}
.begra-table tbody tr:last-child td{border-bottom:none;}
.begra-table tbody tr{transition:background-color var(--dur) var(--ease);}
.begra-table tbody tr:hover{background:var(--begra-gray-100);} .table-scroll{overflow-x:auto;border-radius:var(--radius-md);position:relative;}
.begra-table tbody tr.clickable{cursor:pointer;}
.begra-table tbody tr.sub td{color:var(--begra-gray-600);padding-left:2.5rem;font-size:.875rem;background:var(--begra-gray-100);}
.begra-table td .btn-begra-secondary,.begra-table td .btn-begra-primary,.begra-table td .btn-begra-danger-outline{min-height:34px;padding:.3rem .75rem;font-size:.8125rem;}
/* Dashboard (Home.razor): kaartkoppen in kleine kapitalen (zoals de tabelkoppen); cijfers rechts tabulair. */
.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;margin-bottom:1.5rem;align-items:start;}
.dashboard-card{display:flex;flex-direction:column;}
.dashboard-card h2{font-size:.75rem;margin:0 0 .75rem;color:var(--begra-gray-600);text-transform:uppercase;letter-spacing:.1em;font-weight:700;}
.dashboard-table{font-size:.875rem;} .dashboard-table th,.dashboard-table td{padding:.5rem .75rem;}
.dashboard-table td:last-child{font-variant-numeric:tabular-nums;font-weight:600;text-align:right;white-space:nowrap;}
@media (max-width:1024px){.dashboard-grid{grid-template-columns:1fr;}}
.validation-message{color:var(--tone-danger-fg);font-size:.8125rem;font-weight:500;margin-top:.375rem;display:flex;align-items:flex-start;gap:.375rem;line-height:1.4;}
/* --begra-white = wit (light) resp. kaartkleur (dark): contrasteert in beide thema's met de tone-fg. */
.validation-message::before{content:"!";flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:50%;background:var(--tone-danger-fg);color:var(--begra-white);font-size:.6875rem;font-weight:700;margin-top:.1rem;}
.status-tabs{display:flex;gap:.375rem;flex-wrap:wrap;margin-bottom:1rem;}
/* ── Chips: één stijl voor toggle-pillen ─────────────────────────────────────
   .chip is de klasse voor nieuwe markup; .filter-chip (MonteurAccountsOverview), .status-tabs button
   (Projecten) en .settings-nav a (Instellingen) delen dezelfde maat, rand, hover en aan-staat.
   Geen schaduw op de aan-staat: die lekte als blauwe gloed onder de statusgekleurde tabs. */
.chip,.filter-chip,.status-tabs button,.settings-nav a{display:inline-flex;align-items:center;gap:.375rem;min-height:36px;padding:.375rem .75rem;border:1px solid var(--begra-gray-200);border-radius:var(--radius-pill);background:var(--begra-white);color:var(--begra-gray-900);font:inherit;font-size:.8125rem;font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur-fast) var(--ease);}
.chip:not(.active):hover,.filter-chip:not(.active):hover,.status-tabs button:not(.active):hover,.settings-nav a:hover{border-color:var(--begra-primary);background:var(--begra-primary-light);color:var(--begra-primary-text);text-decoration:none;}
.chip.active,.chip[aria-pressed="true"],.filter-chip.active,.status-tabs button.active{background:var(--begra-primary);border-color:var(--begra-primary);color:var(--on-primary);}
[data-theme="dark"] :is(.chip,.filter-chip,.status-tabs button):not(.active),[data-theme="dark"] .settings-nav a{background:var(--begra-surface);border-color:var(--begra-gray-300);}
[data-theme="dark"] .chip:not(.active):hover,[data-theme="dark"] .filter-chip:not(.active):hover,[data-theme="dark"] .status-tabs button:not(.active):hover,[data-theme="dark"] .settings-nav a:hover{background:var(--primary-soft);border-color:var(--begra-primary-text);color:var(--begra-dark);}
/* Segmented control (knoppengroep met één actieve keuze, o.a. de zoomknoppen van Planning). */
.segmented{display:inline-flex;flex-wrap:wrap;gap:.5rem;}
.segmented>a{text-decoration:none;}
.segmented>button,.segmented>a,.planning-zoom button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-h);padding:.5rem .875rem;border:1px solid var(--begra-gray-300);border-radius:var(--radius-sm);background:var(--begra-white);color:var(--begra-dark);font:inherit;font-weight:600;cursor:pointer;box-shadow:var(--shadow-sm);transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);}
.segmented>button:not(.active):hover,.segmented>a:not(.active):hover,.planning-zoom button:not(.active):hover{background:var(--begra-gray-100);border-color:var(--begra-gray-400);}
.segmented>button.active,.segmented>button[aria-pressed="true"],.segmented>a.active,.planning-zoom button.active{background:var(--begra-primary);border-color:var(--begra-primary);color:var(--on-primary);}
[data-theme="dark"] .segmented>button:not(.active),[data-theme="dark"] .segmented>a:not(.active),[data-theme="dark"] .planning-zoom button:not(.active){background:var(--begra-surface);}
[data-theme="dark"] .segmented>button:not(.active):hover,[data-theme="dark"] .segmented>a:not(.active):hover,[data-theme="dark"] .planning-zoom button:not(.active):hover{background:var(--surface-hover);border-color:var(--border-hover);}
@media (max-width:1024px){.begra-sidebar{width:240px;}}
/* Hamburger knop: alleen zichtbaar op mobiel — zelfde idioom als .btn-icon, maar 44px tikdoel. */
.btn-hamburger{display:none;position:relative;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);min-height:44px;min-width:44px;padding:.25rem .5rem;cursor:pointer;font-size:1.375rem;line-height:1;color:var(--begra-dark);align-items:center;justify-content:center;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.btn-hamburger:hover{background:var(--begra-gray-100);border-color:var(--begra-gray-200);}
[data-theme="dark"] .btn-hamburger:hover{background:rgba(255,255,255,.06);border-color:var(--begra-gray-300);}
/* Sidebar backdrop overlay */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:var(--overlay-bg);z-index:calc(var(--z-sidebar) - 1);animation:fadeIn var(--dur-enter) var(--ease);}
/* ── Mobiel (≤768px) ────────────────────────────────────────────────────── */
/* Gedrag ongewijzigd (uitschuifbare sidebar + backdrop); paddings gelijkgetrokken op 1rem-ritme. */
@media (max-width:768px){
  .btn-hamburger{display:flex;}
  .begra-sidebar{position:fixed;top:0;left:0;transform:translateX(-100%);visibility:hidden;height:100vh;height:100dvh;width:280px;z-index:var(--z-sidebar);padding:1rem .75rem;transition:transform var(--dur-slow) var(--ease),visibility 0s linear var(--dur-slow);overflow-y:auto;min-height:0;box-shadow:var(--shadow-lg);}
  .begra-sidebar.sidebar-open{transform:none;visibility:visible;transition:transform var(--dur-slow) var(--ease),visibility 0s;}
  /* Altijd in de DOM op mobiel zodat ook het sluiten uitfadet (visibility pas na de fade weg). */
  .sidebar-backdrop{display:block;opacity:0;visibility:hidden;pointer-events:none;animation:none;transition:opacity var(--dur-slow) var(--ease-in),visibility 0s linear var(--dur-slow);}
  .sidebar-backdrop.sidebar-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--dur-slow) var(--ease),visibility 0s;}
  .content{padding:1rem;}
  .page-header{margin-bottom:1rem;} .begra-card{padding:1.25rem 1rem;} .filter-bar{padding:.875rem 1rem;margin-bottom:1rem;}
  .form-actions{padding:.75rem 1rem;margin-top:1rem;}
  .begra-table{font-size:.875rem;}
  .begra-table th,.begra-table td{padding:.5rem .625rem;}
  .status-tabs button{padding:.375rem .625rem;}
  /* Topbar-regels voor mobiel staan in het "Compacte mobiele topbar"-blok onderaan (één bron). */
  .toast-host{top:calc(var(--topbar-h, 52px) + .5rem);right:.75rem;width:calc(100% - 1.5rem);}
  .page-state{padding:2.5rem 1rem;}
}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.5rem 1.25rem;align-items:start;}
.form-grid>div>label{margin-bottom:.5rem;}
.form-grid-full{grid-column:1/-1;}
.form-submit-row{margin-top:1.5rem;}
/* Checkbox/radio als "chip": hele regel klikbaar, duidelijke hover en zichtbare aan-staat. */
label.checkbox,label.radio{display:flex;align-items:center;gap:.625rem;font-weight:500;font-size:.9375rem;margin:0;padding:.5rem .75rem;border:1px solid var(--begra-gray-200);border-radius:var(--radius-sm);background:var(--input-bg);cursor:pointer;min-height:44px;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
label.checkbox:hover,label.radio:hover{border-color:var(--begra-gray-400);}
label.checkbox:has(input:checked),label.radio:has(input:checked){border-color:var(--begra-primary);background:var(--begra-primary-light);color:var(--begra-primary-text);font-weight:600;}
[data-theme="dark"] label.checkbox:has(input:checked),[data-theme="dark"] label.radio:has(input:checked){background:var(--selected-bg);color:var(--begra-dark);border-color:var(--begra-primary-text);}
label.checkbox:has(input:focus-visible),label.radio:has(input:focus-visible){outline:2px solid var(--focus-ring-solid);outline-offset:2px;box-shadow:0 0 0 3px var(--focus-ring);}
label.checkbox:has(input:disabled),label.radio:has(input:disabled){opacity:.6;cursor:not-allowed;}
label.checkbox input,label.radio input{width:auto;}
/* Native checkbox-vinkje was nog het kale OS-default vierkantje binnen de chip hierboven —
   groter vlak vinkje (gevuld blauw + wit haakje) i.p.v. het standaard 13px-checkboxje. */
label.checkbox input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:1.35rem;height:1.35rem;min-height:0;flex-shrink:0;margin:0;padding:0;border:2px solid var(--input-border);border-radius:var(--radius-xs);background:var(--begra-white);box-shadow:none;position:relative;cursor:pointer;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
label.checkbox input[type="checkbox"]:checked{background:var(--primary-fill);border-color:var(--primary-fill);}
label.checkbox input[type="checkbox"]:checked::after{content:"";position:absolute;left:50%;top:44%;width:.4rem;height:.75rem;border:solid var(--on-primary);border-width:0 .17rem .17rem 0;transform:translate(-50%,-55%) rotate(45deg);}
label.checkbox input[type="checkbox"]:disabled{cursor:not-allowed;}
/* Losstaande aan/uit-schakelaar voor status-toggles in tabellen (leverancier/gebruiker actief) —
   i.p.v. een kale <input type="checkbox"> zonder enige styling tussen tabelcellen. */
/* Uit-stand via --input-border (>=3:1 naast de kaart; --begra-gray-300 haalde 1.6:1), aan-stand via --primary-fill (ook in dark >=3:1).
   input.switch: anders won input[type="checkbox"] (element+attribuut weegt zwaarder dan .switch) met
   width/height 1.125rem en werd de schakelaar een 18px-vierkantje. */
input.switch,.switch{appearance:none;-webkit-appearance:none;width:2.5rem;height:1.4rem;min-height:0;border-radius:var(--radius-pill);background:var(--input-border);border:1px solid var(--input-border);position:relative;cursor:pointer;flex-shrink:0;vertical-align:middle;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.switch::after{content:"";position:absolute;top:1px;left:1px;width:1.15rem;height:1.15rem;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--dur) var(--ease);}
.switch:checked{background:var(--primary-fill);border-color:var(--primary-fill);}
.switch:checked::after{transform:translateX(1.1rem);}
.switch:focus-visible{outline:2px solid var(--focus-ring-solid);outline-offset:2px;box-shadow:0 0 0 3px var(--focus-ring);}
.switch:disabled{opacity:.5;cursor:not-allowed;}
/* Paginakop: titel links, acties rechts; de intro-p onder de h1 gedempt en zonder eigen marge,
   zodat kop + intro één blok vormen met vaste ruimte (1.5rem) tot de inhoud eronder. */
.page-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem 1rem;flex-wrap:wrap;margin-bottom:1.5rem;}
.page-header h1{margin:0;} .page-header>p{margin:-.25rem 0 0;color:var(--begra-gray-600);font-size:.9375rem;flex-basis:100%;}
.page-header>div:first-child{min-width:0;} .page-header>div:first-child>p{margin:.25rem 0 0;color:var(--begra-gray-600);}
/* Knoppenbalk in de page-header (o.a. ProjectDetail.razor: Status wijzigen/Wijzigen/QR-code/Annuleren)
   — globaal, want .page-header wordt door 17 pagina's gedeeld (CSS-isolatie zou dit niet toepassen). */
/* Terug-link boven de paginakop van detailpagina's (project, leverancier). */
.detail-back{margin-bottom:.5rem;font-size:.875rem;}
.page-header-actions{display:flex;gap:.625rem;align-items:center;flex-wrap:wrap;}
/* Knoppen op hun eigen breedte: "flex:1 1 150px" rekte ze op desktop op en liet ze per twee
   stapelen (Projecten, Leverancierdetail, Tarieven, Logging). Op ≤480px verdelen ze de breedte (onderaan). */
.page-header-actions>.btn-begra-primary,.page-header-actions>.btn-begra-secondary,.page-header-actions>.btn-begra-danger-outline{flex:0 0 auto;}
@media(max-width:480px){.page-header-actions{width:100%;}}
/* Tekstknop naast een veld/regel (o.a. "Wissen" in ProjectEdit): onderstreping pas bij hover, zoals links. */
.link-button{background:none;border:none;color:var(--begra-primary-text);cursor:pointer;font:inherit;font-size:.875rem;font-weight:500;padding:0 0 0 .75rem;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px;transition:text-decoration-color var(--dur) var(--ease),color var(--dur) var(--ease);}
.link-button:hover{text-decoration-color:currentColor;} .link-button:disabled{opacity:.5;cursor:not-allowed;text-decoration:none;}
.doc-thumb{width:64px;height:90px;object-fit:contain;background:var(--begra-gray-100);border:1px solid var(--begra-gray-200);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);display:block;}
/* ── Toasts ─────────────────────────────────────────────────────────────── */
/* Onder de (sticky) topbar i.p.v. eroverheen: toasts bedekten bel, thema en gebruiker.
   --topbar-h wordt live gemeten (interop.js), ook als de topbar wrapt. */
.toast-host{position:fixed;top:calc(var(--topbar-h, 64px) + .75rem);right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:var(--z-toast);max-width:360px;width:calc(100% - 2rem);pointer-events:none;}
.toast{background:var(--begra-surface);border:1px solid var(--begra-gray-200);border-left:4px solid var(--begra-blue);border-radius:var(--radius-md);padding:.75rem .875rem .75rem 1rem;box-shadow:var(--shadow-lg);display:flex;align-items:flex-start;gap:.625rem;animation:toastIn var(--dur-enter) var(--ease);pointer-events:auto;}
@keyframes toastIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(12px)}}
.toast.is-leaving{animation:toastOut var(--dur-exit) var(--ease-in) forwards;pointer-events:none;}
.toast-info{border-left-color:var(--begra-blue);}
.toast-success{border-left-color:var(--begra-success);}
.toast-warning{border-left-color:var(--begra-orange);}
.toast-error{border-left-color:var(--begra-red);}
.toast-body{flex:1;min-width:0;font-size:.875rem;line-height:1.45;color:var(--begra-dark);overflow-wrap:anywhere;}
.toast-body strong{display:block;color:var(--begra-dark);font-size:.9375rem;font-weight:600;margin-bottom:.125rem;}
.toast-body small{color:var(--begra-gray-600);display:block;margin-top:.25rem;}
.toast-close{background:none;border:1px solid transparent;border-radius:var(--radius-sm);font-size:1.125rem;cursor:pointer;color:var(--begra-gray-600);line-height:1;padding:.25rem .375rem;margin:-.125rem -.25rem 0 0;flex-shrink:0;min-height:0;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);}
.toast-close:hover{color:var(--begra-dark);background:var(--begra-gray-100);}
[data-theme="dark"] .toast-close:hover{background:rgba(255,255,255,.06);}
/* .error-banner: gedeeld tussen MainLayout.razor (ErrorBoundary-fallback) en Projects.razor
   (loadError-banner) — was voorheen 2x gedupliceerd als inline style zonder dark-mode-variant.
   Geen icoon, wel een rode accentbalk links (zelfde idioom als .toast-error). */
.error-banner{background:rgba(229,57,53,.08);border:1px solid rgba(229,57,53,.35);border-left:4px solid var(--begra-red);border-radius:var(--radius-md);padding:.875rem 1.125rem;color:var(--tone-danger-fg);font-size:.9375rem;line-height:1.5;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;}
.error-banner p{margin:0;} .error-banner .btn-begra-secondary,.error-banner .btn-begra-primary{margin-left:auto;}
[data-theme="dark"] .error-banner{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.3);border-left-color:#F87171;}
/* Iets donkerder rood dan --begra-red: die geeft met witte tekst maar 4.23:1 (te laag voor normale tekst). */
.blazor-error-boundary{background:var(--status-8-bg);color:var(--status-8-fg);padding:.875rem 1.125rem;border-radius:var(--radius-md);font-size:.9375rem;line-height:1.5;}
.blazor-error-boundary::after{content:"Er is een fout opgetreden.";}
#blazor-error-ui{background:var(--status-8-bg);color:var(--status-8-fg);bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:var(--z-error);}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}
#blazor-error-ui .reload{color:inherit;text-decoration:underline;}

/* ── Laad- en leegstaat ─────────────────────────────────────────────────── */
/* Gestippelde rand = "hier staat (nog) niets"; het icoon in een ronde chip zodat het niet als los emoji zweeft. */
.page-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.625rem;padding:3.5rem 1.5rem;background:var(--begra-white);border:1px dashed var(--begra-gray-300);border-radius:var(--radius-md);color:var(--begra-gray-600);font-size:.9375rem;line-height:1.5;text-align:center;}
.page-state .state-icon{display:inline-flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--begra-gray-100);color:var(--begra-gray-600);line-height:1;margin-bottom:.25rem;}
[data-theme="dark"] .page-state .state-icon{background:var(--begra-gray-200);}
.page-state p{margin:0;max-width:44ch;} .page-state strong{color:var(--begra-dark);font-weight:600;}
.page-state .btn-begra-primary,.page-state .btn-begra-secondary{margin-top:.5rem;}

/* ── Zoekbalk ───────────────────────────────────────────────────────────── */
.search-field{position:relative;}
.search-field .search-icon{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);font-size:1rem;line-height:1;pointer-events:none;color:var(--begra-gray-500);transition:color var(--dur) var(--ease);}
.search-field:focus-within .search-icon{color:var(--begra-primary-text);}
.search-field input{padding-left:2.5rem;padding-right:2.5rem;border-radius:var(--radius-sm);border:1px solid var(--input-border);background:var(--input-bg);}
.search-field input:focus{border-color:var(--begra-primary);box-shadow:0 0 0 3px var(--focus-ring);}
.search-field .search-clear{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:none;border-radius:50%;cursor:pointer;color:var(--begra-gray-600);font-size:1rem;width:1.75rem;height:1.75rem;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;min-height:0;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);}
.search-field .search-clear:hover{color:var(--begra-dark);background:var(--begra-gray-100);}
[data-theme="dark"] .search-field .search-clear:hover{background:rgba(255,255,255,.08);}

/* ── Filterbar (zoek + filters naast elkaar) ───────────────────────────────── */
.filter-bar{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:flex-end;background:var(--begra-white);border:1px solid var(--begra-gray-200);border-radius:var(--radius-md);padding:1rem 1.25rem;margin-bottom:1.25rem;box-shadow:var(--shadow-sm);}
.filter-bar .filter-field{display:flex;flex-direction:column;gap:.375rem;min-width:160px;flex:1;}
/* Zelfde label-idioom als het globale label (regel hierboven): klein, vet, donkergrijs. */
.filter-bar .filter-field label{font-size:.8125rem;font-weight:600;letter-spacing:.005em;color:var(--begra-gray-900);margin-bottom:0;}
.filter-bar .filter-field>label.checkbox,.filter-bar .filter-field>label.radio{color:var(--begra-dark);}
.filter-bar .filter-actions{display:flex;align-items:flex-end;gap:.5rem;margin-left:auto;}

/* ── Dialog / Modal ─────────────────────────────────────────────────────── */
.dialog-backdrop{position:fixed;inset:0;background:var(--overlay-bg);z-index:var(--z-dialog);animation:fadeIn var(--dur-enter) var(--ease);}
.dialog{--dialog-pad:1.75rem;--dialog-bg:var(--begra-white);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:calc(var(--z-dialog) + 1);background:var(--dialog-bg);border:1px solid var(--begra-gray-200);border-radius:var(--radius-lg);padding:var(--dialog-pad);width:min(640px,calc(100vw - 2rem));max-height:calc(100vh - 4rem);max-height:calc(100dvh - 4rem);overflow-y:auto;box-shadow:var(--shadow-lg);animation:slideUp var(--dur-enter) var(--ease);}
/* Eén titelstijl: h2.dialog-title (Dialog.razor) en eventuele losse h2 in dialooginhoud. */
.dialog h2,.dialog .dialog-title{margin:0 0 1.25rem;font-size:1.125rem;}
.dialog .dialog-title+.form-grid,.dialog h2+.form-grid{margin-top:0;}
.dialog .validation-message{margin-top:1rem;}
/* Voettekst: knoppen rechts, eventuele foutmelding/hint links op dezelfde regel; stapelt op smalle schermen.
   Binnen een scrollende dialoog blijft de knoppenrij onderaan zichtbaar (sticky over de dialoog-padding heen). */
.dialog-footer{display:flex;gap:.625rem;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--begra-gray-200);}
.dialog .dialog-footer{position:sticky;bottom:calc(-1 * var(--dialog-pad));margin-bottom:calc(-1 * var(--dialog-pad));padding-bottom:var(--dialog-pad);background:var(--dialog-bg);z-index:1;}
.dialog .dialog-footer .validation-message,.dialog-footer .validation-message{margin:0 auto 0 0;}
/* Na de basisregel, anders wint die (zelfde specificiteit) van de mobiele padding. */
@media(max-width:768px){.dialog{--dialog-pad:1.25rem;}}
@media(max-width:480px){
  .dialog-footer .btn-begra-primary,.dialog-footer .btn-begra-secondary,.dialog-footer .btn-begra-danger-outline{flex:1 1 auto;}
  .dialog{max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);}
}
[data-theme="dark"] .dialog{--dialog-bg:var(--begra-surface);border-color:var(--begra-gray-300);}
[data-theme="dark"] .dialog .dialog-footer,[data-theme="dark"] .dialog-footer{border-top-color:var(--begra-gray-300);}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
/* Uitloop: component zet .is-leaving en verwijdert het element na ~150ms (LeaveTransition). */
@keyframes fadeOut{to{opacity:0}}
@keyframes dialogOut{to{opacity:0;transform:translate(-50%,-48%) scale(.98)}}
.dialog-backdrop.is-leaving{animation:fadeOut var(--dur-exit) var(--ease-in) forwards;pointer-events:none;}
.dialog.is-leaving{animation:dialogOut var(--dur-exit) var(--ease-in) forwards;pointer-events:none;}

/* ── Fieldset ───────────────────────────────────────────────────────────── */
fieldset{border:1px solid var(--begra-gray-200);border-radius:var(--radius-md);padding:1rem 1.25rem 1.25rem;margin:0;background:rgba(0,0,0,.015);}
fieldset legend{font-size:.8125rem;font-weight:700;letter-spacing:.02em;color:var(--begra-gray-900);padding:0 .5rem;}
fieldset:disabled{opacity:.6;}
[data-theme="dark"] fieldset{background:rgba(255,255,255,.02);}

/* ── Dark mode: tabel (kop via --table-head-bg, randen/achtergrond via de grijs-tokens) ── */
[data-theme="dark"] .begra-table tbody tr:hover{background:var(--begra-surface);}

/* ── Tabel rij hover kleur in light mode ───────────────────────────────── */
.begra-table tbody tr.clickable:hover{background:var(--begra-primary-light);}
[data-theme="dark"] .begra-table tbody tr.clickable:hover{background:var(--selected-bg);}
[data-theme="dark"] .begra-table tbody tr.clickable:hover td{color:var(--begra-dark);}

/* ── Responsive: stacked filterbar op mobiel ───────────────────────────── */
/* Ook de smalle/middelbrede filtervelden over de volle breedte (stond dubbel in AdminAudit en AdminLogs). */
@media(max-width:640px){
  .filter-bar{flex-direction:column;}
  .filter-bar .filter-field,.filter-bar .filter-field.filter-field-sm,.filter-bar .filter-field.filter-field-md{min-width:100%;max-width:none;flex:1 1 100%;}
  .filter-bar .filter-field input,.filter-bar .filter-field select{width:100%;}
  .filter-bar .filter-actions{margin-left:0;width:100%;}
}

/* ── Login-scherm ───────────────────────────────────────────────────────── */
/* Altijd lichte Begra-uitstraling, onafhankelijk van het globale thema — daarom hier bewust
   vaste kleuren i.p.v. de thema-tokens (die kleuren in dark mode mee). Zachte blauwe gloed
   op de achtergrond, kaart met grote afronding + zware schaduw, velden en knop op 44px.
   De tokens worden hier op hun lichte waarden teruggezet: anders erfde het loginscherm in dark mode de
   lichtblauwe focusring (2.5:1 op wit) en de zware zwarte dark-schaduw. */
.auth-shell{color-scheme:light;--begra-white:#FFF;--begra-surface:#FFF;--begra-dark:#1A1A1A;--begra-gray-100:#F5F5F5;--begra-gray-200:#E5E5E5;--begra-gray-300:#CCC;--begra-gray-400:#999;--begra-gray-500:#6B7280;--begra-gray-600:#666;--begra-gray-900:#333;
  --begra-primary-text:var(--begra-primary);--focus-ring:rgba(0,92,185,.22);--focus-ring-solid:#005CB9;--input-bg:#FFF;--input-border:#8C8C8C;--input-border-hover:#666;--primary-fill:var(--begra-primary);
  --tone-danger-bg:#FDECEA;--tone-danger-fg:#B3261E;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06);--shadow-md:0 4px 12px rgba(15,23,42,.08),0 1px 3px rgba(15,23,42,.06);--shadow-lg:0 16px 48px rgba(15,23,42,.16),0 4px 12px rgba(15,23,42,.08);}
.auth-shell{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1.5rem;color:#1A1A1A;background-color:#F3F4F6;background-image:radial-gradient(60% 50% at 50% 0%,rgba(0,92,185,.12),transparent 70%),linear-gradient(180deg,#F8FAFC 0%,#EEF2F7 100%);}
.auth-card{background:#FFFFFF;border:1px solid #E5E7EB;border-radius:var(--radius-lg);padding:2.25rem 2rem 2rem;max-width:420px;width:100%;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:1rem;color:#1A1A1A;animation:authIn var(--dur-enter) var(--ease);}
@keyframes authIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.auth-card .auth-logo{height:48px;width:auto;align-self:center;display:block;margin-bottom:.5rem;}
.auth-card h1{margin:0 0 .25rem;font-size:1.375rem;letter-spacing:-.015em;text-align:center;color:#1A1A1A;}
.auth-card h1+p{margin-top:-.5rem;margin-bottom:.5rem;}
.auth-card p{margin:0;color:#4B5563;font-size:.9375rem;line-height:1.5;text-align:center;}
.auth-card label{display:flex;flex-direction:column;gap:.375rem;font-weight:600;font-size:.8125rem;letter-spacing:.005em;color:#374151;margin:0;text-align:left;}
.auth-card input,.auth-card select,.auth-card textarea{background-color:#FFFFFF;color:#1A1A1A;border:1px solid var(--input-border);min-height:var(--control-h-touch);font-size:1rem;box-shadow:none;}
.auth-card input:hover:not(:focus),.auth-card select:hover:not(:focus){border-color:var(--input-border-hover);}
.auth-card input:focus,.auth-card select:focus{border-color:var(--begra-primary);box-shadow:0 0 0 3px rgba(0,92,185,.22);}
.auth-card select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");}
.auth-card form{display:flex;flex-direction:column;gap:1rem;}
.auth-card .btn-begra-primary,.auth-card .btn-begra-secondary{width:100%;min-height:44px;font-size:1rem;text-align:center;display:inline-flex;justify-content:center;align-items:center;text-decoration:none;}
.auth-card .btn-begra-secondary{background:#FFFFFF;color:#1A1A1A;border-color:#D1D5DB;}
.auth-card .btn-link{align-self:center;color:var(--begra-primary-dark);font-size:.875rem;}
.auth-card .validation-message{color:#B91C1C;justify-content:center;margin:0;} .auth-card .validation-message::before{background:#B91C1C;color:#fff;}
/* Kleine voetnoot onder de knop (o.a. "Dev-modus actief") — vervangt de inline font-size in Login.razor. */
.auth-card .auth-note{font-size:.8125rem;color:#6B7280;}
/* E-mailadres in de wachtwoordstap: als "chip" boven het veld, zodat duidelijk is voor wélk account. */
.auth-card form>p:first-of-type{font-size:.875rem;font-weight:600;color:#1A1A1A;background:#F3F4F6;border:1px solid #E5E7EB;border-radius:var(--radius-pill);padding:.375rem .875rem;align-self:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:480px){.auth-shell{padding:1rem;align-items:flex-start;padding-top:2.5rem;} .auth-card{padding:1.75rem 1.25rem 1.5rem;}}

/* Project detail — collapsible chapters & PDF doc grid */
details.chapter { margin-bottom: 1rem; }
details.chapter > summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; margin: -.5rem -.75rem; padding: .5rem .75rem; border-radius: var(--radius-sm); font-size: 1rem; list-style: none; user-select: none; transition: background-color var(--dur) var(--ease); }
details.chapter > summary:hover { background: var(--begra-gray-100); }
details.chapter > summary:focus-visible { outline: 2px solid var(--focus-ring-solid); outline-offset: 2px; box-shadow: 0 0 0 3px var(--focus-ring); }
details.chapter > summary::-webkit-details-marker { display: none; }
/* Chevron i.p.v. +/-: draait mee bij openen. */
details.chapter > summary::before, details.chapter-inner > summary::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; background: currentColor; color: var(--begra-gray-600); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform var(--dur-slow) var(--ease), color var(--dur) var(--ease); }
details.chapter[open] > summary::before, details.chapter-inner[open] > summary::before { transform: rotate(90deg); color: var(--begra-primary-text); }
details.chapter[open] > summary { margin-bottom: .5rem; }
/* Hoogte-animatie bij openen/sluiten (progressive enhancement: zonder ::details-content-support
   klapt <details> gewoon direct open zoals voorheen). */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete; }
  details[open]::details-content { block-size: auto; }
}
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-top: .75rem; }
.doc-tile { display: block; border: 1px solid var(--begra-gray-200); border-radius: var(--radius-md); overflow: hidden; background: var(--begra-white); text-decoration: none; color: inherit; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.doc-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--begra-gray-300); text-decoration: none; }
.doc-tile img { width: 100%; height: 240px; object-fit: contain; background: var(--begra-gray-100); display: block; }
.doc-meta { padding: .5rem .75rem; }
.doc-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-sub { font-size: .8rem; color: var(--begra-gray-600); }

/* ── Guided Tour ────────────────────────────────────────────────────────── */
/* Uitgelicht element: focusring in accentkleur + de rest van de pagina gedimd via één reusachtige spread-schaduw. */
.mpt-highlight{position:relative!important;z-index:var(--z-tour)!important;border-radius:var(--radius-sm);box-shadow:0 0 0 3px var(--begra-primary),0 0 0 6px rgba(0,92,185,.18),0 0 0 9999px rgba(0,0,0,.62)!important;}
#mp-tour-tooltip{display:none;position:fixed;width:340px;max-width:calc(100vw - 32px);background:var(--begra-surface);border:1px solid var(--begra-gray-200);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--shadow-lg);z-index:calc(var(--z-tour) + 1);font-family:inherit;color:var(--begra-dark);animation:mptFadeIn var(--dur-enter) var(--ease);}
[data-theme="dark"] #mp-tour-tooltip{border-color:var(--begra-gray-300);}
@keyframes mptFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.mpt-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.75rem;}
.mpt-count{color:var(--begra-gray-600);background:var(--begra-gray-100);font-variant-numeric:tabular-nums;}
[data-theme="dark"] .mpt-count{background:var(--begra-gray-200);}
.mpt-close{background:none;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;font-size:1.125rem;color:var(--begra-gray-600);padding:.25rem .375rem;margin:-.125rem -.25rem 0 0;line-height:1;min-height:0;width:auto;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);}
.mpt-close:hover{color:var(--begra-dark);background:var(--begra-gray-100);}
[data-theme="dark"] .mpt-close:hover{background:rgba(255,255,255,.06);}
.mpt-title{margin:0 0 .5rem;font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--begra-gray-900);}
.mpt-title:focus{outline:none;}
.mpt-body{margin:0 0 1.125rem;font-size:.9375rem;color:var(--begra-dark);line-height:1.55;}
.mpt-footer{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;}
.mpt-spacer{flex:1;}
/* Knoppen spiegelen .btn-begra-secondary/-primary (zelfde radius, hoogte, hover en active-dip). */
.mpt-prev,.mpt-next,.mpt-finish{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;border-radius:var(--radius-sm);font-weight:600;font-size:.875rem;line-height:1.2;cursor:pointer;min-height:38px;font-family:inherit;white-space:nowrap;user-select:none;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);}
.mpt-prev:active,.mpt-next:active,.mpt-finish:active{transform:translateY(1px);}
.mpt-prev{background:var(--begra-white);color:var(--begra-dark);border:1px solid var(--begra-gray-300);box-shadow:var(--shadow-sm);}
.mpt-prev:hover{background:var(--begra-gray-100);border-color:var(--begra-gray-400);}
[data-theme="dark"] .mpt-prev{background:var(--begra-surface);} [data-theme="dark"] .mpt-prev:hover{background:var(--surface-hover);border-color:var(--border-hover);}
.mpt-next{background:var(--begra-primary);color:var(--on-primary);border:1px solid var(--begra-primary);box-shadow:0 1px 2px rgba(0,92,185,.25);}
.mpt-next:hover{background:var(--begra-primary-dark);border-color:var(--begra-primary-dark);box-shadow:0 3px 8px rgba(0,92,185,.3);}
/* --status-6-bg (i.p.v. --status-6, dat met witte tekst maar 3.19:1 haalt). */
.mpt-finish{background:var(--status-6-bg);color:var(--status-6-fg);border:1px solid var(--status-6-bg);box-shadow:0 1px 2px rgba(0,117,58,.25);}
.mpt-finish:hover{background:color-mix(in srgb,var(--status-6-bg) 82%,#000);border-color:color-mix(in srgb,var(--status-6-bg) 82%,#000);box-shadow:0 3px 8px rgba(0,117,58,.3);}
.btn-tour{gap:.375rem;}

/* Projectdetail: hoofdinhoud + altijd-zichtbare chat-sidebar rechts (§Fase5a monteursportaal) */
/* Chatkolom schaalt mee (320–460px): met een vaste 460px bleef op 1366–1440px maar ±550–630px over voor de hoofdinhoud. */
.project-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) clamp(320px,28vw,460px); gap:1.5rem; align-items:start; }
.project-detail-main { min-width:0; }
/* Plakt ónder de (ook sticky) topbar: --topbar-h wordt door interop.js live gemeten (wrapt de topbar, dan schuift de chat mee). */
.project-detail-chat-sidebar { position:sticky; top:calc(var(--topbar-h, 64px) + 1rem); }
/* Lange chats scrollen binnen de kaart (chat-messages), niet de pagina. */
.project-detail-chat-card { display:flex; flex-direction:column; max-height:calc(100vh - var(--topbar-h, 64px) - 2rem); max-height:calc(100dvh - var(--topbar-h, 64px) - 2rem); padding:0; overflow:hidden; }
/* WhatsApp-koptekst: gedempt teal (light) resp. antracietblauw (dark, zoals WA-desktop dark mode). */
.project-detail-chat-header{display:flex;align-items:center;gap:.625rem;margin:0;padding:.875rem 1.125rem;font-size:1rem;font-weight:600;letter-spacing:-.005em;line-height:1.3;background:var(--wa-header);color:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;flex-shrink:0;}
.project-detail-chat-header .status-badge,.project-detail-chat-header small{margin-left:auto;color:rgba(255,255,255,.85);font-weight:500;margin-top:0;}
[data-theme="dark"] .project-detail-chat-header{border-bottom:1px solid rgba(255,255,255,.06);}
.project-detail-chat-card .chat-panel { flex:1; min-height:0; padding:.75rem 1rem 1rem; }
.project-detail-chat-card .chat-messages { flex:1; min-height:0; max-height:none; overflow-y:auto; overscroll-behavior:contain; }
@media (max-width:1300px) {
    .project-detail-layout { grid-template-columns:1fr; }
    .project-detail-chat-sidebar { position:static; }
    .project-detail-chat-card { max-height:none; }
    .project-detail-chat-card .chat-messages { max-height:480px; }
}

/* Projectchat (§Fase5a monteursportaal) — WhatsApp-achtige weergave: eigen berichten rechts in
   accentkleur met platte hoek richting de "staart", ontvangen berichten links in kaartkleur. */
.chat-panel { display:flex; flex-direction:column; gap:.75rem; }
.chat-online-list { display:flex; flex-wrap:wrap; gap:.5rem; }
.chat-online-badge { background:var(--begra-gray-100); color:var(--begra-gray-900); }
.chat-online-dot { width:8px; height:8px; border-radius:50%; background:var(--begra-success); display:inline-block; flex-shrink:0; }
.chat-messages {
    display:flex; flex-direction:column; gap:.375rem; max-height:420px; overflow-y:auto;
    padding:.875rem; border-radius:var(--radius-md);
    background-color:var(--begra-gray-100);
    background-image:radial-gradient(var(--begra-gray-200) 1px, transparent 1px);
    background-size:18px 18px;
    scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.2) transparent;
}
.chat-messages::-webkit-scrollbar { width:6px; }
.chat-messages::-webkit-scrollbar-thumb { background:rgba(0,0,0,.2); border-radius:3px; }
.chat-messages::-webkit-scrollbar-track { background:transparent; }
[data-theme="dark"] .chat-messages::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); }
.chat-date-separator { display:flex; justify-content:center; margin:.375rem 0; }
.chat-date-separator span { background:var(--wa-sep-bg); color:var(--wa-sep-fg); font-size:.75rem; font-weight:600; padding:.25rem .75rem; border-radius:var(--radius-pill); box-shadow:0 1px 1px rgba(0,0,0,.08); }
.chat-message { position:relative; max-width:80%; padding:.4rem .625rem .35rem; font-size:.875rem; line-height:1.4; overflow-wrap:anywhere; box-shadow:0 1px 1px rgba(0,0,0,.08); }
/* Staartje richting de "platte" hoek van de bubbel, zoals WhatsApp — puur decoratief (aria-hidden via :before heeft geen eigen a11y-tree-node). */
.chat-message::before { content:""; position:absolute; top:0; width:10px; height:12px; }
.chat-message-intern {
    align-self:flex-end; background:var(--wa-bubble-out); color:var(--wa-bubble-out-text);
    border-radius:var(--radius-md) var(--radius-md) 2px var(--radius-md);
}
.chat-message-intern::before { right:-6px; background:inherit; clip-path:polygon(0 0, 0% 100%, 100% 0); }
.chat-message-monteur {
    align-self:flex-start; background:var(--begra-white); border:1px solid var(--begra-gray-200); color:var(--begra-dark);
    border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 2px;
}
.chat-message-monteur::before { left:-6px; background:var(--begra-white); clip-path:polygon(100% 0, 100% 100%, 0 0); }
.chat-message-author { display:flex; align-items:center; gap:.375rem; font-size:.75rem; font-weight:600; color:var(--begra-primary-text); margin-bottom:.1rem; }
.chat-message-intern .chat-message-author { color:var(--wa-out-author); }
.chat-message-body { white-space:pre-wrap; }
.chat-quote { border-left:3px solid var(--wa-accent); background:var(--wa-quote-bg); border-radius:var(--radius-xs); padding:.2rem .5rem; margin-bottom:.3rem; font-size:.8125rem; }
.chat-quote strong { display:block; color:var(--wa-out-author); font-size:.75rem; }
.chat-quote span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; opacity:.85; }
.chat-reply-btn { display:inline-flex; align-items:center; margin-left:auto; order:2; background:transparent; border:none; padding:0 .15rem; color:var(--begra-gray-600); cursor:pointer; opacity:0; font-size:.9rem; line-height:1; }
.chat-message:hover .chat-reply-btn, .chat-reply-btn:focus-visible { opacity:1; }
.chat-reply-bar { display:flex; align-items:center; gap:.5rem; background:var(--begra-gray-100); padding:.4rem .625rem 0; }
.chat-reply-bar-text { flex:1; min-width:0; border-left:3px solid var(--wa-accent); background:var(--wa-input-field); border-radius:var(--radius-xs); padding:.25rem .6rem; font-size:.8125rem; }
.chat-reply-bar-text strong { display:block; color:var(--wa-out-author); font-size:.75rem; }
.chat-reply-bar-text span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--begra-gray-600); }
.chat-reply-cancel { display:inline-flex; align-items:center; justify-content:center; min-width:32px; min-height:32px; padding:0; background:transparent; border:none; border-radius:var(--radius-sm); font-size:1.4rem; line-height:1; color:var(--begra-gray-600); cursor:pointer; flex-shrink:0; }
[data-theme="dark"] .chat-reply-bar { background:var(--wa-input-bg); }
.chat-attachment { display:block; margin-bottom:.25rem; }
.chat-attachment img { display:block; max-width:100%; max-height:240px; border-radius:var(--radius-md); }
/* Tekstlink als terugval wanneer de afbeelding niet laadt (onerror zet .is-visible). */
.chat-attachment-link { display:none; align-items:center; gap:.25rem; }
.chat-attachment-link.is-visible { display:inline-flex; }
/* Tijd: .75rem (was .65rem = 10.4px); in de eigen bubbel de bubbel-metakleur (gray-600 haalde daar in dark 3.1:1). */
.chat-message-time { float:right; display:inline-flex; align-items:center; gap:.2rem; margin:.25rem 0 -.15rem .625rem; font-size:.75rem; color:var(--begra-gray-600); }
.chat-read-receipt { display:inline-flex; color:var(--begra-gray-600); }
.chat-message-intern .chat-message-time,.chat-message-intern .chat-read-receipt:not(.read) { color:var(--wa-out-meta); }
.chat-read-receipt svg { width:15px; height:11px; }
.chat-read-receipt.read { color:var(--wa-read); }
.chat-typing-indicator { font-size:.75rem; color:var(--begra-gray-600); font-style:italic; min-height:1.1em; }

/* Compose-balk: eigen (lichtere) achtergrondstrook zoals WhatsApp's invoerbalk, los van de
   berichtenachtergrond erboven. In de sidebar loopt hij edge-to-edge (negative margin = padding
   van .chat-panel); daarbuiten (smal scherm, chat-panel zonder die padding-context) valt hij terug
   op een gewone rand zonder bleed. */
.chat-input-row { display:flex; gap:.625rem; align-items:flex-end; background:var(--begra-gray-100); padding:.625rem; border-radius:0 0 var(--radius-md) var(--radius-md); }
.project-detail-chat-card .chat-input-row { margin:0 -1rem -1rem; }
.chat-input-row textarea {
    resize:none; min-height:52px; max-height:140px; border-radius:22px; padding:.75rem 1.25rem;
    font-size:.9375rem; line-height:1.35; background:var(--wa-input-field); border:1px solid var(--wa-input-border); color:var(--wa-input-text);
}
[data-theme="dark"] .chat-input-row { background:var(--wa-input-bg); }
[data-theme="dark"] .chat-input-row textarea { border-color:var(--wa-input-border); }
.chat-send-btn {
    width:48px; height:48px; min-width:48px; padding:0; border-radius:50%; display:inline-flex;
    align-items:center; justify-content:center; flex-shrink:0;
    background:var(--wa-accent); border-color:var(--wa-accent);
}
.chat-send-btn:not(:disabled):hover { background:var(--wa-accent-hover); border-color:var(--wa-accent-hover); }
.chat-send-btn svg { width:22px; height:22px; }
.chat-send-btn.busy svg { animation:chatSendSpin var(--dur-spin) linear infinite; }
@keyframes chatSendSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }


/* ── Pagina-specifiek (voorheen inline) ──────────────────────────────────── */
/* Klassen die inline style=""-attributen vervangen op de beheerpagina's (AdminSettings,
   SuppliersAdmin, ExternalProjects, AdminHealth, AdminTrash, AdminTranslations, UserManagement,
   Error) en de notificatie-dropdown in MainLayout. Globaal, want gedeeld tussen meerdere
   pagina's zonder eigen .razor.css (CSS-isolatie zou ze anders niet laten toepassen). */

/* Tekst- en afstandshulpjes */
.text-sm{font-size:.875rem;}
.text-xs{font-size:.8125rem;}
.page-intro{color:var(--begra-gray-600);max-width:70ch;margin:0 0 1.25rem;line-height:1.6;}
.page-footnote{margin-top:1rem;font-size:.8rem;color:var(--begra-gray-600);}
.section-heading{font-size:1.0625rem;margin-top:0;margin-bottom:.75rem;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;}
.heading-note{font-size:.8rem;font-weight:500;color:var(--begra-gray-600);}
.heading-note.live-on{color:var(--tone-success-fg);font-weight:600;}
.card-narrow{max-width:640px;}
.action-row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;}
@media(max-width:480px){.action-row>button{flex:1 1 auto;}}
.code-chip{font-family:var(--font-mono);font-size:.875em;background:var(--begra-gray-100);border:1px solid var(--begra-gray-200);padding:.1em .4em;border-radius:var(--radius-xs);}
[data-theme="dark"] .code-chip{background:var(--begra-gray-200);border-color:var(--begra-gray-300);}

/* Tabel in een kaart: kaart-padding weg zodat de tabel edge-to-edge in de afgeronde kaart valt;
   overflow-x:auto (i.p.v. het oude inline overflow:hidden) houdt brede tabellen op mobiel scrollbaar. */
.table-card{padding:0;overflow-x:auto;overflow-y:hidden;}
.cell-mono{font-family:var(--font-mono);font-size:.8125rem;}
.cell-strong{font-weight:600;}
.cell-nowrap{white-space:nowrap;}
.cell-top{vertical-align:top;}
.cell-prewrap{white-space:pre-wrap;}
.cell-danger{color:var(--tone-danger-fg);}
/* Celklassen die via DataGrid-kolommen (CellClass) worden gezet: die cellen rendert DataGrid zelf,
   dus de scoped varianten in AdminAudit/AdminLogs bereikten ze nooit (ook AdminLogins gebruikt ze). */
.cell-time{white-space:nowrap;color:var(--begra-gray-600);font-size:.8125rem;font-variant-numeric:tabular-nums;}
.cell-id{color:var(--begra-gray-600);font-variant-numeric:tabular-nums;}
.cell-source{color:var(--begra-gray-600);font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.cell-message{word-break:break-word;}
.cell-correlation{font-size:.75rem;}
/* Code-/stacktraceblok in een uitklapper (audit-JSON, exceptie in Logging). */
.audit-json pre,.log-exception-body{white-space:pre-wrap;word-break:break-word;margin:0;padding:.625rem .75rem;font-family:var(--font-mono);font-size:.75rem;line-height:1.45;background:var(--begra-gray-100);border:1px solid var(--begra-gray-200);border-radius:var(--radius-sm);max-height:320px;overflow:auto;}
.log-exception-body{margin-top:.375rem;}
/* Definitielijst label → waarde (Leverancierdetail, NAV-projectdetails bij Importeren). */
.detail-list{display:grid;grid-template-columns:max-content 1fr;gap:.375rem 1.5rem;margin:0;}
.detail-list dt{color:var(--begra-gray-500);font-weight:600;}
.detail-list dd{margin:0;overflow-wrap:anywhere;}
@media(max-width:640px){.detail-list{grid-template-columns:1fr;gap:0;}.detail-list dd{margin-bottom:.625rem;}}
/* Knoppen/badges onder een celwaarde (AdminTranslations: ✓/✕ of badge + "Wijzigen"). */
.cell-actions{margin-top:.25rem;display:flex;gap:.25rem;flex-wrap:wrap;align-items:center;}
.result-count{margin-top:.75rem;font-size:.875rem;color:var(--begra-gray-600);}
.pager{display:flex;align-items:center;gap:.75rem;margin-top:.75rem;flex-wrap:wrap;}
.pager-info{font-size:.875rem;color:var(--begra-gray-600);font-variant-numeric:tabular-nums;}
.link-sm{font-size:.75rem;}

/* Filterbar-varianten */
.filter-field.filter-field-sm{max-width:220px;flex:0 1 220px;}
.filter-field.filter-field-md{max-width:360px;flex:1 1 280px;}
/* Checkbox-chip onderaan uitlijnen met de invulvelden ernaast. */
.filter-field.filter-field-toggle{justify-content:flex-end;}

/* Inline formulier-regel (wachtwoord-reset in tabel, rol toevoegen in dialoog). */
.inline-form-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;}
.input-narrow{max-width:260px;}
.chip-group{display:flex;flex-wrap:wrap;gap:.5rem .75rem;margin-top:.5rem;}

/* Neutrale pill-badge (o.a. "NAV" bij gekoppelde leveranciers). */
.badge-neutral{background:var(--tone-neutral-bg);color:var(--tone-neutral-fg);cursor:default;}

/* Inline resultaatmelding (ExternalProjects: import geslaagd/mislukt). */
.inline-message{margin:.75rem 0 0;font-size:.9375rem;font-weight:500;}
.inline-message.is-success{color:var(--tone-success-fg);}
.inline-message.is-error{color:var(--tone-danger-fg);}

/* Vertaalstatus-badges (AdminTranslations) — voorheen een <style>-blok in de pagina. */
.badge-missing{background:var(--tone-neutral-bg);color:var(--tone-neutral-fg);}
.badge-stale{background:var(--tone-danger-bg);color:var(--tone-danger-fg);}
.badge-review{background:var(--tone-warning-bg);color:var(--tone-warning-fg);}
.badge-reviewed{background:var(--tone-success-bg);color:var(--tone-success-fg);}

/* Notificatie-bel + dropdown (MainLayout) */
.notif-wrap{position:relative;}
/* Transparante klik-buiten-laag (MainLayout): onder de sticky topbar, boven de content. */
.notif-dismiss-layer{position:fixed;inset:0;z-index:calc(var(--z-topbar) - 1);background:transparent;}
.notif-btn{position:relative;}
/* Maat/kleur uit de gedeelde tellerbadge-spec onderaan; hier alleen de positie op de bel. */
.notif-badge{position:absolute;top:-2px;right:-2px;pointer-events:none;box-shadow:0 0 0 2px var(--begra-white);}
/* z-index relatief binnen de topbar (die zelf een stapelcontext is op --z-topbar en dus al boven de content ligt). */
.notif-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(360px,calc(100vw - 2rem));z-index:1;background:var(--begra-surface);border:1px solid var(--begra-gray-200);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);max-height:440px;overflow-y:auto;animation:notifIn var(--dur-enter) var(--ease);}
@keyframes notifIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes notifOut{to{opacity:0;transform:translateY(-4px)}}
.notif-panel.is-leaving{animation:notifOut var(--dur-exit) var(--ease-in) forwards;pointer-events:none;}
.notif-panel-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem .875rem;border-bottom:1px solid var(--begra-gray-200);position:sticky;top:0;background:var(--begra-surface);z-index:1;}
.notif-panel-header strong{font-size:.875rem;}
.notif-panel-actions{display:flex;gap:.375rem;}
/* Compacte, ingetogen knoppen in de dropdown ("Alles gelezen", ↻, per-item ✓). */
.notif-panel .btn-begra-secondary{min-height:28px;padding:.15rem .5rem;font-size:.75rem;font-weight:500;box-shadow:none;}
.notif-state{margin:0;padding:1rem .875rem;font-size:.875rem;color:var(--begra-gray-600);text-align:center;}
.notif-state.is-error{color:var(--tone-danger-fg);}
.notif-list{list-style:none;margin:0;padding:.25rem 0;}
.notif-item{padding:.5rem .875rem;border-bottom:1px solid var(--begra-gray-200);transition:background-color var(--dur) var(--ease);}
.notif-item-row{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:var(--begra-gray-100);}
[data-theme="dark"] .notif-item:hover{background:rgba(255,255,255,.04);}
.notif-item-body{font-size:.8125rem;line-height:1.4;min-width:0;}
.notif-item-body a{color:inherit;text-decoration:underline;text-decoration-color:var(--begra-gray-400);text-underline-offset:2px;}
.notif-item-body a:hover{text-decoration-color:currentColor;}
.notif-item-time{color:var(--begra-gray-600);font-size:.75rem;margin-top:.15rem;font-variant-numeric:tabular-nums;}
.notif-item .notif-mark{min-height:26px;min-width:26px;padding:0 .35rem;font-size:.7rem;white-space:nowrap;flex-shrink:0;color:var(--begra-gray-600);}
.notif-item .notif-mark:not(:disabled):hover{color:var(--begra-dark);}

/* Afstandshulpjes — bewust als laatste, zodat ze winnen van component-marges hierboven
   (.section-heading, .validation-message, .page-header); label.checkbox heeft een
   hogere specificiteit (element+klasse) en krijgt daarom een eigen regel. */
.mt-sm{margin-top:.75rem;}
.mt-md{margin-top:1rem;}
.mt-lg{margin-top:1.5rem;}
.mt-xl{margin-top:2rem;}
label.checkbox.mt-md,label.radio.mt-md{margin-top:1rem;}

/* Berichten-overzicht: reacties/audio in het projectchat-paneel (menubadge: zie tellerbadges onderaan) */
.messages-last{max-width:32rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-reactions{display:flex;flex-wrap:wrap;gap:.2rem;margin-top:.25rem;clear:both;}
.chat-reaction{background:var(--wa-quote-bg);border-radius:var(--radius-pill);padding:0 .4rem;font-size:.8125rem;}
.chat-react-menu{order:1;display:inline-flex;gap:.05rem;opacity:0;}
.chat-message:hover .chat-react-menu,.chat-react-menu:focus-within{opacity:1;}
.chat-react-btn{background:transparent;border:none;cursor:pointer;font-size:.85rem;padding:0 .1rem;line-height:1;}
.chat-message-body audio{display:block;width:230px;max-width:100%;height:36px;margin-bottom:.2rem;}
.doc-audio{display:flex;flex-direction:column;gap:.35rem;padding:.5rem;}

/* Monteur uitnodigen (SuppliersAdmin) */
.invite-panel{background:var(--begra-gray-100);border-radius:var(--radius-md);padding:.875rem 1rem;}
.invite-options{display:flex;flex-direction:column;gap:.5rem;margin:.5rem 0 .75rem;}
.invite-option{display:flex;gap:.625rem;align-items:flex-start;cursor:pointer;}
.invite-option input{margin-top:.2rem;}
.invite-option small{display:block;color:var(--begra-gray-600);font-weight:400;}
.invite-code{font-size:2rem;font-weight:700;letter-spacing:.35rem;font-variant-numeric:tabular-nums;margin:.25rem 0 .5rem;}
.invite-url{width:100%;font-family:var(--font-mono);font-size:.8125rem;}

/* Nazorgknop in de projectchat, account-overzicht en chat-respons */
.chat-aftercare-btn{order:1;background:transparent;border:1px solid var(--begra-gray-300);border-radius:var(--radius-pill);padding:0 .45rem;font-size:.6875rem;color:var(--begra-gray-600);cursor:pointer;opacity:0;}
.chat-message:hover .chat-aftercare-btn,.chat-aftercare-btn:focus-visible{opacity:1;}
.chat-aftercare-done{order:1;font-size:.6875rem;color:var(--wa-out-author);}
.status-chip{background:var(--tone-neutral-bg);color:var(--tone-neutral-fg);}
.status-chip.warn{background:var(--tone-danger-bg);color:var(--tone-danger-fg);}
.status-chip.info{background:var(--tone-info-bg);color:var(--tone-info-fg);}
.status-chip.ok{background:var(--tone-success-bg);color:var(--tone-success-fg);}
.status-chip.muted{background:var(--tone-neutral-bg);color:var(--begra-gray-600);}
/* .filter-chip zelf: zie de gedeelde chipstijl bij .status-tabs. */
.filter-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 1rem;}

/* ── Gedeelde componentklassen (voorheen scoped, maar ook in andere componenten gebruikt) ──
   CSS-isolatie bereikt geen kindcomponenten: NavProjectChangesPanel, NavProcurementSendPanel, de
   rapportkaarten (ChatResponse/NavInvoicing/NavManco), Messages, MonteurAccountsOverview,
   ExternalProjects en ProjectMancoChapter gebruikten deze klassen zonder stijl. */
/* "Volgende stap"-hint / infomelding onder de paginakop. Tekst --begra-dark, label/icoon --begra-primary-text,
   vlak via tokens (licht #E5F0FA, dark --primary-soft): in dark haalde de tekst eerst 1.13:1 en het label 2.6:1. */
.next-step-hint{display:flex;align-items:flex-start;gap:.6rem;margin:.75rem 0 1rem;padding:.6rem .85rem;border-left:3px solid var(--begra-primary);border-radius:var(--radius-sm);background:var(--begra-primary-light);color:var(--begra-dark);font-size:.9375rem;line-height:1.45;}
[data-theme="dark"] .next-step-hint{background:var(--primary-soft);border-left-color:var(--begra-primary-text);}
.next-step-hint-ico{width:1.15rem;height:1.15rem;flex-shrink:0;margin-top:.1rem;color:var(--begra-primary-text);}
.next-step-hint-label{font-weight:600;color:var(--begra-primary-text);margin-right:.25rem;}
/* Waarschuwingsvariant (NAV-meldingen, On hold): zelfde vorm, warning-tone (>=4.5:1 in beide thema's). */
.next-step-hint.next-step-hint--warning{background:var(--tone-warning-bg);border-left-color:var(--status-10);}
.next-step-hint--warning .next-step-hint-ico,.next-step-hint--warning .next-step-hint-label{color:var(--tone-warning-fg);}
/* Meldingen zonder icoon (titel + tekst, o.a. On hold/NAV): op smalle schermen titel boven de tekst
   i.p.v. twee smalle kolommen naast elkaar. */
@media(max-width:640px){.next-step-hint:not(:has(>.next-step-hint-ico)){flex-wrap:wrap;row-gap:.25rem;}}
/* Rapportkaart met kop + acties rechts (Reports en de losse rapportcomponenten). */
.section-card{margin-bottom:1rem;}
.section-card h2{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;}
.section-card-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem;}
.section-card-header .section-card-title{margin:0;}
.section-card-actions{gap:.5rem;}
.section-sub{font-size:.8125rem;font-weight:400;color:var(--begra-gray-600);margin-left:.5rem;}
/* Als losse alinea onder de kaartkop (ChatResponseReport) geen inspringing. */
p.section-sub{margin:-.5rem 0 1rem;}
/* Gedempte binnenkaart in een hoofdstuk: vlak (geen schaduw) op de grijze paginatint. */
.card-subdued{background:var(--begra-gray-100);box-shadow:none;padding:1rem 1.25rem;}
[data-theme="dark"] .card-subdued{background:var(--hover-bg);border-color:var(--begra-gray-300);}
.card-inset{margin:.5rem 0;}
/* Tweede/derde knop in een actiecel (montage-aanvragen, inkoopregels, importeren). */
.btn-follow{margin-left:.35rem;}
/* Ondertitel onder de paginatitel (StatusFlow, Info, Berichten, Monteuraccounts). */
.sf-subtitle,.page-subtitle{color:var(--begra-gray-600);font-size:.9375rem;margin-top:.25rem;}
/* NAV-actiepaneel (projectdetail): status-pillen gebruiken themavariabelen zodat dark mode klopt. */
.nav-actions{margin-top:1rem;padding:1rem;}
.nav-actions-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem;}
.nav-actions-head h3{margin:0;font-size:1rem;}
.nav-actions-buttons{display:flex;flex-wrap:wrap;gap:.5rem;}
.nav-status{background:var(--tone-neutral-bg);color:var(--tone-neutral-fg);}
.nav-status-succeeded{background:var(--tone-success-bg);color:var(--tone-success-fg);}
.nav-status-failed{background:var(--tone-danger-bg);color:var(--tone-danger-fg);}
.nav-status-processing,.nav-status-pending{background:var(--tone-info-bg);color:var(--tone-info-fg);}
.nav-confirm{display:flex;gap:.5rem;align-items:flex-start;margin-top:.75rem;}
.nav-failed-banner{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:1rem;border-left:4px solid var(--begra-red);}
.nav-write-banner{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:.75rem;}
.nav-to-book-card{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:1rem;border-left:4px solid var(--begra-primary);}
.nav-to-book-badge{display:inline-block;margin-left:.4rem;padding:.1rem .5rem;border-radius:999px;font-size:.75rem;background:var(--tone-info-bg);color:var(--tone-info-fg);white-space:nowrap;}
/* Inkoop -> NAV: knoppenbalk, offerteprompt, verstuurstatus per regel en de datumtabel in de bevestigingsdialoog. */
.nav-send-toolbar{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0;}
.nav-offer-prompt{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:.75rem 0;}
.nav-send-list{margin:.25rem 0 .75rem;padding-left:1.25rem;font-size:.9rem;}
.nav-send-status{display:inline-block;margin-right:.4rem;padding:.1rem .5rem;border-radius:999px;font-size:.75rem;background:var(--tone-neutral-bg);color:var(--tone-neutral-fg);}
.nav-send-status--succeeded{background:var(--tone-success-bg);color:var(--tone-success-fg);}
.nav-send-status--failed{background:var(--tone-danger-bg);color:var(--tone-danger-fg);}
.nav-send-status--pending,.nav-send-status--processing{background:var(--tone-info-bg);color:var(--tone-info-fg);}
.nav-send-blocked{display:block;font-size:.75rem;}
.nav-dates-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.nav-dates-table th,.nav-dates-table td{text-align:left;padding:.35rem .5rem;border-bottom:1px solid var(--begra-gray-200);vertical-align:top;}
.dialog.dialog-wide{width:min(760px,calc(100vw - 2rem));}
.dialog.dialog-narrow{width:min(440px,calc(100vw - 2rem));}
.dialog:focus{outline:none;}
/* De paginakop krijgt alleen programmatische focus (FocusOnNavigate, voor schermlezers) en is niet bedienbaar: geen focusrand. */
h1[tabindex="-1"]:focus,h1[tabindex="-1"]:focus-visible{outline:none;}
.dialog .ss-list.ss-list,.dialog .dg-menu.dg-menu{z-index:var(--z-dialog-popover);}
.dialog .dg-backdrop.dg-backdrop{z-index:calc(var(--z-dialog-popover) - 1);}
.dialog .modal-intro{margin:0 0 1rem;font-size:.875rem;color:var(--begra-gray-600);line-height:1.5;}
.customer-mail-fields{display:flex;flex-direction:column;gap:.375rem;margin-top:1rem;}
.customer-mail-fields textarea{font-family:inherit;line-height:1.5;resize:vertical;}
/* NAV-meldingen (synchronisatie en schrijven): waarschuwingstoon uit de --tone-*-tokens, op smalle schermen inklapbaar tot alleen de titel. */
.nav-banner{padding:.625rem 1rem;margin-bottom:.75rem;border-radius:var(--radius-md);border-left:4px solid currentColor;font-size:.9375rem;line-height:1.5;}
.nav-banner--warning{background:var(--tone-warning-bg);color:var(--tone-warning-fg);}
.nav-banner--danger{background:var(--tone-danger-bg);color:var(--tone-danger-fg);}
.nav-banner .btn-link{color:inherit;text-decoration:underline;}
.nav-banner-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.nav-banner-body{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem;margin-top:.125rem;}
.nav-banner-meta{font-size:.8125rem;}
.nav-banner-toggle{display:none;}
@media (max-width:768px){
  .nav-banner-toggle{display:inline-flex;}
  .nav-sync-banner:not(.is-expanded) .nav-banner-body{display:none;}
}
/* Technische NAV-fout: vertaalde categorie met hint; de ruwe tekst staat alleen voor beheerders achter "Technische details". */
.nav-error{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.nav-error-label{color:var(--tone-danger-fg);font-weight:600;}
.nav-error-hint{color:var(--begra-gray-600);font-size:.8125rem;line-height:1.4;}
.nav-error-details summary{cursor:pointer;font-size:.8125rem;text-decoration:underline;}
.nav-error-details pre{margin:.25rem 0 0;padding:.375rem .5rem;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.75rem;background:var(--begra-gray-100);border:1px solid var(--begra-gray-200);border-radius:var(--radius-sm);color:var(--begra-gray-900);}
.nav-confirm-reference{margin:0 0 .5rem;overflow-wrap:anywhere;}
.nav-po-details{display:inline-block;margin-left:.4rem;font-size:.8rem;vertical-align:middle;}
.nav-po-details summary{cursor:pointer;text-decoration:underline;}
.nav-po-details ul{margin:.25rem 0 0;padding-left:1.1rem;color:var(--begra-gray-600);}
.conflict-reason{display:block;margin-top:.25rem;font-size:.8125rem;color:var(--begra-gray-600);}
/* Datumtabel van de NAV-dialoog als kaarten op smalle schermen (zelfde patroon als de manco-tabel). */
@media (max-width:640px){
  .nav-dates-table thead{display:none;}
  .nav-dates-table,.nav-dates-table tbody,.nav-dates-table tr,.nav-dates-table td{display:block;width:100%;}
  .nav-dates-table tr{padding:.5rem 0;border-bottom:1px solid var(--begra-gray-200);}
  .nav-dates-table td{border:0;padding:.15rem 0;}
  .nav-dates-table td[data-label]::before{content:attr(data-label);display:block;font-size:.75rem;color:var(--begra-gray-600);text-transform:uppercase;letter-spacing:.03em;}
}
/* Hulpklassen die ook buiten ProjectDetail nodig zijn (afgesplitste componenten, dialogen, NAV-paneel). */
.btn-link-sm{font-size:.8rem;}
.grid-span-all{grid-column:1 / -1;}
.empty-note{margin:0;color:var(--begra-gray-600);}
.msg-below{margin-top:.5rem;}
.nav-po-title{margin:1.25rem 0 .5rem;font-size:.9375rem;}
.nav-finance{margin-top:1rem;padding:1rem;}
.nav-finance-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin:.5rem 0 .25rem;}
.nav-finance-kpi{display:flex;flex-direction:column;gap:.15rem;padding:.6rem .8rem;border-radius:var(--radius-md);background:var(--begra-gray-100);border:1px solid var(--begra-gray-200);}
.nav-finance-kpi-label{font-size:.8rem;color:var(--begra-gray-600);}
.nav-finance-kpi-value{font-size:1.15rem;font-weight:600;color:var(--begra-gray-900);}
.nav-finance-kpi-sub{font-size:.8rem;color:var(--begra-gray-600);}
.nav-finance-line{margin:.25rem 0 .5rem;font-size:.875rem;}
.nav-finance-kpi--alert{border-color:var(--begra-red);}
.nav-finance-progress{display:block;height:6px;border-radius:999px;background:var(--begra-gray-200);overflow:hidden;margin-top:.25rem;}
.nav-finance-progress>span{display:block;height:100%;background:var(--begra-success);}
.nav-term{background:var(--tone-neutral-bg);color:var(--tone-neutral-fg);}
.nav-term-invoiced{background:var(--tone-success-bg);color:var(--tone-success-fg);}
.nav-term-overdue{background:var(--tone-danger-bg);color:var(--tone-danger-fg);}
.nav-term-duesoon,.nav-term-ininvoicing{background:var(--tone-info-bg);color:var(--tone-info-fg);}
.nav-term-partial{background:var(--tone-warning-bg);color:var(--tone-warning-fg);}
.nav-finance-tasks{margin-top:1rem;}
.nav-stock{margin-top:1rem;padding:1rem;}
.nav-stock-scroll{max-height:32rem;overflow-y:auto;}
.nav-stock-table{font-size:.875rem;} .nav-stock-table th,.nav-stock-table td{padding:.45rem .75rem;}
.nav-stock-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.nav-stock-table .nowrap{white-space:nowrap;}
.nav-stock-table thead th{position:sticky;top:0;z-index:1;}
.nav-stock-table tr.nav-stock-group th{background:var(--begra-primary-light);color:var(--begra-primary-text);text-transform:none;letter-spacing:0;font-size:.8125rem;}
.nav-stock-table tfoot th,.nav-stock-table tfoot td{font-weight:700;border-top:1px solid var(--begra-gray-300);background:var(--begra-gray-100);}
.nav-stock-sub{display:block;font-size:.8125rem;color:var(--begra-gray-600);}
.nav-stock-done{color:var(--tone-success-fg);font-weight:700;}
.nav-finance-tasks>summary{cursor:pointer;font-weight:600;font-size:.9375rem;margin-bottom:.5rem;}
[data-theme="dark"] .nav-finance-kpi{background:var(--begra-surface);}

/* ── Consistentie & beweging (heraudit okt 2026) ─────────────────────────── */

/* Tellerbadges: kort "pop"-effect wanneer de waarde (via SignalR) verandert — @key op de badge
   maakt het element opnieuw aan zodat de animatie bij elke wijziging afspeelt. */
.nav-badge,.notif-badge{animation:badgePop var(--dur-enter) var(--ease) both;}
@keyframes badgePop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:none;opacity:1}}
/* Ongelezen-indicator op de hamburger: met dichtgeklapt mobiel menu was de chatbadge onzichtbaar. */
.hamburger-dot{position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--unread-badge);box-shadow:0 0 0 2px var(--begra-white);animation:badgePop var(--dur-enter) var(--ease) both;}

/* Hover-hints in chatbubbels faden i.p.v. te springen; nieuwe berichten schuiven zacht in. */
.chat-reply-btn,.chat-react-menu,.chat-aftercare-btn{transition:opacity var(--dur-fast) var(--ease);}
.chat-message:last-child{animation:msgIn var(--dur-enter) var(--ease);}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.chip:focus-visible,.filter-chip:focus-visible,button.btn-link:focus-visible,.chat-react-btn:focus-visible{outline:2px solid var(--focus-ring-solid);outline-offset:2px;box-shadow:0 0 0 3px var(--focus-ring);}

/* -- Badge-systeem (okt 2026) ------------------------------------------------
   Een pill-basis voor alle zachte badges: bestaande klassen blijven (markup ongewijzigd),
   varianten zetten alleen nog kleuren via de --tone-* en --status-N-* tokens in :root. */
.pill,.audit-action,.role-badge,.badge-neutral,.badge-missing,.badge-stale,.badge-review,.badge-reviewed,
.status-chip,.nav-status,.nav-term,.chapter-badge,.log-level,.days-badge,.urgency-badge,
.todo-tag,.nav-cost-badge,.conn-indicator,.dg-chip,.status-badge,.sf-trigger-badge,.sf-terminal-label,
.sf-fork-badge,.sf-cl-nee,.planning-desired-tag,.chat-online-badge,.mpt-count{
  display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .55rem;border-radius:var(--radius-pill);
  font-size:.75rem;font-weight:600;line-height:1.4;white-space:nowrap;vertical-align:middle;}
.pill{background:var(--tone-neutral-bg);color:var(--tone-neutral-fg);}
.tone-success{background:var(--tone-success-bg);color:var(--tone-success-fg);}
/* .sf-cl-nee: "Nee"-label in de StatusFlow-checklist (komt uit vertaalteksten, dus globaal). */
.tone-danger,.sf-cl-nee{background:var(--tone-danger-bg);color:var(--tone-danger-fg);}
.tone-warning{background:var(--tone-warning-bg);color:var(--tone-warning-fg);}
.tone-info{background:var(--tone-info-bg);color:var(--tone-info-fg);}
.tone-neutral{background:var(--tone-neutral-bg);color:var(--tone-neutral-fg);}
/* Omlijnde variant (bv. "Geannuleerd" naast de statusbadge): tone-tekstkleur, rand in dezelfde kleur. */
.pill-outline{background:transparent;border:1px solid currentColor;padding:calc(.125rem - 1px) calc(.55rem - 1px);}
/* Afwijkingen op de basis (na de basisregel, zelfde specificiteit). */
.chat-online-badge{gap:.375rem;font-weight:500;}

/* Tellerbadges: een maat voor menu, bel, filterknop en rapportkoppen. Kleur: primary, behalve
   chat (--unread-badge, WhatsApp-groen, 4.9:1 met wit) en notificaties (#B71C1C, 6.6:1 met wit). */
.notif-badge,.nav-badge,.filter-count-badge,.count-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;
  padding:0 .35rem;border-radius:var(--radius-pill);font-size:.6875rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;background:var(--begra-primary);color:#fff;}
/* Menubadge (Berichten): rechts in de nav-link; .static = inline naast tekst. */
.nav-badge{background:var(--unread-badge);margin-left:auto;}
.nav-badge.static{margin-left:0;}
.notif-badge{background:var(--status-8-bg);}

/* Inline SVG-iconen (SvgIcon.razor) in topbar/toasts: geen baseline-ruimte, niet laten krimpen. */
.svg-icon{display:block;flex-shrink:0;}
/* Icoon midden in lopende tekst (bv. vinkje vóór een melding): inline op de tekstbasislijn. */
.svg-icon.icon-inline{display:inline-block;vertical-align:-.15em;}
/* Zoekicoon is een SVG (geen emoji meer): flex voorkomt baseline-verschuiving binnen de absoluut gepositioneerde span. */
.search-icon,.global-search-icon{display:inline-flex;align-items:center;}

/* ── Topbar: gebruikersnaam ──────────────────────────────────────────────────
   Lange namen/e-mailadressen kappen af met "…" (volledige naam in de title); zo blijft de productie-
   topbar (logo, titel, zoeken, verbinding, taal, rondleiding, bel, thema, naam, uitloggen) vanaf
   1280px op één regel. Inline-block i.p.v. de inline-flex van de pill: text-overflow werkt niet op flex. */
.begra-topbar .topbar-user{display:inline-block;max-width:10rem;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
@media(min-width:1600px){.begra-topbar .topbar-user{max-width:12rem;}}
@media(min-width:1800px){.begra-topbar .topbar-user{max-width:16rem;}}

/* ── Compacte mobiele topbar + paginakop ─────────────────────────────────────
   Doel: één rij acties (hamburger · logo · … · taal · bel · thema · account) met de zoekbalk
   als tweede rij, i.p.v. drie rijen knoppen. Rondleiding en gebruikersnaam-pill vallen weg
   op mobiel (rondleiding is desktopgericht). Knophoogte: 44px uit het touch-blok onderaan
   (de oude 36/34px-regels hier verloren daar al van). Maten van taalkeuze en zoekveld staan in
   LanguagePicker.razor.css en GlobalSearch.razor.css: scoped regels winnen van gelijke selectors hier. */
@media (max-width:768px){
  .begra-topbar{padding:.375rem .625rem;gap:.25rem;row-gap:.375rem;min-height:52px;}
  .begra-topbar img{height:28px;margin-left:.125rem;}
  /* Alleen de merknaam naast het logo (direct kind) — niet de titel in het notificatiepaneel. */
  .begra-topbar>strong{display:none;}
  .begra-topbar .btn-icon{padding:.2rem .35rem;font-size:1rem;}
  /* Notificatiepaneel over de volle breedte i.p.v. vanaf de bel naar links buiten beeld. De topbar is
     door backdrop-filter het containing block voor fixed-afstammelingen, dus top:100% = onder de topbar. */
  .notif-panel{position:fixed;top:calc(100% + 4px);left:.5rem;right:.5rem;width:auto;max-height:min(440px,calc(100dvh - 5rem));}
  .status-badge{padding:.125rem .5rem;}
  .begra-topbar .btn-hamburger{padding:.25rem;}
  .begra-topbar .btn-tour,.begra-topbar .topbar-user{display:none;}
  .page-header{gap:.625rem;}
  .page-header h1{font-size:1.375rem;}
}
@media (max-width:480px){
  /* Knoppen in de paginakop naast elkaar i.p.v. elk een volle regel. */
  .page-header-actions{gap:.5rem;}
  .page-header-actions>.btn-begra-primary,.page-header-actions>.btn-begra-secondary,.page-header-actions>.btn-begra-danger-outline{flex:1 1 calc(50% - .25rem);min-width:0;min-height:38px;padding:.4rem .625rem;font-size:.875rem;white-space:normal;text-align:center;}
  /* Lokaal account (wachtwoord + uitloggen) paste op 375px niet op één rij → 3 rijen. Geen kolomgap
     (de 44px-icoonknoppen hebben zelf genoeg lucht), logo iets kleiner, dev-rolwissel weg. */
  .begra-topbar{column-gap:0;}
  .begra-topbar img{height:24px;margin-right:.25rem;}
  .begra-topbar a.btn-theme[href="/login"]{display:none;}
}

/* ── Uitklapbare lange tekst (ExpandableText: werkomschrijving e.d.) ─────── */
.expandable-text-body{white-space:pre-wrap;line-height:1.5;overflow-wrap:anywhere;}
.expandable-text.is-collapsed .expandable-text-body{max-height:calc(var(--expandable-lines, 6) * 1.5em);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 2.5em),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 2.5em),transparent);}
.expandable-text-toggle{display:inline-flex;align-items:center;gap:.25rem;margin-top:.375rem;font-size:.875rem;font-weight:600;color:var(--begra-primary-text);}
.expandable-text-chevron{transition:transform var(--dur) var(--ease);}
.expandable-text-chevron.is-open{transform:rotate(180deg);}
.expandable-text-toggle:focus-visible{outline:2px solid var(--focus-ring-solid);outline-offset:2px;box-shadow:0 0 0 3px var(--focus-ring);}

/* ── Tabellen, overflow, pressed-feedback ─────────────────────────────── */
.begra-table .num,.begra-table th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
@media (max-width:640px){.begra-table th{white-space:normal;}}
.begra-card,.page-header h1,.dialog{overflow-wrap:anywhere;}
/* Tabelcellen: break-word (niet anywhere) — anywhere telt mee in de min-content-breedte en perste kolommen tot enkele tekens samen. */
.begra-table td{overflow-wrap:break-word;}
/* Kopteksten nooit middenin een woord afbreken (erven anders overflow-wrap:anywhere van .begra-card); datum- en nummerkolommen blijven op één regel (CSS-isolatie bereikt cellen van DataGrid niet). */
.begra-table th{overflow-wrap:normal;word-break:normal;}
.begra-table td.col-date,.begra-table td.col-number{white-space:nowrap;}
.btn-icon{transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur-fast) var(--ease);}
.btn-icon:not(:disabled):active,.chip:active,.status-tabs button:active,.filter-chip:active,.doc-tile:active{transform:scale(.97);}

/* ── Touch-doelen (>=44px; tekstknoppen en chips >=40px) ──────────────── */
@media (pointer:coarse),(max-width:768px){
  .btn-icon,.begra-topbar .btn-icon,.btn-hamburger,.status-tabs button,.begra-table td .btn-begra-primary,.begra-table td .btn-begra-secondary,.begra-table td .btn-begra-danger-outline,.btn-sm,.mpt-prev,.mpt-next,.mpt-finish,.segmented>button,.segmented>a,.planning-zoom button{min-height:44px;}
  .btn-icon,.begra-topbar .btn-icon,.btn-hamburger,.btn-sm{min-width:44px;}
  /* Chips, instellingen-navigatie en tekstknoppen (o.a. Wijzigen/Monteuraccounts in Leveranciers: was 21px). */
  .chip,.filter-chip,.settings-nav a{min-height:40px;}
  .link-button,button.btn-link{display:inline-flex;align-items:center;min-height:40px;}
  /* Meldingenpaneel: "Alles gelezen", verversen en per melding het vinkje (was 26-28px). */
  .notif-panel .btn-begra-secondary,.notif-item .notif-mark{min-height:44px;}
  .notif-panel-actions .btn-begra-secondary[aria-label],.notif-item .notif-mark{min-width:44px;}
  .chat-reply-cancel{min-width:44px;min-height:44px;}
  /* Tekstknoppen in tabelcellen en meldingen (NAV-acties: Naar NAV, Overnemen, Ontkoppelen, Afvinken, Opnieuw proberen, ...) en de uitklapper van de NAV-order. */
  .btn-link-sm{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;}
  .nav-po-details summary{padding-block:.75rem;}
  .search-field .search-clear,.toast-close,.mpt-close{position:relative;}
  .search-field .search-clear::after,.toast-close::after,.mpt-close::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);}
  .search-field .search-clear{position:absolute;}
}

/* ── Forced colors (Windows hoog contrast) ────────────────────────────── */
@media (forced-colors:active){
  :where(button,[role=button],[tabindex],summary,a,select,input,textarea):focus-visible,.btn-icon:focus-visible,.switch:focus-visible{outline:2px solid Highlight;}
  .switch,label.checkbox input[type="checkbox"],.badge,.status-badge,.status-chip,.chip,.filter-chip{border:1px solid CanvasText;}
  .switch::after{background:Highlight;forced-color-adjust:none;}
  .btn-begra-primary,.btn-begra-secondary,.btn-begra-danger-outline,.btn-icon{border-color:transparent;}
}

/* ── Print ────────────────────────────────────────────────────────────── */
@media print{
  :root,[data-theme="dark"]{color-scheme:light;}
  .begra-sidebar,.begra-topbar,.toast-host,.sidebar-backdrop,.form-actions{display:none!important;}
  .content{padding:0!important;}
  .begra-card{break-inside:avoid;}
  *{box-shadow:none!important;}
  thead{display:table-header-group;}
  tr{break-inside:avoid;}
  .table-scroll{overflow:visible;}
  @page{margin:15mm;}
}

/* ── Motion-aanvullingen (okt 2026) ───────────────────────────────────────────
   Alleen transform/opacity/kleur; reduced-motion wordt afgevangen door de globale regel bovenaan.
   Intrede van tabelrijen speelt alleen bij een nieuw DOM-element (Blazor @key: sorteren/herrenderen
   hergebruikt rijen en animeert dus niet). Stagger beperkt tot de eerste 10 rijen (max ~108ms);
   "backwards" i.p.v. "both": na afloop geen resterende animatie-state en rijen blijven klikbaar. */
@keyframes rowIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.begra-table tbody tr:not(.dg-detail){animation:rowIn var(--dur-enter) var(--ease) backwards;}
.begra-table tbody tr:nth-child(2){animation-delay:12ms;}
.begra-table tbody tr:nth-child(3){animation-delay:24ms;}
.begra-table tbody tr:nth-child(4){animation-delay:36ms;}
.begra-table tbody tr:nth-child(5){animation-delay:48ms;}
.begra-table tbody tr:nth-child(6){animation-delay:60ms;}
.begra-table tbody tr:nth-child(7){animation-delay:72ms;}
.begra-table tbody tr:nth-child(8){animation-delay:84ms;}
.begra-table tbody tr:nth-child(9){animation-delay:96ms;}
.begra-table tbody tr:nth-child(n+10){animation-delay:108ms;}

/* Klikbare rijen: toetsenbordfocus en indrukfeedback (hover bestaat al). */
.begra-table tbody tr.clickable:focus-visible{outline:2px solid var(--focus-ring-solid);outline-offset:-2px;}
.begra-table tbody tr.clickable:active{background:color-mix(in srgb,var(--begra-primary) 14%,transparent);}

/* Knoppen: subtiele lift bij hover (primair); :active moet na :hover staan om te winnen.
   Disabled-overgang: opacity toegevoegd aan de transitielijst. */
.btn-begra-primary,.btn-begra-secondary,.btn-begra-danger-outline{transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur-fast) var(--ease),opacity var(--dur) var(--ease);}
.btn-begra-primary:not(:disabled):hover{transform:translateY(-1px);}
.btn-begra-primary:not(:disabled):active,.btn-begra-secondary:not(:disabled):active,.btn-begra-danger-outline:not(:disabled):active{transform:translateY(1px) scale(.98);}
a.begra-card:active,.begra-card.clickable:active{transform:scale(.995);}
a.begra-card,.begra-card.clickable{transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur-fast) var(--ease);}

/* Intrede van lege staat, foutkaart en validatiemelding (speelt alleen bij het verschijnen). */
@keyframes validationIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.empty-state,.begra-card[role="alert"]{animation:pageIn var(--dur-enter) var(--ease) backwards;}
.validation-message{animation:validationIn var(--dur-enter) var(--ease) backwards;}

/* Pills/badges: zachte kleurovergang bij statuswissel (element wordt door Blazor hergebruikt). */
.pill,.status-chip,.status-badge,.role-badge,.days-badge,.urgency-badge,.nav-status,.nav-term,.chapter-badge,.dg-chip{transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);}

/* Sneltoetsenoverzicht, toast-"ongedaan maken", tab-crossfade en paginatransitie (okt 2026). */
.shortcut-list{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1rem;margin:.75rem 0;align-items:center;}
.shortcut-list dt{margin:0;}
.shortcut-list dd{margin:0;color:var(--begra-gray-600);}
.shortcut-list kbd{padding:.1rem .45rem;border:1px solid var(--begra-gray-200);border-radius:var(--radius-xs);background:var(--begra-gray-100,transparent);font:inherit;font-size:.8rem;white-space:nowrap;}
.shortcut-hint{font-size:.8rem;color:var(--begra-gray-500,inherit);margin:0;}
.toast-undo{background:none;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--begra-primary-text);cursor:pointer;font:inherit;font-weight:600;font-size:.875rem;padding:.25rem .5rem;margin:.25rem 0 0 -.5rem;min-height:0;text-decoration:underline;text-underline-offset:2px;transition:background-color var(--dur) var(--ease);}
.toast-undo:hover{background:var(--begra-primary-light);}
.tab-panel{animation:tabIn var(--dur-enter) var(--ease) both;}
@keyframes tabIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.num-tick{display:inline-block;animation:numTick .5s var(--ease);}
@keyframes numTick{0%{transform:scale(1);}35%{transform:scale(1.25);color:var(--begra-primary-text);}100%{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){.tab-panel,.num-tick{animation:none;}}
/* Manco-tabel: kaartweergave op smalle schermen én in een smalle container (projectdetail met zijkolom); NAV-status en acties blijven zo bereikbaar. */
.manco-wrap { container-type: inline-size; }
@container (max-width: 860px) {
  .manco-table thead { display: none; }
  .manco-table, .manco-table tbody, .manco-table tr, .manco-table td { display: block; width: 100%; }
  .manco-table tr { padding: .5rem 0; border-bottom: 1px solid var(--begra-gray-200, #ddd); }
  .manco-table td { border: 0; padding: .15rem 0; }
  .manco-table td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--begra-gray-600); text-transform: uppercase; letter-spacing: .03em; }
  .manco-table td.cell-actions { display: flex; }
  .manco-table td.cell-actions .manco-notes { flex: 1 1 100%; margin: 0 0 .25rem; white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 640px) {
  .manco-table thead { display: none; }
  .manco-table, .manco-table tbody, .manco-table tr, .manco-table td { display: block; width: 100%; }
  .manco-table tr { padding: .5rem 0; border-bottom: 1px solid var(--begra-gray-200, #ddd); }
  .manco-table td { border: 0; padding: .15rem 0; }
  .manco-table td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--begra-gray-600); text-transform: uppercase; letter-spacing: .03em; }
  .manco-table td.cell-actions { display: flex; }
  .manco-table td.cell-actions .manco-notes { flex: 1 1 100%; margin: 0 0 .25rem; white-space: normal; overflow-wrap: anywhere; }
}
/* Scroll-lock: Dialog zet .dialog-open op <html> via MontageFocus.trap; scrollbar-gutter voorkomt een layoutsprong. */
html{scrollbar-gutter:stable;}
html.dialog-open,html.dialog-open body{overflow:hidden;}
/* Ongeldig veld: één stijl voor aria-invalid="true" (voorkeur) en de oude .invalid-klasse, zonder
   !important — de hover-regel bij Invulvelden slaat ongeldige velden over en deze regel staat na de
   (dark-)focusregels, dus de rode rand blijft ook bij hover en focus staan. */
:is(input,select,textarea):is([aria-invalid="true"],.invalid),
:is(input,select,textarea):is([aria-invalid="true"],.invalid):focus,
[data-theme="dark"] :is(input,select,textarea):is([aria-invalid="true"],.invalid){border-color:var(--tone-danger-fg);box-shadow:0 0 0 1px var(--tone-danger-fg);}

/* Updatebanner (vast onderaan) mag geen sticky opslaanbalk of dialoogknoppen bedekken: zolang hij er is,
   plakken die hoger en schuiven dialogen omhoog (de banner zelf: UpdateAvailableBanner.razor.css). */
html:has(.update-banner){--update-banner-space:5.5rem;}
@media(max-width:640px){html:has(.update-banner){--update-banner-space:8rem;}}
html:has(.update-banner) .form-actions,html:has(.update-banner) .nm-actions{bottom:var(--update-banner-space);}
html:has(.update-banner) .dialog{top:calc(50% - var(--update-banner-space) / 2);max-height:calc(100dvh - var(--update-banner-space) - 2rem);}

/* Tikdoelen (WCAG 2.5.8): minimaal 24 px op desktop, 40 px op touch. Chatacties krijgen een echte
   (layout-)maat i.p.v. een onzichtbaar vergroot ::after-vlak: dat lag over de berichttekst heen en was
   ook klikbaar terwijl de knop nog onzichtbaar was (opacity 0 tot hover). */
.chat-reply-btn,.chat-react-btn,.chat-aftercare-btn{display:inline-flex;align-items:center;justify-content:center;min-height:24px;min-width:24px;}
/* Touch (geen hover): acties altijd zichtbaar en 40px; de auteursregel mag dan over twee regels lopen. */
@media (hover:none){
  .chat-reply-btn,.chat-react-menu,.chat-aftercare-btn{opacity:1;}
  .chat-message-author{flex-wrap:wrap;row-gap:.125rem;}
  .chat-reply-btn,.chat-react-btn,.chat-aftercare-btn{min-height:40px;min-width:40px;}
}
input[type="checkbox"],input[type="radio"]{min-width:1.125rem;}
@media (pointer: coarse), (max-width: 768px) {
  /* Vergroot klikgebied van selectievakjes en radio's zonder visuele wijziging. */
  input[type="checkbox"],input[type="radio"]{position:relative;}
  input[type="checkbox"]::before,input[type="radio"]::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);}
  label.checkbox,.invite-option,.dg-value,.dg-col-row label{min-height:44px;align-items:center;}
}

/* Manco: foto's als miniaturen onder de omschrijving, melder uit de monteursapp en foto toevoegen (wensen okt 2026). */
.manco-photos{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.35rem;}
.manco-thumb{display:block;width:56px;height:56px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--begra-gray-200);background:var(--begra-gray-100);}
.manco-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.manco-thumb:focus-visible{outline:2px solid var(--focus-ring-solid);outline-offset:2px;}
.manco-reported{font-size:.8rem;margin-top:.15rem;}
.manco-photo-add{cursor:pointer;}
.manco-photo-add:focus-within{outline:2px solid var(--focus-ring-solid);outline-offset:2px;}
.manco-photo-count{display:inline-block;margin-left:.35rem;font-size:.8rem;}