/* Tegels en knoppen (v338), naar het voorbeeld van de magazijn-app.
   Eén set: primaire knop, tweede knop, tekstlink, tegel met titel + subregel,
   keuzetegel (radio), statusbadge, en de standen hover/focus/actief/bezig/uit.
   Kleuren komen uit de huisstijl van de organisatie: base.html en portal.html
   zetten --ad-primair (kleur_primair) en --ad-tweede (kleur_accent).
   Gebruik:
     <div class="ad-tegels">
       <a class="ad-tegel hoofd" href="..."><span class="ad-tegel-titel">Titel</span><span class="ad-tegel-sub">subregel</span></a>
     </div>
     <button class="ad-knop hoofd">Opslaan</button>  <a class="ad-link" href="...">tekstlink</a>
     <span class="ad-badge let-op">3 verlopen</span>
   Geen schaduwen, geen iconen, grote aanraakvlakken. */
:root{
  --ad-primair:#0b3d2e;
  --ad-tweede:#2f7d3b;
  --ad-vlak:#ffffff;
  --ad-achter:#f4f5f7;
  --ad-rand:#d4d8de;
  --ad-titel:#111111;
  --ad-sub:#5b6270;
  --ad-geel:#FCE96A; --ad-geel-tekst:#5b4a06;
  --ad-rood:#b42318; --ad-rood-bg:#fdecea;
  --ad-radius:10px;
  --ad-gap:16px;
  --ad-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
:root{
  --ad-primair-donker:#072a20;
  --ad-tweede-donker:#266832;
  --ad-primair-donker:color-mix(in srgb,var(--ad-primair) 78%,#000);
  --ad-tweede-donker:color-mix(in srgb,var(--ad-tweede) 84%,#000);
  --ad-primair-zacht:#e8f0ec;
  --ad-primair-zacht:color-mix(in srgb,var(--ad-primair) 9%,#fff);
}

/* ---------- Tegelraster ---------- */
.ad-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--ad-gap)}
.ad-tegels.smal{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.ad-tegels.lijst{grid-template-columns:1fr;gap:12px}
.ad-tegels>form{margin:0;display:flex}
.ad-tegels>form>.ad-tegel{flex:1}

/* ---------- Tegel (titel + subregel) ---------- */
.ad-tegel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:150px;margin:0;padding:18px 20px;box-sizing:border-box;width:100%;
  background:var(--ad-vlak);border:1px solid var(--ad-rand);border-radius:var(--ad-radius);
  color:var(--ad-titel);font-family:var(--ad-font);font-size:16px;text-align:center;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:border-color .12s,background-color .12s}
.ad-tegel-titel{display:block;font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-.01em}
.ad-tegel-sub{display:block;font-size:17px;font-weight:500;color:var(--ad-sub);line-height:1.3}
a.ad-tegel,a.ad-tegel:hover{text-decoration:none;color:var(--ad-titel)}
.ad-tegel:hover{border-color:var(--ad-primair);background:#fafbfa}
.ad-tegel:active{transform:translateY(1px);background:#f1f4f2}
.ad-tegel.hoofd,a.ad-tegel.hoofd{background:var(--ad-primair);border-color:var(--ad-primair);color:#fff}
.ad-tegel.hoofd:hover{background:var(--ad-primair-donker);border-color:var(--ad-primair-donker)}
.ad-tegel.tweede,a.ad-tegel.tweede{background:var(--ad-tweede);border-color:var(--ad-tweede);color:#fff}
.ad-tegel.tweede:hover{background:var(--ad-tweede-donker);border-color:var(--ad-tweede-donker)}
.ad-tegel.hoofd .ad-tegel-sub,.ad-tegel.tweede .ad-tegel-sub{color:rgba(255,255,255,.86)}
.ad-tegel.compact{min-height:96px;padding:14px 16px}
.ad-tegel.compact .ad-tegel-titel{font-size:22px}
.ad-tegel.compact .ad-tegel-sub{font-size:15px}

/* ---------- Keuzetegel (radio): soort, tijd ---------- */
label.ad-keuze{position:relative;display:block;margin:0;cursor:pointer;font:inherit;color:inherit}
.ad-keuze input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.ad-keuze .ad-tegel{pointer-events:none}
.ad-keuze input:checked + .ad-tegel{background:var(--ad-primair);border-color:var(--ad-primair);color:#fff}
.ad-keuze input:checked + .ad-tegel .ad-tegel-sub{color:rgba(255,255,255,.86)}
.ad-keuze input:focus-visible + .ad-tegel{outline:3px solid var(--ad-tweede);outline-offset:2px}
.ad-keuze:hover input:not(:checked):not(:disabled) + .ad-tegel{border-color:var(--ad-primair)}
.ad-keuze input:disabled + .ad-tegel{opacity:.45;cursor:not-allowed}

/* ---------- Knoppen ---------- */
.ad-knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;margin:0;padding:12px 22px;
  box-sizing:border-box;border-radius:var(--ad-radius);border:1px solid var(--ad-rand);background:var(--ad-vlak);
  color:var(--ad-titel);font-family:var(--ad-font);font-size:18px;font-weight:800;line-height:1.2;
  text-decoration:none;text-align:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:border-color .12s,background-color .12s}
a.ad-knop,a.ad-knop:hover{text-decoration:none;color:var(--ad-titel)}
.ad-knop:hover{border-color:var(--ad-primair);background:var(--ad-vlak)}
.ad-knop:active{transform:translateY(1px)}
.ad-knop.hoofd,a.ad-knop.hoofd{background:var(--ad-primair);border-color:var(--ad-primair);color:#fff}
.ad-knop.hoofd:hover{background:var(--ad-primair-donker);border-color:var(--ad-primair-donker)}
.ad-knop.tweede,a.ad-knop.tweede{background:var(--ad-tweede);border-color:var(--ad-tweede);color:#fff}
.ad-knop.tweede:hover{background:var(--ad-tweede-donker);border-color:var(--ad-tweede-donker)}
.ad-knop.klein{min-height:42px;padding:8px 14px;font-size:15px}
.ad-knop.breed{width:100%}
.ad-knoppen{display:flex;flex-wrap:wrap;gap:12px}
.ad-knoppen>.ad-knop{flex:1 1 200px}
.ad-knoppen>.ad-knop.hoofd{flex:2 1 260px}

/* ---------- Tekstlink ---------- */
.ad-link{font-family:var(--ad-font);font-weight:700;color:var(--ad-primair);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;background:none;border:0;margin:0;padding:0;cursor:pointer;font-size:inherit}
.ad-link:hover{color:var(--ad-tweede);text-decoration-thickness:2px;background:none}

/* ---------- Statusbadge ---------- */
.ad-badge{display:inline-block;font-family:var(--ad-font);font-size:14px;font-weight:800;line-height:1;
  padding:5px 10px;border-radius:999px;background:#eceff2;color:#333;font-variant-numeric:tabular-nums;vertical-align:middle}
.ad-badge.let-op{background:var(--ad-geel);color:var(--ad-geel-tekst)}
.ad-badge.ok{background:#e3f1e5;color:#1d5a27}
.ad-badge.fout{background:var(--ad-rood-bg);color:var(--ad-rood)}
.ad-tegel .ad-badge{position:absolute;top:12px;right:12px}
.ad-tegel.compact .ad-badge{position:static;order:3;font-size:13px;padding:4px 9px}
.ad-tegel.hoofd .ad-badge,.ad-tegel.tweede .ad-badge{background:rgba(255,255,255,.2);color:#fff}

/* ---------- Focus, uit, bezig ---------- */
.ad-tegel:focus-visible,.ad-knop:focus-visible,.ad-link:focus-visible{outline:3px solid var(--ad-tweede);outline-offset:2px}
.ad-tegel:disabled,.ad-knop:disabled,.ad-tegel[aria-disabled="true"],.ad-knop[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;pointer-events:none}
.ad-tegel[aria-busy="true"],.ad-knop[aria-busy="true"]{position:relative;cursor:progress;pointer-events:none;overflow:hidden}
.ad-tegel[aria-busy="true"]::after,.ad-knop[aria-busy="true"]::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:40%;
  background:currentColor;opacity:.55;border-radius:2px;animation:ad-bezig 1.1s ease-in-out infinite}
@keyframes ad-bezig{0%{left:-40%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){
  .ad-tegel,.ad-knop{transition:none}
  .ad-tegel[aria-busy="true"]::after,.ad-knop[aria-busy="true"]::after{animation:none;left:0;width:100%;opacity:.3}
}

/* ---------- Mobiel ---------- */
@media (max-width:600px){
  :root{--ad-gap:12px}
  .ad-tegel{min-height:104px;padding:14px 16px}
  .ad-tegel-titel{font-size:23px}
  .ad-tegel-sub{font-size:15.5px}
  .ad-tegel.compact{min-height:76px}
  .ad-tegel.compact .ad-tegel-titel{font-size:20px}
  .ad-knop{font-size:17px}
  .ad-knoppen>.ad-knop{flex-basis:100%}
}