/* FoodBase-huisstijl: aanvullende visuele laag bovenop Metronic (16-08-2026).
   Stijlpatroon overgenomen uit het eerder gebouwde Prototype-dashboard
   (app.proto.foodbase.io) op verzoek van de gebruiker -- dat bleek al de juiste, premium
   FoodBase-uitstraling te hebben: zachte blauwgrijze achtergrond, navy-verloop, zachte
   navy-getinte kaartschaduwen met hover-lift, oranje sectie-onderstreping. */

:root {
  --fb-navy: #234b90;
  --fb-navy-donker: #1c3c73;
  --fb-oranje: #f05624;
  --fb-mint: #5bab98;
  --fb-mint-donker: #4d9181;
  --fb-tekst: #1c2530;
  --fb-tekst-secundair: #4a5568;
  --fb-tekst-muted: #8a94a6;
  --fb-rand: #e6eaf2;
  --fb-achtergrond: #f4f6fa;
}

/* BELANGRIJKE FIX 16-08-2026 ("beheer is smaller dan de rest", "mijn profiel ziet er anders
   uit"): ALLE `max-w-[Npx]`-klassen (bracket-notatie, een Tailwind-arbitrary-value) in de hele
   webapp bleken NOOIT te hebben gewerkt -- zelfde oorzaak als de eerdere `mt-8`-ontdekking:
   `styles.css` is een kant-en-klare, niet-herbouwde Tailwind-bundel uit Metronic, en bracket-
   notatie met een eigen exacte pixelwaarde staat er alleen in als Metronic's eigen demo-
   pagina's toevallig precies diezelfde waarde ooit gebruikten (zeer onwaarschijnlijk bij een
   eigen gekozen getal). Bevestigd via `grep` op `styles.css`: `max-w-[700px]`/`[800px]`/
   `[900px]`/`[1000px]`/`[640px]`/`[370px]` en `h-[28px]` stonden ALLEMAAL nergens in het
   bestand -- elke pagina rende dus zonder enige breedtebeperking, en verschilde in de praktijk
   alleen zichtbaar per pagina omdat elke pagina's EIGEN inhoud (grid vs. lijst vs. formulier)
   toevallig een andere natuurlijke breedte innam. Vandaar nu twee eigen, echt werkende
   klassen -- en bewust GECONSOLIDEERD naar één standaardbreedte i.p.v. de oude 5 losse,
   nooit-effectieve getallen (700/800/900/1000px) apart te "repareren": */
/* 1200px (16-08-2026, "past er nog genoeg op een breed scherm" -- bevestigd via web-onderzoek:
   1140-1280px is de gangbare aanbevolen breedte voor een inhoudscontainer, 1200px zit daar
   precies middenin. Mobiel merkt hier niets van -- p-5 zorgt daar altijd voor normale marges,
   deze grens komt pas in beeld vanaf een breed bureaubladscherm). */
.fb-main { max-width: 1200px; }
.fb-main-narrow { max-width: 640px; } /* HygiëneCoach fotoronde/controle: bewust smal, focus-flow */
.fb-login-card { max-width: 370px; }
.fb-hero-logo { height: 28px; max-width: none; }

/* ZELFDE ONTBREKENDE-KLASSE-PATROON OPNIEUW GEVONDEN (18-08-2026, tijdens het opnieuw doorlopen
   van het Activiteitenoverzicht-scherm op verzoek van de gebruiker): `.py-16` (de verticale
   binnenmarge die vrijwel élk scherm in de hele app gebruikt voor zijn "bezig met laden…"/
   "niets gevonden"-melding -- dashboard/organisaties/hygienecoach-dashboard/-tijdlijn/overzicht,
   enzovoort) bleek NERGENS gecompileerd in `styles.css` (bevestigd via `grep`: `.py-0` t/m
   `.py-10` bestaan wel, `.py-16` nergens) -- exact dezelfde oorzaak als eerder bij `.mt-8` en de
   `max-w-[Npx]`-klassen. Hier bewust WEL de originele Tailwind-klassenaam hergebruikt (i.p.v. een
   nieuwe `.fb-*`-naam zoals bij de eerdere fixes) omdat dezelfde klasse al app-breed op meerdere
   bestaande pagina's staat -- dit ene, in punt-waarde identieke CSS-blok herstelt de bedoelde
   verticale ruimte overal tegelijk, zonder elk bestand apart te hoeven aanpassen. Waarde
   overgenomen uit Tailwind's eigen spacing-schaal (`var(--spacing)`, al gedefinieerd in
   styles.css), zelfde formule als de wél-gecompileerde `.py-10`/`.mb-16`. */
.py-16 { padding-block: calc(var(--spacing) * 16); }

/* 18-08-2026, opgeruimd (was hier eerst een tijdelijke `.flex-shrink-0`-aliasregel): dezelfde
   `class="...flex-shrink-0"` (de OUDE Tailwind v3-naam, deze Metronic-bundel is v4 en compileert
   alleen `.shrink-0`) bleek na een repo-brede grep (buiten inline `style="...flex-shrink:0"` --
   dat is gewoon rauwe CSS en werkt sowieso altijd, geen Tailwind-klasse) maar op ÉÉN plek
   daadwerkelijk als klasse te staan (`web/js/hygienecoach-tijdlijn.js`), rechtstreeks gefixt naar
   `.shrink-0` i.p.v. hier een blijvende compatibiliteitsregel te onderhouden. */

/* Zachte blauwgrijze paginategrond i.p.v. kaal wit -- direct uit het Prototype-dashboard. */
body { background-color: var(--fb-achtergrond) !important; }

/* 02-09-2026, BUG GEVONDEN+GEFIXT (gebruiker zag een lege strook rechts op het scherm zodra er
   AI-tekst met variabele lengte op de pagina stond -- productbeoordeling-keuring.js miste
   min-width:0 op een flex-kolom, echte oorzaak daar gefixt): projectbrede vangnet-regel erbij,
   zodat een vergelijkbare toekomstige overflow (ergens anders, door AI-tekst of iets anders
   onvoorspelbaars) hooguit onzichtbaar wordt afgekapt i.p.v. een zichtbare, verwarrende
   lege/scrollbare strook op te leveren. Lost de oorzaak niet op, vangt wel het zichtbare gevolg.

   02-09-2026, DIRECT DAARNA REGRESSIE GEVONDEN+GEFIXT (gebruiker: "het menu bovenin valt op den
   duur weg op iOS"): dit stond eerst op `overflow-x: hidden`, en dat brak de sticky header
   (.fb-header, position:sticky hieronder). Reden: zodra één overflow-as niet `visible` is,
   rekent de browser de andere as door naar `auto` -- html/body worden daarmee een scroll-
   container, en een sticky element scrollt dan gewoon mee weg i.p.v. te blijven plakken.
   `overflow-x: clip` clipt exact hetzelfde, maar maakt GEEN scroll-container/formatting context
   en laat sticky dus met rust (geverifieerd via web-onderzoek: benfrain.com "Yes! You can use
   position: sticky and overflow together" + terluinwebdesign.nl). Ondersteund vanaf Safari 16
   (2022) en alle andere moderne browsers; een browser die `clip` niet kent negeert deze regel
   simpelweg -- dan is alleen dit vangnet weg, de sticky header werkt wel, en de ECHTE
   overflow-oorzaak is toch al bij de bron opgelost. Bewuste, veilige degradatie. */
html, body { overflow-x: clip; }
/* 03-09-2026: dit bleef een vangnet. De ECHTE oorzaak is inmiddels gevonden en
   staat onderaan dit bestand onder "Niets mag buiten beeld vallen". */

/* Kaarten: zelfde premium-behandeling als het Prototype-dashboard (navy-getinte schaduw,
   hover-lift) i.p.v. Metronic's platte, kale kt-card-rand. */
