/* ══════════════════════════════════════════════════════════════════
   INLOGPAGINA — technisch losstaand van css/main.css.

   Dit bestand hoort BEWUST bij de oorspronkelijke Paddls-merkstijl
   (crème #FEF9ED, Deep Navy #0E2C52, Accent Blauw #378ADD, Licht Blauw
   #B5D1E8, Satoshi/Chaney) en gebruikt daarom overal hardgecodeerde
   waarden i.p.v. de --bg/--card/--font/--font-display/--radius-tokens uit
   css/main.css. Die tokens zijn sinds 27-09-2026 de "Paddls Wit"-huisstijl
   van de ingelogde omgeving (zie CLAUDE.md, hoofdstuk "Huisstijl") en
   kunnen in de toekomst weer veranderen — de inlogpagina (interne app én
   klantportal, #ovLogin/#ovGeenToegang) moet daar dan NIET in meebewegen.

   Geladen ná css/main.css in zowel index.html als portal/index.html.
   Bevat twee soorten regels:
   1. Klassen die uitsluitend hier gebruikt worden (login-, ov-, li- en
      mfa-voorvoegsels, plus .err-msg/.btn-google) — volledig hier
      gedefinieerd, NERGENS meer in css/main.css.
   2. #ovLogin/#ovGeenToegang-scoped overrides voor klassen die element­air
      óók elders in de HUB voorkomen (.inp/.btn-full/.btn.btn-sm.btn-
      primary — bv. de POE-exportfilter en het feedbackformulier) zodat
      de basisregel in css/main.css vrij kan meebewegen met de HUB-stijl
      zonder de inlogpagina te raken. ══════════════════════════════════ */

/* background:#FEF9ED — .login-app-footer hieronder staat bewust BUITEN de
   flex-flow van .login-left/.login-right (position:absolute t.o.v. deze
   .overlay), dus in die strook heeft geen van beiden een eigen
   achtergrond. Zonder een eigen achtergrond hier schemerde op mobiel de
   onderliggende pagina (o.a. de floating feedback-knop uit js/16-feedback-
   widget.js, z-index:290, en lege "Laden..."-tabelplaceholders van tabs
   erachter) zichtbaar door die strook heen, ondanks .overlay's z-index:300
   — puur omdat er simpelweg niets ondoorzichtigs stond te tekenen op die
   pixels. Crème (i.p.v. transparant) sluit dat voorgoed uit, ongeacht wat
   er ooit nog achter deze pagina bijkomt. */
