/* ============================================================================
   Rene's Autoservice — fundament
   ============================================================================
   Hier staat wat alle drie de schermen delen: de letters, de kleuren, de
   maatvoering en het gedrag van een knop. Daarvóór stonden de kleuren en de
   @font-face-regels twee keer — één keer in site.css en één keer in
   portaal.css — en dan lopen ze uit elkaar: portaal.css kende --groen en
   --oker, site.css niet, en niemand die dat merkte tot een statuskleur op de
   publieke site opeens ontbrak.

   Wat hier NIET staat: de vormgeving zelf. De publieke site is een etalage en
   het beheer is gereedschap; die mogen er verschillend uitzien. Wat ze wél
   moeten delen is het gedrag — wat een knop doet als je erop tabt, hoe een
   uitgeschakelde knop eruitziet, hoe groot een raakvlak op een telefoon is.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrainsmono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Kleur ──────────────────────────────────────────────────────────────
   * Koel werkplaats-wit, antraciet, en één rode redline. Puur zwart komt er
   * niet in: --inkt is #22262b, dat leest rustiger op een lichte ondergrond.
   * Wit gebruiken we wél, maar alleen als vlak op een grijze achtergrond —
   * dat is het contrast dat een kaart een kaart maakt. */
  --wit: #ffffff;
  --staal: #f3f5f7;
  --staal-2: #e6eaee;
  --lijn: #d6dbe1;
  --inkt: #22262b;
  --antraciet: #26292e;
  --antraciet-diep: #191b1f;
  --grijs: #667180;
  --grijs-licht: #9aa4b0;
  --rood: #d0111b;
  --rood-diep: #a70d15;
  --rood-zacht: rgba(208, 17, 27, 0.12);
  /* Dezelfde redline, maar lichter: op antraciet haalt #d0111b maar 2,6:1 en
   * dat leest niemand. Deze haalt 4,8:1. Alleen als tékstkleur gebruiken —
   * wit op dit rood is juist te weinig (3,1:1), dus nooit als knopvlak. */
  --rood-licht: #ff5964;
  --groen: #1c7a4a;
  --groen-zacht: rgba(28, 122, 74, 0.12);
  --oker: #8a6100;
  --oker-zacht: rgba(197, 141, 0, 0.16);

  /* Vlakken. Een naam die zegt wat het ís, niet welke kleur het heeft: zo
   * hoeft #fff niet 28 keer los in de bestanden te staan. */
  --vlak: var(--wit);
  --vlak-rustig: var(--staal);
  --vlak-diep: var(--antraciet);

  /* Betekenis, niet kleur. Wie "gelukt" bedoelt schrijft --goed, en dan blijft
   * groen overal groen. */
  --goed: var(--groen);
  --goed-zacht: var(--groen-zacht);
  --letop: var(--oker);
  --letop-zacht: var(--oker-zacht);
  --fout: var(--rood);
  --fout-zacht: var(--rood-zacht);

  /* ── Tekstkleuren die meebewegen met de ondergrond ───────────────────────
   * Rood op wit leest prima en op antraciet niet; met grijs is het net andersom.
   * Daarom niet overal een vaste kleur, maar deze twee: op een donker vlak
   * worden ze hieronder omgezet, en elke regel die ze gebruikt volgt vanzelf.
   * Zo hoeft niemand bij een nieuw donker blok te onthouden dat rood daar een
   * andere rode is. */
  --rood-tekst: var(--rood);
  --grijs-tekst: var(--grijs);

  /* ── Letters ─────────────────────────────────────────────────────────── */
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

  /* Een trap in plaats van 61 losse groottes. De kleinste is .78rem (12,5px):
   * kleiner dan dat leest niemand in een werkplaats, met vette handen en een
   * telefoon op armlengte. */
  --tekst-xs: 0.78rem;
  --tekst-s: 0.85rem;
  --tekst-m: 0.94rem;
  --tekst-l: 1.0625rem;
  --tekst-xl: 1.25rem;
  --tekst-2xl: 1.5rem;
  --tekst-3xl: 2rem;

  --regel-strak: 1.2;
  --regel-normaal: 1.5;
  --regel-ruim: 1.65;

  /* ── Ruimte ──────────────────────────────────────────────────────────────
   * Eén trap, in stappen van 4px. Ruimte is hoe je laat zien wat bij elkaar
   * hoort: label bij veld is --ruimte-1, veld tot volgend veld --ruimte-4,
   * blok tot blok --ruimte-6. Dat verschil doet het werk dat anders een
   * streep zou moeten doen. */
  --ruimte-1: 0.25rem; /*  4px */
  --ruimte-2: 0.5rem;  /*  8px */
  --ruimte-3: 0.75rem; /* 12px */
  --ruimte-4: 1rem;    /* 16px */
  --ruimte-5: 1.5rem;  /* 24px */
  --ruimte-6: 2rem;    /* 32px */
  --ruimte-7: 3rem;    /* 48px */
  --ruimte-8: 4rem;    /* 64px */

  /* ── Vorm ────────────────────────────────────────────────────────────── */
  --radius: 4px;
  --radius-klein: 3px;
  --radius-rond: 999px;

  /* Schaduw gebruiken we spaarzaam: een lijn doet het meestal beter. Drie
   * hoogtes zijn genoeg — rust, zwevend, en los van de pagina. */
  --schaduw-1: 0 1px 2px rgba(25, 27, 31, 0.06);
  --schaduw-2: 0 2px 7px rgba(38, 41, 46, 0.20);
  --schaduw-3: 0 6px 24px -8px rgba(24, 26, 30, 0.35);

  /* ── Lagen ───────────────────────────────────────────────────────────────
   * Zeven losse z-index-getallen door de bestanden heen wordt op een dag een
   * menu dat achter een kaart verdwijnt. Hier staat de volgorde. */
  --laag-verhoogd: 5;
  --laag-plakkend: 20;
  --laag-menu: 40;
  --laag-overlay: 50;
  --laag-melding: 60;
  --laag-skip: 100;

  /* ── Beweging ─────────────────────────────────────────────────────────── */
  --duur-snel: 120ms;
  --duur-normaal: 180ms;
  --duur-traag: 240ms;
  --soepel: cubic-bezier(0.2, 0, 0.2, 1);

  /* ── Raakvlak ────────────────────────────────────────────────────────────
   * Op een muisscherm mag het compact; op een telefoon of tablet moet je
   * kunnen mikken met een duim. Deze waarde groeit hieronder mee met het
   * soort aanwijzer, zodat de beheerschermen dicht blijven op een laptop en
   * ruim worden op de tablet in de werkplaats. */
  --raakvlak: 32px;
  --raakvlak-klein: 28px;
}