.kt-card {
  border-radius: 14px !important;
  border-color: var(--fb-rand) !important;
  box-shadow: 0 8px 24px rgba(28,60,115,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.fb-hoverable, .fb-hoverable {
  transition: transform .15s ease, box-shadow .15s ease;
}
a.fb-hoverable:hover, .fb-hoverable:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(28,60,115,.16);
}

/* Sectiekoppen: oranje onderstreping, zelfde herkenbare accent als het Prototype-dashboard. */
.fb-section-heading {
  color: var(--fb-navy-donker); font-weight: 600;
  border-bottom: 2px solid var(--fb-oranje); padding-bottom: 8px; margin-bottom: 16px;
}
/* Ruimte boven een volgende sectiekop (16-08-2026, "beheer" te strak op elkaar -- 2e keer
   gemeld). BUG GEVONDEN: de eerdere fix gebruikte de Tailwind-klasse `mt-8`, die in dit project
   NIET bestaat -- `web/assets/css/styles.css` is een KANT-EN-KLARE, NIET opnieuw gecompileerde
   Tailwind-bundel uit het Metronic-pakket (geen build-stap hier, zie project-afspraak); alleen
   klassen die Metronic's eigen demo-pagina's al gebruikten zitten er ook echt in (bevestigd:
   `.mt-0` t/m `.mt-7` bestaan wél, `.mt-8` bestaat nergens in het bestand) -- de HTML-klasse
   stond er dus voor niets, zonder enig zichtbaar effect. Vandaar nu een eigen, expliciete
   klasse i.p.v. gokken welk Tailwind-getal toevallig wel meegecompileerd is. */
.fb-section-gap-top { margin-top: 32px; }

/* Header: navy-verloop i.p.v. platte kleur. Blijft bovenin vast staan tijdens scrollen
   (16-08-2026, verzoek) -- sticky i.p.v. fixed, want dat vraagt geen gecompenseerde
   padding-top op <main> (sticky blijft gewoon in de normale document-flow tot je 'm voorbij
   scrollt). z-index zorgt dat onderliggende kaarten/content er nooit overheen schuiven; de
   gebruikersmenu-dropdown (z-index 50, zie .fb-user-dropdown.kt-dropdown-menu) zit er DOM-
   technisch binnenin en blijft dus vanzelf nog hoger. */
.fb-header {
  background: linear-gradient(120deg, var(--fb-navy) 0%, var(--fb-navy-donker) 100%) !important;
  position: sticky; top: 0; z-index: 40;
}
/* BUGFIX 16-08-2026 ("op iPhone als geïnstalleerde app valt de bovenkant weg, menu niet meer
   opvraagbaar"): `apple-mobile-web-app-status-bar-style: black-translucent` + `viewport-fit=
   cover` (beide al aanwezig, nodig voor een echt "app"-gevoel) laten de statusbalk (klok/
   batterij/Dynamic Island) TRANSPARANT over de pagina-inhoud heen vallen i.p.v. 'm opzij te
   duwen -- zonder eigen correctie valt de header dus samen met de statusbalk, en het
   menu-avatarknopje (waar de tik op terechtkomt) wordt onbereikbaar. Bevestigd via
   web-onderzoek als bekend/standaard iOS-PWA-patroon, oplossing: env(safe-area-inset-top)
   als extra padding, alleen in standalone-weergave (in een gewone browsertab is er geen
   overlap-probleem en zou dit ongewenste lege ruimte toevoegen). De navy-achtergrond zelf
   blijft WEL tot de fysieke rand doorlopen (padding zit binnen dezelfde achtergrond-box) --
   alleen de inhoud (logo/titel/menu) schuift naar beneden, geeft een verzorgd "native
   app"-gevoel i.p.v. een kale, geforceerde witruimte. */
@media (display-mode: standalone) {
  .fb-header { padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important; }
}

/* Windows Window Controls Overlay (16-08-2026, "nog nativer" -- gevraagde verfijning, geen bug).
   Alleen actief als Chrome/Edge op Windows (of macOS) de app zo geïnstalleerd heeft (staat aan
   in manifest.webmanifest se display_override) -- overal elders precies hetzelfde gedrag als nu.
   Header verhuist naar de eigen titelbalk-strook zelf (naast de systeemknoppen -- min/max/sluit
   rechts op Windows, verkeerslichtjes links op macOS) i.p.v. daaronder een tweede balk te tonen.
   env(titlebar-area-*) komt rechtstreeks van de browser, bestaat pas als display-mode dit is.
   app-region: drag maakt de lege ruimte sleepbaar (zoals een normale titelbalk), no-drag op alle
   klikbare onderdelen zodat die gewoon werken. NB: vraagt mogelijk een herinstallatie van de
   Windows-app om zichtbaar te worden -- display_override wordt niet altijd meteen herlezen. */
@media (display-mode: window-controls-overlay) {
  .fb-header {
    position: fixed;
    top: env(titlebar-area-y, 0);
    left: env(titlebar-area-x, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 40px);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    -webkit-app-region: drag;
            app-region: drag;
  }
  .fb-header a, .fb-header button, .fb-header select, .fb-header .fb-user-menu {
    -webkit-app-region: no-drag;
            app-region: no-drag;
  }
  /* De rest van de pagina moet onder de nieuwe, losstaande titelbalk-header beginnen -- die
     staat nu fixed, dus telt niet meer mee in de normale document-flow. */
  body { padding-top: env(titlebar-area-height, 40px); }
}
/* Logo wit maken via CSS-filter -- geen apart wit-logobestand nodig, zelfde truc als het
   Prototype-dashboard (werkt op elk gekleurd SVG/PNG-logo). */
.fb-logo-white { filter: brightness(0) invert(1); }

/* Het logo in de header, in kleur op een wit vlak (08-09-2026, op verzoek van de klant en naar
   het voorbeeld van foodbase.nl). Alleen het witfilter weghalen werkt niet: het woordmerk
   FOODBASE is bijna zwart en verdwijnt dan in het navy. Een wit vlak eronder lost dat op en is
   precies hoe zij het op hun eigen site doen.
   content-box zodat de padding bij de hoogte OPTELT en het logo zelf niet kleiner wordt. */
.fb-logo-vlak {
  background: #ffffff;
  border-radius: 8px;
  padding: 5px 9px;
  box-sizing: content-box;
}

/* Contrastfix: Metronic's eigen .kt-btn-outline/tekstkleur-regels wonnen het van de
   Tailwind-utility-classes (text-white e.d.) op de navy header -- hier expliciet met hogere
   specificiteit afgedwongen, anders onleesbaar donker-op-navy. */
.fb-header, .fb-header * { color: #ffffff; }
.fb-header .fb-text-muted { color: rgba(255,255,255,.75) !important; }
.fb-header .kt-btn-outline,
.fb-header .kt-btn-outline:hover { border-color: rgba(255,255,255,.4) !important; background: transparent; }
.fb-header .kt-btn-outline:hover { background: rgba(255,255,255,.12) !important; }
/* De staff-organisatiekiezer heeft een WITTE achtergrond (.kt-input) middenin de navy balk --
   zonder deze regel zou .fb-header * 'm ook wit-op-wit onleesbaar maken, zelfde valkuil als
   eerder bij het gebruikersmenu. */
.fb-header #staff_org_select, .fb-header #staff_org_select option { color: var(--fb-tekst) !important; }

/* Gebruikersmenu-dropdown in de header. Zit DOM-technisch binnen .fb-header, dus de
   witte-tekst-regel hierboven (.fb-header *) cascadeert er ook in -- de kale <span>-labels
   per menu-item ("Mijn profiel" e.d.) hadden geen eigen kleurregel en bleven daardoor
   wit-op-wit, onleesbaar. Hier expliciet de leesbare kleur terugzetten voor alles in de
   dropdown; de specifiekere regels verderop (naam/e-mail/badges/uitloggen-rood) blijven
   die daarna weer overschrijven zoals bedoeld. */
.fb-user-menu { position: relative; }
.fb-user-dropdown, .fb-user-dropdown * { color: var(--fb-tekst); }
.fb-user-avatar {
  width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; background: rgba(255,255,255,.18); font-weight: 700; font-size: 13px;
}
.fb-user-dropdown.kt-dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 10px); width: 270px;
  background: #ffffff; border-radius: 12px; border: 1px solid var(--fb-rand);
  box-shadow: 0 12px 32px rgba(28,60,115,.2); overflow: hidden; z-index: 50;
  padding: 0 !important; /* overschrijft Metronic's eigen .kt-dropdown-menu-padding */
}
.fb-user-dropdown .fb-ud-header { padding: 14px 16px; border-bottom: 1px solid var(--fb-rand); }
.fb-user-dropdown .fb-ud-name { color: var(--fb-tekst); font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.fb-user-dropdown .fb-ud-email { color: var(--fb-tekst-muted); font-size: 12px; overflow-wrap: anywhere; }
.fb-user-dropdown a, .fb-user-dropdown button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 16px; font-size: 13px; font-weight: 500; color: var(--fb-tekst);
  background: none; border: none; cursor: pointer; line-height: 1.3;
}
/* BUGFIX 16-08-2026 ("Alle organisaties/Personeelsbeheer zichtbaar zonder rechten"): de regel
   hierboven (klasse + element, specificiteit 0-1-1) versloeg Tailwind's kale ".hidden { display:
   none }" (specificiteit 0-1-0) -- app-header.js zette de "hidden"-klasse dus prima op de
   rolgebonden menu-items (organizations_link/staff_link/platform_settings_link/api_docs_link),
   maar de link bleef alsnog zichtbaar door deze CSS-cascaderegel, ongeacht wat JS deed. De API
   blokkeerde de daadwerkelijke actie altijd al correct (403), maar het menu toonde 'm ten
   onrechte. Specifiekere override hieronder wint het weer terug voor .hidden. */
.fb-user-dropdown a.hidden, .fb-user-dropdown button.hidden { display: none; }
.fb-user-dropdown a i, .fb-user-dropdown button i { flex-shrink: 0; font-size: 16px; color: var(--fb-tekst-muted); }
.fb-user-dropdown a > span:first-of-type, .fb-user-dropdown button > span:first-of-type { flex: 1 1 auto; }
.fb-user-dropdown .fb-badge { flex-shrink: 0; }
.fb-user-dropdown a:hover, .fb-user-dropdown button:hover { background: var(--fb-achtergrond); }
.fb-user-dropdown a[aria-disabled="true"] { color: var(--fb-tekst-muted); cursor: default; }
.fb-user-dropdown a[aria-disabled="true"]:hover { background: none; }
.fb-user-dropdown .fb-ud-divider { border-top: 1px solid var(--fb-rand); margin: 4px 0; }
.fb-user-dropdown #logout_button { color: #c1432a; }
.fb-user-dropdown #logout_button i { color: #c1432a; }

