/**
 * GDC Input Components
 *
 * Text, Select, Checkbox, Radio, File Upload, Slider
 * 4 states: default, focus, error, success
 * Disabled state for all inputs
 *
 * All animations use GPU-safe properties (transform, opacity).
 * Tokens sourced from tokens.css (layer 1 + 2).
 *
 * @package GDC
 * @since   1.0.0
 */

/* ==========================================================
   KEYFRAMES
   ========================================================== */

@keyframes gdc-input-shake {
	0%, 100% { transform: translateX(0); }
	20%      { transform: translateX(-3px); }
	40%      { transform: translateX(3px); }
	60%      { transform: translateX(-2px); }
	80%      { transform: translateX(2px); }
}

@keyframes gdc-drop-zone-pulse {
	0%, 100% { border-color: var(--gdc-accent-cta); }
	50%      { border-color: var(--gdc-accent-hover); }
}

/* ==========================================================
   FORM FIELD WRAPPER
   ========================================================== */

.gdc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gdc-field__label {
	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-sm);
	font-weight: var(--gdc-font-medium);
	color: var(--gdc-text-primary);
	line-height: var(--gdc-leading-normal);
}

.gdc-field__required {
	color: var(--gdc-status-error);
	margin-left: 2px;
}

.gdc-field__help {
	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-xs);
	color: var(--gdc-text-muted);
	line-height: var(--gdc-leading-normal);
}

.gdc-field__error {
	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-xs);
	color: var(--gdc-status-error);
	line-height: var(--gdc-leading-normal);
}

/* ==========================================================
   BASE TEXT INPUT
   ========================================================== */

.gdc-input {
	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-base);
	line-height: var(--gdc-leading-normal);
	color: var(--gdc-text-primary);

	padding: 12px var(--gdc-space-3);
	border: 1px solid var(--gdc-border-light);
	border-radius: 6px;
	background: var(--gdc-bg-surface);

	min-height: var(--gdc-tap-target-secondary); /* 44px touch target */
	width: 100%;
	box-sizing: border-box;

	transition:
		border-color var(--gdc-duration-fast) var(--gdc-ease-out),
		box-shadow var(--gdc-duration-fast) var(--gdc-ease-out),
		background-color var(--gdc-duration-fast) var(--gdc-ease-out);
}

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

/* ==========================================================
   INPUT STATES
   ========================================================== */

.gdc-input:focus {
	outline: none;
	border-color: var(--gdc-accent-cta);
	box-shadow: 0 0 0 3px rgba(0, 212, 180, 0.1);
}

.gdc-input:focus-visible {
	outline: 2px solid var(--gdc-accent-cta);
	outline-offset: 2px;
}

.gdc-input[data-state="error"],
.gdc-field[data-state="error"] .gdc-input {
	border-color: var(--gdc-status-error);
	background: rgba(255, 59, 48, 0.05);
}

.gdc-input[data-state="error"]:focus,
.gdc-field[data-state="error"] .gdc-input:focus {
	box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.1);
}

.gdc-input[data-state="success"],
.gdc-field[data-state="success"] .gdc-input {
	border-color: var(--gdc-status-success);
	background: rgba(34, 197, 94, 0.05);
}

.gdc-input[data-state="success"]:focus,
.gdc-field[data-state="success"] .gdc-input:focus {
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.gdc-input:disabled,
.gdc-input[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	background: var(--gdc-bg-void);
}

/* ==========================================================
   INPUT WRAPPER (for icons, buttons inside inputs)
   ========================================================== */

.gdc-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.gdc-input-wrap .gdc-input {
	padding-right: 44px; /* room for action button */
}

.gdc-input-wrap__action {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);

	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;

	background: none;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	color: var(--gdc-text-muted);
	padding: 0;

	transition: color var(--gdc-duration-fast) var(--gdc-ease-out);
}

.gdc-input-wrap__action:hover {
	color: var(--gdc-text-primary);
}

.gdc-input-wrap__action:focus-visible {
	outline: 2px solid var(--gdc-accent-cta);
	outline-offset: 2px;
}

.gdc-input-wrap__action svg {
	width: 18px;
	height: 18px;
}

/* Search input clear button */
.gdc-input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* Number input spinner styling */
.gdc-input[type="number"]::-webkit-inner-spin-button,
.gdc-input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.gdc-input[type="number"] {
	-moz-appearance: textfield;
}

/* ==========================================================
   TEXTAREA
   ========================================================== */

textarea.gdc-input {
	min-height: 100px;
	resize: vertical;
}

/* ==========================================================
   CUSTOM SELECT
   ========================================================== */

