/* ============================================================
   2FACT.CLOUD - login styling
   Huisstijl: 2FACT Teal #23B5B5, Charcoal #2F2F2F,
              Deep Teal #127C7C, Mist #F5F7F8, Steel Grey #A9B3B8
   ============================================================ */

:root{
  --teal:#23B5B5;           /* 2FACT Teal - accent              */
  --teal-deep:#127C7C;      /* Deep Teal - hover / sterke accent */
  --teal-darker:#0E6363;    /* nog donkerder, voor active        */
  --charcoal:#2F2F2F;       /* Charcoal - hoofdtoon              */
  --ink:#2F2F2F;            /* hoofdtekst                        */
  --muted:#A9B3B8;          /* Steel Grey - secundaire tekst     */
  --muted-strong:#6E7A80;   /* iets donkerder voor leesbaarheid  */
  --card:#FFFFFF;
  --mist:#F5F7F8;
  --field-bg:#F5F7F8;       /* Mist                              */
  --field-bg-focus:#FFFFFF;
  --border:#E2E8EB;
  --border-focus:#127C7C;
  --ring:rgba(35,181,181,.28);   /* teal glow                   */
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(15,40,40,.05),
           0 12px 28px -8px rgba(15,40,40,.22),
           0 40px 70px -30px rgba(15,40,40,.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:#0d2e2e;
}

/* 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(35,181,181,.35), transparent 60%),
    radial-gradient(900px 700px at 110% 110%, rgba(18,124,124,.55), transparent 55%),
    radial-gradient(700px 500px at 85% 8%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(135deg,#16555a 0%,#103f44 50%,#0a2a2d 100%);
}
.auth-bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.06;
  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:.16em;
  font-size:13px;
  text-transform:uppercase;
  margin-bottom:18px;
  opacity:.95;
}
.brand-wordmark b{font-weight:800;color:var(--teal)}

.auth-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:38px 34px 34px;
  border:1px solid rgba(255,255,255,.6);
}
.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-strong)}
.auth-sub a{color:var(--teal-deep);text-decoration:none;font-weight:600}
.auth-sub a:hover{text-decoration:underline;text-underline-offset:3px}

.auth-alert{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--mist);border:1px solid var(--border);color:var(--ink);
  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(--teal-deep)}

.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:var(--muted)}
.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(--teal-deep)}

.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(--teal-deep);background:var(--mist)}
.toggle-pw .eye-off{display:none}
.toggle-pw.is-visible .eye{display:none}
.toggle-pw.is-visible .eye-off{display:block}

/* Deep teal -> 2FACT teal gradient knop, witte tekst voor WCAG AA-contrast */
.btn-login{
  width:100%;height:52px;margin-top:8px;border:0;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--teal) 0%,var(--teal-deep) 100%);
  color:#ffffff;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 8px 18px -6px rgba(18,124,124,.55),
             inset 0 -2px 0 rgba(0,0,0,.08);
  transition:transform .15s ease,box-shadow .18s ease,filter .18s ease;
}
.btn-login:hover{
  filter:brightness(1.05);
  transform:translateY(-2px);
  box-shadow:0 14px 26px -8px rgba(18,124,124,.6),
             inset 0 -2px 0 rgba(0,0,0,.1);
}
.btn-login:active{transform:translateY(0);box-shadow:0 6px 14px -6px rgba(18,124,124,.55)}
.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(245,247,248,.65);letter-spacing:.04em}
.auth-foot a{color:rgba(245,247,248,.85);text-decoration:none}
.auth-foot a:hover{color:var(--teal)}

.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}}