:root {
  --canvas: #020617;
  --surface: #0f172a;
  --surface-raised: #1e293b;
  --border: #334155;
  --fg: #f8fafc;
  --fg-muted: #94a3b8;
  --accent: #a5b4fc;
  --accent-strong: #6366f1;
  --accent-strong-hover: #4f46e5;
  --danger: #ef4444;

  /* Links in lopende tekst. Lichter dan de tekst eromheen, zodat het verschil
     niet alleen in de kleur zit — zie de regel voor `a` verderop. */
  --link: #c7d2fe;

  /* Statuskleuren. Stonden eerder als losse waarden in vier stylesheets, met
     het risico dat ze uit elkaar gaan lopen. */
  --warning: #f59e0b;
  --success: #22c55e;

  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Schuifbalken in de kleuren van de app.
   Ze waren lichtgrijs, want dat is wat de browser standaard doet — en dat valt
   op een donkere pagina op als een streep licht. color-scheme vertelt de
   browser dat dit een donkere pagina is, wat meteen ook invoervelden en
   uitklapmenu's goed zet; de regels eronder maken de balk smal en rustig in
   browsers die dat toelaten. */
:root {
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  /* De rand is doorzichtig en telt mee met de achtergrond, zodat de greep
     dunner oogt dan de baan waarin hij loopt. */
  background: var(--border);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--fg-muted);
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Any element also has its own `display` rule (e.g. `.foo { display: flex }`)
   defeats the browser's default `[hidden] { display: none }` — author CSS
   always wins over that UA default, regardless of selector specificity. This
   makes `hidden` an unconditional force-hide again everywhere in the app,
   instead of needing a per-component `.foo[hidden] { display: none; }`
   override wherever that collision happens to occur. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--canvas);
  color: var(--fg);
}

/* Een link is nooit alleen aan zijn kleur te herkennen.
   Wie kleurenblind is ziet het verschil tussen dit blauw en de grijze tekst
   eromheen niet, en dan staat er ineens een woord in een zin waarvan je niet
   weet dat je erop kunt klikken. Daarom twee signalen die los van elkaar
   werken: een streep eronder, en een kleur die ook lichter is dan de tekst.

   Navigatie — de zijbalk, de tabbladen, de inhoudsopgave van de handleiding —
   zet de streep zelf weer uit. Daar is de plek al duidelijk genoeg en zou een
   streep onder elke regel alleen maar rommelig staan. */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--fg);
  text-decoration-thickness: 2px;
}

/* Avatar: a real photo, or a colored initials-circle fallback (see
   js/avatar.js) — one shared visual identity used across the whole app. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
  vertical-align: middle;
}

img.avatar {
  background: var(--surface-raised);
}

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.auth-brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-strong);
  color: var(--fg);
  font-weight: 700;
  font-size: 14px;
}

.auth-brand__name {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.auth-title {
  margin: 0 0 6px;
  font-size: 22px;
}

.auth-subtitle {
  margin: 0 0 24px;
  color: var(--fg-muted);
  font-size: 14px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 13px;
  color: var(--fg-muted);
}

/* Invoervelden, keuzelijsten en tekstvakken zien er hetzelfde uit. Keuzelijsten
   en tekstvakken stonden hier niet bij, waardoor die overal in de app als wit
   browserstandaardvakje in een donkere pagina stonden. */
.field input,
.field select,
.field textarea {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--fg);
  font-size: 14px;
  font-family: inherit;
}

.field select {
  /* Zonder dit houdt Safari zijn eigen grijze knopuiterlijk aan. */
  appearance: none;
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%),
    linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field textarea {
  line-height: 1.5;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.field select:disabled {
  color: var(--fg-muted);
  cursor: not-allowed;
}

.form-error {
  margin: 0;
  color: var(--danger);
  font-size: 13px;
}

.btn-primary {
  margin-top: 4px;
  padding: 11px 16px;
  border: none;
  border-radius: 8px;
  background: var(--accent-strong);
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--accent-strong-hover);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--fg-muted);
  font-size: 13px;
  text-decoration: none;
}

.auth-link:hover {
  color: var(--accent);
}

/* --- Omgevingsbalk ---
   Staat hier en niet in layout.css. Het inlogscherm, aanmelden en wachtwoord
   vergeten laden layout.css niet, en juist daar wil je zien in welke omgeving
   je zit — daar typ je je wachtwoord in.
   Op test en staging staat bovenaan over de volle breedte welke omgeving je
   voor je hebt. Zie js/omgeving.js.

   Hij staat in de gewone stroom en duwt de rest omlaag, niet eroverheen — dan
   zou er een strook van de zijbalk of de bovenbalk achter verdwijnen. Scroll je
   naar beneden, dan schuift hij weg en blijft de bovenbalk staan waar hij
   hoort: je weet inmiddels wel waar je zit. */

.omgevingsbalk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 32px;
  background: var(--omgeving-kleur);
  color: #0b1020;
  font-size: 12px;
  line-height: 1.4;
}

.omgevingsbalk__label {
  font-weight: 800;
  letter-spacing: 0.12em;
}

.omgevingsbalk__uitleg {
  opacity: 0.85;
}

/* De hoogte van de balk gaat af van alles wat op de vensterhoogte rekent.
   Zonder dit steekt de zijbalk er precies die paar tellen onderuit en krijgt
   elke pagina een schuifbalk die er niet hoort. */
.heeft-omgevingsbalk {
  --omgevingsbalk-hoogte: 27px;
}

.heeft-omgevingsbalk .sidebar {
  height: calc(100vh - var(--omgevingsbalk-hoogte));
  height: calc(100dvh - var(--omgevingsbalk-hoogte));
}

.heeft-omgevingsbalk .app-shell,
.heeft-omgevingsbalk .app-content {
  min-height: calc(100vh - var(--omgevingsbalk-hoogte));
}

/* Het inlogscherm, aanmelden en wachtwoord vergeten hebben geen zijbalk maar
   wel een vak dat verticaal in het midden staat over de volle vensterhoogte.
   Zonder deze regel komt de balk daar bovenop en krijgt de pagina een
   schuifbalk van precies de hoogte van de balk. */
.heeft-omgevingsbalk .auth-page {
  min-height: calc(100vh - var(--omgevingsbalk-hoogte));
}

@supports (min-height: 100dvh) {
  .heeft-omgevingsbalk .app-content {
    min-height: calc(100dvh - var(--omgevingsbalk-hoogte));
  }
}

@media (max-width: 700px) {
  .omgevingsbalk {
    padding: 5px 16px;
  }

  /* Op een smal scherm past de uitleg er niet naast; de naam van de omgeving is
     het enige dat er echt toe doet. */
  .omgevingsbalk__uitleg {
    display: none;
  }
}

/* Een knop die eruitziet als de tekstlinks eronder. Op de aanmeldpagina opent
   hij het formulier voor de beheerder van de omgeving. */
.auth-link--knop {
  display: block;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}