.gdc-select {
	position: relative;
	width: 100%;
}

/* Native select — visible for a11y fallback, styled to match */
.gdc-select__native {
	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-base);
	line-height: var(--gdc-leading-normal);
	color: var(--gdc-text-primary);

	padding: 12px var(--gdc-space-3);
	padding-right: 40px;
	border: 1px solid var(--gdc-border-light);
	border-radius: 6px;
	background: var(--gdc-bg-surface);

	min-height: var(--gdc-tap-target-secondary);
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	transition:
		border-color var(--gdc-duration-fast) var(--gdc-ease-out),
		box-shadow var(--gdc-duration-fast) var(--gdc-ease-out);
}

.gdc-select__native:focus {
	outline: none;
	border-color: var(--gdc-accent-cta);
	box-shadow: 0 0 0 3px rgba(0, 212, 180, 0.1);
}

.gdc-select__native:focus-visible {
	outline: 2px solid var(--gdc-accent-cta);
	outline-offset: 2px;
}

.gdc-select__native:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: var(--gdc-bg-void);
}

.gdc-field[data-state="error"] .gdc-select__native {
	border-color: var(--gdc-status-error);
	background: rgba(255, 59, 48, 0.05);
}

.gdc-field[data-state="success"] .gdc-select__native {
	border-color: var(--gdc-status-success);
	background: rgba(34, 197, 94, 0.05);
}

/* Dropdown arrow */
.gdc-select__arrow {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--gdc-text-muted);
	transition: transform var(--gdc-duration-fast) var(--gdc-ease-out);
}

.gdc-select__arrow svg {
	width: 16px;
	height: 16px;
}

.gdc-select[data-open="true"] .gdc-select__arrow {
	transform: translateY(-50%) rotate(180deg);
}

/* Enhanced custom dropdown (JS-powered) */
.gdc-select__trigger {
	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-base);
	line-height: var(--gdc-leading-normal);
	color: var(--gdc-text-primary);

	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 12px var(--gdc-space-3);
	border: 1px solid var(--gdc-border-light);
	border-radius: 6px;
	background: var(--gdc-bg-surface);

	min-height: var(--gdc-tap-target-secondary);
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;

	transition:
		border-color var(--gdc-duration-fast) var(--gdc-ease-out),
		box-shadow var(--gdc-duration-fast) var(--gdc-ease-out);
}

.gdc-select__trigger:focus-visible {
	outline: 2px solid var(--gdc-accent-cta);
	outline-offset: 2px;
}

.gdc-select__trigger[aria-expanded="true"] {
	border-color: var(--gdc-accent-cta);
	box-shadow: 0 0 0 3px rgba(0, 212, 180, 0.1);
}

.gdc-select__trigger[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

.gdc-select__trigger-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gdc-select__placeholder {
	color: var(--gdc-text-muted);
}

/* Dropdown listbox */
.gdc-select__listbox {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 100;

	background: var(--gdc-bg-surface);
	border: 1px solid var(--gdc-border-medium);
	border-radius: 6px;
	box-shadow: var(--gdc-shadow-lg);

	max-height: 240px;
	overflow-y: auto;
	overscroll-behavior: contain;

	padding: 4px;

	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;

	transition:
		opacity var(--gdc-duration-fast) var(--gdc-ease-out),
		transform var(--gdc-duration-fast) var(--gdc-ease-out);
}

.gdc-select[data-open="true"] .gdc-select__listbox {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.gdc-select__option {
	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-base);
	line-height: var(--gdc-leading-normal);
	color: var(--gdc-text-primary);

	padding: 10px 12px;
	border-radius: 4px;
	cursor: pointer;

	transition: background-color var(--gdc-duration-fast) var(--gdc-ease-out);
}

.gdc-select__option:hover,
.gdc-select__option[data-focused="true"] {
	background: var(--gdc-alpha-5);
}

.gdc-select__option[aria-selected="true"] {
	background: var(--gdc-alpha-10);
	font-weight: var(--gdc-font-medium);
}

/* ==========================================================
   CHECKBOX
   ========================================================== */

.gdc-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	min-height: var(--gdc-tap-target-secondary);
}

.gdc-checkbox__input {
	/* Visually hidden but accessible */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

.gdc-checkbox__box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	width: 20px;
	height: 20px;
	border: 2px solid var(--gdc-border-medium);
	border-radius: 4px;
	background: var(--gdc-bg-surface);

	transition:
		border-color var(--gdc-duration-fast) var(--gdc-ease-out),
		background-color var(--gdc-duration-fast) var(--gdc-ease-out);
}

