/* ==========================================================================
   AUTH-SCHERMEN — login, wachtwoord vergeten, nieuw wachtwoord
   ==========================================================================
   Zelfde opbouw als "kop & vel" elders in de app (css/voorbeeld/kop-en-vel.css):
   een kop in de merkkleur met de uitvergrote 4 erin, en daaroverheen een wit vel
   met ronde bovenhoeken. Hier is het vel geen pagina-inhoud maar het inlogblok.

   MOBIEL   full-bleed: de kop loopt tot de schermrand, het vel vult de rest.
   DESKTOP  één gecentreerde kolom met een max-breedte, rondom afgerond en met
            schaduw — daar is een vel-tot-de-schermrand geen app maar een gat.

   Het breekpunt is 576px, gelijk aan de bottom-sheet-grens elders in de app:
   hier gaat het wél om "houd je een telefoon vast", niet om beschikbare ruimte.
   ========================================================================== */

.ui-auth {
    /* ── DE KOP ───────────────────────────────────────────────────────────
       --ua-overlap    Hoeveel het witte vel over de kop heen schuift. De kop
                       krijgt er exact evenveel extra onderruimte voor, anders
                       eet het vel het logo op.
       --ua-vel-radius Ronding van de BOVENhoeken van het vel.
       --ua-logo-breedte  Breedte van het wordmark in de kop.

       ── DE 4 IN DE KOP ───────────────────────────────────────────────────
       Zelfde masker-truc als .kv-kop: de bron-SVG is oranje-op-transparant en
       zou op een oranje kop onzichtbaar zijn. Als masker telt alleen de alfa
       (de outline-strokes) en kies ik zelf kleur + dekking.
       --ua-vier-hoogte   Percentage van de KOPHOOGTE. Groter = verder uitvergroot.
       --ua-vier-rechts   Afstand vanaf de rechterrand; negatief = hangt eroverheen.
       --ua-vier-sterkte  Dekking 0–1. Bewust laag: het wordmark is de hoofdvorm,
                          de 4 is textuur. */
    --ua-overlap: 2rem;
    --ua-vel-radius: 2rem;
    --ua-logo-breedte: 15rem;
    --ua-vier-hoogte: 150%;
    --ua-vier-rechts: -12%;
    --ua-vier-sterkte: .10;

    /* Veldvorm op de auth-schermen: een royale afgeronde rechthoek, ruimer dan
       --ui-veld-radius elders. Bewuste vormkeuze (zoals .search-pill een pill
       is); kleur, ring en overgang blijven wél uit de --ui-veld-*-tokens komen. */
    --ua-veld-radius: 1rem;
    --ua-veld-hoogte: 3.5rem;

    background: var(--theme-color-card);
    min-height: 100vh;
}

/* De hele shell is één flex-kolom, zodat het vel de rest van het scherm vult en
   de voettekst onderaan landt in plaats van direct onder het formulier.

   De kolom moet ONONDERBROKEN doorlopen tot .ui-auth-vel-binnen: shell → kaart →
   vel → binnen. Elke laag die geen flex-container is breekt de keten, en dan
   krijgt het vel zijn natuurlijke hoogte en plakt de voettekst weer tegen het
   formulier aan met een leeg wit vlak eronder. */
.ui-auth-shell,
.ui-auth-kaart {
    display: flex;
    flex-direction: column;
}

.ui-auth-shell {
    min-height: 100vh;
}

.ui-auth-kaart {
    flex: 1 1 auto;
    min-height: 0;
}

/* ── DE KOP ──────────────────────────────────────────────────────────────── */

.ui-auth-kop {
    position: relative;
    background: var(--primary-color);
    color: var(--primary-bg-text-color);
    /* De safe-area zit HIER, niet op een wrapper eromheen: de achtergrond moet
       tot de fysieke schermrand doorlopen (achtergrond bleedt, content wijkt),
       anders zie je een witte streep boven de oranje kop in de WebView. */
    padding: calc(var(--sa-t) + 3rem) 1.5rem calc(var(--ua-overlap) + 2.5rem);
    text-align: center;
    /* De 4 hangt over de rand; die overhang moet hier geklipt worden, anders
       wordt de pagina breder dan de viewport en kun je horizontaal slepen. */
    overflow: hidden;
}

