/* ====================================================================== */
/*  Ofaami Enterprise Dashboard — Auth pages (port of reference auth.css) */
/* ====================================================================== */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    background:
        radial-gradient(circle at 15% 12%, rgba(108,79,232,.16), transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(29,158,117,.14), transparent 42%),
        radial-gradient(circle at 75% 12%, rgba(226,75,74,.08), transparent 38%),
        var(--bg);
    position: relative;
    background-size: cover;
}

.auth-page .app-footer, .auth-page .footer { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; border: 0; background: transparent; }

.auth-figure { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.auth-figure .orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; }
.auth-figure .orb-1 { width: 340px; height: 340px; background: radial-gradient(circle, rgba(108,79,232,.28), transparent 70%); top: -90px; left: -70px; }
.auth-figure .orb-2 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(29,158,117,.20), transparent 70%); bottom: -140px; right: -90px; }

.auth-card { position: relative; z-index: 2; width: 100%; max-width: 400px; background: var(--bg-card); padding: 30px 30px 26px; border-radius: var(--r-20); box-shadow: var(--shadow-lg); border: 1px solid var(--border); animation: authIn .35s ease; }
@keyframes authIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.auth-card .auth-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
.auth-card .auth-logo img { width: 44px; height: 44px; }
.auth-card .auth-logo .text { font-size: 19px; font-weight: 800; color: var(--text); }
.auth-card h2 { margin: 0; font-size: 21px; font-weight: 800; }
.auth-card .sub { color: var(--text-muted); font-size: 12.5px; margin: 6px 0 20px; line-height: 1.5; }

.auth-card .field { margin-bottom: 14px; }
.auth-card .field label { font-size: 11px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; display: block; }
.auth-card .input { padding: 10px 14px; border-radius: var(--r-12); font-size: 13px; }

.auth-card .btn-p { width: 100%; padding: 11px; border-radius: var(--r-12); font-size: 13px; font-weight: 700; }
.auth-card .remember-row { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; margin: 4px 0 14px; }
.auth-card .forgot { color: var(--primary); font-weight: 600; }
.auth-card .forgot:hover { text-decoration: underline; }
.auth-card .foot { margin-top: 18px; text-align: center; font-size: 11.5px; color: var(--text-muted); }
.auth-card .foot a { color: var(--primary); font-weight: 600; }

/* password visibility toggle */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 42px; }
.pw-wrap .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text-faint); cursor: pointer; border-radius: var(--r-8); }
.pw-wrap .pw-toggle:hover { color: var(--primary); }

.auth-card .error-box { background: var(--danger-soft); color: var(--danger-dark); border: 1px solid rgba(226,75,74,.3); border-radius: var(--r-12); padding: 10px 13px; font-size: 12px; margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
.auth-card .info-box { background: var(--primary-soft); color: var(--primary-darker); border: 1px solid var(--border); border-radius: var(--r-12); padding: 10px 13px; font-size: 12px; margin-bottom: 14px; }
.auth-card .recaptcha-box { margin: 2px 0 12px; display: flex; justify-content: center; }
.auth-card .caps-warn { font-size: 10.5px; color: var(--text-muted); margin-top: 8px; text-align: center; }

.auth-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; max-width: 980px; width: 100%; position: relative; z-index: 2; }
.auth-split .auth-brand h1 { font-size: 30px; font-weight: 800; margin: 0 0 10px; background: var(--primary-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.auth-split .auth-brand p { color: var(--text-muted); font-size: 13.5px; max-width: 400px; line-height: 1.6; }
.auth-split .feat-strip { display: grid; gap: 10px; margin-top: 22px; }
.auth-split .feat { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.auth-split .feat .mi { color: var(--success); font-size: 17px; }

@media (max-width: 767.98px) {
    .auth-split { grid-template-columns: 1fr; gap: 30px; }
    .auth-split .auth-brand { display: none; }
}