/*
 * .input — text input, also used for email, password, number, search, tel, url.
 *
 * Invalid state: add aria-invalid="true" to the input; color + ring go destructive.
 */

.input {
    display: flex;
    width: 100%;
    height: var(--space-10);
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    line-height: 1;
    color: var(--color-foreground);
    background-color: var(--color-background);
    border: 1px solid var(--color-input);
    border-radius: var(--radius-md);
    transition:
        border-color var(--duration-normal) var(--ease-in-out),
        box-shadow   var(--duration-normal) var(--ease-in-out);
}

.input::placeholder {
    color: var(--color-muted-foreground);
}

.input:focus-visible {
    outline: none;
    border-color: var(--color-ring);
    box-shadow:
        0 0 0 2px var(--color-background),
        0 0 0 4px var(--color-ring);
}

.input[aria-invalid="true"] {
    border-color: var(--color-destructive);
}

.input[aria-invalid="true"]:focus-visible {
    box-shadow:
        0 0 0 2px var(--color-background),
        0 0 0 4px var(--color-destructive);
}

.input[disabled],
.input[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-muted);
}

/* ─── Sizes ────────────────────────────────────────── */
.input-sm {
    height: var(--space-8);
    font-size: var(--text-xs);
}

.input-lg {
    height: var(--space-12);
    font-size: var(--text-base);
    padding: 0 var(--space-4);
}

/* ─── Textarea variant ────────────────────────────── */
.textarea {
    display: block;
    width: 100%;
    min-height: calc(var(--space-10) * 2);
    padding: var(--space-2-5) var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-foreground);
    background-color: var(--color-background);
    border: 1px solid var(--color-input);
    border-radius: var(--radius-md);
    resize: vertical;
    transition:
        border-color var(--duration-normal) var(--ease-in-out),
        box-shadow   var(--duration-normal) var(--ease-in-out);
}

.textarea:focus-visible {
    outline: none;
    border-color: var(--color-ring);
    box-shadow:
        0 0 0 2px var(--color-background),
        0 0 0 4px var(--color-ring);
}

.textarea[aria-invalid="true"] {
    border-color: var(--color-destructive);
}

/* ─── Select variant ──────────────────────────────── */
.select {
    display: flex;
    width: 100%;
    height: var(--space-10);
    padding: 0 var(--space-8) 0 var(--space-3);
    font-size: var(--text-sm);
    line-height: 1;
    color: var(--color-foreground);
    background-color: var(--color-background);
    border: 1px solid var(--color-input);
    border-radius: var(--radius-md);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px 16px;
    cursor: pointer;
}

.select:focus-visible {
    outline: none;
    border-color: var(--color-ring);
    box-shadow:
        0 0 0 2px var(--color-background),
        0 0 0 4px var(--color-ring);
}

/* ─── Checkbox ─────────────────────────────────────── */
.checkbox {
    width: var(--space-4);
    height: var(--space-4);
    border: 1px solid var(--color-input);
    border-radius: var(--radius-sm);
    background-color: var(--color-background);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    transition: background-color var(--duration-normal) var(--ease-in-out);
    appearance: none;
}

.checkbox:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.checkbox:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--color-background),
        0 0 0 4px var(--color-ring);
}

/* ─── Input with prefix/suffix (input-group) ──────── */
.input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-input);
    border-radius: var(--radius-md);
    background-color: var(--color-background);
    overflow: hidden;
}

.input-group:focus-within {
    border-color: var(--color-ring);
    box-shadow:
        0 0 0 2px var(--color-background),
        0 0 0 4px var(--color-ring);
}

.input-group > .input {
    border: 0;
    box-shadow: none;
    flex: 1;
}

.input-group > .input:focus-visible {
    box-shadow: none;
    border: 0;
}

.input-group-addon {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-muted-foreground);
    background-color: var(--color-muted);
    border-left: 1px solid var(--color-border);
}

.input-group > .input-group-addon:first-child {
    border-left: 0;
    border-right: 1px solid var(--color-border);
}