:root {
    color-scheme: light;
    font-family: Arial, Helvetica, sans-serif;
    color: #17345a;
    background: #edf4fa;
}

* { box-sizing: border-box; }

body { margin: 0; }

.login-page {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    /* Originele goedgekeurde mockup; uitsluitend decoratie, geen bedienbare UI. */
    background: var(--login-background, linear-gradient(rgb(237 244 250 / 32%), rgb(237 244 250 / 32%)),
        url('../images/plattegrond-voorbeeld.png') center / cover no-repeat);
}

.login-window {
    width: min(100%, 420px);
    padding: 32px;
    background: #fff;
    border: 1px solid #d5e1ee;
    border-radius: 14px;
    box-shadow: 0 12px 44px rgb(23 52 90 / 22%);
}

.login-window:focus-visible {
    outline: 3px solid #175bb2;
    outline-offset: 4px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(17px, 4.5vw, 22px);
    font-weight: 700;
    letter-spacing: -0.5px;
}

.brand img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }

h1 { margin: 28px 0 8px; font-size: 26px; }
.intro { margin: 0 0 24px; color: #4c6078; font-size: 15px; line-height: 1.5; }
.login-fields { display: grid; gap: 8px; }
label { font-size: 14px; font-weight: 700; }
input, button { min-height: 46px; width: 100%; font: inherit; border-radius: 6px; }
input { padding: 10px 12px; border: 1px solid #a6b6c8; background: #f3f6fa; margin-bottom: 12px; }
button { margin-top: 4px; padding: 12px; border: 0; background: #235a99; color: #fff; font-weight: 700; }
input:disabled, button:disabled { opacity: 1; cursor: not-allowed; }
.login-status { margin: 20px 0 0; font-size: 14px; line-height: 1.5; color: #4c6078; }

.mobile-notice {
    display: var(--mobile-notice-display, none);
    margin: 0 0 24px;
    padding: 16px;
    border-left: 3px solid #235a99;
    border-radius: 6px;
    background: #edf4fa;
}
.mobile-notice h2 { margin: 0 0 8px; font-size: 16px; line-height: 1.5; }
.mobile-notice p { margin: 0; font-size: 14px; line-height: 1.6; }

/* UI-009: zelfstandige rustige achtergrond, ook bij expliciete tabletkeuze.
   Dit selecteert alleen de presentatie; er is nog geen mobiele raadpleegmodus. */
.mobile-view {
    --login-background: linear-gradient(160deg, #f4f8fc, #e3edf6);
    --mobile-notice-display: block;
}
@media (max-width: 1023px) {
    :root {
        --login-background: linear-gradient(160deg, #f4f8fc, #e3edf6);
        --mobile-notice-display: block;
    }
}

@media (max-width: 420px) {
    .login-window { padding: 24px; }
}