/*
 * VHMAudit UI Kit v1256
 * --------------------
 * Dit bestand is vanaf v937 de centrale bron voor generieke UI-keuzes. Vanaf v1239 worden ook bestaande module-styles stapsgewijs naar deze tokens gemigreerd. v1256 centraliseert de eerste bestaande navigatie-, tabel-, toolbar- en meldingcomponenten.
 * Pas kleuren, typografie, hoogtes, radii, iconen en standaardcomponenten HIER aan.
 * Module-specifieke layout hoort in assets/style.css en mag deze basis niet dupliceren.
 */

:root{
  /* Typografie */
  --vhm-font-family:Arial,sans-serif;
  --vhm-font-size:14px;
  --vhm-font-size-small:11px;
  --vhm-font-size-xs:9px;
  --vhm-font-weight-normal:400;
  --vhm-font-weight-medium:600;
  --vhm-font-weight-bold:700;
  --vhm-font-weight-heavy:800;

  --vhm-h1-size:18px;
  --vhm-h1-line:1.2;
  --vhm-h1-margin:0 0 10px;
  --vhm-h2-size:16px;
  --vhm-h2-line:1.25;
  --vhm-h2-margin:0 0 8px;
  --vhm-h3-size:13px;
  --vhm-h3-line:1.3;
  --vhm-h3-margin:0 0 6px;

  /* Hoofdkleuren */
  --vhm-color-primary:#e96f00;
  --vhm-color-primary-hover:#c65a00;
  --vhm-color-primary-soft:#fff7ed;
  --vhm-color-text:#303332;
  --vhm-color-muted:#667085;
  --vhm-color-bg:#ece9e5;
  --vhm-color-surface:#ffffff;
  --vhm-color-surface-soft:#f6f7f8;
  --vhm-color-border:#d8dde1;
  --vhm-color-border-strong:#c8cdd1;

  /* Semantische kleuren: één tint per betekenis */
  --vhm-color-success:#2f7a45;
  --vhm-color-success-soft:#e7f5ea;
  --vhm-color-warning:#8a6400;
  --vhm-color-warning-soft:#fff4cf;
  --vhm-color-danger:#a8382f;
  --vhm-color-danger-soft:#fdeeee;
  --vhm-color-info:#1976d2;
  --vhm-color-info-soft:#e8f1fb;
  --vhm-color-purple:#8e44ad;
  --vhm-color-purple-soft:#f2e8f7;

  /* Vaste mengkleuren voor de vier basisfuncties bij Talentprofiel > Dominantie.
     F hergebruikt bestaand paars; de drie nieuwe tinten zijn centraal beschikbaar.
     Gebruik deze niet als succes/waarschuwing/fout-status. */
  --vhm-color-turquoise:#168f9b;         /* S = Doener + Beheerder */
  --vhm-color-turquoise-soft:#dff1f3;
  --vhm-color-turquoise-border:#85c4cb;
  --vhm-color-turquoise-text:#16626c;
  --vhm-color-lime:#9aae38;              /* T = Beheerder + Onderzoeker */
  --vhm-color-lime-soft:#f0f3d8;
  --vhm-color-lime-border:#c2d083;
  --vhm-color-lime-text:#54641c;
  --vhm-color-blend-orange:#e58a38;      /* I = Onderzoeker + Idealist */
  --vhm-color-blend-orange-soft:#fff0df;
  --vhm-color-blend-orange-border:#e9b47c;
  --vhm-color-blend-orange-text:#955117;
  --vhm-color-neutral:#526572;
  --vhm-color-neutral-soft:#eef2f5;

  /* Statuskleuren: badges, dropdowns én Planning gebruiken exact deze tokens. */
  --vhm-status-success-bg:var(--vhm-color-success-soft);
  --vhm-status-success-border:#9dcea7;
  --vhm-status-success-fg:var(--vhm-color-success);
  --vhm-status-warning-bg:var(--vhm-color-warning-soft);
  --vhm-status-warning-border:#ead27b;
  --vhm-status-warning-fg:var(--vhm-color-warning);
  --vhm-status-danger-bg:var(--vhm-color-danger-soft);
  --vhm-status-danger-border:#e9aaaa;
  --vhm-status-danger-fg:var(--vhm-color-danger);
  --vhm-status-info-bg:var(--vhm-color-info-soft);
  --vhm-status-info-border:#b8d4ee;
  --vhm-status-info-fg:#346c9b;
  --vhm-status-purple-bg:var(--vhm-color-purple-soft);
  --vhm-status-purple-border:#d5b9e2;
  --vhm-status-purple-fg:#71358b;
  --vhm-status-neutral-bg:var(--vhm-color-neutral-soft);
  --vhm-status-neutral-border:#d7dde2;
  --vhm-status-neutral-fg:var(--vhm-color-neutral);
  --vhm-status-font-size:9px;
  --vhm-status-font-weight:400;

  /* Radius */
  --vhm-radius-xs:4px;
  --vhm-radius-sm:6px;
  --vhm-radius-md:9px;
  --vhm-radius-lg:12px;
  --vhm-radius-card:16px;
  --vhm-radius-pill:999px;

  /* Spacing */
  --vhm-space-1:4px;
  --vhm-space-2:6px;
  --vhm-space-3:8px;
  --vhm-space-4:10px;
  --vhm-space-5:12px;
  --vhm-space-6:16px;
  --vhm-space-7:20px;
  --vhm-space-8:24px;

  /* Controls */
  --vhm-control-height:30px;
  --vhm-control-radius:6px;
  --vhm-control-padding-x:9px;
  --vhm-control-font-size:11px;
  --vhm-control-border:var(--vhm-color-border-strong);
  --vhm-focus-ring:0 0 0 3px rgba(233,111,0,.12);
  --vhm-label-font-size:9px;
  --vhm-label-font-weight:700;
  --vhm-field-gap:4px;
  --vhm-field-row-gap:10px;
  --vhm-textarea-min-height:74px;
  --vhm-check-size:14px;
  --vhm-chip-height:26px;

  /* Buttons */
  --vhm-button-height:30px;
  --vhm-button-padding-x:11px;
  --vhm-button-radius:9px;
  --vhm-button-font-size:11px;
  --vhm-button-font-weight:700;
  --vhm-icon-button-size:28px;

  /* Niveauknoppen */
  --vhm-level1-height:30px;
  --vhm-level1-font-size:11px;
  --vhm-level1-radius:16px;
  --vhm-level2-height:28px;
  --vhm-level2-font-size:9px;
  --vhm-level2-radius:8px;
  --vhm-level3-height:25px;
  --vhm-level3-font-size:9px;
  --vhm-level3-radius:4px;

  /* Tabellen: twee officiële varianten */
  --vhm-table-normal-font-size:11px;
  --vhm-table-normal-head-font-size:9px;
  --vhm-table-normal-cell-y:7px;
  --vhm-table-normal-cell-x:8px;
  --vhm-table-compact-font-size:9px;
  --vhm-table-compact-head-font-size:9px;
  --vhm-table-compact-cell-y:5px;
  --vhm-table-compact-cell-x:6px;
  --vhm-table-head-bg:#f4f5f6;
  --vhm-table-row-hover:var(--vhm-color-primary-soft);
  --vhm-table-row-hover-overlay:color-mix(in srgb,var(--vhm-color-primary) 12%,transparent);
  --vhm-table-line:var(--vhm-color-border);

  /* Legacy tokens tijdens migratie; wijzen bewust naar compact. */
  --vhm-table-font-size:var(--vhm-table-compact-font-size);
  --vhm-table-head-font-size:var(--vhm-table-compact-head-font-size);
  --vhm-table-cell-y:var(--vhm-table-compact-cell-y);
  --vhm-table-cell-x:var(--vhm-table-compact-cell-x);

  /* Kaarten / panelen */
  --vhm-card-padding:16px;
  --vhm-card-padding-compact:10px 12px;
  --vhm-panel-padding:12px 14px;
  --vhm-panel-radius:12px;

  /* Meldingen */
  --vhm-alert-font-size:9px;
  --vhm-alert-font-weight:600;
  --vhm-alert-padding:9px 11px;
  --vhm-alert-radius:8px;

  /* Schaduwen */
  --vhm-shadow-card:0 2px 8px rgba(0,0,0,.05);
  --vhm-shadow-panel:0 1px 4px rgba(0,0,0,.04);
  --vhm-shadow-popover:0 10px 30px rgba(0,0,0,.14);
}

/* --------------------------------------------------------------------------
   Harde globale basis. Deze regels zijn bewust leidend.
   Een h2 is dus op iedere pagina exact hetzelfde.
   -------------------------------------------------------------------------- */
body{
  font-family:var(--vhm-font-family)!important;
  color:var(--vhm-color-text);
}
body h1:not(#vhm-ui-local-heading-override){
  font-family:var(--vhm-font-family)!important;
  font-size:var(--vhm-h1-size)!important;
  line-height:var(--vhm-h1-line)!important;
  margin:var(--vhm-h1-margin)!important;
}
body h2:not(#vhm-ui-local-heading-override){
  font-family:var(--vhm-font-family)!important;
  font-size:var(--vhm-h2-size)!important;
  line-height:var(--vhm-h2-line)!important;
  margin:var(--vhm-h2-margin)!important;
}
body h3:not(#vhm-ui-local-heading-override){
  font-family:var(--vhm-font-family)!important;
  font-size:var(--vhm-h3-size)!important;
  line-height:var(--vhm-h3-line)!important;
  margin:var(--vhm-h3-margin)!important;
}
body button,body input,body select,body textarea{
  font-family:var(--vhm-font-family)!important;
}

/* Standaardactieknoppen. Bestaande .button en kale buttons gebruiken dezelfde bron. */
.button,
button:not(.vhm-filter-button):not(.vhm-delete-icon):not(.bf-collega-chip-remove):not(.presence-modal-close):not(.progress-status-trigger):not(.progress-empty-default):not(.impersonate-user-link){
  font-size:var(--vhm-button-font-size);
  font-weight:var(--vhm-button-font-weight);
  border-radius:var(--vhm-button-radius);
}

/* Centrale verwijderactie */
.vhm-delete-icon,
.vhm-btn-delete{
  appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:var(--vhm-icon-button-size)!important;
  min-width:var(--vhm-icon-button-size)!important;
  height:var(--vhm-icon-button-size)!important;
  min-height:var(--vhm-icon-button-size)!important;
  padding:0!important;
  border:1px solid transparent!important;
  border-radius:var(--vhm-radius-sm)!important;
  background:transparent!important;
  color:var(--vhm-color-danger)!important;
  font-size:0!important;
  line-height:1!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.vhm-delete-icon::before,
.vhm-btn-delete::before{
  content:"";
  display:block;
  width:14px;
  height:14px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-1 12H8L7 9Zm3 2v8h2v-8h-2Zm4 0v8h2v-8h-2Z'/%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'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-1 12H8L7 9Zm3 2v8h2v-8h-2Zm4 0v8h2v-8h-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.vhm-delete-icon:hover,.vhm-btn-delete:hover,.vhm-delete-icon:focus-visible,.vhm-btn-delete:focus-visible{
  color:#8f2222!important;
  background:var(--vhm-color-danger-soft)!important;
  border-color:#f0cccc!important;
  outline:none!important;
}

/* Generieke controls voor nieuwe/migrerende onderdelen */
.vhm-control,
.vhm-select,
.vhm-input{
  width:100%;
  min-height:var(--vhm-control-height);
  padding:5px var(--vhm-control-padding-x);
  border:1px solid var(--vhm-control-border);
  border-radius:var(--vhm-control-radius);
  background:var(--vhm-color-surface);
  color:var(--vhm-color-text);
  font:400 var(--vhm-control-font-size)/1.25 var(--vhm-font-family);
}
.vhm-control:focus,.vhm-select:focus,.vhm-input:focus{
  outline:0;
  border-color:var(--vhm-color-primary);
  box-shadow:var(--vhm-focus-ring);
}

/* Eén vaste navigatiestijl per niveau.
   Niveau 1 = hoofdnavigatie / grootste pill.
   Niveau 2 = compactere subnavigatie met donkere actieve staat.
   Niveau 3 = vlakke witte tabs op scheidingslijn; bewust duidelijk anders dan niveau 1. */
.vhm-nav-level-1,
.central-admin-tabs{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}
.vhm-nav-level-1 a,
.central-admin-tabs a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:var(--vhm-level1-height)!important;
  padding:5px 11px!important;
  border:1px solid #d1d4d6!important;
  border-radius:var(--vhm-level1-radius)!important;
  background:#eeeeee!important;
  color:#333!important;
  text-decoration:none!important;
  font:700 var(--vhm-level1-font-size)/1 var(--vhm-font-family)!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}
.vhm-nav-level-1 a.active,
.central-admin-tabs a.active{
  border-color:var(--vhm-color-primary)!important;
  background:var(--vhm-color-primary)!important;
  color:#fff!important;
}

.vhm-nav-level-2,
.module-subtabs,
.evaluation-subtabs,
.studie-user-tabs{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  width:max-content;
  max-width:100%;
  padding:5px!important;
  border:1px solid var(--vhm-color-border)!important;
  border-radius:10px!important;
  background:#e9edf0!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04)!important;
}
.vhm-nav-level-2 a,
.module-subtabs a,
.evaluation-subtabs a,
.studie-user-tabs a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:var(--vhm-level2-height)!important;
  padding:5px 10px!important;
  border:1px solid transparent!important;
  border-radius:var(--vhm-level2-radius)!important;
  background:transparent!important;
  color:#46515a!important;
  text-decoration:none!important;
  font:700 var(--vhm-level2-font-size)/1 var(--vhm-font-family)!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}
.vhm-nav-level-2 a.active,
.module-subtabs a.active,
.evaluation-subtabs a.active,
.studie-user-tabs a.active{
  border-color:var(--vhm-color-neutral)!important;
  background:var(--vhm-color-neutral)!important;
  color:#fff!important;
}

.vhm-nav-level-3,
.beheer-level3-tabs,
.optie-subtabs,
.project-detail-tabs,
.project-eval-mini-tabs,
.dashboard-compare-tabs,
.progress-year-tabs{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  width:100%!important;
  margin:0 0 10px!important;
  padding:0 0 7px!important;
  border:0!important;
  border-bottom:1px solid #d8d8d8!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.vhm-nav-level-3 a,
.beheer-level3-tabs a,
.optie-subtabs a,
.project-detail-tabs a,
.project-eval-mini-tabs a,
.dashboard-compare-tabs a,
.progress-year-tabs a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:var(--vhm-level3-height)!important;
  padding:4px 9px!important;
  border:1px solid #cfd4d8!important;
  border-radius:var(--vhm-level3-radius)!important;
  background:#fff!important;
  color:#252525!important;
  text-decoration:none!important;
  font:700 var(--vhm-level3-font-size)/1 var(--vhm-font-family)!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}
