/*
    Login page-specific styles.
    Tokens come from auth-shared.css. Rules here only add login-specific
    chrome (password input-group with reveal button, inline "Forgot?" link,
    mobile-tightened spacing) without overriding shared selectors.
*/

/* === Form rows === */
.auth-page .auth-login-form .form-row {
    margin-left: 0;
    margin-right: 0;
}
.auth-page .auth-login-form .form-row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.auth-page .auth-login-form .auth-field {
    margin-bottom: 14px;
}

/* Inline icon on form labels — keeps the label width compact and aligned. */
.auth-page .auth-login-form .auth-field > label,
.auth-page .auth-login-form .auth-field .control-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* === Password field with overlay reveal button ===
   The toggle is a borderless icon button absolutely positioned inside the
   input's padding, so the field stays a single unbroken rectangle (no
   double borders, no height mismatch from .input-group cascade). */
.auth-page .auth-password-wrap {
    position: relative;
}
/* Specificity bump: auth-shared.css's `.auth-page .form-control` (0,2,0) loads
   after this file, so we need (0,3,0) to win for the right-side padding. */
.auth-page .auth-password-wrap > .auth-password-input {
    padding-right: 44px; /* leave room for the overlay button */
}
.auth-page .auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ds-muted);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
    z-index: 2;
}
.auth-page .auth-password-toggle:hover {
    color: var(--ds-primary);
    background: var(--ds-primary-soft);
}
.auth-page .auth-password-toggle:focus {
    color: var(--ds-primary);
    background: var(--ds-primary-soft);
    outline: none;
    box-shadow: 0 0 0 2px rgba(103,119,239,.30);
}
.auth-page .auth-password-toggle:focus:not(:focus-visible) {
    box-shadow: none;
}
.auth-page .auth-password-toggle i { font-size: .95rem; line-height: 1; }

/* invalid-feedback sits on its own line under the wrap. */
.auth-page .auth-password-wrap .invalid-feedback {
    width: 100%;
    margin-top: 4px;
}

/* === Inline "Forgot?" link beside the password label === */
.auth-page .auth-forgot-inline {
    font-size: .8rem;
    font-weight: 500;
    line-height: 1;
}

/* === Cloudflare Turnstile widget — center under the form fields === */
.auth-page .auth-turnstile {
    display: flex;
    justify-content: center;
    min-height: 65px;
}

/* === Sign-in submit button === */
.auth-page .auth-login-submit {
    letter-spacing: .02em;
}
.auth-page .auth-login-submit:disabled,
.auth-page .auth-login-submit.btn-progress {
    opacity: .8;
}
/* Turnstile-gated label swap + wait cursor live in auth-shared.css so they
   apply to every auth view that hosts a [data-turnstile-gated] submit button. */

/* === Brand block — keep the logo from overflowing on narrow viewports === */
.auth-page .login-brand {
    text-align: center;
}
.auth-page .login-brand img {
    max-width: 100%;
    height: auto;
}

/* === Mobile (≤575px): tighter rhythm + larger touch targets === */
@media (max-width: 575.98px) {
    .auth-page .auth-login-form .auth-field { margin-bottom: 12px; }
    .auth-page .auth-login-form .form-control-lg,
    .auth-page .auth-login-form .auth-password-input {
        font-size: .95rem;
        padding: 11px 12px;
    }
    .auth-page .auth-password-wrap > .auth-password-input { padding-right: 44px; }
    .auth-page .login-brand { margin-bottom: 14px; }
    .auth-page .login-brand img { max-width: 70%; }
    .auth-page .auth-aux { padding: 8px 10px; }
}

/* === Very small viewports (≤359px, e.g. small Android phones in portrait) === */
@media (max-width: 359.98px) {
    .auth-page .card-header { padding: 12px 14px; }
    .auth-page .card-body { padding: 14px; }
}

/* === Honour reduced-motion users === */
@media (prefers-reduced-motion: reduce) {
    .auth-page .auth-login-submit,
    .auth-page .auth-password-toggle,
    .auth-page .auth-password-input {
        transition: none;
    }
}