/**
 * ACME Forms — Shared Frontend Form States CSS
 *
 * Provides all UI state styles consumed by the AcmeForms JS module:
 *   - Loading state (spinner + disabled button)
 *   - Error state (field border + inline message)
 *   - Success state (confirmation panel)
 *   - Disabled / inactive button
 *   - Form-level error notice
 *
 * BEM convention: .acme-form, .acme-input, .acme-btn, .acme-form-notice.
 *
 * TASK-12.4.1 — Loading state: spinner + disabled submit button.
 * TASK-12.4.2 — Error state: red border + inline message below field.
 * TASK-12.4.3 — Success state: green confirmation, form replaced.
 * TASK-12.4.4 — Disabled/inactive button styling rules.
 *
 * @package AcmeEdu
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES — Form Design Tokens
   ========================================================================== */
:root {
	/* Colours */
	--acme-form-error-color:       #d32f2f;
	--acme-form-error-bg:          #fef2f2;
	--acme-form-error-border:      #ef5350;
	--acme-form-success-color:     #1b5e20;
	--acme-form-success-bg:        #f0fdf4;
	--acme-form-success-border:    #4caf50;
	--acme-form-notice-bg-error:   #fef2f2;
	--acme-form-notice-border-err: #d32f2f;
	--acme-form-notice-bg-success: #f0fdf4;
	--acme-form-notice-border-suc: #4caf50;

	/* Disabled state */
	--acme-btn-disabled-bg:        #9e9e9e;
	--acme-btn-disabled-color:     #ffffff;
	--acme-btn-disabled-cursor:    not-allowed;
	--acme-btn-disabled-opacity:   0.65;

	/* Loading spinner */
	--acme-spinner-size:           18px;
	--acme-spinner-border:         3px;
	--acme-spinner-color:          rgba(255, 255, 255, 0.4);
	--acme-spinner-highlight:      #ffffff;

	/* Transitions */
	--acme-form-transition:        200ms ease;
}

.acme-form textarea {
	box-sizing: border-box;
	min-height: 120px;
	resize: vertical;
	width: 100%;
}

/* ==========================================================================
   LOADING STATE
   TASK-12.4.1: Spinner + disabled submit button during AJAX call.
   ========================================================================== */

/**
 * While loading, prevent any further interaction with the form
 * (pointer-events off on the entire form — not just the button).
 */
.acme-form--loading {
	position: relative;
	pointer-events: none;
	opacity: 0.8;
}

/**
 * Submit button — loading state.
 */
.acme-btn--loading,
.acme-btn--loading:hover,
.acme-btn--loading:focus {
	cursor: var(--acme-btn-disabled-cursor);
	opacity: var(--acme-btn-disabled-opacity);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/**
 * Spinner injected before the button text via ::before.
 * Uses a CSS border animation — no image dependency.
 */
.acme-btn--loading::before {
	content: '';
	display: inline-block;
	width:  var(--acme-spinner-size);
	height: var(--acme-spinner-size);
	border: var(--acme-spinner-border) solid var(--acme-spinner-color);
	border-top-color: var(--acme-spinner-highlight);
	border-radius: 50%;
	animation: acme-spin 0.75s linear infinite;
	flex-shrink: 0;
}

@keyframes acme-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   DISABLED / INACTIVE BUTTON STATE
   TASK-12.4.4: Disabled/inactive button styling rules.
   ========================================================================== */

.acme-btn:disabled,
button[type="submit"]:disabled {
	background-color: var(--acme-btn-disabled-bg) !important;
	color:            var(--acme-btn-disabled-color) !important;
	cursor:           var(--acme-btn-disabled-cursor);
	opacity:          var(--acme-btn-disabled-opacity);
	box-shadow:       none !important;
	transform:        none !important;
}

/* ==========================================================================
   FIELD ERROR STATE
   TASK-12.4.2: Red border + inline message below field.
   ========================================================================== */

/**
 * Error highlight on the input/select/textarea itself.
 */
.acme-input--error,
input.acme-input--error,
select.acme-input--error,
textarea.acme-input--error {
	border-color: var(--acme-form-error-border) !important;
	background-color: var(--acme-form-error-bg) !important;
	outline: none;
	box-shadow: 0 0 0 2px rgba(239, 83, 80, 0.2);
	transition: border-color var(--acme-form-transition),
	            box-shadow   var(--acme-form-transition);
}

/**
 * Inline error message rendered by _setFieldError().
 */
.acme-field-error {
	display: block;
	margin-top: 4px;
	font-size: var(--fs-meta, 0.875rem);
	line-height: 1.4;
	color: var(--acme-form-error-color);
	font-weight: 500;
	animation: acme-fade-in 150ms ease;
}

@keyframes acme-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0);    }
}

