/* ============================================================
   forms.css
   ============================================================ */

.form-group   { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.form-row     { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }

.form-label   { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-text); }
.form-label--required::after { content: ' *'; color: var(--color-danger); }

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), box-shadow var(--transition);
    line-height: 1.5;
    appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(98,159,173,.18);
}
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid { border-color: var(--color-danger); }

.form-input::placeholder { color: #9CA3AF; }
.form-textarea { resize: vertical; min-height: 96px; }

/* Input with inline button */
.form-input-group {
    position: relative;
    display: flex;
}
.form-input-group .form-input { border-radius: var(--radius-md) 0 0 var(--radius-md); flex: 1; }
.form-input-addon {
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-2);
    border: 1.5px solid var(--color-border);
    border-left: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background var(--transition);
    font-size: var(--text-sm);
}
.form-input-addon:hover { background: var(--color-border); }

.form-hint    { font-size: var(--text-xs); color: var(--color-text-muted); }
.form-error   { font-size: var(--text-xs); color: var(--color-danger); }