/* SGI-portaal — gedeeld THEMA voor de hele beheer-/backend-kant.
 *
 * Eén plek voor de huisstijl: de publieke inschrijfkant is PAARS, de beheerkant is ROZE, zodat
 * je in één oogopslag ziet waar je bent. Rood blijft voor verwijderen/fouten, groen voor succes.
 *
 * Elke app-base laadt dit ná zijn eigen <style>, dus de regels hieronder overschrijven de
 * accentkleur en tillen de look overal gelijk op. App-specifieke lay-out (AC-markdown,
 * prikker-tabel, help-zijbalk) blijft in de app zelf staan.
 *
 * '--paars' is bewust behouden als ALIAS die naar roze wijst: de apps gebruiken overal
 * var(--paars); door dat token hier te hermappen wordt alles roze zonder elke template te
 * herschrijven. Nieuwe code mag var(--roze) gebruiken.
 */
:root {
  --roze: #be185d;
  --roze-donker: #9d174d;
  --paars: var(--roze);      /* alias → roze (zie kop) */
  --paars-licht: #fdf2f8;    /* lichte roze-tint voor tags/badges/code-achtergrond */
}

body { background: #f8f7f9; }

/* Header — roze met een subtiel verloop en schaduw. */
header {
  background: var(--roze) !important;
  background-image: linear-gradient(135deg, #c92a6e 0%, var(--roze) 55%, #a3164f 100%) !important;
  box-shadow: 0 2px 8px rgba(190, 24, 93, .20);
}
header h1 { font-weight: 700; }
nav a:hover { background: rgba(255, 255, 255, .18); }

/* Knoppen: hover naar donker-roze (overschrijft de oude paarse hover). */
.btn:hover { background: var(--roze-donker); }
/* Lichte knoppen houden een LICHTE achtergrond op hover — anders zou .btn:hover ze donkerroze
 * maken met roze tekst (roze-op-roze, onleesbaar). Staat ná .btn:hover zodat die het wint. */
.btn-licht:hover { background: #fdf2f8; color: var(--roze-donker); }

/* Kaarten iets zachter + schaduw, uniform over de apps. */
.card { border-radius: 12px; box-shadow: 0 1px 3px rgba(17, 24, 39, .05); }

/* Roze focus-accent op invoervelden. */
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--roze);
  box-shadow: 0 0 0 3px rgba(190, 24, 93, .14);
}

/* Sub-secties binnen een lang formulier: bordered blok met roze kop, zodat het scanbaar wordt. */
.sectie {
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 14px 16px 16px;
  margin-bottom: 14px;
  background: #fdfbfc;
}
.sectie:first-of-type { margin-top: 4px; }
.sectie-kop {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--roze); margin: 0 0 6px; display: flex; align-items: center; gap: 8px;
}
.sectie-kop::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--roze); flex: 0 0 auto;
}
.rij { display: flex; gap: 14px; flex-wrap: wrap; }