/* Periodekalender (plan cijfers per tijdvak §5, 1-11-2026): de periodeknop met kalendericoon en het venster
   met snelle keuzes, start/einde, maandkalender en vergelijken. Eén onderdeel op het board (#periodeLabel)
   en in de dashboardkop (.cd-kiezer). Huisstijl: paars #4101df, lila #ededff, lijn #e4e4ee, DM Sans. */

.per-nav{position:relative;}
.per-kal{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--lijn,#e4e4ee);background:#fff;border-radius:8px;padding:5px 10px;cursor:pointer;font:inherit;color:#141414;}
.per-kal:hover,.per-kal[aria-expanded="true"]{border-color:#c7c7f9;background:#faf9ff;}
.per-kal:focus-visible{outline:2px solid #4101df;outline-offset:2px;}
.per-kal svg{width:16px;height:16px;flex:none;color:#4101df;}
.per-kal .per-tekst{flex:0 1 auto;}
.periode-label .per-nav.geen,.cd-kiezer .per-nav.geen{justify-content:stretch;}
/* het dashboard verborg de nav bij Alles; nu is de periodeknop ook daar de ingang */
body.db-schil #cijferOverlay .dbp-balk .cd-kiezer .per-nav.geen{display:flex;}
body.db-schil #cijferOverlay .dbp-balk .cd-kiezer .per-kal{border-color:#e6e4f4;padding:6px 12px;}

.per-vgl-aan{font-size:11.5px;color:#4101df;text-align:center;}
.per-melding{font-size:11.5px;line-height:1.45;color:#6b6b74;background:#faf9ff;border:1px solid #ededff;border-radius:8px;padding:7px 9px;}
.cd-melding{margin:10px 0 0;font-size:13px;line-height:1.5;color:#6b6b74;background:#faf9ff;border:1px solid #ededff;border-radius:12px;padding:10px 14px;}

/* het venster (.pkal: .pk en .pk-grid zijn de patternkaarten in funnels-overzicht.css) */
.pkal{position:absolute;top:calc(100% + 8px);right:0;z-index:300;display:flex;width:max-content;max-width:min(560px,calc(100vw - 32px));background:#fff;border:1px solid #e4e4ee;border-radius:14px;box-shadow:0 18px 48px rgba(20,10,60,.16),0 2px 6px rgba(20,10,60,.06);font-family:"DM Sans",system-ui,sans-serif;font-size:13px;color:#141414;text-align:left;cursor:default;}
.pkal[hidden]{display:none;}
.pk-links{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:14px;background:#faf9ff;border-radius:14px 0 0 14px;border-right:1px solid #ededff;}
.pk-snel{display:flex;flex-direction:column;gap:2px;}
.pk-snel button{border:0;background:none;border-radius:8px;padding:7px 10px;text-align:left;font:500 13px/1.3 "DM Sans",system-ui,sans-serif;color:#141414;cursor:pointer;white-space:nowrap;}
.pk-snel button:hover{background:#ededff;color:#4101df;}
.pk-snel button.aan{background:#4101df;color:#fff;font-weight:600;}
.pk-snel button:focus-visible,.pkal button:focus-visible,.pkal input:focus-visible{outline:2px solid #4101df;outline-offset:1px;}

.pk-vgl{display:flex;align-items:center;gap:9px;white-space:nowrap;border:0;background:none;padding:8px 4px 0;border-top:1px solid #ededff;text-align:left;font:500 12.5px/1.35 "DM Sans",system-ui,sans-serif;color:#141414;cursor:pointer;}
.pk-vgl[disabled]{color:#9a9aa6;cursor:not-allowed;}
.pk-vgl small{display:block;font-size:11.5px;color:#6b6b74;font-weight:400;margin-top:1px;}
.pk-schakel{flex:none;position:relative;width:32px;height:18px;border-radius:20px;background:#d8d6e6;transition:background .15s;}
.pk-schakel::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s;}
.pk-vgl.aan .pk-schakel{background:#4101df;}
.pk-vgl.aan .pk-schakel::after{transform:translateX(14px);}

.pk-rechts{display:flex;flex-direction:column;gap:12px;padding:16px 16px 14px;width:300px;box-sizing:border-box;}
.pk-velden{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pk-velden label{display:flex;flex-direction:column;gap:4px;}
.pk-velden span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#6b6b74;}
.pk-velden input{width:100%;box-sizing:border-box;border:1px solid #e4e4ee;border-radius:8px;padding:7px 9px;font:500 13px "DM Sans",system-ui,sans-serif;color:#141414;background:#fff;}
.pk-velden input:focus{border-color:#4101df;outline:none;box-shadow:0 0 0 3px #ededff;}
.pk-velden input.fout{border-color:#f2775f;}

.pk-maandkop{display:flex;align-items:center;gap:2px;}
.pk-maandkop b{flex:1;font-size:14px;font-weight:700;}
.pk-mnd{width:28px;height:28px;border:0;border-radius:8px;background:none;color:#4101df;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;}
.pk-mnd:hover{background:#ededff;}
.pk-mnd svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

.pkal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px;}
.pk-wd{font-size:11px;font-weight:600;color:#6b6b74;text-align:center;padding:2px 0 6px;}
.pk-dag{position:relative;height:32px;border:0;background:none;font:500 12.5px "DM Sans",system-ui,sans-serif;color:#141414;cursor:pointer;padding:0;}
.pk-dag:hover{background:#ededff;border-radius:8px;}
.pk-dag.buiten{color:#b3b3c2;}
.pk-dag.in{background:#ededff;border-radius:0;color:#2a0197;}
.pk-dag.van{border-radius:8px 0 0 8px;}
.pk-dag.tot{border-radius:0 8px 8px 0;}
.pk-dag.van.tot{border-radius:8px;}
.pk-dag.van,.pk-dag.tot{background:#4101df;color:#fff;font-weight:700;}
.pk-dag.vandaag{font-weight:700;box-shadow:inset 0 0 0 1px #c7c7f9;border-radius:8px;}
.pk-dag.met::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#4101df;opacity:.55;}
.pk-dag.van.met::after,.pk-dag.tot.met::after{background:#fff;opacity:.8;}

.pk-voet{display:flex;align-items:center;gap:8px;border-top:1px solid #ededff;padding-top:12px;}
.pk-hint{flex:1;font-size:12px;color:#6b6b74;}
.pk-annuleer,.pk-toepas{border-radius:8px;padding:7px 14px;font:600 13px "DM Sans",system-ui,sans-serif;cursor:pointer;}
.pk-annuleer{border:1px solid #e4e4ee;background:#fff;color:#141414;}
.pk-annuleer:hover{background:#f3f2f8;}
.pk-toepas{border:0;background:#4101df;color:#fff;}
.pk-toepas:hover{background:#2a0197;}
.pk-toepas[disabled]{background:#c7c7f9;cursor:not-allowed;}

/* telefoon: het venster over de volle breedte, de snelle keuzes als rij bovenaan */
@media (max-width:600px){
  .pkal{position:fixed;left:16px;right:16px;top:72px;max-width:none;width:auto;flex-direction:column;max-height:calc(100vh - 96px);overflow:auto;}
  .pk-links{border-right:0;border-bottom:1px solid #ededff;border-radius:14px 14px 0 0;min-width:0;}
  .pk-snel{flex-direction:row;flex-wrap:wrap;gap:4px;}
  .pk-snel button{border:1px solid #e4e4ee;background:#fff;padding:6px 10px;}
  .pk-rechts{width:auto;}
}