/* ============================================================
   CloudEASE Form Styles
   ============================================================
   Loaded after layout.css.
   Styles for all form components.
   
   Every input MUST have an associated <label> (WCAG 3.3.2).
   Error messages MUST use aria-describedby (WCAG 3.3.1).
   Required fields indicated with text (*), not color (WCAG 1.4.1).
   All sizes in rem. All colors from tokens.
   ============================================================ */


/* ---------------------------------------------------------
   FORM COMPONENT p+p RESET
   Typography sets .ce-main p + p { margin-top: 1rem }.
   Form components use flex gap for spacing, so reset this.
   --------------------------------------------------------- */

.ce-input p + p,
.ce-select p + p,
.ce-textarea p + p,
.ce-date p + p,
.ce-file p + p {
	margin-top: 0;
}


/* ---------------------------------------------------------
   FORM LAYOUT
   --------------------------------------------------------- */

.ce-form {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-lg);
}

.ce-form--inline {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--ce-space-sm);
}

/* Grouped fields: fieldset + legend (WCAG 1.3.1) */
.ce-fieldset {
	border: var(--ce-border-light);
	border-radius: var(--ce-radius-base);
	padding: var(--ce-space-sm) var(--ce-space-base) var(--ce-space-md) var(--ce-space-base);
}

.ce-fieldset__legend {
	font-size: var(--ce-font-size-sm);
	font-weight: var(--ce-font-weight-semibold);
	color: var(--ce-color-text);
	padding: 0 var(--ce-space-xs);
}

/* Indented sub-option within a fieldset or radio/checkbox group */
.ce-form-suboption {
	padding-left: 1.75rem;
}

/* Two-column form layout */
.ce-form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ce-space-base);
}

.ce-form-grid--full {
	grid-column: 1 / -1;
}

@media (max-width: 30em) {
	.ce-form-grid {
		grid-template-columns: 1fr;
	}
}


/* ---------------------------------------------------------
   INPUT — Text, Email, Password, Number, Tel, URL, Search
   --------------------------------------------------------- */

.ce-input {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-xs);
	padding-bottom: var(--ce-space-xs);
}

.ce-input__label {
	font-size: var(--ce-font-size-sm);
	font-weight: var(--ce-font-weight-medium);
	color: var(--ce-color-text);
	line-height: var(--ce-line-height-normal);
}

.ce-input__required {
	color: var(--ce-color-error);
	margin-left: var(--ce-space-2xs);
}

.ce-input__field {
	height: var(--ce-input-height);
	padding: var(--ce-input-padding-y) var(--ce-input-padding-x);
	font-size: var(--ce-input-font-size);
	line-height: var(--ce-line-height-normal);
	color: var(--ce-color-text);
	background-color: var(--ce-input-bg);
	border: var(--ce-input-border);
	border-radius: var(--ce-input-radius);
	transition: border-color var(--ce-transition-fast),
	            box-shadow var(--ce-transition-fast);
	width: 100%;
	text-align: left;
}

.ce-input__field:hover {
	border-color: var(--ce-color-border-focus);
}

.ce-input__field:focus-visible {
	border-color: var(--ce-color-border-focus);
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

/* Hint text below input */
.ce-input__hint {
	font-size: var(--ce-font-size-xs);
	color: var(--ce-color-text-muted);
	line-height: var(--ce-line-height-normal);
}

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

.ce-input--error .ce-input__field:focus-visible {
	border-color: var(--ce-color-border-error);
	outline-color: var(--ce-color-error);
}

.ce-input__error {
	font-size: var(--ce-font-size-xs);
	color: var(--ce-color-error);
	line-height: var(--ce-line-height-normal);
}

/* Error icon prefix — not color alone (WCAG 1.4.1) */
.ce-input__error::before {
	content: "⚠ ";
}

/* Disabled state */
.ce-input:has(.ce-input__field:disabled) .ce-input__label {
	color: var(--ce-color-text-muted);
}

.ce-input__field:disabled {
	background-color: var(--ce-color-bg);
	color: var(--ce-color-text-muted);
	cursor: not-allowed;
	opacity: 1; /* prevent iOS dimming */
}

/* Readonly */
.ce-input__field:read-only {
	background-color: var(--ce-color-bg);
}


/* ---------------------------------------------------------
   SELECT
   --------------------------------------------------------- */

.ce-select {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-xs);
	padding-bottom: var(--ce-space-xs);
}

