/* BezitKaart Superadmin — het aanmeldscherm in dezelfde vorm als de klantapplicatie.
   Gevraagd (30 september 2026): "The Super Admin login page should use the same design and
   layout as the Client-side login page." De regels hieronder de tokens-regel na zijn LETTERLIJK
   gekopieerd uit Client/app/stijl/applicatie.css (het blok "Accounts" + "ONTWERP AANMELDSCHERM"),
   zodat een wijziging daar hier één-op-één terug te zetten is — zie de driftlijst in README.md.
   Een eigen bestand en geen regels in het <style> van superadmin.html: dat houdt de pagina zelf
   byte-gelijk, op de markup van #accScherm na.
   Twee tokens die de klant wél en superadmin.html niet definieert, alleen binnen het scherm. */
#accScherm{--primary:var(--merk-oranje);--accent-line:#C9DDEE;--raak:44px;}

  /* Accounts (ronde 288) — hergebruikt de startscherm-opmaak; hieronder alleen wat er nog
     niet was. Het accountscherm ligt bewust boven het startscherm. */
  .acc-scherm{z-index:6600;}
  .acc-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;}
  .acc-links button, .acc-tekstknop{background:none;border:none;padding:0;cursor:pointer;
    font:12px var(--sans);color:var(--merk-blauw);text-decoration:underline;}
  /* RONDE 493 — de zin die op het koude aanmeldscherm staat waar vroeger altijd "Nieuw account
     maken" stond: géén knop en géén onderstreping, want er valt hier niets aan te klikken. */
  .acc-uitleg{font:12px var(--sans);color:var(--ink-2);}

  /* ⚠️⚠️ ONTWERP AANMELDSCHERM (28 september 2026) — de indeling van een referentieontwerp
     (formulier links, beeldvlak rechts), met de EIGEN huisstijl: dezelfde teksten, dezelfde
     kleurtokens, dezelfde knoppen en dezelfde id's. Gevraagd: "make sure not need to change the
     project branding like color or text etc just copy the layout of the image".

     ⚠️ WELKE WEERGAVEN: alleen die van het aanmelden zelf (inloggen · account maken · wachtwoord
     vergeten · nieuw wachtwoord · tweestapscode · account aanvragen en de bevestiging daarvan),
     herkend aan hun eigen knop/veld met :has().
     Het profiel, de organisatie, de collega's en het abonnement draaien in hetzelfde
     #accScherm en houden hun vertrouwde, smalle venster. Bewust CSS en geen klasse vanuit
     accToon(): app/kern/sessie.js is byte-gelijk gekopieerd naar SuperAdmin/ (driftlijst in
     SuperAdmin/README.md), en een wijziging daar zou die twee uit elkaar trekken.
     ⚠️ Kleuren alleen via tokens — `#8A929E` in de pictogrammen hieronder is `--ink-3`, uitgeschreven
     omdat een data-URI geen CSS-variabele kan lezen (geen merkkleur, dus buiten de telling van
     test-huisstijl-kleur). */
  /* ⚠️⚠️ DE WACHTSTAND (29 september 2026) — `<html class="acc-wacht">` staat in index.html en
     wordt door app/kern/sessie.js weggehaald zodra de accountlaag beslist heeft. Zolang hij er is
     toont de pagina UITSLUITEND het aanmeldscherm, vanaf de allereerste schildering: dit
     stylesheet staat in de <head>, dus het geldt vóór er één script draait. Gemeld: de tool
     verscheen eerst en het aanmeldscherm pas na het laden.
     ⚠️ `visibility` en geen `display:none`, om dezelfde reden als de wand van ronde 332: de kaart
     wordt eronder gewoon opgebouwd en moet zijn afmetingen houden.
     ⚠️ Zolang #accInhoud nog leeg is (de configuratie is onderweg, of er staat een sessie klaar)
     staat er een laadteken in het venster in plaats van een leeg vlak. */
  html.acc-wacht, html.acc-wacht body{background:var(--merk-donker);}
  html.acc-wacht > body > *:not(#accScherm):not(#accSnackbar){visibility:hidden !important;}
  html.acc-wacht #accScherm, html.acc-wacht #accScherm[hidden]{display:flex;
    background:var(--merk-donker);backdrop-filter:none;}
  html.acc-wacht #accInhoud:empty{min-height:64px;display:flex;align-items:center;
    justify-content:center;}
  html.acc-wacht #accInhoud:empty::before{content:'';width:26px;height:26px;border-radius:50%;
    border:3px solid var(--line);border-top-color:var(--primary);
    animation:acc-wacht-draai .8s linear infinite;}
  @keyframes acc-wacht-draai{to{transform:rotate(360deg);}}
  /* Een knop die in het vroege formulier al is ingedrukt en wacht tot de aanmeldlaag er is. */
  #accInhoud button.acc-bezig{cursor:progress;opacity:.75;}
  @media (prefers-reduced-motion: reduce){
    html.acc-wacht #accInhoud:empty::before{animation-duration:2.4s;}
  }
  .acc-beeld{display:none;}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-paneel{
    position:relative;width:min(1080px,100%);min-height:min(640px, calc(100vh - 48px));
    padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto 1fr;border-radius:28px;overflow:auto;}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-merk{
    grid-column:1;grid-row:1;margin:0;padding:34px 56px 0;}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-merk img{height:30px;}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) #accInhoud{
    grid-column:1;grid-row:2;align-self:center;width:100%;max-width:470px;justify-self:center;
    box-sizing:border-box;padding:28px 56px 48px;}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) h2{
    font-size:40px;line-height:1.08;letter-spacing:-.025em;margin:0 0 12px;}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-uitleg{
    font-size:14px;line-height:1.55;color:var(--ink-3);margin:0 0 30px;}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-formulier{
    gap:20px;margin-bottom:22px;}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-veld label{
    font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.02em;}
  /* De velden: een onderstreping in plaats van een kader, met een pictogram links — zoals in de
     referentie. Focus kleurt de lijn in de primaire kleur, en de blauwe focusring van elders in
     de tool zit er als box-shadow onder, zodat toetsenbordgebruikers hem blijven zien. */
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-veld input{
    border:0;border-bottom:1.5px solid var(--line);border-radius:0;background-color:transparent;
    padding:11px 4px 11px 34px;font-size:15px;background-repeat:no-repeat;
    background-position:4px center;background-size:18px 18px;
    transition:border-color .15s ease, box-shadow .15s ease;}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-veld input:focus{
    outline:none;border-bottom-color:var(--primary);box-shadow:0 2px 0 0 var(--primary);}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-veld input[type="email"]{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A929E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-veld .bk-geheim input{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A929E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.8a4 4 0 0 1 8 0v2.7'/%3E%3C/svg%3E");}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-veld input[type="text"]:not(.bk-geheim input){
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A929E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");}
  /* De bedrijfsnaam is geen persoon: een gebouwtje in plaats van het poppetje van de tekstvelden. */
  #accScherm .start-veld input#accAanvraagBedrijf,
  #accScherm .start-veld input#accRegBedrijf{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A929E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5V5.5l8-2.5v17.5M12 8.5l8 2.5v9.5M3 20.5h18M7.5 8.5h1M7.5 12h1M7.5 15.5h1M15.5 13.5h1M15.5 17h1'/%3E%3C/svg%3E");}
  /* De hoofdknop als pil met een pijl in een cirkeltje, zoals in de referentie — in de eigen
     primaire kleur en met de eigen tekst. */
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-acties{
    align-items:center;gap:16px;}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-acties .uv-knop-primair{
    display:inline-flex;align-items:center;justify-content:space-between;gap:18px;
    min-width:210px;min-height:52px;padding:8px 8px 8px 28px;border-radius:999px;
    font-size:15px;font-weight:700;box-shadow:0 10px 22px rgba(2,26,48,.16);}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-acties .uv-knop-primair::after{
    content:'';flex:0 0 36px;width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;}
  /* "Terug naar aanmelden" staat rechtsboven, op de plek van "Already member? Sign in" in de
     referentie — dezelfde knop met dezelfde id en tekst, alleen anders geplaatst. */
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) #accNaarInloggen{
    position:absolute;top:36px;right:calc(50% + 56px);z-index:1;min-height:0;padding:3px 0;
    border:0;border-bottom:2px solid var(--accent-line);border-radius:0;background:none;
    color:var(--merk-blauw);font-size:13.5px;font-weight:600;cursor:pointer;}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) #accNaarInloggen:hover{
    border-bottom-color:var(--merk-blauw);}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .acc-links{
    justify-content:space-between;align-items:center;gap:10px 18px;margin-top:26px;}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .acc-links button{
    font-size:13px;font-weight:600;}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .acc-uitleg{
    font-size:13px;color:var(--ink-3);}

  /* Het beeldvlak rechts: vlakken en zwevende kaartjes in de huisstijlkleuren, zonder tekst. */
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .acc-beeld{
    display:block;grid-column:2;grid-row:1 / span 2;position:relative;overflow:hidden;
    min-height:100%;background:var(--merk-donker);}
  .acc-beeld-vlak{position:absolute;border-radius:48px;}
  .acc-beeld-vlak-1{width:120%;height:70%;left:-4%;top:-18%;transform:rotate(-9deg);
    background:var(--merk-blauw);}
  .acc-beeld-vlak-2{width:95%;height:70%;right:-30%;bottom:-22%;transform:rotate(-38deg);
    background:color-mix(in srgb, var(--merk-blauw) 62%, white);}
  .acc-beeld-vlak-3{width:42%;height:34%;left:-16%;bottom:-10%;transform:rotate(24deg);
    background:color-mix(in srgb, var(--merk-blauw) 45%, var(--merk-donker));}
  .acc-beeld-kaart{position:absolute;background:var(--surface);border-radius:24px;
    box-shadow:0 24px 50px rgba(2,26,48,.28);}
  .acc-beeld-kaart-grafiek{left:16%;top:17%;width:36%;min-width:150px;padding:24px 22px 18px;}
  .acc-beeld-kaart-sleutel{left:16%;right:12%;bottom:15%;padding:28px 30px;display:flex;
    align-items:center;justify-content:space-between;gap:20px;}
  .acc-beeld-regels{display:flex;flex-direction:column;gap:14px;flex:1 1 auto;max-width:150px;}
  .acc-beeld-regel{display:block;height:8px;width:80%;border-radius:8px;background:var(--line);}
  .acc-beeld-regel-lang{width:100%;}
  .acc-beeld-regel-kort{width:46%;}
  .acc-beeld-regel-oranje{background:var(--merk-oranje);margin-bottom:10px;}
  .acc-beeld-regel-blauw{background:var(--merk-blauw);height:9px;}
  .acc-beeld-kaart-grafiek .acc-beeld-regel-lang{height:14px;width:70%;background:var(--ink);opacity:.85;}
  .acc-beeld-lijn{display:block;width:100%;height:auto;margin-top:26px;overflow:visible;}
  .acc-lijn-oranje, .acc-lijn-blauw{fill:none;stroke-width:6;stroke-linecap:round;}
  .acc-lijn-oranje{stroke:var(--merk-oranje);}
  .acc-lijn-blauw{stroke:var(--merk-blauw);}
  .acc-lijn-punt{fill:var(--merk-donker);}
  .acc-beeld-sleutel{flex:0 0 58px;width:58px;height:58px;fill:none;stroke:var(--merk-oranje);
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  .acc-beeld-bol{position:absolute;width:66px;height:66px;border-radius:50%;background:var(--surface);
    display:flex;align-items:center;justify-content:center;box-shadow:0 16px 34px rgba(2,26,48,.25);}
  .acc-beeld-bol svg{width:28px;height:28px;fill:none;stroke-width:1.9;stroke-linecap:round;
    stroke-linejoin:round;}
  .acc-beeld-bol-1{right:22%;top:19%;}
  .acc-beeld-bol-1 svg{stroke:var(--merk-oranje);}
  .acc-beeld-bol-2{right:13%;top:37%;}
  .acc-beeld-bol-2 svg{stroke:var(--merk-blauw);}

  /* Tablet en telefoon: het beeldvlak valt weg en het formulier krijgt de hele breedte. */
  @media (max-width: 900px){
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-paneel{
      width:min(560px,100%);grid-template-columns:minmax(0,1fr);min-height:0;border-radius:24px;}
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .acc-beeld{display:none;}
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-merk{padding:28px 32px 0;}
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) #accInhoud{
      max-width:none;padding:24px 32px 36px;}
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) #accNaarInloggen{
      top:30px;right:32px;}
  }
  @media (max-width: 520px){
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar){padding:0;}
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-paneel{
      width:100%;height:100%;max-height:none;border-radius:0;box-shadow:none;}
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-merk{padding:22px 20px 0;}
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-merk img{height:26px;}
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) #accInhoud{
      align-self:start;padding:34px 20px 32px;}
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) h2{font-size:32px;}
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-acties{
      flex-direction:column;align-items:stretch;}
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-acties .uv-knop-primair{
      width:100%;}
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) #accNaarInloggen{
      top:24px;right:20px;font-size:13px;}
  }
  /* ACCOUNT AANVRAGEN (28 september 2026) — de keuzelijst "Aantal gebruikers" krijgt dezelfde
     onderstreping als de invoervelden hierboven; de chevron van `.start-veld select` (de
     huisstijlvorm van de <select>-regel) blijft staan, alleen de rand verandert. */
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-veld select{
    border:0;border-bottom:1.5px solid var(--line);border-radius:0;background-color:transparent;
    padding:11px 28px 11px 4px;font-size:15px;background-position:right 6px center;}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-veld select:hover{border-bottom-color:var(--accent-line);}
  .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-veld select:focus{
    outline:none;border-bottom-color:var(--primary);box-shadow:0 2px 0 0 var(--primary);}
  /* De honingpot: buiten beeld en niet `display:none` — dat laatste slaan bots juist over. */
  .acc-honingpot{position:absolute !important;left:-10000px !important;top:auto;width:1px !important;height:1px !important;
    overflow:hidden;opacity:0;pointer-events:none;}
  /* Tablet: 16 px in de velden, anders zoomt iOS bij het aantikken in (ronde 311/538). */
  @media (pointer: coarse){
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-veld input,
    .acc-scherm:has(#accInloggen, #accRegistreren, #accVergeten, #accNieuwWachtwoord, #accMfaCode, #accAanvragen, #accAanvraagKlaar) .start-veld select{
      font-size:16px;min-height:var(--raak);}
  }