@import "style.css";
@import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";

/* ======== AUTH LAYOUT ======== */
body.auth-page { background: var(--wb-climablu); min-height: 100vh; display: flex; justify-content: center; align-items: center; }

.auth-box { background: #fff; border-radius: 1rem; box-shadow: 0 0 25px rgba(0,0,0,0.1); padding: 2rem 2.5rem; width: 100%; max-width: 420px; text-align: center; }

.auth-box .logo { max-width: 220px; height: auto; display: block; margin: 0 auto 1.5rem auto; }

.auth-title { font-size: 1.5rem; font-weight: 600; color: var(--wb-climablu); margin-bottom: 1.5rem; }

.auth-box .form-control { border-radius: 0.5rem; padding: 0.75rem 1rem; font-size: 1rem; margin-bottom: 1rem; position: relative; }

/* ======== PASSWORD FIELD ======== */
.password-wrapper { position: relative; }

.password-wrapper .toggle-password { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); font-size: 1.1rem; line-height: 1; color: var(--wb-climagrey); cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; }

.password-wrapper input.form-control { padding-right: 2.4rem !important; }

.password-wrapper .toggle-password:hover { color: var(--wb-climablu); }

i.bi.bi-eye-slash.toggle-password.text-muted { margin-top: 16px !important;}

/* ======== RESPONSIVE AUTH ======== */
@media (max-width: 768px) {
    body.auth-page { background: var(--wb-climablu); padding: 2rem 1rem; align-items: flex-start; }
    .auth-box { padding: 1.5rem 1.25rem; border-radius: 0.75rem; box-shadow: 0 0 18px rgba(0,0,0,0.15); max-width: 100%; width: 100%; margin-top: 2rem; }
    .auth-box .logo { max-width: 160px; margin-bottom: 1.25rem; }
    .auth-title { font-size: 1.25rem; margin-bottom: 1rem; }
    .auth-box .form-control { font-size: 0.95rem; padding: 0.65rem 1rem; }
    .auth-box .btn-clima { font-size: 1rem; padding: 0.65rem; border-radius: 0.5rem; }
    .auth-links { flex-direction: column; text-align: center; gap: 0.5rem; }
    .password-wrapper .toggle-password { right: 10px; font-size: 1rem; }
}