@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* SOEF Team-app — één opmaak voor alle pagina's.
   Kleuren: officiële SOEF-huisstijl (0D71B9, 29AAE1, E6D61A, F5EA13, FDF49E). */

:root{
  --blauw:#0D71B9; --blauw-donker:#0A5E9C; --blauw-zacht:#E4F1FA;
  --licht:#29AAE1; --geel:#F5EA13; --geel-donker:#E6D61A; --geel-zacht:#FDF49E;
  --inkt:#16222E; --zacht:#556575; --lijn:#DCE5EE; --grond:#F3F8FC; --wit:#FFFFFF;
  --groen:#1B7A43; --groen-zacht:#E7F6EC; --rood:#B42318; --rood-zacht:#FDECEA;
  --rond:18px; --rond-s:12px;
  --zijbalk:256px; --tabbalk:64px;
  --font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--grond); color:var(--inkt); font:15px/1.5 var(--font); -webkit-tap-highlight-color:transparent; }
a{ color:var(--blauw); text-decoration:none; }
a:hover{ color:var(--blauw-donker); }
button, input, select, textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--licht); outline-offset:2px; border-radius:6px; }
img{ max-width:100%; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- schil ---------- */
body.app{ padding-left:var(--zijbalk); min-height:100vh; }
body.app:not(.klaar) .app-main{ opacity:0; }
.app-main{ max-width:1240px; padding:36px 48px 56px; transition:opacity .15s ease; }

.zijbalk{ position:fixed; inset:0 auto 0 0; width:var(--zijbalk); background:var(--blauw); color:#fff;
  display:flex; flex-direction:column; padding:26px 16px 20px; overflow-y:auto; z-index:20; }
.zijbalk .logo{ height:54px; width:auto; align-self:flex-start; margin:0 0 28px 10px; }
.zijbalk .groepen{ display:flex; flex-direction:column; gap:20px; flex:1; }
.zijbalk .groep{ display:flex; flex-direction:column; gap:2px; }
.zijbalk .groep-kop{ font-size:11.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--geel-zacht); padding:0 12px; margin:0 0 4px; }
.zijbalk a.item{ display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border-radius:12px;
  color:#fff; font-size:14.5px; font-weight:500; }
.zijbalk a.item:hover{ background:var(--blauw-donker); color:#fff; }
.zijbalk a.item[aria-current="page"]{ background:var(--geel); color:var(--inkt); font-weight:600; }
.zijbalk a.item:focus-visible{ outline-color:var(--geel); }
.zijbalk .ik{ display:grid; grid-template-columns:38px minmax(0,1fr) 40px; align-items:center; gap:6px 12px; padding:12px; border-radius:14px; background:var(--blauw-donker); margin-top:20px; }
.zijbalk .ik .rol{ grid-column:1 / -1; line-height:1.4; }
.zijbalk .ik .wie{ flex:1; line-height:1.35; min-width:0; }
.zijbalk .ik .naam{ font-size:14px; font-weight:600; }
.zijbalk .ik .rol{ font-size:12px; color:var(--geel-zacht); }
.zijbalk .ik button{ width:40px; height:40px; border:0; border-radius:10px; background:transparent; color:#fff; display:grid; place-items:center; cursor:pointer; }
.zijbalk .ik button:hover{ background:rgba(255,255,255,.12); }

.mobiel-kop, .tabbalk{ display:none; }

.avatar{ width:38px; height:38px; border-radius:50%; background:var(--geel); color:var(--inkt); display:grid; place-items:center;
  font-weight:700; font-size:14px; flex:none; }
.avatar.blauw{ background:var(--blauw-zacht); color:var(--blauw); }

/* ---------- mobiel ---------- */
@media (max-width: 900px){
  body.app{ padding-left:0; padding-bottom:calc(var(--tabbalk) + env(safe-area-inset-bottom) + 12px); }
  .zijbalk{ display:none; }
  .app-main{ padding:18px 16px 32px; }
  .mobiel-kop{ display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; z-index:20;
    background:var(--blauw); padding:calc(env(safe-area-inset-top) + 10px) 16px 10px; min-height:60px; }
  .mobiel-kop .logo{ height:34px; width:auto; }
  .mobiel-kop a.avatar{ width:38px; height:38px; }
  .tabbalk{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--wit); border-top:1px solid var(--lijn);
    padding-bottom:env(safe-area-inset-bottom); }
  .tabbalk a{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0 6px; min-height:var(--tabbalk);
    color:var(--zacht); font-size:11.5px; font-weight:500; }
  .tabbalk a .pil{ width:56px; height:30px; border-radius:15px; display:grid; place-items:center; }
  .tabbalk a[aria-current="page"]{ color:var(--inkt); font-weight:600; }
  .tabbalk a[aria-current="page"] .pil{ background:var(--geel); }
}

/* ---------- paginakop ---------- */
.pagina-kop{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.pagina-kop .boven{ font-size:13.5px; color:var(--zacht); margin-bottom:4px; }
.pagina-kop h1{ margin:0; font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.15; }
.pagina-kop .acties{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
@media (max-width: 900px){
  .pagina-kop{ margin-bottom:16px; align-items:flex-start; }
  .pagina-kop h1{ font-size:25px; letter-spacing:-.4px; }
  .pagina-kop .boven{ font-size:13px; margin-bottom:2px; }
}

/* ---------- bouwstenen ---------- */
.kaart{ background:var(--wit); border:1px solid var(--lijn); border-radius:var(--rond); padding:20px 22px; }
.kaart > h2, .kaart-kop h2{ margin:0; font-size:16px; font-weight:600; }
.kaart-kop{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
@media (max-width: 900px){ .kaart{ padding:16px; } }

.knop{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 18px; border-radius:var(--rond-s);
  border:0; background:var(--blauw); color:#fff; font-size:14.5px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; }
.knop:hover{ background:var(--blauw-donker); color:#fff; }
.knop.tweede{ background:var(--wit); color:var(--inkt); border:1px solid var(--lijn); }
.knop.tweede:hover{ background:var(--grond); color:var(--inkt); }
.knop.geel{ background:var(--geel); color:var(--inkt); }
.knop.geel:hover{ background:var(--geel-donker); }
.knop.gevaar{ background:var(--wit); color:var(--rood); border:1px solid #F3C7C2; }
.knop.klein{ min-height:38px; padding:0 14px; font-size:13.5px; }
.knop.icoon{ width:46px; padding:0; }
.knop[disabled]{ opacity:.55; cursor:default; }

.segment{ display:inline-flex; gap:2px; padding:4px; border-radius:var(--rond-s); background:var(--wit); border:1px solid var(--lijn); max-width:100%; overflow-x:auto; }
.segment button{ border:0; background:transparent; color:var(--zacht); min-height:36px; padding:0 14px; border-radius:9px; font-size:13.5px; font-weight:500;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.segment button[aria-pressed="true"]{ background:var(--blauw); color:#fff; font-weight:600; }
.segment button[aria-pressed="true"] .stip{ background:#fff !important; }

.stip{ width:10px; height:10px; border-radius:50%; flex:none; display:inline-block; }
.stip.s8{ width:8px; height:8px; }

.label{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; background:var(--grond); color:var(--inkt);
  padding:3px 10px; border-radius:20px; white-space:nowrap; }
.label.pin{ background:var(--geel-zacht); font-weight:600; }
.label.rol-beheerder{ background:var(--geel); font-weight:600; }
.label.rol-locatieverantwoordelijke{ background:var(--blauw-zacht); color:var(--blauw); font-weight:600; }
.label.rol-medewerker{ color:var(--zacht); }
.label.uit{ background:#EDEFF2; color:var(--zacht); }

.tag{ font-size:10.5px; font-weight:700; letter-spacing:.5px; padding:2px 7px; border-radius:6px; }
.tag.vso{ background:var(--blauw-zacht); color:var(--blauw); }
.tag.ziek{ background:var(--rood-zacht); color:var(--rood); }
.tag.inval{ background:var(--groen-zacht); color:var(--groen); }

.melding{ font-size:14px; padding:12px 14px; border-radius:var(--rond-s); }
.melding.fout{ background:var(--rood-zacht); color:var(--rood); }
.melding.goed{ background:var(--groen-zacht); color:var(--groen); }
.melding.info{ background:var(--geel-zacht); color:var(--inkt); }

.leeg{ padding:32px 16px; text-align:center; color:var(--zacht); border:1px dashed var(--lijn); border-radius:var(--rond); background:var(--wit); }
.laden{ color:var(--zacht); font-size:14px; padding:12px 0; }

/* formulieren */
.veld{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.veld > span, .veld > label{ font-size:13.5px; font-weight:600; }
.veld input, .veld select, .veld textarea{ width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--lijn); border-radius:10px; background:var(--wit); }
.veld textarea{ min-height:120px; resize:vertical; line-height:1.5; }
.veld .hint{ font-size:12.5px; color:var(--zacht); font-weight:400; }
.keuze{ display:flex; align-items:center; gap:12px; min-height:46px; padding:8px 14px; border:1px solid var(--lijn); border-radius:var(--rond-s); cursor:pointer; background:var(--wit); }
.keuze input{ width:20px; height:20px; accent-color:var(--blauw); flex:none; margin:0; }
.keuze:has(input:checked){ border-color:var(--blauw); background:var(--blauw-zacht); }
.keuze .tekst{ flex:1; line-height:1.4; }
.keuze .tekst b{ display:block; font-size:14px; font-weight:600; }
.keuze .tekst small{ display:block; font-size:12.5px; color:var(--zacht); }
.keuzes{ display:flex; flex-direction:column; gap:8px; }

/* sheet (dialoog): onderin op mobiel, midden op laptop */
dialog.sheet{ border:0; padding:0; border-radius:20px; width:min(560px, calc(100% - 32px)); max-height:calc(100% - 48px);
  background:var(--wit); color:var(--inkt); box-shadow:0 30px 60px -20px rgba(10,40,70,.45); }
dialog.sheet::backdrop{ background:rgba(10,30,50,.5); }
dialog.sheet .sheet-kop{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px 6px; }
dialog.sheet .sheet-kop h2{ margin:0; font-size:19px; }
dialog.sheet .sheet-body{ padding:10px 20px 20px; }
dialog.sheet .sheet-voet{ display:flex; gap:10px; padding:0 20px 20px; }
dialog.sheet .sheet-voet .knop{ flex:1; }
.sluit{ width:40px; height:40px; border:0; border-radius:10px; background:var(--grond); display:grid; place-items:center; cursor:pointer; color:var(--inkt); }
@media (max-width: 900px){
  dialog.sheet{ width:100%; max-width:100%; margin:auto 0 0; border-radius:20px 20px 0 0; max-height:92%; padding-bottom:env(safe-area-inset-bottom); }
}

/* toast */
.toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--inkt); color:#fff; padding:12px 18px; border-radius:12px;
  font-size:14px; z-index:50; box-shadow:0 12px 30px -10px rgba(0,0,0,.4); }
@media (max-width: 900px){ .toast{ bottom:calc(var(--tabbalk) + env(safe-area-inset-bottom) + 14px); } }

/* ---------- lijst (Meer-pagina) ---------- */
.lijst{ background:var(--wit); border:1px solid var(--lijn); border-radius:var(--rond); overflow:hidden; }
.lijst a, .lijst button.rij{ display:flex; align-items:center; gap:14px; min-height:62px; padding:8px 14px; color:var(--inkt); border:0; border-top:1px solid var(--lijn);
  width:100%; background:none; text-align:left; cursor:pointer; }
.lijst > :first-child{ border-top:0; }
.lijst .ico{ width:38px; height:38px; border-radius:10px; background:var(--blauw-zacht); color:var(--blauw); display:grid; place-items:center; flex:none; }
.lijst .tekst{ flex:1; line-height:1.35; }
.lijst .tekst b{ display:block; font-size:15px; font-weight:600; }
.lijst .tekst small{ display:block; font-size:12.5px; color:var(--zacht); }
.lijst .pijl{ color:#9AA8B6; }
.sectie-kop{ font-size:11.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--zacht); margin:0 4px 6px; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

/* ---------- offline-balk (versie 6) ---------- */
.offline-balk{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#FFF4E5; color:#6B3A00; border:1px solid #F3D3A8;
  border-radius:var(--rond-s); padding:10px 12px 10px 14px; margin-bottom:18px; font-size:13.5px; line-height:1.4; }
.offline-balk > span:nth-child(2){ flex:1; min-width:180px; }
.offline-balk .knop{ min-height:34px; }
.stip-rood{ width:8px; height:8px; border-radius:50%; background:#D9480F; flex:none; }

/* ---------- verlof en ziek (versie 6) ---------- */
.label.status-aangevraagd{ background:var(--geel-zacht); color:#6B5E00; font-weight:600; }
.label.status-goedgekeurd{ background:var(--groen-zacht); color:var(--groen); font-weight:600; }
.label.status-afgewezen{ background:var(--rood-zacht); color:var(--rood); font-weight:600; }
.label.status-ingetrokken{ background:var(--grond); color:var(--zacht); }
.tag.aangevraagd{ background:var(--geel-zacht); color:#6B5E00; }

.aanvraag{ border:1px solid var(--lijn); border-radius:var(--rond-s); padding:12px 14px; display:flex; flex-direction:column; gap:8px; background:var(--wit); }
.aanvraag.open{ border-color:var(--geel-donker); box-shadow:inset 3px 0 0 var(--geel-donker); }
.aanvraag .kop{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.aanvraag .kop b{ font-size:14.5px; }
.aanvraag .kop .label{ margin-left:auto; }
.aanvraag .wat{ font-size:13.5px; color:var(--zacht); line-height:1.45; }
.aanvraag .wat q{ color:var(--inkt); font-style:italic; }
.aanvraag .gevolg{ font-size:13px; background:var(--grond); border-radius:10px; padding:8px 10px; line-height:1.5; }
.aanvraag .gevolg .let{ color:var(--rood); font-weight:600; }
.aanvraag .knoppen{ display:flex; gap:8px; flex-wrap:wrap; }
.aanvraag .knoppen .knop{ flex:1; min-width:120px; }
.aanvraag textarea{ width:100%; min-height:60px; border:1px solid var(--lijn); border-radius:10px; padding:8px 10px; font-size:14px; resize:vertical; }
.aanvragen{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.aanvragen-kop{ font-size:12px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--zacht); margin:4px 0 8px; }

.ziek-balk{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--rood-zacht); color:var(--rood); border-radius:var(--rond-s);
  padding:12px 14px; font-size:14px; }
.ziek-balk > span{ flex:1; min-width:180px; color:var(--inkt); }
.ziek-balk .knop{ min-height:38px; }

/* meldingen-kaart op prikbord en Meer */
.meldingen-kaart{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.meldingen-kaart .ico{ width:42px; height:42px; border-radius:12px; background:var(--blauw-zacht); color:var(--blauw); display:grid; place-items:center; flex:none; }
.meldingen-kaart .tekst{ flex:1; min-width:200px; line-height:1.45; font-size:14px; }
.meldingen-kaart .tekst b{ display:block; font-size:15px; }
.meldingen-kaart .tekst small{ color:var(--zacht); font-size:13px; }

/* ---------- pasfoto's (js/team.js) ---------- */
.pasfoto{ --s:32px; position:relative; width:var(--s); height:var(--s); border-radius:50%; overflow:hidden; flex:none;
  display:inline-grid; place-items:center; background:var(--blauw-zacht); color:var(--blauw); font-weight:700;
  font-size:calc(var(--s) * .36); line-height:1; vertical-align:middle; }
.pasfoto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 25%; }
.pasfoto.grijs img{ filter:grayscale(1) contrast(.6) brightness(1.25); }
.pasfoto.grijs{ background:#EDF0F3; color:#8494A3; }
.avatar > .pasfoto{ width:100%; height:100%; background:inherit; color:inherit; font-size:inherit; }