/*
 * Q-smart HelpDesk - login (staff authentication) layout
 * Requires bifra_tokens.css + bifra_components.css (loaded first).
 * Only auth-specific layout lives here; fields, buttons, alerts and the
 * skip link come from bifra_components.css (.hd-app).
 */

/* ---------- Centred auth shell ---------- */
body.hd-auth .hd-auth-main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--hd-space-7) var(--hd-space-4);
}
body.hd-auth .hd-auth-card {
    width: 100%;
    max-width: 420px;
    padding: var(--hd-space-6);
    background: var(--hd-card);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

body.hd-auth .hd-auth-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--hd-space-4);
    border-radius: var(--hd-radius);
    background: var(--hd-muted);
    color: var(--hd-accent);
    font-size: 1.125rem;
}
body.hd-auth .hd-auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 var(--hd-space-2) 0;
}
body.hd-auth .hd-auth-subtitle {
    font-size: 0.9375rem;
    color: var(--hd-muted-fg);
    margin: 0 0 var(--hd-space-5) 0;
}

/* Password field + reveal toggle */
body.hd-auth .hd-pass-wrap { position: relative; }
body.hd-auth .hd-pass-wrap .hd-input { padding-right: 52px; }
body.hd-auth .hd-pass-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;                      /* touch target */
    height: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0 var(--hd-radius) var(--hd-radius) 0;
    color: var(--hd-muted-fg);
    cursor: pointer;
    font-size: 1rem;
}
body.hd-auth .hd-pass-toggle:hover { color: var(--hd-accent); }
body.hd-auth .hd-pass-toggle:focus {
    outline: 3px solid var(--hd-ring);
    outline-offset: -3px;
    color: var(--hd-accent);
}

body.hd-auth .hd-submit { width: 100%; margin-top: var(--hd-space-5); }

/* ---------- Footer link ---------- */
body.hd-auth .hd-auth-foot {
    margin-top: var(--hd-space-5);
    padding-top: var(--hd-space-4);
    border-top: 1px solid var(--hd-border);
    font-size: 0.9375rem;
    color: var(--hd-muted-fg);
}

/* reCAPTCHA widget: keep it inside the card on narrow screens */
body.hd-auth .hd-captcha { margin-top: var(--hd-space-4); overflow-x: auto; }

@media (prefers-reduced-motion: no-preference) {
    body.hd-auth .hd-auth-card {
        opacity: 0;
        transform: translateY(12px);
        animation: hd-enter 350ms var(--hd-ease) forwards;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.hd-auth .hd-auth-card { opacity: 1; transform: none; }
}

@media (max-width: 575.98px) {
    body.hd-auth .hd-auth-main { padding: var(--hd-space-5) var(--hd-space-3); }
    body.hd-auth .hd-auth-card { padding: var(--hd-space-5); }
    body.hd-auth .hd-auth-title { font-size: 1.375rem; }
}