/* ===========================================================================
   De Werkplek, de rij programma's op Start en het formulier voor eigen tegels.

   Een eigen bestand naast stijl.css, zodat dit deel apart te vervangen is. Het
   leunt op de kleuren en maten uit stijl.css (:root) en voegt er geen nieuwe
   kleuren aan toe.

   Rustig houden. Op de Werkplek is er één gekleurd vlak: de balk met de
   vuistregels, omdat dat het deel is dat je moet onthouden. De tegels zijn wit,
   het gekozen tabje is een streep en geen gevuld blokje, en het ⓘ-knopje is
   grijs tot je erop komt. Elk extra gekleurd vlak trekt de aandacht weg van de
   ene plek die hem nodig heeft.
   =========================================================================== */

/* ---------- De breedte ----------
   Niet de volle 1340 pixels van .inhoud. Tegels die over de hele breedte
   uitwaaieren lezen als een rommelige rij; in een kolom van ongeveer acht
   tegels breed zie je ze in één oogopslag.

   Het is de hele inhoud die smaller wordt, niet alleen de blokken erin: het
   vraagteken van de hulp (inc/layout.php) zweeft rechts in .inhoud, en zou
   anders los helemaal rechts staan, ver van de titel. Een browser zonder :has()
   laat de pagina gewoon op de volle breedte zien. */
.inhoud:has(> .wp-kop) { max-width: 68rem; }

/* ---------- De titel met de rondleiding ernaast ----------
   Een flexregel en geen float: de hulpknop uit inc/layout.php zweeft al naar
   rechts, en deze regel schuift daar netjes naast in plaats van eronder. */
.wp-kop {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .2rem 1rem; margin-bottom: .8rem;
}
.wp-kop h1 { margin: 0; }
.wp-rondleiding { font-size: .86rem; color: var(--grijs); white-space: nowrap; }
.wp-rondleiding:hover { color: var(--oudroze); }

/* ---------- De vuistregels ----------
   Eén smalle balk, aubergine met witte letters. Dicht staan er vier vragen met
   het antwoord in één vet woord; open de volledige regels in kolommen. stijl.css
   geeft elke <details> een grijs kader, dat gaat er hier af. */