/* De uitvergrote 4 als textuur. Hangt aan de HOOGTE van de kop, zodat een lage
   en een hoge kop dezelfde uitsnede-verhouding tonen. */
.ui-auth-kop::before {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--ua-vier-rechts);
    height: var(--ua-vier-hoogte);
    aspect-ratio: 1760 / 724;
    transform: translateY(-50%);
    background-color: var(--primary-bg-text-color);
    -webkit-mask-image: url("../images/we4media-4-bg-icon.svg");
            mask-image: url("../images/we4media-4-bg-icon.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    opacity: var(--ua-vier-sterkte);
    pointer-events: none;
}

/* Diagonale glans over de kop — geeft het vlak diepte zonder een tweede kleur
   te introduceren. Puur wit met een zeer lage dekking, dus hij werkt ook als de
   merkkleur ooit verandert. */
.ui-auth-kop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        118deg,
        rgba(var(--primary-bg-text-color-rgb), 0) 38%,
        rgba(var(--primary-bg-text-color-rgb), .10) 50%,
        rgba(var(--primary-bg-text-color-rgb), 0) 62%
    );
    pointer-events: none;
}

/* Het wordmark, in de witte variant (images/logo-woord-wit.png).

   Waarom een apart bestand en geen CSS-filter op logo-woord.png: in dat bronbestand
   is de 4 OPAAK WIT getekend binnen de oranje cirkel, niet uitgespaard. Elk filter
   dat het oranje wit maakt (brightness(0) invert(1)) maakt die 4 dus óók wit, en
   dan staat er een dichte witte bol in het logo. In de witte variant is precies dat
   witte deel op alfa 0 gezet, zodat de oranje kop door de 4 heen schijnt — de holle
   4 uit het ontwerp. Het bestand is afgeleid van logo-woord.png; opnieuw genereren
   = oranje naar wit met behoud van alfa, wit naar transparant. */
.ui-auth-merk {
    position: relative;   /* boven het masker en de glans */
    z-index: 1;
}

.ui-auth-merk img {
    width: var(--ua-logo-breedte);
    max-width: 78%;
    height: auto;
}

/* ── HET VEL ─────────────────────────────────────────────────────────────── */

.ui-auth-vel {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    background: var(--theme-color-card);
    border-radius: var(--ua-vel-radius) var(--ua-vel-radius) 0 0;
    /* De overlap: dít maakt het een vel in plaats van twee blokken onder elkaar. */
    margin-top: calc(var(--ua-overlap) * -1);
}

.ui-auth-vel-binnen {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: 27rem;
    margin: 0 auto;
    padding: 2rem 1.5rem calc(1.5rem + var(--sa-b));
}

/* ── KOPTEKST ────────────────────────────────────────────────────────────── */

.ui-auth-titel {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--theme-text-color);
}

.ui-auth-lead {
    margin: .35rem 0 1.75rem;
    font-size: 1rem;
    color: var(--theme-text-color-gray);
}

/* ── VELDEN ──────────────────────────────────────────────────────────────── */

.ui-auth label.form-label {
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: .45rem;
    color: var(--theme-text-color);
}

/* Wrapper met een icoon links in het veld. Het icoon is decoratief (het label
   staat er al boven), dus pointer-events uit — anders vangt het de klik die de
   input hoort te focussen.

   Zowel de <i data-feather> als de <svg> die Feather ervoor in de plaats zet
   worden gepositioneerd: tussen DOM-ready en feather.replace() zit een frame, en
   zonder de <i>-variant springt het icoon daar zichtbaar op zijn plek. */
.ui-auth-veld {
    position: relative;
}

