/* ═══════════════════════════════════════════════════════════════
   index.css — Login page styles
   Requires: style.css (tokens, body, flash banners)
   ═══════════════════════════════════════════════════════════════ */

/* Center the login card vertically + horizontally */
body {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Warmer orange gradient for the login page background */
body::before {
    background:
        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(249, 115, 22, .18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 80% 20%, rgba(249, 115, 22, .10) 0%, transparent 55%);
}

/* ── Login card ── */
.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2.5rem 2rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .5);
    position: relative;
    z-index: 1;
}

/* Brand icon shown above the login form */
.brand-icon {
    width: 56px;
    height: 56px;
    background: var(--dark-bg);
    border-radius: .75rem;
    padding: 10px;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 20px rgba(249, 115, 22, .4);
}

.login-card h1 {
    color: var(--text-bright);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.login-card p {
    color: var(--muted);
    font-size: .9rem;
    margin-bottom: 1.75rem;
}

/* Override label style — slightly less uppercase than dashboard/admin */
.login-card .form-label {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* Full-width submit button for the login form */
.btn-brand {
    width: 100%;
    justify-content: center;
    font-size: .95rem;
    padding: .7rem 1.25rem;
}