@import url("shell-chrome.css");

/*
 * Auth Shell Layout
 *
 * Wraps every pre-platform view (login, register, PIN, password reset, password
 * update, imprint) in the same chrome the keyspotUIMockup defines:
 *   - vertical gradient navigation bar on the left with the Imprint anchor
 *   - light content panel with a rounded inner corner
 *   - centered card (28rem max) containing the form
 *
 * The gradient backgrounds are the SHARED --shell-gradient-* tokens from
 * shell-chrome.css (imported above), the same ones app-shell.css uses, so the
 * auth flow and the platform shell stay pixel-identical with no duplication.
 * All other colours reference the canonical mockup tokens (design-tokens.css).
 */

.auth-page {
    min-height: 100vh;
    background: var(--shell-gradient-horizontal);
    position: relative;
    overflow: hidden;
    display: flex;
}

.auth-gradient-bar {
    background: var(--shell-gradient-vertical);
    position: fixed;
    top: 0;
    left: 0;
    width: 6rem;
    height: 100vh;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 1.5rem;
}

.auth-imprint-link {
    /* Mockup §login-desktop: anchor sits on the green portion of the gradient
       at the bottom of the bar, so primary-700 (dark blue) gives the AA contrast.
       Layout is a row — § glyph + "Imprint" inline, not stacked. */
    color: var(--primary-700);
    fill: var(--primary-700);
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.3s ease, fill 0.3s ease;
}

.auth-imprint-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-bottom: 2px solid var(--primary-700);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease-in-out;
}

.auth-imprint-link:hover::before {
    transform: scaleX(1);
}

.auth-imprint-link:focus-visible {
    outline: 2px solid var(--secondary-300);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

.auth-imprint-icon {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.auth-content-wrapper {
    position: relative;
    z-index: 6;
    background: var(--greyscale-200);

    /* min-height must subtract the visible margin-top from the viewport so the
       wrapper + its 1.5rem gap fit in 100vh exactly. Using `100vh` here made
       the wrapper 100vh tall AFTER the margin, pushing the body 1.5rem past
       the viewport and forcing a scrollbar even when content was short. */
    min-height: calc(100vh - 1.5rem);
    border-top-left-radius: 1rem;
    margin-top: 1.5rem;
    margin-left: 6rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem;
}

.auth-card {
    width: 100%;
    max-width: 38rem;
    background: var(--greyscale-100);
    border-radius: 1rem;
    box-shadow:
        0 15px 25px 0 rgb(0 0 0 / 15%),
        0 5px 10px 0 rgb(0 0 0 / 5%);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-card-header {
    background: var(--primary-gradient);
    border-radius: 0.5rem;
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-logo {
    width: 100%;
    max-width: 14rem;
    height: auto;
}

.auth-card-subheading {
    font-family: Inter, Raleway, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-700);
    text-align: center;
    margin: 0;
    line-height: 1.2;
}

.auth-card-description {
    font-size: 0.875rem;
    color: var(--greyscale-700);
    text-align: center;
    margin: -0.5rem 0 0;
    padding: 0 0.5rem;
    line-height: 1.4;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block: 0.25rem;
}

.auth-divider-line {
    flex: 1;
    height: 1px;
    background: var(--greyscale-300);
}

.auth-divider-text {
    font-size: 0.875rem;
    color: var(--greyscale-700);
    text-transform: lowercase;
}

.auth-sso-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--primary-700);
    border-radius: 0.5rem;
    background: var(--greyscale-100);
    color: var(--primary-700);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
}

.auth-sso-button:hover {
    background: var(--primary-gradient);
    color: var(--greyscale-100);
    box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%);
}

.auth-sso-button:focus-visible {
    outline: 2px solid var(--primary-700);
    outline-offset: 2px;
}

.auth-sso-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* The `.auth-card .auth-secondary` block that used to live here was promoted
   into `utils.secondaryButton` / `utils.secondaryButtonInner` globally on
   2026-05-28 — the SSO-style look is now the default for every
   renderSecondaryButton across the app. If platform/admin need to revert,
   re-add a scoped variant here rather than re-splitting the constants. */