.wp-regels, .wp-regels[open] {
  background: var(--aubergine); color: #fff;
  border: 0; border-radius: 12px; padding: 0; margin: 0 0 1.3rem;
}
.wp-regels > summary {
  display: flex; align-items: center; gap: .4rem 1.2rem;
  padding: .6rem 1rem; list-style: none; cursor: pointer;
  font-family: var(--body); color: #fff; letter-spacing: 0;
}
.wp-regels > summary::-webkit-details-marker { display: none; }
.wp-regels > summary::marker { content: ''; }
.wp-regels-kop {
  flex: none; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.wp-regels-kort {
  flex: 1; min-width: 0;
  display: flex; flex-wrap: wrap; gap: .15rem 1.6rem;
  font-size: .9rem; color: #E8E1F0;
}
.wp-regels-kort b { color: #fff; font-weight: 700; }
.wp-regels-meer {
  flex: none; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; color: rgba(255,255,255,.75);
}
.wp-regels-meer::after {
  content: ''; width: .4rem; height: .4rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .12s ease;
}
.wp-regels[open] .wp-regels-meer::after { transform: translateY(1px) rotate(-135deg); }
.wp-regels > summary:hover .wp-regels-meer { color: #fff; }
.wp-regels > summary:focus-visible { outline-offset: -3px; border-radius: 12px; }

.wp-regels-uit {
  margin: 0; padding: .8rem 1rem 1rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .8rem 1.4rem;
}
.wp-regels-uit dt { font-family: var(--display); font-weight: 700; font-size: .92rem; letter-spacing: -.01em; }
.wp-regels-uit dd { margin: .1rem 0 0; font-size: .86rem; line-height: 1.45; color: #E8E1F0; }
.wp-regels-uit a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.wp-regels-uit a:hover { color: var(--saliegroen); }

/* ---------- De tabjes ----------
   Een streep onder het gekozen tabje, geen gevulde knop: de vuistregels zijn
   al het gekleurde vlak. hidden moet hier uitdrukkelijk blijven werken, want
   display: flex zou het anders overschrijven en dan staan er zonder
   JavaScript knoppen die niets doen. */
.wp-tabs {
  display: flex; gap: .2rem; margin: 0 0 1rem;
  border-bottom: 1px solid var(--lijn);
  overflow-x: auto; scrollbar-width: none;
}
.wp-tabs::-webkit-scrollbar { display: none; }
.wp-tabs[hidden] { display: none; }
.wp-tab {
  flex: none; margin-bottom: -1px; padding: .55rem .85rem .5rem;
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  font-family: var(--body); font-size: .93rem; font-weight: 600; color: var(--grijs);
  cursor: pointer; white-space: nowrap;
}
.wp-tab:hover { color: var(--aubergine); }
.wp-tab[aria-selected="true"] { color: var(--aubergine); border-bottom-color: var(--aubergine); }
.wp-tab:focus-visible { outline-offset: -3px; }

/* Zonder tabjes (geen JavaScript, of maar één groep) staan de groepen onder
   elkaar met een klein kopje. Met tabjes zegt het tabje al welke groep het is,
   dan blijft het kopje alleen voor een schermlezer. */
.wp-groepkop {
  font-family: var(--body); font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grijs); margin: 1.3rem 0 .6rem;
}
.wp-groep:first-child .wp-groepkop { margin-top: 0; }
.wp-met-tabs .wp-groepkop {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: 0;
}

/* ---------- De tegels ----------
   Vierkant, wit, een icoon en een naam. De hele tegel is de link; het
   ⓘ-knopje staat ernaast in de HTML en hier rechtsboven eroverheen. */
.wp-tegels {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .8rem;
}
.wp-tegel { position: relative; min-width: 0; }
.wp-tegel-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
  aspect-ratio: 1; padding: .9rem .6rem .7rem;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(60,44,84,.05);
  text-decoration: none; color: var(--tekst);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.wp-tegel-link:hover {
  transform: translateY(-2px); box-shadow: var(--schaduw);
  border-color: #D8D0E2; color: var(--aubergine);
}
.wp-tegel-link:focus-visible { outline-offset: 3px; border-radius: 16px; }
.wp-tegel-icoon { font-size: 2.3rem; line-height: 1; }
.wp-tegel-naam {
  font-size: .9rem; font-weight: 600; line-height: 1.2; text-align: center;
  hyphens: auto; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.wp-lang .wp-tegel-link { padding-left: .3rem; padding-right: .3rem; }
.wp-lang .wp-tegel-naam { font-size: .76rem; -webkit-line-clamp: 3; }

/* Een download: een klein pijltje rechtsonder op het icoon, zoals een badge op
   een app. Zo zie je dat de tegel iets binnenhaalt in plaats van een pagina
   opent, zonder een extra regel tekst. */
.wp-tegel-icoon { position: relative; }
.wp-dl {
  position: absolute; right: -.45rem; bottom: -.3rem;
  display: flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--vlak); border: 1px solid var(--lijn);
  font-size: .68rem; line-height: 1; color: var(--aubergine);
}

/* Een eigen tegel zonder link, alleen zichtbaar voor het MT. Gestippeld en
   verbleekt: hij is er wel, maar werkt nog niet. */
.wp-zonder .wp-tegel-link { border-style: dashed; box-shadow: none; background: transparent; }
.wp-zonder .wp-tegel-icoon { opacity: .5; }
.wp-tegel-let { font-size: .72rem; color: var(--grijs); margin-top: -.3rem; }

.wp-info-knop {
  position: absolute; top: .4rem; right: .4rem;
  display: flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; padding: 0;
  border: 1px solid var(--lijn); border-radius: 50%; background: var(--vlak);
  font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700;
  font-size: .88rem; line-height: 1; color: #857F8F; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.wp-info-knop[hidden] { display: none; }
.wp-info-knop:hover, .wp-info-knop:focus-visible {
  background: var(--aubergine); border-color: var(--aubergine); color: #fff;
}

/* Op een telefoon drie op een rij, zoals een beginscherm. minmax(8.5rem) zou
   er daar twee van maken, met veel te grote tegels. */
@media (max-width: 560px) {
  .wp-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
  .wp-tegel-link { padding: .7rem .35rem .5rem; gap: .4rem; border-radius: 14px; }
  .wp-tegel-icoon { font-size: 1.85rem; }
  .wp-tegel-naam { font-size: .78rem; }
  .wp-info-knop { top: .25rem; right: .25rem; width: 1.55rem; height: 1.55rem; font-size: .8rem; }
  .wp-lang .wp-tegel-naam { font-size: .72rem; }
  /* De vier zinnetjes onder elkaar: naast elkaar breken ze midden in een vraag. */
  .wp-regels > summary { align-items: flex-start; padding: .6rem .8rem; }
  .wp-regels-kop { display: none; }
  .wp-regels-kort { flex-direction: column; gap: .1rem; font-size: .86rem; }
  .wp-regels-meer { margin-top: .1rem; }
}

/* ---------- Het zijpaneel ----------
   Een <dialog> die rechts over de volle hoogte inschuift. De dialog zelf heeft
   geen padding: alles wat je ziet is een kind ervan, dus een klik op de dialog
   zelf is altijd een klik op de achtergrond ernaast (werkplek.js sluit dan). */
.wp-paneel {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(26rem, 100vw); max-width: 100vw; height: 100%; max-height: 100%;
  padding: 0; border: 0; border-left: 1px solid var(--lijn);
  background: var(--vlak); color: var(--tekst);
  box-shadow: -16px 0 40px rgba(42,30,61,.16);
}
.wp-paneel[open] { display: flex; flex-direction: column; animation: wp-in .18s ease-out; }
.wp-paneel::backdrop { background: rgba(42,30,61,.32); }
@keyframes wp-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .wp-paneel[open] { animation: none; } }

.wp-paneel-kop {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.1rem 1rem 1rem 1.25rem; border-bottom: 1px solid var(--lijn);
}
.wp-paneel-icoon { font-size: 1.9rem; line-height: 1; flex: none; }
.wp-paneel-kop h2 { flex: 1; min-width: 0; margin: 0; font-size: 1.15rem; }
.wp-paneel-dicht {
  flex: none; width: 2.2rem; height: 2.2rem; padding: 0;
  border: 0; border-radius: 50%; background: none;
  font-size: 1.6rem; line-height: 1; color: var(--grijs); cursor: pointer;
}
.wp-paneel-dicht:hover { background: var(--achtergrond); color: var(--aubergine); }

.wp-paneel-in { flex: 1; overflow-y: auto; padding: 1.1rem 1.25rem 1.2rem; }
.wp-paneel-labels { margin: 0 0 .6rem; display: flex; gap: .35rem; }
.wp-paneel-waarvoor { font-size: 1rem; line-height: 1.5; margin: 0 0 1.2rem; }
.wp-paneel-in h3 {
  font-family: var(--body); font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grijs); margin: 0 0 .55rem;
}
.wp-paneel-stappen { margin: 0; padding-left: 1.25rem; font-size: .95rem; line-height: 1.5; }
.wp-paneel-stappen li { margin-bottom: .5rem; padding-left: .15rem; }
.wp-paneel-stappen li::marker { color: var(--grijs); font-weight: 600; }

.wp-paneel-voet { padding: 1rem 1.25rem 1.2rem; border-top: 1px solid var(--lijn); }
.wp-paneel-voet .knop { display: block; text-align: center; padding: .8rem 1.2rem; font-size: 1rem; }

/* ---------- Waar zet ik wat neer ----------
   Voor de beheerder, klein onderaan het tabje Beheer. Een regel grijze tekst
   tot je hem openklapt; zonder het kader dat stijl.css elke <details> geeft. */
.wp-waar, .wp-waar[open] { border: 0; border-radius: 0; padding: 0; background: none; margin-top: 1.6rem; }
.wp-waar > summary {
  display: inline-flex; align-items: center; gap: .35rem; list-style: none;
  font-family: var(--body); font-size: .86rem; color: var(--grijs); letter-spacing: 0;
}
.wp-waar > summary::-webkit-details-marker { display: none; }
.wp-waar > summary::marker { content: ''; }
.wp-waar > summary::before {
  content: ''; width: .38rem; height: .38rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .12s ease;
}
.wp-waar[open] > summary::before { transform: rotate(45deg); }
.wp-waar > summary:hover { color: var(--oudroze); }
.wp-waar .gegevens { margin-top: .6rem; font-size: .9rem; background: var(--vlak); border-radius: 12px; }

/* ---------- De rij op Start ----------
   Eén regel, onder de groet. Op een smal scherm schuift hij opzij in plaats
   van dat hij over twee regels valt en de rest van Start omlaag duwt. */
.start-gereedschap {
  display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; margin: 0 0 .85rem; padding: .1rem 0;
}
.start-gereedschap::-webkit-scrollbar { display: none; }
.start-gereedschap a.sg-knop {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  padding: .28rem .75rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
  background: var(--vlak); border: 1px solid var(--lijn);
  color: var(--aubergine); font-size: .88rem; font-weight: 500;
}
.start-gereedschap a.sg-knop:hover { border-color: var(--aubergine-licht); color: var(--aubergine); }
.start-gereedschap a.sg-alles {
  flex: none; margin-left: .35rem; font-size: .88rem; white-space: nowrap; color: var(--grijs);
}
.start-gereedschap a.sg-alles:hover { color: var(--oudroze); }

/* ---------- Eigen tegels: toevoegen, wijzigen, weghalen ----------
   Alleen het MT en de beheerder zien dit. Zo rustig mogelijk: de tegel
   "+ Toevoegen" is gestippeld en kleurloos, en de knoppen Wijzigen en
   Weghalen in het paneel zijn klein en omlijnd onder de hoofdknop. */
.wp-plus .wp-tegel-link {
  background: transparent; border-style: dashed; border-color: #CFC8D8; box-shadow: none;
  color: var(--grijs);
}
.wp-plus .wp-tegel-link:hover { transform: none; box-shadow: none; border-color: var(--grijs); color: var(--aubergine); }
.wp-plus .wp-tegel-icoon { font-size: 2rem; font-weight: 300; color: var(--grijs); }
.wp-plus .wp-tegel-naam { font-weight: 500; }

.wp-paneel-beheer { display: flex; gap: .45rem; margin-top: .7rem; }
.wp-paneel-beheer form { margin: 0; }
.wp-paneel-voet .wp-paneel-beheer .knop { display: inline-block; padding: .38rem .85rem; font-size: .84rem; }

/* Het formulier in het zijpaneel. Het formulier vult het paneel, zodat de
   velden scrollen en de knop Toevoegen onderaan blijft staan. */
.wp-formpaneel { width: min(28rem, 100vw); }
.wp-form { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
.wp-form .wp-paneel-in { padding-top: .2rem; }
.wp-form .wp-form-fout { margin: 1rem 0 0; }
/* De middelste kolom breder: daar staat "Voor iedereen", de langste keuze. */
.wp-form-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 .5rem; }
.wp-form-rij select { padding-left: .5rem; padding-right: .2rem; font-size: .94rem; }
.wp-label-bij { font-weight: 400; font-size: .84rem; color: var(--grijs); }
.wp-stappenveld { min-height: 0; }

.wp-icoonkeuze { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.wp-form input.wp-icoonveld { width: 3.6rem; flex: none; text-align: center; font-size: 1.3rem; padding: .4rem .3rem; }
.wp-iconen { display: flex; flex-wrap: wrap; gap: .1rem; }
.wp-iconen[hidden] { display: none; }
.wp-icoonknop {
  width: 2rem; height: 2rem; padding: 0; border: 1px solid transparent; border-radius: 8px;
  background: none; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.wp-icoonknop:hover, .wp-icoonknop:focus-visible { border-color: var(--lijn); background: var(--achtergrond); }

/* Op een telefoon Soort en Voor wie naast elkaar, en het tabje over de hele
   breedte eronder. dense laat Voor wie de plek naast Soort opvullen. */
@media (max-width: 560px) {
  .wp-form-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
  .wp-form-rij > :nth-child(2) { grid-column: 1 / -1; }
  .wp-icoonkeuze { flex-wrap: nowrap; }
  .wp-form input.wp-icoonveld { width: 3rem; }
}