/* ===================================================================
   styles.css — huisstijl Werken aan Programma's
   =================================================================== */
:root{
  --groen:#53A863;
  --groen-donker:#3F8B4E;
  --groen-diep:#2E6B47;
  --groen-licht:#CBE5D0;
  --tint:#EDF6EF;
  --tint2:#E4EFE7;
  --inkt:#1F1F1F;
  --grijs:#5C6660;
  --grijs-licht:#8B9490;
  --lijn:#E3E8E4;
  --wit:#fff;
  --room:#F7FAF8;
  --let-op:#D98324;
  --let-op-bg:#FDF3E6;
  --vraag:#3F8DA0;
  --vraag-bg:#E9F3F6;
  --tip:#7A7A85;
  --tip-bg:#F2F2F4;
  --fout:#B44B36;
  --radius:10px;
  --schaduw:0 1px 2px rgba(31,31,31,.05),0 6px 20px rgba(31,31,31,.06);
  --schaduw-diep:0 10px 40px rgba(31,31,31,.14);
  --font:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--font);color:var(--inkt);background:var(--room);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:var(--groen-donker);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-weight:700;line-height:1.25;margin:0}
h1{font-size:25px}h2{font-size:19px}h3{font-size:15px}
p{margin:0 0 12px}
.verborgen{display:none !important}
.klein{font-size:12.5px;color:var(--grijs)}
.mini{font-size:11.5px;color:var(--grijs-licht)}
.stil{color:var(--grijs)}
.midden{text-align:center}
.rij{display:flex;gap:10px;align-items:center}
.rij-tussen{display:flex;gap:10px;align-items:center;justify-content:space-between}
.rek{flex:1}
.stapel{display:flex;flex-direction:column;gap:12px}

/* ---------------- knoppen ---------------- */
.knop{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--lijn);border-radius:var(--radius);
  padding:9px 15px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.13s;background:var(--wit);color:var(--inkt);
  font-family:var(--font);line-height:1.2;white-space:nowrap}
