/* Layout voor /klassen.html - lijst-met-detail, breder dan de gecentreerde
   auth-kaartjes. Gaat uit van de kleurtokens uit auth.css (samen geladen). */

body {
  display: block;
  padding: 24px;
  align-items: stretch;
  justify-content: stretch;
}

.klassen-page {
  max-width: 960px;
  margin: 0 auto;
}

.klassen-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.klassen-header h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
}

.klassen-header a {
  color: var(--ink-dim);
  font-size: 14px;
  text-decoration: underline;
}

/* 35% kleiner dan het originele plaatje (652px breed). */
.klassen-header-img {
  width: 424px;
  max-width: 100%;
  height: auto;
}

.klassen-header a:hover {
  color: var(--ink);
}

.klassen-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 700px) {
  .klassen-layout {
    grid-template-columns: 1fr;
  }
}

.klassen-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 18px;
}

.klassen-panel h2 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Samenvattend statistiekenbalkje bovenaan accountbeheer (public/admin.js) -
   zelfde kaart-uiterlijk als .klassen-panel, maar dan als rij losse tegels. */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stat-tile {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.stat-tile__value {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}

.stat-tile__label {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-dim);
}

.stat-tile__sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-dim);
}

/* Trekt de aandacht zodra er iets is om naar te kijken (bv. accounts die al
   lang op PIN wachten) - leeg/nul blijft neutraal, zie renderStats(). */
.stat-tile--let-op {
  border-color: var(--accent-warn);
}

.stat-tile--let-op .stat-tile__value {
  color: var(--accent-warn);
}

.klassen-lijst {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.klassen-lijst-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.klas-knop {
  flex: 1;
  text-align: left;
  background: rgba(244, 243, 238, 0.06);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: 15px;
  cursor: pointer;
}

.klas-knop:hover {
  background: rgba(244, 243, 238, 0.12);
}

.klas-knop.is-active {
  background: rgba(127, 231, 196, 0.16);
  border-color: var(--accent);
}

.klas-knop .aantal {
  display: block;
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 2px;
}

.icon-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 243, 238, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--ink-dim);
  cursor: pointer;
}

.icon-btn:hover {
  background: rgba(255, 138, 101, 0.15);
  border-color: var(--accent-warn);
  color: #ffb499;
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

.nieuwe-klas-form {
  display: flex;
  gap: 8px;
}

.nieuwe-klas-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--ui-font);
  font-size: 14px;
  color: var(--ink);
  background: rgba(244, 243, 238, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 10px 12px;
}

.klassen-leeg {
  color: var(--ink-dim);
  font-size: 14px;
  text-align: center;
  padding: 40px 20px;
}

.klas-detail-titel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.klas-detail-titel input {
  font-size: 22px;
  font-weight: 700;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--ink);
  font-family: var(--ui-font);
  flex: 1;
  min-width: 0;
}

.klas-detail-titel input:hover,
.klas-detail-titel input:focus {
  background: rgba(244, 243, 238, 0.08);
  border-color: var(--glass-border);
}

.plattegrond-link-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(127, 231, 196, 0.16);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(127, 231, 196, 0.12);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.plattegrond-link-btn:hover {
  background: rgba(127, 231, 196, 0.28);
  box-shadow: 0 0 0 4px rgba(127, 231, 196, 0.2);
}

.plattegrond-link-btn img {
  width: 20px;
  height: 20px;
}

.leerlingen-titel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.leerlingen-titel h2 {
  margin: 0;
}

/* Aantal leerlingen in de klas, in één oogopslag naast de kop - zodat je
   niet handmatig de tabel eronder hoeft af te tellen (zie renderLeerlingen
   in klassen.js). Leeg/verborgen zolang er geen klas geselecteerd is. */
.leerlingen-aantal-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-dim);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 3px 10px;
}

/* Zelfde knop (icoon + gedrag) als de alfabetisch-knop bij Groepjes
   (widgets/groepjes-widget.js) - hier 34px i.p.v. 42px, zodat hij past
   naast de andere icoontjes op deze pagina (bv. klas-verwijder-btn). */
.leerlingen-alfabetisch-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--ink-dim);
  background: rgba(244, 243, 238, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.leerlingen-alfabetisch-btn:hover {
  background: rgba(244, 243, 238, 0.2);
}

.leerlingen-tabel {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.leerlingen-tabel th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 8px 8px;
}

.leerlingen-tabel td {
  padding: 4px 8px;
}

.leerlingen-tabel input {
  width: 100%;
  background: rgba(244, 243, 238, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 7px 9px;
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: 14px;
}

.leerlingen-tabel .extra-cel input {
  max-width: 120px;
}

.leerlingen-tabel .verwijder-cel {
  width: 34px;
}

/* Standaard verborgen - alleen zichtbaar na klikken op de "oog"-knop naast de
   alfabetisch-knop (zie beheersingsniveau-toggle-btn in klassen.js). Dat is
   puur in-memory UI-state, dus staat na een herlaadbeurt van de pagina
   vanzelf weer op verborgen. */
.leerlingen-tabel .beheersing-cel {
  display: none;
  width: 110px;
}

.leerlingen-tabel--toon-beheersing .beheersing-cel {
  display: table-cell;
}

.leerlingen-tabel select {
  width: 100%;
  background: rgba(244, 243, 238, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 7px 9px;
  color: var(--ink);
  font: inherit;
}

/* De uitklaplijst van een <select> is een eigen, door de browser getekend
   venstertje dat de (bijna-transparante) achtergrond van de select zelf
   negeert en standaard wit rendert - zonder dit expliciet op de option's te
   zetten was de tekst dus wit-op-wit. */
.leerlingen-tabel select option {
  background-color: #0b0d12;
  color: var(--ink);
}

.import-blok textarea {
  width: 100%;
  min-height: 100px;
  font-family: var(--ui-font);
  font-size: 14px;
  color: var(--ink);
  background: rgba(244, 243, 238, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
  margin-bottom: 10px;
}

.import-blok p {
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0 0 10px;
  line-height: 1.5;
}

.auth-btn.auth-btn--klein {
  width: auto;
  padding: 9px 18px;
  font-size: 14px;
}

/* Accountstatus in het accountbeheer-overzicht (zie admin.js) - "Wacht op
   PIN" is de afwijkende status om op te letten: een account dat is
   aangemaakt zonder dat de docent zelf de PIN-instelstap heeft afgerond,
   bv. doordat een linkscanner in zijn mail de inloglink al had geopend. */
.docent-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-dim);
  background: rgba(244, 243, 238, 0.08);
  border: 1px solid var(--glass-border);
}

.docent-status-badge--wacht {
  color: var(--accent-warn);
  background: rgba(255, 138, 101, 0.12);
  border-color: var(--accent-warn);
}