/* ════════════════════════════════════════════════════════════════
   Demo-platform: de opmaak van FF Design System 2.0

   De norm is UI-UX.md in deze repo, en daarachter `UI-UX.md` en
   `frontend/src/templates/base.html` van Forfacts-B-V/you-portaal: die volgen
   rules/web.md van het design system (FF-WEB-01 … 05). De klassen hieronder
   zijn dezelfde ff-*-klassen als in het portaal.

   Het portaal bouwt ze met Tailwind (Play-CDN, @apply); dit platform heeft
   geen buildstap en geen Tailwind, dus staan ze hier als gewone CSS met
   dezelfde waarden. Verandert er in base.html een token of een componentmaat,
   dan moet het hier mee. Wat het portaal niet heeft (filters, KPI-tegels,
   grafieken) staat apart onder "Alleen in het demo-platform".

   Drie regels die alles hieronder verklaren:
     1. Koppen zijn Filson Pro Black (900), zwart, volledig onderkast en
        zonder leestekens. De paginakop eindigt op één blauwe punt.
     2. Vlakken liggen plat: wit op off-white met een haarlijn. Schaduw
        bestaat alleen als hover-lift van iets dat je kunt aanklikken.
     3. Zwart en wit leiden, rose accentueert. Knoppen zijn pillen, en er is
        hoogstens één rose hoofdactie per scherm.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── De tokens uit colors_and_type.css, en alleen die (FF-KLEUR-06) ── */
  --ff-black: #000000;
  --ff-white: #ffffff;
  --ff-off: #f5f5f5;
  --ff-rose: #e6007e;
  --ff-rose-dark: #cc006e; /* kleine rose tekst en hover van rose (FF-KLEUR-02) */
  --ff-rose-tint: rgba(230, 0, 126, 0.07); /* vlak achter een rose label of stand */
  --ff-blue: #0050ff; /* alleen de punt achter de paginakop (FF-WEB-05) */
  --ff-grey: #c8c8c8; /* stille scheiding: stippellijn, scrollbalk */
  --ff-grey-800: #333333; /* lopende tekst */
  --ff-grey-700: #555555; /* secundaire tekst: hint, datum, placeholder */
  --ff-hair: #e3e3e5; /* de haarlijn op wit, en de rand van een kaart */

  /* Het accent van het merk. De componenten gebruiken alleen deze namen, zodat
     een ander merk (thema-forsense hieronder) alleen hier iets verandert.
     Voor Forfacts is het accent rose. */
  --ff-accent: var(--ff-rose);
  --ff-accent-donker: var(--ff-rose-dark); /* kleine tekst in de accentkleur */
  --ff-accent-tint: var(--ff-rose-tint);
  --ff-accent-selectie: rgba(230, 0, 126, 0.18);
  --ff-accent-gloed: rgba(230, 0, 126, 0.35); /* hover van de hoofdknop */
  --ff-accent-focus: rgba(230, 0, 126, 0.12); /* focusrand van een veld */
  --ff-knop-tekst: var(--ff-white); /* tekst op de gevulde hoofdknop */

  /* Reekskleuren in grafieken, in vaste volgorde (zie ff-grafiek.js). */
  --ff-reeks-1: var(--ff-black);
  --ff-reeks-2: var(--ff-accent);
  --ff-reeks-3: var(--ff-grey);

  --ff-font: "filson-pro", Verdana, system-ui, sans-serif;
  /* Vier gewichten: 400 tekst, 500 labels, 700 knoppen en cijfers, 900 koppen.
     600 bestaat niet in het kit. */

  /* Vier radii, en niet meer. */
  --r-kaart: 16px;
  --r-paneel: 12px;
  --r-blok: 4px;
  --r-pil: 9999px;

  /* Eén easing in de hele applicatie. */
  --ff-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Kolombreedte en zijmarges: max-w-5xl met px-5 / sm:px-8 / lg:px-12. */
  --kolom: 64rem;
  --rand-x: 1.25rem;
}

