/* === forms.css ===
   Inputs, radio groups, calendar, download links, file inputs */

/* Формы */
input,
textarea {
	width: 100%;
	padding: var(--button-padding-y) var(--button-padding-x);
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--input-radius);
	background-color: var(--background-primary);
	color: var(--text-color);
	box-sizing: border-box;
	font-size: var(--font-size-input);
	outline: none;
	transition: var(--transition-base);
	font-family: inherit;
	margin: 0;
}

input:focus,
textarea:focus {
	border-color: var(--interactive-accent);
}

.radio-group {
	margin: var(--size-4-4) 0;
	background: var(--background-secondary);
	padding: 0;
	border-radius: var(--container-radius);
	overflow: hidden;
	border: var(--divider-width) solid var(--background-modifier-border);
}

.radio-group .radio-row {
	margin-top: 0;
}

.group-label {
	font-weight: 600;
	margin-bottom: 0;
	padding: var(--size-4-3) var(--size-4-4);
	color: var(--text-muted);
	font-size: var(--font-ui-small);
	text-transform: uppercase;
	letter-spacing: 0.036rem;
}

.radio-row input[type="radio"] {
	display: none;
}

.radio-row .radio-icon {
	width: var(--icon-l);
	height: var(--icon-l);
	flex-shrink: 0;
	color: var(--text-muted);
	transition: var(--transition-base);
}

.radio-row .radio-icon.selected {
	display: none;
	color: var(--interactive-accent);
}

.radio-row input[type="radio"]:checked~.radio-icon.unselected {
	display: none;
}

.radio-row input[type="radio"]:checked~.radio-icon.selected {
	display: block;
	color: var(--interactive-accent);
}

/* При наведении на всю строку */
.radio-row:hover .radio-icon.unselected {
	color: var(--text-on-accent);
}

.radio-row:hover .radio-icon.selected {
	color: var(--text-on-accent);
}

/* === Checkbox Styles === */
.checkbox-group {
	margin: 0 0 var(--size-4-2) 0;
}

.checkbox-row {
	display: flex;
	align-items: flex-start;
	/* Aligns with multi-line text/hints */
	gap: var(--size-4-2);
	padding: var(--size-4-2) var(--size-4-4) var(--size-4-2);
	cursor: pointer;
	border-radius: var(--radius-m);
	transition: var(--transition-base);
	user-select: none;
}

.checkbox-row:hover {
	background-color: var(--background-modifier-hover);
}

.checkbox-row input[type="checkbox"] {
	display: none;
}

.checkbox-icon {
	width: var(--icon-l);
	height: var(--icon-l);
	flex-shrink: 0;
	color: var(--text-muted);
	transition: var(--transition-base);
	margin-top: 0.143rem;
	/* Tiny offset for alignment with text */
}

.checkbox-icon.selected {
	display: none;
	color: var(--interactive-accent);
}

.checkbox-row input[type="checkbox"]:checked~.checkbox-icon.unselected {
	display: none;
}

.checkbox-row input[type="checkbox"]:checked~.checkbox-icon.selected {
	display: block;
}

.checkbox-label-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--size-4-1);
}

.checkbox-label {
	font-size: var(--font-ui-medium);
	color: var(--text-normal);
	line-height: var(--icon-l);
}

.checkbox-hint,
.hint-text {
	margin-top: 0;
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
	line-height: 1.4;
}

.input-wrapper {
	margin: var(--size-4-4) 0;
	display: flex;
	flex-direction: column;
	gap: var(--size-4-2);
}

.field-row {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--size-4-4);
	flex-wrap: nowrap;
	/* No wrapping for settings rows */
}

.field-row label {
	margin-bottom: 0;
	flex-shrink: 0;
	max-width: 60%;
	line-height: var(--p-line-height);
}

.field-row .ui-select-custom {
	flex: 1;
	min-width: 8.571rem;
	/* Slightly more compact */
	max-width: 17.143rem;
	/* Don't let it grow too wide in rows */
}

/* Панель форматирования - прижимаем к полю выше */
.formatting-toolbar {
	margin-top: calc(-1 * var(--size-4-3));
	margin-bottom: var(--size-4-4);
}

.input-wrapper label {
	font-size: var(--font-ui-medium);
	color: var(--text-muted);
	text-transform: uppercase;
	font-weight: 600;
}

