/**
 * Forms Component Styles
 *
 * This file contains all styles for form elements including:
 * - Form layout containers
 * - Custom select dropdowns
 * - Input fields, textareas, checkboxes
 * - Buttons
 * - Form validation states
 */

@layer components.forms {
    /* ========================================
       Custom Select
       ======================================== */
    div.select {
        position: relative;
        border: var(--border-width) solid var(--color-input-border-dark);
        block-size: 35px;
        border-radius: var(--radius-sm);
        background: var(--color-input-bg);
    }

    div.select select {
        inline-size: 100%;
    }

    div.select::after {
        content: "\25BC";
        position: absolute;
        inset-block-start: 50%;
        transform: translateY(-50%);
        inset-inline-end: 7px;
        color: var(--color-input-text);
        pointer-events: none;
        font-size: var(--text-sm);
    }

    /* ========================================
       Form Styles (.iForm)
       ======================================== */

    /* Inputs inherit the page type: at the browser default 13.3px iOS zooms
       the page on focus, and the form face differed from the body face. */
    .iForm input,
    .iForm textarea,
    .iForm select {
        font-family: inherit;
        font-size: 1rem;
    }

    /* Dark background + text for all input types */
    .iForm input[type=text],
    .iForm input[type=password],
    .iForm input[type=number],
    .iForm input[type=date],
    .iForm input[type=datetime-local],
    .iForm textarea,
    .iForm select {
        background-color: var(--color-input-bg);
        color: var(--color-input-text);
    }

    /* Muted placeholder text */
    .iForm input::placeholder,
    .iForm textarea::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }

    .iForm table,
    .iForm input[type=text],
    .iForm textarea {
        inline-size: 100%;
        border: var(--border-width) solid var(--color-input-border-dark);
        block-size: 35px;
        padding-inline-start: var(--space-2);
        border-radius: var(--radius-sm);
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .iForm input[type=text]:focus,
    .iForm input[type=password]:focus,
    .iForm textarea:focus,
    .iForm select:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(78, 145, 201, 0.2);
        outline: none;
    }

    .iForm select {
        border: none;
        block-size: 100%;
        appearance: none;
        -webkit-appearance: none;
        padding-inline-start: var(--space-2);
        background-color: var(--color-input-bg);
        color: var(--color-input-text);
    }

    .iForm input[type=password] {
        inline-size: 100%;
        border: var(--border-width) solid var(--color-input-border-dark);
        block-size: 35px;
        padding-inline-start: var(--space-2);
        border-radius: var(--radius-sm);
    }

    .iForm label {
        margin-block: var(--space-2);
        display: inline-block;
        font-weight: var(--font-weight-normal);
    }

    .iForm input,
    .iForm input[type=number] {
        block-size: 35px;
        border: var(--border-width) solid var(--color-input-border);
        outline: none;
        appearance: none;
        -webkit-appearance: none;
        border-radius: var(--radius-sm);
    }

    .iForm input[type=number] {
        inline-size: 100%;
    }

    /* ----------------------------------------
       Checkbox Styles
       ---------------------------------------- */
    .iForm input[type=checkbox] {
        inline-size: 1.5rem;
        block-size: 1.5rem;
        border: var(--border-width) solid var(--color-input-border);
        background: var(--color-input-bg);
        inset-block-start: 5px;
        position: relative;
        color: var(--color-input-text);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background-color var(--transition-fast);
    }

    .iForm input[type=checkbox]:checked {
        background-color: var(--color-success);
    }

    .iForm input[type=checkbox]:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* ----------------------------------------
       Textarea Styles
       ---------------------------------------- */
    .iForm textarea {
        padding-block-start: var(--space-2);
        inline-size: 100%;
        min-block-size: 100px;
        resize: vertical;
    }

    /* ========================================
       Buttons
       ======================================== */
    .deleteBtn {
        background-color: var(--color-error);
        border: var(--border-width) solid var(--color-input-border-dark);
        block-size: 30px;
        color: var(--color-text-bright);
        outline: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background-color var(--transition-fast);
    }

    .deleteBtn:hover {
        background-color: var(--color-error-dark);
    }

    .deleteBtn:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* ----------------------------------------
       Submit & Action Buttons
       ---------------------------------------- */
    .iForm input[type=submit],
    .iForm button {
        background-color: var(--color-primary-fill);
        color: var(--color-text-bright);
        border: none;
        padding: var(--space-2) var(--space-4);
        block-size: auto;
        min-block-size: 40px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: var(--text-base);
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: background-color var(--transition-fast), transform var(--transition-fast);
    }

    .iForm input[type=submit]:hover,
    .iForm button:hover {
        background-color: var(--color-primary-dark);
        transform: translateY(-1px);
    }

    .iForm input[type=submit]:active,
    .iForm button:active {
        transform: translateY(0);
    }

    .iForm input[type=submit]:focus-visible,
    .iForm button:focus-visible {
        outline: 2px solid var(--color-text-bright);
        outline-offset: 2px;
    }

    .iForm input[type=submit]:disabled,
    .iForm button:disabled {
        background-color: var(--color-bg-elevated);
        color: var(--color-text-muted);
        border: 1px solid var(--color-input-border-dark);
        cursor: not-allowed;
        transform: none;
    }

    /* ========================================
       Form Validation
       ======================================== */
    .reqField {
        display: inline-block;
        font-size: var(--text-xs);
        color: var(--color-error);
        margin-inline-start: var(--space-3);
        font-weight: var(--font-weight-bold);
    }

    input.withError {
        border: var(--border-width) solid var(--color-error) !important;
    }

    /* Hint text under or above a field (replaces inline 12px styles) */
    .form-hint {
        font-size: var(--text-sm);
        color: var(--color-text);
        margin-block: var(--space-1) var(--space-3);
    }

    /* SceneID sign-in: a real button around the badge, so it has a name
       and a place in the tab order */
    .sceneIdAuth {
        background: none;
        border: 0;
        padding: 0;
        cursor: pointer;
        border-radius: var(--radius-sm);
    }

    .sceneIdAuth img {
        display: block;
        inline-size: 200px;
        block-size: auto;
    }

    .sceneIdAuth:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* Phones: fields and buttons reach the 44px touch target */
    @media (max-width: 699px) {
        .iForm input[type=text],
        .iForm input[type=password],
        .iForm input[type=number],
        .iForm input[type=date],
        .iForm input[type=datetime-local],
        div.select {
            block-size: 44px;
        }

        .iForm input[type=submit],
        .iForm button {
            min-block-size: 44px;
        }
    }
}