/* ── Thema Forsense ──────────────────────────────────────────────────
   Forsense is het zustermerk voor de zorg, met dezelfde opbouw als Forfacts
   (Filson Pro, zwart-wit, de blauwe punt achter de kop), maar met limoengroen
   als accent in plaats van rose. Bron: forsense.nl en het logo.
     - #32CD32 is het merkgroen: hoofdknop, merkicoon, reekskleur.
     - Op een groene knop staat zwarte tekst (9,9:1), zoals op de site; wit
       haalt maar 2,1:1.
     - Kleine groene tekst is #208120: 4,97:1 op wit, 4,56:1 op off-white.
       #32CD32 als tekst haalt maar 2,1:1.
   Zet de klasse op <body> van een Forsense-pagina. */
.thema-forsense {
  --ff-accent: #32cd32;
  --ff-accent-donker: #208120;
  --ff-accent-tint: rgba(50, 205, 50, 0.1);
  --ff-accent-selectie: rgba(50, 205, 50, 0.25);
  --ff-accent-gloed: rgba(50, 205, 50, 0.4);
  --ff-accent-focus: rgba(50, 205, 50, 0.18);
  --ff-knop-tekst: var(--ff-black);
  --ff-reeks-2: #32cd32;
}

@media (min-width: 640px) {
  :root { --rand-x: 2rem; }
}

@media (min-width: 1024px) {
  :root { --rand-x: 3rem; }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ff-font);
  font-weight: 400;
  color: var(--ff-grey-800);
  background: var(--ff-off);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

::selection {
  background: var(--ff-accent-selectie);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

p,
h1,
h2,
h3,
h4 {
  margin: 0;
}

[hidden] {
  display: none !important;
}

/* Alleen voor schermlezers. */
.ff-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   Gespiegeld uit base.html van het portaal
   ══════════════════════════════════════════════════════════════════ */

/* ── Paginaraam ──────────────────────────────────────────────────── */
.ff-page {
  position: relative;
  z-index: 1;
  padding: 2.5rem var(--rand-x);
}

@media (min-width: 640px) {
  .ff-page {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

.ff-page-inner {
  max-width: var(--kolom);
  margin: 0 auto;
}

.ff-kolom {
  max-width: var(--kolom);
  margin: 0 auto;
  padding-left: var(--rand-x);
  padding-right: var(--rand-x);
  box-sizing: content-box;
}

/* Naar de inhoud: de eerste tab op elke pagina, onzichtbaar tot hij focus krijgt. */
.ff-naar-inhoud {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 80;
  transform: translateY(-6rem);
  border-radius: var(--r-pil);
  background: var(--ff-black);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ff-white);
  transition: transform 0.2s var(--ff-ease);
}

.ff-naar-inhoud:focus {
  transform: translateY(0);
}

/* ── Typografie ──────────────────────────────────────────────────── */
.ff-display {
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ff-black);
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .ff-display { font-size: 3rem; }
}

@media (min-width: 1024px) {
  .ff-display { font-size: 3.5rem; }
}

.ff-h2 {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ff-black);
  overflow-wrap: break-word;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .ff-h2 { font-size: 2rem; }
}

.ff-h3 {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--ff-black);
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* De ene blauwe punt van de pagina, aan het eind van de paginakop. */
.ff-dot {
  color: var(--ff-blue);
}

.ff-label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ff-accent-donker);
}

.ff-label-stil {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ff-grey-700);
}

.ff-lead {
  margin-top: 1rem;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ff-grey-800);
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .ff-lead { font-size: 1.0625rem; }
}

.ff-body {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ff-grey-800);
  text-wrap: pretty;
}

.ff-meta {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ff-grey-700);
}

.ff-hint {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ff-grey-700);
  text-wrap: pretty;
}

.ff-cijfers {
  font-variant-numeric: tabular-nums;
}

