/*
 * Inlogscherm van IVECO Schouten (projectstandaard, "Inlogscherm"). Sjabloon uit
 * ~/projectdocumentatie/sjablonen/inloggen/; in elk project hetzelfde, niet per project aanpassen.
 * Het lettertype: Open Sans (variabel, 300-800), SIL Open Font License, zie OFL.txt.
 *
 * Opmaak van Demokalender, in de huisstijl van de stijlkaart: Open Sans, #1554FF en #040505.
 * De foto en het logo komen van de website (projectstandaard, "Huisstijl"): de HTML zet de
 * foto als <img>, zodat de CSP alleen img-src https://www.iveco-schouten.nl nodig heeft.
 * Geen inline stijl, geen build-stap.
 */

@font-face {
    font-family: "Open Sans";
    src: url("open-sans-latin.dcf31ebe1074.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --blauw: #1554ff;
    --blauw-donker: #0d3fd6;
    --zwart: #040505;
    --tekst: #1f2328;
    --tekst-zacht: #4b5563;      /* 7:1 op wit */
    --lijn: #d7dce5;
    --fout: #b42318;
    --fout-licht: #fef3f2;
    --ok: #067647;
    --ok-licht: #ecfdf3;
    --geel: #fdb022;
    --nacht: #04060f;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body.inloggen { background: var(--nacht); }

/* Op het doek en niet op <body>: in Filament is de <body> van Filament zelf. */
.inloggen-doek {
    font: 16px/1.5 "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--tekst);
    background: var(--nacht);
    -webkit-font-smoothing: antialiased;
}

/* --- Het doek: foto, waas en de lagen erboven ----------------------------- */
.inloggen-doek {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.inloggen-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* Ligt de website eruit, dan geen gebroken plaatje: alleen de donkere ondergrond. */
.inloggen-foto:not([src]), .inloggen-foto[data-mislukt] { display: none; }

/* Zacht inzoomen, naar 1 toe (de ruststand is de foto zelf, scherp), alleen als de
   bezoeker beweging niet heeft uitgezet. */
@media (prefers-reduced-motion: no-preference) {
    .inloggen-foto { animation: inloggen-zoom 22s ease-out forwards; }
}
@keyframes inloggen-zoom { from { transform: scale(1.13); } to { transform: scale(1); } }

.inloggen-waas {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2, 8, 24, .88) 0%, rgba(3, 12, 34, .68) 34%, rgba(4, 14, 40, .32) 64%, rgba(6, 20, 60, .45) 100%),
        radial-gradient(130% 100% at 75% 30%, rgba(21, 84, 255, .28) 0%, rgba(0, 0, 0, 0) 58%);
}

.inloggen-staging {
    position: relative;
    z-index: 40;
    background: var(--geel);
    color: var(--zwart);
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 16px;
}

.inloggen-kop {
    position: relative;
    z-index: 30;
    padding: 24px 20px 0;
}
.inloggen-kop img { display: block; height: 44px; width: auto; }

.inloggen-midden {
    position: relative;
    z-index: 20;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 32px 16px;
}

/* --- Links: de app ---------------------------------------------------------- */
.inloggen-app { display: none; color: #fff; max-width: 500px; }
/* De naam van de app is het grootste op het scherm: je ziet meteen waar je inlogt. */
.inloggen-app-naam {
    margin: 0;
    font-size: 64px;
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
}
.inloggen-app p.inloggen-app-tekst {
    margin: 22px 0 0;
    max-width: 40ch;
    font-size: 19px;
    color: rgba(255, 255, 255, .78);
}

/* --- Rechts: de kaart -------------------------------------------------------- */
.inloggen-kaart {
    width: 100%;
    max-width: 404px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(2, 10, 30, .6);
}
.inloggen-kaart::before {
    content: "";
    display: block;
    height: 5px;
    background: var(--blauw);
}
.inloggen-kaart-binnen { padding: 30px 32px 32px; }
/* Op een smal scherm valt het linkerdeel weg; dan staat de naam van de app in de kaart. */
.inloggen-kaart-app { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blauw-donker); }
.inloggen-kaart h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--zwart);
}
.inloggen-kaart .inloggen-uitleg {
    margin: 6px 0 22px;
    font-size: 14px;
    color: var(--tekst-zacht);
}

.inloggen-melding {
    margin: 0 0 18px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid;
}
.inloggen-melding.fout { color: var(--fout); background: var(--fout-licht); border-color: #fecdca; }
.inloggen-melding.ok { color: var(--ok); background: var(--ok-licht); border-color: #abefc6; }

.inloggen-veld { margin-bottom: 16px; }
.inloggen-veld label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--zwart); }
.inloggen-veld input {
    width: 100%;
    padding: 11px 12px;
    font: inherit;
    font-size: 15px;
    color: var(--tekst);
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: 8px;
}
.inloggen-veld input[aria-invalid="true"] { border-color: var(--fout); }

.inloggen-knop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    margin-top: 6px;
    padding: 10px 16px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--blauw);
    border: 1px solid var(--blauw);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}
.inloggen-knop:hover { background: var(--blauw-donker); border-color: var(--blauw-donker); }
.inloggen-knop.microsoft { color: var(--zwart); background: #fff; border-color: var(--lijn); }
.inloggen-knop.microsoft:hover { background: #f5f7fb; }
.inloggen-knop svg { flex: none; }

.inloggen-klein { margin: 16px 0 0; font-size: 13px; color: var(--tekst-zacht); }

.inloggen-veld input:focus-visible,
.inloggen-knop:focus-visible,
.inloggen-hulp-knop:focus-visible,
.inloggen-hulp-kaart a:focus-visible {
    outline: 3px solid rgba(21, 84, 255, .45);
    outline-offset: 2px;
}

/* --- Onderaan: copyright en hulp ------------------------------------------- */
.inloggen-voet {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px 24px;
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
}
.inloggen-hulp { position: relative; }
.inloggen-hulp-knop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 4px;
    font: inherit;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    background: none;
    border: 0;
    cursor: pointer;
}
.inloggen-hulp-knop:hover { color: #fff; }
.inloggen-hulp-kaart {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: 270px;
    padding: 16px;
    color: var(--tekst);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px -15px rgba(2, 10, 30, .6);
}
.inloggen-hulp-kaart[hidden] { display: none; }
.inloggen-hulp-kaart .titel { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-zacht); }
.inloggen-hulp-kaart .naam { margin: 0 0 10px; font-weight: 700; color: var(--zwart); }
.inloggen-hulp-kaart a { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: var(--blauw-donker); text-decoration: none; word-break: break-all; font-size: 14px; }
.inloggen-hulp-kaart a:hover { text-decoration: underline; }
.inloggen-hulp-kaart a svg { flex: none; color: var(--tekst-zacht); }

/* --- Breder scherm ------------------------------------------------------------ */
@media (min-width: 1024px) {
    .inloggen-kop { padding: 40px 64px 0; }
    .inloggen-kop img { height: 58px; }
    .inloggen-midden { justify-content: space-between; padding: 32px 64px; }
    .inloggen-app { display: block; }
    .inloggen-kaart-app { display: none; }
    .inloggen-kaart-binnen { padding: 32px 38px 36px; }
    .inloggen-voet { padding: 0 64px 30px; }
}