/**
 * Form Component
 * 
 * Provides form control styles:
 * - Inline text inputs (name editing)
 * - Checkbox toggles with labels
 * 
 * Dependencies: variables.css
 * Used by: player-card.css, team-assignment.css
 */

/* ========================================
   Text Input (Inline Editing)
   ======================================== */

/* Name input (edit mode) */
.name-edit-input {
	flex: 1;
	padding: clamp(3px, 0.6vh, 5px) clamp(6px, 1vh, 8px);
	font-size: clamp(0.85rem, 1.6vh, 1rem);
	font-weight: var(--font-weight-medium);
	border: var(--border-width-thick) solid var(--color-primary);
	border-radius: var(--border-radius-base);
	min-width: 0;
	display: none; /* Hidden by default */
}

.name-edit-input:focus {
	outline: none;
	border-color: var(--color-primary-dark);
}

/* ========================================
   Checkbox Toggles
   ======================================== */

/* Board toggle (checkbox with label) */
.board-toggle-group {
	display: flex;
	align-items: center;
	gap: clamp(4px, 0.8vh, 6px);
}

.board-toggle-group label {
	display: flex;
	align-items: center;
	gap: clamp(4px, 0.8vh, 6px);
	font-size: clamp(0.75rem, 1.4vh, 0.85rem);
	margin: 0;
	cursor: pointer;
	user-select: none;
	color: var(--color-text-secondary);
}

.board-toggle-group input[type="checkbox"] {
	cursor: pointer;
}