/* =====================================================================
   Inlogschermen — medewerkers (/Account/Login) en klanten (/Portaal/Login)

   Eén ontwerp, twee thema's. Waarom niet twee aparte stylesheets? Het is één
   merk (Emkes Lease), dus de opbouw is gelijk. Het VERSCHIL zit in de
   thema-variabelen hieronder: blauw voor medewerkers, turquoise voor klanten.
   Samen met een ander label, andere tekst en andere tegels zie je zo in één
   oogopslag waar je inlogt.

   Kleuren staan als variabelen (custom properties) bovenaan, zodat een
   kleurwijziging op één plek gebeurt.
   ===================================================================== */

.thema-medewerker {
    --accent: #1e90ff;
    --accent-licht: #4cc0ff;
    --accent-rgb: 30, 144, 255;
    --achtergrond-boven: #0b1730;
    --achtergrond-onder: #040912;
}

.thema-klant {
    --accent: #14b8a6;
    --accent-licht: #5eead4;
    --accent-rgb: 20, 184, 166;
    --achtergrond-boven: #082126;
    --achtergrond-onder: #03100f;
}

/* ---------- Basis ---------- */

* {
    box-sizing: border-box;
}

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

body.inlogpagina {
    /* Systeemlettertype: geen lettertype van Google laden, dus geen
       bezoekersgegevens naar derden bij het inloggen. */
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #e8eef7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* De "foto" uit het ontwerp, nagebootst met kleur: twee gloedvlekken in de
       accentkleur over een donker verloop. Laadt direct, ook op een telefoon. */
    background:
        radial-gradient(ellipse 55% 50% at 72% 30%, rgba(var(--accent-rgb), 0.22), transparent 70%),
        radial-gradient(ellipse 45% 40% at 12% 95%, rgba(var(--accent-rgb), 0.14), transparent 70%),
        linear-gradient(160deg, var(--achtergrond-boven), var(--achtergrond-onder));
    background-attachment: fixed;
    position: relative;
    overflow-x: hidden;
}

/* Fijn raster en een groot, vaag Emkes-"E"-watermerk, als knipoog naar het logo
   op de gevel in het ontwerp. Puur decoratief (pointer-events: none). */
body.inlogpagina::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.watermerk {
    position: fixed;
    width: 46vw;
    max-width: 720px;
    left: 30%;
    top: 18%;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

.inlog-kop, .inlog-midden, .inlog-voet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 48px;
    padding-right: 48px;
}

a {
    color: var(--accent-licht);
}

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent-licht);
    outline-offset: 3px;
}

/* ---------- Kop: logo links, omgeving + klok rechts ---------- */

.inlog-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.merk {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}

.merk img {
    width: 58px;
    height: auto;
}

.merk-naam {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* Zoals in het logo: "Emkes" wit, "Lease" in het Emkes-blauw. */
.merk-naam .lease {
    color: #12a6ff;
}

.merk-slogan {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(232, 238, 247, 0.6);
}

.kop-rechts {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 14px;
}

/* Het omgevingslabel rechtsboven ("Medewerkerportaal" / "Klantportaal").
   Een gekleurde stip in de accentkleur maakt het meteen herkenbaar. */
.omgeving {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    color: #fff;
    font-weight: 600;
}

.omgeving::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-licht);
}

.klok {
    text-align: right;
    line-height: 1.25;
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.klok-datum {
    font-size: 12px;
    color: rgba(232, 238, 247, 0.65);
}

.klok-tijd {
    font-size: 18px;
    font-weight: 600;
}

/* ---------- Midden: verhaal links, inlogkaart rechts ---------- */

.inlog-midden {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 470px;
    gap: 64px;
    align-items: center;
    padding-top: 48px;
    padding-bottom: 48px;
}

.pil {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.03);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(232, 238, 247, 0.75);
}

.verhaal h1 {
    margin: 22px 0 18px;
    font-size: clamp(34px, 4.2vw, 58px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.verhaal h1 .accent {
    background: linear-gradient(90deg, var(--accent-licht), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.verhaal .ondertitel {
    max-width: 520px;
    margin: 0 0 36px;
    font-size: 19px;
    line-height: 1.5;
    color: rgba(232, 238, 247, 0.8);
}

/* De tegels: alleen onderdelen die ECHT bestaan (geen "realtime data" e.d.). */
.tegels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    max-width: 700px;
}

.tegel {
    padding: 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(6px);
}

.tegel svg {
    width: 28px;
    height: 28px;
    stroke: var(--accent-licht);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 12px;
}

.tegel strong {
    display: block;
    font-size: 15px;
}

.tegel span {
    font-size: 13px;
    color: rgba(232, 238, 247, 0.65);
}

/* ---------- De inlogkaart ---------- */

.inlogkaart {
    padding: 44px 46px 32px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 30px 80px rgba(0, 0, 0, 0.45),
        0 0 60px rgba(var(--accent-rgb), 0.12);
    backdrop-filter: blur(16px);
}

.kaart-kop {
    text-align: center;
    margin-bottom: 32px;
}

.kaart-kop .merk {
    justify-content: center;
}

.kaart-kop .merk img {
    width: 62px;
}

.kaart-kop .merk-naam {
    font-size: 32px;
}

/* Het belangrijkste onderscheid in de kaart: "MEDEWERKER LOGIN" of "KLANTPORTAAL",
   in de accentkleur en groot genoeg om niet te missen. */
.kaart-label {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent-licht);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.veld {
    margin-bottom: 20px;
}

.veld label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
}

.invoer {
    position: relative;
}

.invoer > svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    stroke: rgba(232, 238, 247, 0.6);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.invoer input {
    width: 100%;
    height: 54px;
    padding: 0 52px 0 48px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(4, 9, 18, 0.45);
    color: #fff;
    font: inherit;
    font-size: 16px; /* 16px voorkomt dat iOS bij focus inzoomt */
    transition: border-color 0.15s, box-shadow 0.15s;
}

.invoer input::placeholder {
    color: rgba(232, 238, 247, 0.45);
}

.invoer input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2);
}

