/* inloggen.css — inloggen (login.html) en wachtwoord instellen
   (wachtwoord.html) in richting Regiekamer met de kleuren van Rust
   (herontwerp, keuze 23-10-2026: "richting B alleen kleuren van A").

   De opzet komt uit Regiekamer: links een merkvlak met het merkteken, de kop
   en drie punten, rechts een smal formuliervlak; labels in kleine kapitalen,
   velden en knoppen met de kleine radius, letter IBM Plex Sans (zelf gehost
   in assets/fonts, SIL OFL 1.1). De kleuren komen uit de tokenlaag, net als
   in het portaal: het merkvlak in de paginakleur (--bg), het formulier op wit
   (--panel), lijnen in --line en het klantaccent (omgeving.js zet --accent)
   voor het merkteken, de knop, de links en de focusring. Onder 960 px valt
   het merkvlak weg en staat het merkteken boven het formulier.

   Afwijkingen van het ontwerp, bewust:
   [AFW-L.1] Geen WACS-feed en geen systeemstatus in het merkvlak: vóór het
     inloggen toont de pagina geen bedrijfsgegevens. De chip Testomgeving
     staat naast de kop van het formulier (in het ontwerp onder de knop),
     in het amber van de omgevingschip van het portaal, zodat hij ook op de
     2FA-stap in beeld blijft.
   [AFW-L.2] De punten in het merkvlak noemen geen verversingstijd en geen
     koppeling die niet elk bedrijf heeft.
   [AFW-L.3] Velden 16 px op elk scherm, zodat iOS bij het tikken niet
     inzoomt, en knoppen en velden minstens 44 px hoog.
   [AFW-L.4] De tekst onder de kop is de bestaande uitleg voor monteurs; de
     belofte uit het ontwerp ("het portaal kiest zelf het juiste bedrijf")
     klopt niet op de testomgeving en staat er daarom niet.
   [AFW-L.5] De voetregel van het ontwerp (versie in mono) is de bestaande
     regel over een account op uitnodiging; een versienummer heeft het
     portaal niet.

   Lettergroottes lopen via de typestappen (--text-*), afstanden via de
   ruimteschaal; de ratel in tests/css-schaal.test.mjs bewaakt dit bestand
   met plafond 0. beheer/ houdt zijn eigen inlogpagina's. */

/* ── letters (unicode-range zoals in cockpit.css en scan.css) ──────────── */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── tokens van deze twee pagina's ──────────────────────────────────────── */
body.inlog {
  --font-head: 'IBM Plex Sans', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --lg-form-breedte: 520px;            /* het formuliervlak van het ontwerp */
  --lg-kaart-breedte: 392px;           /* 520 min tweemaal 64 */
  --lg-raak: 44px;                     /* raakvlak van knoppen en velden [AFW-L.3] */
  --lg-fs-veld: 16px;                  /* iOS zoomt niet in vanaf 16 px [AFW-L.3] */
  --lg-icoon: 20px;
  /* veldrand: twee derde inkt in de lijn, zodat een leeg veld op wit 3:1
     haalt (WCAG 1.4.11); --line alleen is 1,2:1 */
  --lg-veldlijn: color-mix(in srgb, var(--ink-dim) 65%, var(--line));
  /* meldingstekst met een kwart inkt: puur rood en groen halen op hun eigen
     vlak geen 4,5:1, net als bij de omgevingschip in dashboard.css */
  --lg-rood-tekst: color-mix(in srgb, var(--red) 75%, var(--ink));
  --lg-groen-tekst: color-mix(in srgb, var(--green) 75%, var(--ink));
  --lg-amber-tekst: color-mix(in srgb, var(--amber) 72%, var(--ink));
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--panel);
}

/* ── opzet: merkvlak links, formulier rechts ────────────────────────────── */
.lg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lg-form-breedte);
  min-height: 100vh;
  min-height: 100dvh;
}

.lg-zij {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-12) var(--space-16);
  background: var(--bg);
  border-right: 1px solid var(--line);
}
.lg-zij .lg-kop {
  margin: auto 0 0;
  max-width: 16em;
  font-size: var(--text-display-lg);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.01em;
}
.lg-punten {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0 0 var(--space-4);
  list-style: none;
  color: var(--ink-dim);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
}
.lg-punten li { display: flex; align-items: center; gap: var(--space-3); }
.lg-punten svg { width: var(--lg-icoon); height: var(--lg-icoon); flex: none; color: var(--accent); }

/* merkteken met naam en ondertitel (omgeving.js vult ze per bedrijf) */
.lg-merk { display: flex; align-items: center; gap: var(--space-3); }
.lg-logo {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-badge);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--text-body-lg);
  font-weight: 600;
}
.lg-merk b { display: block; font-size: var(--text-body-lg); line-height: var(--leading-body-sm); font-weight: 600; }
.lg-merk small { display: block; font-size: var(--text-label); line-height: var(--leading-label); color: var(--ink-dim); }

.lg-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-12) var(--space-16);
  background: var(--panel);
}
.lg-kaart {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--lg-kaart-breedte);
}
/* het merkteken boven het formulier alleen als het merkvlak wegvalt */
.lg-kaart > .lg-merk { display: none; }