.ui-auth-veld > svg,
.ui-auth-veld > i[data-feather] {
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.15rem;
    height: 1.15rem;
    color: var(--theme-text-color-gray);
    pointer-events: none;
    z-index: 2;
}

.ui-auth .form-control {
    height: var(--ua-veld-hoogte);
    border-radius: var(--ua-veld-radius);
    background: var(--ui-veld-bg);
    border: 1px solid var(--ui-veld-rand);
    color: var(--theme-text-color);
    padding: .5rem 1.15rem;
    font-size: 1rem;
    transition: var(--ui-veld-overgang);
}

/* Links = icoonpositie (1.15rem) + icoonbreedte (1.15rem) + ademruimte. Gestuurd
   op een class van de wrapper en niet op een sibling-selector vanaf het icoon:
   dat icoon is vóór feather.replace() nog een <i> en daarna een <svg>, en dan
   zou de padding pas ná de vervanging aanslaan (zichtbaar verspringende tekst). */
.ui-auth-veld-icoon .form-control {
    padding-left: 3rem;
}

.ui-auth .form-control::placeholder {
    color: var(--theme-text-color-gray);
    opacity: 1;
}

.ui-auth .form-control:hover:not(:focus) {
    border-color: var(--ui-veld-rand-hover);
}

.ui-auth .form-control:focus {
    background: var(--ui-veld-bg-actief);
    border-color: var(--ui-veld-rand-focus);
    box-shadow: var(--ui-veld-ring);
}

/* De oog-knop (.pw-veld/.pw-veld-toggle uit ui-stijl.css) zit binnen de wrapper;
   die moet de volle veldbreedte houden, anders krimpt het wachtwoordveld. */
.ui-auth-veld > .pw-veld { display: block; }
.ui-auth .pw-veld > .form-control { padding-right: 3.25rem; }
.ui-auth .pw-veld-toggle { right: .75rem; }

/* "Wachtwoord vergeten?" — merkkleur op een wit vlak, dus --brand-on-surface en
   niet de kale --primary-color (die zakt op wit door de contrastgrens). */
.ui-auth-vergeten {
    display: inline-block;
    margin-top: .85rem;
    color: var(--brand-on-surface);
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
}

.ui-auth-vergeten:hover {
    color: var(--brand-on-surface);
    text-decoration: underline;
}

/* ── HOOFDKNOP ───────────────────────────────────────────────────────────── */

/* Het volvlak van het scherm: één per pagina, de weg vooruit. Label gecentreerd
   met de pijl rechts eraan vast — daarom absoluut gepositioneerd en niet via de
   .btn-flexrij, die het icoon tegen het label aan zou zetten. */
.ui-auth .btn-auth {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--ua-veld-hoogte);
    padding: .75rem 3rem;
    border: 0;
    border-radius: var(--ua-veld-radius);
    background: var(--primary-color);
    color: var(--primary-bg-text-color);
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: 0 .5rem 1.25rem rgba(var(--primary-color-rgb), .32);
    transition: box-shadow .15s ease, filter .15s ease, transform .15s ease;
}

.ui-auth .btn-auth:hover,
.ui-auth .btn-auth:focus {
    color: var(--primary-bg-text-color);
    filter: brightness(1.04);
    box-shadow: 0 .65rem 1.5rem rgba(var(--primary-color-rgb), .40);
}

.ui-auth .btn-auth:active {
    transform: translateY(1px);
    box-shadow: 0 .35rem .9rem rgba(var(--primary-color-rgb), .30);
}

.ui-auth .btn-auth:disabled {
    filter: none;
    opacity: .65;
    box-shadow: none;
}

.ui-auth .btn-auth > svg {
    position: absolute;
    right: 1.35rem;
    width: 1.2rem;
    height: 1.2rem;
}

/* Terugknop op de neven-schermen: zelfde vorm als de hoofdknop, zonder vulling. */
.ui-auth .btn-auth-terug {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    min-height: 3rem;
    margin-top: .75rem;
    border-radius: var(--ua-veld-radius);
    color: var(--theme-text-color-gray);
    font-weight: 600;
    text-decoration: none;
}