.ce-select__label {
	font-size: var(--ce-font-size-sm);
	font-weight: var(--ce-font-weight-medium);
	color: var(--ce-color-text);
}

.ce-select__required {
	color: var(--ce-color-error);
	margin-left: var(--ce-space-2xs);
}

.ce-select__field {
	height: var(--ce-input-height);
	padding: var(--ce-input-padding-y) var(--ce-space-xl) var(--ce-input-padding-y) var(--ce-input-padding-x);
	font-size: var(--ce-input-font-size);
	line-height: var(--ce-line-height-normal);
	color: var(--ce-color-text);
	background-color: var(--ce-input-bg);
	border: var(--ce-input-border);
	border-radius: var(--ce-input-radius);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234A4A4A' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--ce-input-padding-x) center;
	background-size: 0.75rem;
	width: 100%;
	transition: border-color var(--ce-transition-fast);
}

.ce-select__field:hover {
	border-color: var(--ce-color-border-focus);
}

.ce-select__field:focus-visible {
	border-color: var(--ce-color-border-focus);
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

.ce-select__hint {
	font-size: var(--ce-font-size-xs);
	color: var(--ce-color-text-muted);
	line-height: var(--ce-line-height-normal);
}

/* Error */
.ce-select--error .ce-select__field {
	border-color: var(--ce-color-border-error);
}

.ce-select__error {
	font-size: var(--ce-font-size-xs);
	color: var(--ce-color-error);
}

.ce-select__error::before {
	content: "⚠ ";
}

/* Error focus */
.ce-select--error .ce-select__field:focus-visible {
	border-color: var(--ce-color-border-error);
	outline-color: var(--ce-color-error);
}

/* Disabled */
.ce-select:has(.ce-select__field:disabled) .ce-select__label {
	color: var(--ce-color-text-muted);
}

.ce-select__field:disabled {
	background-color: var(--ce-color-bg);
	color: var(--ce-color-text-muted);
	cursor: not-allowed;
	opacity: 1;
}


/* ---------------------------------------------------------
   TEXTAREA
   --------------------------------------------------------- */

.ce-textarea {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-xs);
	padding-bottom: var(--ce-space-xs);
}

.ce-textarea__label {
	font-size: var(--ce-font-size-sm);
	font-weight: var(--ce-font-weight-medium);
	color: var(--ce-color-text);
}

.ce-textarea__required {
	color: var(--ce-color-error);
	margin-left: var(--ce-space-2xs);
}

.ce-textarea__field {
	padding: var(--ce-input-padding-y) var(--ce-input-padding-x);
	font-size: var(--ce-input-font-size);
	line-height: var(--ce-line-height-normal);
	color: var(--ce-color-text);
	background-color: var(--ce-input-bg);
	border: var(--ce-input-border);
	border-radius: var(--ce-input-radius);
	resize: vertical;
	min-height: 6rem;
	width: 100%;
	transition: border-color var(--ce-transition-fast);
}

.ce-textarea__field:hover {
	border-color: var(--ce-color-border-focus);
}

.ce-textarea__field:focus-visible {
	border-color: var(--ce-color-border-focus);
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

.ce-textarea__hint {
	font-size: var(--ce-font-size-xs);
	color: var(--ce-color-text-muted);
	line-height: var(--ce-line-height-normal);
}

.ce-textarea--error .ce-textarea__field {
	border-color: var(--ce-color-border-error);
}

.ce-textarea--error .ce-textarea__field:focus-visible {
	border-color: var(--ce-color-border-error);
	outline-color: var(--ce-color-error);
}

.ce-textarea__error {
	font-size: var(--ce-font-size-xs);
	color: var(--ce-color-error);
}

.ce-textarea__error::before {
	content: "⚠ ";
}

.ce-textarea--disabled .ce-textarea__label {
	color: var(--ce-color-text-muted);
}

.ce-textarea__field:disabled {
	background-color: var(--ce-color-bg);
	color: var(--ce-color-text-muted);
	cursor: not-allowed;
	opacity: 1;
}


/* ---------------------------------------------------------
   CHECKBOX
   Custom styled, keyboard accessible.
   --------------------------------------------------------- */

.ce-checkbox {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--ce-space-sm);
}

