/* ============================================================
   AUTH SHELL - one unified styling supporting all auth pages
   ============================================================ */

/* ── Auth design tokens ── */
:root {
    --auth-panel: #243660; /* form panel background (Frontend navy) */
    --auth-text: #ffffff; /* primary input / heading text */
    --auth-muted: #718aad; /* labels, sub-text, placeholders */
    --auth-border: rgba(255, 255, 255, 0.28); /* idle input underline */
    --auth-border-focus: #3183f5; /* focused input underline / accent */
    --auth-accent: #3183f5; /* primary button (Frontend blue) */
    --auth-accent-hover: #4a91ff;
    --auth-error: #ff7d7d;
    --auth-trans: 0.25s cubic-bezier(.4, 0, .2, 1);
}

/* ════════════════════════════════════════
   TWO-PANEL SHELL
   ════════════════════════════════════════ */
.auth-shell {
    display: flex;
    width: 100%;
    min-height: 100vh;
    height: 100vh; /* fill viewport on desktop, no inner scroll */
    font-family: Urbanist, sans-serif;
    background: var(--auth-panel);
    overflow: hidden;
}

/* ── LEFT: image panel ── */
.auth-visual {
    flex: 1 1 55%;
    min-width: 0; /* allow flex item to shrink below content width */
    position: relative;
    overflow: hidden;
    min-height: 0; /* prevents flex blow-out */
}

    .auth-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1);
        transition: transform 7s ease;
    }

    .auth-visual:hover img {
        transform: scale(1.06);
    }

    .auth-visual::after { /* subtle navy wash for contrast */
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(26,45,90,0.06) 0%, rgba(36,54,96,0.55) 100%);
        pointer-events: none;
    }

/* ── RIGHT: form panel ── */
.auth-panel {
    flex: 0 0 45%;
    min-width: 0; /* flex item must be allowed to shrink, otherwise a wide
                     descendant (MudGrid, a long value) forces overflow */
    display: flex;
    align-items: center; /* centre card vertically… */
    justify-content: center;
    position: relative;
    /* Soft corner glow is painted INTO the panel background so it is clipped
       to the box and can never overflow. (The previous off-canvas ::before at
       right:-140px, combined with overflow-y:auto promoting overflow-x to auto,
       was the source of the persistent horizontal scrollbar.) */
    background: radial-gradient(440px 440px at calc(100% + 60px) -60px, rgba(49,131,245,.13) 0%, transparent 60%),
                var(--auth-panel);
    overflow-x: hidden; /* this column never scrolls sideways by design */
    overflow-y: auto; /* …but tall forms may scroll vertically */
    padding: 40px 40px;
    min-height: 0;
}

/* ── FORM CARD ──
   margin:auto centres the card when there is spare room, yet still
   allows the panel to scroll when the form is taller than the panel. */
.auth-card {
    width: 100%;
    max-width: 380px;
    margin: auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ════════════════════════════════════════
   BRAND / LOGO
   ════════════════════════════════════════ */
.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    animation: authFadeUp .6s ease both;
}

    .auth-brand .frey-logo,
    .auth-brand .frey-brand-text {
        display: block;
        height: auto;
    }

/* ════════════════════════════════════════
   HEADINGS
   ════════════════════════════════════════ */
.auth-head {
    text-align: center;
    margin-bottom: 26px;
    animation: authFadeUp .5s ease both .05s;
}

.form-title {
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--auth-text);
    margin: 0 0 6px;
    letter-spacing: -.01em;
}

.form-sub {
    font-family: Urbanist, sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--auth-muted);
    margin: 0;
}

/* ════════════════════════════════════════
   FORM AREA
   ════════════════════════════════════════ */
.auth-form {
    width: 100%;
    animation: authFadeUp .5s ease both .1s;
}

/* MudForm should always fill the card — kills the old fixed 320px width */
.auth-card .mud-form {
    width: 100% !important;
    font-family: Urbanist, sans-serif;
}

.auth-card .mud-grid {
    width: 100%;
    margin: 0;
}

    .auth-card .mud-grid > .mud-grid-item {
        padding-top: 4px;
        padding-bottom: 4px;
    }

/* ── Inputs (underline style on navy) ── */
.auth-card .mud-input-control {
    margin-top: 2px;
}

