/* Praktijkacademie Vakwerk — designsysteem.
   Eén bestand, alleen klassen die de shell en de views ook echt gebruiken. */

/* ============================================================== tokens === */
:root{
  --ac-inkt:#16202b;
  --ac-inkt-zacht:#48586a;
  --ac-lijn:#e3e8ee;
  --ac-papier:#f6f8fa;
  --ac-wit:#ffffff;
  --ac-accent:#2f9ec4;
  --ac-accent-diep:#1f6f8c;
  --ac-groen:#43c06a;
  --ac-amber:#e8a13a;
  --ac-rood:#d7484d;
  --ac-r:14px;
  --ac-schaduw:0 10px 30px rgba(22,32,43,.08);

  --ac-kop:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ac-tekst:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ac-zij:248px;
  --ac-raak:44px;

  /* Blijft staan voor het merkmanifest van dit voorbeeld. */
  --warn:var(--ac-amber);
}

/* =============================================================== reset === */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ac-tekst);
  font-size:15px;
  line-height:1.6;
  color:var(--ac-inkt);
  background:var(--ac-papier);
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--ac-kop);line-height:1.22;margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{max-width:100%}
img{display:block;height:auto}
a{color:var(--ac-accent-diep)}
button{font:inherit;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--ac-accent);outline-offset:2px;border-radius:6px}

/* Alleen voor schermlezers. */
.ac-vpl{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.ac-zacht{color:var(--ac-inkt-zacht);font-size:.88em}
.ac-midden{text-align:center}
.ac-kicker{
  font-family:var(--ac-kop);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ac-accent-diep);
}
.ac-ic{width:20px;height:20px;fill:currentColor;flex:none}

/* ================================================================ shell === */
.ac-app{display:grid;grid-template-columns:var(--ac-zij) minmax(0,1fr);min-height:100vh}