.ui-auth .btn-auth-terug:hover {
    color: var(--theme-text-color);
    background: var(--theme-color-2);
}

.ui-auth .btn-auth-terug svg { width: 1.05rem; height: 1.05rem; }

/* ── SCHEIDING + INLOGOPTIES ─────────────────────────────────────────────── */

.ui-auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.75rem 0 1rem;
    color: var(--theme-text-color-gray);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ui-auth-divider::before,
.ui-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--theme-color-3);
}

/* Tegelrij met alternatieve inlogmethoden. Auto-fit, dus met één methode
   (vandaag: alleen passkey) wordt het één brede tegel die op de hoofdknop
   uitlijnt; komt er ooit een tweede bij, dan verdeelt de rij zich vanzelf. */
.ui-auth-opties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: .75rem;
}

.ui-auth-optie {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3.25rem;
    padding: .5rem 1rem;
    border: 1px solid var(--theme-color-3);
    border-radius: var(--ua-veld-radius);
    background: var(--theme-color-card);
    color: var(--theme-text-color);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.ui-auth-optie:hover,
.ui-auth-optie:focus {
    color: var(--theme-text-color);
    border-color: var(--ui-veld-rand-hover);
    background: var(--theme-color-2);
}

.ui-auth-optie:disabled { opacity: .65; cursor: default; }

.ui-auth-optie svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--brand-on-surface);
}

/* ── VOETTEKST ───────────────────────────────────────────────────────────── */

/* margin-top:auto duwt de voettekst naar de onderkant van het vel, ook als het
   formulier kort is — daarom is .ui-auth-vel-binnen een flex-kolom. */
.ui-auth-voet {
    margin-top: auto;
    padding-top: 2rem;
    text-align: center;
    font-size: .8125rem;
    color: var(--theme-text-color-gray);
}

.ui-auth-voet a {
    color: var(--theme-text-color-gray);
    text-decoration: none;
}

.ui-auth-voet a:hover {
    color: var(--brand-on-surface);
    text-decoration: underline;
}

.ui-auth-voet-sep {
    margin: 0 .5rem;
    opacity: .5;
}

/* ── 2FA-CODE ────────────────────────────────────────────────────────────── */

.ui-auth .ui-auth-2fa-input {
    height: auto;
    text-align: center;
    font-weight: 700;
    color: var(--brand-on-surface);
    font-size: 2rem;
    letter-spacing: .5rem;
    padding: 1rem;
}

/* ── ACHTERGROND-DIAVOORSTELLING (alleen desktop) ────────────────────────── */

/* Standaard uit: op mobiel is de kaart full-bleed, dus er is geen achtergrond
   te zien. De JS (js/login-achtergrond.js) controleert dezelfde breedte en laadt
   op een telefoon dus geen enkele foto — display:none alleen zou het downloaden
   niet voorkomen. */
.ui-auth-achtergrond { display: none; }

