:root {
  --surface-primary: #ffffff; --surface-primary-alt: #F6F7F8; --surface-primary-contrast: #EEF1F3;
  --surface-secondary: #F6F7F8; --surface-secondary-alt: #ECEFF2; --surface-tertiary: #ECEFF2; --surface-chat: #ffffff;
  --surface-active: #ECEFF2; --surface-active-alt: #E3E7EB; --surface-hover: #F3F5F7; --surface-dialog: #ffffff; --header-primary: #ffffff;
  --text-primary: #12365A; --text-secondary: #7D90A4; --text-secondary-alt: #7D90A4; --text-tertiary: #A0AFBD;
  --surface-submit: #E8731A; --surface-submit-hover: #CC6517;
  --green-500:#E8731A; --green-600:#D56A18; --green-700:#E8731A; --green-800:#BE5E15;
  --brand-purple: #E8731A; --primary: 210 67% 21%; --primary-foreground: 0 0% 100%; --ring-primary: #E8731A;
  --border-light: #ECEFF2; --border-medium: #E3E7EB; --border-heavy: #D4DBE1;
}
/* ---- donker thema -----------------------------------------------------
   Wie zijn toestel op donker heeft staan, houdt een donker scherm; wel in de
   kleuren van de omgeving en met genoeg contrast. */
.dark {
  --surface-primary: #1B1A19; --surface-primary-alt: #201F1E; --surface-primary-contrast: #292827;
  --surface-secondary: #201F1E; --surface-secondary-alt: #292827; --surface-tertiary: #292827; --surface-chat: #1B1A19;
  --surface-active: #412007; --surface-active-alt: #61300B; --surface-hover: #323130; --surface-dialog: #201F1E; --header-primary: #1B1A19;
  --text-primary: #F3F2F1; --text-secondary: #C8C6C4; --text-secondary-alt: #C8C6C4; --text-tertiary: #979593;
  --surface-submit: #E8731A; --surface-submit-hover: #EB8435;
  --green-500:#E8731A; --green-600:#EB8435; --green-700:#E8731A; --green-800:#BE5E15;
  --brand-purple: #F0A46A; --primary: 210 67% 21%; --primary-foreground: 0 0% 100%; --ring-primary: #F0A46A;
  --border-light: #292827; --border-medium: #3B3A39; --border-heavy: #484644;
}
/* de pagina-achtergrond staat in de software hard op #212121; gelijktrekken,
   anders wijkt elk vlak dat wel de variabelen gebruikt zichtbaar af */
