/* theme/components.css
 * Layer: components
 * Base component styles: headings, body text, inputs, buttons
 * 
 * This file defines styled HTML elements and base components:
 * - Typography (headings h1-h6, paragraphs, inline text)
 * - Code blocks (code, kbd, samp, pre)
 * - Form elements (inputs, buttons, labels)
 * - Cards (header, body, footer)
 * - Alerts (info, success, warning, error)
 * - Badges (default and status variants)
 * - Tables (striped, compact)
 */

@layer components {
	/* ─── Headings ──
	 * h1-h6 with text-box-trim for precise vertical alignment
	 * Uses CSS logical properties and design tokens
	 */
	h1, h2, h3, h4, h5, h6 {
		text-box-trim: trim-both; /* Remove leading/trailing half-leading space */
		text-box-edge: cap alphabetic; /* Align to cap height and baseline */
		/* trim removes leading → box collapses to cap-height (< line-height).
		   Without restored margin, trimmed boxes butt/overlap in tight layouts
		   (cards, grids). Margin now defines the real gap. */
		margin-block-end: var(--marg-sm);
	}
	h1 {
		font-size: var(--text-2xl);  
		font-weight: var(--font-bold);
		line-height: var(--leading-tight);
		letter-spacing: var(--tracking-tight);
	}
	h2 {
		font-size: var(--text-xl);     
		font-weight: var(--font-semibold); 
		line-height: var(--leading-tight);
		letter-spacing: var(--tracking-tight);
	}
	h3 {
		font-size: var(--text-lg); 
		font-weight: var(--font-semibold);
		line-height: var(--leading-snug);
	}
	h4 {
		font-size: var(--text-md);    
		font-weight: var(--font-semibold);
		line-height: var(--leading-snug);
	}
	h5 {
		font-size: var(--text-base);   
		font-weight: var(--font-medium);
		line-height: var(--leading-normal);
	}
	h6 {
		font-size: var(--text-sm);    
		font-weight: var(--font-medium);
		line-height: var(--leading-normal);
		letter-spacing: var(--tracking-wide); 
		text-transform: uppercase;
	}

	/* ─── Body Text ──
	 * Paragraphs and inline text elements
	 */
	p {
		font-size: var(--text-base);
		line-height: var(--leading-relaxed); /* 1.625 for readability */
		color: var(--color-text);
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
		margin-block-end: var(--marg-md);
	}

	/* trimmed boxes have no leading to absorb a trailing margin — drop it on
	   the last flow child so cards/containers don't gain phantom bottom space */
	:is(h1, h2, h3, h4, h5, h6, p):last-child {
		margin-block-end: 0;
	}
	small {
		font-size: var(--text-xs); /* 11px - captions, metadata */
		color: var(--color-text-muted);
	}
	strong {
		font-weight: var(--font-semibold);
	}
	
	/* ─── Code Elements ──
	 * Inline code and code blocks with monospace font
	 */
	code,
	kbd,
	samp,
	pre {
		font-family: var(--font-mono);
		font-size: var(--text-sm);
	}
	code {
		background: var(--color-surface-alt);
		padding: 0.1em 0.35em;
		border-radius: var(--radius-sm);
		border: var(--border-width) solid var(--color-border);
	}
	pre {
		padding: var(--pad-md);
		border-radius: var(--radius-md);
		background: var(--color-surface-alt);
		overflow-x: auto; /* Horizontal scroll for long lines */
		& code {
			background: none;
			padding: 0;
			border: none;
		}
	}
	hr {
		border: none;
		border-top: var(--border-width) solid var(--color-border);
	}

	/* ─── Label ──
	 * Form labels with muted color
	 */
	label {
		font-size: var(--text-sm);
		font-weight: var(--font-medium);
		color: var(--color-text-muted);
	}

	/* ─── Inputs ──
	 * Text inputs, textareas, and select dropdowns
	 * Full width, with focus ring and hover states
	 */
	input,
	textarea,
	select {
		font-size: var(--text-base);
		line-height: var(--leading-normal);
		color: var(--color-text);
		background: var(--color-surface-alt);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--pad-xs) var(--pad-sm);
		width: 100%;
		outline: none;
		transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

		&::placeholder {
			color: var(--color-text-muted);
			opacity: 1;
		}
		&:hover {
			border-color: var(--color-border-strong);
		}
		&:focus-visible {
			border-color: var(--color-primary);
			outline: none;
		}
		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
		&[readonly] {
			background: var(--color-surface);
			cursor: default;
		}
	}

	/* ─── Buttons ──
	 * Base button styles with variants (primary, ghost, danger)
	 * Supports <button> elements and .btn class
	 */
	button,
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--gutter-xs);
		font-size: var(--text-sm);
		font-weight: var(--font-medium);
		line-height: var(--leading-none);
		color: var(--color-text);
		background: var(--color-surface-alt);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--pad-xs) var(--pad-sm);
		cursor: pointer;
		outline: none;
		transition:
			background var(--transition-fast),
			border-color var(--transition-fast),
			color var(--transition-fast),
			box-shadow var(--transition-fast);

		&:hover {
			background: var(--color-surface);
			border-color: var(--color-border-strong);
		}
		&:focus-visible {
			border-color: var(--color-primary);
			outline: none;
		}
		&:active {
			scale: 0.97; /* Subtle press effect */
		}
		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}

		/* ─── Size variants ── */

		/* Small button: tighter padding, smaller text */
		&.btn-sm {
			padding: calc(var(--pad-xs) * 0.5) var(--pad-sm);
			font-size: var(--text-xs);
		}

		/* Icon button: square, no padding, fixed size */
		&.btn-icon {
			width: var(--icon-button-size);
			height: var(--icon-button-size);
			padding: 0;
			flex-shrink: 0;
			&.btn-sm { width: var(--icon-button-size-sm); height: var(--icon-button-size-sm); }
			&.btn-lg { width: var(--icon-button-size-lg); height: var(--icon-button-size-lg); }
		}

		/* ─── Button Variants ── */

		/* Primary: filled blue button for main actions */
		&.btn-primary {
			background: var(--color-primary);
			border-color: var(--color-primary);
			color: #fff;
			&:hover {
				background: var(--color-primary-hover);
				border-color: var(--color-primary-hover);
			}
		}
		
		/* Ghost: transparent button for secondary actions */
		&.btn-ghost {
			background: transparent;
			border-color: transparent;
			&:hover {
				background: color-mix(in srgb, var(--color-text) 5%, transparent);
				border-color: transparent;
			}
		}
		
		/* Danger: red text button for destructive actions */
		&.btn-danger {
			color: var(--color-critical);
			&:hover {
				background: color-mix(in srgb, var(--color-critical) 10%, transparent);
				border-color: var(--color-critical);
			}
		}
	}

	/* ─── Specific Input Overrides ──
	 * Checkbox, radio, and range inputs have special styling
	 */
	input[type='checkbox'],
	input[type='radio'] {
		width: auto;
		padding: 0;
		accent-color: var(--color-primary);
	}
	input[type='range'] {
		padding: 0;
		accent-color: var(--color-primary);
	}
	select {
		cursor: pointer;
	}
}

