/* ============================================================
   input.css
   Usage: Text inputs, selects, textareas
   Philosophy: Minimal borders, clear focus state, readable
   ============================================================ */

.input,
.select,
.textarea {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border: 0.5px solid var(--separator);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    color: var(--text-primary);
    line-height: 1.4;
    transition: border-color var(--duration-fast) var(--ease-smooth),
                background-color var(--duration-fast) var(--ease-smooth);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-tertiary);
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: var(--separator-opaque);
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--info);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 3px var(--info-subtle);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Error state */
.input--error,
.select--error,
.textarea--error {
    border-color: var(--danger);
}

.input--error:focus {
    box-shadow: 0 0 0 3px var(--danger-subtle);
}

/* Numeric input — enforce tabular-nums */
.input--numeric {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Label */
.input-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-footnote);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* Helper/error text */
.input-helper {
    margin-top: var(--space-2);
    font-size: var(--text-footnote);
    color: var(--text-tertiary);
}

.input-helper--error {
    color: var(--danger);
}

/* Group: label + input + helper */
.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-4);
}

.textarea {
    min-height: 100px;
    resize: vertical;
    font-family: var(--font-sans);
}