/* ======================================================================
   MODERN ENTERPRISE AUTH THEME — shared by all account screens
   (Login, Forgot Password, Reset Password, Password Expired, Verify OTP).
   Scoped .erp-login-* / .erp-auth-* classes so nothing collides with the
   legacy .auth-wrapper / .card rules in style.css. Palette matches the ERP
   sidebar accent (premium purple #7C3AED). Change --erp-l-primary to rebrand.
   ====================================================================== */
:root {
    --erp-l-primary: #7C3AED;
    --erp-l-primary-2: #A855F7;
    --erp-l-primary-d: #6D28D9;
    --erp-l-ink: #1e2333;
    --erp-l-muted: #6b7280;
    --erp-l-border: #e3e6ef;
    --erp-l-field-bg: #f7f8fc;
    --erp-l-danger: #dc2626;
    --erp-l-danger-bg: #fef2f2;
    --erp-l-danger-bd: #fca5a5;
    --erp-l-success: #16a34a;
    --erp-l-success-bg: #f0fdf4;
    --erp-l-success-bd: #86efac;
    --erp-l-warn: #ea8a1e;
    --erp-l-warn-2: #f6b64b;
}

html, body { height: 100%; margin: 0; }

body {
    font-family: "Segoe UI", "Open Sans", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--erp-l-ink);
}

/* ── Page shell: subtle deep-slate gradient with faint purple glow ── */
.erp-login-page {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: auto;
    background: #eef1f8;
    background:
        radial-gradient(1100px 620px at 12% -8%, rgba(124, 58, 237, 0.18), transparent 60%),
        radial-gradient(900px 560px at 108% 112%, rgba(168, 85, 247, 0.16), transparent 58%),
        linear-gradient(135deg, #f5f6fb 0%, #eef0f8 100%);
}

/* ── Auth card ── */
.erp-login-card {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border: 1px solid rgba(226, 230, 239, 0.9);
    border-radius: 18px;
    box-shadow:
        0 24px 60px -20px rgba(35, 24, 74, 0.28),
        0 8px 22px -12px rgba(35, 24, 74, 0.16);
    padding: 40px 38px 34px;
    box-sizing: border-box;
}

/* ── Brand badge + heading ── */
.erp-login-badge {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    background: linear-gradient(135deg, var(--erp-l-primary) 0%, var(--erp-l-primary-2) 100%);
    box-shadow: 0 10px 22px -8px rgba(124, 58, 237, 0.6);
}
/* Warning variant (Password Expired) */
.erp-login-badge.warn {
    background: linear-gradient(135deg, var(--erp-l-warn) 0%, var(--erp-l-warn-2) 100%);
    box-shadow: 0 10px 22px -8px rgba(234, 138, 30, 0.55);
}

.erp-login-title {
    margin: 0 0 6px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--erp-l-ink);
}

.erp-login-subtitle {
    margin: 0 0 26px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--erp-l-muted);
}
.erp-login-subtitle b, .erp-login-subtitle strong { color: var(--erp-l-ink); }

/* ── Alerts (compact; success + danger variants) ── */
.erp-login-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 11px 14px;
    border: 1px solid var(--erp-l-danger-bd);
    background: var(--erp-l-danger-bg);
    color: #991b1b;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.4;
    text-align: left;
}
.erp-login-alert i { margin-top: 1px; color: var(--erp-l-danger); }
.erp-login-alert.success {
    border-color: var(--erp-l-success-bd);
    background: var(--erp-l-success-bg);
    color: #166534;
}
.erp-login-alert.success i { color: var(--erp-l-success); }

/* ── Fields ── */
.erp-field { position: relative; margin-bottom: 16px; }

.erp-field-icon {
    position: absolute;
    left: 15px;
    top: 25px;
    transform: translateY(-50%);
    color: #9aa2b4;
    font-size: 15px;
    pointer-events: none;
    transition: color 0.15s ease;
}

