/**
 * 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: 7px;
        inset-inline-end: 7px;
        color: var(--color-input-text);
        pointer-events: none;
        font-size: var(--text-sm);
    }

    /* ========================================
       Form Styles (.iForm)
       ======================================== */
    .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);
    }

    .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: 16px;
        block-size: 16px;
        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);
        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-text-muted);
        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;
    }
}