/* =====================================================
   NIMETO HUISSTIJL — tokens & herbruikbare componenten
   Bron: stijl_jpg/Nimeto_Huisstijl_DosenDonts.pdf
   - Alleen Euclid Circular B (tekst regular, titels bold/semibold)
   - Basis = wit + zwart + 1 Nimeto-kleur per pagina (deze app: paars)
   - Max 3 corpsgroottes per pagina
   Dit bestand bevat GEEN element-selectors en kan dus veilig
   op elke pagina geladen worden zonder de layout te wijzigen.
   ===================================================== */

:root {
  /* Officiële Nimeto-kleuren (niet als achtergrondvlak gebruiken) */
  --nimeto-groen:  #58CC44;
  --nimeto-oranje: #FF6C2F;
  --nimeto-paars:  #630EFD;
  --nimeto-geel:   #FFD901;
  --nimeto-blauw:  #0496FF;
  --nimeto-roze:   #FF99B9;

  /* App-tokens ("1 kleur per product": paars) */
  --primary-color: var(--nimeto-paars);
  --primary-hover: #4d0cc4;
  --background-color: #ffffff;
  --text-color: #1a1a1a;
  --accent-color: #ececec;
  --rand-kleur: #dddddd;

  /* Max 3 corpsgroottes per pagina */
  --font-klein: 0.875rem;
  --font-basis: 1rem;
  --font-titel: 1.5rem;
}

html.dark {
  --background-color: #121212;
  --text-color: #eeeeee;
  --accent-color: #2c2c2c;
  --rand-kleur: #3a3a3a;
}

/* Euclid Circular B — kerngewichten (huisstijl: Regular + SemiBold/Bold) */
@font-face {
  font-family: 'Euclid Circular B';
  src: url('fonts/Euclid-Circular-B-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Euclid Circular B';
  src: url('fonts/Euclid-Circular-B-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Euclid Circular B';
  src: url('fonts/Euclid-Circular-B-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Herbruikbare componenten ---------- */

/* Uniforme knop volgens huisstijl (paars accent, SemiBold) */
.btn-nimeto {
  background-color: var(--primary-color);
  color: #ffffff;
  font-family: 'Euclid Circular B', sans-serif;
  font-weight: 600;
  font-size: var(--font-basis);
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease;
}
.btn-nimeto:hover {
  background-color: var(--primary-hover);
}
.btn-nimeto:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- Actiekleuren (uitsluitend officiële Nimeto-tinten) ----------
   Vaste betekenis door de hele app:
   groen = bekijken/herstellen · oranje = aanpassen/verplaatsen ·
   blauw = archiveren · roze = definitief verwijderen · paars = primair/mail */
.kleur-groen  { background-color: var(--nimeto-groen)  !important; }
.kleur-groen:hover  { background-color: #46a836 !important; }
.kleur-oranje { background-color: var(--nimeto-oranje) !important; }
.kleur-oranje:hover { background-color: #e0561d !important; }
.kleur-blauw  { background-color: var(--nimeto-blauw)  !important; }
.kleur-blauw:hover  { background-color: #0378cc !important; }
.kleur-roze   { background-color: var(--nimeto-roze)   !important; }
.kleur-roze:hover   { background-color: #f27ba3 !important; }
.kleur-paars  { background-color: var(--nimeto-paars)  !important; }
.kleur-paars:hover  { background-color: var(--primary-hover) !important; }

/* Nette vierkante icoon-knop (voor actierijen bij klassen/leerlingen) */
.icoon-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.icoon-knop:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}
.icoon-knop img,
.icoon-knop .icon {
  width: 1.15rem;
  height: 1.15rem;
  filter: brightness(0) invert(1); /* witte iconen op gekleurde knop */
}
/* Roze is licht: donker icoon voor contrast (geldt voor elke roze knop) */
.kleur-roze img,
.kleur-roze .icon {
  filter: none !important;
}

/* Laad-indicator met de bestaande loader.svg */
.laadindicator {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 0;
  color: var(--text-color);
  font-size: var(--font-klein);
}
.laadindicator::before {
  content: '';
  width: 22px;
  height: 22px;
  background: url('assets/Icons/loader.svg') no-repeat center / contain;
  animation: laadindicator-draai 1s linear infinite;
}
@keyframes laadindicator-draai {
  to { transform: rotate(360deg); }
}