/* =====================================================================
   personeel.css — module 5.1 · Mensen (personeelsdossier, verlof &
   verzuim, declaraties, hr-signalen, nmbrs-wachtrij).
   Uitsluitend tokens uit casa360-tokens.css; diepte via de vaste laag.
===================================================================== */

.pd { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }

.pd-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pd-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.pd-kop p { margin: 0; max-width: 68ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }

/* ---- knoppen ---- */
.pd-knop {
  padding: 9px 14px; border-radius: 10px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; color: var(--c-ink); font: 700 .78rem var(--font-ui);
  transition: background 160ms, border-color 160ms;
}
.pd-knop:hover { border-color: var(--c-ink-3); }
.pd-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.pd-knop--primair:hover { background: var(--c-groen-d); border-color: var(--c-groen-d); }
.pd-knop--rood { border-color: var(--c-rood-t); color: var(--c-rood); }
.pd-knop--klein { padding: 6px 11px; font-size: .72rem; border-radius: 8px; }
.pd-knop.is-dicht { opacity: .55; cursor: not-allowed; }
.pd-link { border: 0; background: none; padding: 0; cursor: pointer; font: 700 inherit var(--font-ui); color: var(--c-groen-d); text-decoration: underline; }

.pd-hint { font-size: .72rem; color: var(--c-ink-3); align-self: center; }
.pd-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; }
/* Reconciliatie-banner (FT-5.3a): sluit scherm-roster aan op het HR-register */
.pd-reconcil { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin-bottom: 10px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; background: var(--c-creme); font-size: .8rem; color: var(--c-ink-2); }
.pd-reconcil i { font-style: normal; font-weight: 800; }
.pd-reconcil strong { color: var(--c-ink); }
.pd-reconcil .mono { margin-left: auto; color: var(--c-ink-3); white-space: nowrap; }
.pd-reconcil.is-ok { border-color: var(--c-groen-t); }
.pd-reconcil.is-ok i { color: var(--c-groen); }
.pd-reconcil.is-let { border-color: var(--c-amber-t); }
.pd-reconcil.is-let i { color: var(--c-amber); }
.pd-leeg { padding: 18px; text-align: center; font: 600 .8rem var(--font-ui); color: var(--c-ink-3); margin: 0; }
.pd-leeg--rij { padding: 22px; }
.pd-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---- dossier-layout ---- */
.pd-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.pd-lijst { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.pd-lijst .kicker { padding: 8px 6px 6px; }
.pd-lijst__kop { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.pd-zoek {
  width: 100%; padding: 9px 11px; border-radius: 10px;
  border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme);
  font: 600 .76rem var(--font-ui); color: var(--c-ink);
}
.pd-medrij {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 9px 10px; border-radius: 11px; border: 0; background: none; cursor: pointer;
  transition: background 160ms;
}
.pd-medrij:hover { background: var(--c-creme); }
.pd-medrij.is-actief { background: var(--c-groen-t); }
.pd-medrij i {
  width: 34px; height: 34px; flex: none; border-radius: 9px; font-style: normal;
  background: var(--c-terra-t); color: var(--c-terra-d);
  display: flex; align-items: center; justify-content: center; font: 700 .74rem var(--font-ui);
}
.pd-medrij__wie { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pd-medrij__wie strong { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-medrij__wie em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-rood); flex: none; }

.pd-dossier { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pd-doskop { display: flex; align-items: center; gap: 14px; padding: 16px 18px; flex-wrap: wrap; }
.pd-avatar {
  width: 54px; height: 54px; flex: none; border-radius: 13px; font-style: normal;
  background: var(--c-terra-t); color: var(--c-terra-d);
  display: flex; align-items: center; justify-content: center; font: 700 1.15rem var(--font-ui);
}
.pd-doskop__wie { flex: 1; min-width: 200px; }
.pd-doskop__wie h2 { margin: 0; font-size: 1.15rem; }
.pd-doskop__wie span { font-size: .76rem; color: var(--c-ink-2); }
.pd-nmbrstag { font-size: .64rem; color: var(--c-ink-3); background: var(--c-creme); padding: 4px 10px; border-radius: 6px; }

.pd-onboarding { padding: 14px 16px; border-color: var(--c-groen); background: var(--c-groen-t); display: flex; flex-direction: column; gap: 7px; }
.pd-onboarding__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pd-onboarding p { margin: 0 0 4px; font-size: .74rem; color: var(--c-ink-2); }
.pd-onbtaak {
  display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; border: 0; background: #fff; font: 600 .78rem var(--font-ui); color: var(--c-ink);
}
.pd-onbtaak i {
  width: 20px; height: 20px; flex: none; border-radius: 6px; font-style: normal;
  border: 1.5px solid var(--c-lijn-2); background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pd-onbtaak.is-klaar { color: var(--c-ink-3); text-decoration: line-through; }
.pd-onbtaak.is-klaar i { background: var(--c-groen); border-color: var(--c-groen); }

.pd-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 5px; background: var(--c-paneel); border-radius: 12px; }
.pd-tab {
  white-space: nowrap; padding: 8px 14px; border-radius: 9px; cursor: pointer;
  border: var(--lijndikte) solid transparent; background: none;
  font: 600 .76rem var(--font-ui); color: var(--c-ink-2);
}
.pd-tab.is-actief { background: #fff; border-color: var(--c-lijn); color: var(--c-ink); font-weight: 700; }

.pd-tabkaart { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.pd-gegevens { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.pd-veld strong { font-size: .84rem; }
.pd-tabvoet { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; flex-wrap: wrap; }

.pd-contractkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pd-contractkop strong { font-size: .95rem; display: block; }
.pd-contractkop span { font-size: .76rem; color: var(--c-ink-2); }
.pd-proeftijd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 11px; background: var(--c-amber-t); font-size: .78rem;
}
.pd-contractacties { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.pd-hist { display: flex; flex-direction: column; gap: 6px; }
.pd-histrij {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 13px;
  border-radius: 9px; background: var(--c-creme); font: 600 .76rem var(--font-ui); color: var(--c-ink-2);
}

.pd-docs { display: flex; flex-direction: column; gap: 6px; }
.pd-docrij {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border-radius: 10px; background: var(--c-creme); font-size: .78rem;
}
.pd-docrij span:first-child { flex: 1; min-width: 0; font-weight: 600; }
.pd-docrij em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.pd-docrij.is-ingenomen span:first-child { color: var(--c-ink-3); text-decoration: line-through; }

.pd-verlofgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pd-saldo { padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
.pd-saldo strong { font-size: 1.5rem; }
.pd-saldo span { font-size: .72rem; color: var(--c-ink-2); line-height: 1.4; }
.pd-verzuimnote { padding: 13px 16px; font-size: .78rem; border-color: var(--c-terra); }
.pd-avg { padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; background: var(--c-paneel); }
.pd-avg i { font-style: normal; font: 800 1rem var(--font-mono); color: var(--c-ink-2); }
.pd-avg strong { display: block; font-size: .8rem; margin-bottom: 2px; }
.pd-avg span { font-size: .74rem; color: var(--c-ink-2); line-height: 1.5; }

.pd-certrij {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 11px; border: var(--lijndikte) solid var(--c-lijn); font-size: .8rem;
}
.pd-certrij strong { flex: 1; }
.pd-certrij.is-warn { border-color: var(--c-amber); background: var(--c-amber-t); }

.pd-tijdlijn { display: flex; flex-direction: column; }
.pd-tlrij { display: flex; gap: 13px; }
.pd-tlrij i { width: 11px; flex: none; position: relative; }
.pd-tlrij i::before {
  content: ""; position: absolute; top: 4px; left: 0;
  width: 11px; height: 11px; border-radius: 50%; background: var(--c-terra);
}
.pd-tlrij:not(:last-child) i::after {
  content: ""; position: absolute; top: 17px; bottom: -4px; left: 5px; width: 2px; background: var(--c-terra-t);
}
.pd-tlrij div { padding-bottom: 16px; }
.pd-tlrij strong { display: block; font-size: .8rem; }
.pd-tlrij em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }

/* ---- verlof & verzuim ---- */
.pd-blok { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.pd-blok__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pd-blok__kop strong { font-size: .92rem; }
.pd-tweekolom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }

.pd-vrij {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  border-radius: 12px; border: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap;
}
.pd-vrij__wie { flex: 1; min-width: 180px; }
.pd-vrij__wie strong { display: block; font-size: .82rem; }
.pd-vrij__wie span { font-size: .74rem; color: var(--c-ink-2); }

.pd-kal { display: grid; grid-template-columns: 130px repeat(5, 1fr); gap: 6px; align-items: center; }
.pd-kal--kop { font-size: .6rem; color: var(--c-ink-3); text-align: center; }
.pd-kal--kop span:first-child { text-align: left; }
.pd-kal__naam { font: 600 .76rem var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-cel {
  height: 30px; border-radius: 6px; font: 700 .64rem var(--font-ui); font-style: normal;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-creme); color: var(--c-lijn-2);
}
.pd-cel.is-v { background: var(--c-groen-t); color: var(--c-groen-d); }
.pd-cel.is-z { background: var(--c-rood-t); color: var(--c-rood); }
.pd-cel.is-l { background: var(--c-paneel); color: var(--c-ink-2); }
.pd-legenda { display: flex; gap: 14px; font: 600 .66rem var(--font-ui); color: var(--c-ink-2); margin-top: 4px; }
.pd-legenda .is-v { color: var(--c-groen-d); }
.pd-legenda .is-z { color: var(--c-rood); }
.pd-legenda .is-l { color: var(--c-ink-3); }

.pd-verzuim {
  padding: 13px 15px; border-radius: 12px; border: var(--lijndikte) solid var(--c-amber);
  background: var(--c-amber-t); display: flex; flex-direction: column; gap: 5px; font-size: .76rem;
}
.pd-verzuim__kop { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pd-verzuim__kop strong { font-size: .84rem; }
.pd-verzuim__kop em { font-style: normal; font-size: .68rem; color: var(--c-ink-2); }
.pd-verzuim__fase { font-weight: 700; color: var(--c-amber); }
.pd-verzuim .is-amber { font-style: normal; color: var(--c-amber); font-weight: 700; }
.pd-verzuim__acties { display: flex; gap: 8px; margin-top: 5px; }

.pd-pwlijst { display: flex; flex-direction: column; gap: 7px; }
.pd-pwrij {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: 10px; background: var(--c-creme); font-size: .78rem;
}
.pd-pwrij i {
  width: 20px; height: 20px; flex: none; border-radius: 50%; font-style: normal;
  border: 1.5px solid var(--c-lijn-2); background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pd-pwrij.is-gedaan i { background: var(--c-groen); border-color: var(--c-groen); }
.pd-pwrij.is-volgende { background: var(--c-amber-t); }
.pd-pwrij.is-volgende i { border-color: var(--c-amber); }
.pd-pwrij .mono { font-size: .66rem; color: var(--c-ink-3); width: 44px; flex: none; }
.pd-pwrij strong { display: block; font-size: .78rem; }
.pd-pwrij em.is-amber { font-style: normal; font-size: .68rem; color: var(--c-amber); font-weight: 700; }

.pd-regelset { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.pd-regelcellen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pd-regelcellen > div {
  padding: 11px 13px; border-radius: 10px; background: var(--c-creme);
  display: flex; flex-direction: column; gap: 2px;
}
.pd-regelcellen span { font-size: .68rem; color: var(--c-ink-3); }
.pd-regelcellen strong { font-size: .88rem; }

/* ---- declaraties ---- */
.pd-declrij {
  display: grid; grid-template-columns: 52px 150px 150px minmax(0, 1fr) 90px 100px 190px;
  gap: 12px; align-items: center; padding: 11px 16px; font-size: .78rem;
  border-bottom: var(--lijndikte) solid var(--c-lijn);
}
.pd-declrij:last-child { border-bottom: 0; }
.pd-declrij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }
.pd-declrij__oms { color: var(--c-ink-2); min-width: 0; }
.pd-declrij__acties { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.pd-declrij__bon { cursor: pointer; border: 1px solid var(--c-lijn); background: var(--c-paneel); font: inherit; font-size: .68rem; }
.pd-declrij__bon:hover { border-color: var(--c-groen-d); }
.pd-declrij__btw { display: block; font-style: normal; font-size: .62rem; font-weight: 400; color: var(--c-ink-3); }
.pd-declrij em.mono { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }

/* ---- signalen ---- */
.pd-sigkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pd-sigtellers { display: flex; gap: 8px; }
.pd-sigtellers .chip { font-size: .72rem; padding: 5px 13px; }
.pd-sorteer { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: 10px; }
.pd-flt {
  padding: 7px 13px; border-radius: 8px; cursor: pointer; border: 0; background: none;
  font: 600 .74rem var(--font-ui); color: var(--c-ink-2);
}
.pd-flt.is-actief { background: #fff; color: var(--c-ink); font-weight: 700; }

.pd-signaal {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border-left: 4px solid var(--c-lijn-2);
}
.pd-signaal.is-err { border-left-color: var(--c-rood); }
.pd-signaal.is-warn { border-left-color: var(--c-amber); }
.pd-signaal.is-ok { border-left-color: var(--c-groen); }
.pd-signaal i {
  width: 38px; height: 38px; flex: none; border-radius: 10px; font-style: normal;
  display: flex; align-items: center; justify-content: center; font-size: .9rem;
  background: var(--c-creme); color: var(--c-ink-2);
}
.pd-signaal.is-err i { background: var(--c-rood-t); color: var(--c-rood); }
.pd-signaal.is-warn i { background: var(--c-amber-t); color: var(--c-amber); }
.pd-signaal.is-ok i { background: var(--c-groen-t); color: var(--c-groen-d); }
.pd-signaal__wat { flex: 1; min-width: 0; }
.pd-signaal__wat strong { display: block; font-size: .82rem; }
.pd-signaal__wat span { font-size: .74rem; color: var(--c-ink-2); }

/* ---- nmbrs ---- */
.pd-koppeling { padding: 14px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pd-kopdot { color: var(--c-groen); font-size: .9rem; }
.pd-koppeling div { flex: 1; min-width: 220px; }
.pd-koppeling strong { display: block; font-size: .86rem; }
.pd-koppeling span { font-size: .74rem; color: var(--c-ink-2); }
.pd-koppeling .mono { font-size: .64rem; color: var(--c-ink-3); }

.pd-poortbalk { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pd-poorttekst { font-size: .78rem; color: var(--c-ink-2); }
.pd-poorttekst.is-ok { color: var(--c-groen-d); font-weight: 700; }

.pd-nmrij {
  display: grid; grid-template-columns: 32px 74px 52px 150px 130px minmax(0, 1fr) 96px;
  gap: 12px; align-items: center; padding: 10px 16px; font-size: .78rem;
  border-bottom: var(--lijndikte) solid var(--c-lijn);
}
.pd-nmrij:last-child { border-bottom: 0; }
.pd-nmrij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }
.pd-nmrij__detail { color: var(--c-ink-2); min-width: 0; }
.pd-nmrij.is-verzonden { color: var(--c-ink-3); }
.pd-vink {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid var(--c-lijn-2); background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pd-vink.is-aan { background: var(--c-groen); border-color: var(--c-groen); }
.pd-vinkvast { color: var(--c-groen); }

.pd-preview {
  margin: 12px 22px 0; padding: 14px 16px; border-radius: 10px;
  background: var(--c-creme); font-size: .68rem; line-height: 1.6;
  white-space: pre-wrap; max-height: 220px; overflow: auto;
}
.pd-preview:empty { display: none; }

/* ---- responsief ---- */
@media (max-width: 1080px) {
  .pd-grid, .pd-tweekolom { grid-template-columns: 1fr; }
  .pd-regelcellen { grid-template-columns: 1fr 1fr; }
  .pd-verlofgrid { grid-template-columns: 1fr; }
  .pd-declrij, .pd-nmrij { grid-template-columns: 1fr; gap: 4px; }
  .pd-declrij--kop, .pd-nmrij--kop { display: none; }
}
.pd-lijstacties { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.pd-knop--klein { font-size: 12px; padding: 6px 12px; }

/* Poortwachter-kalender (E1a) */
.pd-pwrij { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--c-lijn); }
.pd-pwrij:last-child { border-bottom: 0; }
.pd-pwrij__wie { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.pd-pwrij__wie em { font-style: normal; font-size: 11.5px; color: var(--c-ink-2); }
.pd-pwlijn { position: relative; height: 30px; background: color-mix(in srgb, var(--c-ink) 5%, var(--c-paneel)); border-radius: 99px; }
.pd-pwmijl { position: absolute; top: 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; transform: translateX(-50%); }
.pd-pwmijl i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-ink-3); display: block; }
.pd-pwmijl.is-gehad i { background: var(--c-groen-d); }
.pd-pwmijl.is-nu i { background: var(--c-amber); outline: 3px solid color-mix(in srgb, var(--c-amber) 30%, transparent); }
.pd-pwmijl em { font-size: 9px; color: var(--c-ink-2); }
.pd-pwnu { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--c-terra); transform: translateX(-50%); border-radius: 2px; }
.pd-pwvolgende { font-size: 12px; color: var(--c-ink-2); }
.pd-pwvolgende.is-urgent { color: var(--c-terra); font-weight: 700; }
.pd-pwvolgende em { font-style: normal; }

/* ESS-mutaties (E1b) */
.pd-essrij { display: grid; grid-template-columns: 1.1fr auto 1.6fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.pd-essrij:last-child { border-bottom: 0; }
.pd-essrij__wie { display: flex; flex-direction: column; }
.pd-essrij__wie em { font-style: normal; font-size: 11px; color: var(--c-ink-2); }
.pd-essrij__delta { font-size: 12px; }
.pd-essrij__delta s { color: var(--c-ink-3); }
.pd-essrij__acties { display: flex; gap: 6px; }

/* Contract-kalender (E1c) */
.pd-ckmaand { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); }
.pd-ckmaand:last-child { border-bottom: 0; }
.pd-ckrij { display: grid; grid-template-columns: 1.4fr auto auto; gap: 12px; align-items: center; font-size: 13px; }
.pd-ckrij.is-telaat { background: color-mix(in srgb, var(--c-rood) 5%, transparent); border-radius: 8px; padding: 4px 8px; }
.pd-ckrij__wie { display: flex; flex-direction: column; }
.pd-ckrij__wie em { font-style: normal; font-size: 11.5px; color: var(--c-ink-2); }
.pd-contractkal { margin-top: 14px; }

/* F3 · systeemtoegang-blok in het dossier (HR leidend) */
.pd-toegang { margin-top: 12px; }
.pd-toegang__kop { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }

/* B6 · HR-zone (server-side afgeschermd) */
.pd-hrrij { display: grid; grid-template-columns: 160px 1fr auto auto auto auto; gap: 12px; align-items: center;
  padding: 10px 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .68rem var(--font-ui); }
.pd-hrrij:last-child { border-bottom: 0; }

/* B17 · verzuimdossiers (Poortwachter) */
.pd-vzrij { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 12px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 10px 2px; }
.pd-vzrij > div { display: flex; flex-direction: column; gap: 2px; }
.pd-vzrij strong { font-size: .8rem; }
.pd-vzrij > div span { font-size: .68rem; color: var(--c-ink-2); }
.pd-vzrij .mono { font-size: .64rem; color: var(--c-ink-2); }
.pd-vzrij.is-telaat { background: var(--c-rood-t); border-radius: 10px; padding: 10px; border-top: none; }

/* B18 · loonwachtrij backend */
.pd-lnrij { display: grid; grid-template-columns: auto 160px auto 1fr auto; gap: 12px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 9px 2px; }
.pd-lnrij strong { font-size: .78rem; }
.pd-lnrij span { font-size: .68rem; color: var(--c-ink-2); }
.pd-poortbalk--strak { margin-top: 10px; border-top: 1px solid var(--c-lijn); padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }

/* punt 9 · ESS-ziek-voormelding in de HR-wachtrij */
.pd-vzrij--voormelding { background: color-mix(in srgb, var(--c-amber-t) 45%, transparent); border-radius: 10px; padding: 10px; }

/* punt 11 · urenstaten-kaart (nmbrsloon) */
.pd-urenrij { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 9px 2px; }
.pd-urenrij__wie { display: flex; flex-direction: column; gap: 2px; }
.pd-urenrij__wie em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.pd-urenrij.is-af { opacity: .7; }