/*
    Huisstijl van de client die de aanmelding startte.

    Het Portal weet wie dat is zonder dat de client iets extra meestuurt: bij een
    authorize-aanvraag staat de client_id in de returnUrl waarmee de cookie-middleware naar
    /login stuurt. ClientBrand leest hem daar uit en zet de uitkomst als data-brand op de
    aanmeld- en registratiepagina. Zonder brand valt alles hieronder weg en blijft het gewone
    Portal-uitzicht staan.

    Bewust een eigen, met de hand geschreven bestand en niet de kleurtokens van Tailwind: die
    tokens (primary, background, foreground) staan niet in de gecompileerde output.css, dus
    klassen als text-primary renderen daar vandaag al niets. Hier staat echte CSS die de klassen
    overschrijft die er wel in staan.

    Dit bestand hoort na output.css ingeladen te worden en staat buiten elke cascade-layer.
    Ongelaagde CSS gaat altijd voor op de utilities van Tailwind (die in @layer utilities zitten),
    ongeacht specificiteit — daarom werken de overrides hieronder zonder !important.
*/

[data-brand="go"] {
    /* Dezelfde navy en CTA-kleur als AuthLayout in Prospects, zodat de overdracht naadloos leest. */
    --go-surface: #1a1d2e;
    --go-card: #22263a;
    --go-field: rgba(255, 255, 255, 0.06);
    --go-line: rgba(255, 255, 255, 0.12);
    --go-ink: #f4f5fa;
    --go-muted: rgba(244, 245, 250, 0.6);
    --go-accent: #7b8cde;
    --go-danger: #fca5a5;

    background-color: var(--go-surface);
    color: var(--go-ink);
}

/*
    De pagina zit in <main> van LandingLayout; zonder deze regels blijft de beige body eromheen
    zichtbaar. :has() is de enige manier om van hieruit bij die omhullende chrome te komen. Waar
    het wegvalt blijft alleen die rand beige — de pagina zelf klopt dan nog.
*/
body:has([data-brand="go"]) {
    background-color: #1a1d2e;
}

body:has([data-brand="go"]) nav {
    color: #f4f5fa;
}

/* Het logo is donkere inkt op transparant en zou op navy verdwijnen. */
body:has([data-brand="go"]) img[alt="Scopr"] {
    filter: invert(1) brightness(1.6);
}

/* De pil in de nav is een witte knop; die is hier te hard. */
body:has([data-brand="go"]) nav button {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.18);
    color: #f4f5fa;
}

body:has([data-brand="go"]) nav button:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Kaart en witte vlakken. */
[data-brand="go"] .bg-white {
    background-color: var(--go-card);
}

[data-brand="go"] .border-black\/10,
[data-brand="go"] .border-black\/20,
[data-brand="go"] .border-border {
    border-color: var(--go-line);
}

[data-brand="go"] .bg-black\/10 {
    background-color: var(--go-line);
}

/* Gedempte tekst staat hier als zwart met opaciteit; dat wordt op navy onleesbaar. */
[data-brand="go"] .text-black\/50,
[data-brand="go"] .text-black\/45,
[data-brand="go"] .text-black\/40,
[data-brand="go"] .text-black\/25,
[data-brand="go"] .text-muted-foreground {
    color: var(--go-muted);
}

[data-brand="go"] .text-foreground {
    color: var(--go-ink);
}

[data-brand="go"] .text-primary {
    color: var(--go-accent);
}

/* Velden. */
[data-brand="go"] input:not([type="checkbox"]) {
    background-color: var(--go-field);
    border-color: var(--go-line);
    color: var(--go-ink);
}

[data-brand="go"] input::placeholder {
    color: rgba(244, 245, 250, 0.35);
}

[data-brand="go"] input:not([type="checkbox"]):focus {
    border-color: var(--go-accent);
    box-shadow: 0 0 0 3px rgba(123, 140, 222, 0.25);
}

[data-brand="go"] input[type="checkbox"] {
    accent-color: var(--go-accent);
}

/* De hero-knop is een grafietgradient en valt op navy weg. */
[data-brand="go"] button[type="submit"] {
    background-image: linear-gradient(180deg, #8b9ae6 0%, #7b8cde 100%);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(123, 140, 222, 0.28);
}

/* Externe providers: eigen vlak, anders lopen ze samen met de kaart eronder. */
[data-brand="go"] a.bg-white {
    background-color: var(--go-field);
}

[data-brand="go"] a.bg-white:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Foutmeldingen zijn lichte dozen; op navy zijn dat lichtvlekken. */
[data-brand="go"] .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1);
}

[data-brand="go"] .border-red-200,
[data-brand="go"] .border-red-300 {
    border-color: rgba(239, 68, 68, 0.4);
}

[data-brand="go"] .text-red-700,
[data-brand="go"] .text-red-600 {
    color: var(--go-danger);
}