/* MW Autos IMS - sign-in page. Standalone layout (no shell). Uses the tokens from site.css.
   ASCII only (rule 8). */

.login-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    color: #fff;
    background: linear-gradient(-45deg, #173a73, #0f1f3d, #2f6fd1, #0b2a52);
    background-size: 400% 400%;
    animation: gradientShift 16s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.glass-card {
    width: 100%;
    max-width: 420px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    animation: cardRise 0.6s var(--ease-out) both;
}

@keyframes cardRise {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.login-logo {
    font-size: 2.6rem;
    color: #fff;
}

.login-muted {
    color: rgba(255, 255, 255, 0.78);
}

.login-body .form-control {
    min-height: 44px;
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.6);
    color: #16202e;
}

.login-body .form-control:focus {
    border-color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.35);
}

.login-body .form-floating > label {
    color: #5b6779;
}

.password-field {
    position: relative;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    min-width: 44px;
    min-height: 44px;
    color: #16202e;
    z-index: 5;
}

.field-error {
    color: #ffd7d2;
}

.login-button {
    min-height: 48px;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: #fff;
    color: #173a73;
    border: none;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.login-button:hover:not(:disabled) {
    background: #eef4ff;
    color: #0f1f3d;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.login-button:active:not(:disabled) {
    transform: scale(0.98);
}

.login-body .alert-danger {
    background: rgba(180, 35, 24, 0.85);
    border: none;
    color: #fff;
}

/* Error alert shakes on failure (class added by login.js). */
.shake {
    animation: shake 0.45s var(--ease-out);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

@media (prefers-reduced-motion: reduce) {
    .login-body,
    .glass-card,
    .shake {
        animation: none !important;
    }
}