/* ─── CSS Functions (CSS Values Level 5) ──
 * Note: All CSS functions are now defined in functions.css
 * This file only contains component styles
 */

/* ─── Cards ────────────────────────────────────────────
 * Container component with header, body, and footer
 * Usage: <div class="card"><div class="card-header">...</div><div class="card-body">...</div></div>
 */

.card {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	overflow: hidden;

	& .card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--pad-sm) var(--pad-md);
		border-bottom: var(--border-width) solid var(--color-border);
		font-weight: var(--font-semibold);
		font-size: var(--text-sm);
	}

	& .card-body {
		padding: var(--pad-md);
	}

	& .card-footer {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--gutter-sm);
		padding: var(--pad-sm) var(--pad-md);
		border-top: var(--border-width) solid var(--color-border);
		background: var(--color-surface-alt);
	}
}

/* ─── Alerts ───────────────────────────────────────────
 * Notification banners with icon, title, description, and close button
 * Variants: info, success, warning, error
 * Usage: <div class="alert alert-info">...</div>
 */

.alert {
	display: flex;
	align-items: flex-start;
	gap: var(--gutter-md);
	padding: var(--pad-md);
	border-radius: var(--radius-md);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);

	& .alert-icon {
		flex-shrink: 0;
		width: 1.25rem;
		height: 1.25rem;
	}

	& .alert-content {
		flex: 1;
		min-width: 0;

		& .alert-title {
			font-weight: var(--font-semibold);
			font-size: var(--text-sm);
			margin-bottom: 0.25rem;
		}

		& .alert-description {
			font-size: var(--text-sm);
			color: var(--color-text-muted);
		}
	}

	& .alert-close {
		flex-shrink: 0;
		padding: 0.25rem;
		background: transparent;
		border: none;
		border-radius: var(--radius-sm);
		color: var(--color-text-muted);
		cursor: pointer;

		&:hover {
			background: color-mix(in srgb, var(--color-text) 5%, transparent);
			color: var(--color-text);
		}
		&:focus-visible {
			background: color-mix(in srgb, var(--color-primary) 10%, transparent);
			outline: none;
		}
	}

	/* ─── Alert Variants ──
	 * Each variant tints the background and border with its status color
	 */
	
	/* Info: blue informational message */
	&.alert-info {
		border-color: color-mix(in srgb, var(--color-info) 30%, var(--color-border));
		background: color-mix(in srgb, var(--color-info) 8%, var(--color-surface));

		& .alert-icon {
			color: var(--color-info);
		}
		& .alert-title {
			color: var(--color-info);
		}
	}

	/* Success: green confirmation message */
	&.alert-success {
		border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-border));
		background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface));

		& .alert-icon {
			color: var(--color-success);
		}
		& .alert-title {
			color: var(--color-success);
		}
	}

	/* Warning: amber caution message */
	&.alert-warning {
		border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border));
		background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface));

		& .alert-icon {
			color: var(--color-warning);
		}
		& .alert-title {
			color: var(--color-warning);
		}
	}

	/* Error: red error message */
	&.alert-error {
		border-color: color-mix(in srgb, var(--color-critical) 30%, var(--color-border));
		background: color-mix(in srgb, var(--color-critical) 8%, var(--color-surface));

		& .alert-icon {
			color: var(--color-critical);
		}
		& .alert-title {
			color: var(--color-critical);
		}
	}
}

