/**
 * Dresium Form Components
 *
 * Reusable form elements: inputs, labels, upload areas, validation states
 *
 * @package Dresium
 * @version 2.0.0
 */

/* ============================================
   FORM CONTAINER
   ============================================ */

.dresium-form {
	display: flex;
	flex-direction: column;
	gap: var(--dresium-space-4);
	height: 100%;
	max-height: 400px;
}

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

.dresium-field {
	display: flex;
	flex-direction: column;
	gap: var(--dresium-space-2);
}

.dresium-field--row {
	flex-direction: row;
	align-items: center;
}

/* ============================================
   LABELS
   ============================================ */

.dresium-label {
	display: block;
	margin-bottom: var(--dresium-space-1);

	font-size: var(--dresium-text-sm);
	font-weight: var(--dresium-weight-medium);
	color: var(--dresium-gray-700);
	line-height: var(--dresium-leading-normal);
}

.dresium-label--required::after {
	content: '*';
	margin-left: var(--dresium-space-1);
	color: var(--dresium-error);
}

.dresium-field-description {
	margin-top: var(--dresium-space-1);
	font-size: var(--dresium-text-xs);
	color: var(--dresium-gray-500);
	line-height: var(--dresium-leading-normal);
}

/* ============================================
   TEXT INPUTS
   ============================================ */

.dresium-input {
	width: 100%;
	padding: var(--dresium-space-3) var(--dresium-space-4);

	font-family: var(--dresium-font-primary);
	font-size: var(--dresium-text-sm);
	color: var(--dresium-gray-900);
	line-height: var(--dresium-leading-normal);

	background-color: var(--dresium-white);
	border: 1px solid var(--dresium-gray-300);
	border-radius: var(--dresium-radius-lg);

	transition: all var(--dresium-transition-fast) var(--dresium-ease);
}

.dresium-input::placeholder {
	color: var(--dresium-gray-400);
}

.dresium-input:hover:not(:disabled) {
	border-color: var(--dresium-gray-400);
}

.dresium-input:focus {
	outline: none;
	border-color: var(--dresium-primary);
	box-shadow: 0 0 0 3px rgba(67, 98, 219, 0.1);
}

.dresium-input:disabled {
	background-color: var(--dresium-gray-50);
	color: var(--dresium-gray-500);
	cursor: not-allowed;
}

/* Textarea */
.dresium-textarea {
	min-height: 100px;
	resize: vertical;
}

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

/* Error state */
.dresium-field--error .dresium-input {
	border-color: var(--dresium-error);
}

