/* Inlogpagina in de Madbri-huisstijl.

   Zelfde anatomie als de transactionele mail: fotoband met logo, gouden
   accentlijn, inhoud op een eigen vlak, ink-voet. Wie een magic-link uit zijn
   inbox volgt, landt op een pagina die hetzelfde merk toont.

   Het merkpalet komt hier NIET uit het tenant-thema: het inlogscherm is
   Madbri, de ingelogde omgeving is van de klant. Alleen de fóto komt uit het
   gekozen thema. De kleurstand (licht/donker/systeem) volgt wel gewoon het
   appearance-contract — goud en ink liggen vast, het vlak eronder kantelt. */

.login-madbri {
    /* Huisstijl-tokens, gelijk aan services/mail_templates.py in de portal.
       Goud en ink liggen vast in beide kleurstanden; alleen het vlak eronder
       kantelt mee met de voorkeur van de bezoeker. */
    --mb-ink: #1b1917;
    --mb-gold: #c9a45f;
    --mb-gold-dark: #a8813f;
    --mb-cream: #f1ece6;
    --mb-surface: #ffffff;
    --mb-text: #1b1917;
    --mb-muted: #746e69;
    --mb-muted-on-ink: #a59e95;
    --mb-divider-ink: #3a352f;
    --mb-divider: #e6e0d8;
    --mb-field-border: #ded7cd;

    margin: 0;
    min-height: 100vh;
    background: var(--mb-cream);
    color: var(--mb-text);
    font-family: var(--font-sans);
}

[data-theme="dark"] .login-madbri {
    --mb-cream: #141210;
    --mb-surface: #1f1c19;
    --mb-text: #f1ece6;
    --mb-muted: #a59e95;
    --mb-divider: #332e29;
    --mb-field-border: #3a352f;
    /* Op donker moet het accentgoud juist lichter zijn om te blijven lezen. */
    --mb-gold-dark: #d8bb85;
}

.login-stage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 32px 16px 40px;
}

.login-card {
    width: min(100%, 460px);
    overflow: hidden;
    text-align: left;
    background: var(--mb-surface);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(27, 25, 23, 0.08);
}

/* ---- Fotoband -------------------------------------------------------- */

.login-card__banner {
    position: relative;
    height: 132px;
    background: var(--mb-ink);
    border-bottom: 3px solid var(--mb-gold);
}

.login-card__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--appearance-photo-focal-x, 50%)
        var(--appearance-photo-focal-y, 50%);
}

/* Donkere sluier zodat het logo op elke klantfoto leesbaar blijft. */
.login-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(27, 25, 23, 0.28) 0%,
        rgba(27, 25, 23, 0.62) 100%
    );
}

.login-card__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 172px;
    max-height: 46px;
}

/* ---- Body ------------------------------------------------------------ */

.login-card__body {
    padding: 28px 32px 26px;
}

.login-card__title {
    margin: 0 0 4px;
    color: var(--mb-text);
    font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.15;
}

.login-card__tagline {
    margin: 0 0 24px;
    color: var(--mb-muted);
    font-size: 0.9rem;
}

/* Knop en focus volgen de huisstijl, niet het tenant-accent. Ink-tekst op
   goud haalt 8,5:1; wit op goud zou 2,2:1 zijn. */
.login-madbri .ds-btn--primary {
    color: var(--mb-ink);
    background: var(--mb-gold);
    border-color: var(--mb-gold);
}

.login-madbri .ds-btn--primary:hover {
    background: var(--mb-gold-dark);
    border-color: var(--mb-gold-dark);
}

/* components.css zet hier het thema-accent neer (rand + ring). Op het
   inlogscherm hoort dat goud te zijn, net als de knop. */
.login-madbri .ds-field__input:focus {
    outline: none;
    border-color: var(--mb-gold-dark);
    box-shadow: 0 0 0 3px rgba(201, 164, 95, 0.34);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}

.login-form .ds-btn {
    gap: 8px;
    margin-top: 4px;
}

.login-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    margin-bottom: 20px;
    font-size: var(--font-small-size);
    text-align: left;
    border-radius: var(--radius-md);
}

.login-alert--success {
    color: var(--c-success-fg);
    background: var(--c-success-soft);
}

.login-alert--error {
    color: var(--c-danger-fg);
    background: var(--c-danger-soft);
}

.login-alert--dev {
    color: var(--c-warning-fg);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    word-break: break-all;
    background: var(--c-warning-soft);
}

.login-alert--dev a {
    color: inherit;
    text-decoration: underline;
}

.login-footer-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 16px 0 0;
    color: var(--mb-muted);
    font-size: 0.75rem;
}

.login-pw {
    margin-top: 18px;
    border-top: 1px solid var(--mb-divider);
    padding-top: 14px;
}

.login-pw > summary {
    color: var(--mb-gold-dark);
    font-size: 0.8rem;
    cursor: pointer;
}

.login-pw .login-form {
    margin-top: 12px;
}

/* ---- Ink-voet -------------------------------------------------------- */

.login-card__foot {
    padding: 20px 32px 22px;
    background: var(--mb-ink);
    border-top: 3px solid var(--mb-gold);
}

.login-card__brand {
    margin: 0;
    color: #ffffff;
    font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    font-size: 1.15rem;
    font-weight: 400;
}

.login-card__legal {
    margin: 6px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--mb-divider-ink);
    color: var(--mb-muted-on-ink);
    font-size: 0.7rem;
}

/* Leverancier: hoort zichtbaar te zijn, maar ondergeschikt aan de naam van
   de zaak zelf — die staat er immers boven. */
.login-card__vendor {
    margin: 4px 0 0;
    color: var(--mb-muted-on-ink);
    font-size: 0.68rem;
    opacity: 0.8;
}

/* ---- Taalkeuze ------------------------------------------------------- */

.login-langs {
    display: flex;
    gap: 6px;
}

.login-lang {
    padding: 4px 12px;
    color: var(--mb-muted);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--mb-field-border);
    border-radius: var(--radius-full);
    transition: color var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.login-lang:hover {
    color: var(--mb-text);
    background: var(--mb-surface);
}

.login-lang.is-active {
    color: var(--mb-ink);
    background: var(--mb-gold);
    border-color: var(--mb-gold);
}

/* ---- Responsief ------------------------------------------------------ */

@media (max-width: 520px) {
    .login-stage {
        justify-content: flex-start;
        padding: 0 0 28px;
    }

    .login-card {
        border-radius: 0;
    }

    .login-card__banner { height: 116px; }
    .login-card__body { padding: 24px 20px 22px; }
    .login-card__foot { padding: 18px 20px 20px; }
    .login-card__title { font-size: 1.55rem; }
    .login-langs { padding-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-lang { transition: none; }
}