.ac-zijbalk{
  background:var(--ac-inkt);color:#dbe4ee;
  display:flex;flex-direction:column;gap:6px;
  padding:18px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.ac-merk{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;color:#fff}
.ac-merk__vlak{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:linear-gradient(140deg,var(--ac-accent),var(--ac-accent-diep));
  display:grid;place-items:center;font-family:var(--ac-kop);font-weight:800;color:#fff;font-size:15px;
}
.ac-merk__naam{font-family:var(--ac-kop);font-weight:800;font-size:15px;line-height:1.2}
.ac-merk__naam span{display:block;font-size:11px;font-weight:600;color:#9db0c4;letter-spacing:.04em}

.ac-rolwissel{
  display:flex;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:4px;margin-bottom:12px;
}
.ac-rolknop{
  flex:1;min-height:var(--ac-raak);border:0;border-radius:8px;background:transparent;color:#c3d1e0;
  font-size:13px;font-weight:600;cursor:pointer;padding:6px 8px;
}
.ac-rolknop:hover{background:rgba(255,255,255,.08);color:#fff}
.ac-rolknop.is-actief{background:var(--ac-accent);color:#fff}

.ac-nav{display:flex;flex-direction:column;gap:3px}
.ac-navlink{
  display:flex;align-items:center;gap:11px;min-height:var(--ac-raak);
  padding:10px 12px;border-radius:10px;text-decoration:none;color:#c3d1e0;
  font-size:14px;font-weight:600;
}
.ac-navlink:hover{background:rgba(255,255,255,.09);color:#fff}
.ac-navlink.is-actief{background:var(--ac-accent);color:#fff}

.ac-zij-vul{flex:1}
.ac-zij-voet{border-top:1px solid rgba(255,255,255,.12);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.ac-mij{display:flex;align-items:center;gap:10px;font-size:13px;color:#c3d1e0}
.ac-mij strong{display:block;color:#fff;font-size:13.5px}
.ac-mij span{font-size:12px}
.ac-avatar{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--ac-accent-diep);color:#fff;font-weight:700;font-size:11.5px;letter-spacing:.02em;
}
.ac-zij-voet .ac-knop{width:100%;justify-content:center}

.ac-hoofd{display:flex;flex-direction:column;min-width:0}
.ac-topbalk{
  display:flex;align-items:center;gap:12px;
  background:var(--ac-wit);border-bottom:1px solid var(--ac-lijn);
  padding:10px 20px;position:sticky;top:0;z-index:20;
}
.ac-topbalk h1{font-size:17px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-topacties{margin-left:auto;display:flex;align-items:center;gap:8px}
.ac-iconknop{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  min-height:var(--ac-raak);min-width:var(--ac-raak);justify-content:center;
  border:1px solid var(--ac-lijn);background:var(--ac-wit);border-radius:10px;
  padding:0 12px;cursor:pointer;color:var(--ac-inkt-zacht);font-size:13px;
}
.ac-iconknop:hover{border-color:var(--ac-accent);color:var(--ac-accent-diep)}
.ac-iconknop kbd{
  font:inherit;font-size:11px;background:var(--ac-papier);border:1px solid var(--ac-lijn);
  border-radius:5px;padding:1px 5px;color:var(--ac-inkt-zacht);
}
.ac-belbol{
  position:absolute;top:5px;right:5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--ac-rood);color:#fff;font-size:10.5px;font-weight:700;
  display:grid;place-items:center;
}
.ac-menuknop{display:none}

#scherm{padding:22px 20px 40px;min-width:0;outline:none}
.ac-scherm{max-width:1160px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.ac-scherm--les{max-width:820px}
.ac-kop h2{font-size:24px;margin-bottom:5px}

.ac-onderbalk{display:none}

/* =============================================================== knoppen === */
.ac-knop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--ac-raak);padding:10px 18px;border-radius:10px;border:1px solid transparent;
  font-family:var(--ac-kop);font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;
  background:var(--ac-wit);color:var(--ac-inkt);border-color:var(--ac-lijn);
}
.ac-knop:hover{border-color:var(--ac-accent);color:var(--ac-accent-diep)}
.ac-knop--hoofd{background:var(--ac-accent);border-color:var(--ac-accent);color:#fff}
.ac-knop--hoofd:hover{background:var(--ac-accent-diep);border-color:var(--ac-accent-diep);color:#fff}
.ac-knop--stil{background:var(--ac-wit);color:var(--ac-inkt-zacht)}
/* Ook de kleine variant houdt het raakdoel van 44px; alleen de vorm is compacter. */
.ac-knop--klein{min-height:var(--ac-raak);padding:8px 14px;font-size:13px}
.ac-knop[disabled]{opacity:.5;cursor:default}
.ac-knop[disabled]:hover{border-color:var(--ac-lijn);color:var(--ac-inkt)}

/* ============================================================== kaarten === */
.ac-kaart{
  background:var(--ac-wit);border:1px solid var(--ac-lijn);border-radius:var(--ac-r);
  padding:20px;box-shadow:var(--ac-schaduw);display:flex;flex-direction:column;gap:12px;min-width:0;
}
.ac-kaart h3{font-size:16px}
.ac-sectie{display:flex;flex-direction:column;gap:14px}
.ac-sectie__kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ac-sectie__kop h3{font-size:16px}
.ac-kolommen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;align-items:start}
.ac-kolommen--breed{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}

.ac-melding{
  border-radius:10px;padding:11px 14px;font-size:13.5px;border:1px solid var(--ac-lijn);
  background:var(--ac-papier);color:var(--ac-inkt-zacht);
}
.ac-melding--let-op{border-color:#f2dcb4;background:#fdf6e9;color:#7c5a17}
.ac-melding--fout{border-color:#f2c9ca;background:#fdeded;color:#8e2b2f}

/* ================================================================= tags === */
.ac-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;
  background:var(--ac-papier);color:var(--ac-inkt-zacht);border:1px solid var(--ac-lijn);white-space:nowrap;
}
.ac-tag--open{background:#eef4f8;border-color:#d6e5ee;color:#2b5468}
.ac-tag--bezig{background:#fdf6e9;border-color:#f2dcb4;color:#7c5a17}
.ac-tag--let-op{background:#fdf6e9;border-color:#f2dcb4;color:#7c5a17}
.ac-tag--goed{background:#eaf8ef;border-color:#c6ebd3;color:#1f7a3f}
.ac-tag--fout{background:#fdeded;border-color:#f2c9ca;color:#8e2b2f}
.ac-vlag{
  position:absolute;left:10px;top:10px;background:var(--ac-inkt);color:#fff;
  font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;letter-spacing:.02em;
}
.ac-telbol{
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-left:7px;
  border-radius:11px;background:var(--ac-papier);border:1px solid var(--ac-lijn);
  font-size:12px;font-weight:700;color:var(--ac-inkt-zacht);
}
.ac-laat{color:var(--ac-rood);font-weight:600}

/* =============================================================== ringen === */
.ac-ringen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.ac-ringkaart{
  background:var(--ac-wit);border:1px solid var(--ac-lijn);border-radius:var(--ac-r);
  padding:20px;box-shadow:var(--ac-schaduw);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.ac-ringkaart h3{font-size:15px}
.ac-ring{position:relative;display:inline-grid;place-items:center}
.ac-ring svg{transform:rotate(-90deg)}
.ac-ring__spoor{fill:none;stroke:var(--ac-lijn)}
.ac-ring__vulling{fill:none;stroke-linecap:round;transition:stroke-dasharray .5s ease}
.ac-ring__midden{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.ac-ring__midden strong{font-family:var(--ac-kop);font-size:24px}
.ac-ring__midden strong span{font-size:13px;font-weight:600;color:var(--ac-inkt-zacht)}
.ac-ring__midden em{font-style:normal;font-size:11.5px;color:var(--ac-inkt-zacht)}

.ac-balk{display:block;height:7px;border-radius:99px;background:var(--ac-lijn);overflow:hidden}
.ac-balk span{display:block;height:100%;border-radius:99px;background:var(--ac-accent);transition:width .4s ease}

/* ============================================================== taken === */
.ac-takenlijst{display:flex;flex-direction:column;gap:9px}
.ac-taak{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border:1px solid var(--ac-lijn);border-radius:10px;padding:11px 13px;background:var(--ac-papier);
}
.ac-taak__tekst{min-width:0;display:flex;flex-direction:column;gap:2px}
.ac-taak__tekst strong{font-size:14px}
.ac-taak__rechts{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* ========================================================== cursuskaart === */
.ac-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px}
.ac-cursuskaart{
  background:var(--ac-wit);border:1px solid var(--ac-lijn);border-radius:var(--ac-r);
  overflow:hidden;box-shadow:var(--ac-schaduw);display:flex;flex-direction:column;min-width:0;
}
.ac-cursuskaart__beeld{position:relative;display:block;aspect-ratio:16/9;background:var(--ac-papier)}
.ac-cursuskaart__beeld img{width:100%;height:100%;object-fit:cover}
.ac-cursuskaart__body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1}
.ac-cursuskaart__body h3{font-size:16px}
.ac-cursuskaart__body h3 a{text-decoration:none;color:var(--ac-inkt)}
.ac-cursuskaart__body h3 a:hover{color:var(--ac-accent-diep)}
.ac-cursuskaart__body p{font-size:13.5px;color:var(--ac-inkt-zacht)}
.ac-cursuskaart__voet{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px;
}

/* ============================================================== filters === */
.ac-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.ac-veld{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:13px;color:var(--ac-inkt-zacht)}
.ac-veld--zoek{flex:1 1 240px}
.ac-veld input,.ac-veld select,.ac-veld textarea{
  font:inherit;font-size:14px;color:var(--ac-inkt);background:var(--ac-wit);
  border:1px solid var(--ac-lijn);border-radius:10px;padding:10px 13px;min-height:var(--ac-raak);width:100%;
}
.ac-veld textarea{min-height:120px;resize:vertical;line-height:1.55}
.ac-veld input:focus,.ac-veld select:focus,.ac-veld textarea:focus{border-color:var(--ac-accent);outline-offset:1px}

.ac-chips{display:flex;flex-wrap:wrap;gap:7px}
.ac-chip{
  min-height:var(--ac-raak);padding:8px 15px;border-radius:999px;cursor:pointer;
  border:1px solid var(--ac-lijn);background:var(--ac-wit);color:var(--ac-inkt-zacht);
  font-size:13px;font-weight:600;
}
.ac-chip:hover{border-color:var(--ac-accent);color:var(--ac-accent-diep)}
.ac-chip.is-actief{background:var(--ac-inkt);border-color:var(--ac-inkt);color:#fff}

.ac-schakel{display:inline-flex;align-items:center;gap:9px;min-height:var(--ac-raak);font-size:13.5px;cursor:pointer}
.ac-schakel input{width:20px;height:20px;flex:none;accent-color:var(--ac-accent)}
.ac-schakel--rij{
  display:flex;align-items:flex-start;gap:11px;border:1px solid var(--ac-lijn);
  border-radius:10px;padding:12px 13px;background:var(--ac-papier);
}
.ac-schakel--rij input{margin-top:3px}
.ac-schakel--rij span{display:block}
.ac-schakel--rij .ac-zacht{display:block;margin-top:2px}

/* ============================================================== kruimels === */
.ac-kruimels{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--ac-inkt-zacht)}
.ac-kruimels a{color:var(--ac-accent-diep)}

/* ================================================================== hero === */
.ac-hero{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:0;
  background:var(--ac-wit);border:1px solid var(--ac-lijn);border-radius:var(--ac-r);
  overflow:hidden;box-shadow:var(--ac-schaduw);
}
.ac-hero__beeld{width:100%;height:100%;object-fit:cover;min-height:210px}
.ac-hero__tekst{padding:22px;display:flex;flex-direction:column;gap:11px;min-width:0}
.ac-hero__tekst h2{font-size:23px}
.ac-hero__tekst p{color:var(--ac-inkt-zacht);font-size:14.5px}
.ac-hero__acties{display:flex;flex-wrap:wrap;gap:9px;margin-top:2px}
.ac-meta{display:flex;flex-wrap:wrap;gap:8px 18px}
.ac-meta li{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ac-inkt-zacht)}
.ac-meta .ac-ic{width:16px;height:16px;color:var(--ac-accent)}

/* ================================================================ lessen === */
.ac-lessen{display:flex;flex-direction:column;gap:7px;counter-reset:les}
.ac-les__link{
  display:flex;align-items:center;gap:13px;min-height:var(--ac-raak);
  padding:11px 13px;border:1px solid var(--ac-lijn);border-radius:10px;
  text-decoration:none;color:var(--ac-inkt);background:var(--ac-wit);
}
.ac-les__link:hover{border-color:var(--ac-accent);background:var(--ac-papier)}
.ac-les__nr{
  width:29px;height:29px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--ac-papier);border:1px solid var(--ac-lijn);
  font-family:var(--ac-kop);font-weight:700;font-size:13px;color:var(--ac-inkt-zacht);
}
.ac-les.is-klaar .ac-les__nr{background:var(--ac-groen);border-color:var(--ac-groen);color:#fff}
.ac-les.is-klaar .ac-les__nr .ac-ic{width:17px;height:17px}
.ac-les__tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ac-les__tekst strong{font-size:14px}
.ac-les__tekst .ac-zacht{display:flex;align-items:center;gap:6px}
.ac-les__tekst .ac-ic{width:14px;height:14px}
.ac-les__status{font-size:12.5px;color:var(--ac-inkt-zacht);font-weight:600;flex:none}
.ac-toetskaart{align-self:start}

.ac-lesblad{gap:14px}
.ac-lesblad h2{font-size:22px}
.ac-prose{display:flex;flex-direction:column;gap:13px;font-size:15.5px;line-height:1.7}
.ac-lesvoet{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

.ac-video{position:relative;margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--ac-lijn)}
.ac-video img{width:100%}
.ac-video__knop{
  position:absolute;left:50%;top:calc(50% - 26px);transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:rgba(22,32,43,.72);color:#fff;
}
.ac-video__knop .ac-ic{width:26px;height:26px}
.ac-video figcaption{padding:11px 13px;background:var(--ac-papier);font-size:13px;color:var(--ac-inkt-zacht)}

.ac-vinklijst{display:flex;flex-direction:column;gap:7px}
.ac-vinkregel label{
  display:flex;align-items:flex-start;gap:11px;min-height:var(--ac-raak);
  padding:10px 13px;border:1px solid var(--ac-lijn);border-radius:10px;
  background:var(--ac-wit);cursor:pointer;font-size:14.5px;
}
.ac-vinkregel input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--ac-groen)}
.ac-vinkregel.is-aan label{background:#f2fbf5;border-color:#c6ebd3}

.ac-opdracht{display:flex;flex-direction:column;gap:11px}

/* ================================================================= toets === */
.ac-toets{display:flex;flex-direction:column;gap:14px}
.ac-vraag{border:1px solid var(--ac-lijn);border-radius:var(--ac-r);padding:16px 17px;margin:0;background:var(--ac-wit)}
.ac-vraag legend{
  font-family:var(--ac-kop);font-weight:700;font-size:15.5px;padding:0 0 10px;
  display:flex;flex-direction:column;gap:4px;
}
.ac-vraag__nr{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-accent-diep)}
.ac-vraag.is-goed{border-color:#c6ebd3;background:#f7fdf9}
.ac-vraag.is-fout{border-color:#f2c9ca;background:#fefafa}
.ac-optie{
  display:flex;align-items:flex-start;gap:11px;min-height:var(--ac-raak);
  padding:10px 13px;border:1px solid var(--ac-lijn);border-radius:10px;
  margin-bottom:7px;cursor:pointer;background:var(--ac-wit);font-size:14.5px;
}
.ac-optie input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--ac-accent)}
.ac-optie:hover{border-color:var(--ac-accent)}
.ac-optie.is-gekozen{border-color:var(--ac-accent);background:#f2fafd}
.ac-optie.is-juist{border-color:var(--ac-groen);background:#f2fbf5}
.ac-optie.is-onjuist{border-color:var(--ac-rood);background:#fdf2f2}
.ac-uitleg{margin-top:6px;font-size:13.5px;color:var(--ac-inkt-zacht);border-left:3px solid var(--ac-lijn);padding-left:11px}
.ac-uitslag{gap:10px;align-items:flex-start}
.ac-uitslag.is-goed{border-color:#c6ebd3}
.ac-uitslag.is-fout{border-color:#f2c9ca}

/* =========================================================== certificaat === */
.ac-certificaat{background:var(--ac-wit);border:1px solid var(--ac-lijn);border-radius:var(--ac-r);padding:14px;box-shadow:var(--ac-schaduw)}
.ac-certificaat__rand{
  border:2px solid var(--ac-accent);border-radius:10px;padding:34px 26px;text-align:center;
  display:flex;flex-direction:column;gap:9px;background:
    radial-gradient(circle at 50% 0%,rgba(47,158,196,.07),transparent 60%);
}
.ac-certificaat__merk{
  font-family:var(--ac-kop);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  font-size:12px;color:var(--ac-accent-diep);
}
.ac-certificaat__rand h2{font-size:26px}
.ac-certificaat__regel{font-size:13.5px;color:var(--ac-inkt-zacht)}
.ac-certificaat__naam{font-family:var(--ac-kop);font-size:29px;font-weight:800;line-height:1.2}
.ac-certificaat__cursus{font-family:var(--ac-kop);font-size:20px;font-weight:700;color:var(--ac-accent-diep)}
.ac-certificaat__gegevens{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;
  margin:14px 0 0;padding-top:16px;border-top:1px solid var(--ac-lijn);text-align:left;
}
.ac-certificaat__gegevens dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ac-inkt-zacht)}
.ac-certificaat__gegevens dd{margin:2px 0 0;font-weight:700;font-size:14.5px}
.ac-certificaat__voet{margin-top:12px;font-size:12px;color:var(--ac-inkt-zacht)}

/* ================================================================ tabel === */
.ac-tabelhouder{overflow-x:auto;border:1px solid var(--ac-lijn);border-radius:var(--ac-r);background:var(--ac-wit)}
.ac-tabel{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.ac-tabel th,.ac-tabel td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--ac-lijn);vertical-align:middle}
.ac-tabel thead th{
  background:var(--ac-papier);font-family:var(--ac-kop);font-size:12.5px;padding-top:2px;padding-bottom:2px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ac-inkt-zacht);white-space:nowrap;
}
.ac-tabel tbody tr:last-child th,.ac-tabel tbody tr:last-child td{border-bottom:0}
.ac-tabel tbody tr:hover{background:var(--ac-papier)}
.ac-tabel tbody tr.is-gekozen{background:#f2fafd}
.ac-tabel tbody tr:focus-visible{outline:3px solid var(--ac-accent);outline-offset:-3px}
.ac-tabel__vink{width:44px}
.ac-tabel__vink input{width:21px;height:21px;accent-color:var(--ac-accent)}
.ac-tabel__voortgang{min-width:160px}
.ac-tabel__voortgang .ac-balk{margin-top:5px}
.ac-persoon{display:flex;align-items:center;gap:10px;min-width:0}
.ac-persoon .ac-zacht{display:block}

.ac-sorteer{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 0;min-height:var(--ac-raak);
  cursor:pointer;font:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;
}
.ac-sorteer:hover{color:var(--ac-accent-diep)}
.ac-sorteer__pijl{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid currentColor;opacity:0}
.ac-sorteer.is-actief{color:var(--ac-accent-diep)}
.ac-sorteer.is-actief .ac-sorteer__pijl{opacity:1}
.ac-sorteer.is-af .ac-sorteer__pijl{transform:rotate(180deg)}

.ac-bulk{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  background:var(--ac-inkt);color:#fff;border-radius:10px;padding:10px 14px;font-size:13.5px;font-weight:600;
}
.ac-bulk .ac-knop--stil{background:transparent;color:#c3d1e0;border-color:rgba(255,255,255,.25)}
.ac-bulk .ac-knop--stil:hover{color:#fff;border-color:#fff}

/* ================================================================= bord === */
.ac-bord{display:grid;grid-template-columns:repeat(3,minmax(230px,1fr));gap:16px;align-items:start}
.ac-kolom{
  background:var(--ac-wit);border:1px solid var(--ac-lijn);border-radius:var(--ac-r);
  padding:14px;display:flex;flex-direction:column;gap:11px;min-width:0;
}
.ac-kolom.is-doel{border-color:var(--ac-accent);background:#f2fafd}
.ac-kolom__kop h3{font-size:15px;display:flex;align-items:center}
.ac-kolom__lijst{display:flex;flex-direction:column;gap:9px;min-height:70px}
.ac-kolom__leeg{
  border:1px dashed var(--ac-lijn);border-radius:10px;padding:15px;text-align:center;
  color:var(--ac-inkt-zacht);font-size:13px;
}
.ac-bordkaart{
  border:1px solid var(--ac-lijn);border-radius:10px;padding:12px;background:var(--ac-papier);
  display:flex;flex-direction:column;gap:7px;cursor:grab;
}
.ac-bordkaart.is-sleep{opacity:.5}
.ac-bordkaart__cursus{font-family:var(--ac-kop);font-weight:700;font-size:14px;line-height:1.3}
.ac-bordkaart .ac-persoon{font-size:13px;color:var(--ac-inkt-zacht)}
.ac-bordkaart .ac-avatar{width:26px;height:26px;font-size:10.5px}
.ac-bordkaart__voet{display:flex;flex-wrap:wrap;gap:6px}
.ac-bordkaart__zet select{
  font:inherit;font-size:13px;width:100%;min-height:var(--ac-raak);padding:8px 10px;
  border:1px solid var(--ac-lijn);border-radius:8px;background:var(--ac-wit);color:var(--ac-inkt);
}

/* ============================================================ rapportage === */
.ac-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.ac-kpi{
  background:var(--ac-wit);border:1px solid var(--ac-lijn);border-radius:var(--ac-r);
  padding:18px;box-shadow:var(--ac-schaduw);display:flex;flex-direction:column;gap:3px;
}
.ac-kpi__label{font-size:12.5px;color:var(--ac-inkt-zacht);font-weight:600}
.ac-kpi__waarde{font-family:var(--ac-kop);font-size:29px;font-weight:800;line-height:1.1}

.ac-grafiek{margin:0;overflow-x:auto}
.ac-grafiek svg{width:100%;height:auto;min-width:320px;display:block}
.ac-grafiek__vlak{fill:rgba(47,158,196,.13);stroke:none}
.ac-grafiek__lijn{fill:none;stroke:var(--ac-accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.ac-grafiek__punt{fill:var(--ac-wit);stroke:var(--ac-accent-diep);stroke-width:2}
.ac-grafiek__label{font-family:var(--ac-tekst);font-size:11px;fill:var(--ac-inkt-zacht)}

.ac-teamlijst{display:flex;flex-direction:column;gap:14px}
.ac-teamlijst__kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:5px}
.ac-teamlijst__kop span{font-family:var(--ac-kop);font-weight:700}
.ac-teamlijst p{margin-top:5px}

/* ============================================================ lege staat === */
.ac-leeg{text-align:center;align-items:center;gap:9px}
.ac-leeg__beeld{width:100%;max-width:420px;border-radius:10px;margin-bottom:5px}
.ac-leeg h2{font-size:19px}
.ac-onboarding{gap:14px}
.ac-checklijst{display:flex;flex-direction:column;gap:9px;text-align:left}
.ac-checklijst__item{display:flex;align-items:flex-start;gap:12px;padding:11px 13px;border:1px solid var(--ac-lijn);border-radius:10px}
.ac-checklijst__item strong{display:block;font-size:14px}
.ac-checklijst__item .ac-zacht{display:block}
.ac-checklijst__bol{
  width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--ac-papier);border:1px solid var(--ac-lijn);
  font-family:var(--ac-kop);font-weight:700;font-size:13px;color:var(--ac-inkt-zacht);
}
.ac-checklijst__item.is-klaar{background:#f7fdf9;border-color:#c6ebd3}
.ac-checklijst__item.is-klaar .ac-checklijst__bol{background:var(--ac-groen);border-color:var(--ac-groen);color:#fff}
.ac-checklijst__item.is-klaar .ac-ic{width:16px;height:16px}

/* =============================================================== toasts === */
.ac-toasts{
  position:fixed;right:16px;bottom:16px;z-index:80;
  display:flex;flex-direction:column;gap:9px;width:min(340px,calc(100vw - 32px));pointer-events:none;
}
.ac-toast{
  pointer-events:auto;display:flex;align-items:flex-start;gap:10px;
  background:var(--ac-wit);border:1px solid var(--ac-lijn);border-left:4px solid var(--ac-accent);
  border-radius:10px;padding:12px 13px;box-shadow:0 12px 28px rgba(22,32,43,.16);font-size:13.5px;
  animation:ac-toast-in .22s ease-out;
}
.ac-toast--goed{border-left-color:var(--ac-groen)}
.ac-toast--let-op{border-left-color:var(--ac-amber)}
.ac-toast--fout{border-left-color:var(--ac-rood)}
.ac-toast__tekst{flex:1;min-width:0}
.ac-toast__actie{
  border:1px solid var(--ac-lijn);background:var(--ac-papier);border-radius:8px;
  padding:7px 12px;font-size:12.5px;font-weight:700;cursor:pointer;flex:none;min-height:var(--ac-raak);
}
.ac-toast__actie:hover{border-color:var(--ac-accent);color:var(--ac-accent-diep)}
.ac-toast__weg{
  border:0;background:none;cursor:pointer;font-size:19px;line-height:1;
  color:var(--ac-inkt-zacht);padding:0 2px;flex:none;min-width:var(--ac-raak);min-height:var(--ac-raak);
}
@keyframes ac-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================= dialogen === */
.ac-dialoog{
  border:1px solid var(--ac-lijn);border-radius:var(--ac-r);padding:0;
  width:min(520px,calc(100vw - 28px));background:var(--ac-wit);color:var(--ac-inkt);
  box-shadow:0 24px 60px rgba(22,32,43,.28);
}
.ac-dialoog::backdrop{background:rgba(22,32,43,.5)}
.ac-dialoog__kop{padding:18px 20px 0;display:flex;flex-direction:column;gap:5px}
.ac-dialoog__kop h2{font-size:18px}
.ac-dialoog__body{padding:16px 20px;display:flex;flex-direction:column;gap:13px}
.ac-dialoog__voet{
  display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--ac-lijn);background:var(--ac-papier);
  border-radius:0 0 var(--ac-r) var(--ac-r);
}

.ac-palet{width:min(560px,calc(100vw - 28px));padding:0}
.ac-palet__invoer{
  display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--ac-lijn);color:var(--ac-inkt-zacht);
}
.ac-palet__invoer input{
  flex:1;font:inherit;font-size:16px;border:0;outline:none;background:none;color:var(--ac-inkt);min-height:var(--ac-raak);
}
.ac-palet__lijst{max-height:min(58vh,420px);overflow-y:auto;padding:8px}
.ac-palet__item{
  display:flex;align-items:center;gap:11px;width:100%;min-height:var(--ac-raak);
  padding:9px 11px;border:0;border-radius:10px;background:none;cursor:pointer;text-align:left;
}
.ac-palet__item:hover,.ac-palet__item.is-actief{background:var(--ac-papier)}
.ac-palet__soort{
  flex:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ac-accent-diep);background:#eef6fa;border-radius:6px;padding:3px 7px;min-width:64px;text-align:center;
}
.ac-palet__label{font-weight:600;font-size:14px;min-width:0}
.ac-palet__extra{margin-left:auto;font-size:12.5px;color:var(--ac-inkt-zacht);text-align:right;min-width:0}
.ac-palet__niets{padding:20px;text-align:center;color:var(--ac-inkt-zacht);font-size:13.5px}
.ac-palet__voet{padding:10px 18px;border-top:1px solid var(--ac-lijn);background:var(--ac-papier);font-size:12px;color:var(--ac-inkt-zacht)}

/* ============================================================== responsief === */
@media (max-width:1080px){
  .ac-kolommen--breed{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:900px){
  .ac-app{grid-template-columns:minmax(0,1fr)}
  .ac-zijbalk{
    position:fixed;inset:0 auto 0 0;width:min(290px,86vw);z-index:60;
    transform:translateX(-102%);transition:transform .22s ease;height:100dvh;
  }
  body.ac-menu-open .ac-zijbalk{transform:none;box-shadow:0 0 0 100vmax rgba(22,32,43,.45)}
  .ac-menuknop{display:inline-flex}
  #scherm{padding:18px 14px 96px}
  .ac-onderbalk{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--ac-wit);border-top:1px solid var(--ac-lijn);padding:5px 6px;
    padding-bottom:calc(5px + env(safe-area-inset-bottom,0px));
  }
  .ac-onderbalk .ac-navlink{
    flex:1;flex-direction:column;gap:3px;justify-content:center;
    color:var(--ac-inkt-zacht);font-size:11px;text-align:center;padding:6px 3px;min-height:52px;
  }
  .ac-onderbalk .ac-navlink span{
    display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .ac-onderbalk .ac-navlink.is-actief{background:var(--ac-papier);color:var(--ac-accent-diep)}
  .ac-onderbalk .ac-navlink:hover{background:var(--ac-papier);color:var(--ac-accent-diep)}
  .ac-toasts{bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .ac-hero{grid-template-columns:minmax(0,1fr)}
  .ac-hero__beeld{min-height:0;aspect-ratio:16/9}
  .ac-bord{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:560px){
  body{font-size:14.5px}
  .ac-topbalk{padding:9px 13px;gap:8px}
  .ac-topbalk h1{font-size:15.5px}
  .ac-iconknop kbd{display:none}
  .ac-kop h2{font-size:20px}
  .ac-raster{grid-template-columns:minmax(0,1fr)}
  .ac-ringen{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .ac-kaart,.ac-ringkaart,.ac-kpi{padding:15px}
  .ac-hero__tekst{padding:17px}
  .ac-certificaat__rand{padding:24px 15px}
  .ac-certificaat__naam{font-size:23px}
  .ac-certificaat__rand h2{font-size:21px}
  .ac-lesvoet{flex-direction:column;align-items:stretch}
  .ac-lesvoet .ac-knop{width:100%}
  .ac-lesvoet>span:empty{display:none}
  .ac-taak{flex-direction:column;align-items:flex-start}
  .ac-taak__rechts{width:100%;justify-content:space-between}
}

/* Bij 320 px mag niets breder zijn dan het scherm. */
@media (max-width:359px){
  .ac-ringen{grid-template-columns:minmax(0,1fr)}
  .ac-chips{width:100%}
  .ac-chip{flex:1 1 calc(50% - 4px)}
}

/* ========================================================= reduced motion === */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .ac-zijbalk{transition:none}
  .ac-toast{animation:none}
  .ac-ring__vulling,.ac-balk span{transition:none}
}

/* ================================================================ print === */
@media print{
  .ac-zijbalk,.ac-topbalk,.ac-onderbalk,.ac-toasts,.ac-kruimels,.ac-lesvoet{display:none !important}
  body{background:#fff}
  .ac-app{display:block}
  #scherm{padding:0}
  .ac-certificaat{border:0;box-shadow:none;padding:0}
  .ac-certificaat__rand{padding:40px}
  .ac-melding{display:none}
}