/* ============================================================
   CRMZap — Login Page (login.css)
   ============================================================ */

.login-body {
    background: var(--bg-base);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* --- Background orbs -------------------------------------- */
.login-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.login-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
}

.orb1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #25D366, transparent);
    top: -100px; left: -100px;
    animation: float1 8s ease-in-out infinite;
}
.orb2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #128C7E, transparent);
    bottom: -80px; right: 100px;
    animation: float2 10s ease-in-out infinite;
}
.orb3 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, #58a6ff, transparent);
    top: 50%; right: -50px;
    animation: float3 7s ease-in-out infinite;
}

@keyframes float1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,20px) scale(1.1); } }
@keyframes float2 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-20px,-30px) scale(1.05); } }
@keyframes float3 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-15px,25px); } }

/* --- Container -------------------------------------------- */
.login-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* --- Card ------------------------------------------------- */
.login-card {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px 32px;
    box-shadow: var(--shadow-lg), 0 0 60px rgba(37,211,102,.06);
    animation: fadeIn .5s ease;
}

/* --- Logo ------------------------------------------------- */
.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px;
}

.login-logo-icon {
    width: 50px; height: 50px;
    background: rgba(37,211,102,.1);
    border: 1px solid rgba(37,211,102,.2);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
}

.login-logo-text {
    font-size: 1.7rem;
    font-weight: 800;
    background: linear-gradient(135deg, #25D366, #128C7E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Titles ----------------------------------------------- */
.login-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 6px;
}
.login-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 24px;
}

/* --- Hint ------------------------------------------------- */
.login-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 14px;
}
.login-hint strong { color: var(--text-secondary); }

/* --- Footer ----------------------------------------------- */
.login-footer {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

/* --- Animations ------------------------------------------- */
.login-card { transition: box-shadow var(--transition); }
.login-card:focus-within { box-shadow: var(--shadow-lg), 0 0 60px rgba(37,211,102,.1); }