/* Inlog- en wachtwoordschermen (admin én portaal) — Ontwerp G.
   Geladen ná ontwerp-g.css; de pagina's zelf zijn inline HTML in
   lib/auth.py en lib/collega_auth.py en gebruiken deze klassen. */

body.auth{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;color:var(--ink);
  background:radial-gradient(90% 70% at 15% 10%,rgba(26,99,196,.45),transparent 60%),
             radial-gradient(60% 50% at 90% 100%,rgba(209,165,44,.12),transparent 70%),
             linear-gradient(170deg,#0B2A5C,var(--g-nacht))}
body.auth *{box-sizing:border-box}
.auth .card{width:100%;max-width:420px;background:#fff;color:var(--g-tekst);border-radius:24px;padding:36px 34px 28px;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.55);border:0;border-top:0}
.auth .merk{margin-bottom:26px}
.auth .merk-oud{max-width:220px}
.auth .wmg{font-size:34px}
.auth h1{font-family:var(--f-kop);font-size:28px;font-weight:750;letter-spacing:-.045em;margin:0 0 6px;color:var(--g-tekst)}
.auth h1::after{content:"";display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--g-goud);margin-left:.06em}
.auth .sub{color:var(--g-zacht);font-size:14px;margin:0 0 22px;line-height:1.5}
.auth label{display:block;margin:16px 0 6px;font-family:var(--f-label);font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--g-zacht)}
.auth input[type=email],.auth input[type=password],.auth input[type=text]{width:100%;height:48px;padding:0 15px;border:0;border-radius:12px;
  box-shadow:inset 0 0 0 1.5px var(--g-rand);background:#fff;font:inherit;font-size:15px;color:var(--g-tekst);transition:box-shadow .15s}
.auth input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--g-blauw)}
.auth .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;margin-top:22px;padding:0 20px;border:0;border-radius:999px;
  background:var(--g-blauw);color:#fff;font:inherit;font-size:15px;font-weight:650;cursor:pointer;box-shadow:0 12px 28px -12px rgba(12,77,162,.75);transition:background .2s,transform .2s}
.auth .btn:hover{background:var(--g-blauw-diep);transform:translateY(-1px)}
.auth .btn:active{transform:none}
.auth .btn-pk{margin-top:0;background:#fff;color:var(--g-tekst);box-shadow:inset 0 0 0 1.5px var(--g-rand)}
.auth .btn-pk:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--g-tekst)}
.auth .math{font-family:var(--f-kop);font-size:15px;font-weight:700;color:var(--g-blauw);letter-spacing:0;text-transform:none;padding:0}
.auth .error,.auth .err,.auth .msg{padding:11px 14px;border-radius:12px;font-size:13.5px;margin:0 0 14px;border:0;background:#FCE8E6;color:#9E281F}
.auth .msg.ok,.auth .ok{background:#E4F6EA;color:#1B6B3C}
.auth .logout-banner{background:var(--g-goud-licht)!important;color:#6F4E0E!important;border:0!important;border-radius:12px!important}
.auth .sep{display:flex;align-items:center;gap:12px;margin:20px 0 12px;color:var(--g-zacht);font-size:12px}
.auth .sep::before,.auth .sep::after{content:"";flex:1;height:1px;background:var(--g-rand);position:static;width:auto}
.auth .lnk{display:block;text-align:center;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--g-blauw);text-decoration:none}
.auth .lnk:hover{text-decoration:underline}
.auth .legal{text-align:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--g-rand);font-size:11.5px;color:var(--g-zacht)}
.auth .legal a{color:inherit}
/* reCAPTCHA-badge: de tekst in .legal noemt het al */
.grecaptcha-badge{visibility:hidden}
@media (max-width:480px){
  body.auth{padding:14px;align-items:start;padding-top:8vh}
  .auth .card{padding:28px 22px 22px;border-radius:20px}
}