/* ============================ LOGIN SCHERM ============================ */
.login-screen{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  background:linear-gradient(155deg,#0f172a 0%,#1e293b 55%,#334155 100%);
}
.login-screen.show{ display:flex; }
/* zolang het loginscherm actief is: geen scroll/interactie met de app eronder */
body.locked{ overflow:hidden; }

.login-card{
  width:100%; max-width:360px;
  background:#fff; border-radius:16px;
  padding:32px 30px 30px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
}
.login-brand{
  display:flex; align-items:center; gap:9px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; color:var(--ink,#0f172a);
}
.login-brand .knot{
  width:30px; height:30px; border-radius:8px;
  background:#0f172a; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:15px;
}
.login-eyebrow{
  margin-top:14px; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted,#64748b); font-weight:600;
}
.login-title{
  font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:600;
  margin:2px 0 22px; color:var(--ink,#0f172a);
}
.login-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.login-field label{ font-size:12px; font-weight:500; color:var(--muted,#64748b); }
.login-card .inp{
  width:100%; box-sizing:border-box;
  padding:11px 13px; border:1px solid #d7dde5; border-radius:9px;
  font-size:14px; font-family:'Inter',sans-serif; color:var(--ink,#0f172a);
  outline:none; transition:border-color .15s,box-shadow .15s;
}
.login-card .inp:focus{ border-color:#0f172a; box-shadow:0 0 0 3px rgba(15,23,42,.12); }
.login-err{
  min-height:18px; margin:2px 0 12px;
  font-size:12.5px; color:#dc2626; font-weight:500;
}
.login-btn{
  width:100%; justify-content:center;
  padding:12px; font-size:14px; font-weight:600;
}
.login-btn:disabled{ opacity:.6; cursor:default; }

/* de gebruiker-chip in de topbar wordt een uitlog-knop */
.topbar .user{ cursor:pointer; }