.input-wrapper input[type="text"],
.input-wrapper input[type="password"],
.input-wrapper input[type="file"],
.input-wrapper input.password-field,
.calendar-placeholder input[type="date"] {
	background: var(--background-primary);
	border: var(--divider-width) solid var(--background-modifier-border);
	color: var(--text-normal);
	padding: var(--button-padding-y);
	/* Синхронизируем с кнопками */
	border-radius: var(--input-radius);
	outline: none;
	transition: var(--transition-base);
	font-size: var(--font-size-input);
	accent-color: var(--interactive-accent);
}



::-webkit-calendar-picker-indicator {
	color: var(--calendar-picker-filter);
	cursor: pointer;
}

.input-wrapper input:focus,
.calendar-placeholder input:focus {
	border-color: var(--interactive-accent);
}

/* Состояния валидации */
:root .input-wrapper input.is-invalid,
:root .calendar-placeholder input.is-invalid {
	border-color: var(--text-error);
	background-color: var(--alert-error-bg);
}

:root .input-wrapper input.is-invalid:focus,
:root .calendar-placeholder input.is-invalid:focus {
	border-color: var(--text-error);
	box-shadow: 0 0 0 var(--size-2-1) var(--alert-error-border);
}

.inline-error {
	color: var(--text-error);
	font-size: var(--font-ui-smaller);
	margin-top: var(--size-4-1);
	line-height: 1.3;
	display: none; /* Скрыто до заполнения текстом в JS */
}

.download-link {
	display: inline-block;
	margin: var(--size-4-3) 0;
	padding: var(--size-4-4);
	background: var(--background-secondary);
	color: var(--interactive-accent);
	text-decoration: none;
	border-radius: var(--radius-m);
	border: var(--divider-width) dashed var(--interactive-accent);
	font-weight: 600;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

.calendar-placeholder {
	margin: var(--size-4-4) 0;
	display: flex;
	flex-direction: column;
	gap: var(--size-4-2);
}

/* === Кастомный выпадающий список (Custom Select) === */
.ui-select-custom {
	position: relative;
	width: 100%;
	user-select: none;
}

.select-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: var(--size-4-9);
	/* Fixed height for consistency */
	padding: 0 var(--size-4-3);
	background-color: var(--background-primary);
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--input-radius);
	color: var(--text-normal);
	font-size: var(--font-ui-medium);
	cursor: pointer;
	transition: var(--transition-base);
	overflow: hidden;
}

.selected-text {
	flex: 1;
	display: flex;
	align-items: center;
	line-height: normal;
	/* Restore standard line-height */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ui-select-custom.active .select-trigger {
	border-color: var(--interactive-accent);
	box-shadow: 0 0 0 var(--size-2-1) var(--interactive-accent-soft);
}

.select-trigger:hover {
	border-color: var(--background-modifier-border-hover);
}

.select-options {
	position: absolute;
	top: calc(100% + var(--size-4-1));
	left: 0;
	right: 0;
	background-color: var(--background-primary-alt);
	/* More solid background */
	opacity: 1;
	/* Ensure no transparency */
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--input-radius);
	box-shadow: var(--shadow-l);
	z-index: var(--z-header);
	display: none;
	max-height: 14.286rem;
	overflow-y: auto;
	animation: select-fade-in 0.2s ease-out;
}

.ui-select-custom.active .select-options {
	display: block;
}

.select-option {
	padding: var(--size-4-3) var(--size-4-4);
	cursor: pointer;
	transition: var(--transition-base);
	color: var(--text-normal);
	font-size: var(--font-ui-medium);
}

.select-option:hover {
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
}

.select-option.selected {
	background-color: var(--interactive-accent-soft);
	color: var(--interactive-accent);
	font-weight: 600;
}

.select-icon {
	width: var(--icon-s);
	height: var(--icon-s);
	color: var(--text-muted);
	transition: transform var(--transition-base);
}

.ui-select-custom.active .select-icon {
	transform: rotate(180deg);
	color: var(--interactive-accent);
}

@keyframes select-fade-in {
	from {
		opacity: 0;
		transform: translateY(calc(-1 * var(--size-4-2)));
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- Specific Input Styles --- */
.drawer-search-input {
	height: var(--size-4-8);
	/* More compact */
	padding: var(--size-4-1) var(--size-4-2);
	background-color: var(--background-secondary);
	/* Matches sidebar depth */
	border-color: transparent;
	border-radius: var(--radius-m);
}

.drawer-search-input:focus {
	background-color: var(--background-primary);
	border-color: var(--interactive-accent);
}