/* Grove aanwijzer = vinger. Dan gelden de afmetingen die je met een duim haalt.
 * Dit is de reden dat de knoppen niet overal even groot hoeven te zijn: het
 * scherm vertelt zelf waar het op gebruikt wordt. */
@media (pointer: coarse) {
  :root {
    --raakvlak: 44px;
    --raakvlak-klein: 40px;
  }
}

/* ── Donkere vlakken ────────────────────────────────────────────────────────
 * Alles wat op antraciet staat. Binnen deze blokken wijzen de teksttokens naar
 * de lichte variant; verder verandert er niets, want de vlakken zelf en de
 * knoppen houden hun eigen rood. Staat er een nieuw donker blok bij, dan hoort
 * de selector hier — dat is één regel, geen kleurenjacht. */
.perf, .perf-item, .cta, .paginakop--donker, .voet, .cookiebar,
.topbalk, .menupaneel, .balk, .motorcode {
  --rood-tekst: var(--rood-licht);
  --grijs-tekst: var(--grijs-licht);
}

/* ── Zichtbare focus ────────────────────────────────────────────────────────
 * Eén regel voor alle drie de schermen. Zonder dit is toetsenbordbediening
 * blindvliegen. */
:focus-visible {
  outline: 3px solid var(--rood);
  outline-offset: 2px;
}

/* ── Knoppen ────────────────────────────────────────────────────────────────
 * Het gedrag staat hier, de huid staat per scherm: de etalage heeft een grote
 * rode knop in kapitalen, het beheer een compacte. Wat ze delen is dat je erop
 * kunt mikken, ziet dat hij aanstaat, en ziet dat hij niet kan.
 *
 * .knop-klein stond drie keer los gedefinieerd — in klant.css, zoeken.css en
 * portaal.css, met drie verschillende paddings. Nu één keer, hier. */
.knop,
button.knop {
  /* inline-flex, niet inline-block: alleen dan doet min-height wat je bedoelt
   * en staat de tekst gecentreerd in plaats van tegen de bovenrand. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--raakvlak);
  cursor: pointer;
}
.knop-klein {
  min-height: var(--raakvlak-klein);
  padding: 0.3rem 0.6rem;
  font-size: var(--tekst-s);
  font-weight: 600;
}

/* Uitgeschakeld moet je kunnen zien, maar wel kunnen lezen: uitgrijzen tot
 * onleesbaar is geen toegankelijke oplossing. */
.knop:disabled,
.knop[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Bezig met versturen. De knop houdt zijn breedte, anders springt de hele
 * regel op het moment dat de tekst verandert. */
.knop[aria-busy="true"] {
  cursor: progress;
  opacity: 0.75;
}

/* ── Minder beweging ────────────────────────────────────────────────────────
 * Wie in zijn systeem aangeeft geen animaties te willen, krijgt ze niet — ook
 * niet het zachte scrollen, want juist dat maakt mensen met evenwichtsklachten
 * misselijk. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Tabellen op een smal scherm ─────────────────────────────────────────────
 * De meeste lijsten klappen om naar kaarten (.tabel-kaarten). Een tabel die dat
 * niet doet — de gebruikerslijst, de historie op de voertuigpagina, de cijfers —
 * duwde de hele pagina breder dan het scherm, zodat álles opzij schoof. Nu
 * schuift de tabel zelf, binnen zijn eigen rand, en blijft de pagina staan.
 * Niets wordt verborgen: alle kolommen blijven bereikbaar. */
@media (max-width: 47.99rem) {
  table:not(.tabel-kaarten) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Waar je op moet kunnen mikken ───────────────────────────────────────────
 * Gemeten op een tablet-viewport waren de balknaam 24px hoog, de uitlogknop
 * 26px, een tekstknop 15px en een vinkje 13x13px. Met een duim raak je dat niet
 * betrouwbaar. Op een muisscherm blijft alles compact (--raakvlak is daar 32px),
 * op een aanraakscherm groeit het naar 44px. */
.balk-naam,
.topbalk .balk-naam,
.bel,
.menu-knop,
.knop-tekst,
.voet__cookielink,
.menu-uit button,
summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--raakvlak-klein);
}

/* Een vinkje of keuzerondje is van zichzelf 13px. Groter maken helpt, maar wat
 * echt helpt is dat het label meedoet als raakvlak — dan is de hele regel raak. */
input[type="checkbox"],
input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--rood);
  flex: none;
}
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  min-height: var(--raakvlak);
  cursor: pointer;
}