/* ==========================================================================
   Forms — base input, select, checkbox, radio, textarea
   ========================================================================== */

@layer base {
    /* --------------------------------------------------------------------------
       Text inputs & textarea
    -------------------------------------------------------------------------- */
    .form-input,
    .form-textarea,
    .form-select,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="url"],
    textarea,
    select {
        display: block;
        width: 100%;
        padding: var(--space-2) var(--space-3);
        background: var(--color-vault-raised);
        border: 1px solid var(--color-olive-deep);
        border-radius: var(--radius-base);
        color: var(--color-text-primary);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        line-height: var(--leading-normal);
        transition:
            border-color var(--transition-fast),
            box-shadow var(--transition-fast);
        appearance: none;
        -webkit-appearance: none;
    }

    .form-input:hover,
    textarea:hover,
    select:hover {
        border-color: var(--color-olive-mid);
    }

    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus,
    input[type="text"]:focus,
    input[type="search"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    input[type="password"]:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: var(--color-purple);
        box-shadow: 0 0 0 3px rgba(155, 81, 224, 0.2);
    }

    ::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }

    textarea {
        resize: vertical;
        min-height: 100px;
    }

    /* --------------------------------------------------------------------------
       Select
    -------------------------------------------------------------------------- */
    select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23BFB59A' stroke-width='2' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-3) center;
        background-size: 16px;
        padding-right: var(--space-8);
        cursor: pointer;
    }

    select option {
        background: var(--color-vault);
        color: var(--color-text-primary);
    }

    /* --------------------------------------------------------------------------
       Checkboxes & radios
    -------------------------------------------------------------------------- */
    .form-check {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        cursor: pointer;
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
        user-select: none;
    }

    .form-check input[type="checkbox"],
    .form-check input[type="radio"] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        appearance: none;
        -webkit-appearance: none;
        background: var(--color-vault-raised);
        border: 1px solid var(--color-olive-deep);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background var(--transition-fast), border-color var(--transition-fast);
        position: relative;
    }

    .form-check input[type="radio"] {
        border-radius: var(--radius-full);
    }

    .form-check input[type="checkbox"]:checked,
    .form-check input[type="radio"]:checked {
        background: var(--color-purple);
        border-color: var(--color-purple);
    }

    .form-check input[type="checkbox"]:checked::after {
        content: '';
        position: absolute;
        top: 2px; left: 5px;
        width: 4px; height: 7px;
        border: 2px solid #fff;
        border-top: none;
        border-left: none;
        transform: rotate(45deg);
    }

    .form-check input[type="radio"]:checked::after {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 6px; height: 6px;
        background: #fff;
        border-radius: var(--radius-full);
        transform: translate(-50%, -50%);
    }

    .form-check:hover input[type="checkbox"],
    .form-check:hover input[type="radio"] {
        border-color: var(--color-purple-light);
    }

    /* --------------------------------------------------------------------------
       Toggle switch
    -------------------------------------------------------------------------- */
    .form-toggle {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        cursor: pointer;
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
    }

    .form-toggle__track {
        position: relative;
        width: 36px;
        height: 20px;
        background: var(--color-vault-raised);
        border: 1px solid var(--color-olive-deep);
        border-radius: var(--radius-full);
        transition: background var(--transition-base);
        flex-shrink: 0;
    }

    .form-toggle__thumb {
        position: absolute;
        top: 2px; left: 2px;
        width: 14px; height: 14px;
        background: var(--color-stone-dark);
        border-radius: var(--radius-full);
        transition: transform var(--transition-base), background var(--transition-base);
    }

    .form-toggle input:checked + .form-toggle__track {
        background: var(--color-purple);
        border-color: var(--color-purple);
    }

    .form-toggle input:checked + .form-toggle__track .form-toggle__thumb {
        transform: translateX(16px);
        background: #fff;
    }

    .form-toggle input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* --------------------------------------------------------------------------
       Form groups and labels
    -------------------------------------------------------------------------- */
    .form-group {
        margin-bottom: var(--space-4);
    }

    .form-label {
        display: block;
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--color-text-secondary);
        margin-bottom: var(--space-2);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
    }

    .form-hint {
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        margin-top: var(--space-1);
    }

    .form-error {
        font-size: var(--text-xs);
        color: var(--color-error);
        margin-top: var(--space-1);
    }

    /* --------------------------------------------------------------------------
       Search input with icon
    -------------------------------------------------------------------------- */
    .search-input-wrap {
        position: relative;
    }

    .search-input-wrap input {
        padding-left: var(--space-10);
    }

    .search-input-wrap .search-icon {
        position: absolute;
        left: var(--space-3);
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        color: var(--color-text-muted);
        pointer-events: none;
    }
}