/* NE Design System — components/forms.css — Phase 2 (#65) */
/* Form inputs, selects, textareas */

.ne-input,
.ne-select,
.ne-textarea {
	width: 100%;
	padding: var(--ne-space-2) var(--ne-space-3);
	font-family: var(--ne-font-body);
	font-size: 0.875rem;
	color: var(--ne-text);
	background: var(--ne-surface);
	border: 1px solid var(--ne-border-s);
	border-radius: var(--ne-radius-md);
	outline: none;
	transition: border-color var(--ne-duration) var(--ne-ease),
	            box-shadow var(--ne-duration) var(--ne-ease);
}

.ne-input:focus,
.ne-select:focus,
.ne-textarea:focus {
	border-color: var(--ne-accent);
	box-shadow: 0 0 0 3px var(--ne-accent-glow);
}

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

.ne-textarea {
	min-height: 120px;
	resize: vertical;
}

.ne-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888580' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--ne-space-3) center;
	padding-right: var(--ne-space-7);
}

/* === Label === */
.ne-label {
	display: block;
	font-family: var(--ne-font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--ne-text-subtle);
	margin-bottom: var(--ne-space-2);
}

/* === Form group === */
.ne-form-group {
	margin-bottom: var(--ne-space-5);
}

/* === Checkbox / Radio === */
.ne-checkbox,
.ne-radio {
	display: inline-flex;
	align-items: center;
	gap: var(--ne-space-2);
	font-size: 0.875rem;
	color: var(--ne-text);
	cursor: pointer;
}

/*
 * === Composition: inputs inside elevated containers ===
 *
 * Surface hierarchy: --ne-bg (page) < --ne-surface (card) < --ne-elevated (hover/modal)
 *
 * Default input bg is --ne-surface, which is invisible inside ne-card (also --ne-surface).
 * When inputs live inside a card or modal, use --ne-bg for contrast.
 */
.ne-card .ne-input,
.ne-card .ne-select,
.ne-card .ne-textarea {
	background: var(--ne-bg);
}

/* Inside elevated containers (modals), inputs also need --ne-bg */
.ne-elevated .ne-input,
.ne-elevated .ne-select,
.ne-elevated .ne-textarea {
	background: var(--ne-bg);
}

/* === Disabled state === */
.ne-input:disabled,
.ne-select:disabled,
.ne-textarea:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* === Error state === */
.ne-input.is-error,
.ne-select.is-error {
	border-color: var(--ne-red);
}

.ne-form-error {
	font-size: 0.75rem;
	color: var(--ne-red);
	margin-top: var(--ne-space-1);
}