.ce-checkbox__input {
	appearance: none;
	width: 1.25rem;
	height: 1.25rem;
	min-width: 1.25rem;
	border: var(--ce-border);
	border-radius: var(--ce-radius-sm);
	background-color: var(--ce-input-bg);
	cursor: pointer;
	transition: background-color var(--ce-transition-fast),
	            border-color var(--ce-transition-fast);
}

.ce-checkbox__input:checked {
	background-color: var(--ce-color-primary);
	border-color: var(--ce-color-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='white' d='M4 8.2L0.8 5l-0.8 0.8L4 9.8l8-8-0.8-0.8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.75rem;
}

.ce-checkbox__input:focus-visible {
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

.ce-checkbox__input:disabled {
	background-color: var(--ce-color-bg);
	cursor: not-allowed;
}

.ce-checkbox__label {
	font-size: var(--ce-font-size-sm);
	line-height: var(--ce-line-height-normal);
	color: var(--ce-color-text);
	cursor: pointer;
}

.ce-checkbox__input:disabled + .ce-checkbox__label {
	color: var(--ce-color-text-muted);
	cursor: not-allowed;
}

/* Error */
.ce-checkbox--error .ce-checkbox__input {
	border-color: var(--ce-color-border-error);
}

.ce-checkbox__error {
	flex-basis: 100%;
	font-size: var(--ce-font-size-xs);
	color: var(--ce-color-error);
}

.ce-checkbox__error::before {
	content: "⚠ ";
}

.ce-checkbox__required {
	color: var(--ce-color-error);
	margin-left: var(--ce-space-2xs);
}

.ce-checkbox__hint {
	flex-basis: 100%;
	font-size: var(--ce-font-size-xs);
	color: var(--ce-color-text-muted);
	line-height: var(--ce-line-height-normal);
}


/* ---------------------------------------------------------
   RADIO
   Custom styled, keyboard accessible.
   Group with <fieldset> + <legend> (WCAG 1.3.1).
   --------------------------------------------------------- */

.ce-radio {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--ce-space-sm);
}

.ce-radio__input {
	appearance: none;
	width: 1.25rem;
	height: 1.25rem;
	min-width: 1.25rem;
	border: var(--ce-border);
	border-radius: var(--ce-radius-full);
	background-color: var(--ce-input-bg);
	cursor: pointer;
	transition: border-color var(--ce-transition-fast);
}

.ce-radio__input:checked {
	border-color: var(--ce-color-primary);
	border-width: 5px;
}

.ce-radio__input:focus-visible {
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

.ce-radio__input:disabled {
	background-color: var(--ce-color-bg);
	cursor: not-allowed;
}

.ce-radio__label {
	font-size: var(--ce-font-size-sm);
	line-height: var(--ce-line-height-normal);
	color: var(--ce-color-text);
	cursor: pointer;
}

.ce-radio__input:disabled + .ce-radio__label {
	color: var(--ce-color-text-muted);
	cursor: not-allowed;
}

/* Radio group — vertical stack */
.ce-radio-group {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-sm);
}

/* Radio group — horizontal */
.ce-radio-group--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--ce-space-base);
}

.ce-radio--error .ce-radio__input {
	border-color: var(--ce-color-border-error);
}

.ce-radio__error {
	flex-basis: 100%;
	font-size: var(--ce-font-size-xs);
	color: var(--ce-color-error);
}

.ce-radio__error::before {
	content: "⚠ ";
}

.ce-radio__required {
	color: var(--ce-color-error);
	margin-left: var(--ce-space-2xs);
}

.ce-radio__hint {
	flex-basis: 100%;
	font-size: var(--ce-font-size-xs);
	color: var(--ce-color-text-muted);
	line-height: var(--ce-line-height-normal);
}


/* ---------------------------------------------------------
   FILE INPUT
   --------------------------------------------------------- */

.ce-file {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-xs);
}

.ce-file__label {
	font-size: var(--ce-font-size-sm);
	font-weight: var(--ce-font-weight-medium);
	color: var(--ce-color-text);
}

