/*
 * Huisstijl-basislaag op Bootstrap 5.3 — vormlaag, merk-onafhankelijk
 * Versie 1.0 — 2026-08-09
 *
 * Afgeleid van `bootswatch-rick.css` v1.1 uit de huisstijlmap in de vault.
 * Dit bestand beschrijft de *vorm*: hoekradius, ruimte, randen, de vorm van
 * knoppen en kaarten, en de kleine kapitaaltjes. Geen enkele kleur en geen
 * enkele lettersoort staat hier vast — die komen uit Bootstrap-variabelen die
 * de merklaag zet. Zo kost een volgend merk één bestand met variabelen in
 * plaats van een tweede kopie van deze regels.
 *
 * Twee dingen zijn bewust anders dan in het origineel:
 *
 * 1. Geen `@import` naar Google Fonts. De letters worden zelf geserveerd; het
 *    serverblok stuurt `style-src 'self'; font-src 'self'`, dus een externe
 *    verwijzing wordt geblokkeerd — en zou anders elke bezoeker bij een derde
 *    partij melden.
 *
 * 2. Donker gaat niet via `@media (prefers-color-scheme: dark)` maar via
 *    `data-bs-theme`, het eigen mechanisme van Bootstrap 5.3. Een media query
 *    volgt het besturingssysteem en is niet door de gebruiker om te zetten,
 *    terwijl deze applicatie een knop Licht/Donker heeft die de keuze bewaart.
 *    De donkere waarden staan daarom in de merklaag, niet hier.
 *
 * Laadvolgorde: bootstrap → deze laag → merklaag.
 */

/* --- Twee eigen variabelen -----------------------------------------------
   Bootstrap kent één lettersoort voor de body en één voor code. De huisstijl
   kent er drie rollen: leesletter, koplettering en kapitaaltjes. Die twee
   extra rollen staan hier als variabele, zodat de merklaag ze invult. */

:root {
  --hs-font-kop:   var(--bs-body-font-family);
  --hs-font-label: var(--bs-body-font-family);

  /* De maat van de kleine kapitaaltjes. Eén plek, want ze komen in labels,
     kaartkoppen, badges, tabelkoppen en knoppen terug. */
  --hs-label-spatie: 0.12em;
}

/* --- Typografie ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--hs-font-kop);
  font-weight: 300;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  color: var(--bs-heading-color);
}

h1, .h1 { font-size: 2.25rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.375rem; }

.display-1, .display-2, .display-3, .display-4 {
  font-family: var(--hs-font-kop);
  font-weight: 200;
  color: var(--bs-primary);
  letter-spacing: -0.03em;
}

.lead {
  font-weight: 300;
  color: var(--bs-secondary-color);
}

/* --- Kleine kapitaaltjes -------------------------------------------------
   Eén patroon, overal hetzelfde. Labels, kaartkoppen, tabelkoppen en badges
   gebruiken dit; wie het elders nodig heeft, zet de klasse erop. */

.hs-label,
.form-label,
.card-header,
.table thead th,
.navbar {
  font-family: var(--hs-font-label);
  font-weight: 500;
  letter-spacing: var(--hs-label-spatie);
  text-transform: uppercase;
}

.hs-label,
.form-label,
.card-header,
.table thead th {
  font-size: 0.6875rem;
  color: var(--bs-secondary-color);
}

/* --- Navbar -------------------------------------------------------------- */

.navbar {
  background-color: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

.navbar-brand {
  font-family: var(--hs-font-kop);
  font-weight: 600;
  color: var(--bs-primary);
  font-size: 1.25rem;
  text-transform: none;
  letter-spacing: normal;
}

/* --- Knoppen ------------------------------------------------------------- */

.btn {
  font-family: var(--hs-font-label);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--bs-border-radius);
  padding: 0.625rem 1.5rem;
  transition: opacity 0.12s ease;
  /* Raakvlak van minstens 44 px, uit de stijlgids. Bootstrap komt met deze
     vulling op ongeveer 40 en dat is op een telefoon net te klein. */
  min-height: 44px;
}

.btn:hover { opacity: 0.82; }

/* Elke knopvariant van Bootstrap legt zijn kleuren vast bij het compileren en
   luistert níét naar --bs-primary. Zonder de blokken hieronder blijven de
   omlijnde en de secundaire knop Bootstrap-blauw, hoe je de variabelen ook
   zet. Nagemeten op de proefpagina; het is de enige plek waar het thema echt
   tegen Bootstrap in moet gaan.

   Ze staan in deze laag en niet in de merklaag, want er staat geen enkele
   kleurwaarde in — alleen de koppeling naar de variabelen die het merk zet. */