.auth-card .mud-input > input.mud-input-root,
.auth-card .mud-input-slot.mud-input-root {
    color: var(--auth-text);
    font-family: Urbanist, sans-serif;
    font-size: 15px;
    padding: 10px 0;
    background: transparent;
}

    .auth-card .mud-input > input.mud-input-root::placeholder {
        color: var(--auth-muted);
        opacity: 1;
    }

/* underline: idle (::before) + focus accent (::after) */
.auth-card .mud-input.mud-input-underline::before {
    border-bottom: 1px solid var(--auth-border);
}

.auth-card .mud-input.mud-input-underline::after {
    border-bottom: 2px solid var(--auth-border-focus);
}

/* labels (used when a Label rather than Placeholder is set) */
.auth-card .mud-input-label {
    color: var(--auth-muted);
    font-family: Urbanist, sans-serif;
}

.auth-card .mud-input-label.mud-input-label-shrink {
    color: var(--auth-border-focus);
}

/* password eye / end adornment — inline, brand-coloured
   (overrides the old absolute red-background debug rule) */
.auth-card .mud-input-adornment .mud-icon-button {
    color: var(--auth-muted);
    background: transparent;
}

    .auth-card .mud-input-adornment .mud-icon-button:hover {
        color: var(--auth-text);
        background: transparent;
    }

.auth-card .mud-input-adornment .mud-icon-root {
    color: inherit;
}

/* validation messages */
.auth-card .mud-input-helper-text {
    font-family: Urbanist, sans-serif;
    font-size: 12.5px;
}

.auth-card .mud-input-helper-text.mud-input-error,
.auth-card .mud-input-error-text {
    color: var(--auth-error);
}

.auth-card .mud-input-error .mud-input.mud-input-underline::after {
    border-bottom-color: var(--auth-error);
}

/* autofill — keep navy background, white text */
.auth-card .mud-input > input.mud-input-root:-webkit-autofill,
.auth-card .mud-input > input.mud-input-root:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--auth-panel) inset !important;
    caret-color: var(--auth-text);
}

/* ════════════════════════════════════════
   PRIMARY BUTTON
   ════════════════════════════════════════ */
.auth-card .auth-submit-btn.mud-button-root {
    width: 100%;
    margin-top: 18px;
    padding: 12px 16px;
    border-radius: 8px;
    background-color: var(--auth-accent) !important;
    color: #fff !important;
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: .01em;
    box-shadow: 0 4px 16px rgba(49,131,245,.30);
    transition: background-color var(--auth-trans), transform .15s, box-shadow .2s;
}

    .auth-card .auth-submit-btn.mud-button-root:hover {
        background-color: var(--auth-accent-hover) !important;
        transform: translateY(-1px);
        box-shadow: 0 7px 22px rgba(49,131,245,.40);
    }

    .auth-card .auth-submit-btn.mud-button-root:active {
        transform: none;
    }

/* keep button readable while loading/disabled and force a WHITE spinner
   (was rendering black because the disabled state inherits a dark colour) */
.auth-card .auth-submit-btn.mud-button-root.mud-button-disabled,
.auth-card .auth-submit-btn.mud-button-root:disabled {
    background-color: var(--auth-accent) !important;
    color: #fff !important;
    opacity: .7;
}

.auth-card .auth-submit-btn .mud-button-label,
.auth-card .auth-submit-btn .mud-typography {
    color: #fff !important;
    font-family: Urbanist, sans-serif;
}

.auth-card .auth-submit-btn .mud-progress-circular {
    color: #fff !important;
}

    .auth-card .auth-submit-btn .mud-progress-circular .mud-progress-circular-circle {
        stroke: #fff !important;
    }

/* ════════════════════════════════════════
   CHECKBOXES (terms / privacy)
   ════════════════════════════════════════ */
.auth-card .checkbox-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
    width: 100%;
}

    .auth-card .checkbox-container label,
    .auth-card .checkbox-container .mud-typography {
        font-family: Urbanist, sans-serif;
        font-size: 13px;
        color: var(--auth-muted);
        margin: 0;
    }

    .auth-card .checkbox-container a {
        color: var(--auth-accent);
        text-decoration: none;
        cursor: pointer;
    }

        .auth-card .checkbox-container a:hover {
            color: var(--auth-text);
            text-decoration: underline;
        }

.auth-card .legal-info-chkbox.mud-button-root {
    background: none !important;
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0 2px 0 0;
    box-shadow: none;
}