/* ─── Badges ───────────────────────────────────────────
 * Small status indicators and labels
 * Pill-shaped with border
 * Usage: <span class="badge badge-primary">New</span>
 */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.125rem 0.5rem;
	font-size: 0.75rem;
	font-weight: var(--font-medium);
	line-height: 1;
	border-radius: var(--radius-full);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface-alt);
	color: var(--color-text);

	/* ─── Badge Variants ── */
	
	/* Primary: blue highlight */
	&.badge-primary {
		background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
		border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
		color: var(--color-primary);
	}

	/* Success: green highlight */
	&.badge-success {
		background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
		border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-border));
		color: var(--color-success);
	}

	/* Warning: amber highlight */
	&.badge-warning {
		background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
		border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border));
		color: var(--color-warning);
	}

	/* Error: red highlight */
	&.badge-error {
		background: color-mix(in srgb, var(--color-critical) 10%, var(--color-surface));
		border-color: color-mix(in srgb, var(--color-critical) 30%, var(--color-border));
		color: var(--color-critical);
	}

	/* Neutral: gray default */
	&.badge-neutral {
		background: var(--color-surface-alt);
		border-color: var(--color-border);
		color: var(--color-text-muted);
	}
}

/* ─── Tables ───────────────────────────────────────────
 * Data tables with optional striped rows and compact mode
 * Must be wrapped in .table-container for horizontal scrolling
 * Usage: <div class="table-container"><table class="table table-striped">...</table></div>
 */