/* Het oogje om het wachtwoord te tonen. Een echte knop (toetsenbord + schermlezer). */
.toon-wachtwoord {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.toon-wachtwoord svg {
    width: 20px;
    height: 20px;
    stroke: rgba(232, 238, 247, 0.7);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.toon-wachtwoord:hover svg {
    stroke: #fff;
}

.veldfout {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #ff8a8a;
}

/* Algemene foutmelding (bijv. "onjuiste inloggegevens"). Leeg = onzichtbaar. */
.foutmelding ul {
    margin: 0 0 20px;
    padding: 12px 16px;
    list-style: none;
    border-radius: 10px;
    background: rgba(255, 80, 80, 0.12);
    border: 1px solid rgba(255, 120, 120, 0.35);
    color: #ffc2c2;
    font-size: 14px;
}

.foutmelding.validation-summary-valid {
    display: none;
}

.hint {
    margin: -6px 0 22px;
    text-align: right;
    font-size: 13px;
    color: rgba(232, 238, 247, 0.6);
}

.knop-inloggen {
    width: 100%;
    height: 56px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(90deg, var(--accent), var(--accent-licht));
    color: #fff;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
}

.knop-inloggen:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.45);
}

.knop-inloggen svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.scheiding {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 18px;
    color: rgba(232, 238, 247, 0.5);
    font-size: 14px;
}

.scheiding::before, .scheiding::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

/* De verwijzing van het medewerkerscherm naar het klantportaal. */
.andere-omgeving {
    display: block;
    padding: 14px 16px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    text-align: center;
    text-decoration: none;
    color: #e8eef7;
    font-size: 15px;
}

.andere-omgeving:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.03);
}

.veilig {
    margin-top: 26px;
    text-align: center;
    font-size: 13px;
    color: rgba(232, 238, 247, 0.55);
}

/* ---------- Activatiepagina's (wachtwoord instellen) ----------
   Dezelfde kaart als het inloggen, maar met een korte titel en uitleg erboven. Een
   link kan er zo uitzien als de grote knop (bijv. "Naar inloggen"). */

.kaart-titel {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}

.kaart-tekst {
    margin: 0 0 24px;
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(232, 238, 247, 0.75);
}

.kaart-tekst a {
    color: var(--accent-licht);
}

a.knop-inloggen {
    text-decoration: none;
}

a.knop-inloggen:hover {
    color: #fff;
}

/* "Wachtwoord vergeten?" op het inlogscherm en "Terug naar inloggen" eronder: in de
   accentkleur, zodat ze herkenbaar klikbaar zijn zonder de grote knop te overschaduwen. */
.hint a,
.kaart-terug a {
    color: var(--accent-licht);
    text-decoration: none;
    font-weight: 600;
}

.hint a:hover,
.kaart-terug a:hover {
    text-decoration: underline;
}

.kaart-terug {
    margin: 18px 0 0;
    text-align: center;
    font-size: 14px;
}

/* ---------- Voet ---------- */

.inlog-voet {
    padding-top: 18px;
    padding-bottom: 26px;
    font-size: 13px;
    color: rgba(232, 238, 247, 0.5);
}

/* ---------- Telefoon en tablet ----------
   Klanten loggen vaak in op hun telefoon. Daar komt de inlogkaart BOVENAAN
   (order), het verhaal wordt compact en de tegels verdwijnen. */
@media (max-width: 960px) {
    .inlog-kop, .inlog-midden, .inlog-voet {
        padding-left: 18px;
        padding-right: 18px;
    }

    .inlog-midden {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 24px;
    }

    .inlogkaart {
        order: 1;
        padding: 30px 22px 24px;
    }

    .verhaal {
        order: 2;
        text-align: center;
    }

    .verhaal .ondertitel {
        margin: 0 auto;
        font-size: 16px;
    }

    .tegels, .klok, .pil {
        display: none;
    }

    .inlog-kop {
        padding-top: 16px;
        padding-bottom: 14px;
    }

    .inlog-kop .merk-slogan {
        display: none;
    }

    .inlog-kop .merk img {
        width: 40px;
    }

    .inlog-kop .merk-naam {
        font-size: 21px;
    }

    .watermerk {
        width: 90vw;
        left: 5%;
        top: 30%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .knop-inloggen, .invoer input {
        transition: none;
    }

    .knop-inloggen:hover {
        transform: none;
    }
}