/* Login page — AzimutSuite / GWS restyle. Scoped under body.login-page so the
   shared global .auth-card / .form-control styles used elsewhere are untouched.
   Markup + JS (CSRF refresh, forms.js password toggle) are unchanged. */

.login-page {
    --al-navy: #2C3E50;
    --al-navy-deep: #1a2836;
    --al-ink: #1e293b;
    --al-muted: #64748b;
    --al-faint: #94a3b8;
    --al-line: #e2e8f0;
    --al-line-strong: #cbd5e1;
    --al-surface: #f8fafc;
    --al-radius: 12px;
    --al-radius-sm: 8px;
    --al-ring: 0 0 0 3px rgba(44, 62, 80, 0.10);
    --al-ease: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --al-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Card */
.login-page .auth-card {
    background: #fff; border: 1px solid var(--al-line);
    border-radius: var(--al-radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden; font-family: var(--al-sans);
}
.login-page .auth-card-secondary { margin-top: 1rem; background: var(--al-surface); }

/* Header: clean white with a navy title (drop the heavy navy bar) */
.login-page .auth-card-header {
    background: #fff; border: none; text-align: center; padding: 1.85rem 2rem 0;
}
.login-page .auth-title {
    font-family: var(--al-sans); font-weight: 600; font-size: 1.5rem;
    color: var(--al-navy) !important; letter-spacing: -0.01em; margin: 0;
}
.login-page .auth-card-body { padding: 1.5rem 2rem 2rem; }

/* Labels + inputs */
.login-page .form-label {
    font-family: var(--al-sans); font-size: 0.82rem; font-weight: 500;
    color: var(--al-ink); margin-bottom: 0.4rem;
}
.login-page .auth-input-group {
    border: 1.5px solid var(--al-line); border-radius: var(--al-radius-sm);
    overflow: hidden; background: #fff;
    transition: border-color var(--al-ease), box-shadow var(--al-ease);
}
.login-page .auth-input-group:focus-within { border-color: var(--al-navy); box-shadow: var(--al-ring); }
.login-page .auth-input-group .input-group-text {
    background: #fff; border: none; color: var(--al-faint); padding-left: 0.85rem;
}
.login-page .auth-input-group .form-control {
    border: none; box-shadow: none; background: #fff;
    font-family: var(--al-sans); font-size: 0.95rem; color: var(--al-ink); padding: 0.7rem 0.6rem;
}
.login-page .auth-input-group .form-control:focus { border: none; box-shadow: none; outline: none; }
.login-page .auth-input-group .form-control::placeholder { color: var(--al-faint); }
.login-page .auth-input-group .toggle-password {
    background: #fff; border: none; color: var(--al-muted); padding: 0 0.9rem; cursor: pointer;
    transition: color var(--al-ease);
}
.login-page .auth-input-group .toggle-password:hover { color: var(--al-navy); }

/* Remember me */
.login-page .form-check-label { color: var(--al-muted); }
.login-page .form-check-input { border-color: var(--al-line-strong); }
.login-page .form-check-input:checked { background-color: var(--al-navy); border-color: var(--al-navy); }
.login-page .form-check-input:focus { box-shadow: var(--al-ring); border-color: var(--al-navy); }

/* Buttons */
.login-page .btn-primary-custom {
    width: 100%; background: var(--al-navy); color: #fff; border: none;
    border-radius: var(--al-radius-sm); padding: 0.8rem 1.25rem;
    font-family: var(--al-sans); font-size: 0.9rem; font-weight: 600;
    transition: background-color var(--al-ease);
}
.login-page .btn-primary-custom:hover { background: var(--al-navy-deep); }
/* Secondary "Request account" card → outline button for hierarchy */
.login-page .auth-card-secondary .btn-primary-custom {
    background: #fff; color: var(--al-navy); border: 1.5px solid var(--al-line);
}
.login-page .auth-card-secondary .btn-primary-custom:hover { background: rgba(44, 62, 80, 0.04); border-color: var(--al-navy); }
.login-page .auth-card-secondary .text-center { padding: 1.5rem 2rem; }
.login-page .auth-card-secondary p { color: var(--al-muted); font-size: 0.9rem; }

/* Forgot link */
.login-page .forgot-link {
    color: var(--al-muted); font-size: 0.86rem; text-decoration: none; transition: color var(--al-ease);
}
.login-page .forgot-link:hover { color: var(--al-navy); }

/* Neutralize the global green/red is-valid/is-invalid validation coloring on
   login (forms.js adds is-valid to valid fields). The new design shows only the
   navy focus ring - no green tint, green right-border, or check/cross icon. */
.login-page .auth-input-group.is-valid,
.login-page .auth-input-group.is-invalid { border-color: var(--al-line); }
.login-page .auth-input-group.is-valid:focus-within,
.login-page .auth-input-group.is-invalid:focus-within { border-color: var(--al-navy); box-shadow: var(--al-ring); }
.login-page .auth-input-group.is-valid .input-group-text,
.login-page .auth-input-group.is-invalid .input-group-text,
.login-page .auth-input-group.is-valid .form-control,
.login-page .auth-input-group.is-invalid .form-control,
.login-page .auth-input-group.is-valid .toggle-password,
.login-page .auth-input-group.is-invalid .toggle-password {
    border-color: var(--al-line); background-color: #fff; background-image: none;
}
.login-page .auth-input-group.is-valid input[type="password"],
.login-page .auth-input-group.is-valid input[type="text"],
.login-page .auth-input-group.is-invalid input[type="password"],
.login-page .auth-input-group.is-invalid input[type="text"] { border-right: none; }