.vhm-nav-level-3 a.active,
.beheer-level3-tabs a.active,
.optie-subtabs a.active,
.project-detail-tabs a.active,
.project-eval-mini-tabs a.active,
.dashboard-compare-tabs a.active,
.progress-year-tabs a.active{
  border-color:var(--vhm-color-primary)!important;
  background:var(--vhm-color-primary)!important;
  color:#fff!important;
}


/* Centrale modulebalk: niveau-2 navigatie links, primaire actie rechts.
   Modules voegen alleen deze class toe; geen lokale flex/padding-variant meer. */
.vhm-module-bar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  width:100%!important;
  margin:0 0 10px!important;
}
.vhm-module-bar>.vhm-nav-level-2,
.vhm-module-bar>.module-subtabs{margin:0!important;min-width:0!important}
.vhm-module-bar>.button,
.vhm-module-bar>form{flex:0 0 auto!important;margin-left:auto!important}
@media(max-width:760px){
  .vhm-module-bar{align-items:flex-start!important;flex-wrap:wrap!important}
  .vhm-module-bar>.button,.vhm-module-bar>form{margin-left:0!important}
}

/* Eén centrale scrollwrapper voor tabellen. */
.vhm-table-wrap,.tablewrap{width:100%!important;overflow:auto!important}

/* Chips */
.vhm-chip,
.bf-collega-chip,
.project-eval-recipient-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:26px;
  padding:4px 9px;
  border:1px solid var(--vhm-color-border);
  border-radius:var(--vhm-radius-pill);
  background:var(--vhm-color-neutral-soft);
  color:#333;
  font-size:11px;
  font-weight:600;
  line-height:1;
}

/* Statusbadges */
.vhm-status{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border:1px solid transparent;border-radius:var(--vhm-radius-pill);font-family:var(--vhm-font-family);font-size:var(--vhm-status-font-size);font-weight:var(--vhm-status-font-weight);line-height:1}
.vhm-status--success{background:var(--vhm-status-success-bg);border-color:var(--vhm-status-success-border);color:var(--vhm-status-success-fg)}
.vhm-status--warning{background:var(--vhm-status-warning-bg);border-color:var(--vhm-status-warning-border);color:var(--vhm-status-warning-fg)}
.vhm-status--danger{background:var(--vhm-status-danger-bg);border-color:var(--vhm-status-danger-border);color:var(--vhm-status-danger-fg)}
.vhm-status--info{background:var(--vhm-status-info-bg);border-color:var(--vhm-status-info-border);color:var(--vhm-status-info-fg)}
.vhm-status--purple{background:var(--vhm-status-purple-bg);border-color:var(--vhm-status-purple-border);color:var(--vhm-status-purple-fg)}
.vhm-status--neutral{background:var(--vhm-status-neutral-bg);border-color:var(--vhm-status-neutral-border);color:var(--vhm-status-neutral-fg)}

/* Interactieve status-/keuzevelden. Zelfde visuele familie als statusbadges.
   Voortgang gebruikt deze basis voor gekleurde dropdowns en statusknoppen;
   de inhoudskleur mag daar dynamisch uit de beheerconfiguratie komen. */
.vhm-status-choice,
.progress-colored-select,
.progress-status-trigger,
.progress-empty-default{
  --vhm-status-bg:var(--vhm-color-neutral-soft);
  --vhm-status-border:#d7dde2;
  --vhm-status-fg:var(--vhm-color-neutral);
  height:24px!important;
  min-height:24px!important;
  border:1px solid var(--vhm-status-border)!important;
  border-radius:var(--vhm-radius-pill)!important;
  background-color:var(--vhm-status-bg)!important;
  color:var(--vhm-status-fg)!important;
  font-family:var(--vhm-font-family)!important;
  font-size:var(--vhm-status-font-size)!important;
  font-weight:var(--vhm-status-font-weight)!important;
  line-height:1!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}
