/* Only forms built from .form-group blocks (profile, tutorial quiz) get the
   stacked layout; Tailwind-based auth forms handle their own spacing. */
form:has(.form-group) {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-wrapper {
    --_color-background: hsl(216, 31%, 17%);
    --_color-border: hsl(215, 25%, 27%);

    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--_color-background);
    border: 1px solid var(--_color-border);
    border-radius: 0.5rem;
    /* clips the icon while it slides out to the left */
    overflow: hidden;
    transition: all .2s ease-in-out;

    &:has(input:focus-within) {
        --_color-background: var(--color-background);
        --_color-border: var(--color-primary);
    }

    /* Invalid state — two sources, same look:
    - [aria-invalid="true"]: server-side Django field errors (set by the snippets)
    - :user-invalid: client-side constraint validation, only after user interaction
        (plain :invalid would flag empty required fields on page load) */
    &:has(input:user-invalid),
    &:has(input[aria-invalid="true"]),
    &:has(select[aria-invalid="true"]) {
        --_color-border: hsla(357, 100%, 45%, 0.6);
    }

    &:has(input:user-invalid:focus),
    &:has(input[aria-invalid="true"]:focus),
    &:has(select[aria-invalid="true"]:focus) {
        --_color-border: hsl(357, 100%, 45%);
    }

    /* Icon and reveal button inherit the error color through the wrapper */
    &:has(input:user-invalid),
    &:has(input[aria-invalid="true"]) {
        color: hsl(357, 100%, 45%);
    }

    input {
        width: 100%;
        padding: 0.75rem 1rem;
        transition: inherit;

        /* &:focus-within, */
        &:not(:placeholder-shown) {
            background-color: var(--color-background, hsl(240, 21%, 15%));
        }

        &:disabled {
            opacity: 50%;
            cursor: not-allowed;
            pointer-events: none;
        }
    }

    .input-icon {
        position: absolute;
        left: 1rem;
        pointer-events: none;
        transition: all .2s ease-in-out;
    }
    &:has(.input-icon) input {
        padding-left: 3rem;
    }
    /* Icon slides out once the field is focused or filled */
    &:has(input:focus),
    &:has(input:not(:placeholder-shown)) {
        input {
            padding-left: 1rem;
        }

        .input-icon {
            left: -1.4rem;
        }
    }
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;

    input[type="checkbox"] {
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
        border-radius: 0.25rem;
        border: 1px solid var(--border, #334155);
        accent-color: var(--clr-accent);
        cursor: pointer;
    }
}