.auth-forgot-row {
    display: flex;
    justify-content: center;
    margin-top: -0.25rem;
}

.auth-forgot-link {
    color: var(--primary-700);
    font-size: 0.875rem;
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
}

.auth-forgot-link:hover,
.auth-forgot-link:focus-visible {
    color: var(--primary-900);
    outline: none;
}

/* The shell hosts the original fritz2 tabGroup but strips its outer chrome —
   shadow + border + radius live on .auth-card now, so the tabs sit flush. */
.auth-card .tabGroup {
    box-shadow: none;
    border: none;
    border-radius: 0;
    max-width: none;
}

.auth-card .tabList {
    border-bottom: 2px solid var(--greyscale-300);
}

.auth-card .tabListBtn,
.auth-card .tabListBtn:first-child,
.auth-card .tabListBtn:last-child {
    border-radius: 0;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 0.75rem 1rem;
    flex: 1;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    color: var(--greyscale-700);
    transition: color 150ms ease, border-color 150ms ease;
}

.auth-card .tabListBtn[aria-selected="true"] {
    color: var(--primary-700);
    font-weight: 600;
    border-bottom-color: var(--secondary-300);
    background: transparent;
}

.auth-card .tabListBtn[aria-selected="false"]:hover {
    color: var(--primary-700);
    background: transparent;
}

.auth-card .tabListBtn:focus-visible {
    outline: 2px solid var(--primary-700);
    outline-offset: -2px;
}

.auth-card .tabPanels {
    display: block;
    padding: 0;
    border: none;
    border-radius: 0;
}

/* The original heading + underline collide with .auth-card-subheading. Hide
   the per-tab heading inside the shell so we don't render "Login" twice. */
.auth-card .tabPanelHeading {
    display: none;
}

.auth-card .tabPanel {
    padding-top: 1rem;
}

.auth-card .tabPanelContent {
    max-width: none;
    margin-inline: 0;
}

/* Inputs inside the shell drop the horizontal padding because the card already
   sets it via .auth-card { padding: 1.5rem }. The vertical padding stays — the
   floating label uses top: -0.5em relative to .inputContainer's top edge, so
   zeroing the top padding pushes the label outside the container's clip box. */
.auth-card .inputContainer {
    padding-inline: 0;
}

/* `textInput` defaults to `marginBottom = true`, which adds a Tailwind `mb-4`
   on every .inputContainer. Platform forms need that because error messages
   are absolutely positioned and don't take layout space — `mb-4` reserves the
   gap. Inside the auth-card, messages are in-flow (see override above) AND
   the surrounding flex container already supplies `gap-4`, so the extra 1rem
   bottom margin stacks on top of the gap and the field-to-field spacing
   blows up. Zero it out here. Specificity (.auth-card .inputContainer.mb-4 =
   3 classes) wins over Tailwind's `.mb-4` (1 class), so no !important. */
.auth-card .inputContainer.mb-4 {
    margin-bottom: 0;
}

/* Hover / focus mirror the .auth-sso-button resting state — a 2px primary-700
   border with no drop shadow. The global input.css adds a heavy box-shadow on
   hover which fights the card's flat look, so suppress it inside the shell. */
.auth-card .inputTextfield:hover,
.auth-card .inputTextfield:focus,
.auth-card .inputTextfield:focus-visible {
    border: 2px solid var(--primary-700);
    box-shadow: none;
    outline: none;
}

/* Validation messages: the platform layout positions the container absolutely
   with align-items: flex-end and shrinks each .inputMessage to fit. Short
   errors look fine, but a multi-line error gets stranded — each line aligns
   to its own line box and the second line floats to the right with white
   space on its left (see registration screenshot 2026-05-28). The card
   scope drops the absolute positioning so wrapped errors push the next
   field down instead of overlapping it, stretches the message to the full
   container width, and right-aligns the text so every wrapped line stays
   anchored to the same edge.

   TODO (modularize): when platform/admin adopt the same wrap behavior,
   promote these four declarations to the base `.inputMessageContainer` /
   `.inputMessage` rules in `static/css/input.css` and delete the overrides
   below. Until then the duplication is intentional — changing the base
   rules now would shift every platform form's error positioning. */