.table-container {
	overflow-x: auto; /* Enable horizontal scroll for wide tables */
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
}

.table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);

	& th,
	& td {
		padding: var(--pad-sm) var(--pad-md);
		text-align: left;
		border-bottom: var(--border-width) solid var(--color-border);
	}

	& th {
		font-weight: var(--font-semibold);
		background: var(--color-surface-alt);
		color: var(--color-text);
	}

	& td {
		color: var(--color-text);
	}

	& tbody tr {
		&:hover {
			background: var(--color-surface-hover);
		}
		&:last-child td {
			border-bottom: none;
		}
	}

	/* ─── Table Variants ── */
	
	/* Striped: alternating row colors for readability */
	&.table-striped {
		& tbody tr:nth-child(even) {
			background: var(--color-surface-alt);
			&:hover {
				background: var(--color-surface-hover);
			}
		}
	}

	/* Compact: reduced padding for dense data display */
	&.table-compact {
		& th,
		& td {
			padding: var(--pad-xs) var(--pad-sm);
		}
	}
}

/* ─── List / List Item ────────────────────────────────
 * Generic vertical or grid list with clickable items.
 * Pair with <ul role="list"> or <div class="list">.
 * Variants: .list-grid (auto-fill grid), .list-stack (column), .list-row, .list-bordered, .list-compact
 * Item states: .is-active / aria-current, .is-disabled / aria-disabled
 */
.list {
	display: flex;
	flex-direction: column;
	gap: var(--list-gap);
	list-style: none;
	margin: 0;
	padding: 0;

	&.list-stack { flex-direction: column; }
	&.list-row   { flex-direction: row; flex-wrap: wrap; }

	&.list-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(var(--list-grid-min, 220px), 1fr));
		gap: var(--gutter-md);
	}

	&.list-bordered {
		gap: 0;
		& > .list-item {
			border-radius: 0;
			border-bottom: var(--border-width) solid var(--color-border);
			&:last-child { border-bottom: none; }
		}
	}

	&.list-compact > .list-item {
		padding: calc(var(--list-item-pad-y) * 0.5) var(--list-item-pad-x);
	}
}

.list-item {
	display: flex;
	align-items: center;
	gap: var(--list-item-gap);
	padding: var(--list-item-pad-y) var(--list-item-pad-x);
	border-radius: var(--list-item-radius);
	color: var(--color-text);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);

	&:hover { background: var(--color-surface-hover); }
	&:focus-visible {
		background: var(--color-surface-hover);
		outline: none;
	}
	&.is-active,
	&[aria-current='page'],
	&[aria-current='true'] {
		background: var(--color-surface-active);
		color: var(--color-primary);
	}
	&.is-disabled,
	&[aria-disabled='true'] {
		opacity: 0.5;
		pointer-events: none;
	}

	& > .list-item-icon {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--icon-size-sm);
		height: var(--icon-size-sm);
		color: var(--color-text-muted);
	}
	& > .list-item-content {
		flex: 1;
		min-width: 0;
	}
	& .list-item-title {
		font-weight: var(--font-medium);
		font-size: var(--text-sm);
	}
	& .list-item-meta {
		color: var(--color-text-muted);
		font-size: var(--text-xs);
	}
	& > .list-item-trail {
		flex-shrink: 0;
		color: var(--color-text-muted);
		font-size: var(--text-xs);
	}
}

/* ─── Form / Field ────────────────────────────────────
 * Two-column grid form: label | control.
 * Variants: .form-stack (label above), .form-inline (row of fields)
 * Wrap each pair in .field (uses display:contents to pass through grid).
 */
.form {
	display: grid;
	grid-template-columns: var(--field-label-width, max-content) 1fr;
	gap: var(--form-grid-gap);
	align-items: center;

	&.form-stack {
		grid-template-columns: 1fr;
		align-items: stretch;
	}

	&.form-inline {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gutter-sm);
		align-items: center;
	}
}

.field {
	display: contents;
}

.field-stack {
	display: flex;
	flex-direction: column;
	gap: var(--gutter-xs);
}