.gdc-checkbox__box::before {
	content: '';
	display: block;
	width: 10px;
	height: 6px;
	border-left: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	transform: rotate(-45deg) scale(0);
	transform-origin: center;
	transition: transform var(--gdc-duration-fast) var(--gdc-ease-out);
}

.gdc-checkbox__input:checked + .gdc-checkbox__box {
	background: var(--gdc-accent-cta);
	border-color: var(--gdc-accent-cta);
}

.gdc-checkbox__input:checked + .gdc-checkbox__box::before {
	transform: rotate(-45deg) scale(1);
}

.gdc-checkbox__input:focus-visible + .gdc-checkbox__box {
	outline: 2px solid var(--gdc-accent-cta);
	outline-offset: 2px;
}

.gdc-checkbox__input:disabled + .gdc-checkbox__box {
	opacity: 0.5;
	cursor: not-allowed;
}

.gdc-checkbox__input:disabled ~ .gdc-checkbox__label {
	opacity: 0.5;
	cursor: not-allowed;
}

.gdc-checkbox__label {
	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-base);
	color: var(--gdc-text-primary);
	line-height: var(--gdc-leading-normal);
	user-select: none;
}

/* Error state */
.gdc-field[data-state="error"] .gdc-checkbox__box {
	border-color: var(--gdc-status-error);
}

/* ==========================================================
   RADIO
   ========================================================== */

.gdc-radio {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	min-height: var(--gdc-tap-target-secondary);
}

.gdc-radio__input {
	/* Visually hidden but accessible */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

.gdc-radio__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	width: 20px;
	height: 20px;
	border: 2px solid var(--gdc-border-medium);
	border-radius: 50%;
	background: var(--gdc-bg-surface);

	transition:
		border-color var(--gdc-duration-fast) var(--gdc-ease-out),
		background-color var(--gdc-duration-fast) var(--gdc-ease-out);
}

.gdc-radio__circle::before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ffffff;
	transform: scale(0);
	transition: transform var(--gdc-duration-fast) var(--gdc-ease-out);
}

.gdc-radio__input:checked + .gdc-radio__circle {
	background: var(--gdc-accent-cta);
	border-color: var(--gdc-accent-cta);
}

.gdc-radio__input:checked + .gdc-radio__circle::before {
	transform: scale(1);
}

.gdc-radio__input:focus-visible + .gdc-radio__circle {
	outline: 2px solid var(--gdc-accent-cta);
	outline-offset: 2px;
}

.gdc-radio__input:disabled + .gdc-radio__circle {
	opacity: 0.5;
	cursor: not-allowed;
}

.gdc-radio__input:disabled ~ .gdc-radio__label {
	opacity: 0.5;
	cursor: not-allowed;
}

.gdc-radio__label {
	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-base);
	color: var(--gdc-text-primary);
	line-height: var(--gdc-leading-normal);
	user-select: none;
}

/* Error state */
.gdc-field[data-state="error"] .gdc-radio__circle {
	border-color: var(--gdc-status-error);
}

/* Radio group layout */
.gdc-radio-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gdc-radio-group[data-direction="horizontal"] {
	flex-direction: row;
	gap: 16px;
	flex-wrap: wrap;
}

/* ==========================================================
   FILE UPLOAD
   ========================================================== */

.gdc-file {
	width: 100%;
}

.gdc-file__input {
	/* Visually hidden but accessible */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

.gdc-file__dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;

	padding: var(--gdc-space-6) var(--gdc-space-4);
	border: 2px dashed var(--gdc-border-light);
	border-radius: 6px;
	background: var(--gdc-bg-surface);

	min-height: 120px;
	cursor: pointer;
	text-align: center;

	transition:
		border-color var(--gdc-duration-fast) var(--gdc-ease-out),
		background-color var(--gdc-duration-fast) var(--gdc-ease-out);
}

.gdc-file__dropzone:hover {
	border-color: var(--gdc-border-medium);
	background: var(--gdc-alpha-5);
}

.gdc-file__dropzone[data-dragover="true"] {
	border-color: var(--gdc-accent-cta);
	background: rgba(0, 212, 180, 0.05);
	animation: gdc-drop-zone-pulse 1s ease-in-out infinite;
}

.gdc-file__input:focus-visible ~ .gdc-file__dropzone {
	outline: 2px solid var(--gdc-accent-cta);
	outline-offset: 2px;
}

.gdc-file__input:disabled ~ .gdc-file__dropzone {
	opacity: 0.5;
	cursor: not-allowed;
}

.gdc-file__icon {
	color: var(--gdc-text-muted);
}

