/* De Graafschap login experience: use the same blue family as the sidebar. */
html, body { min-height: 100%; margin: 0; background: #005cad !important; }
.login-page, .login-page *, .login-page *::before, .login-page *::after { box-sizing: border-box; }
.login-page { --login-viewport-height: 100dvh; position: relative; display: flex; align-items: center; justify-content: center; min-height: var(--login-viewport-height, 100vh); width: 100%; padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); isolation: isolate; overflow: hidden; background: radial-gradient(circle at 18% 12%, rgb(106 194 246 / .34), transparent 31%), radial-gradient(circle at 88% 91%, rgb(0 36 106 / .34), transparent 34%), linear-gradient(155deg, #0870c6 0%, #0057a8 52%, #00417f 100%); font-family: var(--app-font-family); }
.login-background-image { display: none; position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }

.login-card { position: relative; width: min(100%, 424px); padding: 32px; border: 1px solid rgb(255 255 255 / .7); border-radius: 20px; background: rgb(255 255 255 / .97); box-shadow: 0 28px 70px rgb(0 39 84 / .32), 0 8px 24px rgb(0 32 72 / .16); }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 33px; }
.login-brand > a { flex-shrink: 0; border-radius: 8px; }
.login-logo { display: block; width: auto; height: 62px; max-width: 62px; object-fit: contain; }
.login-brand-name { margin: 0; color: var(--app-text); font-size: 16px; font-weight: 700; letter-spacing: .08em; line-height: 1.15; text-transform: uppercase; }
.login-kicker { margin: 2px 0 0; color: var(--app-text-muted); font-size: 14px; letter-spacing: .12em; line-height: 1.15; text-transform: uppercase; }
.login-header { margin-bottom: 27px; }
.login-title { position: relative; padding-left: 14px; margin: 0; color: var(--app-text); font-size: 29px; font-weight: 650; letter-spacing: -.8px; line-height: 1.25; }
.login-title::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 2px; background: #0093d0; box-shadow: 0 0 0 1px rgb(0 147 208 / .08); }
.login-subtitle { color: var(--app-text-muted); margin: 12px 0 0; font-size: 14px; line-height: 1.65; }
.login-form { display: grid; gap: 17px; }
.login-label { display: block; color: var(--app-text-muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 7px; }
.login-input-wrap { position: relative; }
.login-input-wrap > svg { position: absolute; left: 14px; top: 16px; width: 17px; height: 17px; fill: none; stroke: var(--app-text-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.login-page .login-input { appearance: none; display: block; width: 100%; min-height: 50px; margin: 0; padding: 12px 14px; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-surface); color: var(--app-text); font: inherit; font-size: 16px; line-height: 24px; outline: 0; transition: border-color .18s, box-shadow .18s; }
.login-page .login-input-wrap .login-input { padding-left: 42px; }
.login-page .login-input:hover { border-color: #69aee0; }
.login-page .login-input:focus { border-color: #0078bd; box-shadow: 0 0 0 3px rgb(0 120 189 / .14); }
.login-page .login-input[readonly] { color: var(--app-text-muted); }
.login-page .login-input:-webkit-autofill { -webkit-text-fill-color: var(--app-text); box-shadow: 0 0 0 1000px #ffffff inset; caret-color: var(--app-text); }
.login-primary-button, .login-secondary-button, .login-oidc-link { display: block; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--app-border); border-radius: 10px; color: var(--app-text); font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; }
.login-primary-button { color: #fff; margin-top: 5px; background: linear-gradient(135deg, #0870c6 0%, #0057a8 100%); border-color: #0057a8; box-shadow: 0 7px 16px rgb(0 87 168 / .23); }
.login-primary-button:hover { background: linear-gradient(135deg, #1290da 0%, #0065bc 100%); border-color: #0065bc; box-shadow: 0 9px 20px rgb(0 87 168 / .3); }
.login-primary-button:disabled { opacity: .6; cursor: wait; }
.login-secondary-button, .login-oidc-link { background: rgb(255 255 255 / .025); border-color: var(--app-border); }
.login-secondary-button:hover, .login-oidc-link:hover { background: var(--app-surface-raised); border-color: #737373; }
.login-forgot { text-align: right; margin-top: -3px; }
.login-forgot button { padding: 0; border: 0; background: none; color: #0067ae; font-size: 12px; cursor: pointer; }
.login-forgot button:hover { color: #004b8d; }
.login-reset-panel { padding: 16px; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface-raised); }
.login-reset-button, .login-reset-message { margin-top: 12px; }
.login-error, .login-success { font-size: 14px; line-height: 1.55; }
.login-error { color: #004b8d; }
.login-success { color: #15803d; }
.login-divider { display: flex; align-items: center; gap: 12px; color: var(--app-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--app-border); }
.login-page .hidden { display: none !important; }
@media (max-width: 520px) {
    .login-page { padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
    .login-card { padding: 26px 22px; border-radius: 17px; }
    .login-brand { margin-bottom: 28px; }
    .login-background-image { object-position: 42% center; }
}
@media (max-height: 600px) { .login-page { align-items: flex-start; padding-top: 24px; padding-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .login-page * { transition: none !important; } }