.auth-card .legal-info-chkbox .mud-icon-root.mud-svg-icon {
    fill: var(--auth-muted);
}

/* success alert */
.auth-card .mud-alert {
    width: 100%;
    margin-bottom: 12px;
}

/* ════════════════════════════════════════
   FOOTER LINKS
   ════════════════════════════════════════ */
.form-footer {
    width: 100%;
    margin-top: 22px;
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    color: var(--auth-muted);
    text-align: center;
}

    .form-footer a,
    .form-footer .link-btn {
        color: var(--auth-text);
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        transition: color var(--auth-trans);
    }

        .form-footer a:hover,
        .form-footer .link-btn:hover {
            color: var(--auth-accent);
        }

.link-btn{
    color: var(--auth-text);
}

.ghost-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    background: none;
    border: none;
    text-align: center;
    font-family: Urbanist, sans-serif;
    font-size: 14px;
    color: var(--auth-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--auth-trans);
}

    .ghost-btn:hover {
        color: var(--auth-accent);
    }

/* secondary action button (e.g. EmailConfirmation → Login) */
.auth-card .confirm-btn-pos {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
}

.auth-card .auth-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 12px 32px;
    border-radius: 8px;
    background: var(--auth-accent);
    color: #fff;
    font-family: Urbanist, sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--auth-trans), transform .15s;
}

    .auth-card .auth-link-btn:hover {
        background: var(--auth-accent-hover);
        transform: translateY(-1px);
        color: #fff;
    }

/* ════════════════════════════════════════
   VERSION BADGE
   ════════════════════════════════════════ */
.version-badge {
    margin-top: 22px;
    text-align: center;
    width: 100%;
}

    .version-badge span {
        font-family: Urbanist, sans-serif;
        font-size: 12px;
        color: rgba(255, 255, 255, .35);
        letter-spacing: .03em;
    }

/* ════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════ */
@keyframes authFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ════════════════════════════════════════
   RESPONSIVE
   Breakpoints map to the requested device tiers:
     • ≥1367px  large desktop  (base rules above)
     • 1025–1366 small laptop  (tuned spacing)
     • 768–1024 tablet         (stack ≤960)
     • 481–767  large phone
     • 320–480  small phone
   Plus a short-viewport guard for landscape phones.
   ════════════════════════════════════════ */

/* Small laptops — slightly tighter panel padding so 7-field forms fit */
@media (max-width: 1366px) {
    .auth-panel {
        padding: 32px 40px;
        flex-basis: 46%;
    }

    .auth-brand {
        margin-bottom: 22px;
    }

    .auth-head {
        margin-bottom: 22px;
    }
}

/* Tablet & below — stack the panels vertically.
   Visual on top, form panel grows to fill the rest with no white gap. */
@media (max-width: 960px) {
    .auth-shell {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow: visible; /* let the page scroll naturally; nothing bleeds sideways */
    }

    .auth-visual {
        flex: none;
        width: 100%;
        height: clamp(220px, 34vh, 360px);
        flex-shrink: 0;
    }

        .auth-visual::after {
            background: linear-gradient(to bottom, rgba(26,45,90,0.05) 0%, rgba(36,54,96,0.62) 100%);
        }

    .auth-panel {
        flex: 1 1 auto;
        width: 100%;
        padding: 40px 40px 56px;
        overflow: visible; /* no inner scroll when stacked — the page scrolls */
    }
}

/* Large phones */
@media (max-width: 767px) {
    .auth-visual {
        height: clamp(180px, 28vh, 280px);
    }

    .auth-panel {
        padding: 32px 28px 48px;
    }

    .auth-card {
        max-width: 420px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .auth-visual {
        height: clamp(150px, 24vh, 220px);
    }

    .auth-panel {
        padding: 26px 20px 40px;
    }

    .auth-card {
        max-width: 100%;
    }

    .form-title {
        font-size: 22px;
    }

    .auth-brand {
        margin-bottom: 20px;
    }

    .auth-head {
        margin-bottom: 18px;
    }

    /* keep paired name fields side-by-side but allow them to shrink cleanly */
    .auth-card .mud-grid > .mud-grid-item {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Short / landscape viewports — shrink the image so the form stays usable */
@media (max-height: 640px) and (max-width: 960px) {
    .auth-visual {
        height: clamp(120px, 22vh, 180px);
    }

    .auth-panel {
        padding-top: 24px;
        padding-bottom: 32px;
    }
}