.erp-input {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 16px 0 44px;
    font-size: 14.5px;
    color: var(--erp-l-ink);
    background: var(--erp-l-field-bg);
    border: 1.5px solid var(--erp-l-border);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.erp-input::placeholder { color: #9aa2b4; }
.erp-input:focus {
    background: #fff;
    border-color: var(--erp-l-primary);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14);
}
.erp-field:focus-within .erp-field-icon { color: var(--erp-l-primary); }

/* password / toggle field has room for the show/hide button on the right */
.erp-field .erp-input.has-toggle { padding-right: 46px; }

.erp-pass-toggle {
    position: absolute;
    right: 6px;
    top: 25px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #9aa2b4;
    cursor: pointer;
    border-radius: 8px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
}
.erp-pass-toggle:hover { color: var(--erp-l-primary); background: rgba(124, 58, 237, 0.08); }

/* Inline field validation message (Reset Password) */
.erp-field .field-validation-error,
.erp-field-error {
    display: block;
    margin: 6px 2px 0;
    text-align: left;
    font-size: 12.5px;
    color: var(--erp-l-danger);
}

/* ── Save-credentials / checkbox row ── */
.erp-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 22px;
}

.erp-check { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.erp-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.erp-check .box {
    width: 18px;
    height: 18px;
    border: 1.5px solid #c3c9d8;
    border-radius: 5px;
    margin-right: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: all 0.15s ease;
}
.erp-check .box:after {
    content: "";
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.15s ease;
    margin-top: -1px;
}
.erp-check input:checked + .box {
    background: var(--erp-l-primary);
    border-color: var(--erp-l-primary);
}
.erp-check input:checked + .box:after { transform: rotate(45deg) scale(1); }
.erp-check input:focus-visible + .box { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18); }
.erp-check .txt { font-size: 13.5px; color: #4b5263; }

/* ── Password-policy checklist (Password Expired) ── */
.erp-checklist {
    list-style: none;
    margin: 2px 0 20px;
    padding: 14px 16px;
    text-align: left;
    background: var(--erp-l-field-bg);
    border: 1px solid var(--erp-l-border);
    border-radius: 12px;
    font-size: 13px;
    color: var(--erp-l-muted);
}
.erp-checklist li { display: flex; align-items: center; gap: 9px; padding: 3px 0; transition: color 0.15s ease; }
.erp-checklist li i { width: 15px; text-align: center; color: #b9c0d0; }
.erp-checklist li.ok { color: var(--erp-l-success); }
.erp-checklist li.ok i { color: var(--erp-l-success); }
.erp-checklist li.bad { color: var(--erp-l-danger); }
.erp-checklist li.bad i { color: var(--erp-l-danger); }

/* ── Primary button ── */
.erp-btn {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--erp-l-primary) 0%, var(--erp-l-primary-2) 100%);
    box-shadow: 0 12px 24px -10px rgba(124, 58, 237, 0.65);
    transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.erp-btn:hover { filter: brightness(1.04); box-shadow: 0 16px 30px -10px rgba(124, 58, 237, 0.7); }
.erp-btn:active { transform: translateY(1px); }
.erp-btn:disabled {
    cursor: not-allowed;
    filter: grayscale(0.15) brightness(0.98);
    opacity: 0.85;
    box-shadow: none;
}
.erp-btn .spin {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 9px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: erp-spin 0.7s linear infinite;
}
@keyframes erp-spin { to { transform: rotate(360deg); } }

/* ── Footer links (Back to login / Reset / Resend) ── */
.erp-forgot {
    margin: 22px 0 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--erp-l-muted);
}
.erp-forgot a {
    color: var(--erp-l-primary);
    font-weight: 600;
    text-decoration: none;
}
.erp-forgot a:hover { color: var(--erp-l-primary-d); text-decoration: underline; }

/* Row of subtle text/link buttons (Verify OTP: Resend / Back) */
.erp-linkrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 13.5px;
}
.erp-linkrow .sep { color: #c3c9d8; }
.erp-linkbtn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--erp-l-primary);
    text-decoration: none;
}
.erp-linkbtn:hover { color: var(--erp-l-primary-d); text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 480px) {
    .erp-login-card { padding: 32px 22px 26px; border-radius: 16px; }
    .erp-login-title { font-size: 22px; }
}