/* Aanmeldscherm — dezelfde sfeer als het Odoo-startscherm: gebroken wit met
   papierkorrel, het cadeaudoosje-merk groot in beeld, verder niets dat afleidt. */
:root{
  --mint:#81C8A2; --petrol:#002F34; --houtskool:#222A2E;
  --lijn:#dcdad6; --rood:#b4483f; --grijs:#6b7378;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--houtskool);
  background:#F1F0ED url("/static/achtergrond.jpg") center/cover no-repeat fixed;
}
/* Iets boven het midden: dat leest rustiger dan pal in het midden, en op een
   laptopscherm staat het geheel dan mooi in beeld. */
main{min-height:100%;display:flex;flex-direction:column;align-items:center;
     justify-content:center;gap:1.4rem;padding:2rem 1rem 14vh}

/* De logo-animatie bouwt op van het cadeaudoosje tot het volledige merk, speelt
   één keer af en blijft op het eindbeeld staan — zoals op het Odoo-startscherm. */
.logo{width:min(420px, 78vw);height:auto;display:block}

.kaart{
  width:100%;max-width:380px;text-align:center;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:18px;
  padding:1.8rem 2rem 1.6rem;
  box-shadow:0 24px 60px rgba(0,47,52,.13), 0 2px 6px rgba(0,47,52,.05);
  animation:opkomen .5s ease-out both;
}
@keyframes opkomen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

form{display:flex;flex-direction:column;gap:.9rem;text-align:left}
label{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;
      color:var(--grijs);font-weight:600;letter-spacing:.02em}
input{
  font:inherit;color:var(--houtskool);
  border:1px solid var(--lijn);border-radius:9px;
  padding:.62rem .7rem;background:#fff;transition:border-color .15s, box-shadow .15s;
}
input:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(129,200,162,.28)}

button{
  font:inherit;font-weight:600;cursor:pointer;margin-top:.4rem;
  border:none;border-radius:9px;padding:.7rem;
  background:var(--petrol);color:#fff;transition:transform .1s, opacity .15s;
}
button:hover:not(:disabled){transform:translateY(-1px)}
button:disabled{opacity:.6;cursor:default}

.fout{margin:0;color:var(--rood);font-size:.87rem;background:#fbeceb;
      border:1px solid rgba(180,72,63,.3);border-radius:8px;padding:.5rem .65rem}

.voet{margin:1.6rem 0 0;font-size:.78rem;color:var(--grijs);line-height:1.45}

/* Aanmelden met Microsoft: de gewone weg zodra het op de server draait. */
.microsoft {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; padding: .72rem 1rem; margin-bottom: .2rem;
  border: 1px solid #d3d3d3; border-radius: 10px; background: #fff;
  color: #1b1b1b; font: inherit; font-weight: 500; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.microsoft:hover { border-color: #9a9a9a; box-shadow: 0 1px 5px rgba(0,0,0,.09) }
.of { display: flex; align-items: center; gap: .7rem; margin: 1.1rem 0 .9rem;
      color: #8a8f92; font-size: .78rem }
.of::before, .of::after { content: ""; flex: 1; height: 1px; background: #e0dedb }