/* 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 Capture Mode/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; }

/* 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); }

/* 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; }
.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;
}