html.dark, .dark body{ background-color:#1B1A19 !important; }
.dark input, .dark textarea, .dark select{ color:#F3F2F1; }
.dark input::placeholder, .dark textarea::placeholder{ color:#979593; opacity:1; }
.dark a:not(.nedllm-geenlink):not([class*="btn"]){ color:#F0A46A; }
.dark hr{ border-color:#3B3A39; }
/* ---- merkaanwezigheid -------------------------------------------------
   De software rekt het logo tot volle breedte met een vaste hoogte, waardoor
   het merk piepklein werd weergegeven. Hier krijgt het de ruimte die het hoort
   te hebben, ongeacht de verhoudingen van het aangeleverde logo. */
img[src*="logo.svg"], img.nedllm-merk{ height:64px !important; max-height:64px !important; width:auto !important;
  max-width:min(320px,82vw) !important; margin:8px auto 4px !important; object-fit:contain !important; display:block !important; }
@media (max-width:480px){ img[src*="logo.svg"], img.nedllm-merk{ height:52px !important; } }
.nedllm-merkregel{ text-align:center; margin:6px auto 26px; max-width:34ch;
  font:400 14px/1.5 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Arial,sans-serif; color:var(--text-secondary); }
.nedllm-voet{ position:fixed; left:0; right:0; bottom:10px; text-align:center; pointer-events:none;
  font:400 12px/1.4 "Segoe UI Variable Text","Segoe UI",system-ui,Arial,sans-serif; color:var(--text-tertiary); }
/* vertrouwenslabel onder het gesprek */
.nedllm-vertrouwen{ display:inline-flex; align-items:center; gap:6px; margin-left:10px; padding:2px 9px; border:1px solid var(--border-medium, #E1DFDD);
  border-radius:999px; font-size:11px; line-height:16px; color:inherit; text-decoration:none; white-space:nowrap; vertical-align:middle; }
.nedllm-vertrouwen:hover{ border-color:var(--text-secondary, #605E5C); text-decoration:underline; }
.nedllm-vertrouwen i{ width:7px; height:7px; border-radius:50%; background:#8A8886; display:inline-block; }
.nedllm-vertrouwen.operationeel i{ background:#107C10; }
.nedllm-vertrouwen.onderhoud i{ background:#C19C00; }
.nedllm-vertrouwen.storing i{ background:#A4262C; }
.dark .nedllm-vertrouwen{ border-color:#3B3A39; }
@media (max-width: 640px){ .nedllm-vertrouwen{ margin-left:0; margin-top:4px; white-space:normal; } }
.nedllm-geenlink{ text-decoration:none !important; cursor:default !important; }

/* ===== merkkleur door de hele werkplek (v4) ==============================
   Eén variabele stuurt alles: --merk pakt de knopkleur van deze omgeving, dus
   elke white-label omgeving kleurt automatisch mee. Tinten worden berekend met
   color-mix, zodat er per klant niets extra ingesteld hoeft te worden. */
:root{ --merk: var(--surface-submit, #0F6CBD); }
:root{
  --surface-primary-alt:      color-mix(in srgb, var(--merk) 6%, #ffffff);
  --surface-secondary:        color-mix(in srgb, var(--merk) 6%, #ffffff);
  --surface-secondary-alt:    color-mix(in srgb, var(--merk) 10%, #ffffff);
  --surface-primary-contrast: color-mix(in srgb, var(--merk) 10%, #ffffff);
  --surface-tertiary:         color-mix(in srgb, var(--merk) 8%, #ffffff);
  --surface-active:           color-mix(in srgb, var(--merk) 16%, #ffffff);
  --surface-active-alt:       color-mix(in srgb, var(--merk) 22%, #ffffff);
  --surface-hover:            color-mix(in srgb, var(--merk) 10%, #ffffff);
  --border-light:             color-mix(in srgb, var(--merk) 12%, #ffffff);
  --border-medium:            color-mix(in srgb, var(--merk) 22%, #ffffff);
}
.dark{
  --merk: var(--brand-purple, #479EF5);
  --surface-primary-alt:      color-mix(in srgb, var(--merk) 12%, #1B1A19);
  --surface-secondary:        color-mix(in srgb, var(--merk) 12%, #1B1A19);
  --surface-secondary-alt:    color-mix(in srgb, var(--merk) 18%, #1B1A19);
  --surface-primary-contrast: color-mix(in srgb, var(--merk) 18%, #1B1A19);
  --surface-tertiary:         color-mix(in srgb, var(--merk) 14%, #1B1A19);
  --surface-active:           color-mix(in srgb, var(--merk) 26%, #1B1A19);
  --surface-active-alt:       color-mix(in srgb, var(--merk) 32%, #1B1A19);
  --surface-hover:            color-mix(in srgb, var(--merk) 16%, #1B1A19);
  --border-light:             color-mix(in srgb, var(--merk) 20%, #1B1A19);
  --border-medium:            color-mix(in srgb, var(--merk) 30%, #1B1A19);
}
/* dunne merkstreep bovenaan het scherm */
body::before{ content:""; position:fixed; top:0; left:0; right:0; height:3px; z-index:70; pointer-events:none;
  background: linear-gradient(90deg, var(--merk), color-mix(in srgb, var(--merk) 45%, #ffffff)); }
/* zachte merkgloed over het gespreksvlak */
main{ background-image: radial-gradient(120% 50% at 50% 0%, color-mix(in srgb, var(--merk) 13%, transparent), transparent 70%); }
.dark main{ background-image: radial-gradient(120% 50% at 50% 0%, color-mix(in srgb, var(--merk) 18%, transparent), transparent 70%); }
/* invoerbalk in de merkkleur, met een duidelijke focus */
div.rounded-t-3xl:has(textarea){ border-color: color-mix(in srgb, var(--merk) 32%, transparent) !important; }
div.rounded-t-3xl:has(textarea:focus){ border-color: var(--merk) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--merk) 18%, transparent) !important; }
/* merknaam bovenin krijgt een tint */
[class*="rounded-full"]:has(> img[src*="logo"]){ background: color-mix(in srgb, var(--merk) 12%, #ffffff) !important; }
.dark [class*="rounded-full"]:has(> img[src*="logo"]){ background: color-mix(in srgb, var(--merk) 22%, #1B1A19) !important; }
::selection{ background: color-mix(in srgb, var(--merk) 24%, #ffffff); }
*:focus-visible{ outline-color: var(--merk) !important; }
::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--merk) 28%, #ffffff); }
.dark ::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--merk) 40%, #1B1A19); }

/* ===== voetregel onder de chat: nooit overlappen ========================= */
/* De voettekst, het vertrouwenslabel en de links staan in één rij die niet
   afbrak; op smallere schermen liepen ze over elkaar en van het scherm af. */
div:has(> span > .nedllm-vertrouwen){ flex-wrap: wrap !important; row-gap: 2px !important;
  column-gap: 10px !important; padding-bottom: 6px !important; }
.nedllm-vertrouwen{ max-width: min(94%, 720px); white-space: normal; text-align: center; }
@media (max-width: 1100px){ .nedllm-vertrouwen{ font-size: 10.5px; line-height: 15px; } }
/* ===== aanmeldscherm (v5) ================================================
   Eén rustige kaart midden op het scherm, met het merk er direct boven.
   Alles volgt --merk, dus elke white-label omgeving krijgt dit in eigen kleur.
   Geldt voor alle schermen van de aanmeldflow (inloggen, wachtwoord, 2FA). */
#root > div:has(.w-authPageWidth){
  min-height: 100vh; min-height: 100dvh;
  padding: 28px 16px 12px;
  background-color: color-mix(in srgb, var(--merk) 4%, #F7F8FA) !important;
  background-image:
    radial-gradient(900px 520px at 50% -140px, color-mix(in srgb, var(--merk) 16%, transparent), transparent 72%),
    radial-gradient(700px 420px at 100% 100%, color-mix(in srgb, var(--merk) 7%, transparent), transparent 70%) !important;
}
.dark #root > div:has(.w-authPageWidth){
  background-color: #141312 !important;
  background-image:
    radial-gradient(900px 520px at 50% -140px, color-mix(in srgb, var(--merk) 22%, transparent), transparent 72%),
    radial-gradient(700px 420px at 100% 100%, color-mix(in srgb, var(--merk) 9%, transparent), transparent 70%) !important;
}
/* merk en kaart samen in het midden; de links onderaan blijven onderaan */
#root > div:has(.w-authPageWidth) > div.bg-cover{ height: auto !important; margin: auto 0 0 !important; background: none !important; }
#root > div:has(.w-authPageWidth) > main{ flex-grow: 0 !important; background: none !important; padding: 0 !important; }
#root > div:has(.w-authPageWidth) > [role="contentinfo"]{ margin: auto 0 0 !important; padding-top: 28px; }

/* logo en merkregel */
#root > div:has(.w-authPageWidth) img.nedllm-merk{ height: 56px !important; max-height: 56px !important; margin: 0 auto 10px !important; }
#root > div:has(.w-authPageWidth) .nedllm-merkregel{ max-width: 46ch; margin: 0 auto 22px; font-size: 14px; color: var(--text-secondary); }

/* de kaart */
#root > div:has(.w-authPageWidth){ --nl-kaart: #ffffff; }
.dark #root > div:has(.w-authPageWidth){ --nl-kaart: #1F1E1D; }
.w-authPageWidth{
  width: min(420px, 100%) !important; max-width: 420px !important;
  background: var(--nl-kaart) !important;
  border: 1px solid color-mix(in srgb, var(--merk) 14%, #E6E8EC);
  border-radius: 16px !important;
  padding: 32px 32px 28px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px -8px rgba(16,24,40,.12);
}
.dark .w-authPageWidth{ border-color: color-mix(in srgb, var(--merk) 22%, #2B2A29); box-shadow: 0 16px 40px -12px rgba(0,0,0,.6); }
.w-authPageWidth h1{
  font: 600 24px/1.2 "Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Arial,sans-serif !important;
  letter-spacing: -.01em; color: var(--text-primary) !important; margin-bottom: 4px !important;
}
.w-authPageWidth:has(form[aria-label="Aanmeldformulier"]) h1::after{
  content: "Log in met de gegevens uit uw uitnodiging.";
  display: block; margin-top: 8px; font: 400 14px/1.5 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color: var(--text-secondary); letter-spacing: 0;
}
.w-authPageWidth form{ margin-top: 22px !important; }

/* velden: iets strakker dan pillen, duidelijke focus in de merkkleur */
.w-authPageWidth input[type="text"], .w-authPageWidth input[type="email"], .w-authPageWidth input[type="password"]{
  border-radius: 10px !important; min-height: 48px;
  font-size: 16px !important; /* kleiner dan 16px laat iOS inzoomen bij het intypen, en de pagina blijft daarna ingezoomd */
  border-color: color-mix(in srgb, var(--merk) 16%, #D5D9E0) !important;
  background: var(--nl-kaart) !important; color: var(--text-primary) !important;
}
.dark .w-authPageWidth input{ border-color: color-mix(in srgb, var(--merk) 24%, #3B3A39) !important; }
.w-authPageWidth input:hover{ border-color: color-mix(in srgb, var(--merk) 40%, #C3C8D0) !important; }
/* de software kleurt velden met een binnenschaduw (tegen de gele autofill); die zetten we op de kaartkleur */
.w-authPageWidth input, .w-authPageWidth input:focus{ box-shadow: 0 0 0 50vh var(--nl-kaart) inset !important; -webkit-text-fill-color: var(--text-primary) !important; }
.w-authPageWidth input:focus{ border-color: var(--merk) !important; outline: none !important;
  box-shadow: 0 0 0 50vh var(--nl-kaart) inset, 0 0 0 3px color-mix(in srgb, var(--merk) 20%, transparent) !important; }
.w-authPageWidth label{ background: var(--nl-kaart) !important; }
.w-authPageWidth input:focus + label, .w-authPageWidth input:not(:placeholder-shown) + label{ color: var(--merk) !important; }

/* knop */
.w-authPageWidth button[type="submit"]{
  border-radius: 10px !important; height: 48px !important;
  font: 600 15px/1 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Arial,sans-serif !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.08);
}
.w-authPageWidth a{ color: var(--merk) !important; }

/* in een partneromgeving staat onderin de regel "aangedreven door NedLLM": de links erboven houden */
body:has(.nedllm-voet) #root > div:has(.w-authPageWidth) > [role="contentinfo"]{ padding-bottom: 40px; }
/* links onderaan en de themaknop: aanwezig, niet opvallend */
#root > div:has(.w-authPageWidth) [role="contentinfo"] a{ color: var(--text-secondary) !important; font-size: 13px !important; }
#root > div:has(.w-authPageWidth) [role="contentinfo"] a:hover{ color: var(--merk) !important; }
#root > div:has(.w-authPageWidth) button[aria-label="Thema wisselen"]{ opacity: .55; }
#root > div:has(.w-authPageWidth) button[aria-label="Thema wisselen"]:hover{ opacity: 1; }

@media (max-width: 520px){
  #root > div:has(.w-authPageWidth){ padding-top: 20px; }
  .w-authPageWidth{ padding: 26px 20px 22px !important; border-radius: 14px !important; }
  #root > div:has(.w-authPageWidth) img.nedllm-merk{ height: 48px !important; }
  #root > div:has(.w-authPageWidth) .nedllm-merkregel{ font-size: 13.5px; margin-bottom: 18px; }
  #root > div:has(.w-authPageWidth) [role="contentinfo"]{ padding-bottom: 44px; }
}