/* ============================================================
 * AUTH PAGES — RESPONSIVE DESIGN SYSTEM
 * ECO Platform | v1.7.9.1
 *
 * Breakpoint scale (Bootstrap 5):
 *   xs  : < 576px     → mobile portrait
 *   sm  : 576–767px   → mobile landscape / small tablet
 *   md  : 768–991px   → tablet
 *   lg  : 992–1199px  → laptop
 *   xl  : 1200–1399px → desktop
 *   xxl : ≥ 1400px    → wide desktop
 * ============================================================ */


/* ── 1. LOGO ─────────────────────────────────────────────── */

.auth-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
}


/* ── 2. LOGIN CARD SURFACE ───────────────────────────────── */

[data-bs-theme="light"] .login-form {
    background: #ffffff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
    border-radius: var(--ct-border-radius);
}

[data-bs-theme="dark"] .login-form {
    background-color: var(--ct-secondary-bg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
    border-radius: var(--ct-border-radius);
}


/* ── 3. HEADING ──────────────────────────────────────────── */

.login-form h3 {
    font-size: clamp(0.9375rem, 2vw, 1.125rem);
    letter-spacing: 0.01em;
}


/* ── 4. LABELS ───────────────────────────────────────────── */

.login-form .form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
}


/* ── 5. FORM CONTROLS — mobile-first (form-control-sm base) ── */

.login-form .auth-input {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}


/* ── 6. PASSWORD TOGGLE ───────────────────────────────────── */

.password-toggle {
    border: none !important;
    box-shadow: none !important;
    z-index: 2;
    line-height: 1;
}

.password-toggle i {
    font-size: 1rem;
    transition: color 0.1s ease;
}

.password-toggle:hover i,
.password-toggle:active i {
    color: var(--ct-add-btn-color);
}


/* ── 7. REMEMBER-ME / FORGOT-PASSWORD ROW ─────────────────── */

.auth-remember-row .form-check-label {
    font-size: 0.8125rem;
}

.auth-forgot-link {
    font-size: 0.8125rem;
    white-space: nowrap;
}


/* ── 8. SUBMIT BUTTON — base (mobile) ─────────────────────── */

.auth-submit-btn {
    font-size: 0.875rem;
    padding: 0.375rem 1rem;
    letter-spacing: 0.02em;
}


/* ── 9. FOOTER TEXT ───────────────────────────────────────── */

.auth-footer-text {
    font-size: 0.8125rem;
    color: var(--ct-text-hint);
}


/* ============================================================
 * RESPONSIVE OVERRIDES
 * ============================================================ */


/* ── XS TINY: phones < 360px ─────────────────────────────── */

@media (max-width: 359.98px) {
    .auth-logo {
        height: 36px;
    }

    .login-form {
        padding: 1rem !important;
    }

    /* Stack Remember me above Forgot Password on tiny screens */
    .auth-remember-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.375rem;
    }

    .auth-forgot-link {
        align-self: flex-end;
    }
}


/* ── XS: mobile portrait (< 576px) ───────────────────────── */

@media (max-width: 575.98px) {
    .auth-logo {
        height: 40px;
    }

    .login-form {
        border-radius: 0.75rem !important;
    }

    /* Wrap row gracefully if too narrow */
    .auth-remember-row {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }
}


/* ── MD: tablet (≥ 768px) — upgrade control sizes ─────────── */

@media (min-width: 768px) {
    .auth-logo {
        height: 46px;
    }

    .login-form h3 {
        font-size: 1.0625rem;
    }

    .login-form .form-label {
        font-size: 0.875rem;
    }

    /* Upgrade from form-control-sm → base size */
    .login-form .auth-input {
        padding: 0.4rem 0.75rem;
        font-size: 0.9375rem;
        min-height: 2.25rem;
    }

    .auth-submit-btn {
        padding: 0.45rem 1rem;
        font-size: 0.9375rem;
        min-height: 2.25rem;
    }

    .auth-remember-row .form-check-label,
    .auth-forgot-link {
        font-size: 0.875rem;
    }
}


/* ── LG: laptop (≥ 992px) — full comfortable sizing ──────── */

@media (min-width: 992px) {
    .auth-logo {
        height: 50px;
    }

    .login-form h3 {
        font-size: 1.125rem;
        margin-bottom: 1.25rem !important;
    }

    .login-form .form-label {
        font-size: 0.9375rem;
        margin-bottom: 0.35rem;
    }

    .login-form .auth-input {
        padding: 0.5rem 0.875rem;
        font-size: 1rem;
        min-height: 2.5rem;
    }

    .auth-submit-btn {
        padding: 0.5rem 1rem;
        font-size: 1rem;
        min-height: 2.5rem;
    }

    .auth-remember-row .form-check-label,
    .auth-forgot-link {
        font-size: 0.9375rem;
    }

    .auth-footer-text {
        font-size: 0.875rem;
    }
}


/* ── XXL: wide desktop (≥ 1400px) ────────────────────────── */

@media (min-width: 1400px) {
    .auth-logo {
        height: 54px;
    }

    .login-form h3 {
        font-size: 1.2rem;
    }

    .login-form .auth-input {
        padding: 0.5625rem 0.875rem;
        font-size: 1.0625rem;
        min-height: 2.625rem;
    }

    .auth-submit-btn {
        padding: 0.5625rem 1rem;
        font-size: 1.0625rem;
        min-height: 2.625rem;
    }
}