.knop:hover{border-color:#c9d4cc;background:#fbfdfb}
.knop:active{transform:scale(.985)}
.knop:disabled{opacity:.5;cursor:not-allowed}
.knop-hoofd{background:var(--groen);color:#fff;border-color:var(--groen)}
.knop-hoofd:hover{background:var(--groen-donker);border-color:var(--groen-donker)}
.knop-stil{background:transparent;border-color:transparent;color:var(--groen-donker)}
.knop-stil:hover{background:var(--tint);border-color:transparent}
.knop-gevaar{color:var(--fout);border-color:#EBD3CC}
.knop-gevaar:hover{background:#FDF1EE;border-color:var(--fout)}
.knop-klein{padding:6px 11px;font-size:12.5px}
.knop-vol{width:100%;justify-content:center}
.knop.actief{background:var(--groen-diep);color:#fff;border-color:var(--groen-diep)}
.knop i{font-size:16px}

/* ---------------- kaarten en velden ---------------- */
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:18px;box-shadow:var(--schaduw)}
.veld{margin-bottom:13px}
.veld label{display:block;font-size:12.5px;color:var(--grijs);margin-bottom:5px;font-weight:700}
.veld input,.veld textarea,.veld select{width:100%;border:1px solid var(--lijn);border-radius:8px;padding:9px 11px;
  font-size:14px;font-family:var(--font);background:var(--wit);color:var(--inkt)}
.veld textarea{min-height:74px;resize:vertical;line-height:1.5}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:none;border-color:var(--groen);box-shadow:0 0 0 3px rgba(83,168,99,.16)}
.veld .hint{font-size:11.5px;color:var(--grijs-licht);margin-top:4px}
.veld-rij{display:flex;gap:12px}
.veld-rij>*{flex:1}

.speld{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:20px;
  background:var(--tint);color:var(--groen-diep)}
.speld-let-op{background:var(--let-op-bg);color:var(--let-op)}
.speld-vraag{background:var(--vraag-bg);color:var(--vraag)}
.speld-tip{background:var(--tip-bg);color:var(--tip)}
.speld-grijs{background:#F1F2F1;color:var(--grijs)}

/* Merkje bij een functie die er wel staat maar nog niet werkt, omdat de
   meedenker nog niet is ingeregeld. Bewust rustig en niet alarmerend: er is
   niets stuk, er ontbreekt alleen nog iets. De uitleg zit in de title. */
.nog-uit{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;
  padding:1px 7px;border-radius:20px;background:var(--let-op-bg);color:var(--let-op);
  vertical-align:middle;margin-left:6px;white-space:nowrap;cursor:help}
.nog-uit i{font-size:12px}
/* ⚠️ Nodig omdat .keuze span en .keuze i zwaarder wegen dan .nog-uit: zonder
   deze regels wordt het merkje op een starttegel een blok over de volle
   breedte, met een veel te groot pictogram. */
.keuze .nog-uit{display:inline-flex;width:auto}
.keuze .nog-uit span{display:inline;font-size:10.5px;color:inherit;line-height:1}
.keuze .nog-uit i{font-size:12px;color:inherit}
/* In een tabknop is er weinig plek: daar alleen het pictogram. */
#paneel-tabs .nog-uit{margin-left:4px;padding:1px 4px}
#paneel-tabs .nog-uit span{display:none}

/* ---------------- inloggen ---------------- */
.inlog-vlak{height:100%;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;
  background:linear-gradient(160deg,var(--room) 0%,var(--tint2) 100%)}
.inlog-kaart{background:var(--wit);border-radius:16px;box-shadow:var(--schaduw-diep);width:100%;max-width:430px;overflow:hidden}
.inlog-kop{background:var(--groen-diep);color:#fff;padding:24px 30px}
.inlog-kop .merk{font-size:19px;font-weight:700;display:flex;align-items:center;gap:10px}
.inlog-kop .sub{color:#BFDCC6;font-size:12.5px;margin-top:5px}
.inlog-body{padding:24px 30px 28px}
.inlog-wissel{margin-top:16px;padding-top:15px;border-top:1px solid var(--lijn);font-size:13px;color:var(--grijs)}

/* ---------------- app-raamwerk ---------------- */
#app{height:100%;display:flex;flex-direction:column}
.balk{height:54px;flex:0 0 54px;background:var(--wit);border-bottom:1px solid var(--lijn);display:flex;align-items:center;
  gap:12px;padding:0 14px;z-index:20}
.balk .merk{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--groen-diep);cursor:pointer}
.balk .merk img{height:24px;width:auto}
.kruimel{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--grijs);min-width:0}
.kruimel .nu{color:var(--inkt);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.kruimel i{font-size:14px;color:var(--grijs-licht)}
.balk-rechts{margin-left:auto;display:flex;align-items:center;gap:8px}

.aanwezigen{display:flex;align-items:center}
.aanwezigen .bol{width:28px;height:28px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;border:2px solid var(--wit);margin-left:-7px;cursor:default}
.aanwezigen .bol:first-child{margin-left:0}

.werkvlak{flex:1;display:flex;min-height:0}
.pagina{flex:1;overflow:auto;padding:26px 30px 60px}
.pagina-smal{max-width:900px;margin:0 auto}

/* ---------------- gereedschap links ---------------- */
.gereedschap{width:62px;flex:0 0 62px;background:var(--wit);border-right:1px solid var(--lijn);
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;overflow-y:auto}
.gereedschap .scheiding{width:32px;height:1px;background:var(--lijn);margin:6px 0}
.ger-knop{width:44px;height:44px;border-radius:9px;border:1px solid transparent;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--grijs);font-family:var(--font)}
.ger-knop:hover{background:var(--tint)}
.ger-knop.actief{background:var(--tint2);color:var(--groen-diep)}
.ger-knop i{font-size:19px}
.ger-knop span{font-size:8.5px;font-weight:700;letter-spacing:.2px}
.ger-type{position:relative}
.ger-type .stip{width:11px;height:11px;border-radius:3px;border:2px solid}

/* ---------------- doek ---------------- */
.doek-vlak{flex:1;position:relative;min-width:0;background:
  radial-gradient(circle at 1px 1px, #DDE5E0 1px, transparent 0) 0 0/22px 22px, var(--room)}
svg.doek{width:100%;height:100%;display:block;cursor:grab;touch-action:none;user-select:none}
svg.doek:active{cursor:grabbing}
.kaart-titel{font:700 13.5px var(--font);fill:var(--inkt)}
.kaart-tekst{font:400 11px var(--font);fill:var(--grijs)}
.kaart-type{font:700 8.5px var(--font);letter-spacing:.7px}
.kaart-initialen{font:700 10px var(--font);fill:#fff}
.kaart-meta{font:600 9.5px var(--font)}
.kwaliteit-label{font:700 11px var(--font)}
.groep-label{font:700 12px var(--font)}
.groep-knop{font:700 16px var(--font);cursor:pointer}
.klap-teken{font:700 13px var(--font);cursor:pointer}
.aanwijzer-naam{font:700 11px var(--font);fill:#fff}
.doek .kaart{cursor:move}
.doek .greep{opacity:0;transition:opacity .12s;cursor:crosshair}
.doek .kaart:hover .greep{opacity:1}
.doek .klapknop{cursor:pointer}
/* De hulplijn en het keuzekader liggen bovenop de kaartjes. Zonder deze regel
   vindt het loslaten van een pijl de hulplijn in plaats van het kaartje. */
.doek .hulplijn,.doek .kiesvak{pointer-events:none}
.doek .los-rand{animation:pols 2.4s ease-in-out infinite}
@keyframes pols{0%,100%{opacity:.85}50%{opacity:.35}}

.doek-hulp{position:absolute;left:14px;bottom:14px;display:flex;gap:6px;align-items:center;
  background:rgba(255,255,255,.94);border:1px solid var(--lijn);border-radius:10px;padding:5px 8px;box-shadow:var(--schaduw)}
.doek-hulp button{border:none;background:transparent;cursor:pointer;padding:5px 7px;border-radius:6px;color:var(--grijs);font-family:var(--font)}
.doek-hulp button:hover{background:var(--tint)}
.doek-hulp .schaal{font-size:12px;color:var(--grijs);min-width:44px;text-align:center;font-weight:700}

.legenda{position:absolute;right:14px;bottom:14px;background:rgba(255,255,255,.95);border:1px solid var(--lijn);
  border-radius:10px;padding:9px 12px;box-shadow:var(--schaduw);font-size:11.5px;max-width:220px}
.legenda .regel{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.legenda .vlek{width:12px;height:12px;border-radius:3px;border:1.5px solid;flex:0 0 12px}

.melding-balk{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:var(--inkt);color:#fff;
  padding:9px 16px;border-radius:20px;font-size:13px;box-shadow:var(--schaduw-diep);z-index:30;max-width:70%}
.melding-balk.goed{background:var(--groen-diep)}
.melding-balk.fout{background:var(--fout)}

.presenteer-balk{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:var(--wit);
  border:1px solid var(--lijn);border-radius:24px;padding:6px 8px;display:flex;align-items:center;gap:8px;
  box-shadow:var(--schaduw-diep);z-index:25}
.presenteer-balk .stap-tekst{font-size:12.5px;font-weight:700;color:var(--groen-diep);padding:0 6px}

/* ---------------- rechterpaneel ---------------- */
.paneel{width:352px;flex:0 0 352px;background:var(--wit);border-left:1px solid var(--lijn);display:flex;flex-direction:column;min-height:0}
.paneel-tabs{display:flex;border-bottom:1px solid var(--lijn);flex:0 0 auto}
.paneel-tabs button{flex:1;border:none;background:transparent;padding:11px 4px 9px;cursor:pointer;font-family:var(--font);
  font-size:11.5px;font-weight:700;color:var(--grijs);border-bottom:2px solid transparent;display:flex;flex-direction:column;
  align-items:center;gap:2px}
.paneel-tabs button i{font-size:17px}
.paneel-tabs button.actief{color:var(--groen-diep);border-bottom-color:var(--groen)}
.paneel-tabs button:hover{background:var(--room)}
.paneel-tabs .telling{position:absolute;margin:-14px 0 0 16px;background:var(--let-op);color:#fff;border-radius:9px;
  font-size:9.5px;padding:0 5px;line-height:15px;min-width:16px;text-align:center}
.paneel-inhoud{flex:1;overflow-y:auto;padding:16px}
.paneel-kop{font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--grijs-licht);margin:18px 0 8px}
.paneel-kop:first-child{margin-top:0}

.bevinding{border:1px solid var(--lijn);border-left-width:4px;border-radius:9px;padding:11px 12px;margin-bottom:9px;cursor:pointer;
  background:var(--wit);transition:.12s}
.bevinding:hover{border-color:#c9d4cc;background:#fcfdfc}
.bevinding.aandacht{border-left-color:var(--let-op)}
.bevinding.vraag{border-left-color:var(--vraag)}
.bevinding.tip{border-left-color:var(--tip)}
.bevinding .kop{font-weight:700;font-size:13px;margin-bottom:3px;display:flex;gap:6px;align-items:baseline}
.bevinding .tekst{font-size:12.5px;line-height:1.5}
.bevinding .waarom{font-size:11.5px;color:var(--grijs-licht);margin-top:6px;font-style:italic;display:none}
.bevinding.open .waarom{display:block}

.gesprek{display:flex;flex-direction:column;gap:10px}
.bericht{padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.55;max-width:92%;white-space:pre-wrap}
.bericht.app{background:var(--tint);color:var(--inkt);border-bottom-left-radius:3px;align-self:flex-start}
.bericht.ik{background:var(--groen-diep);color:#fff;border-bottom-right-radius:3px;align-self:flex-end}
.bericht .hint{font-size:11.5px;opacity:.8;margin-top:5px;display:block}

.lijstje{list-style:none;padding:0;margin:0}
.lijstje li{padding:9px 0;border-bottom:1px solid var(--lijn);display:flex;gap:10px;align-items:flex-start}
.lijstje li:last-child{border-bottom:none}

.tabel{width:100%;border-collapse:collapse;font-size:13.5px}
.tabel th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--grijs-licht);
  padding:8px 10px;border-bottom:1px solid var(--lijn);font-weight:700}
.tabel td{padding:9px 10px;border-bottom:1px solid var(--lijn);vertical-align:top}
.tabel tr:hover td{background:var(--room)}

/* ---------------- vensters ---------------- */
.sluier{position:fixed;inset:0;background:rgba(31,31,31,.42);display:flex;align-items:center;justify-content:center;
  padding:24px;z-index:100;overflow:auto}
.venster{background:var(--wit);border-radius:14px;box-shadow:var(--schaduw-diep);width:100%;max-width:620px;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden}
.venster-breed{max-width:940px}
.venster-kop{padding:18px 22px;border-bottom:1px solid var(--lijn);display:flex;align-items:center;gap:12px}
.venster-kop h2{flex:1}
.venster-body{padding:20px 22px;overflow-y:auto}
.venster-voet{padding:14px 22px;border-top:1px solid var(--lijn);display:flex;gap:10px;justify-content:flex-end;background:var(--room)}
.sluit{border:none;background:transparent;cursor:pointer;color:var(--grijs);font-size:20px;padding:4px 8px;border-radius:6px}
.sluit:hover{background:var(--room)}

/* ---------------- programma-overzicht ---------------- */
.programma-rooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.programma-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:18px;cursor:pointer;
  transition:.14s;box-shadow:var(--schaduw);display:flex;flex-direction:column;gap:8px;min-height:150px}
.programma-kaart:hover{border-color:var(--groen);transform:translateY(-1px);box-shadow:0 4px 22px rgba(31,31,31,.09)}
.programma-kaart h3{font-size:16px}
.programma-kaart .voet{margin-top:auto;display:flex;gap:8px;align-items:center;font-size:11.5px;color:var(--grijs-licht);flex-wrap:wrap}

/* Het menuutje rechtsboven op een kaart. De kaart zelf is één grote knop naar
   het programma, dus dit stukje moet daar bovenop liggen en zijn eigen kliks
   tegenhouden. Vandaar de hogere z-index en de aparte afhandeling in app.js. */
.programma-kaart{position:relative}
.kaart-menu{position:absolute;top:10px;right:10px;z-index:3}
.kaart-menu-knop{opacity:0;transition:.12s;padding:4px 7px;line-height:1;border-color:transparent;background:transparent}
.programma-kaart:hover .kaart-menu-knop,.kaart-menu-knop:focus-visible,.kaart-menu.open .kaart-menu-knop{opacity:1}
.kaart-menu-knop:hover{background:var(--tint);border-color:transparent}
/* Op een aanraakscherm bestaat zweven niet, dus daar staat hij altijd aan. */
@media (hover:none){.kaart-menu-knop{opacity:.6}}
.kaart-menu .menu{position:absolute;top:calc(100% + 4px);right:0;min-width:210px;background:var(--wit);
  border:1px solid var(--lijn);border-radius:10px;box-shadow:var(--schaduw-diep);padding:5px;
  display:none;text-align:left}
.kaart-menu.open .menu{display:block}
.kaart-menu .menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  font-family:var(--font);font-size:13px;color:var(--inkt);padding:7px 10px;border-radius:7px;line-height:1.35}
.kaart-menu .menu-item:hover{background:var(--tint)}
.kaart-menu .menu-item-gevaar{color:var(--fout)}
.kaart-menu .menu-item-gevaar:hover{background:#FDF1EE}
.kaart-menu .menu-kop{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs-licht);
  padding:7px 10px 3px}
.kaart-menu .menu-scheiding{height:1px;background:var(--lijn);margin:5px 0}

.stappen{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.stappen .stap{font-size:12px;padding:5px 12px;border-radius:20px;background:var(--wit);border:1px solid var(--lijn);color:var(--grijs)}
.stappen .stap.nu{background:var(--groen-diep);color:#fff;border-color:var(--groen-diep)}
.stappen .stap.klaar{background:var(--tint);color:var(--groen-diep);border-color:var(--groen-licht)}

.keuze-rooster{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.keuze{border:1px solid var(--lijn);border-radius:11px;padding:15px;cursor:pointer;background:var(--wit);transition:.13s;text-align:left}
.keuze:hover{border-color:var(--groen);background:var(--tint)}
.keuze.gekozen{border-color:var(--groen);border-width:2px;background:var(--tint)}
.keuze i{font-size:22px;color:var(--groen-diep)}
.keuze b{display:block;margin:7px 0 3px;font-size:14px}
.keuze span{font-size:12px;color:var(--grijs);line-height:1.45;display:block}

.neerzetvlak{border:2px dashed var(--groen-licht);border-radius:12px;padding:28px;text-align:center;background:var(--tint);
  cursor:pointer;transition:.13s}
.neerzetvlak:hover,.neerzetvlak.over{border-color:var(--groen);background:var(--tint2)}
.neerzetvlak i{font-size:30px;color:var(--groen-donker)}

.balkje{height:6px;border-radius:3px;background:var(--lijn);overflow:hidden}
.balkje div{height:100%;background:var(--groen);transition:width .3s}

.wolk{display:inline-block;width:14px;height:14px;border:2px solid var(--groen-licht);border-top-color:var(--groen);
  border-radius:50%;animation:draai .7s linear infinite;vertical-align:-2px}
@keyframes draai{to{transform:rotate(360deg)}}

.let-op-vlak{background:var(--let-op-bg);border:1px solid #F0D9B8;border-radius:9px;padding:11px 13px;font-size:12.5px;color:#8A5A12}
.info-vlak{background:var(--tint);border:1px solid var(--groen-licht);border-radius:9px;padding:11px 13px;font-size:12.5px;color:var(--groen-diep)}
.fout-vlak{background:#FDF1EE;border:1px solid #EBD3CC;border-radius:9px;padding:11px 13px;font-size:12.5px;color:#8A3624}

.schakelaar{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;padding:5px 0}
.schakelaar input{width:auto;margin:0}
.type-regel{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13px}
.type-regel .vlek{width:14px;height:14px;border-radius:4px;border:2px solid;flex:0 0 14px}
.type-regel input[type=text]{flex:1;border:1px solid transparent;background:transparent;padding:3px 6px;border-radius:5px;font-family:var(--font);font-size:13px}
.type-regel input[type=text]:hover{border-color:var(--lijn)}
.type-regel input[type=text]:focus{border-color:var(--groen);background:var(--wit);outline:none}

.kleurkiezer{display:flex;gap:6px;flex-wrap:wrap}
.kleurkiezer button{width:26px;height:26px;border-radius:7px;border:2px solid var(--lijn);cursor:pointer;padding:0}
.kleurkiezer button.gekozen{border-color:var(--inkt);transform:scale(1.1)}

.voetnoot{margin-top:36px;padding-top:18px;border-top:1px solid var(--lijn);font-size:12px;color:var(--grijs-licht);line-height:1.6}

@media (max-width:900px){
  .paneel{position:fixed;right:0;top:54px;bottom:0;z-index:40;box-shadow:var(--schaduw-diep);width:min(352px,88vw);flex-basis:auto}
  .paneel.dicht{display:none}
  .kruimel .nu{max-width:40vw}
  .pagina{padding:18px 16px 50px}
}
@media print{
  body{overflow:visible}
  .balk,.gereedschap,.paneel,.doek-hulp,.presenteer-balk{display:none !important}
  .werkvlak,#app{display:block;height:auto}
}