/* ============================================================================
 * Ordolio Login — page-specific styling
 *
 * Loaded only by main/templates/registration/login.html. All rules scoped
 * under `body.login-2026` so this file is dead weight on every other page.
 *
 * Layout primitives, surfaces, form controls, buttons, alerts, and badges
 * come from the ui-v2 library (loaded via ui-v2/index.css + the global
 * Tailwind bundle). This file only contains login-specific bits:
 *
 *   - Decorative quote card inside the hero panel
 *   - Login-method-card selector grid (.login-method-card / .method-*)
 *   - Login-specific helpers (.login-back-btn, .login-info-box)
 *   - Registration CTA card at the bottom of the form
 *   - Demo-mode credentials card (.lp-demo, only on slug=demo)
 *   - Legacy kt-* link helpers (.kt-link, .kt-login__link-forgot)
 *   - Language picker corner positioning
 *   - Mobile tweaks specific to login (hide decorative quote, etc.)
 *
 * DOM hooks preserved (login.js depends on these):
 *   .login-method-card[data-method], #magic_link-login, #password-login,
 *   .login-back-btn, #login-method-selection, .login-method-selection,
 *   data-testid attributes.
 *
 * Naming note: the .lp-hero__quote* + .lp-demo* class names are kept from
 * the original login_redesign.css for now. They are login-specific (not
 * shared with register or future showcase pages). A future cleanup may
 * rename them to .login-quote* / .login-demo* for consistency, but that
 * would just be cosmetic — out of scope for the ui-v2 extraction.
 * ========================================================================== */

/* ----- Decorative quote card inside hero panel ----------------------------- */

body.login-2026 .lp-hero__quote {
    max-width: 38ch;
    padding: var(--ordolio-space-5);
    background: color-mix(in srgb, var(--ordolio-bg-surface), transparent 30%);
    border: 1px solid var(--ordolio-border-subtle);
    border-radius: var(--ordolio-radius-xl);
    box-shadow: var(--ordolio-shadow-md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: var(--ordolio-text-base);
    line-height: var(--ordolio-leading-relaxed);
    color: var(--ordolio-fg-default);
    margin: 0;
    text-align: left;
}
body.login-2026 .lp-hero__quote-body {
    margin: 0 0 var(--ordolio-space-3);
    font-weight: var(--ordolio-weight-medium);
}
body.login-2026 .lp-hero__quote-author {
    font-size: var(--ordolio-text-xs);
    color: var(--ordolio-fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--ordolio-tracking-caps);
    margin: 0;
}

/* ----- Method-selection cards (preserve .login-method-card JS hook) ------- */

body.login-2026 .login-method-selection {
    margin: 0;
}
body.login-2026 .login-method-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ordolio-space-3);
}
body.login-2026 .login-method-card {
    display: flex;
    /* Explicitly row + left-align — legacy .login-method-card styles in
       custom.css set flex-direction: column with align-items: center, which
       would otherwise leak through and stack icon/text/arrow centered. */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ordolio-space-4);
    padding: var(--ordolio-space-5);
    background: var(--ordolio-bg-surface);
    border: 1px solid var(--ordolio-border-default);
    border-radius: var(--ordolio-radius-lg);
    box-shadow: var(--ordolio-shadow-xs);
    cursor: pointer;
    text-align: left;
    transition:
        border-color var(--ordolio-motion-fast) var(--ordolio-ease-out),
        box-shadow var(--ordolio-motion-fast) var(--ordolio-ease-out),
        transform var(--ordolio-motion-fast) var(--ordolio-ease-out),
        background-color var(--ordolio-motion-fast) var(--ordolio-ease-out);
}
/* Inner text block — let it take the remaining horizontal space so the
   arrow sticks to the far right via margin-left:auto on .method-arrow. */
body.login-2026 .login-method-card > div:not(.method-icon) {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
body.login-2026 .login-method-card:hover {
    border-color: var(--ordolio-default-primary);
    box-shadow: var(--ordolio-shadow-md);
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--ordolio-bg-surface), var(--ordolio-default-primary) 2%);
}
body.login-2026 .login-method-card:focus-visible {
    outline: none;
    box-shadow: var(--ordolio-ring-focus);
}
body.login-2026 .method-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--ordolio-radius-md);
    background: var(--ordolio-default-primary-soft);
    color: var(--ordolio-default-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
body.login-2026 .method-icon-password,
body.login-2026 .method-icon-email {
    background: var(--ordolio-default-primary-soft);
    color: var(--ordolio-default-primary-dark);
}
body.login-2026 .method-icon i {
    font-size: 18px;
}
body.login-2026 .method-title {
    font-size: var(--ordolio-text-base);
    font-weight: var(--ordolio-weight-semibold);
    color: var(--ordolio-fg-default);
    margin-bottom: 2px;
}
body.login-2026 .method-description {
    font-size: var(--ordolio-text-sm);
    color: var(--ordolio-fg-muted);
    line-height: var(--ordolio-leading-snug);
    /* Defensive override — external.css sets .method-description to
       text-align: center which leaks through and visually indents the
       subtitle vs the left-aligned title. Force left so subtitle aligns
       with title's left edge. */
    text-align: left;
}
body.login-2026 .method-arrow {
    margin-left: auto;
    color: var(--ordolio-fg-subtle);
    font-size: 14px;
}

/* ----- Login-specific helpers --------------------------------------------- */

/* Remove the legacy .kt-form vertical margin so the form sits flush against
   the method-selection cards / brand title above it. */
body.login-2026 .kt-form {
    margin: 0;
}

/* The wrapper around action buttons (login submit, demo creds). The default
   spacing between form-group and the submit button needs a small top margin
   for visual rhythm. */
body.login-2026 .kt-login__actions {
    margin: var(--ordolio-space-2) 0 0;
}

/* Buttons inside the login form should fill the available width (the form
   is constrained to 420px max). Avoids the legacy auto-width behaviour. */
body.login-2026 .uv2-form .btn {
    width: 100%;
}

/* "Terug" back link shown when both magic-link and password methods are
   available — appears at the top of either inner form. */
body.login-2026 .login-back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ordolio-space-2);
    font-size: var(--ordolio-text-sm);
    color: var(--ordolio-fg-muted);
    text-decoration: none;
    margin-bottom: var(--ordolio-space-4);
}
body.login-2026 .login-back-btn:hover {
    color: var(--ordolio-default-primary);
}

