/*
 * WorkCampConnect — Auth Sub-page Styles
 * Used by /login/, /login/forgot.php, /login/reset.php, /login/2fa.php
 * These pages use header-global.php with body class "page-login".
 */

/* ── Card layout (default: centered single card — used by forgot/reset/2fa) ── */
.login-section {
    min-height:         calc(100vh - var(--nav-height));
    display:            flex;
    align-items:        center;
    justify-content:    center;
    padding:            var(--space-8) var(--space-4);
    background:
        radial-gradient(ellipse at 70% 10%, rgba(26,82,112,0.55) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(232,172,37,0.10) 0%, transparent 50%),
        linear-gradient(160deg, #0b1e2d 0%, #0f2840 50%, #081420 100%);
}

/* ── Split layout (login page with trial branding panel) ── */
.login-section--split {
    align-items:        stretch;
    justify-content:    stretch;
    padding:            0;
    background:         none;
}

.login-container {
    display:            grid;
    grid-template-columns: 1fr 1fr;
    width:              100%;
    min-height:         calc(100vh - var(--nav-height));
}

/* ── Brand Panel (Left) ── */
.login-panel--brand {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(26,82,112,0.6) 0%, transparent 60%),
        linear-gradient(160deg, #0b1e2d 0%, #0f2840 50%, #081420 100%);
    padding:            var(--space-10) var(--space-12) 0;
    display:            flex;
    flex-direction:     column;
    justify-content:    flex-start;
    position:           relative;
    overflow:           hidden;
}

.login-panel--brand::after {
    content:            '';
    display:            block;
    width:              calc(100% + var(--space-12) * 2);
    margin-left:        calc(var(--space-12) * -1);
    margin-top:         auto;
    height:             260px;
    background:         url('/assets/images/campsite.svg') center center / cover no-repeat;
    border-top:         3px solid rgba(255,255,255,0.22);
    flex-shrink:        0;
}

.login-brand__eyebrow {
    font-size:          var(--font-size-sm);
    font-weight:        var(--font-weight-semibold);
    text-transform:     uppercase;
    letter-spacing:     0.08em;
    color:              var(--color-accent);
    margin-bottom:      var(--space-2);
}

.login-brand__title {
    font-size:          var(--font-size-3xl);
    font-weight:        var(--font-weight-extrabold);
    color:              #ffffff;
    line-height:        var(--line-height-tight);
    margin-bottom:      var(--space-4);
}

.login-brand__subtitle {
    font-size:          var(--font-size-md);
    color:              rgba(255,255,255,0.70);
    line-height:        var(--line-height-relaxed);
    margin-bottom:      var(--space-10);
}

.login-brand__features {
    list-style:         none;
    margin:             0;
    padding:            0;
    display:            flex;
    flex-direction:     column;
    gap:                var(--space-6);
}

.login-brand__features li {
    display:            flex;
    gap:                var(--space-4);
    align-items:        flex-start;
}

.login-brand__icon {
    font-size:          1.75rem;
    flex-shrink:        0;
    width:              44px;
    height:             44px;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    background:         rgba(255,255,255,0.08);
    border-radius:      var(--radius-md);
}

.login-brand__features strong {
    display:            block;
    color:              #ffffff;
    font-size:          var(--font-size-base);
    font-weight:        var(--font-weight-semibold);
    margin-bottom:      var(--space-1);
}

.login-brand__features p {
    color:              rgba(255,255,255,0.55);
    font-size:          var(--font-size-sm);
    margin:             0;
}

.login-brand__cta {
    margin-top:         var(--space-8);
    align-self:         flex-start;
}

.login-brand__cta,
.login-brand__cta:visited {
    color:              #0b1e2d;
}

/* ── Form Panel (Right) ── */
.login-panel--form {
    background:
        radial-gradient(ellipse at 70% 10%, rgba(26,82,112,0.55) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(232,172,37,0.10) 0%, transparent 50%),
        linear-gradient(160deg, #0b1e2d 0%, #0f2840 50%, #081420 100%);
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    justify-content:    center;
    padding:            var(--space-12) var(--space-8);
    overflow-y:         auto;
}

.login-section--split .login-card {
    background:         rgba(255,255,255,0.04);
    border:             1px solid rgba(255,255,255,0.22);
    border-radius:      var(--radius-lg);
    box-shadow:         0 8px 32px rgba(0,0,0,0.3);
}

/* Desktop: hide the inline register link (branding panel handles it) */
.login-register-link--desktop {
    display:            none;
}

/* ── Mobile Trial Callout ── */
.login-trial-callout {
    display:            none;
    margin-top:         var(--space-6);
    max-width:          440px;
    width:              100%;
    padding:            var(--space-5) var(--space-6);
    background:         linear-gradient(135deg, rgba(232,172,37,0.12) 0%, rgba(232,172,37,0.06) 100%);
    border:             1px solid rgba(232,172,37,0.25);
    border-radius:      var(--radius-lg);
    text-align:         center;
}

.login-trial-callout p {
    color:              rgba(255,255,255,0.75);
    font-size:          var(--font-size-sm);
    margin-bottom:      var(--space-4);
    line-height:        var(--line-height-relaxed);
}

.login-trial-callout p strong {
    color:              var(--color-accent);
}

.login-trial-callout .btn {
    font-size:          var(--font-size-md);
}

.login-trial-callout .btn,
.login-trial-callout .btn:visited {
    color:              #0b1e2d;
}

.login-card {
    width:              100%;
    max-width:          440px;
    background:         rgba(255,255,255,0.04);
    border:             1px solid rgba(255,255,255,0.22);
    border-radius:      var(--radius-lg);
    padding:            var(--space-10) var(--space-8);
    box-shadow:         0 8px 32px rgba(0,0,0,0.3);
}

/* ── Logo ── */
.login-logo {
    display:            block;
    text-align:         center;
    margin-bottom:      var(--space-8);
}

.login-logo img {
    height:             48px;
    width:              auto;
    margin:             0 auto;
}

/* ── Section Label ── */
.site-section-label {
    text-align:         center;
    font-size:          0.8rem;
    letter-spacing:     0.08em;
    text-transform:     uppercase;
    color:              var(--color-text-muted);
    margin:             0 0 var(--space-2) 0;
    opacity:            0.7;
}

/* ── Header ── */
.login-header {
    text-align:         center;
    margin-bottom:      var(--space-8);
}

.login-header h2 {
    font-size:          var(--font-size-2xl);
    font-weight:        var(--font-weight-extrabold);
    color:              #fff;
    margin-bottom:      var(--space-1);
}

.login-header p {
    font-size:          var(--font-size-sm);
    color:              rgba(255,255,255,0.5);
}

/* ── Form layout ── */
.login-form {
    margin-bottom:      0;
}

/* ── Submit button ── */
.login-submit {
    margin-top:         var(--space-2);
    font-size:          var(--font-size-md);
}

/* ── Links ── */
.login-register-link {
    margin-top:         var(--space-6);
    text-align:         center;
    font-size:          var(--font-size-sm);
    color:              var(--color-text-muted);
}

.login-register-link a,
.login-register-link a:visited {
    color:              var(--color-accent);
    font-weight:        var(--font-weight-semibold);
    text-decoration:    none;
}

.login-register-link a:hover {
    text-decoration:    underline;
}

.login-forgot,
.login-forgot:visited {
    font-size:          var(--font-size-xs);
    color:              var(--color-accent);
    text-decoration:    none;
    font-weight:        var(--font-weight-medium);
}

.login-forgot:hover {
    text-decoration:    underline;
}

/* ── Password show/hide ── */
.input-password-wrap {
    position:           relative;
}

.input-password-wrap .form-input {
    padding-right:      48px;
}

.password-toggle {
    position:           absolute;
    right:              var(--space-3);
    top:                50%;
    transform:          translateY(-50%);
    background:         none;
    border:             none;
    cursor:             pointer;
    color:              var(--color-text-muted);
    padding:            var(--space-1);
    display:            flex;
    align-items:        center;
    transition:         color var(--transition-fast);
}

.password-toggle:hover { color: var(--color-accent); }

/* ── Auth shared utilities ── */
.auth-footer-text {
    text-align:         center;
    margin-top:         var(--space-6);
    font-size:          var(--font-size-sm);
    color:              var(--color-text-muted);
}

.auth-footer-text a,
.auth-footer-text a:visited {
    color:              var(--color-accent);
}

.auth-alert {
    margin-bottom:      var(--space-6);
}

.auth-btn-stack {
    display:            flex;
    flex-direction:     column;
    gap:                var(--space-3);
}

.auth-password-hint {
    display:            block;
    margin-top:         var(--space-1);
    font-size:          var(--font-size-xs);
    color:              rgba(255,255,255,0.4);
}

/* ── Turnstile ── */
.page-login .cf-turnstile {
    margin-bottom:      var(--space-2);
}

/* ── 2FA / TOTP ── */
.totp-input {
    font-family:        var(--font-family-mono);
    font-size:          var(--font-size-2xl);
    text-align:         center;
    letter-spacing:     0.4em;
    padding:            var(--space-4);
}

.totp-input--recovery {
    font-size:          var(--font-size-lg);
    letter-spacing:     0.2em;
    text-transform:     uppercase;
}

.totp-links {
    text-align:         center;
    margin-top:         var(--space-4);
}

.totp-toggle-link,
.totp-back-link {
    font-size:          var(--font-size-xs);
    color:              var(--color-text-muted);
    text-decoration:    none;
}

.totp-toggle-link:hover,
.totp-back-link:hover {
    color:              var(--color-accent);
    text-decoration:    underline;
}

.totp-toggle-link:visited,
.totp-back-link:visited {
    color:              var(--color-text-muted);
}

/* ── TOTP Digit Dashes ── */
.totp-digits {
    display:            flex;
    gap:                var(--space-3);
    justify-content:    center;
    margin-bottom:      var(--space-6);
}

.totp-digit {
    width:              2.5rem;
    height:             3rem;
    text-align:         center;
    font-family:        var(--font-mono);
    font-size:          1.75rem;
    font-weight:        var(--font-weight-bold);
    color:              #fff;
    background:         transparent;
    border:             none;
    border-bottom:      3px solid rgba(255,255,255,0.2);
    border-radius:      0;
    caret-color:        var(--color-accent);
    padding:            0;
    transition:         border-color 0.15s;
}

.totp-digit:focus {
    outline:            none;
    border-bottom-color: var(--color-accent);
}

.totp-digit::placeholder {
    color:              transparent;
}

/* ── Responsive: Split → Single Column ── */
@media (max-width: 900px) {
    .login-container {
        grid-template-columns: 1fr;
    }

    .login-panel--brand {
        display:        none;
    }

    .login-panel--form {
        min-height:     calc(100vh - var(--nav-height-mobile, var(--nav-height)));
        padding:        var(--space-8) var(--space-6);
        align-items:    center;
    }

    .login-register-link--desktop {
        display:        none;
    }

    .login-trial-callout {
        display:        block;
    }
}

@media (max-width: 480px) {
    .login-card {
        padding:        var(--space-8) var(--space-6);
        border:         none;
        box-shadow:     none;
        background:     transparent;
    }

    .login-section:not(.login-section--split) {
        align-items:    flex-start;
        padding-top:    var(--space-6);
    }

    .login-panel--form {
        padding:        var(--space-6) var(--space-4);
    }

    .login-trial-callout {
        padding:        var(--space-4);
    }
}

/* ── Phone Login Button ── */
.login-phone-btn {
    margin-top:         var(--space-3);
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    gap:                var(--space-2);
}

/* ── Login Phone OTP Page ── */
.login-phone-page {
    display:            flex;
    justify-content:    center;
    align-items:        flex-start;
    padding:            var(--space-10) var(--space-4);
    min-height:         calc(100vh - var(--nav-height));
}

.login-phone-card {
    width:              100%;
    max-width:          420px;
    text-align:         center;
    padding:            var(--space-8) var(--space-6);
    background:         var(--color-surface);
    border:             1px solid var(--color-border);
    border-radius:      var(--radius-lg);
}

.login-phone-card__icon {
    margin-bottom:      var(--space-4);
}

.login-phone-card__title {
    font-size:          var(--font-size-2xl);
    margin-bottom:      var(--space-2);
}

.login-phone-card__subtitle {
    color:              var(--color-text-muted);
    margin-bottom:      var(--space-6);
    line-height:        var(--line-height-normal);
}

.login-phone-card__back {
    margin-top:         var(--space-4);
    font-size:          var(--font-size-sm);
}

.login-phone-card__back a,
.login-phone-card__back a:visited {
    color:              var(--color-link);
}

@media (max-width: 480px) {
    .login-phone-card {
        padding:        var(--space-6) var(--space-4);
    }
}