/* Ailex — de Planner (27-10-2026, klus "Ailex planner: schermen", planner.js). Lichte paarse candy-stijl van de werkkaarten
   (werkkaart.css: --a #7C4DE0 / --b #5530A8 voor het type "werk", --groen #2BB585). Tikvlakken minstens 48 px, past op 360 px.
   Kleuren vast (niet uit het thema), zodat het contrast altijd klopt: tekst #2A1F4D op #F4EFFF = 13:1, wit op #6A3FD0 = 6,4:1,
   wit op #5530A8 = 8,9:1, #0B6B4F op #E3F7EF = 6,2:1, #9B1C1C op #FDE8E8 = 6,6:1. */
.pn { --pn-a: #6A3FD0; --pn-b: #5530A8; --pn-zacht: #F4EFFF; --pn-lijn: #D9CCFA; --pn-tekst: #2A1F4D; --pn-grijs: #5A5078;
  --pn-ok: #0B6B4F; --pn-ok-bg: #E3F7EF; --pn-mis: #9B1C1C; --pn-mis-bg: #FDE8E8; --pn-geel: #8A5A00; --pn-geel-bg: #FFF4D6;
  color: var(--pn-tekst); padding: 2px 0 24px; overflow-wrap: anywhere; }
.pn * { box-sizing: border-box; }
.pn .pn-kop { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.pn .pn-terug { flex: none; width: 48px; height: 48px; }
.pn .pn-titel { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 900; color: var(--pn-tekst); min-width: 0; }
.pn .pn-titel small { display: block; font-size: 13px; font-weight: 700; color: var(--pn-grijs); }
.pn .pn-melding { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: var(--pn-ok-bg); color: var(--pn-ok); font-weight: 800; font-size: 14px; }
.pn .pn-melding.fout { background: var(--pn-mis-bg); color: var(--pn-mis); }
.pn .pn-uitleg, .pn .pn-leeg { margin: 6px 2px 10px; font-size: 14px; line-height: 1.4; color: var(--pn-grijs); }
.pn .pn-wijs { color: var(--pn-b); font-weight: 800; }
.pn .pn-paneel { position: relative; display: block; margin: 22px 0 12px; padding: 22px 12px 12px; background: var(--pn-zacht); border: 2px solid var(--pn-lijn);
  border-radius: 22px; box-shadow: 0 4px 0 var(--pn-lijn); }
.pn .pn-lint { position: absolute; top: -14px; left: 14px; max-width: calc(100% - 28px); padding: 4px 12px; border-radius: 12px; background: var(--pn-a); color: #fff;
  font-size: 13px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn .pn-k { min-height: 48px; padding: 8px 14px; border: 2px solid var(--pn-lijn); border-radius: 16px; background: #fff; color: var(--pn-b); font: inherit;
  font-size: 15px; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 var(--pn-lijn); }
.pn .pn-k.aan { background: var(--pn-a); border-color: var(--pn-b); color: #fff; box-shadow: 0 3px 0 var(--pn-b); }
.pn .pn-k.rood { color: var(--pn-mis); border-color: #F3B7B7; box-shadow: 0 3px 0 #F3B7B7; }
.pn .pn-k.rood.aan, .pn form .pn-k.rood { background: var(--pn-mis); color: #fff; border-color: #7A1515; box-shadow: 0 3px 0 #7A1515; }
.pn .pn-k.groot { width: 100%; min-height: 56px; font-size: 17px; }
.pn .pn-k.mini { min-height: 48px; min-width: 48px; padding: 4px 10px; font-size: 14px; }
.pn .pn-k:disabled { background: #EEE9F8; color: var(--pn-grijs); border-color: var(--pn-lijn); box-shadow: none; text-decoration: line-through; }
.pn .pn-schakel { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.pn .pn-schakel .pn-k { flex: 1 1 auto; }
.pn .pn-form { display: flex; flex-direction: column; gap: 10px; }
.pn .pn-rijform { flex-direction: row; align-items: flex-end; }
.pn .pn-rijform .pn-veld { flex: 1; min-width: 0; }
.pn .pn-veld { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; font-weight: 800; color: var(--pn-grijs); }
.pn .pn-inv { width: 100%; min-width: 0; min-height: 48px; padding: 8px 12px; border: 2px solid var(--pn-lijn); border-radius: 14px; background: #fff; color: var(--pn-tekst);
  font: inherit; font-size: 16px; font-weight: 700; }   /* 16 px: geen inzoomen bij focus */
.pn .pn-inv:focus { outline: 3px solid var(--pn-a); outline-offset: 1px; }
.pn .pn-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pn .pn-open summary { min-height: 48px; display: flex; align-items: center; color: var(--pn-b); font-weight: 900; font-size: 15px; cursor: pointer; }
.pn .pn-open[open] summary { margin-bottom: 6px; }
/* (1) rol en beroep, teams */
.pn .pn-rollen { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pn .pn-rol { display: flex; flex-direction: column; align-items: flex-start; min-height: 56px; padding: 8px 14px; text-align: left; font: inherit; color: var(--pn-tekst);
  background: #fff; border: 2px solid var(--pn-lijn); border-radius: 18px; box-shadow: 0 3px 0 var(--pn-lijn); cursor: pointer; }
.pn .pn-rol b { font-size: 16px; font-weight: 900; }
.pn .pn-rol small { font-size: 13px; color: var(--pn-grijs); font-weight: 700; }
.pn .pn-rol.aan { background: var(--pn-a); border-color: var(--pn-b); color: #fff; box-shadow: 0 3px 0 var(--pn-b); }
.pn .pn-rol.aan small { color: #fff; }
.pn .pn-rij { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; margin: 0 0 8px; padding: 8px 14px; text-align: left;
  font: inherit; color: var(--pn-tekst); background: #fff; border: 2px solid var(--pn-lijn); border-radius: 16px; cursor: pointer; }
.pn .pn-rij b { font-size: 16px; font-weight: 900; }
.pn .pn-rij small { font-size: 13px; color: var(--pn-grijs); font-weight: 700; }
.pn .pn-code { margin: 0 0 12px; padding: 12px; text-align: center; background: #fff; border: 2px dashed var(--pn-a); border-radius: 18px; }
.pn .pn-code b { display: block; margin: 4px 0; font-size: 28px; letter-spacing: 3px; font-weight: 900; color: var(--pn-b); }
.pn .pn-code small { display: block; font-size: 13px; color: var(--pn-grijs); font-weight: 700; }
.pn .pn-lid { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 4px 0; border-bottom: 1px solid var(--pn-lijn); }
.pn .pn-lid > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pn .pn-lid small { color: var(--pn-grijs); font-size: 13px; font-weight: 700; }
.pn .pn-laagkeus { flex: none; width: auto; max-width: 52%; }
.pn .pn-tabs { display: flex; gap: 6px; margin: 0 0 12px; }
.pn .pn-tab { flex: 1; min-width: 0; min-height: 48px; padding: 6px 4px; border: 2px solid var(--pn-lijn); border-radius: 16px; background: #fff; color: var(--pn-b);
  font: inherit; font-size: 15px; font-weight: 900; cursor: pointer; }
.pn .pn-tab.aan { background: var(--pn-a); border-color: var(--pn-b); color: #fff; }
/* (2) planner: bak en week */
.pn .pn-bak { display: flex; flex-wrap: wrap; gap: 8px; }
.pn .pn-bakje { display: flex; flex-direction: column; align-items: flex-start; min-height: 52px; max-width: 100%; padding: 6px 12px; font: inherit; text-align: left; color: var(--pn-tekst);
  background: #fff; border: 2px dashed var(--pn-a); border-radius: 16px; cursor: pointer; }
.pn .pn-bakje b { font-size: 15px; font-weight: 900; }
.pn .pn-bakje small { font-size: 12.5px; color: var(--pn-grijs); font-weight: 700; }
.pn .pn-bakje.aan { background: var(--pn-a); border-style: solid; color: #fff; }
.pn .pn-bakje.aan small { color: #fff; }
.pn .pn-weekrol { margin: 8px 0 12px; overflow-x: auto; overscroll-behavior-x: contain; }   /* op 360 px schuift de week zelf een stukje; de namen blijven staan */
.pn .pn-week { display: grid; grid-template-columns: 62px repeat(5, minmax(52px, 1fr)); gap: 3px; }
.pn .pn-wk-naam, .pn .pn-wk-hoek { position: sticky; left: 0; z-index: 1; background: #fff; }
.pn .pn-weekbalk { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 0; }
.pn .pn-weekbalk b { font-size: 15px; font-weight: 900; color: var(--pn-b); }
.pn .pn-weekbalk .pn-k { font-size: 22px; }
.pn .pn-wk-dag { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px; background: var(--pn-zacht); font-size: 13px; }
.pn .pn-wk-dag b { font-weight: 900; }
.pn .pn-wk-dag small { font-weight: 700; color: var(--pn-grijs); }
.pn .pn-wk-dag.nu { background: var(--pn-a); color: #fff; }
.pn .pn-wk-dag.nu small { color: #fff; }
.pn .pn-wk-naam { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 2px; font-size: 13px; }
.pn .pn-wk-naam b { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn .pn-wk-naam small { font-size: 11px; color: var(--pn-grijs); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn .pn-wk-cel { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 52px; padding: 0; background: #fff; border: 2px solid var(--pn-lijn); border-radius: 12px; }
.pn .pn-wk-cel.aan, .pn .pn-wk-cel.doel { border-color: var(--pn-a); }
.pn .pn-blok { position: relative; min-height: 48px; min-width: 0; padding: 4px 3px; font: inherit; font-size: 12px; font-weight: 900; line-height: 1.15; text-align: left;
  color: #fff; background: var(--pn-a); border: 0; border-radius: 9px; overflow: hidden; word-break: break-word; hyphens: auto; cursor: pointer; }
.pn .pn-blok i { display: block; font-style: normal; font-size: 11px; }
.pn .pn-blok.aan { outline: 3px solid var(--pn-tekst); outline-offset: -1px; }
.pn .pn-blok.pn-bs-klaar { background: var(--pn-ok); }
.pn .pn-blok.pn-bs-geblokkeerd { background: var(--pn-mis); }
.pn .pn-plus { flex: 1; min-height: 48px; min-width: 0; padding: 0; font: inherit; font-size: 20px; font-weight: 900; color: var(--pn-b); background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.pn .pn-wk-cel.doel .pn-plus { background: var(--pn-zacht); }
.pn .pn-blok ~ .pn-plus { flex: none; min-height: 48px; font-size: 16px; }   /* vol vakje: + blijft eronder, over de hele breedte */
.pn .pn-regel { margin: 0 0 10px; font-size: 15px; line-height: 1.4; }
/* (3) kaarten en voortgang */
.pn .pn-kaartrij { display: flex; flex-direction: column; gap: 4px; width: 100%; margin: 0 0 8px; padding: 10px 14px; text-align: left; font: inherit; color: var(--pn-tekst);
  background: #fff; border: 2px solid var(--pn-lijn); border-radius: 20px; box-shadow: 0 3px 0 var(--pn-lijn); cursor: pointer; }
.pn .pn-kaartrij small { font-size: 13px; color: var(--pn-grijs); font-weight: 700; }
.pn .pn-kr-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pn .pn-kr-kop b { font-size: 16px; font-weight: 900; }
.pn .pn-st { flex: none; padding: 3px 10px; border-radius: 12px; font-style: normal; font-size: 12.5px; font-weight: 900; background: var(--pn-zacht); color: var(--pn-b); }
.pn .pn-st-bezig { background: var(--pn-geel-bg); color: var(--pn-geel); }
.pn .pn-st-klaar { background: var(--pn-ok-bg); color: var(--pn-ok); }
.pn .pn-st-geblokkeerd { background: var(--pn-mis-bg); color: var(--pn-mis); }
.pn .pn-bol { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pn .pn-bol i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--pn-a); background: #fff; }
.pn .pn-bol i.af { background: #2BB585; border-color: var(--pn-ok); }
.pn .pn-bol i.vast { background: var(--pn-mis); border-color: var(--pn-mis); }
.pn .pn-bol b { margin-left: 4px; font-size: 13px; font-weight: 900; color: var(--pn-b); }
.pn .pn-kaart { padding: 14px; background: #fff; border: 2px solid var(--pn-lijn); border-radius: 26px; box-shadow: 0 5px 0 var(--pn-lijn); }
.pn .pn-kaart .pn-regel { margin: 8px 0 0; }
.pn .pn-missie { margin: 10px 0 0; padding: 8px; text-align: center; border-radius: 14px; background: var(--pn-ok-bg); color: var(--pn-ok); font-weight: 900; font-size: 16px; }
.pn .pn-stap { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 4px 0; border-bottom: 1px solid var(--pn-lijn); }
.pn .pn-stap-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pn .pn-stap-t b { font-size: 15px; font-weight: 900; }
.pn .pn-stap-t small { font-size: 13px; color: var(--pn-grijs); font-weight: 700; }
.pn .pn-stap.af .pn-stap-t b { color: var(--pn-ok); }
.pn .pn-stap.vast .pn-stap-t small { color: var(--pn-mis); }
.pn .pn-vink { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--pn-a); background: #fff; color: var(--pn-b); font: inherit; font-size: 18px;
  font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 var(--pn-lijn); }
.pn .pn-vink.aan { background: var(--pn-ok); border-color: var(--pn-ok); color: #fff; font-size: 24px; }
.pn .pn-hist { margin: 0; padding: 0 0 0 18px; font-size: 14px; line-height: 1.4; }
.pn .pn-hist li { margin: 0 0 8px; }
.pn .pn-hist small { display: block; color: var(--pn-grijs); font-size: 12.5px; font-weight: 700; }
.pn .pn-plan { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 4px 0; border-bottom: 1px solid var(--pn-lijn); font-size: 15px; }
.pn .pn-plan > b { flex: none; width: 64px; font-weight: 900; color: var(--pn-b); }
.pn .pn-plan > span { flex: 1; min-width: 0; }
.pn .pn-plan small { display: block; color: var(--pn-grijs); font-size: 13px; font-weight: 700; }
.pn .pn-werk { margin: 12px 0; }
.pn .pn-emo { font-size: 26px; line-height: 1; }
@media (min-width: 560px) {
  .pn .pn-rollen { grid-template-columns: 1fr 1fr; }
  .pn .pn-week { grid-template-columns: 110px repeat(5, minmax(52px, 1fr)); gap: 5px; }
  .pn .pn-blok { font-size: 13.5px; padding: 6px; }
}
@media (prefers-reduced-motion: reduce) { .pn * { transition: none !important; animation: none !important; } }