/* logo van het bedrijf (logo-fallback.js zet de bron of haalt het weg) */
.lg-bedrijfslogo {
  align-self: flex-start;
  max-width: 100%;
  height: var(--space-12);
  object-fit: contain;
}
.lg-bedrijfslogo:not([src]) { display: none; }

.lg-kopregel { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.lg-kaart h1 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  font-weight: 600;
  letter-spacing: 0;
}
.lg-lead { margin: calc(-1 * var(--space-2)) 0 0; color: var(--ink-dim); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.lg-lead[hidden] { display: none; }
.lg-voet { margin: var(--space-2) 0 0; color: var(--ink-dim); font-size: var(--text-label); line-height: var(--leading-label); }
.lg-voet a { display: inline-flex; align-items: center; padding: var(--space-2) 0; color: var(--accent); }
/* de zelf gehoste Plex Sans dekt 400 tot 600: geen kunstmatig vet */
.lg b, .lg strong { font-weight: 600; }

/* de verwijzing naar de live ingang (login.js) met de kleine radius */
.lg .notice { border-radius: var(--radius-badge); }

/* ── formulieren ───────────────────────────────────────────────────────── */
.lg form { display: grid; gap: var(--space-4); }
/* de display-regel hierboven zou [hidden] overrulen: expliciet herstellen,
   anders staan twee formulieren tegelijk in beeld */
.lg form[hidden] { display: none; }

.lg input[type="text"], .lg input[type="password"] {
  min-height: var(--lg-raak);
  border-color: var(--lg-veldlijn);
  border-radius: var(--radius-badge);
  font-size: var(--lg-fs-veld);
}
.lg input:hover { border-color: var(--ink-dim); }
.lg input:focus { border-color: var(--accent); }
/* een uitgeschakeld wachtwoordveld: zichtbaar wachten tot het bedrijf vaststaat */
.lg input:disabled { background: var(--bg); color: var(--ink-dim); cursor: not-allowed; }
#mfa-code { font-family: var(--font-mono); letter-spacing: .2em; }

.lg .btn {
  min-height: var(--lg-raak);
  border-radius: var(--radius-badge);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 600;
}
.lg .btn-primary { width: 100%; }
.lg .btn:not(.btn-primary) { border-color: var(--lg-veldlijn); }

/* de tenantregel hoort bij het e-mailveld: iets tegen de form-gap in trekken */
#tenant-regel { margin-top: calc(-1 * var(--space-2)); }
#tenant-regel:empty { display: none; }
/* keuzelijst: wie bij meer dan één bedrijf hoort, kiest er hier één */
#tenant-keuze { display: grid; gap: var(--space-2); }
#tenant-keuze[hidden] { display: none; }
.keuze-knop { width: 100%; justify-content: center; }
#bedrijf-blok { display: grid; gap: var(--space-2); }
#bedrijf-blok[hidden] { display: none; }

/* foutmelding en bevestiging */
.login-err, .login-ok {
  display: none;
  padding: var(--space-2) var(--space-3);
  border: 1px solid;
  border-radius: var(--radius-badge);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.login-err { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); background: var(--red-dim); color: var(--lg-rood-tekst); }
.login-ok { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); background: var(--green-dim); color: var(--lg-groen-tekst); }
.login-err.show, .login-ok.show { display: block; }

/* links: tekstknoppen in het accent, onder de inlogknop */
.linklike {
  justify-self: start;
  padding: var(--space-2) 0;
  border: none;
  background: none;
  color: var(--accent);
  font-family: inherit;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.linklike:hover { text-decoration: underline; }
.linklike:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-offset); border-radius: var(--radius-badge); }
.linklike[hidden] { display: none; }

/* de chip Testomgeving [AFW-L.1]: stip en tekst, het amber van de
   omgevingschip in het portaal; naast de kop, zodat hij ook op de 2FA-stap
   in beeld blijft (login.js verbergt dan het hele inlogformulier) */
.lg-omgeving {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: calc(var(--space-1) / 2) var(--space-2);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius: var(--radius-pill);
  background: var(--amber-dim);
  color: var(--lg-amber-tekst);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: 600;
  white-space: nowrap;
}
.lg-omgeving::before { content: ""; width: var(--space-1); height: var(--space-1); border-radius: 50%; background: var(--amber); flex: none; }
/* op de live ingang moet de omgevingschip echt weg */
.lg-omgeving[hidden] { display: none; }

/* ── telefoon en smal venster: alleen het formulier ─────────────────────── */
@media (max-width: 960px) {
  .lg { grid-template-columns: minmax(0, 1fr); }
  .lg-zij { display: none; }
  .lg-form { justify-content: flex-start; padding: var(--space-10) var(--space-4) var(--space-8); }
  .lg-kaart > .lg-merk { display: flex; margin-bottom: var(--space-4); }
}
@media (max-width: 960px) and (min-height: 700px) {
  .lg-form { justify-content: center; padding-bottom: var(--space-16); }
}
@media (pointer: coarse) {
  .linklike, .lg-voet a { min-height: var(--lg-raak); }
}