/* ============================================================
   IT Studio - login styling
   Huisstijl: Charcoal #1F1F1F, Slate #6B6F72, Light Gray #E6E6E6,
              Lime #CBD96A, White #FFFFFF
   ============================================================ */

:root{
  --brand:#1F1F1F;          /* Charcoal - hoofdtoon              */
  --brand-soft:#2a2a2a;     /* iets lichter charcoal             */
  --accent:#CBD96A;         /* Lime - accent / call-to-action    */
  --accent-strong:#B8C557;  /* lime, lichtjes donkerder voor hover*/
  --ink:#1F1F1F;            /* hoofdtekst                        */
  --muted:#6B6F72;          /* Slate - secundaire tekst          */
  --card:#FFFFFF;
  --field-bg:#F5F5F5;
  --field-bg-focus:#FFFFFF;
  --border:#E6E6E6;         /* Light Gray                        */
  --border-focus:#1F1F1F;
  --ring:rgba(203,217,106,.35);  /* lime glow                    */
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(0,0,0,.05),
           0 12px 28px -8px rgba(0,0,0,.22),
           0 40px 70px -30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  min-height:100vh;
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 18px;
  position:relative;
  overflow:hidden;
  background:#141414;
}

/* Achtergrond ACHTER alles (z-index:-1) zodat ze nooit de kaart afdekt,
   ook al draagt het door Domino gegenereerde <form> geen eigen class. */
.auth-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(203,217,106,.18), transparent 60%),
    radial-gradient(900px 700px at 110% 110%, rgba(31,31,31,.95), transparent 55%),
    radial-gradient(700px 500px at 85% 8%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(135deg,#2a2a2a 0%,#1f1f1f 55%,#0f0f0f 100%);
}
.auth-bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

form[name="_DominoForm"]{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
}
.auth{
  position:relative;
  z-index:1;
  width:100%;
  animation:rise .6s cubic-bezier(.22,.61,.36,1) both;
}

.brand-wordmark{
  text-align:center;
  color:#ffffff;
  font-weight:700;
  letter-spacing:.18em;
  font-size:13px;
  text-transform:uppercase;
  margin-bottom:18px;
  opacity:.92;
}
.brand-wordmark b{font-weight:800;color:var(--accent)}

.auth-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:38px 34px 34px;
  border:1px solid rgba(255,255,255,.08);
}
.auth-logo{display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.auth-logo img{max-height:54px;width:auto;display:block}
.auth-title{margin:0 0 6px;text-align:center;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.auth-sub{margin:0 0 22px;text-align:center;font-size:14px;line-height:1.5;color:var(--muted)}
.auth-sub a{color:var(--ink);text-decoration:none;font-weight:600;border-bottom:2px solid var(--accent)}
.auth-sub a:hover{background:var(--accent)}

.auth-alert{
  display:flex;gap:11px;align-items:flex-start;
  
  background:#fff8ea;border:1px solid #f4e2bd;color:#7a5b14;
  border-radius:var(--radius-sm);padding:12px 14px;
  font-size:13px;line-height:1.45;margin-bottom:22px;
}
.auth-alert svg{flex:0 0 auto;margin-top:1px;color:var(--muted)}

.field{position:relative;margin-bottom:14px}
.field .ico{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;transition:color .18s ease;
}
.field input{
  width:100%;height:52px;padding:0 46px 0 46px;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:var(--field-bg);color:var(--ink);
  font-size:15px;font-family:inherit;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
  outline:none;
}
.field input::placeholder{color:#9a9a9a}
.field input:focus{
  border-color:var(--border-focus);background:var(--field-bg-focus);
  box-shadow:0 0 0 4px var(--ring);
}
.field input:focus ~ .ico{color:var(--brand)}

.toggle-pw{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--muted);
  border-radius:8px;cursor:pointer;transition:color .15s ease,background .15s ease;
}
.toggle-pw:hover{color:var(--brand);background:var(--field-bg)}
.toggle-pw .eye-off{display:none}
.toggle-pw.is-visible .eye{display:none}
.toggle-pw.is-visible .eye-off{display:block}

/* Lime-knop met charcoal tekst - contrast ratio ~11.6:1 (WCAG AAA) */
.btn-login{
  width:100%;height:52px;margin-top:8px;border:0;
  border-radius:var(--radius-sm);
  background:var(--accent);
  color:var(--ink);
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 8px 18px -6px rgba(203,217,106,.45),
             inset 0 -2px 0 rgba(0,0,0,.06);
  transition:transform .15s ease,box-shadow .18s ease,background .18s ease;
}
.btn-login:hover{
  background:var(--accent-strong);
  transform:translateY(-2px);
  box-shadow:0 14px 26px -8px rgba(203,217,106,.55),
             inset 0 -2px 0 rgba(0,0,0,.08);
}
.btn-login:active{transform:translateY(0);box-shadow:0 6px 14px -6px rgba(203,217,106,.45)}
.btn-login:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

.auth-foot{margin-top:20px;text-align:center;font-size:12px;color:rgba(255,255,255,.55);letter-spacing:.04em}
.auth-foot a{color:rgba(255,255,255,.8);text-decoration:none}
.auth-foot a:hover{color:var(--accent)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:420px){.auth-card{padding:30px 22px 26px}}