/* Soft informational note above the magic-link email input. */
body.login-2026 .login-info-box {
    padding: var(--ordolio-space-3) var(--ordolio-space-4);
    background: var(--ordolio-default-primary-soft);
    color: var(--ordolio-default-primary-dark);
    border-radius: var(--ordolio-radius-md);
    font-size: var(--ordolio-text-sm);
    line-height: var(--ordolio-leading-snug);
    margin-bottom: var(--ordolio-space-4);
}

/* Forgot-password / re-send-activation links and any inline .kt-link inside
   the form. Smaller, primary-coloured, underline-on-hover. */
body.login-2026 .kt-login__link-forgot,
body.login-2026 .uv2-form .kt-link {
    color: var(--ordolio-default-primary);
    font-size: var(--ordolio-text-sm);
    text-decoration: none;
}
body.login-2026 .kt-login__link-forgot:hover,
body.login-2026 .uv2-form .kt-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ----- Registration CTA card --------------------------------------------- */

body.login-2026 .registration-cta {
    margin-top: var(--ordolio-space-8);
    padding: var(--ordolio-space-5);
    background: var(--ordolio-bg-surface-sunken);
    border: 1px solid var(--ordolio-border-subtle);
    border-radius: var(--ordolio-radius-lg);
    text-align: center;
}
body.login-2026 .registration-cta p {
    color: var(--ordolio-fg-muted);
    margin: 0 0 var(--ordolio-space-3);
    font-size: var(--ordolio-text-sm);
}

/* ----- Demo-mode credentials card (slug=demo only) ------------------------ */

body.login-2026 .lp-demo {
    margin-top: var(--ordolio-space-8);
    padding: var(--ordolio-space-6);
    background: var(--ordolio-bg-surface);
    border: 1px solid var(--ordolio-border-subtle);
    border-radius: var(--ordolio-radius-xl);
    box-shadow: var(--ordolio-shadow-md);
}
body.login-2026 .lp-demo__title {
    font-family: var(--ordolio-font-display);
    font-size: var(--ordolio-text-lg);
    font-weight: var(--ordolio-weight-semibold);
    letter-spacing: var(--ordolio-tracking-tight);
    margin: 0 0 var(--ordolio-space-2);
}
body.login-2026 .lp-demo__lead {
    font-size: var(--ordolio-text-sm);
    color: var(--ordolio-fg-muted);
    margin: 0 0 var(--ordolio-space-4);
}
body.login-2026 .lp-demo__cred {
    padding: var(--ordolio-space-3) var(--ordolio-space-4);
    background: var(--ordolio-bg-surface-sunken);
    border-radius: var(--ordolio-radius-md);
    margin-bottom: var(--ordolio-space-2);
    font-size: var(--ordolio-text-sm);
}
body.login-2026 .lp-demo__cred strong {
    display: block;
    font-size: var(--ordolio-text-xs);
    color: var(--ordolio-fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--ordolio-tracking-caps);
    margin-bottom: 2px;
    font-weight: var(--ordolio-weight-semibold);
}
body.login-2026 .lp-demo__cred code {
    font-family: var(--ordolio-font-mono);
    color: var(--ordolio-fg-default);
}
body.login-2026 .lp-demo__buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ordolio-space-2);
    margin-top: var(--ordolio-space-4);
}

/* ----- Language picker corner -------------------------------------------- */

body.login-2026 .language-picker-card-corner {
    position: absolute;
    top: var(--ordolio-space-5);
    right: var(--ordolio-space-5);
    z-index: 2;
}
@media (max-width: 899px) {
    body.login-2026 .language-picker-card-corner {
        top: var(--ordolio-space-3);
        right: var(--ordolio-space-3);
    }
}

/* ============================================================================
 * Mobile (<900px) — login-specific layout adjustments
 *
 * The ui-v2 library already handles: hero auto-height, form panel padding,
 * brand row hide, form-control 52px height + 16px font-size. This block only
 * adds login-specific tweaks the library can't know about (decorative quote
 * hide, login-method-card tighter padding).
 * ========================================================================== */

@media (max-width: 899px) {
    /* Decorative quote takes too much room — users would scroll past it to
       reach the form. Hide on mobile. */
    body.login-2026 .lp-hero__quote {
        display: none;
    }
    /* Org name has less breathing room below it on mobile. */
    body.login-2026 .uv2-hero__org {
        margin-bottom: 0;
    }
    /* Method cards slightly tighter padding for compact phones. */
    body.login-2026 .login-method-card {
        padding: var(--ordolio-space-4);
    }
    /* Touch-friendly button height — ui-v2 library covers .btn already but
       this catches the legacy .kt-login__btn-primary paths if they're hit. */
    body.login-2026 .uv2-form .btn {
        height: 52px;
    }
}