/*
 * Login + two-factor pages. Same look as the ERP consultant login (client.css ".bg-img.consultantBo"
 * and the Tailwind classes of consultant_login.html.twig), written as plain CSS on top of Bootstrap.
 */
:root {
    --c-primary: #DA291C;
    --c-lighter: #fadcde;
}

.auth-page {
    /* ERP .consultantBo: gold accent on a dark gradient */
    --c-primary: #c29a4c;
    --c-lighter: #c29a4c57;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(131.53deg, #0e151a 1.21%, #101820 44.34%, #1b261b 75.56%);
}
.auth-frame { position: relative; width: 100%; max-width: 650px; min-height: 720px; display: flex; flex-direction: column; justify-content: center; padding: 3.5rem; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); }
.auth-logo { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.auth-logo img { max-width: 250px; }
.auth-card { width: 100%; max-width: 28rem; margin: 0 auto; padding: 2.5rem; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }
.auth-title { margin: 0; font-size: 1.875rem; font-weight: 700; color: #0f172a; }
.auth-subtitle { margin: .5rem 0 0; color: #64748b; }
.auth-form { margin-top: 2rem; display: grid; gap: 1.25rem; }
.auth-label { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 600; color: #334155; }
.auth-input-wrap { position: relative; }
.auth-input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.auth-input { width: 100%; height: 3rem; padding: 0 1rem 0 2.75rem; border: 1px solid #cbd5e1; border-radius: .75rem; outline: none; }
.auth-input:focus { border-color: var(--c-lighter); box-shadow: 0 0 0 1px var(--c-lighter); }
.auth-toggle-password { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #94a3b8; }
.auth-error { padding: .75rem 1rem; border: 1px solid #fecaca; border-radius: .5rem; background: #fef2f2; color: #b91c1c; font-size: .875rem; }
.auth-button { width: 100%; height: 3rem; border: 0; border-radius: 999px; background: var(--c-primary); color: #fff; font-weight: 600; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1); transition: background-color .15s ease, color .15s ease; }
.auth-button:hover { background: var(--c-lighter); color: #111827; }
.auth-footer { margin-top: 2rem; font-size: .875rem; color: #fff; }
.auth-link { font-size: .875rem; color: #6b7280; text-decoration: none; border: 0; background: transparent; }
.auth-link:hover { color: #374151; }

/* Language switch (top-right of the frame) */
.auth-languages { position: absolute; top: 0; right: 0; display: inline-flex; border: 1px solid #e5e7eb; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.auth-languages a { padding: .5rem 1rem; font-size: .875rem; font-weight: 500; color: #4b5563; text-decoration: none; }
.auth-languages a:hover { background: #f3f4f6; color: #000; }
.auth-languages a.is-active { background: var(--c-lighter); color: #374151; }

/* Two-factor: six code boxes (ERP .otp-input) */
.otp-group { display: flex; justify-content: center; gap: .75rem; }
.otp-input { width: 50px; height: 56px; border: 1px solid #cbd5e1; border-radius: 1rem; background: #fff; text-align: center; font-size: 1.25rem; font-weight: 700; color: #0f172a; outline: none; }
.otp-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-lighter); }
.otp-group.has-error .otp-input { border-color: #ef4444; background: #fef2f2; }
.auth-help { margin: .5rem 0 0; text-align: center; font-size: .75rem; color: #6b7280; }

@media (max-width: 767.98px) {
    .auth-frame { padding: 1.25rem; min-height: auto; }
    .auth-card { padding: 1.5rem; }
    .auth-languages { position: fixed; }
}