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

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

/* Header: navy-verloop i.p.v. platte kleur. */
.fb-header {
  background: linear-gradient(120deg, var(--fb-navy) 0%, var(--fb-navy-donker) 100%) !important;
}
/* 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;
}
.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 + zachte mint-gloed. */
.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::after {
  content: ''; position: absolute; right: -40px; top: -50px; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(91,171,152,.4) 0%, transparent 70%);
  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; }