/* ==========================================================================
   FORM-LEVEL NOTICE (error / success banner above the form)
   TASK-12.3.3: Frontend fallback UI states.
   ========================================================================== */

.acme-form-notice {
	display: none;
	padding: 12px 16px;
	border-radius: 6px;
	border-left: 4px solid transparent;
	margin-bottom: 20px;
	font-size: var(--fs-body, 1rem);
	line-height: 1.5;
	animation: acme-fade-in 200ms ease;
}

.acme-form-notice.is-visible {
	display: block;
}

.acme-form-notice--error {
	background-color: var(--acme-form-notice-bg-error);
	border-color:     var(--acme-form-notice-border-err);
	color:            var(--acme-form-error-color);
}

.acme-form-notice--success {
	background-color: var(--acme-form-notice-bg-success);
	border-color:     var(--acme-form-notice-border-suc);
	color:            var(--acme-form-success-color);
}

/* ==========================================================================
   SUCCESS STATE — Form replaced by confirmation panel
   TASK-12.4.3: Green confirmation, form replaced with success message.
   ========================================================================== */

/**
 * Hide the form itself once submission succeeds.
 */
.acme-form--hidden {
	display: none !important;
}

/**
 * Success confirmation panel.
 * Phase 13 will render a <div id="acme-*-success" class="acme-success-panel">
 * inside the form wrapper. This class controls its visibility.
 */
.acme-success-panel {
	display: none;
	padding: 32px 24px;
	text-align: center;
	background-color: var(--acme-form-success-bg);
	border: 2px solid var(--acme-form-success-border);
	border-radius: 10px;
	animation: acme-fade-in 300ms ease;
}

.acme-success-panel.is-visible {
	display: block;
}

.acme-success-panel__icon {
	font-size: var(--fs-hero-title, 3rem);
	line-height: 1;
	margin-bottom: 16px;
	color: var(--acme-form-success-border);
}

.acme-success-panel__title {
	font-size: var(--fs-subsection-title, 1.375rem);
	font-weight: 700;
	color: var(--acme-form-success-color);
	margin: 0 0 8px;
}

.acme-success-panel__message {
	font-size: var(--fs-body, 1rem);
	color: #2d6a32;
	margin: 0;
	line-height: 1.6;
}

/* ==========================================================================
   FOCUS VISIBLE — accessibility: real-time validation blur indicator
   TASK-12.4.5: Real-time validation on field blur.
   ========================================================================== */

/**
 * Valid state — subtle green indicator after a successful blur validation.
 * Applied by JS when a field passes validation on blur.
 */
.acme-input--valid,
input.acme-input--valid,
select.acme-input--valid,
textarea.acme-input--valid {
	border-color: var(--acme-form-success-border) !important;
	box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.15);
	transition: border-color var(--acme-form-transition),
	            box-shadow   var(--acme-form-transition);
}

/* ==========================================================================
   RESPONSIVE — stack form actions on small screens
   ========================================================================== */

@media (max-width: 480px) {
	.acme-form-notice {
		font-size: var(--fs-body-sm, 0.875rem);
	}

	.acme-field-error {
		font-size: var(--fs-xs, 0.75rem);
	}

	.acme-success-panel {
		padding: 24px 16px;
	}

	.acme-success-panel__title {
		font-size: var(--fs-card-title, 1.125rem);
	}
}