.ce-file__dropzone {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 5rem;
	padding: var(--ce-space-base);
	border: 2px dashed var(--ce-color-border);
	border-radius: var(--ce-radius-base);
	background-color: var(--ce-color-bg);
	color: var(--ce-color-text-muted);
	font-size: var(--ce-font-size-sm);
	text-align: center;
	cursor: pointer;
	transition: border-color var(--ce-transition-fast),
	            background-color var(--ce-transition-fast);
}

.ce-file__dropzone:hover {
	border-color: var(--ce-color-border-focus);
	background-color: var(--ce-color-primary-light);
}

.ce-file__dropzone:focus-within {
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

.ce-file__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

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

.ce-file__error {
	font-size: var(--ce-font-size-xs);
	color: var(--ce-color-error);
}

.ce-file__error::before {
	content: "⚠ ";
}

/* Disabled */
.ce-file--disabled .ce-file__label {
	color: var(--ce-color-text-muted);
}

.ce-file--disabled .ce-file__dropzone {
	background-color: var(--ce-color-bg);
	border-color: var(--ce-color-border-light);
	color: var(--ce-color-text-muted);
	cursor: not-allowed;
}

.ce-file--disabled .ce-file__dropzone:hover {
	border-color: var(--ce-color-border-light);
	background-color: var(--ce-color-bg);
}

/* Error */
.ce-file--error .ce-file__dropzone {
	border-color: var(--ce-color-border-error);
}

.ce-file--error .ce-file__dropzone:focus-within {
	border-color: var(--ce-color-border-error);
	outline-color: var(--ce-color-error);
}

.ce-file__required {
	color: var(--ce-color-error);
	margin-left: var(--ce-space-2xs);
}


/* ---------------------------------------------------------
   DATE INPUT
   Base styles for date input wrapper.
   Calendar popup styles in components.css.
   --------------------------------------------------------- */

.ce-date {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-xs);
}

.ce-date__label {
	font-size: var(--ce-font-size-sm);
	font-weight: var(--ce-font-weight-medium);
	color: var(--ce-color-text);
}

.ce-date__required {
	color: var(--ce-color-error);
	margin-left: var(--ce-space-2xs);
}

.ce-date__wrapper {
	position: relative;
}

.ce-date__field {
	height: var(--ce-input-height);
	padding: var(--ce-input-padding-y) var(--ce-input-padding-x);
	font-size: var(--ce-input-font-size);
	line-height: var(--ce-line-height-normal);
	color: var(--ce-color-text);
	background-color: var(--ce-input-bg);
	border: var(--ce-input-border);
	border-radius: var(--ce-input-radius);
	width: 100%;
	transition: border-color var(--ce-transition-fast);
}

.ce-date__field:focus-visible {
	border-color: var(--ce-color-border-focus);
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

/* Format mask hint inside input */
.ce-date__field::placeholder {
	color: var(--ce-color-text-muted);
	opacity: 1;
}

.ce-date__icon {
	position: absolute;
	right: var(--ce-input-padding-x);
	top: 50%;
	transform: translateY(-50%);
	color: var(--ce-color-text-muted);
	pointer-events: none;
	width: 1rem;
	height: 1rem;
}

/* Extra right padding when icon is present */
.ce-date__wrapper:has(.ce-date__icon) .ce-date__field {
	padding-right: var(--ce-space-xl);
}

.ce-date__hint {
	font-size: var(--ce-font-size-xs);
	color: var(--ce-color-text-muted);
	line-height: var(--ce-line-height-normal);
}

.ce-date--error .ce-date__field {
	border-color: var(--ce-color-border-error);
}

.ce-date--error .ce-date__field:focus-visible {
	border-color: var(--ce-color-border-error);
	outline-color: var(--ce-color-error);
}

.ce-date--disabled .ce-date__label {
	color: var(--ce-color-text-muted);
}

.ce-date__field:disabled {
	background-color: var(--ce-color-bg);
	color: var(--ce-color-text-muted);
	cursor: not-allowed;
	opacity: 1;
}

.ce-date__error {
	font-size: var(--ce-font-size-xs);
	color: var(--ce-color-error);
}

.ce-date__error::before {
	content: "⚠ ";
}


/* ---------------------------------------------------------
   TWO-COLUMN FORM LAYOUT
   Side-by-side columns with vertical divider.
   Collapses to single column below 48em.
   --------------------------------------------------------- */

.ce-form--2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0;
}

.ce-form__col {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-base);
}