/* ─── Toolbar ─────────────────────────────────────────
 * Horizontal control bar. Variants: -stretch, -end, -center, -wrap
 */
.toolbar {
	display: flex;
	align-items: center;
	gap: var(--gutter-sm);
	padding: var(--pad-xs) var(--pad-sm);

	&.toolbar-stretch { justify-content: space-between; }
	&.toolbar-end     { justify-content: flex-end; }
	&.toolbar-center  { justify-content: center; }
	&.toolbar-wrap    { flex-wrap: wrap; }

	& > .toolbar-separator {
		width: var(--border-width);
		height: 1.5rem;
		background: var(--color-border);
	}
	& > .toolbar-spacer { flex: 1; }
}

/* ─── Panel ───────────────────────────────────────────
 * Surface container. Variants: -raised, -sunken, -bordered, -flush
 */
.panel {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: var(--pad-md);

	&.panel-raised   { background: var(--color-surface-raised); box-shadow: var(--shadow-sm); }
	&.panel-sunken   { background: var(--color-surface-sunken); }
	&.panel-bordered { border: var(--border-width) solid var(--color-border); }
	&.panel-flush    { padding: 0; }
}

/* ─── Section header ─────────────────────────────────
 * Small uppercase heading + optional action group.
 * Variants: .section-header-lg, .section-header-bordered
 */
.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gutter-sm);
	padding: var(--pad-xs) 0;
	margin-bottom: var(--marg-sm);

	& > :first-child {
		font-size: var(--text-xs);
		font-weight: var(--font-semibold);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-text-muted);
		margin: 0;
	}

	&.section-header-lg > :first-child {
		font-size: var(--text-md);
		text-transform: none;
		letter-spacing: var(--tracking-normal);
		color: var(--color-text);
	}

	&.section-header-bordered {
		border-bottom: var(--border-width) solid var(--color-border);
		padding-bottom: var(--pad-xs);
	}
}

/* ─── Empty state ────────────────────────────────────
 * Placeholder when no data.
 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gutter-sm);
	padding: var(--pad-xl) var(--pad-md);
	color: var(--color-text-muted);
	text-align: center;

	& .empty-state-icon {
		font-size: var(--text-3xl);
		opacity: 0.6;
	}
	& .empty-state-title {
		font-size: var(--text-base);
		font-weight: var(--font-semibold);
		color: var(--color-text);
		margin: 0;
	}
	& .empty-state-text {
		font-size: var(--text-sm);
		margin: 0;
		max-width: 32ch;
	}
}

/* ─── Pagination ─────────────────────────────────────
 * Page navigation: prev / info / next
 */
.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gutter-md);
	padding: var(--pad-sm) 0;

	& .pagination-info {
		font-size: var(--text-sm);
		color: var(--color-text-muted);
		font-variant-numeric: tabular-nums;
	}
}

/* ─── Form Control ─────────────────────────────────────
 * Wrapper for label + input + hint/error
 * Usage: <div class="form-control"><label>...</label><input>...</div>
 */
.form-control {
	display: flex;
	flex-direction: column;
	gap: var(--gutter-xs);

	& > label {
		font-size: var(--text-sm);
		font-weight: var(--font-medium);
		color: var(--color-text);
	}

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

	& > .form-error {
		font-size: var(--text-xs);
		color: var(--color-critical);
		display: none;
	}

	&.is-invalid > .form-error {
		display: block;
	}

	&.is-invalid > input,
	&.is-invalid > textarea,
	&.is-invalid > select {
		border-color: var(--color-critical);
		&:focus-visible {
			outline: none;
		}
	}

	&.is-valid > input,
	&.is-valid > textarea,
	&.is-valid > select {
		border-color: var(--color-success);
		&:focus-visible {
			outline: none;
		}
	}
}

/* ─── Input Group ──────────────────────────────────────
 * Input with prefix/suffix (icon, text, button)
 * Usage: <div class="input-group"><span class="input-group-text">@</span><input></div>
 */