.dresium-field--error .dresium-input:focus {
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* RG-WEBDEV: Base error message style
   Modal-specific override in dresium-modal.css */
.dresium-field-error {
	display: flex;
	align-items: center;
	gap: var(--dresium-space-1);
	margin-top: var(--dresium-space-1);

	font-size: var(--dresium-text-xs);
	color: var(--dresium-error);
	line-height: var(--dresium-leading-normal);
}

.dresium-field-error::before {
	content: '⚠';
	font-size: var(--dresium-text-sm);
}

/* Success state */
.dresium-field--success .dresium-input {
	border-color: var(--dresium-success);
}

.dresium-field--success .dresium-input:focus {
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.dresium-field-success {
	display: flex;
	align-items: center;
	gap: var(--dresium-space-1);
	margin-top: var(--dresium-space-1);

	font-size: var(--dresium-text-xs);
	color: var(--dresium-success);
	line-height: var(--dresium-leading-normal);
}

.dresium-field-success::before {
	content: '✓';
	font-size: var(--dresium-text-sm);
	font-weight: var(--dresium-weight-bold);
}

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

.dresium-upload {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--dresium-space-2);

	min-height: 200px;
	padding: var(--dresium-space-8);

	background-color: var(--dresium-gray-50);
	border: 2px dashed var(--dresium-gray-300);
	border-radius: var(--dresium-radius-xl);

	cursor: pointer;
	transition: all var(--dresium-transition-base) var(--dresium-ease);
}

.dresium-upload:hover {
	background-color: var(--dresium-gray-100);
	border-color: var(--dresium-primary);
}

.dresium-upload--active {
	background-color: rgba(67, 98, 219, 0.05);
	border-color: var(--dresium-primary);
	border-style: solid;
}

.dresium-upload__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dresium-upload__icon {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 48px;
	color: var(--dresium-gray-400);

	transition: transform var(--dresium-transition-base) var(--dresium-ease);
}

.dresium-upload:hover .dresium-upload__icon {
	transform: scale(1.1);
	color: var(--dresium-primary);
}

.dresium-upload__text {
	text-align: center;
}

.dresium-upload__title {
	margin-bottom: var(--dresium-space-1);

	font-size: var(--dresium-text-base);
	font-weight: var(--dresium-weight-medium);
	color: var(--dresium-gray-900);
}

.dresium-upload__description {
	font-size: var(--dresium-text-sm);
	color: var(--dresium-gray-500);
}

.dresium-upload__button {
	margin-top: var(--dresium-space-2);
}

/* Upload with preview */
.dresium-upload--has-file {
	border-style: solid;
	border-color: var(--dresium-success);
	background-color: var(--dresium-success-light);
}

/* RG-WEBDEV 2025-01-18: Fixed dimensions for preview to prevent modal overflow */
.dresium-upload__preview {
	position: relative;
	/*width: 100%;*/
	max-width: 150px;
	max-height: 150px;
	border-radius: var(--dresium-radius-lg);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	/*background: #f4f5f9;*/
}

.dresium-upload__preview-img {
	width: 100%;
	height: 100%;
	max-width: 150px;
	max-height: 150px;
	display: block;
	object-fit: contain;
}

/* RG-WEBDEV 2025-01-18: Remove button styled like modal close - white circle background */
.dresium-upload__remove,
#dresium-upload-modal .dresium-upload__remove,
#dresium-main-modal .dresium-upload__remove,
button.dresium-upload__remove {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	display: flex !important;
	/* align-items: center !important; RG-WEBDEV */
	justify-content: center !important;
	align-items: center !important;
	background-color: #ffffff !important;
	color: #000000 !important;
	border: none !important;
	border-radius: 50% !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	/*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;*/
	transition: all 0.2s ease !important;
	z-index: 10 !important;
}

.dresium-upload__remove:hover,
#dresium-upload-modal .dresium-upload__remove:hover,
#dresium-main-modal .dresium-upload__remove:hover,
button.dresium-upload__remove:hover {
	background-color: #f4f5f9 !important;
	/* transform: scale(1.05) !important; RG-WEBDEV */
}

/* ============================================
   CHECKBOX & RADIO
   ============================================ */

.dresium-checkbox,
.dresium-radio {
	display: flex;
	align-items: flex-start;
	gap: var(--dresium-space-3);
	cursor: pointer;
}

.dresium-checkbox__input,
.dresium-radio__input {
	width: 20px;
	height: 20px;
	margin-top: 2px;

	border: 2px solid var(--dresium-gray-300);
	cursor: pointer;

	transition: all var(--dresium-transition-fast) var(--dresium-ease);
}

.dresium-checkbox__input {
	border-radius: var(--dresium-radius-sm);
}

.dresium-radio__input {
	border-radius: var(--dresium-radius-full);
}

.dresium-checkbox__input:checked,
.dresium-radio__input:checked {
	background-color: var(--dresium-primary);
	border-color: var(--dresium-primary);
}

.dresium-checkbox__input:focus,
.dresium-radio__input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(67, 98, 219, 0.1);
}

.dresium-checkbox__label,
.dresium-radio__label {
	flex: 1;
	font-size: var(--dresium-text-sm);
	color: var(--dresium-gray-700);
	line-height: var(--dresium-leading-normal);
	cursor: pointer;
}

/* ============================================
   TOGGLE SWITCH
   ============================================ */

.dresium-toggle {
	display: flex;
	align-items: center;
	gap: var(--dresium-space-3);
	cursor: pointer;
}

.dresium-toggle__input {
	position: relative;
	width: 48px;
	height: 24px;
	appearance: none;

	background-color: var(--dresium-gray-300);
	border-radius: var(--dresium-radius-full);

	cursor: pointer;
	transition: background-color var(--dresium-transition-base) var(--dresium-ease);
}

.dresium-toggle__input::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;

	width: 20px;
	height: 20px;

	background-color: var(--dresium-white);
	border-radius: var(--dresium-radius-full);
	box-shadow: var(--dresium-shadow-sm);

	transition: transform var(--dresium-transition-base) var(--dresium-ease);
}

.dresium-toggle__input:checked {
	background-color: var(--dresium-primary);
}

.dresium-toggle__input:checked::before {
	transform: translateX(24px);
}

.dresium-toggle__input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(67, 98, 219, 0.1);
}

.dresium-toggle__label {
	font-size: var(--dresium-text-sm);
	color: var(--dresium-gray-700);
	line-height: var(--dresium-leading-normal);
	cursor: pointer;
}

/* ============================================
   FORM ACTIONS
   ============================================ */

.dresium-form-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--dresium-space-3);
	margin-top: var(--dresium-space-6);
	padding-top: var(--dresium-space-6);
	border-top: 1px solid var(--dresium-gray-200);
}

.dresium-form-actions--center {
	justify-content: center;
}

.dresium-form-actions--between {
	justify-content: space-between;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
	.dresium-upload {
		min-height: 160px;
		padding: var(--dresium-space-6);
	}

	.dresium-upload__icon {
		width: 48px;
		height: 48px;
		font-size: 36px;
	}

	.dresium-upload__title {
		font-size: var(--dresium-text-sm);
	}

	.dresium-upload__description {
		font-size: var(--dresium-text-xs);
	}

	/* RG-WEBDEV 2025-01-18: Reduced preview height on mobile */
	.dresium-upload__preview {
		max-height: 180px;
	}

	.dresium-upload__preview-img {
		max-height: 180px;
	}
}