/* =====================================================================
   Login page — Top Tobacco Parts Inventory
   ===================================================================== */

body.page-login {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-primary-light) 100%);
    padding:         var(--space-4);
}

/* ── Card ────────────────────────────────────────────────────────────── */
.login-card {
    width:         100%;
    max-width:     420px;
    background:    var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow:    var(--shadow-xl);
    overflow:      hidden;
}

/* ── Header with brand mark ─────────────────────────────────────────── */
.login-header {
    background:  linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    padding:     var(--space-8) var(--space-6);
    text-align:  center;
}
.login-header__logo {
    width:         72px;
    height:        72px;
    margin:        0 auto var(--space-4);
    background:    rgba(255,255,255,.15);
    border-radius: var(--radius-xl);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     36px;
    border:        2px solid rgba(255,255,255,.25);
}
.login-header h1 {
    color:       var(--color-text-inverse);
    font-size:   var(--font-size-xl);
    font-weight: 800;
    margin-bottom: var(--space-1);
}
.login-header p {
    color:       rgba(255,255,255,.7);
    font-size:   var(--font-size-sm);
}

/* ── Steps ───────────────────────────────────────────────────────────── */
.login-step {
    display:  none;
    padding:  var(--space-8) var(--space-6);
    animation:fadeIn var(--transition-base) ease both;
}
.login-step.active { display: block; }

.login-step h2 {
    font-size:     var(--font-size-lg);
    font-weight:   700;
    margin-bottom: var(--space-2);
}
.login-step .step-sub {
    color:         var(--color-text-muted);
    font-size:     var(--font-size-sm);
    margin-bottom: var(--space-6);
}

/* ── Confirm step: user name display ────────────────────────────────── */
.login-user-info {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    padding:       var(--space-4);
    background:    var(--color-bg-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
}
.login-user-info__avatar {
    width:          44px;
    height:         44px;
    background:     var(--color-primary);
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content:center;
    color:          #fff;
    font-weight:    700;
    font-size:      var(--font-size-lg);
    flex-shrink:    0;
}
.login-user-info__name  { font-weight: 600; }
.login-user-info__email { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ── Auth method buttons ─────────────────────────────────────────────── */
.auth-methods {
    display: flex;
    flex-direction: column;
    gap:     var(--space-3);
    margin-bottom: var(--space-4);
}
.auth-method-btn {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    padding:       var(--space-4);
    border:        2px solid var(--color-border);
    border-radius: var(--radius-md);
    background:    var(--color-bg-surface);
    color:         var(--color-text);
    cursor:        pointer;
    transition:    border-color var(--transition-fast), background var(--transition-fast);
    text-align:    left;
    width:         100%;
    font-size:     var(--font-size-sm);
    font-weight:   600;
}
.auth-method-btn:hover {
    border-color: var(--color-primary);
    background:   var(--color-bg-subtle);
}
.auth-method-btn__icon { font-size: 22px; flex-shrink: 0; }
.auth-method-btn__desc { font-size: var(--font-size-xs); font-weight: 400; color: var(--color-text-muted); margin-top: 2px; }

/* ── OTP digit display ───────────────────────────────────────────────── */
.otp-sent-info {
    background:    var(--color-info-bg);
    border:        1px solid var(--color-info-border);
    border-radius: var(--radius-md);
    padding:       var(--space-3) var(--space-4);
    font-size:     var(--font-size-sm);
    color:         var(--color-info);
    margin-bottom: var(--space-4);
}

/* ── Countdown / resend ──────────────────────────────────────────────── */
.resend-area {
    text-align:   center;
    margin-top:   var(--space-4);
    font-size:    var(--font-size-xs);
    color:        var(--color-text-muted);
}
.resend-btn {
    background:  none;
    border:      none;
    color:       var(--color-primary-light);
    cursor:      pointer;
    font-size:   var(--font-size-xs);
    font-weight: 600;
    padding:     0;
    text-decoration: underline;
}
.resend-btn:disabled { color: var(--color-text-muted); cursor: default; text-decoration: none; }

/* ── Error alert ─────────────────────────────────────────────────────── */
.login-error {
    background:    var(--color-danger-bg);
    border:        1px solid var(--color-danger-border);
    border-radius: var(--radius-md);
    padding:       var(--space-3) var(--space-4);
    color:         var(--color-danger);
    font-size:     var(--font-size-sm);
    margin-bottom: var(--space-4);
    display:       none;
}
.login-error.visible { display: block; }

/* ── Back link ───────────────────────────────────────────────────────── */
.login-back {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    color:       var(--color-text-muted);
    font-size:   var(--font-size-xs);
    cursor:      pointer;
    background:  none;
    border:      none;
    padding:     0;
    margin-bottom: var(--space-4);
}
.login-back:hover { color: var(--color-text); }

/* ── Success step ────────────────────────────────────────────────────── */
.login-success {
    text-align: center;
    padding:    var(--space-10) var(--space-6);
}
.login-success__check {
    font-size:     56px;
    margin-bottom: var(--space-4);
}
.login-success h2     { margin-bottom: var(--space-2); }
.login-success p      { color: var(--color-text-muted); font-size: var(--font-size-sm); }