/* ── Paginakop ───────────────────────────────────────────────────── */
.ff-kop {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .ff-kop {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.ff-kop-tekst {
  min-width: 0;
}

.ff-kop-tekst .ff-label {
  display: block;
  margin-bottom: 0.75rem;
}

.ff-kop-acties {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.ff-merkicoon {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  color: var(--ff-accent);
}

/* ── Vlakken ─────────────────────────────────────────────────────── */
.ff-kaart {
  border-radius: var(--r-kaart);
  border: 1px solid var(--ff-hair);
  background: var(--ff-white);
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .ff-kaart { padding: 1.75rem; }
}

/* Alleen voor een kaart die je kunt aanklikken: lift bij hover. */
.ff-kaart-klik {
  transition: transform 0.3s var(--ff-ease), box-shadow 0.3s var(--ff-ease), border-color 0.3s var(--ff-ease);
}

.ff-subkaart {
  border-radius: var(--r-paneel);
  background: var(--ff-off);
  padding: 1rem;
}

.ff-paneel {
  border-radius: var(--r-paneel);
  background: var(--ff-accent-tint);
  padding: 1rem;
}

.ff-melding {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: var(--r-paneel);
  background: var(--ff-accent-tint);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ff-grey-800);
}

.ff-melding svg {
  margin-top: 0.3rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--ff-accent-donker);
}

/* ── Knoppen ─────────────────────────────────────────────────────── */
.ff-knop,
.ff-knop-zwart,
.ff-knop-rand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--r-pil);
  border: 1.5px solid var(--ff-black);
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  white-space: nowrap;
  transition: transform 0.2s var(--ff-ease), box-shadow 0.2s var(--ff-ease), background-color 0.2s var(--ff-ease),
    color 0.2s var(--ff-ease);
}

.ff-knop {
  border-color: var(--ff-accent);
  background: var(--ff-accent);
  color: var(--ff-knop-tekst);
}

.ff-knop-zwart {
  background: var(--ff-black);
  color: var(--ff-white);
}

.ff-knop-rand {
  background: transparent;
  color: var(--ff-black);
}

.ff-knop-groot {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.ff-knop-klein {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

.ff-knop-icoon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: var(--r-pil);
  color: var(--ff-grey-700);
  transition: background-color 0.2s var(--ff-ease), color 0.2s var(--ff-ease);
}

.ff-knop-icoon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.ff-link,
.ff-terug {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ff-black);
  transition: color 0.2s var(--ff-ease), gap 0.2s var(--ff-ease);
}

.ff-link > [aria-hidden],
.ff-terug > [aria-hidden],
.ff-link > svg {
  color: var(--ff-accent);
}

.ff-onderlink {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ff-grey-700);
  transition: color 0.2s var(--ff-ease);
}

/* Een icoon in een knop, link of chip schaalt mee met de tekst. */
.ff-knop svg,
.ff-knop-zwart svg,
.ff-knop-rand svg {
  width: 1rem;
  height: 1rem;
}

.ff-onderlink svg {
  width: 0.875rem;
  height: 0.875rem;
}

.ff-chip svg,
.ff-chip-rose svg,
.ff-chip-rand svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* ── Stand, chips en tags ────────────────────────────────────────────
   Twee standen: grijs is "in orde", rose is "hier moet je iets mee". Geen
   stoplichtkleuren. ff-chip-rand is een tag, geen stand. */
.ff-chip,
.ff-chip-rose,
.ff-chip-rand {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  border-radius: var(--r-pil);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
}

.ff-chip {
  background: var(--ff-off);
  color: var(--ff-grey-800);
}

.ff-chip-rose {
  background: var(--ff-accent-tint);
  color: var(--ff-accent-donker);
}

.ff-chip-rand {
  border: 1px solid var(--ff-hair);
  background: var(--ff-white);
  color: var(--ff-grey-800);
}

/* ── Formuliervelden ─────────────────────────────────────────────── */
.ff-veldlabel {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ff-black);
}

.ff-microlabel {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ff-grey-700);
}

.ff-veld,
.ff-veld-klein {
  width: 100%;
  border: 1px solid var(--ff-hair);
  background: var(--ff-white);
  color: var(--ff-black);
  outline: none;
  transition: border-color 0.2s var(--ff-ease), box-shadow 0.2s var(--ff-ease);
}