.input-group {
	display: flex;
	align-items: stretch;

	& > .input-group-text,
	& > .btn {
		display: flex;
		align-items: center;
		padding: var(--pad-xs) var(--pad-sm);
		font-size: var(--text-sm);
		font-weight: var(--font-medium);
		color: var(--color-text-muted);
		background: var(--color-surface-alt);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
	}

	& > .input-group-text {
		border-right: none;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	& > input,
	& > select,
	& > textarea {
		border-radius: 0;
		flex: 1;
		min-width: 0;
	}

	& > input:first-child,
	& > select:first-child,
	& > textarea:first-child {
		border-top-left-radius: var(--radius-md);
		border-bottom-left-radius: var(--radius-md);
	}

	& > input:last-child,
	& > select:last-child,
	& > textarea:last-child {
		border-top-right-radius: var(--radius-md);
		border-bottom-right-radius: var(--radius-md);
	}

	& > .btn:last-child {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	& > .btn:first-child {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-right: none;
	}
}

/* ─── Form Check ───────────────────────────────────────
 * Checkbox / radio with integrated label
 * Usage: <label class="form-check"><input type="checkbox"><span>Label</span></label>
 */
.form-check {
	display: inline-flex;
	align-items: center;
	gap: var(--gutter-sm);
	font-size: var(--text-sm);
	font-weight: var(--font-normal);
	color: var(--color-text);
	cursor: pointer;

	& > input[type="checkbox"],
	& > input[type="radio"] {
		width: 1rem;
		height: 1rem;
		flex-shrink: 0;
		margin: 0;
	}
}

/* ─── Toggle Switch ────────────────────────────────────
 * iOS-style toggle switch
 * Usage: <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
 */
.toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--gutter-sm);
	cursor: pointer;
	font-size: var(--text-sm);
	color: var(--color-text);

	& > input {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	}

	& .toggle-slider {
		position: relative;
		width: 2.25rem;
		height: 1.25rem;
		background: var(--color-border-strong);
		border-radius: var(--radius-full);
		transition: background var(--transition-fast);
		flex-shrink: 0;

		&::before {
			content: '';
			position: absolute;
			top: 2px;
			left: 2px;
			width: calc(1.25rem - 4px);
			height: calc(1.25rem - 4px);
			background: white;
			border-radius: 50%;
			transition: transform var(--transition-fast);
		}
	}

	& > input:checked + .toggle-slider {
		background: var(--color-primary);
	}

	& > input:checked + .toggle-slider::before {
		transform: translateX(1rem);
	}

	& > input:focus-visible + .toggle-slider {
		outline: 1px solid var(--color-primary);
		outline-offset: 2px;
	}

	& > input:disabled + .toggle-slider {
		opacity: 0.5;
		cursor: not-allowed;
	}
}

/* ─── Form Fieldset ────────────────────────────────────
 * Group related form controls
 */
.form-fieldset {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--pad-md);
	margin: 0;

	& .form-legend {
		font-size: var(--text-sm);
		font-weight: var(--font-semibold);
		color: var(--color-text);
		padding: 0 var(--pad-sm);
	}
}

/* ─── Form Select (enhanced) ───────────────────────────
 * Select with custom arrow
 */
.form-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--pad-sm) center;
	background-size: 1rem;
	padding-right: 2.5rem;
}

/* ─── Form File ────────────────────────────────────────
 * File input with custom button
 */
.form-file {
	position: relative;
	display: inline-flex;
	align-items: center;

	& > input[type="file"] {
		position: absolute;
		opacity: 0;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}

	& .form-file-label {
		display: inline-flex;
		align-items: center;
		gap: var(--gutter-xs);
		padding: var(--pad-xs) var(--pad-sm);
		font-size: var(--text-sm);
		font-weight: var(--font-medium);
		color: var(--color-text);
		background: var(--color-surface-alt);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		cursor: pointer;
		transition: background var(--transition-fast);
	}

	&:hover .form-file-label {
		background: var(--color-surface);
		border-color: var(--color-border-strong);
	}
}