.auth-card .inputMessageContainer {
    position: static;
    align-items: stretch;
    width: 100%;
    margin-right: 0;
}

.auth-card .inputMessage {
    margin-left: 0;
    text-align: right;
}

/* Password reveal toggle: swap the eye SVG for plain "Show" / "Hide" text the
   mockup specifies. Greyscale at rest, primary-700 on hover.

   The button is anchored to the *input field's* vertical center rather than
   the .inputContainer's center. Reason: when validation messages appear,
   .inputMessageContainer (position: static, see override above) pushes the
   container taller, which would drift a `top: 50%` button below the input.
   Three terms make the offset exact:
     • `1rem`  — container's 1em padding-top (em resolves against the
                 container's font-size = root 16px, NOT the button's smaller
                 0.875rem, so use rem to avoid the unit mismatch).
     • `var(--form-control-height) / 2` — half the input field's height,
                 from the top of the input to its vertical center.
     • `- 0.5em` — half the button text's own height (line-height: 1 + no
                 vertical padding → button height == font-size). em here
                 resolves against the button's font-size, so this correctly
                 pulls the button up by half *its own* text height. */
.auth-card .inputShow,
.auth-card .inputShow[aria-label="Show password"],
.auth-card .inputShow[aria-label="Hide password"] {
    /* Overlay the reveal toggle exactly onto the input field and center its text
       with flex. Both offsets mirror the real input geometry (input.css), so the
       toggle stays centered across viewport scaling and when validation messages
       push the container taller below the field.
         --reveal-field-top    = label line box + container gap = input's top edge
         --reveal-field-height = input content + padding + 2px×2 border          */
    --reveal-field-top: calc(var(--font-s) * var(--line-height-s) + var(--spacing-3xs));
    --reveal-field-height: calc(var(--font-n) * var(--line-height-n) + 2 * var(--spacing-xs) + 4px);

    display: flex;
    align-items: center;
    background: none;
    width: auto;
    height: var(--reveal-field-height);
    line-height: 1;
    color: var(--greyscale-700);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0 0.25rem;
    margin-right: 0;
    top: var(--reveal-field-top);
    transform: none;
    right: 0.75rem;
}

.auth-card .inputShow:hover,
.auth-card .inputShow:focus-visible {
    color: var(--primary-700);
    filter: none;
}

.auth-card .inputShow:focus-visible {
    outline: 2px solid var(--primary-700);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.auth-card .inputShow[aria-label="Show password"]::after {
    content: "Show";
}

.auth-card .inputShow[aria-label="Hide password"]::after {
    content: "Hide";
}

/* Mobile: gradient bar collapses to a 3.5rem strip at the bottom; the content
   panel goes edge-to-edge and the imprint anchor sits inline. */
@media (width <= 39.99rem) {
    .auth-page {
        background: var(--shell-gradient-mobile);
    }

    .auth-gradient-bar {
        position: fixed;
        inset: auto 0 0;
        width: 100%;
        height: 3.5rem;
        background: inherit;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .auth-imprint-link {
        /* Mobile bar sits over the dark central section of the gradient
           (--darkest0 from 8% to 92%), so flip the anchor to white. */
        color: var(--greyscale-100);
        fill: var(--greyscale-100);
        flex-direction: row;
        gap: 0.5rem;
    }

    .auth-imprint-link::before {
        border-bottom-color: var(--greyscale-100);
    }

    .auth-imprint-link:focus-visible {
        outline-color: var(--primary-600);
    }

    .auth-content-wrapper {
        border-top-left-radius: 0;
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 3.5rem;
        padding: 1rem;
        min-height: calc(100vh - 3.5rem);
    }
}