/* ==========================================================================
   Login Page Styles — ATLAS RBAC (Phase 38)
   ========================================================================== */

/* Login page layout */
body.page-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--atlas-space-4);
    background-color: #0a1628;
}

/* Page accent override */
body.page-login {
    --atlas-accent: #006DA3;
    --atlas-accent-hover: #005f8a;
}

/* Image background */
.login-image-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Dark overlay for readability */
body.page-login::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 22, 40, 0.55);
    z-index: 1;
}

.login-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
    padding: var(--atlas-space-8);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.login-brand {
    font-size: 2.75rem;
    font-weight: var(--atlas-weight-bold);
    letter-spacing: 0.15em;
    color: var(--atlas-accent);
    text-align: center;
    margin: 0 0 var(--atlas-space-1) 0;
}

.login-subtitle {
    font-size: var(--atlas-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--atlas-text-muted);
    text-align: center;
    margin: 0 0 var(--atlas-space-6) 0;
}

.login-btn {
    width: 100%;
    margin-top: var(--atlas-space-4);
}

.login-footer {
    font-size: var(--atlas-text-xs);
    color: var(--atlas-text-muted);
    text-align: center;
    margin-top: var(--atlas-space-6);
    margin-bottom: 0;
}

/* Visual divider between header and form */
.login-divider {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--atlas-border), transparent);
    margin: 0 var(--atlas-space-4) var(--atlas-space-6);
}

/* Password show/hide toggle */
.password-wrapper {
    position: relative;
}
.password-wrapper input {
    padding-right: 40px;
}
.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--atlas-text-muted);
    padding: 4px;
}
.password-toggle:hover {
    color: var(--atlas-text);
}

/* Error shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.shake {
    animation: shake 0.3s ease-in-out;
}

/* Alert spacing within login card */
.login-card .atlas-alert {
    margin-bottom: var(--atlas-space-4);
}