.vhm-status-choice,
.progress-colored-select{
  padding:2px 24px 2px 9px!important;
}
button.vhm-status-choice{padding:3px 8px!important}
select.vhm-status-choice,
select.progress-colored-select{
  appearance:none!important;
  -webkit-appearance:none!important;
  background-image:none!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.progress-status-trigger{
  width:84px!important;
  padding:2px 7px 2px 9px!important;
  justify-content:center!important;
  gap:5px!important;
}
.progress-status-trigger i{margin-left:auto!important;font-size:8px!important;line-height:1!important}
.progress-status-trigger .progress-status-icon{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.progress-empty-default{
  width:84px!important;
  padding:2px 9px!important;
  border-color:#ead27b!important;
  background:var(--vhm-color-warning-soft)!important;
  color:var(--vhm-color-warning)!important;
}
.vhm-status-choice--success{--vhm-status-bg:var(--vhm-status-success-bg);--vhm-status-border:var(--vhm-status-success-border);--vhm-status-fg:var(--vhm-status-success-fg);background:var(--vhm-status-bg)!important;border-color:var(--vhm-status-border)!important;color:var(--vhm-status-fg)!important}
.vhm-status-choice--warning{--vhm-status-bg:var(--vhm-status-warning-bg);--vhm-status-border:var(--vhm-status-warning-border);--vhm-status-fg:var(--vhm-status-warning-fg);background:var(--vhm-status-bg)!important;border-color:var(--vhm-status-border)!important;color:var(--vhm-status-fg)!important}
.vhm-status-choice--danger{--vhm-status-bg:var(--vhm-status-danger-bg);--vhm-status-border:var(--vhm-status-danger-border);--vhm-status-fg:var(--vhm-status-danger-fg);background:var(--vhm-status-bg)!important;border-color:var(--vhm-status-border)!important;color:var(--vhm-status-fg)!important}
.vhm-status-choice--info{--vhm-status-bg:var(--vhm-status-info-bg);--vhm-status-border:var(--vhm-status-info-border);--vhm-status-fg:var(--vhm-status-info-fg);background:var(--vhm-status-bg)!important;border-color:var(--vhm-status-border)!important;color:var(--vhm-status-fg)!important}
.vhm-status-choice--neutral{--vhm-status-bg:var(--vhm-status-neutral-bg);--vhm-status-border:var(--vhm-status-neutral-border);--vhm-status-fg:var(--vhm-status-neutral-fg);background:var(--vhm-status-bg)!important;border-color:var(--vhm-status-border)!important;color:var(--vhm-status-fg)!important}

/* Iconenset: gebruik <span class="vhm-icon vhm-icon--naam" aria-hidden="true"></span> */
.vhm-icon{display:inline-block;width:16px;height:16px;vertical-align:-3px;background:currentColor;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-position:center;mask-repeat:no-repeat;mask-size:contain}
.vhm-icon--home{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.2 12 3l9 8.2V21h-6v-6H9v6H3v-9.8Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.2 12 3l9 8.2V21h-6v-6H9v6H3v-9.8Z'/%3E%3C/svg%3E")}
.vhm-icon--plus{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7V4Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7V4Z'/%3E%3C/svg%3E")}
.vhm-icon--edit{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 17.25-.75 3.5 3.5-.75L18.8 7.95l-2.75-2.75L4 17.25ZM20.7 6.05a1 1 0 0 0 0-1.4l-1.35-1.35a1 1 0 0 0-1.4 0l-1 1 2.75 2.75 1-1Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 17.25-.75 3.5 3.5-.75L18.8 7.95l-2.75-2.75L4 17.25ZM20.7 6.05a1 1 0 0 0 0-1.4l-1.35-1.35a1 1 0 0 0-1.4 0l-1 1 2.75 2.75 1-1Z'/%3E%3C/svg%3E")}
.vhm-icon--check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.3 17.3-4.6-4.6 1.4-1.4 3.2 3.2 8.6-8.6 1.4 1.4-10 10Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.3 17.3-4.6-4.6 1.4-1.4 3.2 3.2 8.6-8.6 1.4 1.4-10 10Z'/%3E%3C/svg%3E")}
.vhm-icon--search{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 4a6.5 6.5 0 1 0 3.98 11.64L19.84 21 21 19.84l-5.36-5.36A6.5 6.5 0 0 0 10.5 4Zm0 2a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 4a6.5 6.5 0 1 0 3.98 11.64L19.84 21 21 19.84l-5.36-5.36A6.5 6.5 0 0 0 10.5 4Zm0 2a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Z'/%3E%3C/svg%3E")}
.vhm-icon--mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3V5Zm2 2v.6l7 4.7 7-4.7V7H5Zm14 10V10l-7 4.7L5 10v7h14Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3V5Zm2 2v.6l7 4.7 7-4.7V7H5Zm14 10V10l-7 4.7L5 10v7h14Z'/%3E%3C/svg%3E")}
.vhm-icon--trash{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-1 12H8L7 9Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-1 12H8L7 9Z'/%3E%3C/svg%3E")}

/* --------------------------------------------------------------------------
   Styleguide zelf - scoped, dus geen invloed op normale pagina's.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   Centrale popup / modal
   Planning en Voortgang gebruiken exact dezelfde titel, velden, tussenruimte,
   sluitknop en actiefooter. Nieuwe modals horen deze classes te hergebruiken.
   -------------------------------------------------------------------------- */
:root{
  --vhm-modal-width:560px;
  --vhm-modal-padding:18px;
  --vhm-modal-field-gap:4px;
  --vhm-modal-row-gap:10px;
  --vhm-modal-actions-gap:8px;
}
.vhm-modal{
  position:fixed!important;
  inset:0!important;
  z-index:2000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:20px!important;
  box-sizing:border-box!important;
  background:rgba(0,0,0,.40)!important;
}
.vhm-modal[hidden]{display:none!important}
.vhm-modal-dialog{
  position:relative!important;
  width:min(var(--vhm-modal-width),calc(100vw - 40px))!important;
  max-height:calc(100vh - 40px)!important;
  overflow:auto!important;
  box-sizing:border-box!important;
  padding:var(--vhm-modal-padding)!important;
  border:1px solid var(--vhm-color-border)!important;
  border-radius:var(--vhm-radius-lg)!important;
  background:var(--vhm-color-surface)!important;
  color:var(--vhm-color-text)!important;
  text-align:left!important;
  box-shadow:0 18px 55px rgba(0,0,0,.24)!important;
}
.vhm-modal-dialog .vhm-modal-title{
  margin:0 34px 12px 0!important;
  padding:0!important;
  border:0!important;
  color:var(--vhm-color-text)!important;
  font:700 var(--vhm-h2-size)/var(--vhm-h2-line) var(--vhm-font-family)!important;
  letter-spacing:0!important;
  text-align:left!important;
}
.vhm-modal-close{
  appearance:none!important;
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  z-index:5!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:28px!important;
  min-width:28px!important;
  max-width:28px!important;
  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:var(--vhm-radius-sm)!important;
  background:transparent!important;
  color:#777!important;
  box-shadow:none!important;
  font:400 20px/1 var(--vhm-font-family)!important;
  cursor:pointer!important;
}
.vhm-modal-close:hover,.vhm-modal-close:focus-visible{
  background:var(--vhm-color-neutral-soft)!important;
  color:var(--vhm-color-text)!important;
  outline:none!important;
}
.vhm-modal-body{margin:0!important}
.vhm-modal-field{
  display:flex!important;
  flex-direction:column!important;
  gap:var(--vhm-modal-field-gap)!important;
  width:100%!important;
  margin:0 0 var(--vhm-modal-row-gap)!important;
  padding:0!important;
  color:var(--vhm-color-text)!important;
  font:700 9px/1.35 var(--vhm-font-family)!important;
  text-align:left!important;
}
.vhm-modal-field-label-only{margin-bottom:6px!important}
.vhm-modal-field>input:not([type=checkbox]):not([type=radio]),
.vhm-modal-field>select,
.vhm-modal-field>textarea,
.vhm-modal-field .customer-search-wrap>input:not([type=checkbox]):not([type=radio]){
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  margin:0!important;
  border:1px solid var(--vhm-control-border)!important;
  border-radius:var(--vhm-control-radius)!important;
  background:#fff!important;
  color:var(--vhm-color-text)!important;
  font:400 var(--vhm-control-font-size)/1.25 var(--vhm-font-family)!important;
  box-shadow:none!important;
}
.vhm-modal-field>input:not([type=checkbox]):not([type=radio]),
.vhm-modal-field>select,
.vhm-modal-field .customer-search-wrap>input:not([type=checkbox]):not([type=radio]){
  height:var(--vhm-control-height)!important;
  min-height:var(--vhm-control-height)!important;
  padding:5px var(--vhm-control-padding-x)!important;
}
.vhm-modal-field>textarea{
  min-height:74px!important;
  padding:7px var(--vhm-control-padding-x)!important;
  resize:vertical!important;
}
.vhm-modal-field>input:focus,.vhm-modal-field>select:focus,.vhm-modal-field>textarea:focus,
.vhm-modal-field .customer-search-wrap>input:focus{
  outline:0!important;
  border-color:var(--vhm-color-primary)!important;
  box-shadow:var(--vhm-focus-ring)!important;
}
.vhm-modal-section{
  margin:0 0 var(--vhm-modal-row-gap)!important;
  padding:0!important;
}
.vhm-modal-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:var(--vhm-modal-actions-gap)!important;
  width:100%!important;
  margin:14px 0 0!important;
  padding:0!important;
  text-align:right!important;
}
.vhm-modal-actions button{width:auto!important;min-width:0!important;margin:0!important}
.vhm-modal-actions .primary,.vhm-modal-actions button[type="submit"]{
  border-color:var(--vhm-color-primary)!important;
  background:var(--vhm-color-primary)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.vhm-modal-actions .primary:hover,.vhm-modal-actions button[type="submit"]:hover{
  border-color:var(--vhm-color-primary-hover)!important;
  background:var(--vhm-color-primary-hover)!important;
  color:#fff!important;
}
.vhm-modal-actions .secondary{
  border:1px solid var(--vhm-color-border-strong)!important;
  background:#fff!important;
  color:var(--vhm-color-text)!important;
}
.vhm-modal-actions .secondary:hover{background:var(--vhm-color-surface-soft)!important;color:var(--vhm-color-text)!important}

/* Gekoppelde modalinhoud: alleen uitzonderingen die uit de inhoudsopbouw volgen.
   Basisafmetingen, titel, velden, sluitknop en acties komen uitsluitend uit de
   generieke .vhm-modal* componenten hierboven. */
#itemModal.vhm-modal .modal-multi-add{margin:0!important;padding-top:0!important;border-top:0!important}
#itemModal.vhm-modal .modal-choice-section{margin:0 0 var(--vhm-modal-row-gap)!important}
#itemModal.vhm-modal .modal-choice-title{margin:0 0 5px!important;font:700 9px/1.35 var(--vhm-font-family)!important}
#itemModal.vhm-modal .modal-hours-option-row{margin:0 0 var(--vhm-modal-row-gap)!important}
#progressTaskModal.vhm-modal .modal-multi-add{margin:0!important;padding:0!important;border:0!important}
#progressTaskModal.vhm-modal #progressTaskDescription{min-height:74px!important;height:74px!important}
#progressTaskModal.vhm-modal #progressTaskSelected{margin:-4px 0 var(--vhm-modal-row-gap)!important}
#progressTaskModal.vhm-modal #progressTaskSelected:empty{display:none!important}
#progressTaskModal.vhm-modal .progress-task-reminders{margin:0!important}
#progressTaskModal.vhm-modal .progress-task-reminder-block{display:flex!important;flex-direction:column!important;gap:4px!important;margin:0 0 var(--vhm-modal-row-gap)!important;padding:0!important;border:0!important;background:transparent!important}
#progressTaskModal.vhm-modal .progress-task-reminder-block .vhm-field-label{font:700 9px/1.25 var(--vhm-font-family)!important;color:var(--vhm-color-text)!important}
#progressTaskModal.vhm-modal .progress-task-reminder-block .vhm-help{margin:0!important}
#progressTaskModal.vhm-modal .progress-task-reminder-checks{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:7px 14px!important;margin:2px 0 0!important;padding:0!important}
#progressTaskModal.vhm-modal .progress-task-error{display:block!important;min-height:14px!important;margin:-2px 0 2px!important;padding:0!important}

/* Styleguide-holder: alleen om de echte popup op ware grootte in de pagina te tonen. */
.vhm-modal-preview{
  display:flex;
  justify-content:center;
  padding:14px;
  overflow:auto;
  border:1px dashed var(--vhm-color-border-strong);
  border-radius:var(--vhm-radius-md);
  background:var(--vhm-color-surface-soft);
}
.vhm-modal-preview>.vhm-modal-dialog{max-height:none!important;overflow:visible!important}

.vhm-styleguide{max-width:1320px!important;margin:0 auto!important;padding:12px 16px 40px!important;box-sizing:border-box!important}
.vhm-styleguide-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.vhm-styleguide-intro p{max-width:820px;margin:0;color:var(--vhm-color-muted)}
.vhm-styleguide-version{padding:5px 9px;border-radius:var(--vhm-radius-pill);background:var(--vhm-color-neutral-soft);font-size:11px;font-weight:700;color:var(--vhm-color-neutral)}
.vhm-styleguide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vhm-styleguide-card{margin:0!important;padding:16px!important;border:1px solid var(--vhm-color-border)!important;border-radius:var(--vhm-radius-lg)!important;box-shadow:var(--vhm-shadow-card)!important}
.vhm-styleguide-card.wide{grid-column:1/-1}
.vhm-styleguide-surface-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start;margin:10px 0 12px}.vhm-styleguide-surface-grid .vhm-card,.vhm-styleguide-surface-grid .vhm-panel{margin:0!important;min-height:92px}.vhm-styleguide-surface-grid p{margin:0!important}@media(max-width:850px){.vhm-styleguide-surface-grid{grid-template-columns:1fr}}
.vhm-styleguide-card>h2{padding-bottom:9px!important;border-bottom:1px solid #edf0f2}
.vhm-swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.vhm-swatch{overflow:hidden;border:1px solid var(--vhm-color-border);border-radius:var(--vhm-radius-md);background:#fff}
.vhm-swatch-color{height:48px;background:var(--swatch)}
.vhm-swatch-copy{padding:7px 9px;font-size:9px}.vhm-swatch-copy b{display:block;font-size:11px}.vhm-swatch-copy code{color:var(--vhm-color-muted)}
.vhm-sample-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0}
.vhm-token-table{width:100%;font-size:11px}.vhm-token-table th,.vhm-token-table td{padding:7px 8px}.vhm-token-table code{font-size:9px;color:#7a3f0e}
.vhm-type-sample{padding:10px 0;border-bottom:1px solid #edf0f2}.vhm-type-sample:last-child{border-bottom:0}.vhm-type-sample small{display:block;margin-top:3px}
.vhm-icon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}.vhm-icon-sample{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid var(--vhm-color-border);border-radius:var(--vhm-radius-md);font-size:11px}.vhm-icon-sample .vhm-icon{color:var(--vhm-color-text)}
.vhm-spacing-line{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:11px}.vhm-spacing-block{height:16px;border-radius:3px;background:var(--vhm-color-primary);width:var(--w)}
@media(max-width:850px){.vhm-styleguide-grid{grid-template-columns:1fr}.vhm-styleguide-card.wide{grid-column:auto}.vhm-styleguide-intro{align-items:flex-start;flex-direction:column}}


/* ========================================================================== 
   v940 UNIFORMERINGSBRUG
   --------------------------------------------------------------------------
   Deze laag koppelt bestaande/legacy componentnamen aan de centrale UI-kit.
   Vanaf v978 zijn de visueel goedgekeurde dubbele Card/Panel- en meldingsregels
   uit style.css verwijderd; alleen functionele/module-specifieke layout blijft daar.
   ========================================================================== */

/* Basistypografie: koppen zijn overal identiek, ongeacht module. */
body h1:not(#vhm-ui-local-heading-override){font-weight:var(--vhm-font-weight-bold)!important;letter-spacing:0!important;text-transform:none!important}
body h2:not(#vhm-ui-local-heading-override){font-weight:var(--vhm-font-weight-bold)!important;letter-spacing:0!important;text-transform:none!important}
body h3:not(#vhm-ui-local-heading-override){font-weight:var(--vhm-font-weight-bold)!important;letter-spacing:0!important;text-transform:none!important}

/* Kaarten / panelen: twee officiële oppervlakten.
   Card = hoofdcontainer, panel = inhoudsblok binnen een pagina/card. */
.card,
.vhm-card{
  box-sizing:border-box!important;
  padding:var(--vhm-card-padding)!important;
  background:var(--vhm-color-surface)!important;
  border:1px solid var(--vhm-color-border)!important;
  border-radius:var(--vhm-radius-card)!important;
  box-shadow:var(--vhm-shadow-card)!important;
}
.compact-card,
.vhm-card--compact{
  padding:var(--vhm-card-padding-compact)!important;
}
.vhm-panel{
  box-sizing:border-box!important;
  padding:var(--vhm-panel-padding)!important;
  background:var(--vhm-color-surface)!important;
  border:1px solid var(--vhm-color-border)!important;
  border-radius:var(--vhm-panel-radius)!important;
  box-shadow:var(--vhm-shadow-panel)!important;
}

/* Bestaande dashboard-/analysepanelen worden tijdens de migratie visueel aan
   dezelfde panel-familie gekoppeld. Hun functionele padding/layout blijft staan. */
.fact-panel,
.project-dashboard-card,
.progress-chart-card{
  background:var(--vhm-color-surface)!important;
  border-color:var(--vhm-color-border)!important;
  border-radius:var(--vhm-panel-radius)!important;
  box-shadow:var(--vhm-shadow-panel)!important;
}

/* Meldingen: één semantische familie voor info, succes, waarschuwing en fout. */
.vhm-alert{
  box-sizing:border-box!important;
  display:block;
  margin:0 0 12px!important;
  padding:var(--vhm-alert-padding)!important;
  border:1px solid transparent!important;
  border-radius:var(--vhm-alert-radius)!important;
  font-size:var(--vhm-alert-font-size)!important;
  font-weight:var(--vhm-alert-font-weight)!important;
  line-height:1.4!important;
  box-shadow:none!important;
}
.vhm-alert--info{background:var(--vhm-color-info-soft)!important;border-color:var(--vhm-status-info-border)!important;color:var(--vhm-status-info-fg)!important}
.vhm-alert--success{background:var(--vhm-color-success-soft)!important;border-color:var(--vhm-status-success-border)!important;color:var(--vhm-status-success-fg)!important}
.vhm-alert--warning{background:var(--vhm-color-warning-soft)!important;border-color:var(--vhm-status-warning-border)!important;color:var(--vhm-status-warning-fg)!important}
.vhm-alert--danger{background:var(--vhm-color-danger-soft)!important;border-color:var(--vhm-status-danger-border)!important;color:var(--vhm-status-danger-fg)!important}

/* Compatibiliteitsbrug: bestaande meldingsclass-namen gebruiken dezelfde
   centrale semantische familie zonder een tweede visuele definitie. */
.notice{
  box-sizing:border-box!important;
  margin:0 0 12px!important;
  padding:var(--vhm-alert-padding)!important;
  border:1px solid var(--vhm-status-info-border)!important;
  border-radius:var(--vhm-alert-radius)!important;
  background:var(--vhm-color-info-soft)!important;
  color:var(--vhm-status-info-fg)!important;
  font-size:var(--vhm-alert-font-size)!important;
  font-weight:var(--vhm-alert-font-weight)!important;
  line-height:1.4!important;
  box-shadow:none!important;
}
.notice.error,
.bf-veld-fout-notice,
.outlook-subpanel .optie-melding-fout,
.system-update-error,
.project-eval-submit-error{
  background:var(--vhm-color-danger-soft)!important;
  border-color:var(--vhm-status-danger-border)!important;
  color:var(--vhm-status-danger-fg)!important;
}
.bf-actie-gelukt-notice,
.outlook-subpanel .optie-melding-ok,
.system-update-ok{
  background:var(--vhm-color-success-soft)!important;
  border-color:var(--vhm-status-success-border)!important;
  color:var(--vhm-status-success-fg)!important;
}
.dashboard-warning,
.afas-sync-notice,
.actual-unlinked-warning,
.werkelijke-uren-codes-dubbel-melding,
.system-update-warn{
  box-sizing:border-box!important;
  padding:var(--vhm-alert-padding)!important;
  border:1px solid var(--vhm-status-warning-border)!important;
  border-radius:var(--vhm-alert-radius)!important;
  background:var(--vhm-color-warning-soft)!important;
  color:var(--vhm-status-warning-fg)!important;
  font-size:var(--vhm-alert-font-size)!important;
  font-weight:var(--vhm-alert-font-weight)!important;
  line-height:1.4!important;
  box-shadow:none!important;
}
.outlook-subpanel .optie-melding{
  box-sizing:border-box!important;
  padding:var(--vhm-alert-padding)!important;
  border-radius:var(--vhm-alert-radius)!important;
  font-size:var(--vhm-alert-font-size)!important;
  font-weight:var(--vhm-alert-font-weight)!important;
  line-height:1.4!important;
  box-shadow:none!important;
}
.system-update-result{border-radius:var(--vhm-alert-radius)!important;box-shadow:none!important}

/* Gewone actieknoppen. Specialistische UI-controls worden hieronder bewust uitgesloten. */
.button:not(.admin-delete-button),
button:not(.vhm-filter-button):not(.vhm-delete-icon):not(.vhm-btn-delete):not(.admin-delete-button):not(.icon-btn):not(.modal-close):not(.presence-modal-close):not(.bf-collega-chip-remove):not(.progress-dropdown-swatch):not(.planning-filter-btn):not(.progress-top-filter-btn):not(.progress-multifilter-button):not(.progress-status-trigger):not(.progress-empty-default):not(.dashboard-status-button):not(.planning-status-btn):not(.year-result-button):not(.deadline-note-button):not(.eval-year-tab):not(.bf-logboek-add):not(.impersonate-user-link){
  min-height:var(--vhm-button-height)!important;
  padding:6px var(--vhm-button-padding-x)!important;
  border-radius:var(--vhm-button-radius)!important;
  font:var(--vhm-button-font-weight) var(--vhm-button-font-size)/1.15 var(--vhm-font-family)!important;
}
.button:not(.secondary):not(.danger):not(.admin-delete-button),
button:not([class]):not(:disabled){
  border-color:var(--vhm-color-primary)!important;
}
.secondary{background:var(--vhm-color-text)!important;color:#fff!important;box-shadow:none!important}
.secondary:hover{background:#171918!important;color:#fff!important}
.info,.vhm-btn-info{background:var(--vhm-status-info-bg)!important;border-color:var(--vhm-status-info-border)!important;color:var(--vhm-status-info-fg)!important;box-shadow:none!important}
.info:hover,.vhm-btn-info:hover,.info:focus-visible,.vhm-btn-info:focus-visible{background:#dceaf8!important;border-color:var(--vhm-status-info-border)!important;color:var(--vhm-status-info-fg)!important}
.danger{background:var(--vhm-color-danger)!important;color:#fff!important;box-shadow:none!important}
.danger:hover{background:#8f2f28!important;color:#fff!important}

/* Verwijderacties volgen drie expliciete centrale varianten.
   1) .danger / .vhm-delete-text = waarschuwing/destructive tekstknop.
   2) .vhm-delete-icon = compacte prullenbak voor icon-only acties.
   3) .vhm-remove-subtle = subtiel kruisje voor Planning/zeer compacte context. */
.danger:not(.vhm-remove-subtle),
.vhm-delete-text,
.admin-delete-button:not(.vhm-remove-subtle):not(.vhm-delete-icon):not(.vhm-btn-delete){
  appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  min-height:var(--vhm-button-height)!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:6px var(--vhm-button-padding-x)!important;
  overflow:visible!important;
  border:1px solid var(--vhm-color-danger)!important;
  border-radius:var(--vhm-button-radius)!important;
  background:var(--vhm-color-danger)!important;
  color:#fff!important;
  font:var(--vhm-button-font-weight) var(--vhm-button-font-size)/1.15 var(--vhm-font-family)!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  cursor:pointer!important;
  vertical-align:middle!important;
}
.danger:not(.vhm-remove-subtle)::before,
.vhm-delete-text::before,
.admin-delete-button:not(.vhm-remove-subtle):not(.vhm-delete-icon):not(.vhm-btn-delete)::before{
  content:none!important;
  display:none!important;
}
.danger:not(.vhm-remove-subtle):hover,
.danger:not(.vhm-remove-subtle):focus-visible,
.vhm-delete-text:hover,
.vhm-delete-text:focus-visible,
.admin-delete-button:not(.vhm-remove-subtle):not(.vhm-delete-icon):not(.vhm-btn-delete):hover,
.admin-delete-button:not(.vhm-remove-subtle):not(.vhm-delete-icon):not(.vhm-btn-delete):focus-visible{
  background:#8f2f28!important;
  border-color:#8f2f28!important;
  color:#fff!important;
  outline:none!important;
}

/* Alleen expliciet icon-only verwijderen blijft 28 × 28. */
.vhm-delete-icon,
.vhm-btn-delete{
  appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:var(--vhm-icon-button-size)!important;
  min-width:var(--vhm-icon-button-size)!important;
  max-width:var(--vhm-icon-button-size)!important;
  height:var(--vhm-icon-button-size)!important;
  min-height:var(--vhm-icon-button-size)!important;
  max-height:var(--vhm-icon-button-size)!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid transparent!important;
  border-radius:var(--vhm-radius-sm)!important;
  background:transparent!important;
  color:var(--vhm-color-danger)!important;
  font-size:0!important;
  line-height:1!important;
  box-shadow:none!important;
  cursor:pointer!important;
  opacity:1!important;
  vertical-align:middle!important;
}
.vhm-delete-icon::before,
.vhm-btn-delete::before{
  content:""!important;
  display:block!important;
  width:14px!important;
  height:14px!important;
  flex:0 0 14px!important;
  background:currentColor!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-1 12H8L7 9Zm3 2v8h2v-8h-2Zm4 0v8h2v-8h-2Z'/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-1 12H8L7 9Zm3 2v8h2v-8h-2Zm4 0v8h2v-8h-2Z'/%3E%3C/svg%3E") center/contain no-repeat!important;
}
.vhm-delete-icon:hover,
.vhm-btn-delete:hover,
.vhm-delete-icon:focus-visible,
.vhm-btn-delete:focus-visible{
  color:#8f2222!important;
  background:var(--vhm-color-danger-soft)!important;
  border-color:#f0cccc!important;
  outline:none!important;
}

/* Subtiele verwijderactie: klein kruisje voor compacte contexten zoals Planning.
   Dit is bewust een tweede centrale verwijdervariant naast de prullenbak. */
.vhm-remove-subtle{
  appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:19px!important;
  min-width:19px!important;
  max-width:19px!important;
  height:19px!important;
  min-height:19px!important;
  max-height:19px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:3px!important;
  background:transparent!important;
  color:#777!important;
  box-shadow:none!important;
  cursor:pointer!important;
  font-size:0!important;
  line-height:1!important;
}
.vhm-remove-subtle::before{
  content:"×"!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  flex:none!important;
  background:transparent!important;
  -webkit-mask:none!important;
  mask:none!important;
  color:currentColor!important;
  font:400 16px/16px Arial,sans-serif!important;
}
.vhm-remove-subtle:hover,
.vhm-remove-subtle:focus-visible{
  color:var(--vhm-color-danger)!important;
  background:transparent!important;
  border-color:transparent!important;
  outline:none!important;
}

/* Planning: benut de volledige beschikbare breedte. Alleen wanneer het kruisje
   zichtbaar wordt reserveren we daar ruimte voor; te lange tekst eindigt altijd met … */
.planning-page .plan-item{
  overflow:hidden!important;
}
.planning-page .plan-item .plan-item-name{
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.planning-page .plan-item:not(:hover):not(:focus-within):not(.item-selected){
  padding-right:4px!important;
}
.planning-page .plan-item:hover,
.planning-page .plan-item:focus-within,
.planning-page .plan-item.item-selected{
  padding-right:22px!important;
}
.planning-page .plan-item .delete-item.vhm-remove-subtle{
  right:2px!important;
  top:1px!important;
  z-index:2!important;
}

/* Formuliervelden: dezelfde hoogte, radius, border en lettermaat in vergelijkbare formulieren. */
body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
body select,
body textarea,
.vhm-control,
.vhm-select,
.vhm-input{
  border-color:var(--vhm-control-border)!important;
  border-radius:var(--vhm-control-radius)!important;
  background-color:var(--vhm-color-surface);
  color:var(--vhm-color-text);
  font-family:var(--vhm-font-family)!important;
  font-size:var(--vhm-control-font-size)!important;
}
body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
body select,
.vhm-select,
.vhm-input{
  min-height:var(--vhm-control-height)!important;
}
body input:focus,
body select:focus,
body textarea:focus{
  border-color:var(--vhm-color-primary)!important;
  box-shadow:var(--vhm-focus-ring)!important;
  outline:0!important;
}

/* v960 - Centrale formulierfamilie.
   Iedere component staat één keer in de styleguide; bestaande moduleclasses
   hieronder zijn alleen aliases naar exact dezelfde visuele bron. */
.vhm-field{
  display:flex!important;
  flex-direction:column!important;
  gap:var(--vhm-field-gap)!important;
  margin:0 0 var(--vhm-field-row-gap)!important;
  padding:0!important;
}
.vhm-label,.vhm-field>label,.vhm-field-label{
  margin:0!important;
  color:var(--vhm-color-text)!important;
  font:var(--vhm-label-font-weight) var(--vhm-label-font-size)/1.25 var(--vhm-font-family)!important;
}
.vhm-help{
  margin:0!important;
  color:var(--vhm-color-muted)!important;
  font:400 9px/1.35 var(--vhm-font-family)!important;
}
.vhm-error-text{
  margin:0!important;
  color:var(--vhm-color-danger)!important;
  font:400 9px/1.35 var(--vhm-font-family)!important;
}
.vhm-input,.vhm-select,.vhm-search,
.analysis-customer-search,.buddy-column-search,.planning-filter-search,.progress-note-employee-search,.bf-collega-zoek,
.progress-popup-value .progress-note-employee-search,
.customer-search-wrap>input:not([type=checkbox]):not([type=radio]){
  width:100%!important;
  min-width:0!important;
  height:var(--vhm-control-height)!important;
  min-height:var(--vhm-control-height)!important;
  padding:5px var(--vhm-control-padding-x)!important;
  margin:0!important;
  box-sizing:border-box!important;
  border:1px solid var(--vhm-control-border)!important;
  border-radius:var(--vhm-control-radius)!important;
  background:#fff!important;
  color:var(--vhm-color-text)!important;
  font:400 var(--vhm-control-font-size)/1.25 var(--vhm-font-family)!important;
  box-shadow:none!important;
}
.vhm-textarea{
  width:100%!important;
  min-width:0!important;
  min-height:var(--vhm-textarea-min-height)!important;
  padding:7px var(--vhm-control-padding-x)!important;
  margin:0!important;
  box-sizing:border-box!important;
  border:1px solid var(--vhm-control-border)!important;
  border-radius:var(--vhm-control-radius)!important;
  background:#fff!important;
  color:var(--vhm-color-text)!important;
  font:400 var(--vhm-control-font-size)/1.35 var(--vhm-font-family)!important;
  resize:vertical!important;
  box-shadow:none!important;
}
.vhm-input::placeholder,.vhm-search::placeholder,.vhm-textarea::placeholder,
.analysis-customer-search::placeholder,.buddy-column-search::placeholder,.planning-filter-search::placeholder,.progress-note-employee-search::placeholder,.bf-collega-zoek::placeholder{
  color:#858c92!important;opacity:1!important;
}
.vhm-input:focus,.vhm-select:focus,.vhm-search:focus,.vhm-textarea:focus,
.analysis-customer-search:focus,.buddy-column-search:focus,.planning-filter-search:focus,.progress-note-employee-search:focus,.bf-collega-zoek:focus,
.customer-search-wrap>input:focus{
  outline:0!important;
  border-color:var(--vhm-color-primary)!important;
  box-shadow:var(--vhm-focus-ring)!important;
}
.vhm-input:disabled,.vhm-select:disabled,.vhm-search:disabled,.vhm-textarea:disabled,
.vhm-input[readonly],.vhm-textarea[readonly]{
  background:var(--vhm-color-surface-soft)!important;
  color:#66717a!important;
  cursor:default!important;
}

/* Checkbox/radio: één maat en primaire accentkleur. Alleen het control zelf;
   labels/layout blijven functioneel waar een module daar een eigen grid voor nodig heeft. */
body input[type=checkbox],body input[type=radio],.vhm-check{
  width:var(--vhm-check-size)!important;
  min-width:var(--vhm-check-size)!important;
  height:var(--vhm-check-size)!important;
  min-height:var(--vhm-check-size)!important;
  margin:0!important;
  padding:0!important;
  accent-color:var(--vhm-color-primary)!important;
  box-shadow:none!important;
}
.vhm-check-label{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  color:var(--vhm-color-text)!important;
  font:400 9px/1.25 var(--vhm-font-family)!important;
}

/* Zoekveld + resultaatmenu. */
.vhm-search-wrap,.customer-search-wrap{position:relative!important}
.vhm-search-results,.customer-search-results,.bf-collega-resultaten{
  z-index:10050;
  max-height:220px;
  overflow:auto;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--vhm-control-border)!important;
  border-radius:var(--vhm-control-radius)!important;
  background:#fff!important;
  box-shadow:0 6px 18px rgba(0,0,0,.10)!important;
}
.vhm-search-results,.customer-search-results{position:absolute!important;left:0!important;right:0!important;top:calc(100% + 2px)!important}
.bf-collega-resultaten{position:relative!important;left:auto!important;right:auto!important;top:auto!important;margin:2px 0 10px!important}
.vhm-search-option,.customer-search-option,.bf-collega-resultaat-item{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:26px!important;
  margin:0!important;
  padding:6px 9px!important;
  box-sizing:border-box!important;
  border:0!important;
  border-bottom:1px solid #edf0f2!important;
  border-radius:0!important;
  background:#fff!important;
  color:var(--vhm-color-text)!important;
  text-align:left!important;
  font:400 9px/1.25 var(--vhm-font-family)!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.vhm-search-option:last-child,.customer-search-option:last-child,.bf-collega-resultaat-item:last-child{border-bottom:0!important}
.vhm-search-option:hover,.vhm-search-option.active,
.customer-search-option:hover,.customer-search-option.active,
.bf-collega-resultaat-item:hover,.bf-collega-resultaat-item.active{
  background:var(--vhm-color-primary-soft)!important;
  color:var(--vhm-color-text)!important;
}

/* Tabellen: twee officiële componentvarianten.
   - Normaal: resultaat-/analyseoverzichten met iets meer ademruimte.
   - Compact: beheer-, rechten-, logboek- en deadlineoverzichten.
   Functionele kolombreedtes, sticky gedrag en speciale cellen blijven module-specifiek. */
.vhm-table{
  width:100%;
  border-collapse:collapse;
}
.vhm-table,
.project-eval-progress-table,
.project-eval-lowest-table,
.project-eval-lowratings-table,
.project-eval-gap-table,
.project-eval-divided-table,
.project-eval-question-stats,
.project-eval-question-by-function,
.stats-table{
  font-family:var(--vhm-font-family)!important;
  font-size:var(--vhm-table-normal-font-size)!important;
  color:var(--vhm-color-text);
}
.vhm-table th,.vhm-table td,
.project-eval-progress-table th,.project-eval-progress-table td,
.project-eval-lowest-table th,.project-eval-lowest-table td,
.project-eval-lowratings-table th,.project-eval-lowratings-table td,
.project-eval-gap-table th,.project-eval-gap-table td,
.project-eval-divided-table th,.project-eval-divided-table td,
.project-eval-question-stats th,.project-eval-question-stats td,
.project-eval-question-by-function th,.project-eval-question-by-function td,
.stats-table th,.stats-table td{
  padding:var(--vhm-table-normal-cell-y) var(--vhm-table-normal-cell-x)!important;
  border-bottom:1px solid var(--vhm-table-line)!important;
  vertical-align:middle;
}
.vhm-table th,
.project-eval-progress-table th,
.project-eval-lowest-table th,
.project-eval-lowratings-table th,
.project-eval-gap-table th,
.project-eval-divided-table th,
.project-eval-question-stats th,
.project-eval-question-by-function th,
.stats-table th{
  background:var(--vhm-table-head-bg)!important;
  color:#46515a!important;
  font-size:var(--vhm-table-normal-head-font-size)!important;
  font-weight:700!important;
  line-height:1.15!important;
  white-space:nowrap;
}
.vhm-table tbody tr:hover,
.project-eval-progress-table tbody tr:hover,
.project-eval-lowest-table tbody tr:hover,
.project-eval-lowratings-table tbody tr:hover,
.project-eval-gap-table tbody tr:hover,
.project-eval-divided-table tbody tr:hover,
.project-eval-question-stats tbody tr:hover,
.project-eval-question-by-function tbody tr:hover,
.stats-table tbody tr:hover{
  background:var(--vhm-table-row-hover);
}

.vhm-table--compact{
  width:100%;
  border-collapse:collapse;
}
.vhm-table--compact,
.beheer-table,
.compact-table,
.permissions-matrix-table,
.access-rights-table,
.sortable-filterable-table,
.voortgang-deadlines-table,
.ideeen-overzicht-table,
.ideeen-categorieen-table,
.studie-progress-table,
.studie-edit-table,
.studie-admin-overview,
.studie-directions-table,
.vaktechniek-ibm-table,
.mailing-overview-table,
.logboek-table,
.backup-status-table,
.hours-dump-table,
.afas-info-table,
.dashboards-rechten-table,
.dashboard-fases-table{
  font-family:var(--vhm-font-family)!important;
  font-size:var(--vhm-table-compact-font-size)!important;
  color:var(--vhm-color-text);
}
.vhm-table--compact th,.vhm-table--compact td,
.beheer-table th,.beheer-table td,
.compact-table th,.compact-table td,
.permissions-matrix-table th,.permissions-matrix-table td,
.access-rights-table th,.access-rights-table td,
.sortable-filterable-table th,.sortable-filterable-table td,
.voortgang-deadlines-table th,.voortgang-deadlines-table td,
.ideeen-overzicht-table th,.ideeen-overzicht-table td,
.ideeen-categorieen-table th,.ideeen-categorieen-table td,
.studie-progress-table th,.studie-progress-table td,
.studie-edit-table th,.studie-edit-table td,
.studie-admin-overview th,.studie-admin-overview td,
.studie-directions-table th,.studie-directions-table td,
.vaktechniek-ibm-table th,.vaktechniek-ibm-table td,
.mailing-overview-table th,.mailing-overview-table td,
.logboek-table th,.logboek-table td,
.backup-status-table th,.backup-status-table td,
.hours-dump-table th,.hours-dump-table td,
.afas-info-table th,.afas-info-table td,
.dashboards-rechten-table th,.dashboards-rechten-table td,
.dashboard-fases-table th,.dashboard-fases-table td{
  padding:var(--vhm-table-compact-cell-y) var(--vhm-table-compact-cell-x)!important;
  border-bottom:1px solid var(--vhm-table-line)!important;
  vertical-align:middle;
}
.vhm-table--compact th,
.beheer-table th,
.compact-table th,
.permissions-matrix-table th,
.access-rights-table th,
.sortable-filterable-table th,
.voortgang-deadlines-table th,
.ideeen-overzicht-table th,
.ideeen-categorieen-table th,
.studie-progress-table th,
.studie-edit-table th,
.studie-admin-overview th,
.studie-directions-table th,
.vaktechniek-ibm-table th,
.mailing-overview-table th,
.logboek-table th,
.backup-status-table th,
.hours-dump-table th,
.afas-info-table th,
.dashboards-rechten-table th,
.dashboard-fases-table th{
  background:var(--vhm-table-head-bg)!important;
  color:#46515a!important;
  font-size:var(--vhm-table-compact-head-font-size)!important;
  font-weight:700!important;
  line-height:1.15!important;
  white-space:nowrap;
}
.vhm-table--compact tbody tr:hover,
.beheer-table tbody tr:hover,
.compact-table tbody tr:hover,
.permissions-matrix-table tbody tr:hover,
.access-rights-table tbody tr:hover,
.sortable-filterable-table tbody tr:hover,
.voortgang-deadlines-table tbody tr:hover,
.ideeen-overzicht-table tbody tr:hover,
.ideeen-categorieen-table tbody tr:hover,
.studie-progress-table tbody tr:hover,
.studie-edit-table tbody tr:hover,
.studie-admin-overview tbody tr:hover,
.studie-directions-table tbody tr:hover,
.vaktechniek-ibm-table tbody tr:hover,
.mailing-overview-table tbody tr:hover,
.logboek-table tbody tr:hover,
.backup-status-table tbody tr:hover,
.hours-dump-table tbody tr:hover,
.afas-info-table tbody tr:hover,
.dashboards-rechten-table tbody tr:hover,
.dashboard-fases-table tbody tr:hover{
  background:var(--vhm-table-row-hover);
}

/* Gemeenschappelijke tabelconventies. */
.vhm-table .num,.vhm-table--compact .num,
.project-eval-progress-table .num,.project-eval-lowest-table .num,
.project-eval-lowratings-table .num,.project-eval-gap-table .num,
.project-eval-divided-table .num,.stats-table .num,
.beheer-table .num,.compact-table .num{ text-align:right!important; }
.vhm-table .toggle,.vhm-table--compact .toggle,
.permissions-matrix-table .toggle,.access-rights-table .toggle{ text-align:center!important; }
.vhm-table tbody tr:last-child td,
.vhm-table--compact tbody tr:last-child td{ border-bottom-color:transparent!important; }

/* Niveau 1: alleen echte hoofdkeuzes. */
.central-admin-tabs,
.vhm-nav-level-1{
  gap:8px!important;
}
.central-admin-tabs>a,
.vhm-nav-level-1>a{
  min-height:var(--vhm-level1-height)!important;
  padding:5px 11px!important;
  border-radius:var(--vhm-level1-radius)!important;
  font:700 var(--vhm-level1-font-size)/1 var(--vhm-font-family)!important;
}

/* Niveau 2: module-/analysekeuzes. */
.module-subtabs,
.evaluation-subtabs,
.studie-user-tabs,
.users-admin-subtabs,
.systeem-subtabs,
.project-selector-tabs,
.dashboard-card .dashboard-main-tabs,
.vhm-nav-level-2{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0 0 8px!important;
  padding:5px!important;
  border:1px solid var(--vhm-color-border)!important;
  border-radius:10px!important;
  background:#e9edf0!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04)!important;
}
.module-subtabs>a,
.evaluation-subtabs>a,
.studie-user-tabs>a,
.users-admin-subtabs>a,
.systeem-subtabs>a,
.project-selector-tabs>a,
.dashboard-card .dashboard-main-tabs>a,
.vhm-nav-level-2>a{
  min-height:var(--vhm-level2-height)!important;
  padding:5px 10px!important;
  border:1px solid transparent!important;
  border-radius:var(--vhm-level2-radius)!important;
  background:transparent!important;
  color:#46515a!important;
  font:700 var(--vhm-level2-font-size)/1 var(--vhm-font-family)!important;
  box-shadow:none!important;
}
.module-subtabs>a.active,
.evaluation-subtabs>a.active,
.studie-user-tabs>a.active,
.users-admin-subtabs>a.active,
.systeem-subtabs>a.active,
.project-selector-tabs>a.active,
.dashboard-card .dashboard-main-tabs>a.active,
.vhm-nav-level-2>a.active{
  border-color:var(--vhm-color-neutral)!important;
  background:var(--vhm-color-neutral)!important;
  color:#fff!important;
}

/* Niveau 3: vlakke detailtabs met scheidingslijn; bewust geen pill-look. */
.beheer-level3-tabs,
.optie-subtabs,
.project-detail-tabs,
.project-eval-mini-tabs,
.dashboard-compare-tabs,
.progress-year-tabs,
.verdeling-year-tabs,
.module-level3-tabs,
.vaktechniek-proces-tabs,
.eval-year-tabs,
.deadline-year-tabs,
.vhm-nav-level-3{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 10px!important;
  padding:0 0 7px!important;
  border:0!important;
  border-bottom:1px solid #d8d8d8!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.beheer-level3-tabs>a,
.optie-subtabs>a,
.project-detail-tabs>a,
.project-eval-mini-tabs>a,
.dashboard-compare-tabs>a,
.progress-year-tabs>a,
.verdeling-year-tabs>a,
.module-level3-tabs>a,
.vaktechniek-proces-tabs>a,
.eval-year-tabs>.eval-year-tab,
.deadline-year-tabs>.eval-year-tab,
.vhm-nav-level-3>a{
  min-height:var(--vhm-level3-height)!important;
  padding:4px 9px!important;
  border:1px solid #cfd4d8!important;
  border-radius:var(--vhm-level3-radius)!important;
  background:#fff!important;
  color:#252525!important;
  text-decoration:none!important;
  font:700 var(--vhm-level3-font-size)/1 var(--vhm-font-family)!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}
.beheer-level3-tabs>a.active,
.optie-subtabs>a.active,
.project-detail-tabs>a.active,
.project-eval-mini-tabs>a.active,
.dashboard-compare-tabs>a.active,
.progress-year-tabs>a.active,
.verdeling-year-tabs>a.active,
.module-level3-tabs>a.active,
.vaktechniek-proces-tabs>a.active,
.eval-year-tabs>.eval-year-tab.active,
.deadline-year-tabs>.eval-year-tab.active,
.vhm-nav-level-3>a.active{
  border-color:var(--vhm-color-primary)!important;
  background:var(--vhm-color-primary)!important;
  color:#fff!important;
}

/* Persoons-/ontvangerchips: één centrale component. */
.vhm-chip,
.bf-collega-chip,
.project-eval-recipient-chip,
.modal-suggestie-chip,
.modal-linked-employee-chip,
.project-team-chips>span,
.ideeen-notificatie-chips>span{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  min-height:var(--vhm-chip-height)!important;
  padding:4px 9px!important;
  box-sizing:border-box!important;
  border:1px solid var(--vhm-color-border)!important;
  border-radius:var(--vhm-radius-pill)!important;
  background:var(--vhm-color-neutral-soft)!important;
  color:#333!important;
  font:600 11px/1 var(--vhm-font-family)!important;
  box-shadow:none!important;
}
.vhm-chip--selected,.project-eval-recipient-chip:has(input:checked),.modal-suggestie-chip.selected{
  border-color:var(--vhm-color-primary)!important;
  background:var(--vhm-color-primary)!important;
  color:#fff!important;
}
.vhm-chip-remove,.bf-collega-chip-remove{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;min-width:0!important;height:auto!important;min-height:0!important;
  margin:0!important;padding:0 2px!important;border:0!important;border-radius:0!important;
  background:transparent!important;color:#7b858d!important;
  font:400 14px/1 var(--vhm-font-family)!important;box-shadow:none!important;cursor:pointer!important;
}
.vhm-chip-remove:hover,.bf-collega-chip-remove:hover{background:transparent!important;color:var(--vhm-color-danger)!important}

/* Semantische statuskleuren: bestaande componenten gebruiken dezelfde centrale tinten. */
.bf-status-badge,
.project-eval-status,
.ideeen-status{
  border-radius:var(--vhm-radius-pill)!important;
  font-family:var(--vhm-font-family)!important;
  font-size:var(--vhm-status-font-size)!important;
  font-weight:var(--vhm-status-font-weight)!important;
}
.bf-status-open,
.bf-status-concept,
.bf-status-vrijgegeven,
.project-eval-status.open,
.project-eval-status.concept,
.ideeen-status-bezig{
  background:var(--vhm-color-warning-soft)!important;
  border-color:#ead27b!important;
  color:var(--vhm-color-warning)!important;
}
.bf-status-klaar_om_te_lezen,
.bf-status-klaar_voor_review,
.dbstatus-paars{
  background:var(--vhm-color-purple-soft)!important;
  border-color:#d5b9e2!important;
  color:var(--vhm-color-purple)!important;
}
.bf-status-definitief,
.project-eval-status.ingevuld,
.project-eval-status.actief,
.project-eval-status.afgerond,
.ideeen-status-klaar{
  background:var(--vhm-color-success-soft)!important;
  border-color:#9dcea7!important;
  color:var(--vhm-color-success)!important;
}
.ideeen-status-nieuw{
  background:var(--vhm-color-info-soft)!important;
  border-color:#b8d4ee!important;
  color:#346c9b!important;
}
.studie-progress-table select.studie-status.status-niet_gestart{
  background:var(--vhm-color-neutral-soft)!important;border-color:#d7dde2!important;color:var(--vhm-color-neutral)!important;
}
.studie-progress-table select.studie-status.status-gestart{
  background:var(--vhm-color-warning-soft)!important;border-color:#ead27b!important;color:var(--vhm-color-warning)!important;
}
.studie-progress-table select.studie-status.status-herkansing{
  background:var(--vhm-color-danger-soft)!important;border-color:#e9aaaa!important;color:var(--vhm-color-danger)!important;
}
.studie-progress-table select.studie-status.status-gehaald{
  background:var(--vhm-color-success-soft)!important;border-color:#9dcea7!important;color:var(--vhm-color-success)!important;
}

/* Legacy badgekleuren terugbrengen naar dezelfde semantische set. */
.gemiddelde-badge.eigen{background:var(--vhm-color-success-soft)!important;color:var(--vhm-color-success)!important;border-color:#9dcea7!important}
.gemiddelde-badge.buddy{background:var(--vhm-color-primary-soft)!important;color:var(--vhm-color-primary-hover)!important;border-color:#f3cf9e!important}



/* v940 definitieve locks tijdens de migratiefase.
   De niet-bestaande ID's in :not() verhogen alleen de specificiteit; er is geen markup voor nodig. */
body h1:not(#vhm-ui-local-heading-override){font-size:var(--vhm-h1-size)!important;line-height:var(--vhm-h1-line)!important;margin:var(--vhm-h1-margin)!important;font-weight:var(--vhm-font-weight-bold)!important}
body h2:not(#vhm-ui-local-heading-override){font-size:var(--vhm-h2-size)!important;line-height:var(--vhm-h2-line)!important;margin:var(--vhm-h2-margin)!important;font-weight:var(--vhm-font-weight-bold)!important}
body h3:not(#vhm-ui-local-heading-override){font-size:var(--vhm-h3-size)!important;line-height:var(--vhm-h3-line)!important;margin:var(--vhm-h3-margin)!important;font-weight:var(--vhm-font-weight-bold)!important}

.central-admin-tabs:not(#vhm-ui-local-nav-override)>a{min-height:var(--vhm-level1-height)!important;padding:5px 11px!important;border:1px solid #d1d4d6!important;border-radius:var(--vhm-level1-radius)!important;background:#eee!important;color:#333!important;font:700 var(--vhm-level1-font-size)/1 var(--vhm-font-family)!important;box-shadow:none!important}
.central-admin-tabs:not(#vhm-ui-local-nav-override)>a.active{border-color:var(--vhm-color-primary)!important;background:var(--vhm-color-primary)!important;color:#fff!important}

.module-subtabs:not(#vhm-ui-local-nav-override)>a,
.evaluation-subtabs:not(#vhm-ui-local-nav-override)>a,
.studie-user-tabs:not(#vhm-ui-local-nav-override)>a,
.users-admin-subtabs:not(#vhm-ui-local-nav-override)>a,
.systeem-subtabs:not(#vhm-ui-local-nav-override)>a,
.project-selector-tabs:not(#vhm-ui-local-nav-override)>a,
.dashboard-main-tabs:not(#vhm-ui-local-nav-override)>a{min-height:var(--vhm-level2-height)!important;padding:5px 10px!important;border:1px solid transparent!important;border-radius:var(--vhm-level2-radius)!important;background:transparent!important;color:#46515a!important;font:700 var(--vhm-level2-font-size)/1 var(--vhm-font-family)!important;box-shadow:none!important}
.module-subtabs:not(#vhm-ui-local-nav-override)>a.active,
.evaluation-subtabs:not(#vhm-ui-local-nav-override)>a.active,
.studie-user-tabs:not(#vhm-ui-local-nav-override)>a.active,
.users-admin-subtabs:not(#vhm-ui-local-nav-override)>a.active,
.systeem-subtabs:not(#vhm-ui-local-nav-override)>a.active,
.project-selector-tabs:not(#vhm-ui-local-nav-override)>a.active,
.dashboard-main-tabs:not(#vhm-ui-local-nav-override)>a.active{border-color:var(--vhm-color-neutral)!important;background:var(--vhm-color-neutral)!important;color:#fff!important}

.beheer-level3-tabs:not(#vhm-ui-local-nav-override)>a,
.optie-subtabs:not(#vhm-ui-local-nav-override)>a,
.project-detail-tabs:not(#vhm-ui-local-nav-override)>a,
.project-eval-mini-tabs:not(#vhm-ui-local-nav-override)>a,
.dashboard-compare-tabs:not(#vhm-ui-local-nav-override)>a,
.progress-year-tabs:not(#vhm-ui-local-nav-override)>a,
.verdeling-year-tabs:not(#vhm-ui-local-nav-override)>a,
.module-level3-tabs:not(#vhm-ui-local-nav-override)>a,
.vaktechniek-proces-tabs:not(#vhm-ui-local-nav-override)>a,
.eval-year-tabs:not(#vhm-ui-local-nav-override)>.eval-year-tab,
.deadline-year-tabs:not(#vhm-ui-local-nav-override)>.eval-year-tab{min-height:var(--vhm-level3-height)!important;padding:4px 9px!important;border:1px solid #cfd4d8!important;border-radius:var(--vhm-level3-radius)!important;background:#fff!important;color:#252525!important;font:700 var(--vhm-level3-font-size)/1 var(--vhm-font-family)!important;box-shadow:none!important}
.beheer-level3-tabs:not(#vhm-ui-local-nav-override)>a.active,
.optie-subtabs:not(#vhm-ui-local-nav-override)>a.active,
.project-detail-tabs:not(#vhm-ui-local-nav-override)>a.active,
.project-eval-mini-tabs:not(#vhm-ui-local-nav-override)>a.active,
.dashboard-compare-tabs:not(#vhm-ui-local-nav-override)>a.active,
.progress-year-tabs:not(#vhm-ui-local-nav-override)>a.active,
.verdeling-year-tabs:not(#vhm-ui-local-nav-override)>a.active,
.module-level3-tabs:not(#vhm-ui-local-nav-override)>a.active,
.vaktechniek-proces-tabs:not(#vhm-ui-local-nav-override)>a.active,
.eval-year-tabs:not(#vhm-ui-local-nav-override)>.eval-year-tab.active,
.deadline-year-tabs:not(#vhm-ui-local-nav-override)>.eval-year-tab.active{border-color:var(--vhm-color-primary)!important;background:var(--vhm-color-primary)!important;color:#fff!important}

.beheer-table:not(#vhm-ui-local-table-override) th,
.beheer-table:not(#vhm-ui-local-table-override) td,
.compact-table:not(#vhm-ui-local-table-override) th,
.compact-table:not(#vhm-ui-local-table-override) td{padding:var(--vhm-table-cell-y) var(--vhm-table-cell-x)!important;font-family:var(--vhm-font-family)!important;font-size:var(--vhm-table-font-size)!important}
.beheer-table:not(#vhm-ui-local-table-override) th,
.compact-table:not(#vhm-ui-local-table-override) th{font-size:var(--vhm-table-head-font-size)!important;font-weight:800!important;line-height:1.15!important}

/* Styleguide-layout only: ruimte tussen componentvoorbeelden, zonder componentmaten te wijzigen. */
.vhm-styleguide-table-sample + .vhm-styleguide-table-sample{margin-top:16px}


/* v946 - Voortgang gebruikt exact de centrale status-choice component.
   De hogere specificiteit is bewust: oudere Voortgang-regels met nth-child en
   !important mogen radius, font, rand of hoverkleur niet meer laten afwijken. */
.progress-page .progress-table td:nth-child(n+6)>select.progress-colored-select.vhm-status-choice:not(#vhm-ui-local-status-override),
.progress-page .progress-table td>button.progress-empty-default.vhm-status-choice:not(#vhm-ui-local-status-override),
.progress-page .progress-table .progress-status-trigger.vhm-status-choice:not(#vhm-ui-local-status-override){
  height:24px!important;
  min-height:24px!important;
  border:1px solid var(--vhm-status-border)!important;
  border-radius:var(--vhm-radius-pill)!important;
  background-color:var(--vhm-status-bg)!important;
  color:var(--vhm-status-fg)!important;
  font-family:var(--vhm-font-family)!important;
  font-size:var(--vhm-status-font-size)!important;
  font-weight:var(--vhm-status-font-weight)!important;
  line-height:1!important;
  box-shadow:none!important;
}
.progress-page .progress-table td:nth-child(n+6)>select.progress-colored-select.vhm-status-choice:not(#vhm-ui-local-status-override){
  padding:2px 7px 2px 9px!important;
}
.progress-page .progress-table td:nth-child(n+6)>select.progress-colored-select.vhm-status-choice:not(#vhm-ui-local-status-override):hover,
.progress-page .progress-table td:nth-child(n+6)>select.progress-colored-select.vhm-status-choice:not(#vhm-ui-local-status-override):focus,
.progress-page .progress-table .progress-status-trigger.vhm-status-choice:not(#vhm-ui-local-status-override):hover,
.progress-page .progress-table .progress-status-trigger.vhm-status-choice:not(#vhm-ui-local-status-override):focus{
  border-color:var(--vhm-status-border)!important;
  background-color:var(--vhm-status-bg)!important;
  color:var(--vhm-status-fg)!important;
}
.progress-status-menu button.vhm-status-choice{
  border-color:var(--vhm-status-border)!important;
  border-radius:var(--vhm-radius-pill)!important;
  background-color:var(--vhm-status-bg)!important;
  color:var(--vhm-status-fg)!important;
  font-family:var(--vhm-font-family)!important;
  font-size:var(--vhm-status-font-size)!important;
  font-weight:var(--vhm-status-font-weight)!important;
  line-height:1!important;
}


/* v947 - Voortgang: vaste waarden in kolom 2 t/m 5 gebruiken dezelfde
   pill-radius als de centrale statuscomponent. Alleen de vorm wordt
   gelijkgetrokken; de bestaande inhouds-/waarschuwingskleuren blijven staan. */
.progress-page .progress-table td:nth-child(n+2):nth-child(-n+5)>.progress-person-value{
  border-radius:var(--vhm-radius-pill)!important;
}


/* v949 - Centrale tabelinteractie.
   Alle tabellen gebruiken Primair uit de centrale kleurenstyle als rij-hover.
   De transparante overlay laat betekenisvolle celkleuren intact. Voortgang
   gebruikt geen zebra meer; de hover is daar de enige rijmarkering. */
/* De :not(#...) verhoogt bewust de specificiteit van de centrale UI-regel.
   Zo kunnen oude sticky/legacy background-shorthands de hover niet wegdrukken. */
html body table tbody tr:hover > td:not(#vhm-ui-row-hover-override),
html body table tbody tr:hover > th:not(#vhm-ui-row-hover-override){
  background-image:linear-gradient(var(--vhm-table-row-hover-overlay),var(--vhm-table-row-hover-overlay))!important;
}


/* v954 - Planning gebruikt de centrale statusbadge zelf, zonder tweede visuele
   Planning-variant. Deze bridge neutraliseert alleen oude !important-regels;
   maat, font, radius en semantische kleuren zijn exact die van .vhm-status. */
.planning-page .plan-item.vhm-status:not(#vhm-ui-local-planning-status-override){
  min-height:24px!important;
  margin-bottom:2px!important;
  padding:3px 8px!important;
  border-width:1px!important;
  border-style:solid!important;
  border-radius:var(--vhm-radius-pill)!important;
  font-family:var(--vhm-font-family)!important;
  font-size:var(--vhm-status-font-size)!important;
  font-weight:var(--vhm-status-font-weight)!important;
  line-height:1!important;
  cursor:grab!important;
  user-select:none!important;
}
.planning-page .plan-item.vhm-status .plan-item-name{font:inherit!important;color:inherit!important;text-overflow:ellipsis!important}
.planning-page .plan-item.vhm-status .delete-item{color:inherit!important}
/* Semantische variant = exact dezelfde tokens als de centrale statusbadge. */
.planning-page .plan-item.vhm-status.vhm-status--warning:not(#vhm-ui-local-planning-status-override){background:var(--vhm-status-warning-bg)!important;border-color:var(--vhm-status-warning-border)!important;color:var(--vhm-status-warning-fg)!important}
.planning-page .plan-item.vhm-status.vhm-status--success:not(#vhm-ui-local-planning-status-override){background:var(--vhm-status-success-bg)!important;border-color:var(--vhm-status-success-border)!important;color:var(--vhm-status-success-fg)!important}
.planning-page .plan-item.vhm-status.vhm-status--neutral:not(#vhm-ui-local-planning-status-override){background:var(--vhm-status-neutral-bg)!important;border-color:var(--vhm-status-neutral-border)!important;color:var(--vhm-status-neutral-fg)!important}
.planning-page .plan-item.vhm-status.vhm-status--danger:not(#vhm-ui-local-planning-status-override){background:var(--vhm-status-danger-bg)!important;border-color:var(--vhm-status-danger-border)!important;color:var(--vhm-status-danger-fg)!important}
/* Alleen tijdens hover/selectie wordt rechts plek gemaakt voor het subtiele kruis. */
.planning-page .plan-item.vhm-status:hover:not(#vhm-ui-local-planning-status-override),
.planning-page .plan-item.vhm-status:focus-within:not(#vhm-ui-local-planning-status-override),
.planning-page .plan-item.vhm-status.item-selected:not(#vhm-ui-local-planning-status-override){padding-right:22px!important}

/* Planning-statusacties zijn de interactieve statuscomponent; geen eigen styling. */
.planning-page .planning-status-btn.vhm-status-choice:not(#vhm-ui-local-planning-status-legend-override){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  filter:none!important;
}
.planning-page .planning-status-btn.vhm-status-choice:disabled{opacity:1!important;cursor:default!important}
.planning-page .planning-status-btn.vhm-status-choice:not(:disabled):hover{filter:none!important}

/* Standaardfeestdagen en uit AFAS afgeleide bijzondere dagen zijn neutrale 'Ter info'-statusbadges.
   Alleen wanneer er óók werk op die dag staat, schakelen ze naar Danger. */
.planning-page .special-day-item.vhm-status:not(#vhm-ui-local-planning-status-override){
  min-height:24px!important;
  height:auto!important;
  padding:3px 8px!important;
  border-width:1px!important;
  border-style:solid!important;
  border-radius:var(--vhm-radius-pill)!important;
  font-family:var(--vhm-font-family)!important;
  font-size:var(--vhm-status-font-size)!important;
  font-weight:var(--vhm-status-font-weight)!important;
  font-style:normal!important;
  line-height:1!important;
  cursor:default!important;
}
.planning-page .special-day-item.vhm-status.vhm-status--neutral:not(#vhm-ui-local-planning-status-override){background:var(--vhm-status-neutral-bg)!important;border-color:var(--vhm-status-neutral-border)!important;color:var(--vhm-status-neutral-fg)!important}
.planning-page .special-day-item.vhm-status.vhm-status--danger:not(#vhm-ui-local-planning-status-override){background:var(--vhm-status-danger-bg)!important;border-color:var(--vhm-status-danger-border)!important;color:var(--vhm-status-danger-fg)!important}

/* v953 - Knoppen zijn overal vlak. Geen achter-/diepteschaduw op buttons of
   links die als button worden gebruikt. Focus blijft zichtbaar via outline/border. */
html body button,
html body input[type="button"],
html body input[type="submit"],
html body input[type="reset"],
html body .button,
html body [class$="-btn"],
html body [class*="-btn "],
html body [class$="-button"],
html body [class*="-button "],
html body .planning-nav-link,
html body .central-admin-tabs a,
html body .module-subtabs a,
html body .evaluation-subtabs a,
html body .beheer-level3-tabs a,
html body .project-detail-tabs a,
html body .deadline-year-tabs a,
html body .eval-year-tab{
  box-shadow:none!important;
}

/* v960 - Harde formulierbaseline voor bestaande pagina's.
   Alleen typografie/controls worden gelijkgetrokken; module-layout (grid, breedte,
   sticky, filtercellen) blijft module-specifiek. */
html body label:not(#vhm-ui-local-label-override){
  color:var(--vhm-color-text)!important;
  font-family:var(--vhm-font-family)!important;
  font-size:var(--vhm-label-font-size)!important;
  font-weight:var(--vhm-label-font-weight)!important;
  line-height:1.25!important;
}
html body label:has(input[type="checkbox"]):not(#vhm-ui-local-label-override),
html body label:has(input[type="radio"]):not(#vhm-ui-local-label-override),
html body .vhm-check-label{
  font-size:9px!important;
  font-weight:400!important;
}
html body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not(#vhm-ui-local-control-override),
html body select:not(#vhm-ui-local-control-override){
  padding:5px var(--vhm-control-padding-x)!important;
  line-height:1.25!important;
  font-weight:400!important;
  box-shadow:none!important;
}
html body textarea:not(#vhm-ui-local-control-override){
  padding:7px var(--vhm-control-padding-x)!important;
  line-height:1.35!important;
  font-weight:400!important;
  box-shadow:none!important;
}
html body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="hidden"]):disabled,
html body select:disabled,
html body textarea:disabled,
html body input[readonly],
html body textarea[readonly]{
  background:var(--vhm-color-surface-soft)!important;
  color:#66717a!important;
}
html body input[aria-invalid="true"],html body select[aria-invalid="true"],html body textarea[aria-invalid="true"]{
  border-color:var(--vhm-color-danger)!important;
}
html body input[aria-invalid="true"]:focus,html body select[aria-invalid="true"]:focus,html body textarea[aria-invalid="true"]:focus{
  box-shadow:0 0 0 3px rgba(168,56,47,.10)!important;
}

/* Alleen layout van de styleguide; verandert geen componentmaten. */
.vhm-styleguide-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;align-items:start}
.vhm-styleguide-form-wide{grid-column:1/-1}
.vhm-styleguide-search-wrap{min-height:92px}
@media(max-width:720px){.vhm-styleguide-form-grid{grid-template-columns:1fr}.vhm-styleguide-form-wide{grid-column:auto}}


/* v962 - Voortgang popup-veiligheid.
   De dynamische Voortgang-popups bestaan naast sticky tabellen en vaste filtermenu's.
   Zodra hidden wordt verwijderd moeten ze daarom altijd boven de volledige module liggen. */
.progress-page .progress-nee-popup[hidden]{display:none!important}
.progress-page .progress-nee-popup:not([hidden]){
  display:flex!important;
  position:fixed!important;
  inset:0!important;
  z-index:30000!important;
  align-items:center!important;
  justify-content:center!important;
}
.progress-page .progress-nee-popup:not([hidden])>.progress-nee-dialog{
  position:relative!important;
  z-index:30001!important;
}


/* v966 - Voortgang veld-/medewerkertoewijspopup gebruikt volledig dezelfde
   centrale modalstijl. Het deadline/notificatiegedeelte is een gewone
   formuliersectie: geen grijze kaart, eigen border of afwijkende radius. */
.progress-page .progress-nee-popup.vhm-modal .progress-nee-dialog.vhm-modal-dialog:not(#vhm-ui-local-progress-note-modal-override){
  width:min(var(--vhm-modal-width),calc(100vw - 40px))!important;
  padding:var(--vhm-modal-padding)!important;
  border:1px solid var(--vhm-color-border)!important;
  border-radius:var(--vhm-radius-lg)!important;
  background:var(--vhm-color-surface)!important;
}
.progress-page .progress-nee-popup.vhm-modal .progress-note-intro{margin:0 0 var(--vhm-modal-row-gap)!important}
.progress-page .progress-nee-popup.vhm-modal .progress-review-mail:not(#vhm-ui-local-progress-deadline-override){
  display:block;
  margin:0 0 var(--vhm-modal-row-gap)!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.progress-page .progress-nee-popup.vhm-modal .progress-review-mail[hidden]{display:none!important}
.progress-page .progress-nee-popup.vhm-modal .progress-review-row{display:block!important;margin:0!important}
.progress-page .progress-nee-popup.vhm-modal .progress-review-row .vhm-modal-field{margin-bottom:var(--vhm-modal-row-gap)!important}
.progress-page .progress-nee-popup.vhm-modal .progress-review-reminders{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:7px 14px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.progress-page .progress-nee-popup.vhm-modal .progress-review-reminders-label{flex-basis:100%!important;margin:0!important;padding:0!important}
.progress-page .progress-nee-popup.vhm-modal .progress-review-notify,
.progress-page .progress-nee-popup.vhm-modal .progress-review-complete-notify{margin:0 0 var(--vhm-modal-row-gap)!important}
.progress-page .progress-nee-popup.vhm-modal .progress-nee-error{display:block!important;min-height:14px!important;margin:-2px 0 2px!important;padding:0!important}


/* v968 - Centrale tabelsortering: alle gewone tabellen zijn klikbaar op de kolomkop.
   Pagina's met gespecialiseerde sortering behouden hun eigen logica. */
table.vhm-sortable-table th.vhm-sortable-header{
  cursor:pointer!important;
  user-select:none!important;
}
table.vhm-sortable-table th.vhm-sortable-header::after{
  content:'↕';
  display:inline-block;
  margin-left:4px;
  color:var(--vhm-color-text-muted);
  font:400 9px/1 var(--vhm-font-family);
  vertical-align:1px;
}
table.vhm-sortable-table th.vhm-sortable-header.sort-asc::after{content:'▲';color:var(--vhm-color-primary)}
table.vhm-sortable-table th.vhm-sortable-header.sort-desc::after{content:'▼';color:var(--vhm-color-primary)}
table.vhm-sortable-table th.vhm-sortable-header:focus-visible{outline:2px solid var(--vhm-color-primary);outline-offset:-2px}

/* Ideeën > Mijn ideeën gebruikt de bestaande centrale tabel + modalcomponenten. */
.ideeen-mijn-table{width:100%!important;table-layout:fixed}
.ideeen-mijn-table th:nth-child(1){width:16%}
.ideeen-mijn-table th:nth-child(2){width:15%}
.ideeen-mijn-table th:nth-child(3){width:auto}
.ideeen-mijn-table th:nth-child(4){width:12%}
.ideeen-mijn-table th:nth-child(5){width:12%}
.ideeen-mijn-row{cursor:pointer}
.ideeen-mijn-row:focus-visible{outline:2px solid var(--vhm-color-primary);outline-offset:-2px}
.ideeen-mijn-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ideeen-detail-copy{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45;color:var(--vhm-color-text)}
.ideeen-detail-empty{color:var(--vhm-color-text-muted);font-style:italic}
#ideeenDetailModal .vhm-modal-dialog{width:min(640px,calc(100vw - 40px))!important}
@media(max-width:720px){
  .ideeen-mijn-table{table-layout:auto}
  .ideeen-mijn-table th:nth-child(1),.ideeen-mijn-table td:nth-child(1),
  .ideeen-mijn-table th:nth-child(5),.ideeen-mijn-table td:nth-child(5){display:none}
}


/* v969 - Ideeën is een brede overzichtsmodule. Indienen gebeurt uitsluitend
   via de centrale modal; de pagina zelf begint direct met Mijn ideeën. */
.ideeen-page .ideeen-main{width:100%!important;max-width:none!important;padding-left:16px!important;padding-right:16px!important}
.ideeen-page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 10px}
.ideeen-page-head h2{margin:0!important}
.ideeen-mijn-tablewrap{width:100%}
.ideeen-mijn-table th:nth-child(1){width:16%}
.ideeen-mijn-table th:nth-child(2){width:14%}
.ideeen-mijn-table th:nth-child(3){width:auto}
.ideeen-mijn-table th:nth-child(4){width:12%}
.ideeen-mijn-table th:nth-child(5){width:10%}
.ideeen-empty-state{text-align:center!important;color:var(--vhm-color-text-muted)!important;font-style:italic;padding:18px!important}
#ideeenAddModal .vhm-modal-dialog{width:min(620px,calc(100vw - 40px))!important}
#ideeenAddModal textarea{min-height:120px!important;resize:vertical!important}
@media(max-width:720px){.ideeen-page-head{align-items:stretch;flex-direction:column}.ideeen-page-head .primary{align-self:flex-start}}


/* v970 - Idee-detailpopup: compacte metadata en rustige inhoudssecties. */
.ideeen-page #ideeenDetailModal .vhm-modal-dialog{max-width:680px!important}
.ideeen-detail-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px;color:var(--vhm-color-muted);font-size:9px;line-height:1.2}
.ideeen-detail-meta>span:not(.ideeen-status){display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border:1px solid var(--vhm-color-border);border-radius:var(--vhm-radius-pill);background:#fff;box-sizing:border-box}
.ideeen-detail-section{margin:0;padding:0}
.ideeen-detail-section+.ideeen-detail-section{margin-top:18px;padding-top:16px;border-top:1px solid var(--vhm-color-border)}
.ideeen-detail-section h3{margin:0 0 7px!important;font:700 13px/1.2 var(--vhm-font-family)!important;color:var(--vhm-color-text)!important}
.ideeen-detail-copy{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:400 11px/1.5 var(--vhm-font-family);color:var(--vhm-color-text)}
.ideeen-detail-empty{color:var(--vhm-color-muted);font-style:italic}

/* ========================================================================== 
   v982 RESPONSIVE CONTRACT — Voortgang + Beheer
   --------------------------------------------------------------------------
   Half scherm wordt niet opgelost door typografie kleiner te maken. Navigatie
   blijft één compacte rij met horizontale overflow, brede tabellen behouden hun
   functionele kolombreedtes en scrollen binnen hun eigen container, en de
   hoofdcontent gebruikt de beschikbare breedte met compactere zijmarges.
   ========================================================================== */

@media (max-width:1180px){
  /* Beheer: beschikbare breedte benutten zonder kaarten of controls te proppen. */
  body.admin-page>.beheer-main,
  body.admin-page>.evaluatie-central-nav,
  body.admin-page>main{
    width:calc(100% - 20px)!important;
    max-width:none!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  body.admin-page .card,
  body.admin-page .vhm-card,
  body.admin-page .vhm-panel{min-width:0!important;max-width:100%!important}

  /* Navigatie op half scherm: niet in twee of drie rommelige regels laten vallen. */
  body.admin-page .central-admin-tabs,
  body.admin-page .module-subtabs,
  body.admin-page .evaluation-subtabs,
  body.admin-page .users-admin-subtabs,
  body.admin-page .systeem-subtabs,
  body.admin-page .project-selector-tabs,
  body.admin-page .beheer-level3-tabs,
  body.admin-page .optie-subtabs,
  body.admin-page .module-level3-tabs{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    max-width:100%!important;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  body.admin-page .central-admin-tabs>a,
  body.admin-page .module-subtabs>a,
  body.admin-page .evaluation-subtabs>a,
  body.admin-page .users-admin-subtabs>a,
  body.admin-page .systeem-subtabs>a,
  body.admin-page .project-selector-tabs>a,
  body.admin-page .beheer-level3-tabs>a,
  body.admin-page .optie-subtabs>a,
  body.admin-page .module-level3-tabs>a{flex:0 0 auto!important;white-space:nowrap!important}
  body.admin-page .central-admin-tabs .central-nav-actions{flex:0 0 auto!important;margin-left:6px!important}

  /* Tabellen blijven leesbaar en scrollen binnen de kaart in plaats van de pagina. */
  body.admin-page .tablewrap,
  .planning-admin-page .tablewrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  body.admin-page .central-access-card .tablewrap{position:relative!important}
  body.admin-page .central-access-card table th:first-child,
  body.admin-page .central-access-card table td:first-child{
    position:sticky!important;
    left:0!important;
    background:var(--vhm-color-surface)!important;
  }
  body.admin-page .central-access-card table th:first-child{z-index:4!important;background:var(--vhm-table-head-bg)!important}
  body.admin-page .central-access-card table td:first-child{z-index:2!important}
  body.admin-page .central-access-card table tbody tr:hover td:first-child{background:var(--vhm-table-row-hover)!important}

  /* Voortgang hoofdscherm: filters vormen één rustige, horizontaal scrollbare rij. */
  .progress-page .progress-main{padding:6px 8px 8px!important}
  .progress-page .progress-toolbar-compact{
    min-height:41px!important;
    flex-wrap:wrap!important;
    align-content:center!important;
    gap:5px 8px!important;
    padding:5px 8px!important;
  }
  .progress-page .progress-toolbar-compact>.autosave-state:empty{display:none!important}
  .progress-page .progress-top-filters{
    flex:1 1 100%!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding-bottom:2px!important;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  .progress-page .progress-top-filters>*{flex:0 0 auto!important}
  .progress-page .progress-table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* Mijn acties / Alle acties: behoud compacte kolommen en laat de tabel zelf scrollen. */
  .planning-admin-page .voortgang-deadlines-table{min-width:1040px!important}
  .planning-admin-page .deadline-task-filter-row input{min-width:58px!important}
}

@media (max-width:900px){
  /* Beheerheader blijft op half/smal scherm één heldere balk. */
  body.admin-page>header.central-module-header{
    min-height:72px!important;
    padding:8px 12px!important;
  }
  body.admin-page>header.central-module-header:before{
    left:12px!important;
    width:150px!important;
    height:50px!important;
  }
  body.admin-page>header.central-module-header .planning-nav{right:12px!important;gap:5px!important}

  body.admin-page .central-admin-tabs{padding:6px!important;gap:6px!important}
  body.admin-page .module-subtabs,
  body.admin-page .evaluation-subtabs,
  body.admin-page .users-admin-subtabs,
  body.admin-page .systeem-subtabs,
  body.admin-page .project-selector-tabs{padding:4px!important;gap:4px!important}

  /* Voortgang: de projectkolom iets compacter; overige data blijft volledig beschikbaar via scroll. */
  .progress-page .progress-table td:nth-child(1),
  .progress-page .progress-header-row th:nth-child(1){min-width:160px!important;width:160px!important;max-width:160px!important}
}

@media (max-width:680px){
  body.admin-page>.beheer-main,
  body.admin-page>.evaluatie-central-nav,
  body.admin-page>main{width:100%!important;padding-left:8px!important;padding-right:8px!important}
  body.admin-page .compact-card,
  body.admin-page .vhm-card--compact{padding:8px!important}

  .progress-page .progress-main{padding:4px!important}
  .progress-page .progress-toolbar-compact{padding:4px 6px!important}
  .progress-page .progress-table td:nth-child(1),
  .progress-page .progress-header-row th:nth-child(1){min-width:145px!important;width:145px!important;max-width:145px!important}
}

/* v983 — Acties: alleen paginalayout; alle controls/statussen zijn centrale componenten. */
body.acties-page .vhm-actions-main{width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important}
body.acties-page .vhm-actions-nav{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;max-width:100%!important;gap:5px!important;margin:0 0 12px!important}
body.acties-page .vhm-actions-nav a{white-space:nowrap!important;flex:0 0 auto!important}
body.acties-page .vhm-actions-panel{min-width:0!important;max-width:none!important}
body.acties-page .vhm-actions-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
body.acties-page .vhm-actions-title h1{margin:0!important}
body.acties-page .vhm-actions-title-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.acties-page .vhm-actions-table{min-width:780px;width:100%}
body.acties-page .vhm-actions-table th,body.acties-page .vhm-actions-table td{white-space:nowrap!important}
body.acties-page .vhm-actions-table td:nth-child(2){min-width:180px;max-width:430px;white-space:normal!important}
body.acties-page .vhm-actions-table tr.rood{--vhm-actions-row-tint:var(--vhm-color-danger-soft)}
body.acties-page .vhm-actions-table tr.oranje{--vhm-actions-row-tint:#fff0e3}
body.acties-page .vhm-actions-table tr.geel{--vhm-actions-row-tint:var(--vhm-color-warning-soft)}
body.acties-page .vhm-actions-table tr.groen{--vhm-actions-row-tint:var(--vhm-color-success-soft)}
body.acties-page .vhm-actions-table tbody tr[class] td{background:var(--vhm-actions-row-tint,transparent)!important}
body.acties-page .vhm-actions-table tbody tr[class]:hover td{box-shadow:inset 0 0 0 9999px color-mix(in srgb,var(--vhm-color-primary) 8%,transparent)!important}
body.acties-page .vhm-actions-row-link{border:0!important;background:transparent!important;color:var(--vhm-color-text)!important;padding:0!important;text-align:left!important;cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:3px;box-shadow:none!important}
body.acties-page .vhm-actions-row-link:hover{color:var(--vhm-color-primary)!important}
body.acties-page .vhm-actions-source{display:block;color:var(--vhm-color-neutral);font-size:9px}
body.acties-page .vhm-actions-empty{text-align:center;color:var(--vhm-color-neutral);padding:22px!important}
body.acties-page .vhm-actions-dialog{max-width:620px!important}
body.acties-page .vhm-actions-meta{color:var(--vhm-color-neutral);font:400 11px/1.5 var(--vhm-font-family);margin:0 0 14px}
body.acties-page .vhm-actions-description{margin:0 0 16px;white-space:pre-wrap;line-height:1.5;word-break:break-word}
body.acties-page .vhm-actions-inline-check{display:inline-flex;align-items:center;gap:7px!important;font:400 12px/1.4 var(--vhm-font-family)!important;margin:0 0 var(--vhm-modal-row-gap)}
body.acties-page .vhm-actions-inline-check input{width:auto!important;margin:0!important}
@media(max-width:920px){body.acties-page .vhm-actions-title{align-items:flex-start}body.acties-page .vhm-actions-table{min-width:800px}}
/* Acties: [hidden] wint ook van de centrale flex-layout voor labels en secties. */
body.acties-page .vhm-modal [hidden]{display:none!important}

/* v984: identieke compacte kolommen voor Mijn acties en Alle acties. */
body.acties-page .vhm-actions-table{min-width:1040px!important;width:100%!important;table-layout:auto!important}
body.acties-page .vhm-actions-table td:nth-child(2){min-width:0;max-width:none;white-space:nowrap!important}
body.acties-page .vhm-actions-table .deadline-note-col{width:52px;min-width:52px;max-width:52px;text-align:center!important}
body.acties-page .vhm-actions-table .deadline-note-button{display:inline-flex;justify-content:center;align-items:center;width:24px;height:22px;border:1px solid #cfd5da;border-radius:5px;background:#fff;cursor:pointer;font-size:13px;padding:0}
body.acties-page .vhm-actions-table .deadline-type-label{display:inline-flex;align-items:center;min-height:18px;padding:1px 6px;border-radius:999px;border:1px solid #d4d9dd;background:#f7f8f9;color:#5d6670;font-size:9px;font-weight:700}
body.acties-page .vhm-actions-table .type-deadline{background:#fff7ea;border-color:#ead2aa;color:#8a632b}
body.acties-page .vhm-actions-table .type-notitie{background:#fff4f4;border-color:#e8c2c2;color:#a23c3c}
body.acties-page .vhm-actions-table .deadline-task-filter-row th{padding:3px 4px!important;background:#f7f8f9!important}
body.acties-page .vhm-actions-table .column-text-filter{box-sizing:border-box;width:100%!important;min-width:58px!important;height:22px!important;padding:1px 5px!important;border:1px solid #c8cdd1!important;border-radius:3px!important;background:#fff!important;font-size:9px!important}
body.acties-page .vhm-actions-table th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap!important}
body.acties-page .vhm-actions-table .sort-indicator{font-size:.8em;opacity:.5;margin-left:4px}
body.acties-page .vhm-actions-table tbody tr[hidden]{display:none!important}
/* Dezelfde modale opbouw en typografie als de popup in Voortgang. */
body.acties-page #vhmActionsModal .progress-note-intro{margin:0 0 var(--vhm-modal-row-gap)!important}
body.acties-page #vhmActionsModal .vhm-actions-dialog{width:min(var(--vhm-modal-width),calc(100vw - 40px))!important;padding:var(--vhm-modal-padding)!important}
body.acties-page #vhmActionsModal .vhm-actions-description:empty{display:none!important}
body.acties-page #vhmActionsModal .progress-popup-value{margin:0 0 var(--vhm-modal-row-gap)!important}
/* v989: dezelfde actiestatus-bediening en Voortgang-modal voor beide overzichten. */
body.acties-page .vhm-actions-table .actions-status-select{
  width:118px!important;max-width:138px!important;min-width:105px!important;
  height:25px!important;font:9px var(--vhm-font-family)!important;
  border:1px solid var(--vhm-color-border)!important;border-radius:4px!important;
  background:var(--vhm-color-surface)!important;padding:2px 4px!important;
}
body.acties-page .vhm-actions-table .actions-status-select:disabled{background:#f3f4f6!important;color:#858b90!important;cursor:not-allowed!important}
body.acties-page #vhmActionNoteViewer input:disabled,
body.acties-page #vhmActionNoteViewer textarea:disabled{
  opacity:1!important;background:#ecedef!important;border-color:#c9cdd1!important;
  color:#5e656b!important;cursor:not-allowed!important;
  -webkit-text-fill-color:#5e656b!important;
}
body.acties-page #vhmActionNoteViewer .progress-nee-dialog,
body.acties-page #vhmActionsModal .progress-nee-dialog{width:min(var(--vhm-modal-width),calc(100vw - 40px))!important;padding:var(--vhm-modal-padding)!important}
body.acties-page .vhm-actions-readonly .vhm-modal-field{color:#646a70!important}
body.acties-page .vhm-actions-table .actions-title-static{color:var(--vhm-color-text);font:inherit;text-decoration:none;cursor:default}

/* v989: doorzoekbaar medewerkerveld, identiek zoekgedrag aan Voortgang. */
body.acties-page .vhm-actions-employee{position:relative;display:grid;gap:4px;margin:0 0 var(--vhm-modal-row-gap)!important;font:700 9px var(--vhm-font-family)}
body.acties-page .vhm-actions-employee[hidden],body.acties-page .vhm-actions-employee-matches[hidden]{display:none!important}
body.acties-page .vhm-actions-employee input{width:100%;height:30px;padding:3px 7px;border:1px solid #bfc5ca;border-radius:5px;background:#fff;font:9px var(--vhm-font-family)}
body.acties-page .vhm-actions-employee-matches{position:relative;max-height:180px;overflow:auto;background:#fff;border:1px solid #cbd0d4;border-radius:4px;box-shadow:0 3px 12px #0002;z-index:5}
body.acties-page .vhm-actions-employee-option{display:block!important;width:100%!important;margin:0!important;padding:6px 9px!important;min-height:25px!important;background:#fff!important;text-align:left!important;border:0!important;border-radius:0!important;cursor:pointer;font:9px var(--vhm-font-family)!important}
body.acties-page .vhm-actions-employee-option:hover,body.acties-page .vhm-actions-employee-option:focus{background:#eef3f5!important}

/* v992: oude deadlines blijven inspecteerbaar, ook als de oorspronkelijke note ontbreekt. */
body.acties-page .deadline-note-button--empty{opacity:.54;background:#f3f4f6;border-color:#d8dbdf}

/* v999: in het bestaande Voortgang-venster staan waarde en medewerker
   onder elkaar, net zoals in Acties. Geen effect op andere schermen. */
.progress-page .progress-nee-popup.vhm-modal .progress-popup-value .progress-note-value-row,
.progress-page .progress-nee-popup.vhm-modal .progress-popup-value .progress-note-value-row:has(.progress-note-employee-combo:not([hidden])){
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;width:100%!important;
}
.progress-page .progress-nee-popup.vhm-modal .progress-popup-value .progress-note-employee-combo:not([hidden]){
  display:block!important;grid-column:1/-1!important;min-width:0!important;margin:0!important;
}
.progress-page .progress-nee-popup.vhm-modal .progress-popup-value .progress-note-status,
.progress-page .progress-nee-popup.vhm-modal .progress-popup-value .progress-note-current,
.progress-page .progress-nee-popup.vhm-modal .progress-popup-value .progress-note-employee-search{
  display:block;width:100%!important;min-width:0!important;box-sizing:border-box!important;
}
.progress-page .progress-nee-popup.vhm-modal .progress-popup-value .progress-note-status[hidden],
.progress-page .progress-nee-popup.vhm-modal .progress-popup-value .progress-note-current[hidden]{display:none!important}
.progress-page .progress-nee-popup.vhm-modal .progress-note-employee-label{display:block;margin:0 0 4px;font:700 9px var(--vhm-font-family)}


/* v1231 - centrale compacte filter/actieknop. Gebruik exact dezelfde class; alleen kleurvariant wijzigen. */
.vhm-filter-button{
  appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:27px!important;
  min-height:27px!important;
  padding:0 9px!important;
  margin:0!important;
  border:1px solid #d8dcde!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#59636a!important;
  box-shadow:none!important;
  font:700 8px Arial,sans-serif!important;
  line-height:1!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
  cursor:pointer!important;
}
.vhm-filter-button:hover{border-color:#c7cdd1!important;background:#f8f9f9!important;color:#3f494f!important;}
.vhm-filter-button.active{border-color:#df7920!important;background:#fff6ed!important;color:#a8520d!important;}
.vhm-filter-button--primary{border-color:var(--vhm-color-primary,#e96f00)!important;background:var(--vhm-color-primary,#e96f00)!important;color:#fff!important;}
.vhm-filter-button--primary:hover{border-color:var(--vhm-color-primary-hover,#c65a00)!important;background:var(--vhm-color-primary-hover,#c65a00)!important;color:#fff!important;}


/* v1237 · Systeem → Database */
.database-cleanup-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin:14px 0}.database-cleanup-list>div{border:1px solid #ddd;border-radius:8px;padding:14px}.database-cleanup-list p{margin:6px 0 12px}


/* v1247 — tabeltypografie: Mijn acties gebruikt één consistente 9px maat; nadruk alleen via badges/status, niet via willekeurige bodytekst. */
body.acties-page .vhm-actions-table th,
body.acties-page .vhm-actions-table td,
body.acties-page .vhm-actions-table td a,
body.acties-page .vhm-actions-table td span,
body.acties-page .vhm-actions-table td select,
body.acties-page .vhm-actions-table td button{font-size:9px!important}
body.acties-page .vhm-actions-table td{font-weight:400!important}
body.acties-page .vhm-actions-table td b,strong{font-size:9px}
body.acties-page .vhm-actions-table .deadline-note-button{font-size:13px!important}
body.acties-page .vhm-actions-table .deadline-type-label{font-size:9px!important;font-weight:700!important}

/* v1263 · uniforme selectie-popup zoals Planning → Schrijven */
.vhm-scope-toggle{display:block!important;margin:0 auto!important;accent-color:var(--portal-orange,#e96f00)!important;cursor:pointer}
.vhm-scope-toggle:disabled{cursor:not-allowed}
.vhm-scope-help{margin:0 0 12px;color:#687078;font-size:9px}
.vhm-scope-search{width:100%;margin-bottom:10px}
.vhm-scope-buckets{display:grid;gap:10px}
.vhm-scope-bucket{border:1px solid #d9dde1;border-radius:9px;background:#f8f9fa;padding:9px}
.vhm-scope-bucket.is-allowed{background:#fffaf5;border-color:#ead6c4}
.vhm-scope-bucket-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.vhm-scope-bucket-head strong{font-size:9px}
.vhm-scope-bucket-action{min-width:0!important;min-height:0!important;padding:4px 7px!important;font-size:9px!important}
.vhm-scope-items{display:flex;flex-wrap:wrap;gap:6px;min-height:29px}
.vhm-scope-item{width:auto!important;margin:0!important;cursor:pointer!important}
.vhm-scope-item .vhm-scope-item-arrow{font-size:9px;opacity:.7}
.vhm-scope-empty{color:#838a90;font-size:9px;padding:4px 2px}
@media(max-width:700px){.vhm-scope-bucket-head{align-items:flex-start}}


/* v1522 – Vaktechniek > Interim: overzichtelijke procesmenu's en meerregelige IBM's.
   Bewust beperkt tot Interim; geen aanpassing aan andere beheerpagina's. */
body.admin-page .vaktechniek-proces-tabs,
body.vaktechniek-page .ibm-process-tabs {
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:stretch!important;
  align-content:start!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  gap:6px!important;
  overflow:visible!important;
  white-space:normal!important;
  scrollbar-width:none!important;
}
body.admin-page .vaktechniek-proces-tabs>a,
body.vaktechniek-page .ibm-process-tabs>a {
  display:inline-flex!important;
  flex:0 1 auto!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  max-width:min(230px,100%)!important;
  width:auto!important;
  box-sizing:border-box!important;
  padding:6px 10px!important;
  text-align:center!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.35!important;
  height:auto!important;
  min-height:28px!important;
}
body.admin-page .vaktechniek-process-card,
body.admin-page .vaktechniek-pending-card,
body.admin-page .vaktechniek-process-manager,
body.vaktechniek-page .vaktechniek-proces-card {
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
body.admin-page .vaktechniek-ibm-list,
body.admin-page .vaktechniek-proposal-list,
body.admin-page .vaktechniek-ibm-row,
body.admin-page .vaktechniek-proposal-row { min-width:0!important;max-width:100%!important; }
body.admin-page .vaktechniek-ibm-row {
  grid-template-columns:minmax(0,1fr) auto auto!important;
  align-items:start!important;
  gap:8px!important;
}
body.admin-page .vaktechniek-proposal-row {
  grid-template-columns:minmax(85px,125px) minmax(110px,180px) minmax(0,1fr) auto auto!important;
  align-items:start!important;
  gap:8px!important;
}
body.admin-page .vaktechniek-ibm-row textarea.ibm-omschrijving,
body.admin-page .vaktechniek-proposal-row textarea.ibm-omschrijving {
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:44px!important;
  height:auto;
  box-sizing:border-box!important;
  padding:6px 8px!important;
  border:1px solid #cbd0d4!important;
  border-radius:5px!important;
  background:#fff!important;
  color:#222!important;
  font:400 11px/1.45 Arial,sans-serif!important;
  text-align:left!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  resize:none!important;
}
body.admin-page .vaktechniek-ibm-row textarea.ibm-omschrijving:focus,
body.admin-page .vaktechniek-proposal-row textarea.ibm-omschrijving:focus {
  border-color:var(--orange,#ef7800)!important;
  outline:1px solid var(--orange,#ef7800)!important;
  outline-offset:0!important;
}
body.admin-page .vaktechniek-ibm-row .ibm-source-badge {margin-top:6px!important;}
body.admin-page .vaktechniek-ibm-row .danger.small,
body.admin-page .vaktechniek-proposal-row .danger.small,
body.admin-page .vaktechniek-proposal-row .button.small {align-self:start!important;}
@media(max-width:1040px) {
  body.admin-page .vaktechniek-proposal-row {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }
  body.admin-page .vaktechniek-proposal-row .vaktechniek-proposal-user,
  body.admin-page .vaktechniek-proposal-row select {grid-column:auto!important;min-width:0!important;width:100%!important;}
  body.admin-page .vaktechniek-proposal-row textarea.ibm-omschrijving {grid-column:1/-1!important;}
  body.admin-page .vaktechniek-proposal-row .button.small,
  body.admin-page .vaktechniek-proposal-row .danger.small {width:max-content!important;max-width:100%!important;}
}
@media(max-width:560px) {
  body.admin-page .vaktechniek-ibm-row {grid-template-columns:minmax(0,1fr) auto!important;}
  body.admin-page .vaktechniek-ibm-row textarea.ibm-omschrijving {grid-column:1/-1!important;}
  body.admin-page .vaktechniek-ibm-row .ibm-source-badge {display:inline-block!important;grid-column:1!important;justify-self:start!important;}
  body.admin-page .vaktechniek-ibm-row .ibm-delete {grid-column:2!important;justify-self:end!important;}
  body.admin-page .vaktechniek-ibm-row-new {grid-template-columns:minmax(0,1fr)!important;}
}
body.vaktechniek-page .vaktechniek-proces-card .tablewrap {
  max-width:100%!important;min-width:0!important;overflow-x:visible!important;
}
body.vaktechniek-page .vaktechniek-ibm-table {
  width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed!important;
}
body.vaktechniek-page .vaktechniek-ibm-table th,
body.vaktechniek-page .vaktechniek-ibm-table td {
  white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;
}
body.vaktechniek-page .vaktechniek-ibm-table th:first-child,
body.vaktechniek-page .vaktechniek-ibm-table td:first-child {width:40px!important;}
body.vaktechniek-page .ibm-pending-list>div {min-width:0;flex-wrap:wrap;overflow-wrap:anywhere;}


/* v1523 – Interim/Vaktechniek: proceskeuze als VHM-niveau-3-tabs.
   Beide pagina's delen de styleguide-tabstijl; lange procestitels mogen afbreken.
   Geen horizontale scrolbalk en geen niveau-2-menuopmaak. */
body.vaktechniek-page .ibm-process-tabs,
body.admin-page .vaktechniek-proces-tabs {
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  align-content:flex-start!important;
  gap:5px!important;
  margin:0 0 10px!important;
  padding:0 0 7px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:visible!important;
  border:0!important;
  border-bottom:1px solid #d8d8d8!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}
body.vaktechniek-page .ibm-process-tabs>a,
body.admin-page .vaktechniek-proces-tabs>a {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:min(230px,100%)!important;
  min-height:25px!important;
  height:auto!important;
  padding:4px 9px!important;
  margin:0!important;
  box-sizing:border-box!important;
  border:1px solid #cfd4d8!important;
  border-radius:4px!important;
  background:#fff!important;
  color:#252525!important;
  font:700 9px/1.25 Arial,sans-serif!important;
  text-decoration:none!important;
  text-align:center!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  box-shadow:none!important;
}
body.vaktechniek-page .ibm-process-tabs>a.active,
body.admin-page .vaktechniek-proces-tabs>a.active {
  border-color:var(--vhm-color-primary,#ed7100)!important;
  background:var(--vhm-color-primary,#ed7100)!important;
  color:#fff!important;
}