.gdc-file__icon svg {
	width: 32px;
	height: 32px;
}

.gdc-file__text {
	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-sm);
	color: var(--gdc-text-secondary);
}

.gdc-file__text strong {
	color: var(--gdc-accent-cta);
	font-weight: var(--gdc-font-semibold);
}

.gdc-file__hint {
	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-xs);
	color: var(--gdc-text-muted);
}

/* File list */
.gdc-file__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 8px;
}

.gdc-file__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;

	padding: 8px 12px;
	background: var(--gdc-alpha-5);
	border-radius: 4px;

	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-sm);
	color: var(--gdc-text-primary);
}

.gdc-file__item-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.gdc-file__item-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	background: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--gdc-text-muted);

	transition: color var(--gdc-duration-fast) var(--gdc-ease-out);
}

.gdc-file__item-remove:hover {
	color: var(--gdc-status-error);
}

.gdc-file__item-remove:focus-visible {
	outline: 2px solid var(--gdc-accent-cta);
	outline-offset: 2px;
}

.gdc-file__item-remove svg {
	width: 14px;
	height: 14px;
}

/* Error state */
.gdc-field[data-state="error"] .gdc-file__dropzone {
	border-color: var(--gdc-status-error);
}

/* ==========================================================
   SLIDER (RANGE INPUT)
   ========================================================== */

.gdc-slider {
	position: relative;
	width: 100%;
	padding-top: 24px; /* room for value overlay */
}

.gdc-slider__input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: var(--gdc-border-light);
	outline: none;
	cursor: pointer;
	min-height: var(--gdc-tap-target-secondary);
}

/* Track — WebKit */
.gdc-slider__input::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 3px;
	background: var(--gdc-border-light);
}

/* Track — Firefox */
.gdc-slider__input::-moz-range-track {
	height: 6px;
	border-radius: 3px;
	background: var(--gdc-border-light);
	border: none;
}

/* Thumb — WebKit */
.gdc-slider__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--gdc-accent-cta);
	border: 2px solid var(--gdc-bg-surface);
	box-shadow: var(--gdc-shadow-sm);
	cursor: pointer;
	margin-top: -7px;

	transition:
		transform var(--gdc-duration-fast) var(--gdc-ease-out),
		box-shadow var(--gdc-duration-fast) var(--gdc-ease-out);
}

/* Thumb — Firefox */
.gdc-slider__input::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--gdc-accent-cta);
	border: 2px solid var(--gdc-bg-surface);
	box-shadow: var(--gdc-shadow-sm);
	cursor: pointer;

	transition:
		transform var(--gdc-duration-fast) var(--gdc-ease-out),
		box-shadow var(--gdc-duration-fast) var(--gdc-ease-out);
}

.gdc-slider__input:hover::-webkit-slider-thumb {
	transform: scale(1.15);
	box-shadow: var(--gdc-shadow-md);
}

.gdc-slider__input:hover::-moz-range-thumb {
	transform: scale(1.15);
	box-shadow: var(--gdc-shadow-md);
}

.gdc-slider__input:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--gdc-accent-cta);
	outline-offset: 2px;
}

.gdc-slider__input:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--gdc-accent-cta);
	outline-offset: 2px;
}

.gdc-slider__input:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.gdc-slider__input:disabled::-webkit-slider-thumb {
	cursor: not-allowed;
}

.gdc-slider__input:disabled::-moz-range-thumb {
	cursor: not-allowed;
}

/* ==========================================================
   ACCESSIBILITY: prefers-reduced-motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
	.gdc-input,
	.gdc-select__native,
	.gdc-select__trigger,
	.gdc-select__listbox,
	.gdc-select__option,
	.gdc-select__arrow,
	.gdc-checkbox__box,
	.gdc-checkbox__box::before,
	.gdc-radio__circle,
	.gdc-radio__circle::before,
	.gdc-file__dropzone,
	.gdc-slider__input::-webkit-slider-thumb,
	.gdc-slider__input::-moz-range-thumb,
	.gdc-input-wrap__action {
		transition: none;
	}

	.gdc-input[data-state="error"],
	.gdc-field[data-state="error"] .gdc-input {
		animation: none;
	}

	.gdc-file__dropzone[data-dragover="true"] {
		animation: none;
	}
}

/* Value overlay */
.gdc-slider__value {
	position: absolute;
	top: 0;
	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-sm);
	font-weight: var(--gdc-font-semibold);
	color: var(--gdc-text-primary);
	transform: translateX(-50%);
	white-space: nowrap;
}

/* Min/Max labels */
.gdc-slider__range {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-xs);
	color: var(--gdc-text-muted);
}