.ff-veld {
  margin-top: 0.5rem;
  border-radius: var(--r-paneel);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
}

.ff-veld-klein {
  margin-top: 0.375rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Een keuzelijst in dezelfde vorm, met een eigen pijltje. */
select.ff-veld,
select.ff-veld-klein {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

/* ── Tabbladen ───────────────────────────────────────────────────── */
.ff-tabs {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  border-radius: var(--r-pil);
  background: var(--ff-off);
  padding: 0.25rem;
  scrollbar-width: none;
}

.ff-tabs::-webkit-scrollbar {
  display: none;
}

.ff-tab {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  border-radius: var(--r-pil);
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ff-grey-800);
  transition: color 0.2s var(--ff-ease), background-color 0.2s var(--ff-ease);
}

@media (min-width: 640px) {
  .ff-tab {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
  }
}

.ff-tab-actief {
  background: var(--ff-black);
  font-weight: 700;
  color: var(--ff-white);
}

/* ── Tabellen ────────────────────────────────────────────────────── */
.ff-tabel-raam {
  overflow: hidden;
  border-radius: var(--r-kaart);
  border: 1px solid var(--ff-hair);
  background: var(--ff-white);
}

.ff-tabel {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.ff-tabel th {
  padding: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ff-grey-700);
  white-space: nowrap;
}

.ff-tabel td {
  border-top: 1px solid var(--ff-hair);
  padding: 0.75rem;
  vertical-align: middle;
  color: var(--ff-grey-800);
}

.ff-tabel th:first-child,
.ff-tabel td:first-child {
  padding-left: 1.25rem;
}

.ff-tabel th:last-child,
.ff-tabel td:last-child {
  padding-right: 1.25rem;
}

.ff-tabel tbody tr {
  transition: background-color 0.2s var(--ff-ease);
}

/* ── Overlays ────────────────────────────────────────────────────── */
.ff-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem;
  backdrop-filter: blur(4px);
  overscroll-behavior: contain;
}

.ff-modal.open {
  display: flex;
}

.ff-modal-kaart {
  display: flex;
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - 2rem);
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-kaart);
  background: var(--ff-white);
}

.ff-modal-kop {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--ff-hair);
  padding: 1rem 1.25rem;
}

.ff-toast {
  pointer-events: none;
  position: fixed;
  bottom: 6rem;
  left: 50%;
  z-index: 60;
  transform: translate(-50%, 0.5rem);
  border-radius: var(--r-pil);
  background: var(--ff-black);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ff-white);
  opacity: 0;
  transition: opacity 0.3s var(--ff-ease), transform 0.3s var(--ff-ease);
}

.ff-toast.zichtbaar {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── Standen: laden, leeg ────────────────────────────────────────── */
.ff-lader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 6rem 0;
  color: var(--ff-grey-700);
  font-size: 0.875rem;
}

.ff-lader-ring {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-pil);
  border: 3px solid var(--ff-accent-tint);
  border-top-color: var(--ff-accent);
  animation: ff-draai 1s linear infinite;
}

@keyframes ff-draai {
  to { transform: rotate(360deg); }
}

.ff-leeg {
  max-width: 28rem;
  margin: 0 auto;
  padding: 5rem 0;
  text-align: center;
}

/* ── Contextbalk ─────────────────────────────────────────────────────
   Zegt waar je vandaan komt en wat je hier kunt doen; benoemt de pagina
   niet. Met de blur van de nav van de site. */
.ff-balk {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--ff-hair);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
}