/* Iconbadges -- vervangt kale inline emoji/iconen door een gestileerde huisstijl-cirkel. */
.fb-icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--fb-mint) 0%, var(--fb-mint-donker) 100%);
  box-shadow: 0 3px 10px rgba(91,171,152,.35);
  font-size: 22px;
}
.fb-icon-badge--navy {
  background: linear-gradient(135deg, var(--fb-navy) 0%, var(--fb-navy-donker) 100%);
  box-shadow: 0 3px 10px rgba(35,75,144,.35);
}
.fb-icon-badge i { color: #ffffff; font-size: 20px; }

/* Statusbadges -- kleur naar urgentie i.p.v. platte grijze hoofdletters. */
.fb-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em;
}
.fb-badge--urgent   { background: #fdeeea; color: #c1432a; }
/* Een badge met een hele zin erin (11-09-2026). Blijft binnen zijn kolom en breekt af in
   plaats van de tekst ernaast weg te duwen; op een telefoon is dat het verschil tussen een
   leesbare regel en een woord per regel. */
.fb-badge--afbreekbaar {
  align-self: flex-start; max-width: 100%;
  white-space: normal; text-align: left; line-height: 1.35;
  /* Een pil die over twee regels loopt oogt uitgerekt; als label leest hij beter. */
  border-radius: 8px; padding: 4px 9px;
}
.fb-badge--coverage { background: #eaf1fb; color: var(--fb-navy); }
.fb-badge--routine  { background: #f2f2f2; color: var(--fb-tekst-muted); }
.fb-badge--ok       { background: #e6f6ec; color: #1a8a4a; }

/* Statusknoppen (In orde/Aandacht/Kritisch/Niet te beoordelen) -- betekenisvolle kleur. */
.fb-status-btn { border-width: 1.5px !important; font-weight: 600; }
.fb-status-btn--in_orde { border-color: var(--fb-mint) !important; color: var(--fb-mint-donker) !important; }
.fb-status-btn--in_orde:hover { background: var(--fb-mint) !important; color: #fff !important; }
.fb-status-btn--aandacht { border-color: #e79100 !important; color: #b3720a !important; }
.fb-status-btn--aandacht:hover { background: #e79100 !important; color: #fff !important; }
.fb-status-btn--kritisch { border-color: #d00000 !important; color: #d00000 !important; }
.fb-status-btn--kritisch:hover { background: #d00000 !important; color: #fff !important; }
.fb-status-btn--niet_te_beoordelen { border-color: var(--fb-tekst-muted) !important; color: var(--fb-tekst-secundair) !important; }
.fb-status-btn--niet_te_beoordelen:hover { background: var(--fb-tekst-muted) !important; color: #fff !important; }

/* Kaartaccent -- gekleurde linkerrand naar urgentie, i.p.v. een kale platte kaart. */
.fb-card-accent { border-left: 4px solid var(--fb-mint) !important; }
.fb-card-accent--urgent   { border-left-color: #d00000 !important; }
.fb-card-accent--coverage { border-left-color: var(--fb-navy) !important; }

/* Dashboard hero-band -- navy-verloop + echt FoodBase-beeldmerk als watermerk (16-08-2026,
   verzoek: "kijk goed op foodbase.nl naar hun logo, maak daar een watermerk rechts in de balk
   van"). foodbase-brand-mark.svg is het ONGEWIJZIGDE officiële logo.svg van foodbase.nl (bewust
   niet handmatig bewerkt/uitgesneden -- risico op een onnauwkeurige knip zonder dat zelf visueel
   te kunnen controleren deze sessie) -- dat bestand is van boven naar beneden: het gekleurde
   beeldmerk, dan het zwarte woordmerk "FOODBASE" eronder. We tonen 'm hier op ware kleuren
   (geen wit-filter -- de eigen kleuren geven een rijker, herkenbaarder resultaat dan een vlakke
   silhouet) maar in een venster dat KORTER is dan de volledige afbeelding, zodat het woordmerk
   er onderaan simpelweg buiten valt -- alleen het beeldmerk blijft zichtbaar. Lage dekking (18%)
   houdt het een subtiel watermerk, geen opdringerig logo. */
.fb-hero-band {
  background: linear-gradient(120deg, var(--fb-navy) 0%, var(--fb-navy-donker) 100%);
  border-radius: 16px; padding: 2rem; color: #ffffff; margin-bottom: 1.75rem;
  position: relative; overflow: hidden;
}
.fb-hero-band::before {
  content: '';
  position: absolute; right: -30px; top: -22px;
  width: 480px; height: 195px; /* hoogte < volledige svg-hoogte op deze breedte (~292px) --
                                   knipt het onderste woordmerk-gedeelte gewoon weg. */
  background-image: url('../media/app/foodbase-brand-mark.svg');
  background-size: 480px auto;
  background-position: top right;
  background-repeat: no-repeat;
  opacity: .18;
  pointer-events: none;
}
.fb-hero-band h1 { color: #ffffff !important; position: relative; }
.fb-hero-band .fb-hero-sub { color: rgba(255,255,255,.85); position: relative; }

/* Tegel-iconen op het dashboard iets prominenter dan de Metronic-default. */
.fb-tile-icon {
  width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--fb-mint) 0%, var(--fb-mint-donker) 100%);
  box-shadow: 0 4px 12px rgba(91,171,152,.3);
}
.fb-tile-icon i { color: #ffffff; font-size: 22px; }
.fb-tile-icon--muted { background: #f2f2f2; box-shadow: none; }
.fb-tile-icon--muted i { color: var(--fb-tekst-muted); }

/* Algemene tekstverfijning -- dichter bij foodbase.nl's eigen grijstint-schaal dan Tailwind-zinc. */
.fb-text-muted { color: var(--fb-tekst-muted) !important; }
.fb-text-secondary { color: var(--fb-tekst-secundair) !important; }

/* PWA-installatiebanner (16-08-2026, install-prompt.js) -- vast onderaan, boven de
   home-indicator op iOS (safe-area-inset) zodat 'm nooit half onder de systeem-UI valt. */
.fb-install-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  background: var(--fb-navy);
  color: #ffffff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 12px 32px rgba(28,60,115,.35);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.fb-install-banner-content { display: flex; align-items: center; gap: 10px; font-size: 13px; flex: 1 1 220px; }
.fb-install-banner-content i { font-size: 20px; flex-shrink: 0; color: var(--fb-mint); }
.fb-install-banner-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fb-install-banner .kt-btn-ghost { color: rgba(255,255,255,.8) !important; }
.fb-install-banner .kt-btn-ghost:hover { background: rgba(255,255,255,.12) !important; }

/* Avatar-initialen buiten de navy koptekst om (16-08-2026, recent-accounts op het inlogscherm)
   -- .fb-user-avatar is bewust bijna-doorzichtig wit, gemaakt om op de navy header te zitten;
   op een wit kaartje zou dat onleesbaar worden, dus een eigen, ondoorzichtige variant. */
.fb-avatar-solid {
  width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 13px; color: #ffffff;
  background: linear-gradient(135deg, var(--fb-mint) 0%, var(--fb-mint-donker) 100%);
}

/* Omgevingslabel (16-08-2026, js/env-badge.js) -- bewust een felle, merk-vreemde kleur (amber,
   niet de navy/mint-huisstijl) zodat 'ie meteen als waarschuwing/melding leest i.p.v. als
   onderdeel van het merk zelf. Verschijnt alleen op Acceptatie/Test/Ontwikkel, nooit productie. */
.fb-env-badge {
  display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 8px;
  border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; background: #f59e0b; color: #ffffff; vertical-align: middle;
}

/* HygiëneCoach "Vandaag"-thuisscherm 1:1 teruggebracht naar het prototype (26-08-2026, Wilko
   zag dit als functionaliteitsverlies -- onderzoek wees uit dat de onderliggende adaptieve
   motor/rollen er wél waren, maar de presentatie was gesplitst over meerdere schermen i.p.v.
   samen op één thuisscherm zoals het prototype dat doet). Zie App.tsx:520-631 in Wilko's
   `hygienecoach`-repo voor de brontekst waar dit 1:1 op is gebaseerd. */

/* Eyebrow-label: kleine, uppercase mint-tekst -- zelfde stijl als eerder al gebruikt in de
   "Omgeving: {tenant}"-regel van de FusionAuth-mailsjablonen (5bab98 = var(--fb-mint)),
   hier hergebruikt als herkenbare kop boven een sectietitel. */
.fb-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fb-mint-donker); margin: 0 0 4px;
}

/* Rij binnen de navy hero-band. Stond hier eerder de begroeting links en een doosje rechts;
   dat doosje is op 08-09-2026 op verzoek van de klant weg, de rij blijft als opmaakhouder. */
.fb-hero-band-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* Klein onderscheidend accentrandje bovenaan de smartPlanCard -- zelfde randtechniek als
   .fb-card-accent (links), hier bovenaan zodat de kaart zich onderscheidt van gewone kt-cards. */
.fb-smart-plan-card { border-top: 3px solid var(--fb-mint) !important; }

/* Dekkingsdoosje ("28-dagen dekking") -- mint-verloop, zelfde familie als .fb-icon-badge. */
.fb-coverage-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--fb-mint) 0%, var(--fb-mint-donker) 100%);
  color: #ffffff; border-radius: 14px; padding: 14px 22px; flex-shrink: 0; min-width: 120px;
  box-shadow: 0 4px 14px rgba(91,171,152,.3);
}
.fb-coverage-box strong { font-size: 24px; font-weight: 700; line-height: 1.1; }
.fb-coverage-box span { font-size: 11px; color: rgba(255,255,255,.85); margin-top: 2px; text-align: center; }

/* Subtiele badge naast een sectiekop (bv. "Eenvoudig vastleggen") -- zelfde vormtaal als
   .fb-badge--routine, los beschikbaar voor plekken zonder de volledige .fb-badge-opmaak. */
.fb-subtle-badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: #f2f2f2; color: var(--fb-tekst-muted);
}

/* Amber statusbadge (aandacht) -- .fb-badge had al --urgent/--coverage/--routine/--ok, deze
   vult 'm aan met dezelfde amber-tint die de rest van de app al gebruikt voor "aandacht"
   (.fb-status-btn--aandacht hierboven, en de location_warning-melding op de controle-pagina). */
.fb-badge--warning { background: #fdf3e6; color: #9a6a1f; }

/* 1:1 met het prototype se "coverageGrid" (App.tsx:576-580) op /hygienecoach-overzicht. */
.fb-metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 900px) { .fb-metric-grid { grid-template-columns: repeat(4, 1fr); } }
.fb-metric-card {
  background: #ffffff; border: 1px solid var(--fb-rand); border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 8px 24px rgba(28,60,115,.06);
}
.fb-metric-card span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--fb-tekst-muted); }
.fb-metric-card strong { font-size: 26px; font-weight: 700; color: var(--fb-navy-donker); }
.fb-metric-card small { font-size: 12px; color: var(--fb-tekst-muted); }
.fb-metric-card--alert strong { color: #c1432a; }

/* 1:1 met het prototype se "supportRow" (App.tsx:563-566) -- 3 tegels naar Taken/Kort leren/
   Alle controles onderaan het thuisscherm. */
.fb-support-row { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 700px) { .fb-support-row { grid-template-columns: repeat(3, 1fr); } }
.fb-support-tile {
  display: flex; align-items: center; gap: 12px; background: #ffffff;
  border: 1px solid var(--fb-rand); border-radius: 14px; padding: 16px;
  box-shadow: 0 8px 24px rgba(28,60,115,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.fb-support-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(28,60,115,.14); }
.fb-support-tile strong { display: block; font-size: 14px; color: var(--fb-tekst); }
.fb-support-tile small { display: block; font-size: 12px; color: var(--fb-tekst-muted); margin-top: 2px; }
.fb-support-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 12px; font-size: 18px;
  /* 05-09-2026: mint onder het teken, zoals de tegels in het prototype (.quick span). Op de
     paginakleur viel het teken weg. */
  background: #e9f4f1; color: var(--fb-mint-donker);
}

/* Voortgangsbalk fotoronde (27-08-2026) -- 1:1 met het prototype se captureProgress
   (App.tsx), ontbrak hier eerder volledig. */
.fb-capture-progress {
  width: 100%; height: 6px; border-radius: 999px; background: var(--fb-rand); overflow: hidden;
}
.fb-capture-progress span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--fb-mint) 0%, var(--fb-mint-donker) 100%);
  transition: width .25s ease;
}

/* 27-08-2026, her-audit: twee vaste toelichtingsblokjes op het HygiëneCoach-controlescherm die
   in het prototype (App.tsx: "visionExplain"/"privacyStrip") altijd zichtbaar zijn maar bij ons
   nog ontbraken -- ".fb-vision-explain" (wat de AI wel/niet beoordeelt) en ".fb-privacy-strip"
   (camera-instructie/bewaarbeleid), zelfde mint/neutraal kleurgebruik als de rest van de pagina. */
.fb-vision-explain {
  background: #eef7f4; border: 1px solid #d6ece5; border-radius: 10px; padding: 10px 12px;
  margin-bottom: 12px; font-size: 13px; color: var(--fb-tekst-secundair);
}
.fb-vision-explain strong { display: block; color: var(--fb-mint-donker); font-size: 12px; margin-bottom: 2px; }
.fb-privacy-strip {
  background: var(--fb-achtergrond); border: 1px solid var(--fb-rand); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px; font-size: 13px; color: var(--fb-tekst-secundair);
}
.fb-privacy-strip strong { display: block; color: var(--fb-tekst); font-size: 12px; margin-bottom: 2px; }

/* ===========================================================================
   Niets mag buiten beeld vallen of over elkaar heen schuiven, op geen enkele
   pagina en geen enkele schermbreedte.
   =========================================================================== */

/* 1. DE OORZAAK. De app-schil is body.flex > div.flex.flex-col > header + main.
      Die tussenlaag stond op de standaard min-width:auto, wat in flexbox betekent
      "word nooit smaller dan je inhoud". Daardoor rekte hij op tot de breedte van
      het breedste element in de header, en groeide de hele pagina met hem mee:
      hero, knoppen en kaarten kregen allemaal die te grote breedte en liepen
      rechts van het scherm af. Omdat html/body op overflow-x:clip staan (nodig
      voor de plakkende header) was er geen schuifbalk en was dat deel simpelweg
      onbereikbaar. Deze ene regel is de kern van de oplossing. */
body > div { min-width: 0; }

/* 2. De header mag krimpen en, als het echt niet past, over twee regels vallen.
      Wrappen is bewust gekozen boven onderdelen wegmoffelen: op een smalle
      telefoon blijven terugpijl, omgeving, klantkeuze en menu allemaal
      beschikbaar in plaats van dat er eentje onzichtbaar wordt. */
.fb-header { min-width: 0; flex-wrap: wrap; row-gap: 8px; }

/* De twee groepen in de balk houden min-width:auto (de standaard). Zetten we die
   op 0, dan krimpt de groep kleiner dan zijn eigen logo plus badge en schuiven
   die onder de organisatiekiezer door. */
.fb-header > div { min-width: auto; }
.fb-header > div:first-child { flex-shrink: 1; }

/* De paginatitel kapt af in plaats van te duwen, en verdwijnt op zeer smalle
   telefoons: elke pagina toont zijn eigen titel er direct onder. */
#app_header_title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) { #app_header_title { display: none; } }

/* Op een telefoon met de organisatiekiezer erbij (alleen FoodBase-personeel) is de
   balk te vol. Het FOODBASE-woordmerk is daar het minst functionele onderdeel: de
   gebruiker weet welke app hij open heeft, en de omgevingsbadge blijft wel staan.
   De terugpijl, de badge, de klantkeuze en het menu blijven allemaal bereikbaar. */
@media (max-width: 640px) {
  /* :has() wordt ondersteund vanaf Safari 15.4 / iOS 15.4 en alle andere moderne
     browsers. Kent een browser het niet, dan blijft het woordmerk gewoon staan en
     valt de balk over twee regels: veilige, zichtbare degradatie. */
  .fb-header:has(#staff_org_picker:not(.hidden)) .fb-logo-white,
  .fb-header:has(#staff_org_picker:not(.hidden)) .fb-logo-vlak { display: none; }
}

/* De organisatiekiezer neemt vanzelf de breedte van zijn langste klantnaam aan.
   Bij "NBC Nederlands Bakkerij Centrum" is dat ruim 220 px, meer dan de halve
   telefoon. Aftoppen op scherm­breedte, niet op de inhoud. */
.fb-header #staff_org_picker { min-width: 0; }
.fb-header #staff_org_select { max-width: min(30vw, 170px); min-width: 0; }

/* 3. Algemeen vangnet voor de rest van de app. */
img, svg, video, canvas, iframe { max-width: 100%; }

/* BUGFIX 03-09-2026 ("de popup-foto gaat niet goed bovenin"): een kt-modal begint op 1,25rem
   van de bovenkant, maar in de geinstalleerde app valt de iOS-statusbalk transparant OVER de
   pagina heen (apple-mobile-web-app-status-bar-style: black-translucent + viewport-fit=cover,
   zie de headerfix hierboven). De modaltitel en de sluitknop verdwenen daardoor onder de klok
   en het batterijpictogram. Zelfde oplossing als bij de header, maar hier bewust ZONDER de
   display-mode-vraag eromheen: buiten de geinstalleerde app is env(safe-area-inset-top) toch
   nul, dus deze regel verandert daar niets, en zo werkt hij ook op Android en op toekomstige
   toestellen met een uitsparing. Bewust een MARGE en niet een nieuwe top-waarde: zo blijft de positionering van het
   template zelf (top-5, en op grote schermen top-[10%]) gewoon leidend en schuift de
   modal daar alleen onder de systeembalk vandaan. Geldt voor elke modal in de app,
   niet alleen de fotopopup.
   NAGEKOMEN 04-09-2026: hier stond dat op grote schermen top-[10%] leidend bleef. Dat
   klopte niet, want die klasse zit niet in de gecompileerde stylesheet. In de praktijk
   gold top-5 altijd al, op elk schermformaat. */
.kt-modal-content {
  margin-top: env(safe-area-inset-top, 0px);
}

/* BUGFIX 04-09-2026: de fotopopup had max-w-[900px], maar Tailwind-klassen met een eigen
   waarde bestaan alleen als ze bij het bouwen van de stylesheet al in de bron stonden. Onze
   stylesheet is een Metronic-build, dus die klasse werd nooit aangemaakt en de popup werd op
   een scherm van 1920px ruim 1880px breed. De keurmeester beoordeelt foto's op een pc, dus
   daar viel dit het meest op. De beperking staat nu hier, waar hij wel werkt. Bewust op de
   fotopopup en niet op elke modal, zodat een volgende modal zijn eigen breedte houdt. */
.kt-modal-content.fb-lightbox-modal {
  max-width: 900px;
}

/* ONTBREKENDE UTILITIES 04-09-2026. Uit de brede klassenaudit: deze drie namen worden in de
   app gebruikt, maar zitten niet in de Metronic-build. Ze staan hier onder exact dezelfde
   naam, zodat de markup onveranderd blijft en de gewone Tailwind-schrijfwijze klopt. Komen
   ze ooit alsnog in een nieuwe build mee, dan doet deze regel simpelweg hetzelfde.

   Waarom het uitmaakte: de reset in de stylesheet zet list-style op none voor elke lijst,
   dus zonder list-disc verdwenen de bolletjes echt (gemeten: list-style-type: none). En
   zonder de first-variant hield het eerste item van een rij zijn bovenrand, waardoor er
   onder de kop een dubbele lijn stond. */
.list-disc {
  list-style-type: disc;
}

.select-none {
  -webkit-user-select: none;
  user-select: none;
}

.first\:border-t-0:first-child {
  border-top-width: 0;
}

/* ERNSTKLEUREN 05-09-2026. Letterlijk de drie kleuren die het prototype gebruikt voor de balk
   links van een signaal (.feed>span.high/.mid/.ok in styles.css). Ze dragen betekenis en zijn
   daarom overgenomen; navy en oranje blijven de merkkleuren van FoodBase. */
.fb-card-accent--critical,
.fb-card-accent--high      { border-left-color: #c94d3d !important; }
.fb-card-accent--attention { border-left-color: #e1a62b !important; }
.fb-card-accent--info      { border-left-color: #4f9b74 !important; }

/* Bronlaag in "Gebruikte basis": een klein vierkant blokje met QA, Norm of Coach, zoals
   .sourceList>article>span in het prototype. Een ronde pil las minder als een categorie. */
.fb-source-chip {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 46px; padding: 4px 6px; border-radius: 8px;
  background: #e9f4f1; color: var(--fb-mint-donker);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}

/* Het blok waarin de coach doorvraagt. Amber, zoals .followUp in het prototype: het vraagt om
   iets van de medewerker, maar het is geen fout. */
.fb-followup { background: #fff7dd !important; }

/* Een knop waarvan het opschrift uit gegevens komt en dus lang kan zijn, bijvoorbeeld de
   voorgestelde taak van de coach. Zonder dit blijft de tekst op een regel staan en wordt het
   icoon links buiten het scherm geduwd (gemeten op 320 tot 430 px). */
.fb-knop-afbreken {
  white-space: normal;
  height: auto;
  min-height: 32px;
  padding-block: 8px;
}

/* Het kruisje waarmee je een venster sluit. Zelfde maat als in het prototype (.x is daar 38 px);
   de kleine knopmaat van de template kwam op 28 px uit en dat is voor een duim te klein. */
.fb-sluitknop {
  width: 38px;
  height: 38px;
}

/* De vier gegevens onder een uitgelicht signaal (gemeld, status, melder, ernst). Zelfde opzet als
   .incidentGrid in het prototype: twee kolommen met een rustige achtergrond. */
.fb-feitgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fb-feitblok {
  background: var(--fb-achtergrond, #f5f6f8);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
.fb-feitblok small {
  display: block;
  color: var(--fb-tekst-muted, #6b7280);
  font-size: 12px;
  margin-bottom: 2px;
}
.fb-feitblok b {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Een regel met een naam links en knoppen rechts, die op een telefoon onder elkaar gaat staan.
   Nodig omdat sm:flex-row en sm:items-center niet in deze build zitten (gecontroleerd). */
.fb-rij-stapel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
@media (min-width: 640px) {
  .fb-rij-stapel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------------------------------------------------------------- beheerscherm (05-09-2026)
   Tabbladen in plaats van vier blokken onder elkaar. Bewust eigen opmaak en geen kt-tabs: die
   verwacht KTUI-javascript voor het wisselen, en hier doet het scherm dat zelf. */
.fb-tabbalk {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--fb-rand, #e6eaf2);
}
.fb-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--fb-tekst-secundair, #4a5568);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.fb-tab:hover { color: var(--fb-navy, #234b90); }
.fb-tab--actief {
  color: var(--fb-navy, #234b90);
  border-bottom-color: var(--fb-oranje, #e87518);
  font-weight: 600;
}

/* De uitleg zit achter deze knop. Rond, 38 px zoals het sluitkruisje, groot genoeg voor een duim
   en zichtbaar als knop (een tooltip op hover bestaat niet op een telefoon). */
.fb-infoknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fb-tekst-muted, #6b7280);
  cursor: pointer;
}
.fb-infoknop:hover { background: var(--fb-achtergrond, #f5f6f8); color: var(--fb-navy, #234b90); }

/* Opsomming van wat een rol of persoon mag: geen bolletjes, wel lucht tussen de regels. */
.fb-lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Een knop die als een link leest, voor "wat zit erin". */
.fb-linkknop {
  border: 0;
  background: none;
  padding: 0;
  margin-top: 4px;
  color: var(--fb-oranje, #e87518);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------- kennisbank (05-09-2026)
   Een artikel komt als HTML uit de API (Markdown, omgezet door de server). De opmaak staat hier,
   zodat de tekst leesbaar blijft op een telefoon: rustige regelafstand, koppen die opvallen zonder
   te schreeuwen, en tabellen die opzij kunnen schuiven in plaats van de pagina mee te trekken. */
.fb-artikel {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fb-tekst, #1c2530);
  max-width: 70ch;
}
.fb-artikel > *:first-child { margin-top: 0; }
.fb-artikel h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fb-navy, #234b90);
  margin: 26px 0 8px;
}
.fb-artikel h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 20px 0 6px;
}
.fb-artikel p { margin: 0 0 12px; }
.fb-artikel ul, .fb-artikel ol { margin: 0 0 14px; padding-left: 22px; }
.fb-artikel ul { list-style: disc; }
.fb-artikel ol { list-style: decimal; }
.fb-artikel li { margin-bottom: 5px; }
.fb-artikel strong { font-weight: 600; }
.fb-artikel code {
  background: var(--fb-achtergrond, #f5f6f8);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.9em;
}
.fb-artikel table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 18px;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}
.fb-artikel th, .fb-artikel td {
  border-bottom: 1px solid var(--fb-rand, #e6eaf2);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.fb-artikel th {
  font-weight: 600;
  color: var(--fb-tekst-muted, #6b7280);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fb-artikel a { color: var(--fb-oranje, #e87518); }

/* Een schermafbeelding in een artikel, met het bijschrift eronder (dat is de cursieve regel die
   direct op een afbeelding volgt). Rustig kader, zodat het plaatje niet in de tekst zwemt. */
.fb-artikel img {
  display: block;
  width: 100%;
  border: 1px solid var(--fb-rand, #e6eaf2);
  border-radius: 6px;
  margin: 14px 0 6px;
}
.fb-artikel p:has(> em:only-child) {
  font-size: 13px;
  color: var(--fb-tekst-muted, #6b7280);
  margin-top: 0;
}
.fb-artikel p:has(> em:only-child) em { font-style: normal; }

/* ============================================================================================
   Wat is er nieuw, en de terugkoppeling onder een artikel (05-09-2026).
   ============================================================================================ */

/* Een stipje bij iets ongelezens. Bewust geen aantal: het gaat er niet om hoeveel er veranderd
   is, maar of je nog even hoeft te kijken. Zet hier GEEN display, anders wint deze regel het van
   Tailwind's .hidden en staat de stip er altijd -- vandaar de :not(.hidden). */
.fb-stip {
  width: 9px; height: 9px; border-radius: 999px; background: var(--fb-oranje, #f05624);
  flex-shrink: 0;
}
.fb-stip:not(.hidden) { display: inline-block; }
.fb-avatar-knop { position: relative; }
.fb-avatar-knop .fb-stip {
  position: absolute; top: -1px; right: -1px;
  box-shadow: 0 0 0 2px var(--fb-navy, #234b90);
}
.fb-user-dropdown .fb-stip--menu { margin-left: auto; }

.fb-wijziging-icoon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--fb-achtergrond, #f4f6fa); color: var(--fb-navy, #234b90);
}
.fb-wijziging-icoon i { font-size: 16px; }
.fb-wijziging-punten {
  margin: 0; padding-left: 18px; list-style: disc;
  font-size: 13px; line-height: 1.5; color: var(--fb-tekst-secundair, #4a5568);
}
.fb-wijziging-punten li { margin-top: 3px; }

/* ============================================================================================
   Productbeoordeling dichter bij het prototype van Wilko (05-09-2026).

   De kleuren hieronder zijn niet zomaar overgenomen: #00A651 groen en #00539F blauw zijn de
   kleuren van het FoodBase-logo zelf, en het prototype gebruikt ze consequent met een betekenis.
   Groen is "doe dit nu" (foto maken, analyseren), blauw is "leg vast" (opslaan, rapportage). Onze
   mint deed allebei en maakte daardoor alles even belangrijk. Deze klassen gelden alleen binnen
   Productbeoordeling; de rest van het platform blijft de gewone knoppen gebruiken.
   ============================================================================================ */

:root {
  --pb-groen: #00a651;
  --pb-groen-donker: #009148;
  --pb-blauw: #00539f;
  --pb-blauw-donker: #00468a;
}

/* ---- kop van een scherm, zoals in het prototype: eyebrow, grote titel, intro ---- */
.fb-pb-titel {
  font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  color: var(--fb-tekst); margin: 0;
}
.fb-pb-intro { color: var(--fb-tekst-secundair); margin: 8px 0 0; max-width: 60ch; }

/* ---- de kaart met de hoofdactie ---- */
.fb-pb-kaart {
  background: #ffffff; border-radius: 20px; padding: 20px;
  box-shadow: 0 10px 28px rgba(28, 60, 115, .10);
}
.fb-pb-kaart h2 { font-size: 20px; font-weight: 800; margin: 0; color: var(--fb-tekst); }

/* ---- grote knoppen: in een bakkerij bedien je dit met een duim ---- */
.fb-knop-xl {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 56px; padding: 12px 20px; border: none; cursor: pointer;
  border-radius: 12px; font-size: 16px; font-weight: 700; line-height: 1.25; text-align: center;
  text-decoration: none; transition: background-color .12s ease;
}
.fb-knop-xl--groen { background: var(--pb-groen); color: #ffffff; }
.fb-knop-xl--groen:hover { background: var(--pb-groen-donker); color: #ffffff; }
.fb-knop-xl--blauw { background: var(--pb-blauw); color: #ffffff; }
.fb-knop-xl--blauw:hover { background: var(--pb-blauw-donker); color: #ffffff; }
.fb-knop-xl--omlijnd {
  background: #ffffff; color: var(--pb-blauw); border: 2px solid var(--pb-blauw);
}
.fb-knop-xl--omlijnd:hover { background: #f2f7fc; color: var(--pb-blauw); }
/* Een maat kleiner voor acties die er wel moeten zijn maar niet de hoofdactie zijn. */
.fb-knop-xl--klein { min-height: 44px; font-size: 15px; }
.fb-knop-xl:disabled, .fb-knop-xl[disabled] {
  background: #cbd5e1; color: #ffffff; cursor: not-allowed;
}
.fb-knop-xl i { font-size: 18px; }

/* Het plusteken in een open cirkel, 1:1 met de startknop van het prototype. */
.fb-plus-rond {
  width: 30px; height: 30px; flex-shrink: 0; border: 2px solid currentColor; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 400;
  line-height: 1;
}

/* Een foto die niet is opgeslagen. De voorvertoning blijft staan zodat je ziet welke foto het
   was, maar het vak mag er niet uitzien alsof het klaar is: zeven gevulde vakken terwijl de
   server er zes heeft is precies de fout die je op een beursvloer niet wilt maken. */
.fb-fotoslot--mislukt {
  border-color: #c1432a !important;
  border-style: solid !important;
  background: #fdf3f2;
}

/* ---- statustegel ---- */
.fb-status-tegel {
  background: #ffffff; border: 1px solid var(--fb-rand); border-left: 4px solid var(--pb-groen);
  border-radius: 12px; padding: 14px 16px;
}
.fb-status-tegel .kop {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fb-tekst-muted);
}
.fb-status-tegel .waarde {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  font-size: 20px; font-weight: 800; color: var(--pb-groen);
}
.fb-status-tegel .stip { width: 11px; height: 11px; border-radius: 999px; background: currentColor; }
.fb-status-tegel .onder { margin-top: 6px; font-size: 13px; color: var(--fb-tekst-muted); }
.fb-status-tegel--wacht { border-left-color: #9a6a1f; }
.fb-status-tegel--wacht .waarde { color: #9a6a1f; }

/* ---- lijst als een aaneengesloten kaart met haarlijnen, zoals in het prototype ---- */
.fb-pb-lijst {
  background: #ffffff; border: 1px solid var(--fb-rand); border-radius: 16px; overflow: hidden;
}
.fb-pb-rij {
  display: grid; gap: 6px; padding: 18px 20px; text-decoration: none; color: inherit;
}
.fb-pb-rij + .fb-pb-rij { border-top: 1px solid var(--fb-rand); }
.fb-pb-rij:hover { background: #f8fafc; }
.fb-pb-rij .hoofd { font-size: 18px; font-weight: 800; color: var(--fb-tekst); }
.fb-pb-rij .tweede { font-size: 16px; font-weight: 700; color: var(--pb-blauw); }
.fb-pb-rij .derde { font-size: 14px; color: var(--fb-tekst-muted); }
.fb-pb-rij .datum { font-size: 14px; color: var(--fb-tekst-secundair); }
.fb-pb-rij .score {
  font-size: 20px; font-weight: 800; color: var(--pb-blauw); font-variant-numeric: tabular-nums;
}
/* Het merkje niet laten uitrekken over de hele rij op een telefoon. */
.fb-pb-rij .fb-badge { justify-self: start; }
@media (min-width: 768px) {
  .fb-pb-rij { grid-template-columns: 1fr auto; align-items: center; column-gap: 28px; }
  /* De rapportagelijst heeft een kolom meer: gegevens, datum, totaalscore. */
  .fb-pb-rij--drie { grid-template-columns: 1fr auto auto; }
}

/* ---- fotoslot: een leeg vak dat er ook leeg uitziet ---- */
.fb-fotoslot {
  background: #ffffff; border: 2px dashed #cbd5e1; border-radius: 20px; padding: 16px;
}
.fb-fotoslot--gevuld { border-style: solid; border-color: var(--fb-rand); }
.fb-fotoslot .slotkop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fb-fotoslot .slotnaam { font-size: 16px; font-weight: 700; color: var(--fb-tekst); }
.fb-fotoslot .slotstatus { font-size: 14px; font-weight: 600; flex-shrink: 0; }
.fb-fotoslot .leegvak {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 200px; margin-top: 12px; border-radius: 16px; background: #f1f5f9;
  color: var(--fb-tekst-muted); text-align: center; padding: 24px;
}
.fb-fotoslot .leegvak i { font-size: 40px; }
.fb-fotoslot .leegvak .tekst { margin-top: 10px; font-weight: 600; }

/* ---- AI-oordeel: het kopje boven de toelichting, 1:1 met het prototype ---- */
.fb-normlabel {
  margin-top: 14px; font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pb-blauw);
}

/* 1:1 met de knop "Nieuwe keuring" naast de kop in rapportages/page.tsx. */
.fb-knop-licht {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 12px 18px;
  font-size: 15px; font-weight: 700; color: var(--fb-tekst); text-decoration: none; cursor: pointer;
}
.fb-knop-licht:hover { background: #f8fafc; color: var(--fb-tekst); }

/* ============================================================================================
   iOS zoomt in zodra je een invoerveld aanraakt (06-09-2026, gemeld met een schermafdruk van het
   keuringsscherm: zodra je in Broodnaam typt staat de app scheef in beeld).

   Safari op iOS beschouwt een veld met tekst kleiner dan 16 px als onleesbaar en zoomt de hele
   pagina in zodra het de aandacht krijgt. Hij zoomt daarna niet vanzelf terug. Onze velden stonden
   op 12 en 13 px, dus dat gebeurde overal: keuring, beheer, melden, kennisbank.

   De veelgenoemde oplossing is user-scalable=no of maximum-scale=1 in de viewport-meta. Die nemen
   we bewust NIET:
     - het zet het knijpgebaar helemaal uit, en dat hebben we juist nodig om een keuringsfoto te
       vergroten (zie de lightbox in productbeoordeling-keuring.html);
     - het is in strijd met WCAG 2.1 succescriterium 1.4.4, dat vraagt dat tekst tot 200 procent
       vergroot kan worden.

   Het veld zelf op 16 px zetten is de bedoelde oplossing en de enige die niets kapotmaakt. Labels
   en hulpteksten mogen klein blijven: Safari kijkt alleen naar het veld dat de aandacht krijgt.
   Alleen op aanraakschermen, zodat de bureaubladweergave niet verandert.
   ============================================================================================ */
@media (pointer: coarse) {
  .kt-input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px;
  }
}


/* ============================================================================================
   Contextbalk van Productbeoordeling (06-09-2026): voor wie en waar ben je bezig.

   Waarom chips en geen keuzelijsten met een label ervoor: dit is context, geen formulier. Twee
   volle regels met "Klant:" en "Vestiging:" eisen meer aandacht dan ze verdienen, zeker op een
   telefoon waar het scherm daarna nog het echte werk moet tonen. Twee chips passen op één regel
   en zijn even snel: de keuzelijst eronder is de systeemeigen picker, wat op een telefoon nog
   altijd de snelste manier van kiezen is.

   Waarom niet in de blauwe kopbalk: die zit op 390 px al vol (terugpijl, omgevingsmerkje,
   oogicoon, klantkiezer, avatar) en de klantkiezer daar is eerder al buiten beeld gelopen.
   ============================================================================================ */
.fb-contextbalk {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}

.fb-chip {
  position: relative; display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  background: #ffffff; border: 1px solid var(--fb-rand); border-radius: 999px;
  padding: 7px 13px; font-size: 14px; font-weight: 600; color: var(--fb-tekst);
  line-height: 1.2;
}
.fb-chip > i:first-child { font-size: 15px; color: var(--pb-blauw, #00539f); flex-shrink: 0; }
.fb-chip .naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-chip .pijl { flex-shrink: 0; font-size: 11px; color: var(--fb-tekst-muted); }

/* De echte keuzelijst ligt onzichtbaar over de chip. Zo houdt de telefoon zijn eigen picker,
   die sneller en vertrouwder is dan wat we zelf zouden bouwen. */
.fb-chip select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  border: none; background: none; -webkit-appearance: none; appearance: none;
}
.fb-chip:has(select):hover { border-color: var(--pb-blauw, #00539f); }

/* Alleen tonen, niet wisselen: op het keuringsscherm hoort de vestiging bij de keuring zelf en
   wijzig je hem in het formulier. Een schakelaar zou daar de vraag oproepen wat je verandert. */
.fb-chip--vast { background: transparent; border-style: dashed; font-weight: 500; }

/* ------------------------------------------------------------------ hidden wint altijd

   Dit bestand wordt NA Tailwind geladen. Onze eigen klassen die display zetten (.fb-knop-xl,
   .fb-support-row, .fb-metric-grid en ruim dertig andere) hebben dezelfde specificiteit als
   Tailwind's .hidden en staan later in de volgorde, dus die winnen. Gevolg: een element met
   class="hidden fb-knop-xl" is gewoon zichtbaar.

   Dat is geen theorie. Op 06-09-2026 bleek "Te beoordelen", het werkscherm van de keurmeester,
   zichtbaar bij een klantaccount: de HTML had class="hidden", de JavaScript toonde hem alleen bij
   het keurmeestersrecht, en de knop stond er toch. Dezelfde fout trof save_and_next_btn en
   volgend_brood op het keuringsscherm, en quick_actions, support_row en metric_grid in
   HygieneCoach.

   Eerder is dit een keer als los geval gerepareerd (.fb-user-dropdown a.hidden, hierboven). Deze
   regel maakt er een patroon van: hidden betekent verborgen, ongeacht welke klasse er verder op
   staat. Het !important is hier bewust, want een hogere specificiteit elders (a.fb-knop-xl,
   .kaart .fb-knop-xl) zou anders alsnog winnen, en de hele belofte van deze klasse is dat het
   element weg is. */
.hidden { display: none !important; }

/* Uitzondering op .hidden (14-09-2026): "hidden lg:block" is het gewone Tailwind-patroon voor
   "verborgen op mobiel, zichtbaar vanaf dat breakpoint". De !important hierboven won ook daarvan,
   waardoor de sfeerfoto naast het inlogformulier sinds 06-09 op elk scherm weg was, op test,
   acceptatie en productie. Hier krijgt een element met hidden EN een breakpoint-weergave vanaf dat
   breakpoint zijn weergave terug. Twee klassen (0-2-0) met !important winnen van .hidden (0-1-0)
   met !important; een element met alleen hidden blijft overal verborgen, zoals de fix van 06-09
   bedoelt. Breakpoints gelijk aan styles.css (--breakpoint-sm t/m --breakpoint-2xl). */
@media (width >= 40rem) {
  .hidden.sm\:block { display: block !important; }
  .hidden.sm\:flex { display: flex !important; }
  .hidden.sm\:grid { display: grid !important; }
  .hidden.sm\:inline-flex { display: inline-flex !important; }
  .hidden.sm\:inline-block { display: inline-block !important; }
}
@media (width >= 48rem) {
  .hidden.md\:block { display: block !important; }
  .hidden.md\:flex { display: flex !important; }
  .hidden.md\:grid { display: grid !important; }
  .hidden.md\:inline-flex { display: inline-flex !important; }
  .hidden.md\:inline-block { display: inline-block !important; }
}
@media (width >= 64rem) {
  .hidden.lg\:block { display: block !important; }
  .hidden.lg\:flex { display: flex !important; }
  .hidden.lg\:grid { display: grid !important; }
  .hidden.lg\:inline-flex { display: inline-flex !important; }
  .hidden.lg\:inline-block { display: inline-block !important; }
}
@media (width >= 80rem) {
  .hidden.xl\:block { display: block !important; }
  .hidden.xl\:flex { display: flex !important; }
  .hidden.xl\:grid { display: grid !important; }
  .hidden.xl\:inline-flex { display: inline-flex !important; }
  .hidden.xl\:inline-block { display: inline-block !important; }
}
@media (width >= 96rem) {
  .hidden.\32 xl\:block { display: block !important; }
  .hidden.\32 xl\:flex { display: flex !important; }
  .hidden.\32 xl\:grid { display: grid !important; }
  .hidden.\32 xl\:inline-flex { display: inline-flex !important; }
  .hidden.\32 xl\:inline-block { display: inline-block !important; }
}

/* De vestigingchip die nog niet kan: zichtbaar, maar duidelijk niet aanklikbaar. Zonder deze chip
   stond er bij een medewerker zonder gekozen klant maar een wisselaar, en zag je niet dat er ook
   een vestiging bij hoort. */
.fb-chip--wacht { opacity: .55; font-style: italic; }

/* ---- AI-status als pil ----
   Was een kaart van zo'n 100px hoog voor een mededeling van twee woorden. Op een telefoon is dat
   veel schermruimte voor iets wat je meestal alleen even wilt bevestigen. Nu een pil van een regel
   die uitklapt als je meer wilt weten. */
.fb-ai-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--fb-rand, #e3e6ec); border-radius: 999px;
  background: #ffffff; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--pb-groen, #00a651); cursor: pointer; line-height: 1.2;
}
.fb-ai-status:hover { background: var(--fb-achtergrond, #f5f6f8); }
.fb-ai-status .stip {
  width: 9px; height: 9px; border-radius: 999px; background: currentColor; flex-shrink: 0;
}
.fb-ai-status .pijl { font-size: 10px; opacity: .6; transition: transform .15s ease; }
.fb-ai-status--open .pijl { transform: rotate(180deg); }
/* Niet bereikbaar: amber, niet rood. Het is geen storing van de gebruiker en meestal tijdelijk. */
.fb-ai-status--wacht { color: #9a6a1f; border-color: #e0c08a; }
.fb-ai-uitleg {
  margin: 6px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--fb-tekst-muted, #6b7280);
  max-width: 62ch;
}

/* Kop met een info-icoontje ernaast. De knop staat BUITEN de kop, niet erin: een kop moet als kop
   voorgelezen kunnen worden, zonder dat er "knop" doorheen loopt. */
.fb-uitleg-kop { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.fb-uitleg-kop > h1, .fb-uitleg-kop > h2, .fb-uitleg-kop > h3 { margin-bottom: 0; }

/* ---- de foto bij een keuringsaspect ----
   Klein genoeg om het kaartje niet te laten uitdijen, groot genoeg om er iets aan te hebben. Tikken
   opent hem op volle grootte, dus dit is een aanwijzing en geen vervanging van de fotovakken. */

/* ---- aanraakvlakken op een telefoon ----
   Uit de weergavecontrole van 06-09-2026: de klantkiezer in de kopbalk was 28 px hoog en de
   AI-statuspil 30 px. Dat is te klein om blind te raken terwijl je een brood vasthoudt. Alleen bij
   aanraakbediening; met een muis kost het onnodig ruimte. */
@media (pointer: coarse) {
  #staff_org_select,
  #staff_org_picker select {
    min-height: 40px;
  }
  .fb-ai-status {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* De chips in de contextbalk zijn de hoofdschakelaars van dit scherm; die moeten zeker raakbaar
     zijn. */
  /* De terugknop op de rapportage was 24 px hoog. */
  .fb-report-back {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .fb-chip {
    min-height: 40px;
  }
  /* Echte knoppen: ruim raakbaar. */
  .kt-btn {
    min-height: 40px;
  }
  /* Losse navigatielinks krijgen tikruimte... */
  a.kt-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  /* ...maar een link MIDDEN IN EEN ZIN blijft gewoon tekst, anders breekt de alinea. Dat komt
     voor in de uitlegblokken ("Meer hierover in de kennisbank: ..."). */
  p a.kt-link, li a.kt-link {
    min-height: 0;
    display: inline;
  }
}

/* ---- Procescoach: een mogelijke oorzaak ----
   Rustiger dan een kaart, want dit is geen oordeel maar een suggestie. Vandaar een vlak zonder rand
   in plaats van een omlijnd blok. */
.fb-oorzaak {
  background: var(--fb-achtergrond, #f5f6f8);
  border-radius: 12px;
  padding: 16px;
  margin-top: 12px;
}
.fb-oorzaak-lijst {
  margin: 4px 0 0;
  padding-left: 20px;
  list-style: disc;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fb-tekst-secondary, #4b5563);
}

/* ---- filterbalk boven een lijst ----
   Twee keuzes naast elkaar, en onder elkaar zodra het niet meer past. Het label staat boven het
   veld en niet ervoor: op 320 px duwt een label ernaast het veld te smal. */
.fb-filterbalk { display: flex; gap: 12px; flex-wrap: wrap; }
.fb-filter { display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 1 1 150px; }
.fb-filter > span {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fb-tekst-muted, #6b7280);
}

/* Rolschakelaar (08-09-2026), overgenomen uit .roleStrip van het prototype. Daar vier vaste
   kolommen; bij ons past de kolomtelling zich aan het aantal rollen aan, want wij tonen alleen
   wat iemand echt heeft. Kleuren uit onze eigen huisstijl in plaats van het mintgroen van het
   prototype, zodat het scherm een geheel blijft. */
.fb-rolstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.fb-rolstrip button {
  background: #ffffff; border: 1px solid var(--fb-rand, #e6eaf2); border-radius: 16px;
  padding: 12px 14px; text-align: left; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 2px 8px rgba(22, 59, 44, .04); cursor: pointer;
}
.fb-rolstrip button:hover:not([disabled]) { border-color: var(--fb-mint, #5bab98); }

/* Rollen die deze gebruiker niet heeft: wel tonen, niet aanklikbaar. Een streepjesrand in plaats
   van alleen lichtere kleur, zodat het ook zonder kleurwaarneming te zien is. */
.fb-rolstrip button.zonder-toegang {
  background: #f7f8fa; border-style: dashed; cursor: not-allowed; box-shadow: none;
}
.fb-rolstrip button.zonder-toegang b { color: #8a94a6; }
.fb-rolstrip button.zonder-toegang small { color: #a3adbb; font-style: italic; }
.fb-rolstrip button.actief {
  border: 2px solid var(--fb-mint-donker, #148a70); background: #eef8f4; padding: 11px 13px;
}
.fb-rolstrip b { font-size: 14px; color: var(--fb-navy, #234b90); }
.fb-rolstrip small { font-size: 12px; color: #687a73; }
@media (max-width: 760px) {
  .fb-rolstrip { grid-template-columns: 1fr 1fr; }
  .fb-rolstrip small { font-size: 11px; }
}

/* Rolweergaven (08-09-2026), overgenomen uit het prototype. Eigen klassen in plaats van de
   Tailwind-utility `hidden`, omdat een sectie ook om andere redenen verborgen kan zijn (geen
   recht, geen gegevens) en die twee redenen elkaar niet mogen overschrijven. */
.fb-verborgen-door-rol { display: none !important; }

.fb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.fb-kpi {
  background: #ffffff; border: 1px solid var(--fb-rand, #e6eaf2); border-radius: 14px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
}
.fb-kpi strong { font-size: 26px; font-weight: 700; color: var(--fb-navy, #234b90); line-height: 1.1; }
.fb-kpi b { font-size: 13px; font-weight: 600; color: var(--fb-navy, #234b90); }
.fb-kpi small { font-size: 12px; color: #687a73; }
.fb-kpi--klik { cursor: pointer; }
.fb-kpi--klik:hover { border-color: var(--fb-mint, #5bab98); }

/* Feed uit het prototype: gekleurd streepje, titel, meta, pijl. */
.fb-feedrij {
  width: 100%; display: grid; grid-template-columns: 6px 1fr 16px; gap: 12px; align-items: center;
  text-align: left; background: none; border: 0; border-bottom: 1px solid var(--fb-rand, #e6eaf2);
  padding: 12px 2px; cursor: pointer;
}
.fb-feedrij:last-child { border-bottom: 0; }
.fb-feedrij:hover { background: #f7f9fc; }
.fb-feedrij--stil { cursor: default; }
.fb-feedrij--stil:hover { background: none; }
.fb-feedrij-stip { width: 6px; height: 32px; border-radius: 3px; background: #cfd6e0; }
.fb-feedrij-stip.high { background: #c1432a; }
.fb-feedrij-stip.mid { background: #e0a02a; }
.fb-feedrij-stip.ok { background: var(--fb-mint, #5bab98); }
.fb-feedrij b { display: block; font-size: 14px; color: var(--fb-navy, #234b90); }
.fb-feedrij small { color: #687a73; font-size: 12px; }
.fb-feedrij i { font-style: normal; color: #8a94a6; }

.fb-trend { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.fb-trend div { background: #f7f9fc; border-radius: 12px; padding: 12px 14px; }
.fb-trend b { display: block; font-size: 22px; color: var(--fb-navy, #234b90); }
.fb-trend span { display: block; font-size: 13px; color: var(--fb-navy, #234b90); }
.fb-trend small { color: #687a73; font-size: 12px; }

.fb-signaal { padding: 10px 0; border-bottom: 1px solid var(--fb-rand, #e6eaf2); }
.fb-signaal:last-child { border-bottom: 0; }
.fb-signaal b { display: block; font-size: 14px; color: var(--fb-navy, #234b90); }
.fb-signaal span, .fb-signaal small { display: block; color: #687a73; font-size: 12px; }

.fb-vestigingrij { padding: 10px 0; border-bottom: 1px solid var(--fb-rand, #e6eaf2); }
.fb-vestigingrij:last-child { border-bottom: 0; }
.fb-vestigingrij b { display: block; color: var(--fb-navy, #234b90); }
.fb-vestigingrij span { color: #687a73; font-size: 12px; }
.fb-vestigingrij.let-op b { color: #c1432a; }

.fb-waarschuwing { background: #fdf3f1; border: 1px solid #f0cfc7; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.fb-waarschuwing b { display: block; color: #c1432a; font-size: 14px; }
.fb-waarschuwing span { color: #8a5a4e; font-size: 12px; }

.fb-personen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.fb-persoon { display: flex; align-items: center; gap: 10px; }
.fb-persoon span {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fb-navy, #234b90); color: #fff; font-weight: 700; font-size: 13px;
}
.fb-persoon b { display: block; font-size: 14px; color: var(--fb-navy, #234b90); }
.fb-persoon small { color: #687a73; font-size: 12px; }

.fb-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .fb-twee { grid-template-columns: 1fr; } }

.fb-leeg { color: #687a73; font-size: 13px; margin: 0; }
/* Wat de API expliciet nog niet levert. Bewust anders opgemaakt dan een lege lijst: dit is geen
   "niets te doen" maar "dit kan hier nog niet". */
.fb-nogniet {
  color: #8a6d1f; background: #fdf8ec; border: 1px dashed #e3d3a8; border-radius: 10px;
  padding: 8px 10px; font-size: 12px; margin: 8px 0 0;
}

/* Het takenpaneel van de medewerker heeft in het prototype een oranje rand aan de linkerkant
   (.priorityPanel): dit is het enige blok op zijn scherm waar iemand anders iets van hem vraagt. */
.fb-taakpaneel { border-left: 5px solid var(--fb-oranje); padding: 20px; }

/* --- detailvenster van een melding of taak --- */
/* De schil van het venster komt van het kt-modal-onderdeel van het template; hier staat alleen
   wat daar geen onderdeel voor is: het rooster met de feiten bovenin (.detailFacts in het
   prototype) en de bronregels (.sourceList). */
.fb-taakfeiten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 15px; }
.fb-taakfeiten span { background: var(--fb-achtergrond); border-radius: 12px; padding: 10px; font-size: 13px; }
.fb-taakfeiten b {
  display: block; font-size: .75rem; color: var(--fb-tekst-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; font-weight: 700;
}

.fb-taakbronnen > article {
  display: grid; grid-template-columns: 55px 1fr; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--fb-rand);
}
.fb-taakbronnen > article:last-child { border-bottom: 0; padding-bottom: 0; }
.fb-taakbronnen > article > span { height: max-content; justify-content: center; }
.fb-taakbronnen strong, .fb-taakbronnen small { display: block; }
.fb-taakbronnen small { margin-top: 2px; }
.fb-taakbronnen p { margin: 5px 0 0; line-height: 1.4; }

@media (max-width: 620px) {
  .fb-taakfeiten { grid-template-columns: 1fr; }
}
/* --- einde detailvenster --- */

/* --- QA-borging --- */
/* Overgenomen uit het prototype (src/styles.css): .qaControlHub, .referenceRow,
   .referenceTestResult, .referencePhoto, .referenceThumb, .procedureForm en .procedureMeta.
   Onze kleurtokens, hun maatvoering. De kaarten, knoppen en badges eromheen komen uit het
   Metronic-template en staan hier dus niet. */

/* De twee genummerde ingangen bovenaan het scherm van de kwaliteitsmanager. */
.fb-qahub { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fb-qahub button {
  border: 1px solid var(--fb-rand); background: #ffffff; border-radius: 20px; padding: 18px;
  display: grid; grid-template-columns: 42px 1fr 24px; gap: 12px; align-items: center;
  text-align: left; box-shadow: 0 5px 18px rgba(22, 59, 44, .05); cursor: pointer;
}
.fb-qahub button:hover { border-color: var(--fb-mint); }
.fb-qahub button > span {
  width: 36px; height: 36px; border-radius: 12px; background: #eaf6f1;
  display: grid; place-items: center; font-weight: 800; color: var(--fb-mint-donker);
}
.fb-qahub button div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fb-qahub button b { font-size: 15px; color: var(--fb-tekst); }
.fb-qahub button small { color: var(--fb-tekst-muted); line-height: 1.35; }
.fb-qahub button i { font-style: normal; font-size: 22px; color: var(--fb-mint-donker); }

/* Een controlepunt of procedure als uitklapbare regel. */
.fb-refgroep { margin-top: 14px; }
.fb-refrij { border-top: 1px solid var(--fb-rand); padding: 14px 0; }
.fb-refrij summary { cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.fb-refrij summary b { font-size: 14px; color: var(--fb-tekst); }
.fb-refrij summary small { color: var(--fb-tekst-muted); }
.fb-refinhoud { padding-top: 10px; }
.fb-refinhoud p { margin: 4px 0; }
.fb-procrij { display: block; }

.fb-reffoto { display: inline-block; cursor: pointer; }
.fb-refbeelden { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-refbeelden img {
  width: 160px; max-height: 120px; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--fb-rand);
}
/* De foto waarop een uitslag rust is iets anders dan een voorbeeld dat QA heeft neergezet. */
.fb-refbeelden img.fb-uit-test { border-color: var(--fb-mint); border-width: 2px; }

/* Het formulier voor een nieuwe procedure. */
.fb-procform {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  background: var(--fb-achtergrond); border-radius: 16px; padding: 16px;
}
.fb-procform textarea { grid-column: 1 / -1; min-height: 110px; }
.fb-procform > input[data-veld="source_reference"] { grid-column: 1 / -1; }
.fb-procform button { grid-column: 1 / -1; width: max-content; }
.fb-procmeta {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;
}
.fb-procmeta label { display: grid; gap: 4px; }

@media (max-width: 720px) {
  .fb-qahub, .fb-procform { grid-template-columns: 1fr; }
}
/* --- einde QA-borging --- */

/* --- dienstregistratie --- */
/* De balk uit .shiftBar in het prototype: een rij met je stand en de knoppen die daarbij horen.
   De kaart eromheen komt van het template. */
.fb-dienstbalk .kt-card-content { padding: 14px 18px; }
.fb-dienststand { font-size: 13px; color: var(--fb-tekst-secundair); }
.fb-dienstbalk button { margin-left: auto; }
.fb-dienstbalk button + button { margin-left: 0; }
/* --- einde dienstregistratie --- */

/* --- normdekking per vestiging --- */
/* De coverageRow uit het prototype: naam, cijfers en een balk, met een rand als de dekking nul
   is. Nul is hier geen kleinigheid: dan is er niets aantoonbaar gecontroleerd. */
.fb-dekkingrij {
  display: grid; grid-template-columns: minmax(0, 220px) 1fr minmax(0, 220px); gap: 12px;
  align-items: center; border-top: 1px solid var(--fb-rand); padding: 14px 0;
}
.fb-dekkingrij:first-child { border-top: 0; }
.fb-dekkingrij b { font-size: 14px; color: var(--fb-tekst); }
.fb-dekkingrij span { font-size: 13px; color: var(--fb-tekst-muted); }
.fb-dekkingrij progress { width: 100%; accent-color: var(--fb-mint); height: 10px; }
.fb-dekkingrij.let-op b { color: var(--fb-oranje); }
.fb-dekkingrij.let-op progress { accent-color: var(--fb-oranje); }

/* Een vestigingsregel waar je op kunt klikken. */
.fb-feedrij--knop {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.fb-feedrij--knop:hover { background: var(--fb-achtergrond); }

@media (max-width: 720px) {
  .fb-dekkingrij { grid-template-columns: 1fr; gap: 4px; }
}
/* --- einde normdekking --- */

/* --- de twee QA-kaarten --- */
/* .qaTools en .toolCard uit het prototype: twee brede kaarten die de panelen eronder openen. */
.fb-qatools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fb-toolkaart {
  padding: 22px; text-align: left; border: 1px solid var(--fb-rand); border-radius: 18px;
  background: #ffffff; display: grid; gap: 8px; cursor: pointer; font: inherit; color: inherit;
}
.fb-toolkaart:hover { border-color: var(--fb-mint); }
.fb-toolkaart b { font-size: 17px; color: var(--fb-tekst); }
.fb-toolkaart small { font-size: 13px; color: var(--fb-tekst-muted); }

@media (max-width: 720px) { .fb-qatools { grid-template-columns: 1fr; } }
/* --- einde QA-kaarten --- */

/* --- beoordeling per onderdeel --- */
/* Eén kaart per onderdeel: wat de AI ervan vond, wat de oorzaak kan zijn, en het eigen oordeel
   van de keurmeester. Daarvoor waren dit drie losse blokken onder elkaar. */
.fb-onderdeel {
  border: 1px solid var(--fb-rand); border-radius: 16px; padding: 18px;
  background: #ffffff;
}
.fb-onderdeel-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fb-onderdeel-kop h3 { margin: 0; overflow-wrap: break-word; }
.fb-onderdeel-cijfer {
  display: flex; align-items: center; justify-content: center; color: #ffffff;
  background: var(--pb-blauw, #00539f); flex-shrink: 0; height: 56px; min-width: 56px;
  border-radius: 16px; font-size: 24px; font-weight: 800; padding: 0 10px;
}

/* De twee blokken onder het AI-oordeel: de mogelijke oorzaak en het eigen oordeel. Een lijn
   ertussen, zodat te zien is waar de app ophoudt en de keurmeester begint. */
.fb-onderdeel-blok { border-top: 1px solid var(--fb-rand); margin-top: 16px; padding-top: 14px; }
.fb-eigen-oordeel { background: var(--fb-achtergrond); border-radius: 12px; padding: 14px; margin-top: 16px; }
.fb-eigen-oordeel .fb-normlabel { margin: 0; }

/* De twee uitlegknoppen boven de lijst: die uitleg hoort bij blokken die in elke onderdeelkaart
   terugkomen, dus staan ze één keer bovenaan in plaats van negen keer. */
.fb-uitleglinks { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; }
.fb-uitleglinks button {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--pb-blauw, #00539f); text-decoration: underline; text-underline-offset: 3px;
}
.fb-uitleglinks button:hover { text-decoration: none; }

/* Het deel dat van de app komt, met een rand aan de zijkant zodat het zich onderscheidt van het
   eigen oordeel eronder. Wat de AI zag en waarom hij op een cijfer uitkomt zijn twee dingen. */
.fb-ai-deel { border-top: 0; margin-top: 12px; padding-top: 0; }
.fb-ai-cijfer { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.fb-ai-cijfer small { font-size: 11px; color: var(--fb-tekst-muted); white-space: nowrap; }

/* De waarnemingen: per regel het kenmerk als label, zodat een pluspunt en een aandachtspunt
   uit elkaar te houden zijn zonder de hele zin te lezen. */
.fb-waarnemingen { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.fb-waarnemingen li {
  display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline;
  font-size: 13px; line-height: 1.45; color: var(--fb-tekst-secundair);
}
.fb-waarnemingen li b {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.fb-waarnemingen li.goed b { background: #e6f6ec; color: #1a8a4a; }
.fb-waarnemingen li.let-op b { background: #fff4d6; color: #7a5200; }
.fb-waarnemingen li.onbekend b { background: #eef1f5; color: #55637a; }


/* De letterlijke normtekst. Het enige blok in de kaart dat niet van de app komt, dus met een
   eigen rand aan de zijkant zodat dat te zien is zonder te lezen. */
.fb-normtekst { border-top: 0; margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--pb-blauw, #00539f); background: #f5f8fc; border-radius: 0 10px 10px 0; }
.fb-normtekst p { margin: 4px 0 0; color: var(--fb-tekst); font-style: italic; }

/* --- einde beoordeling per onderdeel --- */

/* --- wijzigen, versies en het spoor bij een rapportage --- */
/* Alles hieronder staat NAAST de rapportage en gaat nooit mee in de PDF: die wordt server-zijde
   uit een eigen sjabloon gerenderd, en deze blokken dragen fb-report-noprint. */

/* De wijzigknop naast "PDF downloaden". Omlijnd in plaats van gevuld: downloaden is de
   handeling waar je meestal voor komt, wijzigen de uitzondering. */
.fb-report-wijzig-btn {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  border: 1px solid var(--pb-blauw, #00539f); color: var(--pb-blauw, #00539f);
  background: #ffffff; border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 600;
}
.fb-report-wijzig-btn:hover { background: #eef3fa; }

/* De balk bij een eerdere versie. Opvallend, want een oude uitslag voor de huidige aanzien is
   het ergste dat hier mis kan gaan. */
.fb-versiebalk {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #fff7e6; border: 1px solid #f0d9a8; color: #7a5200;
  border-radius: 12px; padding: 14px 16px; margin: 0 auto 16px; max-width: 210mm;
}
.fb-versiebalk b { display: block; }
.fb-versiebalk span { font-size: 13px; }

/* Eén versie in de lijst. */
.fb-versierij {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--fb-rand); padding: 12px 0;
}
.fb-versierij:first-child { border-top: 0; }
.fb-versierij b { display: block; font-size: 14px; color: var(--fb-tekst); }
.fb-versierij small { display: block; color: var(--fb-tekst-muted); font-size: 12px; margin-top: 2px; }

/* Eén regel uit het spoor: waar het over ging, wat er veranderde, en wie het deed. */
.fb-spoorrij {
  display: grid; grid-template-columns: minmax(0, 170px) 1fr minmax(0, 190px); gap: 14px;
  border-top: 1px solid var(--fb-rand); padding: 11px 0; font-size: 13px;
}
.fb-spoorrij:first-child { border-top: 0; }
.fb-spoorwaar { font-weight: 600; color: var(--fb-tekst); }
.fb-spoorwat { color: var(--fb-tekst-secundair); overflow-wrap: anywhere; }
.fb-spoorwat i { color: var(--fb-tekst-muted); }
.fb-spoorwat b { color: var(--fb-tekst); }
.fb-pijl { color: var(--fb-tekst-muted); margin: 0 4px; }
.fb-spoorwie { text-align: right; color: var(--fb-tekst-secundair); }
.fb-spoorwie small { display: block; color: var(--fb-tekst-muted); font-size: 11px; }

/* Het keuringsscherm zegt dat je een bestaand oordeel bijstelt in plaats van een nieuw geeft. */
.fb-wijzigmelding {
  background: #eef3fa; border-left: 3px solid var(--pb-blauw, #00539f);
  border-radius: 0 12px 12px 0; padding: 14px 16px; margin-bottom: 20px;
}
.fb-wijzigmelding b { display: block; margin-bottom: 3px; color: var(--fb-navy-donker); }
.fb-wijzigmelding span { font-size: 13px; color: var(--fb-tekst-secundair); }

@media (max-width: 720px) {
  .fb-spoorrij { grid-template-columns: 1fr; gap: 4px; }
  .fb-spoorwie { text-align: left; }
}
/* --- einde wijzigen en versies --- */


/* ================================================================================
   Eigenaar: managementoverzicht per vestiging (11-09-2026, RC7/RC8/RC9 van Wilko).
   Raster, verhoudingen, kleuren en breekpunten 1:1 uit src/styles.css van het prototype.
   Geen <table> maar een grid, zodat hij op een telefoon omvouwt in plaats van te scrollen.
   ================================================================================ */
.fb-dekkingswaarschuwing {
  padding: 14px 16px; border-radius: 16px;
  background: #fff7db; border: 1px solid #ead68c;
  display: grid; gap: 4px;
}
.fb-dekkingswaarschuwing b { color: #7a5f10; font-size: 14px; }
.fb-dekkingswaarschuwing span { color: #8a6d1f; font-size: 13px; }

.fb-leeg-uitleg { color: #687a73; font-size: 13px; margin: 0 0 12px; }

.fb-eig-tabel {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) .75fr 1.2fr .7fr .7fr .8fr 1fr 24px;
  gap: 12px; align-items: center; width: 100%;
}
.fb-eig-kop {
  padding: 0 4px 10px; color: #687a73; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 800;
  border-bottom: 1px solid var(--fb-rand, #e6eaf2);
}
.fb-eig-rijen { display: grid; }
.fb-eig-rij {
  border: 0; border-bottom: 1px solid var(--fb-rand, #e6eaf2);
  background: #fff; padding: 16px 4px; text-align: left; color: inherit; cursor: pointer;
}
.fb-eig-rij:last-child { border-bottom: 0; }
.fb-eig-rij:hover { background: #f6fbfa; }
.fb-eig-rij span { min-width: 0; }
.fb-eig-rij b, .fb-eig-rij small { display: block; }
.fb-eig-rij b { font-size: 1rem; color: var(--fb-navy, #234b90); }
.fb-eig-rij small {
  color: #687a73; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-eig-naam b { font-size: 1.05rem; }
.fb-eig-pijl { font-size: 1.4rem; text-align: right; color: #687a73; }

.fb-eig-prioriteit {
  display: inline-flex; width: max-content; padding: 7px 10px; border-radius: 999px;
  font-style: normal; font-size: .78rem; font-weight: 800;
}
.fb-eig-prioriteit.high { background: #ffe1dc; color: #8d2d21; }
.fb-eig-prioriteit.mid  { background: #fff0c9; color: #805d13; }
.fb-eig-prioriteit.ok   { background: #ddf3e6; color: #1d6d40; }
.fb-eig-prioriteit.none { background: #eef1f6; color: #5b6b7f; }

/* Het zelfstandige vestigingsscherm (RC8). */
.fb-eig-terugknop {
  border: 1px solid var(--fb-rand, #e6eaf2); background: #fff; border-radius: 999px;
  padding: 10px 16px; font-weight: 800; color: var(--fb-navy, #234b90); cursor: pointer;
}
.fb-eig-terugknop:hover { background: #f6fbfa; }
.fb-eig-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fb-eig-detailraster { display: grid; grid-template-columns: 1.4fr .6fr; gap: 16px; margin-top: 12px; }
.fb-eig-prioriteitkaart { border-radius: 18px; padding: 18px; display: grid; gap: 8px; }
.fb-eig-prioriteitkaart b { font-size: 15px; }
.fb-eig-prioriteitkaart span { line-height: 1.45; font-size: 13px; }
.fb-eig-prioriteitkaart.high { background: #fff0ed; color: #7f2b21; }
.fb-eig-prioriteitkaart.mid  { background: #fff7df; color: #755712; }
.fb-eig-prioriteitkaart.ok   { background: #edf8f1; color: #245f42; }
.fb-eig-prioriteitkaart.none { background: #f4f6fa; color: #4a5a6d; }
.fb-eig-gevallen { margin-top: 20px; border-top: 1px solid var(--fb-rand, #e6eaf2); padding-top: 16px; }
.fb-eig-gevallen summary { cursor: pointer; font-weight: 800; color: var(--fb-navy, #234b90); }

@media (max-width: 980px) {
  /* De kolomkoppen vallen weg zodra de kolommen dat doen; elke cel zegt dan zelf waar
     zijn getal over gaat. Zonder dit staat er "4" met daaronder "30 dagen" en is niet
     te zien of dat incidenten of beoordelingen zijn (melding Wilko, 11-09-2026). */
  .fb-eig-kop { display: none; }
  .fb-eig-rij > span[data-kop]:not(.fb-eig-naam)::before {
    content: attr(data-kop);
    display: block; margin-bottom: 1px;
    font-size: .62rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: #8a9a94;
  }
  .fb-eig-tabel.fb-eig-rij { grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
  .fb-eig-naam { grid-column: 1 / 3; }
  .fb-eig-pijl { grid-column: 3; grid-row: 1; text-align: right; }
  .fb-eig-rij > span:nth-child(7) { grid-column: 1 / 3; }
  .fb-eig-detailraster { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .fb-eig-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .fb-eig-tabel.fb-eig-rij { grid-template-columns: 1fr 1fr; }
  .fb-eig-naam { grid-column: 1 / 2; }
  .fb-eig-pijl { grid-column: 2; grid-row: 1; }
  .fb-eig-rij > span:nth-child(7) { grid-column: 1 / 3; }
  .fb-eig-rij small { white-space: normal; }
  .fb-eig-rij { padding: 15px 4px; }
}


/* QA-referentiebeelden: waar gaat dit beeld over (11-09-2026, RC4 van Wilko). */
.fb-refplek { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fb-refplek label { display: grid; gap: 4px; min-width: 0; }
.fb-refplek label span { font-size: 12px; font-weight: 600; color: #687a73; }

.fb-refknoppen { display: flex; flex-wrap: wrap; gap: 8px; }

.fb-refbeeld { margin: 0; display: grid; gap: 4px; width: max-content; }
.fb-refbeeld figcaption {
  font-size: 11px; color: #687a73; max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 620px) {
  .fb-refplek { grid-template-columns: 1fr; }
}


/* Het bewijsplan van een controlepunt (11-09-2026, RC2/RC6 van Wilko). Drie toestanden: gedaan,
   nu aan de beurt, nog te doen. De huidige stap is de enige met nadruk, zodat er op de werkvloer
   geen twijfel is over wat er nu gefotografeerd moet worden. */
.fb-bewijsstappen { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.fb-bewijsstap {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid #e3e8e6; background: #fbfcfc;
}
.fb-bewijsstap b { font-size: 13px; color: #2f3b37; }
.fb-bewijsstap span { font-size: 12px; color: #687a73; }

.fb-bewijsstap--nu { border-color: var(--fb-mint-donker); background: #f2faf7; }
.fb-bewijsstap--nu b { color: var(--fb-mint-donker); }
.fb-bewijsstap--gedaan { opacity: .62; }
.fb-bewijsstap--gedaan b::before { content: "\2713\00a0"; }

.fb-bewijsbeelden { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.fb-bewijsbeeld { margin: 0; display: grid; gap: 3px; }
.fb-bewijsbeeld img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid #e3e8e6; }
.fb-bewijsbeeld figcaption { font-size: 11px; color: #687a73; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }