/*
 * GYSMAP Forms Foundation
 *
 * Provides a clean, modern aesthetic for form controls (inputs, selects, textareas).
 * Ensures consistency across browsers and focuses on accessibility.
 */

.form-group {
	margin-bottom: var(--spacing-4);
}

.form-label {
	display: block;
	margin-bottom: var(--spacing-2);
	font-weight: 500;
	color: var(--text-primary);
	font-size: 0.875rem; /* 14px */
}

/* Inputs, Selects, and Textareas */
.form-control {
	display: block;
	width: 100%;
	padding: var(--spacing-2) var(--spacing-3);
	font-family: inherit;
	font-size: 1rem; /* 16px */
	line-height: inherit;
	color: var(--text-primary);
	background-color: var(--bg-primary);
	background-clip: padding-box;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control::placeholder {
	color: var(--text-muted);
	opacity: 1; /* Override Firefox */
}

/* Focus State */
.form-control:focus {
	color: var(--text-primary);
	background-color: var(--bg-primary);
	border-color: var(--border-color-focus);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); /* brand-primary with opacity */
}

/* Disabled/Readonly State */
.form-control:disabled,
.form-control[readonly] {
	background-color: var(--bg-secondary);
	opacity: 1; /* Override iOS */
	cursor: not-allowed;
}

/* Textarea specifically */
textarea.form-control {
	min-height: calc(1.5em + (var(--spacing-2) * 2) + 2px);
	resize: vertical;
}

/* Checkboxes and Radios */
.form-check {
	display: block;
	min-height: 1.5rem;
	padding-left: 1.5em;
	margin-bottom: var(--spacing-2);
}

.form-check-input {
	float: left;
	margin-left: -1.5em;
	width: 1em;
	height: 1em;
	margin-top: 0.25em;
	vertical-align: top;
	background-color: var(--bg-primary);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	border: 1px solid var(--border-color);
	appearance: none;
	print-color-adjust: exact;
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.form-check-input[type="checkbox"] {
	border-radius: 0.25em;
}

.form-check-input[type="radio"] {
	border-radius: 50%;
}

.form-check-input:checked {
	background-color: var(--brand-primary);
	border-color: var(--brand-primary);
}

.form-check-input:focus {
	border-color: var(--border-color-focus);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.form-check-label {
	color: var(--text-secondary);
	font-size: 0.875rem; /* 14px */
}

/* Validation States */
.is-invalid {
	border-color: var(--color-error);
}

.is-invalid:focus {
	border-color: var(--color-error);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); /* color-error with opacity */
}

.invalid-feedback {
	display: none;
	width: 100%;
	margin-top: var(--spacing-1);
	font-size: 0.875rem; /* 14px */
	color: var(--color-error);
}

.is-invalid ~ .invalid-feedback {
	display: block;
}