/* ════════════════════════════════════════════════════════════
   css/login.css: the login screen (client/login.html), with the design document under it. Its own small
   file, because the screen may load nothing of the app (server/auth.mjs, PUBLIC_FILES). The logo of the
   app in the middle, without the stripes of the splash of Atreides Assets (gebruiker, 04-11-2026).
   ════════════════════════════════════════════════════════════ */
body { margin: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-base); }
.login-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; box-sizing: border-box; }
.login-card { width: min(100%, 22rem); display: flex; flex-direction: column; align-items: stretch; gap: 1rem; padding: 2rem 1.75rem; box-sizing: border-box; }
.login-logo { width: 88px; height: 88px; margin: 0 auto; border-radius: 18px; background: url("../img/logo.png") center / cover no-repeat; }
.login-title { margin: 0; text-align: center; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; }
.login-form { display: flex; flex-direction: column; gap: 0.9rem; }
.login-form .form-group { margin: 0; }
.login-form .input { width: 100%; box-sizing: border-box; }
.login-submit { width: 100%; margin-top: 0.3rem; }
.login-error { margin: 0; min-height: 1.2em; }