.ce-form__col:not(.ce-form__col ~ .ce-form__col) {
	padding-right: var(--ce-space-xl);
}

.ce-form__col + .ce-form__col {
	border-left: var(--ce-border-light);
	padding-left: var(--ce-space-xl);
}

/* Non-column children span full width (actions, hidden inputs) */
.ce-form--2col > :not(.ce-form__col) {
	grid-column: 1 / -1;
}

@media (max-width: 48em) {
	.ce-form--2col {
		grid-template-columns: 1fr;
	}

	.ce-form__col:not(.ce-form__col ~ .ce-form__col) {
		padding-right: 0;
	}

	.ce-form__col + .ce-form__col {
		border-left: none;
		padding-left: 0;
		border-top: var(--ce-border-light);
		padding-top: var(--ce-space-base);
	}
}


/* ---------------------------------------------------------
   READ-ONLY FORM
   Visual treatment when entire form is non-editable.
   --------------------------------------------------------- */

.ce-form--readonly .ce-fieldset {
	border-color: var(--ce-color-border-light);
}


/* ---------------------------------------------------------
   FORM NOTE
   Informational text within a form section.
   --------------------------------------------------------- */

.ce-form__note {
	font-size: var(--ce-font-size-sm);
	color: var(--ce-color-text-muted);
	line-height: var(--ce-line-height-normal);
}


/* ---------------------------------------------------------
   FORM ACTIONS
   Submit / cancel button row at bottom of form.
   --------------------------------------------------------- */

.ce-form__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--ce-space-sm);
	padding-top: var(--ce-space-lg);
	padding-bottom: var(--ce-space-base);
	border-top: var(--ce-border-light);
}

@media (max-width: 30em) {
	.ce-form__actions {
		flex-direction: column;
		align-items: stretch;
	}
}


/* ---------------------------------------------------------
   FORM METADATA BADGE
   Inline key-value display (e.g. "Group ID: 42").
   --------------------------------------------------------- */

.ce-form__meta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--ce-space-xs);
	padding: var(--ce-space-2xs) var(--ce-space-sm);
	font-size: var(--ce-font-size-sm);
	color: var(--ce-color-text-secondary);
	background-color: var(--ce-color-bg);
	border-radius: var(--ce-radius-sm);
}


/* ---------------------------------------------------------
   FORM EMPTY STATE
   Placeholder text when a form section has no items.
   --------------------------------------------------------- */

.ce-form__empty {
	font-size: var(--ce-font-size-sm);
	color: var(--ce-color-text-muted);
	padding: var(--ce-space-sm);
}


/* ---------------------------------------------------------
   FIELDSET NOTE
   Informational callout inside a fieldset (e.g. time format hints).
   --------------------------------------------------------- */

.ce-fieldset__note {
	display: inline-block;
	font-size: var(--ce-font-size-xs);
	font-weight: var(--ce-font-weight-medium);
	color: var(--ce-color-warning);
	background-color: var(--ce-color-warning-light);
	padding: var(--ce-space-xs) var(--ce-space-sm);
	border-radius: var(--ce-radius-sm);
	margin-top: var(--ce-space-sm);
	line-height: var(--ce-line-height-normal);
}


/* ---------------------------------------------------------
   SEARCH INPUT
   Visually hidden label required (WCAG 3.3.2, 1.1.1).
   Use aria-label or .ce-sr-only label.
   --------------------------------------------------------- */

.ce-search {
	position: relative;
}

.ce-search__field {
	height: var(--ce-input-height);
	padding: var(--ce-input-padding-y) var(--ce-input-padding-x) var(--ce-input-padding-y) var(--ce-space-xl);
	font-size: var(--ce-input-font-size);
	color: var(--ce-color-text);
	background-color: var(--ce-input-bg);
	border: var(--ce-input-border);
	border-radius: var(--ce-radius-full);
	width: 100%;
	transition: border-color var(--ce-transition-fast);
}

.ce-search__field:focus-visible {
	border-color: var(--ce-color-border-focus);
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

.ce-search__icon {
	position: absolute;
	left: var(--ce-input-padding-x);
	top: 50%;
	transform: translateY(-50%);
	color: var(--ce-color-text-muted);
	pointer-events: none;
	width: 1rem;
	height: 1rem;
}