/* ================================================================
   Hero Academy — app-schil 2.0 ("Hero Flight")
   Uitschuifbare navy zijbalk + licht warm werkvlak.
   Agenda in "soft-card"-stijl (Google Calendar 2025 × Structured).
   ================================================================ */

:root{
  --zb-breed:264px;
  --zb-smal:64px;
  --vlak:#f5f5f9;
  --kaart-schaduw:0 2px 14px rgba(7,56,137,.07);
  --kaart-schaduw-hover:0 12px 28px rgba(7,56,137,.16);
}
@keyframes appIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

body{background:var(--vlak);}
body.authed{padding-left:var(--zb-breed); transition:padding-left .25s cubic-bezier(.2,.7,.3,1);}
body.authed.zb-smal{padding-left:var(--zb-smal);}

/* ---------- zijbalk: drie standen (breed / rail / peek) ---------- */
.zijbalk{position:fixed; left:0; top:0; bottom:0; width:var(--zb-breed); z-index:80; display:none;
  flex-direction:column; background:linear-gradient(180deg,#041d47 0%,#073889 78%,#0a4aa0 100%); color:#fff; padding:20px 14px 14px;
  transition:width .25s cubic-bezier(.2,.7,.3,1); overflow:hidden;}
body.authed .zijbalk{display:flex;}
body.zb-smal .zijbalk{width:var(--zb-smal); padding:20px 8px 14px;}
/* peek (zb-peek zet JS op de body zodra de muis de rail raakt — niet direct na het
   inklappen, anders lijkt de klik op de inklap-knop niets te doen) */
body.zb-smal.zb-peek .zijbalk{width:var(--zb-breed); padding:20px 14px 14px; box-shadow:14px 0 44px rgba(4,29,71,.35);}
/* rail: labels/kopjes/widget verbergen, behalve tijdens peek */
body.zb-smal:not(.zb-peek) .zijbalk .nlbl,
body.zb-smal:not(.zb-peek) .zijbalk .sectiekop,
body.zb-smal:not(.zb-peek) .zijbalk .merk small,
body.zb-smal:not(.zb-peek) .zijbalk .rolbadge,
body.zb-smal:not(.zb-peek) .zijbalk .widget,
body.zb-smal:not(.zb-peek) .zijbalk .wie .wtxt,
body.zb-smal:not(.zb-peek) .zijbalk #zb-rolwissel,
body.zb-smal:not(.zb-peek) .zijbalk #zb-taalwissel{display:none;}
body.zb-smal:not(.zb-peek) .zijbalk .merk{text-align:center; padding:0 0 14px;}
body.zb-smal:not(.zb-peek) .zijbalk .merk .merk-logo{width:40px; margin:0 auto;}
body.zb-smal:not(.zb-peek) .zijbalk nav button, body.zb-smal:not(.zb-peek) .zijbalk .uitlog{justify-content:center; padding:12px 0;}
body.zb-smal:not(.zb-peek) .zijbalk .wie{justify-content:center; padding-bottom:10px;}
/* teller-bolletje in rail-stand: klein, rechtsboven óp het icoontje in plaats van ernaast */
body.zb-smal:not(.zb-peek) .zijbalk nav button .teller{position:absolute; top:3px; right:5px; margin:0;
  padding:1px 6px; font-size:.6rem; line-height:1.4; box-shadow:0 2px 6px rgba(0,0,0,.35);}
/* tooltips in rail-stand */
body.zb-smal:not(.zb-peek) .zijbalk [data-tip]{position:relative;}
body.zb-smal:not(.zb-peek) .zijbalk [data-tip]:hover::after{content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background:#041d47; color:#fff; font-size:.76rem; font-weight:700; padding:6px 12px; border-radius:9px; white-space:nowrap; box-shadow:0 8px 20px rgba(0,0,0,.35); z-index:99;}

.zijbalk .klap{position:absolute; right:-1px; top:64px; width:22px; height:44px; border:none; border-radius:10px 0 0 10px;
  background:rgba(255,255,255,.12); color:#d3e6f0; font-size:.95rem; font-weight:800; cursor:pointer; z-index:5; transition:background .15s;}
.zijbalk .klap:hover{background:var(--oranje); color:#fff;}
.zijbalk .merk{padding:2px 10px 6px; white-space:nowrap;}
.zijbalk .merk .merk-logo{display:block; width:96px; height:auto;}
.zijbalk .merk small{display:block; font-family:'Exo',sans-serif; font-size:.64rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#9ecae2; margin-top:4px;}
.zijbalk .rolbadge{margin:2px 10px 10px; display:inline-block; align-self:flex-start; background:rgba(255,255,255,.12); color:#d3e6f0; font-family:'Exo',sans-serif; font-weight:800; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; border-radius:999px; padding:4px 11px; white-space:nowrap;}
.zijbalk nav{display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; overflow-x:hidden;}
.zijbalk .sectie{margin-bottom:10px;}
.zijbalk .sectiekop{font-family:'Exo',sans-serif; font-size:.62rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#4197cb; padding:8px 14px 6px; white-space:nowrap;}
.zijbalk nav button{display:flex; align-items:center; gap:12px; width:100%; border:none; background:transparent; color:#d3e6f0;
  font-family:'Source Sans 3',sans-serif; font-size:.93rem; font-weight:600; text-align:left; padding:11px 14px; border-radius:12px; cursor:pointer; transition:background .15s, color .15s, transform .12s; position:relative; white-space:nowrap;}
.zijbalk nav button:hover{background:rgba(255,255,255,.09); color:#fff; transform:translateX(2px);}
.zijbalk nav button.actief{background:linear-gradient(135deg,#f79c44,#f46015); color:#fff; box-shadow:0 6px 16px rgba(244,96,21,.4), inset 0 -3px 0 rgba(0,0,0,.15);}
.zijbalk nav button .nico{font-size:1.1rem; width:24px; text-align:center; flex-shrink:0; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}
.zijbalk nav button .teller{margin-left:auto; background:var(--oranje); color:#fff; font-family:'Exo',sans-serif; font-weight:800; font-size:.66rem; border-radius:999px; padding:2px 8px;}
.zijbalk nav button.actief .teller{background:rgba(255,255,255,.25);}

/* leer-widget onderin */
.zijbalk .widget{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:12px; margin-bottom:12px;}
.zijbalk .widget .wrij{display:flex; gap:6px; margin-bottom:8px;}
.zijbalk .widget .wchip{flex:1; text-align:center; background:rgba(255,255,255,.1); border-radius:9px; padding:6px 2px; font-family:'Exo',sans-serif; font-weight:800; font-size:.76rem; white-space:nowrap;}
.zijbalk .widget .wles{display:flex; align-items:center; flex-wrap:wrap; gap:2px 8px; width:100%; border:none; text-align:left; background:linear-gradient(135deg,#f79c44,#f46015); border-radius:12px; padding:9px 12px; color:#fff; cursor:pointer; box-shadow:inset 0 -3px 0 rgba(0,0,0,.16); transition:transform .12s;}
.zijbalk .widget .wles:hover{transform:translateY(-2px);}
.zijbalk .widget .wl1{font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fde1b6; width:100%;}
.zijbalk .widget .wl2{font-family:'Exo',sans-serif; font-weight:800; font-size:.8rem; line-height:1.2; flex:1; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.zijbalk .widget .wspeel{font-size:1rem;}

.zijbalk .voet{border-top:1px solid rgba(255,255,255,.14); padding-top:12px;}
.zijbalk .wie{display:flex; align-items:center; gap:10px; padding:0 6px 10px;}
.zijbalk .wie .avatar{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#f79c44,#f46015); display:grid; place-items:center; font-family:'Exo',sans-serif; font-weight:800; font-size:.8rem; flex-shrink:0;}
.zijbalk .wie b{display:block; font-size:.86rem; line-height:1.15; white-space:nowrap;}
.zijbalk .wie small{color:#9ecae2; font-size:.7rem; font-weight:600; white-space:nowrap;}
#zb-rolwissel{padding:0 2px 10px;}
#zb-rolwissel .rolwissel{display:flex; border:1px solid rgba(255,255,255,.2); border-radius:11px; overflow:hidden;}
#zb-rolwissel .rolwissel button{flex:1; border:none; background:transparent; color:#d3e6f0; font-size:.62rem; font-weight:700; padding:6px 2px; cursor:pointer;}
#zb-rolwissel .rolwissel button.active{background:var(--oranje); color:#fff;}
/* taalkeuze (NL/EN/FR) in de zijbalk-voet, zelfde stijl als de rolwissel */
#zb-taalwissel{padding:0 2px 10px;}
#zb-taalwissel .rolwissel{display:flex; border:1px solid rgba(255,255,255,.2); border-radius:11px; overflow:hidden;}
#zb-taalwissel .rolwissel button{flex:1; border:none; background:transparent; color:#d3e6f0; font-size:.62rem; font-weight:700; padding:6px 2px; cursor:pointer; letter-spacing:.06em;}
#zb-taalwissel .rolwissel button.active{background:var(--oranje); color:#fff;}
.zijbalk .uitlog{display:flex; align-items:center; gap:12px; width:100%; border:none; background:transparent; color:#9ecae2; font-weight:700; font-size:.85rem; border-radius:12px; padding:10px 14px; cursor:pointer; transition:background .15s, color .15s; white-space:nowrap;}
.zijbalk .uitlog:hover{background:rgba(255,255,255,.09); color:#fff;}

/* ---------- topbar weg: alles zit in de zijbalk ---------- */
body.authed .topbar{display:none;}

/* ---------- werkvlak ---------- */
main{max-width:min(1760px, 100%); padding:34px clamp(20px, 3vw, 52px) 80px;}
.scherm.open{animation:appIn .35s ease both;}
.schermkop h1{font-size:1.8rem; letter-spacing:-.015em;}
.schermlabel{background:transparent; color:var(--blauw-medium); padding:4px 0; letter-spacing:.14em;}
.schermlabel .code{color:var(--oranje);}
.backbtn{background:#fff; border-color:transparent; box-shadow:var(--kaart-schaduw);}
.backbtn:hover{border-color:var(--blauw-soft); transform:translateX(-2px);}
.paneel, .lichting-card, .formkaart, .detailkaart, .zoeker, .sug-item, .update-item, .beoordeel-item, .mw-functie, .rooster-wrap{
  border:none; border-radius:18px; box-shadow:var(--kaart-schaduw);}
.paneel h3{color:var(--oranje); letter-spacing:.12em;}
.oranjebtn{box-shadow:inset 0 -3px 0 rgba(0,0,0,.16); transition:transform .12s, filter .12s;}
.oranjebtn:active{transform:translateY(2px); box-shadow:inset 0 -1px 0 rgba(0,0,0,.16);}
.toast{border-radius:14px;}

/* dubbelingen verbergen: één thuis per taak (elementen blijven als proxy bestaan) */
#s7-agenda{display:none;}
#S1 .masterknop{display:none !important;}

/* ---------- Mijn academy: held-header ---------- */
#s7-held{margin:6px 0 18px;}
.held{position:relative; overflow:hidden; border-radius:22px; padding:30px 32px; color:#fff; isolation:isolate;
  background:linear-gradient(125deg,#041d47 0%,#062e6f 40%,#0a4aa0 100%); box-shadow:0 16px 38px rgba(7,56,137,.25);
  display:flex; gap:26px; align-items:center; flex-wrap:wrap;}
.held::before{content:""; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(rgba(255,255,255,.12) 1.3px, transparent 1.3px); background-size:17px 17px; opacity:.5;}
.held::after{content:""; position:absolute; right:-70px; top:-80px; width:300px; height:300px; border-radius:50%; z-index:-1; background:radial-gradient(circle,rgba(244,96,21,.38),transparent 68%); animation:lrnAurora 12s ease-in-out infinite;}
.held .groet{flex:1; min-width:240px;}
.held .groet h2{font-size:1.7rem; font-weight:800; letter-spacing:-.01em;}
.held .groet p{color:#d3e6f0; font-size:.92rem; margin-top:3px;}
.held .verder{width:300px; max-width:100%; border:none; border-radius:18px; overflow:hidden; cursor:pointer; text-align:left; color:#fff;
  background-size:cover; background-position:center; min-height:150px; display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow:0 12px 28px rgba(0,0,0,.35); transition:transform .16s cubic-bezier(.2,.7,.3,1.4), box-shadow .16s; position:relative;}
.held .verder:hover{transform:translateY(-4px) scale(1.02); box-shadow:0 18px 38px rgba(0,0,0,.45);}
.held .verder .vlbl{font-family:'Exo',sans-serif; font-weight:800; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#fde1b6; padding:0 16px;}
.held .verder .vtit{font-family:'Exo',sans-serif; font-weight:800; font-size:1.05rem; line-height:1.25; padding:2px 16px 0; text-shadow:0 1px 8px rgba(0,0,0,.5);}
.held .verder .vknop{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#f79c44,#f46015); font-family:'Exo',sans-serif; font-weight:800; font-size:.85rem; border-radius:999px; padding:9px 18px; margin:10px 16px 14px; box-shadow:inset 0 -3px 0 rgba(0,0,0,.18); align-self:flex-start;}

/* ---------- E-learning hub (S18) ---------- */
#S18 .schermkop p.intro{font-size:.95rem;}
.hub-verder{display:flex; flex-direction:column; justify-content:flex-end; width:100%; min-height:190px; border:none; border-radius:22px; overflow:hidden; cursor:pointer; text-align:left; color:#fff; margin:8px 0 22px;
  background-size:cover; background-position:center; box-shadow:0 16px 38px rgba(7,56,137,.25); transition:transform .16s cubic-bezier(.2,.7,.3,1.3), box-shadow .16s; position:relative;}
.hub-verder:hover{transform:translateY(-4px); box-shadow:0 22px 48px rgba(7,56,137,.35);}
.hub-verder .vlbl{font-family:'Exo',sans-serif; font-weight:800; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#fde1b6; padding:0 24px;}
.hub-verder .vtit{font-family:'Exo',sans-serif; font-weight:800; font-size:1.5rem; line-height:1.25; padding:4px 24px 0; text-shadow:0 1px 10px rgba(0,0,0,.5); max-width:30ch;}
.hub-verder .vknop{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#f79c44,#f46015); font-family:'Exo',sans-serif; font-weight:800; font-size:.92rem; border-radius:999px; padding:11px 22px; margin:12px 24px 20px; box-shadow:inset 0 -3px 0 rgba(0,0,0,.18); align-self:flex-start;}
.lmsx.groot{grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px;}
.lmsx.groot .lmsx-kaart{min-height:220px;}
.lmsx.groot .lmsx-kaart .titel{font-size:1.12rem;}
.lmsx.groot .lmsx-kaart .sub{font-size:.92rem;}

/* ---------- Lichtingenbord ---------- */
#s1-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:8px 0 20px;}
#s1-stats .stat{background:#fff; border-radius:18px; padding:18px 20px; box-shadow:var(--kaart-schaduw); animation:appIn .4s both;}
#s1-stats .stat b{display:block; font-family:'Exo',sans-serif; font-size:1.7rem; color:var(--blauw); line-height:1.1;}
#s1-stats .stat span{font-size:.76rem; color:var(--blauw-medium); font-weight:600;}
#s1-stats .stat.oranje b{color:var(--oranje);}
.lichting-card .kop{background:linear-gradient(120deg,#062e6f,#0a4aa0);}
.zoeker{padding:18px 22px;}

/* ================= Weekagenda: soft-card tijd-as recept ================= */
.weektabs{gap:10px; align-items:stretch;}
.weektabs button{border:none; background:#fff; box-shadow:var(--kaart-schaduw); border-radius:13px; padding:10px 16px; transition:transform .13s, box-shadow .13s;}
.weektabs button:hover{transform:translateY(-2px);}
.weektabs button.active{background:linear-gradient(120deg,#062e6f,#0a4aa0); box-shadow:0 8px 20px rgba(7,56,137,.3);}
.weektabs button .thema{display:block; margin-top:1px;}
/* weektab-kaartjes: weeknummer + NU-badge / vinkje, thema en datums eronder */
.weektabs button.wtab{display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:128px; border-radius:16px; padding:12px 16px 11px; text-align:left;}
.weektabs button.wtab .wt-kop{display:flex; align-items:center; gap:8px; font-family:'Exo',sans-serif; font-weight:800; font-size:.98rem; color:var(--blauw); line-height:1;}
.weektabs button.wtab .wt-nu{background:var(--oranje); color:#fff; font-size:.6rem; font-weight:800; letter-spacing:.07em; border-radius:999px; padding:3px 9px; box-shadow:0 3px 8px rgba(244,96,21,.35);}
.weektabs button.wtab .wt-af{color:var(--groen-diep); font-size:.8rem; font-weight:800;}
.weektabs button.wtab .wt-thema{font-family:'Source Sans 3',sans-serif; font-size:.74rem; font-weight:600; color:#4f5259; line-height:1.25;}
.weektabs button.wtab .wt-datum{font-size:.66rem; font-weight:700; color:#9496a1; letter-spacing:.01em;}
.weektabs button.wtab.af:not(.active){opacity:.72;}
.weektabs button.wtab.af:not(.active):hover{opacity:1;}
.weektabs button.wtab.active .wt-kop{color:#fff;}
.weektabs button.wtab.active .wt-thema{color:rgba(255,255,255,.85);}
.weektabs button.wtab.active .wt-datum{color:rgba(255,255,255,.62);}
.weektabs button.wtab.active .wt-af{color:#c9edcd;}
/* de weekknoppen zijn allemaal even breed: gelijke kolommen die op een smaller
   scherm netjes doorlopen naar de volgende rij (breedte blijft gelijk) */
#weektabs{display:grid; grid-template-columns:repeat(auto-fit,minmax(124px,1fr)); align-items:stretch;}
#weektabs button{display:flex; flex-direction:column; justify-content:center; text-align:center; padding:10px 12px; min-width:0;}
#weektabs button .thema{overflow-wrap:anywhere;}
.trackwissel{border:none; background:#fff; box-shadow:var(--kaart-schaduw); border-radius:999px; padding:3px;}
.trackwissel button{border-radius:999px; padding:7px 16px;}
.trackwissel button.active{background:var(--blauw); color:#fff;}

.rooster-wrap{padding:18px 20px; background:#fff; overflow-x:auto;}
table.rooster{border-spacing:8px 10px; min-width:860px;}
table.rooster th{background:transparent; color:var(--blauw); font-size:.9rem; padding:6px 6px 12px; border-radius:999px;}
table.rooster th.vandaag{background:var(--blauw); color:#fff; box-shadow:0 6px 16px rgba(7,56,137,.25);}
/* tijd-as: begintijd duidelijk bovenaan het eigen tijdvak, eindtijd klein eronder,
   met een stipje dat het label aan de rij koppelt — geldt voor alle roosters */
table.rooster th.tijd{color:#9496a1; font-size:.68rem; vertical-align:top; text-align:right; padding:3px 12px 0 0; position:relative; line-height:1.2; border-radius:0;}
table.rooster th.tijd .t-van{display:block; font-family:'Exo',sans-serif; font-weight:800; font-size:.84rem; color:var(--blauw);}
table.rooster th.tijd .t-tot{display:block; font-size:.63rem; font-weight:600; color:#9496a1; margin-top:1px;}
table.rooster th.tijd .t-los{display:block; font-size:.64rem; font-weight:700; color:#9496a1; text-transform:uppercase; letter-spacing:.06em; padding-top:4px;}
table.rooster th.tijd.band{vertical-align:middle;}
table.rooster th.tijd.band .t-van{font-size:.72rem;}
table.rooster td.ritme{background:transparent; border-top:1px solid rgba(7,56,137,.08); border-bottom:1px solid rgba(7,56,137,.08); border-radius:0; font-size:.72rem; color:#9496a1; padding:5px;}
table.rooster td.pauze{background:rgba(7,56,137,.04); border-radius:999px; color:#9496a1; font-size:.68rem; padding:3px;}
table.rooster td.leeg{background:transparent; border:none; color:transparent; position:relative;}
table.rooster td.leeg:hover{border:1.5px dashed #d3e6f0; border-radius:14px; color:#9496a1;}

/* lucht tussen de dagen — geldt voor elke agendaweergave (per richting én beide samen) */
/* de dagbalk stopt vóór de marge; de radius wordt met de marge opgeteld, anders
   wordt de rechterkant van de balk vierkant (de radius geldt op de buitenrand) */
.rooster-wrap table.rooster th.dagend{border-right:16px solid transparent; background-clip:padding-box;
  border-top-right-radius:23px; border-bottom-right-radius:23px;}
.rooster-wrap table.rooster td.dagend{padding-right:16px;}

/* blok-kaarten: pastel + spoor-balk + donkere tekst (nooit volle vlakken) */
.rcel{border:none; border-radius:14px; background:#e9f4f8; color:#4f5259; box-shadow:0 1px 2px rgba(7,56,137,.08), 0 2px 8px rgba(7,56,137,.05);
  padding:10px 12px 10px 15px; position:relative; overflow:hidden; min-height:64px; transition:transform .14s, box-shadow .14s;}
.rcel::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:#073889;}
/* blokken die al geweest zijn: gedimd en doorgestreept met een groen vinkje,
   net als in de dagagenda van Mijn academy (alleen in een week met echte datums) */
.rcel.af{background:#e9f4f8; box-shadow:none;}
.rcel.af::before{opacity:.3;}
.rcel.af strong{color:#9496a1; text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:rgba(7,56,137,.35);}
.rcel.af .mini span, .rcel.af .verv{opacity:.5;}
.rcel.af .actie-vlag{opacity:.55;}
.rcel.af .af-vink{position:absolute; right:10px; bottom:7px; color:var(--groen-diep); font-weight:800; font-size:.95rem; line-height:1;}
.rcel.af:hover{transform:none; box-shadow:0 2px 8px rgba(7,56,137,.08);}

/* vier categorieën: voor iedereen (navy) · commercieel (oranje) · backoffice (groen) · optioneel (sky) */
.rcel.kl-samen{background:#e9f4f8;}
.rcel.kl-samen::before{background:#073889;}
.rcel.kl-com{background:#fef1e2; color:#8a6200;}
.rcel.kl-com::before{background:#f46015;}
.rcel.kl-bo{background:#e8f8ea; color:#1e7e2b;}
.rcel.kl-bo::before{background:#1e7e2b;}
.rcel.kl-opt{background:#e9f4f8; color:#4f5259;}
.rcel.kl-opt::before{background:#00a8f5;}

/* het blok dat nú bezig is: oranje, met NU-badge — zelfde taal als het Vandaag-paneel */
.rcel.rcel-nu{background:#fef1e2; color:#8a6200; box-shadow:0 6px 18px rgba(244,96,21,.22), 0 0 0 2px var(--oranje);}
.rcel.rcel-nu::before{background:var(--oranje);}
.rcel-nu-chip{position:absolute; top:8px; right:8px; background:linear-gradient(135deg,#f79c44,#f46015); color:#fff; font-family:'Exo',sans-serif; font-weight:800; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:2px 8px; animation:s7Puls 1.8s infinite; pointer-events:none;}
.rcel.rcel-nu strong{padding-right:44px;}
.rcel:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(7,56,137,.14), 0 0 0 2px rgba(7,56,137,.3);}
.rcel.kl-samen:hover{background:#e9f4f8; box-shadow:0 8px 20px rgba(7,56,137,.14), 0 0 0 2px rgba(7,56,137,.3);}
.rcel.kl-com:hover{background:#fef1e2; box-shadow:0 8px 20px rgba(7,56,137,.14), 0 0 0 2px rgba(244,96,21,.35);}
.rcel.kl-bo:hover{background:#e8f8ea; box-shadow:0 8px 20px rgba(7,56,137,.14), 0 0 0 2px rgba(56,189,71,.35);}
.rcel.kl-opt:hover{background:#e9f4f8; box-shadow:0 8px 20px rgba(7,56,137,.14), 0 0 0 2px rgba(0,168,245,.4);}
.rcel.rcel-nu:hover{background:#fef1e2; box-shadow:0 8px 20px rgba(244,96,21,.25), 0 0 0 2px var(--oranje);}
.rcel strong{font-family:'Exo',sans-serif; font-size:.86rem; font-weight:600; color:var(--blauw); line-height:1.3;}
.rcel .mini span{font-size:.62rem; background:rgba(255,255,255,.65); border:none; color:var(--blauw);}
.rcel .mini .msp{color:var(--groen-diep);}
.rcel .mini .medit{color:var(--oranje);}
.rcel .verv{color:#9496a1;}

/* beide richtingen in één rooster: per dag twee kolommen (commercieel | backoffice) */
table.rooster-samen{min-width:1340px;}
table.rooster-samen th.subkop{background:transparent; font-family:'Exo',sans-serif; font-size:.6rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:#9496a1; padding:0 4px 10px;}
table.rooster-samen .rcel{padding:9px 10px 9px 14px; min-height:54px;}
table.rooster-samen .rcel strong{font-size:.79rem;}
table.rooster-samen td.leeg{font-size:.7rem;}

/* legenda onder het rooster */
.rooster-legenda{display:flex; gap:22px; flex-wrap:wrap; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid rgba(7,56,137,.08); font-size:.8rem; color:#4f5259;}
.rooster-legenda .lg-item{display:inline-flex; align-items:center; gap:8px;}
.rooster-legenda .lg-kleur{width:14px; height:14px; border-radius:4px; flex-shrink:0;}
.rooster-legenda .lg-samen{background:#e9f4f8; box-shadow:inset 4px 0 0 #073889;}
.rooster-legenda .lg-com{background:#fef1e2; box-shadow:inset 4px 0 0 #f46015;}
.rooster-legenda .lg-bo{background:#e8f8ea; box-shadow:inset 4px 0 0 #1e7e2b;}
.rooster-legenda .lg-opt{background:#e9f4f8; box-shadow:inset 4px 0 0 #00a8f5;}
.rooster-legenda .lg-hint{color:#9496a1; font-size:.74rem;}

/* back-up workshops onder het rooster — reserveprogramma voor de trainer */
.bwu{margin-top:18px; background:var(--wit); border:2px solid var(--hairline); border-radius:var(--radius); overflow:hidden;}
.bwu > .bwu-kop{display:flex; align-items:center; gap:12px; width:100%; border:none; background:transparent; text-align:left;
  padding:15px 20px; font-family:'Exo',sans-serif; font-weight:800; font-size:1rem; color:var(--blauw); cursor:pointer;}
.bwu > .bwu-kop:hover{background:#f5f5f9;}
.bwu > .bwu-kop .chev{margin-left:auto; color:var(--blauw-medium); font-size:.9rem; transition:transform .15s;}
.bwu.open > .bwu-kop .chev{transform:rotate(90deg);}
.bwu > .bwu-kop .sub{font-family:'Source Sans 3',sans-serif; font-weight:400; font-size:.82rem; color:#4f5259;}
.bwu > .bwu-kop .teller{background:var(--oranje); color:var(--wit); font-size:.68rem; font-weight:800; border-radius:999px; padding:2px 9px;}
.bwu-body{display:none; padding:0 20px 20px;}
.bwu.open .bwu-body{display:block;}
.bwu-filters{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; padding-top:4px;}
.bwu-filters button{border:1.5px solid var(--blauw-soft); background:var(--wit); color:var(--blauw); border-radius:999px;
  padding:5px 13px; font-size:.8rem; font-weight:600;}
.bwu-filters button.active{background:var(--blauw); border-color:var(--blauw); color:var(--wit);}
.bwu-lijst{display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:12px;}
.bwu-kaart{border:1.5px solid var(--hairline); border-left:4px solid var(--blauw-medium); border-radius:12px; padding:14px 16px; background:#f5f5f9;}
.bwu-kaart h4{font-size:.96rem; font-weight:800; color:var(--blauw); margin-bottom:7px;}
/* sleepbaar: alleen de hoofdbeheerder kan een workshop in het rooster zetten */
.bwu-kaart.sleepbaar{cursor:grab; border-left-color:var(--oranje);}
.bwu-kaart.sleepbaar:hover{background:#fff; box-shadow:0 6px 18px rgba(7,56,137,.10);}
.bwu-kaart.sleepbaar.sleept{opacity:.45; cursor:grabbing;}
.bwu-kaart .bwu-grip{color:var(--oranje); margin-right:7px; letter-spacing:-.1em;}
.bwu-sleephint{font-size:.8rem; color:#4f5259; background:#fef1e2; border:1px solid #fde1b6;
  border-radius:10px; padding:8px 12px; margin-bottom:12px;}
.bwu-kaart .bwu-badges{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:9px;}
.bwu-kaart .bwu-badges span{font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  border-radius:999px; padding:2px 9px; background:var(--wit); border:1px solid var(--blauw-soft); color:var(--blauw);}
.bwu-kaart .bwu-badges .t-communicatie{background:#fef1e2; border-color:#fde1b6; color:var(--oranje);}
.bwu-kaart .bwu-badges .t-samenwerken{background:#e9f4f8; border-color:#9ecae2; color:#0065cc;}
.bwu-kaart .bwu-badges .t-feedback{background:#e9f4f8; border-color:#d3e6f0; color:var(--blauw);}
.bwu-kaart .bwu-badges .t-zelfkennis{background:#e8f8ea; border-color:#c9edcd; color:#1e7e2b;}
.bwu-kaart .bwu-badges .t-presenteren{background:#fbeaec; border-color:#f3c4ca; color:#b71525;}
.bwu-kaart .bwu-badges .t-verdieping{background:#fff6d9; border-color:#ffe9ad; color:#8a6200;}
.bwu-kaart .samenvatting{font-size:.84rem; color:#4f5259; margin-bottom:9px;}
.bwu-kaart details summary{cursor:pointer; font-size:.82rem; font-weight:700; color:var(--blauw-bold);}
.bwu-kaart details[open] summary{margin-bottom:8px;}
.bwu-kaart .rij{font-size:.84rem; color:var(--grijs); margin-bottom:8px;}
.bwu-kaart .rij b{color:var(--blauw);}
.bwu-kaart ol, .bwu-kaart ul{margin:0 0 8px 18px; font-size:.84rem; color:var(--grijs);}
.bwu-kaart ol li, .bwu-kaart ul li{margin-bottom:4px;}
/* de losse kaartjes voor de deelnemers: als knipvellen, zodat je ze zo kunt overtypen */
.bwu-kaart ol.bwu-kaartjes{list-style:none; margin-left:0;}
.bwu-kaart ol.bwu-kaartjes li{background:var(--wit); border:1px dashed var(--blauw-soft); border-radius:9px; padding:7px 11px; margin-bottom:6px; color:var(--blauw-bold); font-weight:600;}
.bwu-kaart .bwu-tip{background:#fef1e2; border-left:3px solid var(--oranje); border-radius:0 8px 8px 0; padding:8px 11px;}
.bwu-kaart .bwu-bestand{display:inline-flex; align-items:center; gap:7px; background:var(--wit); border:1.5px solid var(--blauw-soft);
  border-radius:9px; padding:7px 12px; font-size:.82rem; font-weight:700; color:var(--blauw); text-decoration:none;}
.bwu-kaart .bwu-bestand:hover{background:var(--blauw); border-color:var(--blauw); color:var(--wit);}
.bwu-leeg{font-size:.86rem; color:#4f5259; padding:6px 0;}

/* blokdetail (S3) */
.detailkaart{padding:26px 28px;}
.detailkaart h2{font-size:1.5rem;}
.detailkaart .waar{color:var(--oranje);}
.blok-teaser{border-radius:14px; border-left-width:5px;}

/* ---------- inlogscherm ---------- */
#loginscherm{position:relative; overflow:hidden; background:#041d47;}
#loginscherm .login-achter{position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.5) saturate(1.1); transform:scale(1.04);}
#loginscherm .login-waas{position:absolute; inset:0; background:linear-gradient(160deg, rgba(4,29,71,.65), rgba(4,29,71,.25) 55%, rgba(244,96,21,.28));}
.logincard{position:relative; background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border-radius:26px; padding:44px 40px 38px; box-shadow:0 30px 90px rgba(0,0,0,.5); animation:appIn .5s ease both;}
.logincard .coach{width:104px; height:104px; object-fit:cover; border-radius:50%; border:4px solid #fff; box-shadow:0 10px 26px rgba(7,56,137,.3); margin:-96px auto 12px; display:block;}
/* Het Hero-logo is wit en hoort dus op de donkere achtergrond, niet op de witte kaart */
#loginscherm .hlogo{position:relative; width:130px; max-width:50%; margin-bottom:110px;}
.logincard h1{font-size:1.6rem;}
.logincard .msbtn{box-shadow:0 10px 24px rgba(244,96,21,.45), inset 0 -4px 0 rgba(0,0,0,.16); transition:transform .13s, box-shadow .13s;}
.logincard .msbtn:hover{transform:translateY(-2px);}
.logincard .msbtn:active{transform:translateY(2px); box-shadow:0 4px 12px rgba(244,96,21,.35), inset 0 -1px 0 rgba(0,0,0,.16);}

/* ---------- mobiele kopbalk (alleen op smalle schermen zichtbaar) ---------- */
.mbalk{display:none; position:fixed; left:0; right:0; top:0; z-index:90; align-items:center; gap:12px;
  height:calc(56px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 14px 0;
  background:rgba(4,29,71,.97); backdrop-filter:blur(10px); color:#fff; box-shadow:0 4px 18px rgba(4,29,71,.28);}
.mbalk .mknop{position:relative; display:flex; align-items:center; gap:8px; flex-shrink:0; border:none; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; font-family:'Exo',sans-serif; font-weight:800; font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase; border-radius:12px; padding:10px 14px;}
.mbalk .mknop:active{background:var(--oranje);}
.mbalk .mknop .mico{font-size:1rem; letter-spacing:0;}
.mbalk .mknop .teller{position:absolute; top:-5px; right:-5px; background:var(--oranje); color:#fff;
  font-family:'Exo',sans-serif; font-weight:800; font-size:.62rem; border-radius:999px; padding:1px 6px; letter-spacing:0;
  box-shadow:0 2px 6px rgba(0,0,0,.35);}
.mbalk .mtitel{font-family:'Exo',sans-serif; font-weight:800; font-size:1rem; line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.zijbalk .msluit{display:none; position:absolute; top:16px; right:14px; width:40px; height:40px; border:none; cursor:pointer;
  border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:1.1rem; font-weight:800;}
.zijbalk .msluit:active{background:var(--oranje);}

/* ---------- ingebedde oefenomgeving: de zijbalk van de academy blijft staan ---------- */
#embed-overlay{top:0; left:0;}
body.authed #embed-overlay{left:var(--zb-breed); transition:left .25s cubic-bezier(.2,.7,.3,1);}
body.authed.zb-smal #embed-overlay{left:var(--zb-smal);}

/* ---------- mobiel: menuscherm in plaats van een propvolle tabbalk ---------- */
@media (max-width:920px){
  body.authed, body.authed.zb-smal{padding-left:0; padding-top:calc(56px + env(safe-area-inset-top));}
  body.authed .mbalk{display:flex;}
  /* op mobiel staat het menu bovenin: de oefenomgeving begint eronder */
  body.authed #embed-overlay, body.authed.zb-smal #embed-overlay{left:0; top:calc(56px + env(safe-area-inset-top));}
  /* de zijbalk wordt een volwaardig menuscherm: alleen zichtbaar als het menu open staat */
  body.authed .zijbalk, body.zb-smal .zijbalk, body.zb-smal.zb-peek .zijbalk{
    display:none; position:fixed; inset:0; width:auto; height:auto; flex-direction:column;
    padding:20px 16px calc(24px + env(safe-area-inset-bottom)); overflow-y:auto; -webkit-overflow-scrolling:touch;
    z-index:95; background:linear-gradient(180deg,#041d47 0%,#073889 74%,#0a4aa0 100%); box-shadow:none;}
  body.authed.m-menu .zijbalk{display:flex; animation:appIn .22s ease both;}
  body.m-menu{overflow:hidden;}
  /* de smalle rail-stand bestaat hier niet (JS haalt zb-smal weg op mobiel) */
  .zijbalk .klap{display:none !important;}
  .zijbalk .msluit{display:block;}
  .zijbalk .merk{padding:2px 56px 0 4px;}
  .zijbalk .merk .merk-logo{width:110px;}
  .zijbalk .rolbadge{margin:6px 4px 2px;}
  .zijbalk nav{flex-direction:column; flex:none; gap:2px; overflow:visible; margin-top:8px;}
  /* elke sectie een tegelraster van twee kolommen */
  .zijbalk .sectie{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:10px;}
  .zijbalk .sectiekop{grid-column:1 / -1; padding:2px 4px 0;}
  .zijbalk nav button{flex-direction:column; align-items:flex-start; justify-content:space-between; gap:8px;
    min-height:88px; padding:13px; border-radius:18px; background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.13); color:#fff; font-size:.95rem; font-weight:700;
    white-space:normal; text-align:left; transform:none !important;}
  .zijbalk nav button .nico{font-size:1.5rem; width:auto;}
  .zijbalk nav button .nlbl{display:block; line-height:1.2;}
  .zijbalk nav button.actief{background:linear-gradient(135deg,#f79c44,#f46015); box-shadow:0 8px 20px rgba(244,96,21,.35);}
  .zijbalk nav button .teller{position:absolute; top:12px; right:12px; margin:0;}
  .zijbalk .widget{margin:2px 0 14px;}
  .zijbalk .voet{margin-top:auto;}
  main{padding:20px 16px 48px;}
  .lrn-geluid{bottom:18px;}
  .held{padding:22px 20px;}
  .held .verder{width:100%;}
  .hub-verder .vtit{font-size:1.15rem;}
}
@media (max-width:360px){
  .zijbalk .sectie{grid-template-columns:1fr;}
  .zijbalk nav button{flex-direction:row; align-items:center; justify-content:flex-start; min-height:0; gap:14px;}
  .zijbalk nav button .nico{font-size:1.35rem; width:28px; text-align:center;}
  .zijbalk nav button .teller{position:static; margin-left:auto;}
}

/* ================= Mijn academy dashboard 2.0 ================= */
@keyframes s7Puls{0%,100%{box-shadow:0 0 0 0 rgba(244,96,21,.45)} 50%{box-shadow:0 0 0 8px rgba(244,96,21,0)}}

/* zijbalk duwt de inhoud opzij, ook bij hover-uitschuiven in de smalle stand */
body.zb-smal.zb-peek{padding-left:var(--zb-breed);}
.zijbalk .klap{width:26px; height:52px; font-size:1.05rem;}

.s7-dash{display:flex; flex-direction:column; gap:16px;}
/* grid met vaste 1.4fr : 1fr — zo lijnen de kolommen tussen alle rijen exact uit */
.s7-rij{display:grid; grid-template-columns:1.4fr 1fr; gap:16px; align-items:stretch;}
.s7-rij > .paneel{min-width:0;}
.s7-kolom{min-width:0; display:flex; flex-direction:column; gap:16px;}
.s7-kolom .paneel{flex:1;}
@media (max-width:860px){ .s7-rij{grid-template-columns:1fr;} }

.paneel h3 .klok{float:right; font-family:'Exo',sans-serif; font-weight:800; font-size:.95rem; color:var(--blauw); letter-spacing:0; text-transform:none; background:var(--hairline); border-radius:999px; padding:2px 12px;}
.telchip{margin-left:8px; background:#e8f8ea; color:var(--groen-diep); border-radius:999px; padding:2px 10px; font-size:.68rem; letter-spacing:0; text-transform:none;}

/* ---- Vandaag inleveren: de opdrachten van vandaag met hun inleverstatus ---- */
#s7-inleveren:empty{display:none;}
.s7-inlev{margin-top:15px; padding-top:13px; border-top:1px solid var(--hairline);}
.s7-inlev .ikop{display:flex; align-items:center; flex-wrap:wrap; gap:7px; font-family:'Exo',sans-serif; font-weight:800; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--oranje); margin-bottom:10px;}
.s7-inlev .telchip{margin-left:0;}
.s7-inlev .telchip.open{background:#fef1e2; color:var(--oranje);}
/* elke rij hetzelfde kader, zodat de bolletjes één rechte kolom vormen; de
   staat van een opdracht zit in het bolletje en het label, niet in de vorm.
   "Mijn KPI's" volgt exact dezelfde opmaak: dezelfde lijst, dezelfde uitlijning */
.s7-inlev .kpi-rij, .s7-kpis .kpi-rij{align-items:center; padding:9px 12px; margin-bottom:5px; border-bottom:none; border-radius:12px;
  background:#f5f5f9 !important; box-shadow:inset 0 0 0 1.5px #e9f4f8; transition:background .15s, box-shadow .15s;}
.s7-inlev .kpi-rij:hover, .s7-kpis .kpi-rij:hover{background:#e9f4f8 !important;}
.s7-inlev .kpi-rij.ok, .s7-kpis .kpi-rij.ok{box-shadow:inset 0 0 0 1.5px #c9edcd; background:#e8f8ea !important;}
.s7-inlev .kpi-rij.ok:hover, .s7-kpis .kpi-rij.ok:hover{background:#e8f8ea !important;}
.s7-inlev .kpi-rij .vink, .s7-kpis .kpi-rij .vink{width:22px; height:22px; font-size:.78rem; box-shadow:none;}
.s7-inlev .kpi-rij .vink.todo, .s7-kpis .kpi-rij .vink.todo{background:#fff; box-shadow:inset 0 0 0 1.5px #d3e6f0;}
.s7-inlev .kpi-rij .vink.todo::after, .s7-kpis .kpi-rij .vink.todo::after{content:""; width:6px; height:6px; border-radius:50%; background:#d3e6f0;}
.s7-inlev .kpi-rij .vink.ingeleverd{background:var(--blauw-soft); color:var(--blauw);}
.s7-inlev .kpi-rij .vink.af, .s7-kpis .kpi-rij .vink.af{background:var(--groen); color:var(--wit);}
.s7-inlev .kpi-titel, .s7-kpis .kpi-titel{flex:1 1 auto; min-width:0; line-height:1.25; overflow-wrap:break-word;}
.s7-kpis .kpi-titel{font-weight:700;}
.s7-inlev .status-badge, .s7-kpis .kpi-badge{flex-shrink:0;}
/* het KPI-label krijgt exact dezelfde maat als het label in "Vandaag inleveren" */
.s7-kpis .kpi-badge{font-size:.66rem; letter-spacing:.05em; padding:3px 10px;}
/* op een smal scherm zakt het label naar een eigen regel, uitgelijnd onder de
   titel — anders loopt een lange opdrachtnaam eroverheen */
@media (max-width:860px){
  .s7-inlev .kpi-rij, .s7-kpis .kpi-rij{display:grid; grid-template-columns:22px minmax(0,1fr);
    grid-template-areas:"bol titel" ". label"; gap:5px 12px;}
  .s7-inlev .kpi-rij .vink, .s7-kpis .kpi-rij .vink{grid-area:bol; align-self:center;}
  .s7-inlev .kpi-titel, .s7-kpis .kpi-titel{grid-area:titel;}
  .s7-inlev .status-badge, .s7-kpis .kpi-badge{grid-area:label; justify-self:start;}
}

/* ---- live agenda: tijdlijn met status per item ---- */
#s7-vandaag.live{position:relative; margin-top:4px;}
/* Vandaag op Mijn academy: hetzelfde soft-card recept als de weekagenda —
   pastelkaart met accentbalk links, Exo-titels en een rode live-lijn */
#s7-vandaag.live .live-rij{position:relative; border:none; border-radius:14px; padding:10px 12px 10px 17px; margin-bottom:8px; gap:12px; background:#e9f4f8; color:#4f5259; box-shadow:0 1px 2px rgba(7,56,137,.08), 0 2px 8px rgba(7,56,137,.05); overflow:hidden; transition:background .2s;}
#s7-vandaag.live .live-rij::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:#073889;}
#s7-vandaag.live .live-rij strong{font-family:'Exo',sans-serif; font-weight:600; color:var(--blauw);}
#s7-vandaag.live .live-rij .tijd{width:52px; font-size:.74rem; padding-top:1px; color:#9496a1;}
#s7-vandaag.live .live-rij.af{opacity:.55;}
#s7-vandaag.live .live-rij.af strong{text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:rgba(7,56,137,.35);}
#s7-vandaag.live .live-rij.af .lrn-af-vink{margin-left:auto; color:var(--groen-diep); font-weight:800; align-self:center;}
/* kaarthoogte schaalt mee met de duur: data-span = het aantal tijdvakken dat het blok
   beslaat (half blok/kort = 1, gewoon blok = 2, dagdeel = 4, hele dag = 8) */
#s7-vandaag.live .live-rij[data-span="2"]{min-height:80px;}
#s7-vandaag.live .live-rij[data-span="3"]{min-height:105px;}
#s7-vandaag.live .live-rij[data-span="4"]{min-height:130px;}
#s7-vandaag.live .live-rij[data-span="5"]{min-height:155px;}
#s7-vandaag.live .live-rij[data-span="6"]{min-height:180px;}
#s7-vandaag.live .live-rij[data-span="7"]{min-height:205px;}
#s7-vandaag.live .live-rij[data-span="8"]{min-height:230px;}
#s7-vandaag.live .live-rij.bezig{background:#fef1e2;}
#s7-vandaag.live .live-rij.bezig::before{background:var(--oranje);}
#s7-vandaag.live .live-rij.bezig .tijd{color:var(--oranje); font-weight:800;}
.lrn-nu-chip{display:inline-block; background:linear-gradient(135deg,#f79c44,#f46015); color:#fff; font-family:'Exo',sans-serif; font-weight:800; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:2px 9px; margin-left:6px; animation:s7Puls 1.8s infinite; vertical-align:2px;}
/* tussen twee blokken in: subtiel oranje lijntje met de tijd — nooit door tekst heen */
.lrn-nulijn{display:flex; align-items:center; gap:8px; margin:8px 0;}
.lrn-nulijn span{font-family:'Exo',sans-serif; font-weight:800; font-size:.68rem; color:#fff; background:linear-gradient(135deg,#f79c44,#f46015); border-radius:999px; padding:2px 9px; box-shadow:0 3px 10px rgba(244,96,21,.4);}
.lrn-nulijn i{flex:1; height:2px; background:linear-gradient(90deg,var(--oranje),rgba(244,96,21,.15)); border-radius:2px;}
.lrn-nulijn b{font-size:.7rem; color:var(--oranje); font-weight:700; white-space:nowrap;}
.lrn-klaarmelding{background:#e9f4f8; border-radius:12px; padding:12px 14px; font-size:.85rem; color:#4f5259; margin-top:8px; text-align:center;}
/* de dagafsluiting (16:30–17:00) sluit de dag af, net als in het weekrooster */
#s7-vandaag.live .live-rij.lrn-afsluiting{background:#e9f4f8; box-shadow:inset 0 0 0 1.5px #e9f4f8;}
#s7-vandaag.live .live-rij.lrn-afsluiting strong{font-weight:700; color:#4f5259;}

/* ---- voortgang 2.0 ---- */
.s7-voortgang .voortgang-rij, .s7-voortgang .s7-spwrap{display:none;}
.vg2{display:flex; gap:20px; align-items:center; margin-top:4px;}
.vg2-ring{position:relative; width:104px; height:104px; flex-shrink:0;}
.vg2-ring svg:not(.hicoon){transform:rotate(-90deg); width:100%; height:100%;}
.vg2-ring circle{fill:none; stroke-width:10; stroke-linecap:round;}
.vg2-ring .bg{stroke:var(--hairline);}
.vg2-ring .fg{stroke:var(--oranje); transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.3,1);}
/* de twee regels als één blok in het midden van de ring — met grid rekten de rijen
   zich over de volle hoogte uit, waardoor het percentage te hoog stond */
.vg2-ring .lbl{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-align:center;}
.vg2-ring .lbl b{font-family:'Exo',sans-serif; font-size:1.35rem; color:var(--blauw); line-height:1;}
.vg2-ring .lbl span{font-size:.6rem; color:var(--blauw-medium); font-weight:700; text-transform:uppercase; letter-spacing:.08em;}
.vg2-rechts{flex:1; min-width:0;}
.vg2-sp{display:flex; align-items:baseline; gap:6px;}
.vg2-sp b{font-family:'Exo',sans-serif; font-size:1.5rem; color:var(--groen-diep); line-height:1;}
.vg2-sp span{font-size:.78rem; color:var(--blauw-medium); font-weight:600;}
.vg2-spbalk{position:relative; height:10px; background:var(--hairline); border-radius:999px; margin:8px 0 14px;}
.vg2-spbalk i{display:block; height:100%; background:linear-gradient(90deg,var(--blauw-bold),var(--oranje)); border-radius:999px;}
.vg2-spbalk u{position:absolute; top:50%; width:8px; height:8px; border-radius:50%; background:#fff; border:2px solid #d3e6f0; transform:translate(-50%,-50%);}
.vg2-spbalk u.aan{border-color:var(--oranje); background:#fff;}
.vg2-weken{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.vg2-weken span{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:'Exo',sans-serif; font-weight:800; font-size:.7rem; background:var(--hairline); color:var(--blauw-medium);}
.vg2-weken span.af{background:var(--blauw); color:#fff;}
.vg2-weken span.nu{background:linear-gradient(135deg,#f79c44,#f46015); color:#fff; animation:s7Puls 2s infinite;}
.vg2-weken em{font-style:normal; font-size:.74rem; color:var(--blauw-medium); font-weight:600; margin-left:4px;}
.vg2-stats{display:flex; gap:10px; margin-top:16px;}
.vg2-stats > div{flex:1; background:#f5f5f9; border-radius:14px; padding:14px 12px; text-align:center;}
.vg2-stats b{display:block; font-family:'Exo',sans-serif; font-size:1.4rem; color:var(--blauw);}
/* labels net groot en donker genoeg om vlot te lezen op de grijze tegel */
.vg2-stats span{display:block; font-size:.84rem; color:var(--grijs-bold); font-weight:600; line-height:1.35; margin-top:2px;}
/* zichtbare ingang naar de uitleg van het percentage — die zat eerst verstopt achter de ring */
.vg2-hoezo{display:block; width:100%; margin-top:10px; padding:7px 4px 0; border:none; border-top:1px dashed var(--hairline); background:transparent; cursor:pointer; font-family:'Source Sans 3',sans-serif; font-size:.8rem; font-weight:700; color:var(--blauw-medium); text-align:left;}
.vg2-hoezo:hover{color:var(--oranje);}

/* ---- dagvoortgang: wat heb je vandaag al afgerond? ---- */
#s7-dagvg:empty{display:none;}
.dagvg{margin-top:18px; padding-top:15px; border-top:1px solid var(--hairline);}
.dagvg .dkop{display:flex; align-items:center; gap:8px; font-family:'Exo',sans-serif; font-weight:800; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--oranje); margin-bottom:8px;}
.dagvg .dpct{background:#fef1e2; color:var(--oranje); border-radius:999px; padding:2px 10px; font-size:.68rem; letter-spacing:0;}
.dagvg .dpct.af{background:#e8f8ea; color:var(--groen-diep);}
.dagvg .dbalk{height:8px; border-radius:999px; background:#e9f4f8; overflow:hidden;}
.dagvg .dbalk i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--oranje),#f79c44); transition:width .4s;}
.dagvg .dtiles{display:flex; gap:10px; margin-top:12px;}
.dagvg .dtiles button{flex:1; min-width:0; border:none; background:#f5f5f9; border-radius:14px; padding:14px 10px; text-align:center; cursor:pointer; font:inherit; color:inherit; transition:transform .14s, background .14s;}
.dagvg .dtiles button:hover{transform:translateY(-2px); background:#e9f4f8;}
.dagvg .dtiles b{display:block; font-family:'Exo',sans-serif; font-size:1.4rem; color:var(--blauw);}
.dagvg .dtiles b em{font-style:normal; font-size:1rem; color:var(--grijs-bold);}
.dagvg .dtiles span{display:block; font-size:.84rem; color:var(--grijs-bold); font-weight:600; line-height:1.35; margin-top:2px;}
/* op een smal scherm iets kleiner, en de tegels met de langste tekst twee aan twee
   (de drie korte tegels van 'mijn academy' passen naast elkaar en blijven op één rij) */
@media (max-width:560px){
  .dagvg .dtiles, .vg2-stats.groei-stats{flex-wrap:wrap;}
  .dagvg .dtiles button, .vg2-stats.groei-stats .klik{flex:1 1 46%;}
  .dagvg .dtiles b, .vg2-stats b{font-size:1.2rem;}
  .dagvg .dtiles span, .vg2-stats span{font-size:.78rem;}
}

/* ---- KPI's, composer en lege staten ---- */
.kpi-rij{border:none; background:#f5f5f9; border-radius:12px; padding:9px 12px; margin-bottom:6px;}
.kpi-rij.ok .vink{background:var(--groen); color:#fff; border-radius:50%;}
.kpi-rij.open{box-shadow:inset 0 0 0 1.5px #e9f4f8;} .kpi-rij.open .vink{background:#fff;}
.s7-composer .update-form textarea{border:none; background:#f5f5f9; border-radius:14px; padding:14px 16px; min-height:84px;}
.s7-composer .update-form textarea:focus{outline:2px solid var(--blauw-medium);}
#s7-mijn-updates .hint, #s7-lichting-updates .hint, #s7-weeklys .hint{background:#f5f5f9; border-radius:12px; padding:14px; text-align:center;}

/* ================= Ronde 7: klikbare voortgang, lichting, team, opdrachten, agenda-export ================= */
/* klikbare voortgang-onderdelen */
.vg2 .klik, .vg2-stats .klik{border:none; background:transparent; cursor:pointer; text-align:inherit; font:inherit; color:inherit; transition:transform .14s;}
.vg2 .klik:hover, .vg2-stats .klik:hover{transform:translateY(-2px);}
.vg2-ring.klik{border-radius:50%;}
.vg2-ring.klik:hover .fg{filter:drop-shadow(0 0 6px rgba(244,96,21,.5));}
.vg2-spklik{display:block; width:100%; padding:0; border-radius:12px;}
.vg2-sp em{font-style:normal; font-size:.68rem; color:var(--oranje); font-weight:800; margin-left:auto; opacity:0; transition:opacity .15s;}
.vg2-spklik:hover .vg2-sp em{opacity:1;}
.vg2-weken{padding:4px 6px; border-radius:12px;}
.vg2-weken:hover{background:#e9f4f8;}
/* flex:1 zodat de drie tegels de rij netjes vullen, net als de tegels onder 'vandaag' */
.vg2-stats .klik{flex:1; min-width:0; background:#f5f5f9; border-radius:14px; padding:14px 12px; text-align:center;}
.vg2-stats .klik:hover{background:#e9f4f8; box-shadow:0 6px 14px rgba(7,56,137,.1);}

/* Mijn lichting: kaartjes met voortgang */
.medechips{gap:8px;}
.dchip.dkaart{width:calc(50% - 4px); border:none; background:#f5f5f9; border-radius:14px; padding:9px 12px 9px 8px; display:flex; align-items:center; gap:10px; transition:transform .14s, box-shadow .14s, background .14s;}
.dchip.dkaart:hover{transform:translateY(-2px); background:#fff; box-shadow:0 8px 18px rgba(7,56,137,.13); border-color:transparent;}
.dchip.dkaart .av{width:32px; height:32px; font-size:.68rem;}
.dchip.dkaart .dnaam{flex:1; min-width:0; text-align:left; font-weight:700; font-size:.82rem; color:var(--blauw); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dchip.dkaart .dbar{display:block; height:5px; background:var(--hairline); border-radius:999px; overflow:hidden; margin-top:4px;}
.dchip.dkaart .dbar b{display:block; height:100%; background:linear-gradient(90deg,var(--blauw-bold),var(--oranje)); border-radius:999px;}
.dchip.dkaart .dpct{font-family:'Exo',sans-serif; font-weight:800; font-size:.78rem; color:var(--oranje);}
@media (max-width:1100px){ .dchip.dkaart{width:100%;} }

/* Teampagina (S9) */
#S9 .lid-rij{border:none; background:#f5f5f9; border-radius:14px; padding:10px 14px; margin-bottom:7px;}
#S9 .lid-rij .av{width:34px; height:34px;}
/* geen uitgelichte rijen — iedereen gelijk; alleen het rollabel verschilt:
   teamlead met kroontje, accountmanager met eigen labelkleur */
#S9 .lid-rij .rol.lead{background:#fef1e2; color:#c05f12;}
#S9 .lid-rij .rol.lead .hicoon{width:13px; height:13px; fill:currentColor; vertical-align:-2px; margin-right:2px;}
#S9 .lid-rij .rol.am{background:#e3f4fb; color:#037bb0;}
#S9 .regel-rij{border:none; background:#f5f5f9; border-radius:12px; padding:9px 13px; margin-bottom:6px;}
#S9 .teamtabs button{border:none; background:#fff; box-shadow:var(--kaart-schaduw); border-radius:13px; padding:9px 16px;}
#S9 .teamtabs button.active{background:linear-gradient(120deg,#062e6f,#0a4aa0); color:#fff;}
#S9 .klantcard{border:none; background:#f5f5f9; box-shadow:none;}
#S9 .klantcard:hover{background:#fff; box-shadow:0 8px 18px rgba(7,56,137,.13);}

/* ============================================================
   Opdrachten-scherm (S19) — "voortgangskop + weekrail + kaarten"
   Eén statuskleur per opdracht (oranje open · blauw wacht ·
   groen goedgekeurd · rood opnieuw · sky via het blok) die
   terugkomt in de ring, de weekbalk, de dagchip en de kaart.
   ============================================================ */
.s19-paneel{max-width:none; padding:20px 22px 22px;}
.s19-paneel .opdracht-kaart, #S19 .inlever-form{border:none; background:#f5f5f9; border-radius:14px;}

/* ---- kop: ring met je voortgang + tegels per status ---- */
#s19-hero:empty{display:none;}
#s19-hero{margin:6px 0 18px;}
.opdr-hero{position:relative; overflow:hidden; isolation:isolate; border-radius:20px; padding:15px 24px; color:#fff;
  background:linear-gradient(125deg,#041d47 0%,#062e6f 42%,#0a4aa0 100%); box-shadow:0 16px 38px rgba(7,56,137,.25);
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.opdr-hero::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.12) 1.3px, transparent 1.3px); background-size:17px 17px;}
.opdr-hero::after{content:""; position:absolute; right:-60px; top:-90px; width:320px; height:320px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle,rgba(244,96,21,.34),transparent 68%); animation:lrnAurora 12s ease-in-out infinite;}

.oh-ring{position:relative; width:88px; height:88px; flex-shrink:0;}
.oh-ring svg:not(.hicoon){width:100%; height:100%; transform:rotate(-90deg);}
.oh-ring circle{fill:none; stroke-width:9; stroke-linecap:round;}
.oh-ring .oh-bg{stroke:rgba(255,255,255,.16);}
.oh-ring .oh-goed{stroke:#38bd47; transition:stroke-dasharray 1s cubic-bezier(.2,.7,.3,1);}
.oh-ring .oh-wacht{stroke:#00a8f5; transition:stroke-dasharray 1s cubic-bezier(.2,.7,.3,1);}
.oh-ringlbl{position:absolute; inset:0; display:grid; place-content:center; text-align:center;}
.oh-ringlbl b{display:block; font-family:'Exo',sans-serif; font-weight:800; font-size:1.3rem; line-height:1; letter-spacing:-.02em;}
.oh-ringlbl span{font-size:.56rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#9ecae2;}

.oh-tekst{flex:1; min-width:230px;}
.oh-lbl{font-family:'Exo',sans-serif; font-weight:800; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#fde1b6;}
.oh-tekst h2{font-family:'Exo',sans-serif; font-weight:800; font-size:1.28rem; line-height:1.2; letter-spacing:-.015em; margin:2px 0 1px;}
.oh-tekst p{color:#d3e6f0; font-size:.88rem;}
.oh-knop{display:inline-flex; align-items:center; gap:9px; margin-top:9px; border:none; cursor:pointer;
  background:linear-gradient(135deg,#f79c44,#f46015); color:#fff; font-family:'Exo',sans-serif; font-weight:800; font-size:.86rem;
  border-radius:999px; padding:8px 17px; box-shadow:inset 0 -3px 0 rgba(0,0,0,.18), 0 8px 20px rgba(244,96,21,.32); transition:transform .14s, box-shadow .14s;}
.oh-knop span{transition:transform .16s;}
.oh-knop:hover{transform:translateY(-2px);} .oh-knop:hover span{transform:translateX(4px);}

/* de vier cijferblokjes staan op één rij naast elkaar (op de telefoon 2×2, zie onderaan) */
.oh-tegels{display:grid; grid-template-columns:repeat(4,minmax(90px,auto)); gap:9px; flex:0 1 auto;}
.oh-tegel{background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13); border-radius:13px; padding:8px 12px; position:relative; overflow:hidden;}
.oh-tegel::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px;}
.oh-tegel b{display:block; font-family:'Exo',sans-serif; font-weight:800; font-size:1.2rem; line-height:1.1;}
.oh-tegel span{font-size:.68rem; font-weight:600; color:#9ecae2; line-height:1.25; display:block;}
.oh-tegel.oranje::before{background:#f79c44;} .oh-tegel.oranje b{color:#fde1b6;}
.oh-tegel.blauw::before{background:#00a8f5;}  .oh-tegel.blauw b{color:#9ecae2;}
.oh-tegel.groen::before{background:#38bd47;}  .oh-tegel.groen b{color:#c9edcd;}
.oh-tegel.rood::before{background:#b71525;}   .oh-tegel.rood b{color:#f3c4ca;}
.oh-tegel.sky::before{background:#00a8f5;}    .oh-tegel.sky b{color:#9ecae2;}

/* ---- weekrail: kaartje per week met thema en gestapelde voortgangsbalk ---- */
.opdr-weekrail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(148px,1fr); gap:10px; overflow-x:auto;
  padding:2px 2px 12px; margin:-2px -2px 4px; scroll-snap-type:x proximity;}
.owk{scroll-snap-align:start; text-align:left; border:none; cursor:pointer; background:#f5f5f9; border-radius:16px; padding:12px 14px 13px;
  display:flex; flex-direction:column; gap:7px; box-shadow:inset 0 0 0 1.5px #e9f4f8; transition:transform .15s cubic-bezier(.2,.7,.3,1.3), box-shadow .15s, background .15s;}
.owk:hover{transform:translateY(-3px); background:#fff; box-shadow:0 10px 24px rgba(7,56,137,.14), inset 0 0 0 1.5px #d3e6f0;}
.owk-kop{display:flex; align-items:center; gap:6px;}
.owk-nr{font-family:'Exo',sans-serif; font-weight:800; font-size:.98rem; color:var(--blauw); letter-spacing:-.01em;}
.owk-nu{font-family:'Exo',sans-serif; font-weight:800; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  background:linear-gradient(135deg,#f79c44,#f46015); color:#fff; border-radius:999px; padding:2px 8px; box-shadow:0 3px 9px rgba(244,96,21,.4); animation:s7Puls 2s infinite;}
.owk-vink{margin-left:auto; width:19px; height:19px; border-radius:50%; background:#e8f8ea; color:var(--groen-diep);
  font-size:.68rem; font-weight:800; display:grid; place-items:center;}
.owk-thema{font-size:.72rem; color:#9496a1; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.owk-bar{display:flex; height:6px; border-radius:999px; background:#e9f4f8; overflow:hidden;}
.owk-bar i{display:block; height:100%; transition:width .5s cubic-bezier(.2,.7,.3,1);}
.owk-bar i.g{background:linear-gradient(90deg,#1e7e2b,#38bd47);}
.owk-bar i.w{background:linear-gradient(90deg,#0065cc,#00a8f5);}
.owk-meta{display:flex; align-items:center; gap:7px; font-size:.7rem; font-weight:700; color:#4f5259;}
.owk-meta em{font-style:normal; margin-left:auto; color:var(--oranje); background:#fef1e2; border-radius:999px; padding:1px 8px; font-size:.66rem; font-weight:800;}
.owk.active{background:linear-gradient(135deg,#062e6f,#0a4aa0); box-shadow:0 12px 26px rgba(7,56,137,.28);}
.owk.active:hover{background:linear-gradient(135deg,#062e6f,#0065cc); box-shadow:0 14px 30px rgba(7,56,137,.34);}
.owk.active .owk-nr{color:#fff;} .owk.active .owk-thema{color:#9ecae2;} .owk.active .owk-meta{color:#d3e6f0;}
.owk.active .owk-bar{background:rgba(255,255,255,.2);}
.owk.active .owk-vink{background:rgba(255,255,255,.22); color:#c9edcd;}
.owk.active .owk-meta em{background:rgba(255,255,255,.16); color:#fde1b6;}
.owk.af:not(.active){box-shadow:inset 0 0 0 1.5px #c9edcd; background:#e8f8ea;}
.owk.leeg:not(.active) .owk-bar{opacity:.45;}
.owk.leeg:not(.active) .owk-nr{color:#4f5259;}

/* toetsenbordgebruik: overal een duidelijke focusring */
.owk:focus-visible, .odag:focus-visible, .okaart:focus-visible, .oh-knop:focus-visible{outline:3px solid var(--oranje); outline-offset:2px;}

/* ---- dagrail: één pil per dag met wat er nog te doen is ---- */
.opdr-dagrail{display:flex; gap:8px; flex-wrap:wrap; padding:2px 0 14px; border-bottom:1px solid var(--hairline); margin-bottom:16px;}
.odag{display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; background:#fff; color:var(--blauw);
  border-radius:999px; padding:8px 8px 8px 15px; box-shadow:inset 0 0 0 1.5px #e9f4f8; transition:transform .14s, box-shadow .14s, background .14s;}
.odag:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(7,56,137,.13), inset 0 0 0 1.5px #d3e6f0;}
.odag b{font-family:'Exo',sans-serif; font-weight:800; font-size:.82rem;}
.odag span{font-size:.8rem; color:#4f5259; font-weight:600;}
.odag em{font-style:normal; min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:#e9f4f8; color:#4f5259;
  font-family:'Exo',sans-serif; font-weight:800; font-size:.72rem; display:inline-flex; align-items:center; justify-content:center;}
.odag em.open{background:#fef1e2; color:var(--oranje);}
.odag em.af{background:#e8f8ea; color:var(--groen-diep);}
.odag.nu{box-shadow:inset 0 0 0 1.5px rgba(244,96,21,.45);}
.odag.nu b{color:var(--oranje);}
.odag.active{background:var(--blauw); color:#fff; box-shadow:0 8px 20px rgba(7,56,137,.28);}
.odag.active span{color:#d3e6f0;}
.odag.active em{background:rgba(255,255,255,.18); color:#fff;}
.odag.active em.open{background:linear-gradient(135deg,#f79c44,#f46015); color:#fff;}

/* ---- dagkop boven de lijst ---- */
.opdr-dagkop{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:12px;}
.odk-links h3{font-family:'Exo',sans-serif; font-weight:800; font-size:1.16rem; color:var(--blauw); letter-spacing:-.01em;
  text-transform:none; margin:0; display:flex; align-items:center; gap:9px;}
.odk-nu{font-family:'Exo',sans-serif; font-weight:800; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  background:linear-gradient(135deg,#f79c44,#f46015); color:#fff; border-radius:999px; padding:3px 9px; box-shadow:0 4px 11px rgba(244,96,21,.35);}
.odk-links > span{display:block; font-size:.8rem; color:#9496a1; font-weight:600;}
.odk-bar{flex:1; min-width:120px; height:7px; border-radius:999px; background:#e9f4f8; overflow:hidden; margin-bottom:5px;}
.odk-bar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--blauw-bold),var(--oranje)); transition:width .5s cubic-bezier(.2,.7,.3,1);}

/* ---- de opdrachtkaarten ---- */
.opdr-lijst{display:flex; flex-direction:column; gap:10px;}
@keyframes okIn{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
.okaart{position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left; cursor:pointer;
  border:none; background:#fff; border-radius:17px; padding:15px 17px 15px 19px; color:var(--blauw);
  box-shadow:0 1px 2px rgba(7,56,137,.06), 0 3px 12px rgba(7,56,137,.05), inset 0 0 0 1.5px #e9f4f8;
  transition:transform .16s cubic-bezier(.2,.7,.3,1.3), box-shadow .16s; animation:okIn .4s cubic-bezier(.2,.7,.3,1) both;}
.okaart::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:#d3e6f0;}
.okaart:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(7,56,137,.15), inset 0 0 0 1.5px #d3e6f0;}
.okaart:active{transform:translateY(-1px);}

.ok-ico{flex-shrink:0; width:34px; height:34px; border-radius:12px; display:grid; place-items:center; font-size:.95rem; font-weight:800;
  background:#e9f4f8; color:#9496a1;}
.ok-mid{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.ok-titel{font-family:'Exo',sans-serif; font-weight:700; font-size:1rem; line-height:1.3; color:var(--blauw);}
.ok-blok{display:inline-flex; align-items:center; gap:7px; align-self:flex-start; font-size:.74rem; font-weight:700; color:#4f5259;
  background:#e9f4f8; border-radius:999px; padding:3px 11px;}
.okb-stip{width:6px; height:6px; border-radius:50%; background:#9496a1; flex-shrink:0;}
.ok-txt{font-size:.83rem; color:#4f5259; line-height:1.45; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
/* de tip loopt even breed als de rest van de kaartinhoud, zodat de randen uitlijnen */
.ok-tip{display:block; font-size:.8rem; color:#4f5259; background:#f5f5f9; border-radius:11px; padding:9px 13px; margin-top:5px; line-height:1.45; box-shadow:inset 3px 0 0 var(--oranje);}
.ok-tip b{display:block; font-family:'Exo',sans-serif; font-weight:800; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--oranje); margin-bottom:2px;}

.ok-rechts{flex-shrink:0; display:flex; align-items:center; gap:10px; align-self:center;}
/* een kaart mét trainer-tip wordt hoog: de status hoort dan op de titelregel, niet zwevend halverwege */
.okaart:has(.ok-tip) .ok-rechts{align-self:flex-start; margin-top:5px;}
.ostat{font-family:'Exo',sans-serif; font-weight:800; font-size:.65rem; letter-spacing:.06em; text-transform:uppercase;
  border-radius:999px; padding:5px 12px; white-space:nowrap; background:#e9f4f8; color:#4f5259;}
.ok-wanneer{min-width:42px; text-align:right; font-size:.72rem; color:#9496a1; font-weight:600; white-space:nowrap;}
.ok-pijl{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#e9f4f8; color:#9496a1;
  font-size:.9rem; font-weight:800; transition:transform .16s, background .16s, color .16s;}
.okaart:hover .ok-pijl{background:var(--blauw); color:#fff; transform:translateX(3px);}

/* statuskleuren: rail, icoon en badge in één keer */
.okaart.st-open::before{background:linear-gradient(180deg,#fde1b6,#f46015);}
.okaart.st-open .ok-ico{background:#fef1e2; color:var(--oranje);}
.okaart.st-open .ostat{background:#fef1e2; color:var(--oranje);}
.okaart.st-open:hover{box-shadow:0 14px 30px rgba(244,96,21,.16), inset 0 0 0 1.5px #fde1b6;}
.okaart.st-ingeleverd::before{background:linear-gradient(180deg,#00a8f5,#0065cc);}
.okaart.st-ingeleverd .ok-ico{background:#e9f4f8; color:#0065cc;}
.okaart.st-ingeleverd .ostat{background:#e9f4f8; color:#0065cc;}
.okaart.st-goedgekeurd::before{background:linear-gradient(180deg,#38bd47,#1e7e2b);}
.okaart.st-goedgekeurd{background:linear-gradient(120deg,#e8f8ea,#fff 60%);}
.okaart.st-goedgekeurd .ok-ico{background:#e8f8ea; color:var(--groen-diep);}
.okaart.st-goedgekeurd .ostat{background:#e8f8ea; color:var(--groen-diep);}
.okaart.st-goedgekeurd .ok-titel{color:#1e7e2b;}
.okaart.st-afgekeurd::before{background:linear-gradient(180deg,#b71525,#b71525);}
.okaart.st-afgekeurd{background:linear-gradient(120deg,#fbeaec,#fff 60%);}
.okaart.st-afgekeurd .ok-ico{background:#fbeaec; color:var(--rood);}
.okaart.st-afgekeurd .ostat{background:#fbeaec; color:var(--rood);}
.okaart.st-blok::before{background:linear-gradient(180deg,#00a8f5,#00a8f5);}
.okaart.st-blok .ok-ico{background:#e9f4f8; color:#0065cc;}
.okaart.st-blok .ostat{background:#e9f4f8; color:#0065cc;}

/* ---- lege staat ---- */
.opdr-leeg{text-align:center; background:#f5f5f9; border-radius:18px; padding:34px 20px;}
.opdr-leeg .ol-ico{display:grid; place-items:center; width:56px; height:56px; margin:0 auto 12px; border-radius:50%; background:#fff; font-size:1.5rem; box-shadow:var(--kaart-schaduw);}
.opdr-leeg b{display:block; font-family:'Exo',sans-serif; font-weight:800; font-size:1.02rem; color:var(--blauw);}
.opdr-leeg p{font-size:.86rem; color:#9496a1; margin-top:3px;}

/* ---- smallere schermen ---- */
@media (max-width:1080px){
  .oh-tegels{grid-template-columns:repeat(4,minmax(96px,1fr)); width:100%;}
}
@media (max-width:720px){
  .opdr-hero{padding:20px 18px; gap:18px;}
  .oh-ring{width:92px; height:92px;}
  .oh-ringlbl b{font-size:1.35rem;}
  .oh-tekst h2{font-size:1.22rem;}
  .oh-tegels{grid-template-columns:repeat(2,minmax(0,1fr));}
  .s19-paneel{padding:15px 14px 18px;}
  .opdr-weekrail{grid-auto-columns:minmax(136px,1fr);}
  .okaart{padding:13px 14px 13px 16px; gap:11px; flex-wrap:wrap;}
  .ok-rechts{width:100%; align-self:stretch; padding-left:45px; margin-top:-2px;}
  .ok-pijl{margin-left:auto;}
  .odk-bar{width:100%; flex:1 1 100%;}
}
/* de introzin op één regel: de leesbreedte van 74 letters brak hem middenin af */
#S19 .schermkop p.intro, #S12 .schermkop p.intro{max-width:none;}
#S19 .opdracht-kaart{box-shadow:inset 0 0 0 1.5px #e9f4f8; border-left:none; padding:13px 16px;}
#S19 .inlever-form{margin-top:10px; padding:13px 15px;}
#S19 .inlever-form textarea{border:none; background:#fff; border-radius:11px;}

/* agenda-export-knop */
.ics-knop{margin-top:12px; border:1.5px dashed var(--blauw-medium); background:#e9f4f8; font-weight:700;}
.ics-knop:hover{border-style:solid; border-color:var(--oranje); color:var(--oranje); background:#fff;}
#S2 .weekacties .ics-knop{margin-top:0;}

/* ---------- opstart: werkvlak pas tonen als het juiste scherm klaarstaat ---------- */
body.authed main{transition:opacity .28s ease;}
body.authed.laden main{opacity:0;}

/* ---------- uitgewerkte les: ingeklapt met fade + "Volledig bekijken" ---------- */
.les-viewer.ingeklapt{max-height:340px; overflow:hidden; position:relative;}
.les-viewer.ingeklapt::after{content:""; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(180deg, rgba(255,255,255,0), #fff 88%); border-radius:0 0 12px 12px; pointer-events:none;}
.les-uitklap{display:block; width:100%; margin:-2px 0 14px; text-align:center; font-weight:700;}
.les-uitklap:hover{color:var(--oranje); border-color:var(--oranje);}

/* ---------- uitgewerkte les: voorlezen met meelees-markering ---------- */
.les-luister{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#eef4fb; border:1px solid var(--blauw-soft); border-radius:12px; padding:10px 14px; margin:0 0 16px;}
.les-luister button{font-size:.85rem;}
.les-luister .les-tempo-lbl{font-size:.8rem; font-weight:700; color:var(--blauw-medium); display:flex; align-items:center; gap:6px;}
.les-luister select{font-family:'Source Sans 3',sans-serif; font-size:.85rem; color:var(--blauw);
  border:1.5px solid var(--blauw-soft); border-radius:9px; padding:6px 10px; background:var(--wit);}
.les-luister .les-luister-hint{font-size:.78rem; color:var(--blauw-medium); margin-left:auto;}
.les-viewer .les-spreek-actief{background:#e6f4fc; box-shadow:inset 3px 0 0 #009cdc; border-radius:8px;}
.les-viewer :is(h3, h4, p, li){scroll-margin:140px;}

/* ---------- nieuwe-versie-melding ---------- */
#app-vernieuw{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:9996;
  border:none; background:linear-gradient(135deg,#062e6f,#0a4aa0); color:#fff; font-family:'Source Sans 3',sans-serif;
  font-size:.9rem; border-radius:999px; padding:12px 22px; cursor:pointer; box-shadow:0 14px 34px rgba(4,29,71,.45), inset 0 -3px 0 rgba(0,0,0,.2);
  animation:appIn .4s ease both;}
#app-vernieuw b{color:#fde1b6;}
#app-vernieuw:hover{transform:translateX(-50%) translateY(-2px);}

/* ---------- meekijk-modus: alles zichtbaar, schrijf-acties gedempt ---------- */
body.kijkmodus :is(#du-opslaan, .update-form button, .beoordeel-acties button, .beoordeel-acties input,
  .statusknop, .groenbtn, .roodbtn, #S4 .oranjebtn, .sect-acties button, .upl-label,
  .inlever-form button, .beheer button, .ld-toevoegen button, .ld-lijst .weg,
  .regel-add button, .regel-rij .weg, .klant-edit button, .chatrij button,
  #btn-les-opslaan, #btn-les-bewerken, #btn-les-verwijderen, #btn-genereer-les, #btn-genereer-ppt){
  opacity:.45; filter:saturate(.4); cursor:not-allowed;}
body.kijkmodus :is(.mw-rij select, .update-form textarea, .inlever-form textarea, .chatrij input,
  .beheer input, .beheer select, .beheer textarea, input[type=file]){
  opacity:.55; pointer-events:none;}
body.kijkmodus .zijbalk .rolbadge{background:linear-gradient(135deg,#0065cc,#00a8f5); color:#fff;}

/* rechten-scherm: meekijker-rol herkenbaar in de keuzelijst */
.mw-rij select.r-meekijker{border-color:#00a8f5; background:#e9f4f8; color:#0065cc;}

/* meekijk-modus: lichting-beheer gedempt */
body.kijkmodus :is(#s1-plus-knop, [data-verwijder-lichting], [data-deelnemers-lichting]){opacity:.45; filter:saturate(.4); cursor:not-allowed;}

/* ---------- gegeven antwoorden in het deelnemerdossier ---------- */
.antw-kop{font-family:'Exo',sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blauw-medium); margin:12px 0 8px;}
.antw-rij{display:flex; gap:10px; align-items:flex-start; background:#f5f5f9; border-radius:12px; padding:10px 12px; margin-bottom:6px; font-size:.86rem;}
.antw-rij.goed{box-shadow:inset 3px 0 0 var(--groen);}
.antw-rij.fout{box-shadow:inset 3px 0 0 var(--rood); background:#fbeaec;}
.antw-rij .antw-ico{flex-shrink:0; margin-top:1px;}
.antw-rij .antw-inhoud{min-width:0;}
.antw-rij .antw-gegeven{color:#4f5259;}
.antw-rij small{color:#9496a1;}
#s5-antwoorden{max-height:420px; overflow-y:auto; margin-top:4px;}

/* ============================================================
   Mobiele dagagenda (Mijn academy op de telefoon)
   Eén dag tegelijk als lijst i.p.v. de brede weektabel.
   ============================================================ */
.rooster-mobiel{display:none;}

/* kop: navy balk met de gekozen dag + weekknop rechtsboven */
.ma-kop{display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#073889,#0065cc);
  color:#fff; border-radius:16px 16px 0 0; padding:14px 16px;}
.ma-kop-tekst{min-width:0; flex:1;}
.ma-kop-dag{font-family:'Exo',sans-serif; font-weight:800; font-size:1.12rem; line-height:1.2;}
.ma-kop-week{font-size:.76rem; color:#d3e6f0; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ma-weekknop{flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:1.5px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08); color:#fff; border-radius:11px;}
.ma-weekknop:hover, .ma-weekknop.open{border-color:var(--oranje); background:rgba(244,96,21,.16);}

/* weekkiezer die onder de kop openklapt */
.ma-weeklijst{background:#fff; border:2px solid var(--hairline); border-top:none; padding:8px; display:flex; flex-direction:column; gap:5px;}
.ma-weekrij{display:flex; align-items:center; gap:9px; text-align:left; width:100%; border:1.5px solid var(--blauw-soft);
  background:#fff; border-radius:11px; padding:9px 12px; color:var(--blauw);}
.ma-weekrij.active{background:var(--blauw); border-color:var(--blauw); color:#fff;}
.ma-weeknr{font-family:'Exo',sans-serif; font-weight:800; font-size:.86rem;}
.ma-weekthema{font-size:.78rem; color:#4f5259; flex:1;}
.ma-weekrij.active .ma-weekthema{color:#d3e6f0;}
.ma-weeknu{font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; background:var(--oranje); color:#fff; border-radius:999px; padding:2px 8px;}

/* dagbalk met pijltjes voor de week ervoor / erna */
.ma-strip{display:flex; align-items:stretch; gap:4px; background:#fff; border:2px solid var(--hairline); border-top:none; padding:8px 6px;}
.ma-pijl{flex-shrink:0; width:34px; border:none; background:transparent; color:var(--blauw); font-size:1.5rem; font-weight:700; border-radius:10px; line-height:1;}
.ma-pijl:hover:not(:disabled){background:var(--hairline); color:var(--oranje);}
.ma-pijl:disabled{color:#d3e6f0; cursor:default;}
.ma-dagen{display:flex; flex:1; justify-content:space-between; gap:3px;}
.ma-dag{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; border:none; background:transparent; padding:5px 0 6px; border-radius:11px; color:var(--blauw);}
.ma-dag .ma-dn{font-size:.68rem; font-weight:700; text-transform:lowercase; color:var(--blauw-medium);}
.ma-dag .ma-dd{display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  font-family:'Exo',sans-serif; font-weight:700; font-size:.9rem;}
.ma-dag.buiten{opacity:.5;}
/* smal weekendbalkje tussen twee lesdagen in de dagenstrip */
.ma-wkd{align-self:stretch; width:14px; flex:0 0 14px; display:flex; align-items:center; justify-content:center; margin:2px 1px;}
.ma-wkd i{font-style:normal; writing-mode:vertical-rl; transform:rotate(180deg); font-size:.5rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:#8a97a8; line-height:1;}
.ma-dag.vandaag .ma-dn{color:var(--oranje);}
.ma-dag.vandaag .ma-dd{color:var(--oranje);}
.ma-dag.active .ma-dd{background:var(--blauw); color:#fff;}
.ma-dag.active.vandaag .ma-dd{background:var(--oranje); color:#fff;}
.ma-dag.active .ma-dn{color:var(--blauw);}

/* lijst met blokken van de gekozen dag */
.ma-lijst{display:flex; flex-direction:column; gap:8px; background:#fff; border:2px solid var(--hairline); border-top:none; border-radius:0 0 16px 16px; padding:12px;}
.ma-blok{display:flex; align-items:stretch; gap:11px; text-align:left; width:100%; border:none; position:relative; overflow:hidden;
  background:#e9f4f8; border-radius:13px; padding:11px 13px 11px 16px; color:#4f5259;
  box-shadow:0 1px 2px rgba(7,56,137,.08), 0 2px 8px rgba(7,56,137,.05);}
.ma-blok::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:#073889;}
.ma-blok.kl-samen{background:#e9f4f8;} .ma-blok.kl-samen::before{background:#073889;}
.ma-blok.kl-com{background:#fef1e2;} .ma-blok.kl-com::before{background:#f46015;}
.ma-blok.kl-bo{background:#e8f8ea;} .ma-blok.kl-bo::before{background:#1e7e2b;}
.ma-blok.kl-opt{background:#e9f4f8;} .ma-blok.kl-opt::before{background:#00a8f5;}
.ma-blok:active{transform:scale(.99);}
.ma-nr{flex-shrink:0; display:flex; align-items:center; justify-content:center; width:30px; align-self:center;
  height:30px; border-radius:8px; background:rgba(255,255,255,.7); color:var(--blauw); font-family:'Exo',sans-serif; font-weight:800; font-size:.92rem;}
.ma-mid{min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; justify-content:center;}
.ma-titel{font-family:'Exo',sans-serif; font-weight:700; font-size:.92rem; color:var(--blauw); line-height:1.25;}
.ma-onder{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.ma-tijd{font-size:.78rem; font-weight:700; color:#4f5259;}
.ma-dur{font-size:.66rem; font-weight:600; color:#9496a1; background:rgba(255,255,255,.65); border-radius:999px; padding:1px 8px;}
.ma-sp{flex-shrink:0; align-self:center; font-size:.68rem; font-weight:800; color:var(--groen-diep); background:#e8f8ea; border-radius:999px; padding:3px 10px; white-space:nowrap;}

.ma-leegdag{background:#fff; border:2px solid var(--hairline); border-top:none; border-radius:0 0 16px 16px; padding:26px 18px; text-align:center; color:#4f5259; font-size:.9rem;}

/* legenda + onderbalk */
.ma-legenda{display:flex; flex-wrap:wrap; gap:12px; padding:12px 4px 2px; font-size:.74rem; color:#4f5259;}
.ma-lg{display:inline-flex; align-items:center; gap:6px;}
.ma-lgk{width:12px; height:12px; border-radius:4px; flex-shrink:0;}
.ma-lgk.kl-samen{background:#e9f4f8; box-shadow:inset 4px 0 0 #073889;}
.ma-lgk.kl-com{background:#fef1e2; box-shadow:inset 4px 0 0 #f46015;}
.ma-lgk.kl-bo{background:#e8f8ea; box-shadow:inset 4px 0 0 #1e7e2b;}
.ma-lgk.kl-opt{background:#e9f4f8; box-shadow:inset 4px 0 0 #00a8f5;}
.ma-onderbalk{display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap;}
.ma-vandaag{border:1.5px solid var(--blauw-soft); background:#fff; color:var(--blauw); font-weight:700; font-size:.84rem; border-radius:999px; padding:8px 18px;}
.ma-vandaag:hover{border-color:var(--blauw-medium);}
.ma-track{display:flex; margin-left:auto; border:1.5px solid var(--blauw-soft); border-radius:999px; overflow:hidden;}
.ma-track button{border:none; background:#fff; color:var(--blauw); font-size:.78rem; font-weight:600; padding:7px 14px;}
.ma-track button.active{background:var(--blauw); color:#fff;}

/* onder 720px: toon de dagagenda, verberg de brede tabel en de bewerk-panelen */
@media (max-width:720px){
  #S2 .rooster-mobiel{display:block;}
  #S2 #weektabs, #S2 .weekacties, #S2 #s2-rooster, #S2 #s2-terugkomend, #S2 #s2-backup{display:none !important;}
  /* de master-agenda houdt ook op mobiel de gewone weektabel (zijwaarts scrollbaar);
     de sleep-planken blijven verborgen — slepen werkt niet lekker op een telefoon */
  #S2.master-open .rooster-mobiel{display:none;}
  #S2.master-open #weektabs{display:flex !important;}
  #S2.master-open .weekacties{display:flex !important;}
  #S2.master-open #s2-rooster{display:block !important;}
}