/* ============================================================
   Framework-opdrachten (Kats) — tabblad "In het Hero Platform"
   op het Opdrachten-scherm (S19).

   Zelfde vocabulaire als de rest van dat scherm: navy verloopkop,
   kaarten op #f5f5f9, 14px ronding. Statuskleur per opdracht:
   groen = afgerond · sky = bezig · oranje = nog doen ·
   grijs = nog niet gekoppeld.
   ============================================================ */

.s19-tabs{display:flex; gap:8px; margin:2px 0 16px; flex-wrap:wrap;}
.s19-tabs button{font:600 .93rem/1 "Source Sans 3",system-ui,sans-serif; color:#073889;
  background:#eaeff8; border:none; border-radius:999px; padding:9px 18px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; transition:background .15s, color .15s;}
.s19-tabs button:hover{background:#dde6f5;}
.s19-tabs button.actief{background:#073889; color:#fff;}
.s19-tabs button:focus-visible{outline:2px solid #f46015; outline-offset:2px;}
.s19-tel{font:700 .78rem/1 "Exo","Source Sans 3",sans-serif; background:rgba(7,56,137,.12);
  border-radius:999px; padding:3px 8px; font-variant-numeric:tabular-nums;}
.s19-tabs button.actief .s19-tel{background:rgba(255,255,255,.22);}
.s19-tel:empty{display:none;}

/* ---- kop met voortgangsring ---- */
#s19-kats-hero:empty{display:none;}
#s19-kats-hero{margin:6px 0 18px;}
.kats-hero{position:relative; overflow:hidden; isolation:isolate; border-radius:20px; padding:20px 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:26px; flex-wrap:wrap;}
.kats-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;}
.kats-hero-tekst{flex:1 1 320px;}
/* de app zet h2 standaard navy — op deze donkere kop moet hij wit zijn */
.kats-hero h2{font:800 1.28rem/1.2 "Exo","Source Sans 3",sans-serif; margin:0 0 7px; color:#fff;}
.kats-hero p{margin:0; font-size:.95rem; line-height:1.55; color:rgba(255,255,255,.9); max-width:62ch;}
.kats-bij{margin-top:10px !important; font-size:.87rem !important; color:rgba(255,255,255,.75) !important;}
.kats-bij.kats-los{color:#ffd9c2 !important;}
.kats-ring{position:relative; width:92px; height:92px; flex-shrink:0; border-radius:50%;
  background:conic-gradient(#38bd47 calc(var(--pct,0) * 1%), rgba(255,255,255,.16) 0);}
.kats-ring::after{content:""; position:absolute; inset:9px; border-radius:50%; background:#062e6f;}
.kats-ring-cijfer{position:absolute; inset:0; display:grid; place-content:center; text-align:center; z-index:1; line-height:1.1;}
.kats-ring-cijfer b{display:block; font:800 1.5rem/1 "Exo","Source Sans 3",sans-serif; font-variant-numeric:tabular-nums;}
.kats-ring-cijfer span{font-size:.7rem; color:rgba(255,255,255,.75);}

/* ---- groepen ---- */
.kats-groep{border-radius:14px; background:#f5f5f9; margin-bottom:12px; overflow:hidden;}
.kats-groepkop{width:100%; display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer;
  background:none; border:none; text-align:left; font-family:"Source Sans 3",system-ui,sans-serif;}
.kats-groepkop-vast{cursor:default;}
.kats-groepkop:focus-visible{outline:2px solid #f46015; outline-offset:-2px;}
.kats-groeptitel{flex:1; font:700 1.04rem/1.25 "Exo","Source Sans 3",sans-serif; color:#073889;}
.kats-groeptel{font:600 .8rem/1 "Source Sans 3",sans-serif; color:#5a6b7d; font-variant-numeric:tabular-nums;
  background:#fff; border-radius:999px; padding:5px 11px; white-space:nowrap;}
.kats-chevron{color:#8a97a6; font-size:1.05rem; line-height:1; width:14px; text-align:center;}
.kats-groepbody{padding:0 18px 16px;}
.kats-groepintro{margin:0 0 12px; font-size:.93rem; color:#5a6b7d; max-width:70ch;}

/* ---- opdrachtkaart ---- */
.kats-kaart{background:#fff !important; border-radius:12px; padding:14px 16px !important; margin-bottom:10px;
  border-left:4px solid #cfd7e2 !important;}
.kats-kaart.st-af{border-left-color:#38bd47 !important;}
.kats-kaart.st-bezig{border-left-color:#00a8f5 !important;}
.kats-kaart.st-open{border-left-color:#f46015 !important;}
.kats-kaartkop{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.kats-nr{font:800 .78rem/1.4 "Exo","Source Sans 3",sans-serif; color:#f46015; font-variant-numeric:tabular-nums;}
.kats-kaartkop h4{flex:1 1 260px; margin:0; font:700 1rem/1.3 "Exo","Source Sans 3",sans-serif; color:#1d2b3a;}
.kats-status{font:600 .76rem/1 "Source Sans 3",sans-serif; border-radius:999px; padding:4px 10px; white-space:nowrap;}
.kats-status.st-af{background:#e6f7e8; color:#1f7a2b;}
.kats-status.st-bezig{background:#e3f4fc; color:#0179ad;}
.kats-status.st-open{background:#fdece2; color:#c4470c;}
.kats-status.st-onbekend{background:#eef1f5; color:#5a6b7d;}
.kats-txt{margin:9px 0 0; font-size:.94rem; line-height:1.55; color:#3c4a59; max-width:72ch;}
.kats-klaar{margin:7px 0 0; font-size:.88rem; color:#5a6b7d; max-width:72ch;}
.kats-klaar b{color:#1d2b3a;}
.kats-kaartvoet{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin-top:12px;
  padding-top:11px; border-top:1px solid #eef1f5;}
/* wat het Hero Platform hiervoor registreert — er valt niets zelf af te vinken */
.kats-auto{font-size:.83rem; color:#5a6b7d; font-style:italic; flex:1 1 260px;}
.kats-blok{font-size:.8rem; color:#8a97a6;}
.kats-dosjes{display:inline-flex; gap:6px; flex-wrap:wrap; margin-left:auto;}
.kats-doschip{font:600 .75rem/1 "Source Sans 3",sans-serif; color:#0179ad; background:#e3f4fc;
  border:none; border-radius:999px; padding:5px 11px; cursor:pointer;}
.kats-doschip:hover{background:#cfeaf8;}
.kats-doschip:focus-visible{outline:2px solid #f46015; outline-offset:1px;}

/* ---- oefendossiers om te downloaden ---- */
.kats-dossierblok{background:#eef3fb;}
.kats-dossier{background:#fff; border-radius:12px; margin-bottom:9px; overflow:hidden;}
.kats-doskop{width:100%; display:flex; align-items:center; gap:12px; padding:12px 15px; cursor:pointer;
  background:none; border:none; text-align:left; font-family:"Source Sans 3",system-ui,sans-serif; flex-wrap:wrap;}
.kats-doskop:focus-visible{outline:2px solid #f46015; outline-offset:-2px;}
.kats-dosklant{font:700 .97rem/1.3 "Exo","Source Sans 3",sans-serif; color:#073889;}
.kats-dosrol{flex:1 1 200px; font-size:.89rem; color:#3c4a59;}
.kats-dosmeta{font-size:.79rem; color:#8a97a6; white-space:nowrap;}
.kats-dosbody{padding:0 15px 15px;}
.kats-dossterk{margin:0 0 6px; font-size:.92rem; color:#1d2b3a; font-weight:600; max-width:70ch;}
.kats-dosfeiten{margin:0 0 12px; font-size:.85rem; color:#5a6b7d; font-variant-numeric:tabular-nums; max-width:70ch;}
.kats-ko{margin:0 0 13px;}
.kats-ko h5{margin:0 0 5px; font:700 .74rem/1 "Exo","Source Sans 3",sans-serif; letter-spacing:.07em;
  text-transform:uppercase; color:#073889;}
.kats-ko ul{margin:0; padding-left:19px; font-size:.88rem; color:#5a6b7d;}
.kats-ko li{margin:3px 0;}
.kats-bestanden{display:flex; flex-direction:column; gap:6px;}
.kats-zip{align-self:flex-start; margin-bottom:4px;}
.kats-bestand{display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:#f5f5f9; border:none; border-radius:9px; padding:9px 12px;
  font-family:"Source Sans 3",system-ui,sans-serif; transition:background .15s;}
.kats-bestand:hover{background:#e9eef7;}
.kats-bestand:focus-visible{outline:2px solid #f46015; outline-offset:1px;}
.kats-bsoort{font:700 .69rem/1 "Exo","Source Sans 3",sans-serif; letter-spacing:.05em; text-transform:uppercase;
  color:#fff; background:#00a8f5; border-radius:5px; padding:4px 7px; flex-shrink:0; min-width:62px; text-align:center;}
.kats-bsoort.soort-aanvraag{background:#073889;}
.kats-bnaam{flex:1; font-size:.88rem; color:#1d2b3a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kats-bkb{font-size:.79rem; color:#8a97a6; font-variant-numeric:tabular-nums; flex-shrink:0;}

/* ---- blok in het deelnemerdossier (S5) ---- */
.kats-dos-blok{background:#f5f5f9; border-radius:12px; padding:12px 14px;}
.kats-dos-balk{height:8px; border-radius:99px; background:#e3e7ee; overflow:hidden;}
.kats-dos-balk span{display:block; height:100%; border-radius:99px; background:#38bd47;
  transition:width .8s cubic-bezier(.2,.7,.3,1);}
.kats-dos-tekst{margin:9px 0 0; font-size:.9rem; color:#3c4a59;}
.kats-dos-tekst b{color:#073889; font-variant-numeric:tabular-nums;}

@media (max-width:640px){
  .kats-hero{padding:16px 17px; gap:16px;}
  .kats-ring{width:74px; height:74px;}
  .kats-dosjes{margin-left:0;}
  .kats-bnaam{white-space:normal;}
}

/* ---- Voortgang uit het Hero Platform per lichting (S11) ---- */
.kats-lk-kop{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.kats-lk-kop h3{flex:1; margin:0; font:700 1.05rem/1.25 "Exo","Source Sans 3",sans-serif; color:#073889;}
.kats-lk-intro{margin:8px 0 14px; font-size:.9rem; color:#5a6b7d; max-width:78ch;}
.kats-lk-tabelwrap{overflow-x:auto;}
.kats-lk-tabel{border-collapse:collapse; width:100%; min-width:620px; font-size:.9rem;}
.kats-lk-tabel th{font:700 .72rem/1 "Exo","Source Sans 3",sans-serif; letter-spacing:.06em; text-transform:uppercase;
  color:#073889; text-align:left; padding:9px 12px; border-bottom:2px solid #e3e7ee; white-space:nowrap;}
.kats-lk-tabel td{padding:9px 12px; border-bottom:1px solid #eef1f5; vertical-align:middle;}
.kats-lk-tabel tr:last-child td{border-bottom:none;}
.kats-lk-naam{font-weight:600; color:#1d2b3a; white-space:nowrap;}
.kats-lk-lich{color:#5a6b7d; font-size:.85rem;}
.kats-lk-mail{color:#5a6b7d; font-size:.85rem;}
.kats-lk-stand{min-width:190px;}
.kats-lk-getal{font-weight:600; color:#073889; font-variant-numeric:tabular-nums; margin-right:9px;}
.kats-lk-balk{display:inline-block; width:96px; height:7px; border-radius:99px; background:#e3e7ee; overflow:hidden; vertical-align:middle;}
.kats-lk-balk span{display:block; height:100%; border-radius:99px; background:#38bd47;}
.kats-lk-waarsch{color:#c4470c; font-size:.85rem; font-weight:600;}
.kats-lk-grijs{color:#8a97a6; font-size:.85rem;}
.kats-lk-meldingen{margin:13px 0 0; padding-left:19px; font-size:.86rem; color:#5a6b7d;}
.kats-lk-meldingen li{margin:3px 0;}

/* ---- beheeroverzicht: twee weergaven, uitklap per deelnemer ---- */
.kats-lk-wissel{display:flex; gap:6px;}
.kats-lk-wissel button{font:600 .82rem/1 "Source Sans 3",system-ui,sans-serif; color:#073889;
  background:#eaeff8; border:none; border-radius:999px; padding:7px 14px; cursor:pointer;}
.kats-lk-wissel button.actief{background:#073889; color:#fff;}
.kats-lk-wissel button:focus-visible{outline:2px solid #f46015; outline-offset:2px;}
.kats-lk-groep{margin:18px 0 6px; font:700 .95rem/1.3 "Exo","Source Sans 3",sans-serif; color:#073889;}
.kats-lk-nr{font:800 .78rem/1 "Exo","Source Sans 3",sans-serif; color:#f46015; white-space:nowrap;}
.kats-lk-opdr{color:#1d2b3a;}
.kats-lk-wie{font-size:.84rem; color:#5a6b7d;}
.kats-lk-bezig{display:block; color:#0179ad; font-size:.8rem; margin-top:2px;}
.kats-lk-uitklap{background:none; border:none; padding:0; cursor:pointer; font:600 .9rem/1.3 "Source Sans 3",sans-serif;
  color:#073889; display:inline-flex; align-items:center; gap:6px;}
.kats-lk-uitklap:hover{text-decoration:underline;}
.kats-lk-uitklap:focus-visible{outline:2px solid #f46015; outline-offset:2px;}
.kats-lk-rij-open td{background:#eef3fb;}
.kats-lk-detailrij td{background:#eef3fb; padding:0 14px 14px !important;}
.kats-lk-detail{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;}
.kats-lk-detgroep h5{margin:0 0 5px; font:700 .74rem/1 "Exo","Source Sans 3",sans-serif; letter-spacing:.06em;
  text-transform:uppercase; color:#073889; display:flex; justify-content:space-between; gap:8px;}
.kats-lk-detgroep h5 span{color:#8a97a6; font-variant-numeric:tabular-nums;}
.kats-lk-detgroep ul{margin:0; padding:0; list-style:none; font-size:.85rem;}
.kats-lk-detgroep li{margin:2px 0; color:#8a97a6;}
.kats-lk-detgroep li.st-af{color:#1f7a2b;}
.kats-lk-detgroep li.st-bezig{color:#0179ad;}
.kats-lk-detgroep li b{font-weight:700;}
.kats-lk-teken{display:inline-block; width:14px; text-align:center;}
.kats-lk-onbekend{grid-column:1/-1; margin:4px 0 0; font-size:.84rem; color:#c4470c;}