.overlay{position:fixed;inset:0;z-index:300;display:flex;background:#FEF9ED}
.overlay.hidden{display:none}

/* Aanvullend, voor toetsenbord/screenreader-navigatie: puur een
   ondoorzichtige achtergrond blokkeert clicks/paint, maar niet per se de
   tab-volgorde. De feedback-knop/het paneel expliciet verbergen zolang het
   inlogscherm niet .hidden is, sluit ook dat uit. */
#ovLogin:not(.hidden) ~ .fb-knop,
#ovLogin:not(.hidden) ~ .fb-overlay,
#ovLogin:not(.hidden) ~ .fb-paneel{display:none}

#ovLogin,#ovGeenToegang{font-family:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif}

.login-left{flex:1 1 50%;background:#FEF9ED;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1.5rem;overflow-y:auto}
.login-right{flex:1 1 50%;position:relative;background:#0E2C52;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:3rem}
/* Beeldmerk/ripple-element (gedeeld, o.a. portal/index.html): centrale
   waterdruppel (100% zichtbaar) omringd door exact twee rimpelingen in
   Accent Blauw op 37% opacity. */
.login-right::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;border:1.5px solid rgba(55,138,221,.37);top:50%;left:50%;transform:translate(-50%,-50%)}
.login-right::after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;border:1.5px solid rgba(55,138,221,.37);top:50%;left:50%;transform:translate(-50%,-50%)}
.login-ripple-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.login-ripple-dot img{width:100%;height:100%;object-fit:contain}
.login-right-inner{position:relative;z-index:1;text-align:center;max-width:420px}
.login-quote{font-family:'Chaney','Syne','Plus Jakarta Sans','Satoshi',system-ui,sans-serif;font-weight:700;text-transform:uppercase;color:#FEF9ED;font-size:28px;line-height:1.25;letter-spacing:.01em;margin-bottom:16px}
.login-quote-sub{font-family:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;color:rgba(255,255,255,.72);font-size:14px;line-height:1.6}
@media(max-width:900px){.login-right{display:none}.login-left{flex:1 1 100%}}
.login-form{width:100%;max-width:400px}
.ov-logo-wrap{text-align:center;margin-bottom:1.75rem;cursor:pointer}
.ov-logo-img{width:88px;height:88px;border-radius:50%;object-fit:contain;display:block;margin:0 auto 14px}
.ov-logo-ph{width:88px;height:88px;border-radius:50%;background:#B5D1E8;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:36px}
/* .ov-logo-ph.hidden i.p.v. te vertrouwen op de kale .hidden{display:none}
   (css/main.css) — dit bestand laadt ná main.css, dus bij gelijke
   specificiteit (1 klasse) zou .ov-logo-ph's eigen display:flex win nen van
   .hidden. Zelfde patroon als .tag-dropdown.hidden/.modal-bg.hidden in
   css/main.css. Zonder deze regel bleef de placeholder-cirkel zichtbaar
   NAAST het echte logo zodra applyLogo() (js/03-settings-theme-nav.js) 'm
   probeerde te verbergen. */
.ov-logo-ph.hidden{display:none}
.ov-title{font-family:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:26px;font-weight:700;color:#0E2C52;text-align:center;margin-bottom:5px;letter-spacing:-.3px}
.ov-sub{font-size:13px;color:#5F7391;text-align:center;margin-bottom:1.75rem}
/* Profielfoto van de laatst ingelogde gebruiker op dit apparaat, getoond
   i.p.v. het bedrijfslogo (zie liToonLaatsteGebruiker() in js/01-auth-boot.js)
   — cover i.p.v. contain zodat een portretfoto de cirkel vult i.p.v. te
   passen-met-witruimte zoals een logo, plus een dun randje ter afbakening. */
.ov-logo-avatar{border-radius:50%;object-fit:cover;border:2px solid #B5D1E8}
/* ── Interne-app-inlogscherm (index.html), scherper op de Paddls Stylescape —
   scoped onder .login-app (alleen op #ovLogin in index.html, NIET op de
   klantportal-login in portal/index.html: die deelt dezelfde .overlay/
   .login-right/.ov-logo-wrap-classnamen/CSS, maar krijgt bewust geen van
   deze wijzigingen mee, blijft dus exact zoals-ie was). ── */
.login-app .login-right::before,.login-app .login-right::after{display:none}
.login-app .ov-logo-wrap{padding:18px 12px}
.login-app .ov-wordmark{font-family:'Chaney','Syne','Plus Jakarta Sans','Satoshi',system-ui,sans-serif;font-weight:800;text-transform:uppercase;color:#0E2C52;font-size:22px;letter-spacing:.03em;text-align:center}
/* Echte merkpatroon (paddls-icon.svg, organisch gevuld vlak — geen dunne
   lijnen) fors uitvergroot en schuin vanuit de rechteronderhoek geplaatst
   i.p.v. dood gecentreerd achter de tekst. De SVG bevat zelf al de exacte
   stylescape-waarden (rimpelingen #378ADD/37% opacity, druppel 100%). */
.login-app .login-ripple-bg{position:absolute;width:680px;height:680px;bottom:-190px;right:-170px;pointer-events:none}
.login-app .login-ripple-bg img{width:100%;height:100%;object-fit:contain}
.login-app .login-mobile-brand{display:none}
.login-app .login-quote{font-weight:800;line-height:1.08}
@media(max-width:768px){
  .login-app.overlay{flex-direction:column;overflow-y:auto}
  .login-app .login-left{order:2;flex:1 1 auto;padding:20px 16px;justify-content:center}
  .login-app .login-right{display:flex;order:1;flex:0 0 auto;width:100%;padding:1.1rem 1rem;min-height:0}
  .login-app .login-ripple-bg{width:280px;height:280px;bottom:-110px;right:-70px}
  .login-app .login-mobile-brand{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;z-index:1}
  .login-app .login-mobile-brand img{width:30px;height:30px;flex-shrink:0}
  .login-app .login-mobile-brand span{font-family:'Chaney','Syne','Plus Jakarta Sans','Satoshi',system-ui,sans-serif;font-weight:800;text-transform:uppercase;color:#FEF9ED;font-size:18px;letter-spacing:.03em}
  .login-app .login-right-inner{display:none}
  .login-app .ov-logo-wrap{display:none}
  /* Uitzondering: staat er een bekende profielfoto (liToonLaatsteGebruiker(),
     js/01-auth-boot.js), dan toch tonen — klein en rond, direct boven
     "Welkom terug". Het wordmerk blijft verborgen: de navy-headerbalk
     hierboven zegt al "Paddls", dat hoeft hier niet nogmaals. */
  .login-app .ov-logo-wrap.ov-mobile-avatar{display:block;margin-bottom:1rem}
  .login-app .ov-logo-wrap.ov-mobile-avatar .ov-wordmark{display:none}
}
.li-field{position:relative;margin-bottom:14px}
.li-field .li-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9FABBA;display:flex;pointer-events:none}
.li-field .inp{padding-left:42px}
.li-field .li-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;padding:6px;cursor:pointer;color:#9FABBA;display:flex;border-radius:8px;transition:color .15s}
.li-field .li-toggle:hover{color:#0E2C52}
.li-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:li-spin .7s linear infinite;flex-shrink:0}
@keyframes li-spin{to{transform:rotate(360deg)}}
/* Scheiding tussen wachtwoord-login en Google-login (doGoogleLogin(),
 js/01-auth-boot.js) — twee gelijkwaardige inlogmethodes, geen "of anders". */
.li-divider{display:flex;align-items:center;gap:10px;margin:16px 0;font-size:11px;font-weight:700;color:#9FABBA;text-transform:uppercase;letter-spacing:.5px}
.li-divider::before,.li-divider::after{content:'';flex:1;height:1px;background:#DBDFE5}
.btn-google{background:#fff;color:#0E2C52;border:1.5px solid #DBDFE5;margin-top:2px}
.btn-google:hover:not(:disabled){background:#FEF9ED;transform:translateY(-1px);box-shadow:0 6px 16px rgba(14,44,82,.12)}
.li-spinner-dark{border-color:rgba(14,44,82,.25);border-top-color:#0E2C52}
.login-fp{text-align:right;margin:-6px 0 14px}
.login-fp a{font-size:12px;color:#378ADD;cursor:pointer;font-weight:600}
.li-remember-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-6px 0 14px}
.li-remember-lbl{display:flex;align-items:center;gap:6px;font-size:12px;color:#566B85;font-weight:500;cursor:pointer;user-select:none}
.li-remember-lbl input{width:14px;height:14px;cursor:pointer;accent-color:#0E2C52}
.li-remember-row a{font-size:12px;color:#378ADD;cursor:pointer;font-weight:600}
/* Onder de volledige inlogkaart (#ovLogin), position:absolute t.o.v. het
   .overlay-element zelf (dat al position:fixed heeft) — zit dus buiten de
   flex-flow van .login-left/.login-right en raakt hun bestaande layout-/
   mobiele order-regels niet. */
.login-app-footer{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:12px 16px;font-size:11.5px;color:#5F7391;text-align:center;pointer-events:none}
.login-app-footer a,.login-app-footer span{pointer-events:auto}
.login-app-footer a{color:#378ADD;font-weight:600;cursor:pointer;text-decoration:none}
.login-app-footer a:hover{text-decoration:underline}
.login-app-footer-dot{color:#5F7391}
@media(max-width:768px){.login-app-footer{position:static;order:3;padding:10px 12px 16px}}
.mfa-qr-wrap{display:flex;justify-content:center;margin-bottom:14px}
.mfa-qr-wrap img{width:170px;height:170px;border:1px solid #DBDFE5;border-radius:12px;padding:8px;background:#fff}
.mfa-secret{font-family:monospace;font-size:12px;letter-spacing:.03em;text-align:center;color:#566B85;background:#F1F2F5;border-radius:8px;padding:8px 10px;margin-bottom:14px;word-break:break-all;user-select:all}
.err-msg{display:none;align-items:flex-start;gap:8px;font-size:12px;color:#b91c1c;background:#fef2f2;border:1px solid #fca5a5;border-radius:10px;padding:10px 12px;margin-top:12px}
.err-msg.show{display:flex}
.err-msg .li-icon{flex-shrink:0;color:#b91c1c;margin-top:1px}
.err-msg.info{color:#2A6FB8;background:#D6E6F5;border-color:#c5d0ee}
.err-msg.info .li-icon{color:#2A6FB8}
.ov-footer{font-size:11px;color:#5F7391;text-align:center;margin-top:1.5rem}

/* ── Gedeelde HUB-klassen, hier vastgezet op de oude merkstijl ──
   .inp/.btn-full/.btn.btn-sm.btn-primary bestaan ook buiten de inlogpagina
   (o.a. de POE-exportfilter en het feedbackformulier in de ingelogde HUB)
   — hun basisregel in css/main.css volgt daar de actuele HUB-huisstijl.
   Deze #ovLogin/#ovGeenToegang-scoped versies winnen op specificiteit en
   houden alléén de inlogpagina op de vaste, oorspronkelijke look, ongeacht
   wat er later in css/main.css met --bg/--font/--radius gebeurt. ── */
#ovLogin .inp,#ovGeenToegang .inp{width:100%;border:1.5px solid #DBDFE5;border-radius:12px;background:#fff;color:#0E2C52;font-family:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;padding:12px 14px;outline:none;transition:all .15s}
#ovLogin .inp:focus,#ovGeenToegang .inp:focus{border-color:#378ADD;box-shadow:0 0 0 2px rgba(55,138,221,.35)}
#ovLogin .btn-full,#ovGeenToegang .btn-full{width:100%;padding:13px;font-size:15px;font-weight:700;border-radius:12px;cursor:pointer;border:none;background:#378ADD;color:#fff;transition:all .2s;font-family:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;display:flex;align-items:center;justify-content:center;gap:9px}
#ovLogin .btn-full:hover:not(:disabled),#ovGeenToegang .btn-full:hover:not(:disabled){background:#2b76c2;transform:translateY(-1px);box-shadow:0 8px 20px rgba(55,138,221,.4)}
#ovLogin .btn-full:disabled,#ovGeenToegang .btn-full:disabled{opacity:.7;cursor:not-allowed}
#ovLogin .btn.btn-sm.btn-primary,#ovGeenToegang .btn.btn-sm.btn-primary{font-family:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;background:#FFFDF7}
@media(max-width:768px){
  .login-app .inp{font-size:16px}
  .login-app .btn-full{min-height:48px}
}