.ff-balk-rij {
  display: flex;
  min-height: 3.75rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.ff-balk-acties {
  margin-left: auto;
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Binnenkomen na een handeling, nooit bij het laden van de pagina. */
.ff-in {
  animation: ff-in 0.5s var(--ff-ease);
}

@keyframes ff-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════
   Alleen in het demo-platform
   ══════════════════════════════════════════════════════════════════ */

/* Logo's in de contextbalk van de startpagina. Er is geen zijmenu, dus het
   logo staat hier, links, net als in de nav van de site. */
.ff-merken {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ff-merken img {
  display: block;
  height: 2rem;
  width: auto;
}

.ff-merken .ff-merk-forsense {
  height: 1.5rem;
}

.ff-merken-scheiding {
  width: 1px;
  height: 1.75rem;
  background: var(--ff-hair);
}

/* Dashboards hebben de breedte nodig: grafieken naast elkaar. */
.ff-breed {
  max-width: 90rem;
}

.ff-breed.ff-kolom {
  max-width: 90rem;
}

.ff-sectie {
  margin-top: 3.5rem;
}

.ff-sectie-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1.25rem;
}

/* Een raster van kaarten dat meegroeit met de breedte. */
.ff-raster {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.ff-raster-2 {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .ff-raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* De demo's op de startpagina: twee naast elkaar vanaf tabletbreedte. */
@media (min-width: 640px) {
  .ff-raster-demos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ff-raster-3 {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .ff-raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .ff-raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ff-breed-2 {
  grid-column: 1 / -1;
}

/* Een demokaart op de startpagina: merkicoon, kop, uitleg, en onderaan de
   stand en de actie. */
.ff-demo {
  display: flex;
  min-height: 15rem;
  flex-direction: column;
  gap: 1rem;
}

.ff-demo .ff-body {
  flex: 1;
}

.ff-demo-voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Zolang we niet weten of je ingelogd bent, doen de kaarten niets. */
.is-laden .ff-demo {
  pointer-events: none;
}

/* ── Filters ─────────────────────────────────────────────────────────
   Eén rij boven de inhoud die ze filteren, nooit in een kaart. */
.ff-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  margin-top: 2rem;
}

.ff-filter {
  min-width: 10rem;
}

.ff-filter .ff-veld-klein {
  min-width: 10rem;
}

.ff-filter-bereik {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ff-filter-bereik .ff-veld-klein {
  width: 5rem;
  min-width: 0;
}

.ff-filters-actief {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Meer filters: het paneel klapt open onder de rij. */
.ff-filters-meer {
  margin-top: 1rem;
}

/* Wisselen tussen analyse en rapport binnen een onderwerp. */
.ff-weergave {
  margin-top: 1.5rem;
}

.ff-inhoud {
  margin-top: 2rem;
  display: grid;
  gap: 1rem;
  transition: opacity 0.2s var(--ff-ease);
}

/* ── KPI-tegels ──────────────────────────────────────────────────────
   Label, waarde, en daaronder de vergelijking. De waarde is groot en zwart,
   met gewone (proportionele) cijfers. */
.ff-tegels {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

/* Een vast aantal per rij, zodat 8 tegels als 4 + 4 staan en 6 als 3 + 3. */
@media (min-width: 640px) {
  .ff-tegels-4,
  .ff-tegels-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ff-tegels-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ff-tegels-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ff-tegel {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.25rem;
}

@media (min-width: 640px) {
  .ff-tegel { padding: 1.25rem 1.5rem; }
}

.ff-tegel-waarde {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ff-black);
  white-space: nowrap;
}

.ff-tegel-leeg {
  color: var(--ff-grey-700);
}

.ff-tegel-vergelijk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--ff-grey-700);
}

.ff-tegel-voet {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Een tegel met een grafiekje eronder (het Taxi-dashboard). */
.ff-tegel-groot {
  min-height: 21rem;
}

/* ── Grafieken ───────────────────────────────────────────────────── */
.ff-grafiekkaart {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1rem;
}

.ff-grafiekkaart-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.ff-grafiek {
  position: relative;
  min-height: 16rem;
}

.ff-grafiek svg {
  display: block;
  overflow: visible;
}

.ff-grafiek svg:focus-visible {
  outline: 2px solid var(--ff-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.ff-as {
  font-size: 11px;
  fill: var(--ff-grey-700);
  font-variant-numeric: tabular-nums;
}

.ff-raster-lijn {
  stroke: var(--ff-hair);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.ff-nullijn {
  stroke: var(--ff-grey);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.ff-dradenkruis {
  stroke: var(--ff-grey-700);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

/* De band onder de muis bij kolommen: een geest, geen kleur. */
.ff-hoverband {
  fill: var(--ff-off);
}

.ff-tooltip {
  pointer-events: none;
  position: absolute;
  z-index: 5;
  min-width: 9rem;
  max-width: 18rem;
  border-radius: var(--r-paneel);
  border: 1px solid var(--ff-hair);
  background: var(--ff-white);
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.ff-tooltip-kop {
  margin-bottom: 0.375rem;
  font-weight: 500;
  color: var(--ff-grey-700);
}

.ff-tooltip-rij {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.6;
}

.ff-tooltip-rij strong {
  font-weight: 700;
  color: var(--ff-black);
  font-variant-numeric: tabular-nums;
}

.ff-tooltip-rij span:last-child {
  color: var(--ff-grey-700);
}

/* Lijnsleutel in de tooltip en de legenda van een lijngrafiek. */
.ff-sleutel-lijn {
  display: inline-block;
  width: 0.875rem;
  height: 2px;
  flex-shrink: 0;
  border-radius: 1px;
}

/* Vlaksleutel in de legenda van kolommen en balken. */
.ff-sleutel-vlak {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  flex-shrink: 0;
  border-radius: 2px;
}

.ff-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.8125rem;
  color: var(--ff-grey-800);
}

.ff-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Klein naast elkaar: drie grafiekjes met elk een eigen schaal. */
.ff-klein-naast {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .ff-klein-naast { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ff-klein-naast .ff-grafiek {
  min-height: 11rem;
}

/* Meter: een balk van 0 tot max, gevuld tot de waarde, met het target als streep. */
.ff-meter {
  position: relative;
  height: 0.75rem;
  border-radius: var(--r-pil);
  background: var(--ff-off);
}

.ff-meter-vulling {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--r-pil);
  background: var(--ff-black);
}

.ff-meter-doel {
  position: absolute;
  top: -0.375rem;
  bottom: -0.375rem;
  width: 2px;
  margin-left: -1px;
  background: var(--ff-accent);
}

.ff-meter-schaal {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--ff-grey-700);
}

/* Verdeling: één gestapelde balk (aanwezig, ontbreekt) die je kunt aanklikken
   om de tabel ernaast te filteren. */
.ff-verdeling {
  display: flex;
  height: 2rem;
  gap: 2px;
  overflow: hidden;
  border-radius: var(--r-blok);
}

.ff-verdeling button {
  min-width: 2px;
  transition: opacity 0.2s var(--ff-ease);
}

.ff-verdeling.heeft-keuze button:not([aria-pressed="true"]) {
  opacity: 0.25;
}

/* Grote tabellen: scrollen binnen het raam, kop blijft staan. */
.ff-tabel-scroll {
  max-height: 36rem;
  overflow: auto;
}

.ff-tabel-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ff-white);
  box-shadow: inset 0 -1px 0 var(--ff-hair);
}

.ff-tabel .rechts {
  text-align: right;
}

.ff-tabel th button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 500;
  color: inherit;
}

.ff-tabel th[aria-sort="ascending"] button,
.ff-tabel th[aria-sort="descending"] button {
  color: var(--ff-black);
}

.ff-tabel tfoot td {
  font-weight: 700;
  color: var(--ff-black);
}

.ff-tabel-voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px solid var(--ff-hair);
  padding: 0.75rem 1.25rem;
}

/* Vraag en antwoord: een lijst die openklapt. */
.ff-vragen {
  overflow: hidden;
  border-radius: var(--r-kaart);
  border: 1px solid var(--ff-hair);
  background: var(--ff-white);
}

.ff-vragen details + details {
  border-top: 1px solid var(--ff-hair);
}

.ff-vragen summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ff-black);
  transition: background-color 0.2s var(--ff-ease);
}

.ff-vragen summary::-webkit-details-marker {
  display: none;
}

.ff-vragen summary svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--ff-grey-700);
  transition: transform 0.2s var(--ff-ease);
}

.ff-vragen details[open] summary svg {
  transform: rotate(180deg);
}

.ff-vragen .ff-body {
  padding: 0 1.25rem 1.25rem;
  max-width: 48rem;
}

/* Een lijst met vinkjes (welke demo's in een link). */
.ff-keuzes {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.ff-keuze {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  border-radius: var(--r-paneel);
  border: 1px solid var(--ff-hair);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--ff-black);
  transition: border-color 0.2s var(--ff-ease);
}

.ff-keuze input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--ff-accent);
}

.ff-voet {
  padding: 2.5rem var(--rand-x) 3rem;
}

/* ══════════════════════════════════════════════════════════════════
   STANDEN · hover, press, focus, disabled
   ══════════════════════════════════════════════════════════════════ */

a,
button,
summary,
label,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:focus-visible {
  outline: 2px solid var(--ff-accent);
  outline-offset: 2px;
}

.ff-veld:focus-visible,
.ff-veld-klein:focus-visible {
  outline: none;
}

.ff-kaart-klik:hover {
  border-color: var(--ff-accent);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.ff-knop:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 32px var(--ff-accent-gloed);
}

.ff-knop-zwart:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.ff-knop-rand:hover {
  transform: scale(1.03);
  background-color: var(--ff-black);
  color: var(--ff-white);
}

.ff-knop:active,
.ff-knop-zwart:active,
.ff-knop-rand:active {
  transform: scale(0.98);
}

.ff-knop:disabled,
.ff-knop-zwart:disabled,
.ff-knop-rand:disabled,
.ff-knop[aria-disabled="true"],
.ff-knop-zwart[aria-disabled="true"],
.ff-knop-rand[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.4;
  transform: none;
  box-shadow: none;
}

.ff-knop-icoon:hover {
  background-color: var(--ff-off);
  color: var(--ff-black);
}

.ff-link:hover,
.ff-terug:hover,
.ff-kaart-klik:hover .ff-link {
  color: var(--ff-accent-donker);
  gap: 0.625rem;
}

.ff-onderlink:hover {
  color: var(--ff-accent-donker);
}

.ff-veld::placeholder,
.ff-veld-klein::placeholder {
  color: var(--ff-grey-700);
  opacity: 1;
}

.ff-veld:hover,
.ff-veld-klein:hover {
  border-color: var(--ff-grey);
}

.ff-veld:focus,
.ff-veld-klein:focus {
  border-color: var(--ff-accent);
  box-shadow: 0 0 0 3px var(--ff-accent-focus);
}

.ff-tab:not(.ff-tab-actief):hover {
  color: var(--ff-black);
  background-color: var(--ff-white);
}

.ff-tabel tbody tr:hover {
  background-color: var(--ff-off);
}

.ff-tabel th button:hover {
  color: var(--ff-black);
}

.ff-vragen summary:hover {
  background-color: var(--ff-off);
}

.ff-keuze:hover {
  border-color: var(--ff-grey);
}

.ff-keuze:has(input:checked) {
  border-color: var(--ff-accent);
}

.ff-verdeling button:hover {
  opacity: 0.8;
}

/* De lader verschijnt pas na 250ms, zodat hij niet opflitst. */
.ff-lader {
  animation: ff-verschijn 0.2s var(--ff-ease) 0.25s both;
}

@keyframes ff-verschijn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Op een aanraakscherm is een doel minstens 44px hoog. */
@media (pointer: coarse) {
  .ff-knop-klein { min-height: 44px; }
  .ff-knop-icoon { width: 44px; height: 44px; }
  .ff-tab { min-height: 44px; }
}

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

::-webkit-scrollbar-thumb {
  background-color: var(--ff-grey);
  border-radius: 9999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ff-kaart-klik:hover,
  .ff-knop:hover,
  .ff-knop-zwart:hover,
  .ff-knop-rand:hover {
    transform: none;
  }
}