.btn-primary {
  --bs-btn-color:        var(--hs-op-primary);
  --bs-btn-bg:           var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color:        var(--hs-op-primary);
  --bs-btn-hover-bg:           var(--bs-link-hover-color);
  --bs-btn-hover-border-color: var(--bs-link-hover-color);
  --bs-btn-active-color:        var(--hs-op-primary);
  --bs-btn-active-bg:           var(--bs-link-hover-color);
  --bs-btn-active-border-color: var(--bs-link-hover-color);
  --bs-btn-disabled-bg:           var(--bs-secondary-bg);
  --bs-btn-disabled-border-color: var(--bs-border-color);
  --bs-btn-disabled-color:        var(--bs-secondary-color);
}

.btn-outline-primary {
  --bs-btn-color:        var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color:        var(--hs-op-primary);
  --bs-btn-hover-bg:           var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color:        var(--hs-op-primary);
  --bs-btn-active-bg:           var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color:        var(--bs-secondary-color);
  --bs-btn-disabled-border-color: var(--bs-border-color);
}

.btn-secondary {
  --bs-btn-color:        var(--hs-op-primary);
  --bs-btn-bg:           var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color:        var(--hs-op-primary);
  --bs-btn-hover-bg:           var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-active-color:        var(--hs-op-primary);
  --bs-btn-active-bg:           var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
}

.btn-outline-secondary {
  --bs-btn-color:        var(--bs-secondary-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color:        var(--bs-body-color);
  --bs-btn-hover-bg:           var(--bs-secondary-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-color:        var(--bs-body-color);
  --bs-btn-active-bg:           var(--bs-secondary-bg);
  --bs-btn-active-border-color: var(--bs-border-color);
}

/* De tekstknop is stil tot je erover gaat. Daarom de labelkleur en niet de
   linkkleur: hij staat vaak naast een gevulde knop en mag daar niet mee
   concurreren. */
.btn-link {
  --bs-btn-color:       var(--bs-secondary-color);
  --bs-btn-hover-color: var(--bs-primary);
  text-decoration: none;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Bootstrap kleurt een uitgeschakelde knop standaard met een blauwe tint.
   Hier wordt hij grijs, zonder doorzichtigheid — die leest als 'laadt nog'. */
.btn:disabled,
.btn.disabled {
  background-color: var(--bs-secondary-bg);
  border-color:     var(--bs-border-color);
  color:            var(--bs-secondary-color);
  opacity: 1;
}

/* --- Kaarten ------------------------------------------------------------- */

.card {
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: none;
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--bs-border-color);
  font-size: 0.625rem;
  letter-spacing: 0.20em;
  padding: 0.75rem 1.25rem;
}

.card-title {
  font-family: var(--hs-font-kop);
  font-weight: 300;
  color: var(--bs-heading-color);
}

/* --- Badges -------------------------------------------------------------- */

/* De badge van de huisstijl is omlijnd en niet gevuld: hij telt iets, hij
   waarschuwt niet. Bootstrap levert kaal een witte letter zonder achtergrond,
   en dat is op licht onzichtbaar. Wie hem toch gevuld wil, zet er een
   .text-bg-* naast; die wint van deze waarden. */
.badge {
  --bs-badge-color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  min-width: 26px;
  font-family: var(--hs-font-label);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: var(--bs-border-radius);
  padding: 0.35em 0.75em;
}

/* --- Formulieren --------------------------------------------------------- */

.form-control,
.form-select {
  font-family: var(--bs-body-font-family);
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--bs-body-color);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

/* --- Tabellen ------------------------------------------------------------
   Let op: dit geldt alleen voor `<table class="table">`. Tabellen in tekst
   die van een andere site komt hebben die klasse niet; daarvoor staat een
   apart blok in het stijlblad van de applicatie. */

.table thead th {
  border-bottom: 1px solid var(--bs-border-color);
}

.table > :not(caption) > * > * {
  border-color: var(--bs-border-color);
}

/* --- Tabs ---------------------------------------------------------------- */

.nav-tabs {
  border-bottom: 1px solid var(--bs-border-color);
}

.nav-tabs .nav-link {
  font-family: var(--hs-font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.5rem 1rem;
}

.nav-tabs .nav-link.active {
  color: var(--bs-primary);
  background-color: transparent;
  border-bottom-color: var(--bs-primary);
}

/* --- Meldingen ----------------------------------------------------------- */

.alert {
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color);
  border-left-width: 2px;
  border-left-color: var(--bs-primary);
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

/* --- Code ---------------------------------------------------------------- */

pre, code {
  font-family: var(--bs-font-monospace);
  font-size: 0.85em;
  color: var(--bs-primary);
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

pre { padding: 1rem 1.25rem; }
code { padding: 0.1em 0.3em; }
pre code { border: 0; padding: 0; background: none; }

/* --- Voettekst ----------------------------------------------------------- */

footer {
  border-top: 1px solid var(--bs-border-color);
  font-family: var(--hs-font-label);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color);
}

/* --- Toast --------------------------------------------------------------- */

.toast {
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
  box-shadow: none;
  font-family: var(--bs-body-font-family);
}