@media (min-width: 992px) {
    .ui-auth {
        /* --ua-bg-duur   Hoe lang een foto blijft staan (JS leest deze niet; hou
                          hem gelijk aan INTERVAL in js/login-achtergrond.js).
           --ua-bg-fade   Duur van de overvloeier.
           --ua-bg-zoom   Eindschaal van de trage inzoom. Subtiel houden: alles
                          boven ~1.08 gaat zichtbaar "bewegen" en dat leidt af
                          van het formulier. */
        --ua-bg-fade: 2s;
        --ua-bg-zoom: 1.05;
    }

    .ui-auth-achtergrond {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        /* Grondkleur zolang de eerste foto nog laadt: dan zie je meteen het
           merkblauw in plaats van een lege grijze plaat die naar een foto springt. */
        background: var(--secondary-color);
    }

    .ui-auth-achtergrond-laag {
        position: absolute;
        inset: 0;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity var(--ua-bg-fade) ease-in-out;
        will-change: opacity, transform;
    }

    /* De inkomende laag krijgt van de JS een hogere z-index en vloeit dus ÓVER
       de vorige heen. Daardoor is er geen moment waarop je de grondkleur ziet —
       dat is het verschil tussen een crossfade en twee losse fades. */
    .ui-auth-achtergrond-laag.is-zichtbaar {
        opacity: 1;
        animation: uiAuthAchtergrondZoom 14s ease-out forwards;
    }

    @keyframes uiAuthAchtergrondZoom {
        from { transform: scale(1); }
        to   { transform: scale(var(--ua-bg-zoom)); }
    }

    /* Blauwe merk-overlay over de foto's. Doet twee dingen tegelijk: het houdt
       vijf verschillende foto's onderling consistent (ze horen bij hetzelfde
       scherm, niet elk bij hun eigen sfeer), en het maakt de witte kaart
       leesbaar los van wat er toevallig achter zit. Als ::after van de container
       ligt hij automatisch boven beide lagen. */
    .ui-auth-achtergrond::after {
        content: "";
        position: absolute;
        inset: 0;
        /* Boven beide foto-lagen, die van de JS z-index 1 en 2 krijgen. Zonder
           een expliciete waarde hier valt de overlay terug op z-index auto en
           schuiven die genummerde lagen eroverheen. */
        z-index: 3;
        background:
            linear-gradient(
                135deg,
                rgba(var(--secondary-color-rgb), .96) 0%,
                rgba(var(--secondary-color-rgb), .84) 50%,
                rgba(var(--secondary-color-rgb), .94) 100%
            );
        pointer-events: none;
    }

    /* De inhoud moet boven de vaste achtergrondlaag uitkomen. */
    .ui-auth-shell {
        position: relative;
        z-index: 1;
    }
}

/* Bewegingsgevoelige gebruikers: wél een foto (het blijft een achtergrond), maar
   geen inzoom en geen wisselingen — de JS stopt na de eerste. */
@media (prefers-reduced-motion: reduce) {
    .ui-auth-achtergrond-laag {
        transition: none;
        animation: none !important;
    }
}

/* ── DESKTOP ─────────────────────────────────────────────────────────────── */

/* Vanaf 576px is een vel-tot-de-schermrand geen app meer maar een gat: dan wordt
   de hele shell één gecentreerde kaart. De kop houdt zijn ronding boven, het vel
   krijgt er onder bij, en de schaduw ligt om het geheel. */
@media (min-width: 576px) {
    .ui-auth {
        --ua-vel-radius: 1.5rem;
        background: var(--theme-color-2);
    }

    .ui-auth-shell {
        justify-content: center;
        padding: 2.5rem 1.5rem;
    }

    /* Op desktop groeit de kaart niet mee: hij houdt zijn eigen hoogte en staat
       gecentreerd in het venster (justify-content op de shell). */
    .ui-auth-kaart {
        flex: 0 0 auto;
        width: 100%;
        max-width: 30rem;
        margin: 0 auto;
        border-radius: var(--ui-radius-lg);
        overflow: hidden;
        /* Steviger dan een kaart op een egale pagina: hier ligt hij op een foto,
           en zonder die diepte lijkt de kaart erop geplakt in plaats van erboven
           te zweven. */
        box-shadow: 0 1.5rem 3.5rem rgba(var(--custom-theme-box-shadow-rgb), .28);
    }

    /* De safe-area hoeft hier niet meer: de kaart raakt de schermrand niet. */
    .ui-auth-kop { padding-top: 3rem; }

    .ui-auth-vel {
        flex: 0 0 auto;
        border-radius: var(--ua-vel-radius) var(--ua-vel-radius) 0 0;
    }

    .ui-auth-vel-binnen { padding: 2rem 2.25rem 2.25rem; }

    .ui-auth-voet { padding-top: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-auth .btn-auth,
    .ui-auth .btn-auth:active { transition: none; transform: none; }
}