/**
 * Rajgir Parent Theme
 *
 * Base CSS — Forms
 *
 * Canonical path:
 * assets/css/base/forms.css
 *
 * Responsibility:
 * - Base presentation for native form controls.
 * - Consistent control typography.
 * - Label and help-text foundation.
 * - Input / select / textarea presentation.
 * - Checkbox / radio baseline.
 * - Native focus presentation.
 * - Disabled state presentation.
 * - Validation-state presentation hooks.
 *
 * This file does NOT:
 * - perform validation;
 * - sanitize data;
 * - authorize users;
 * - submit API requests;
 * - implement business rules;
 * - implement form-specific workflows;
 * - replace backend validation.
 *
 * @package Rajgir
 */


/* ==========================================================================
   1. FORM BOUNDARY
   ========================================================================== */

form {
	max-width: 100%;
}


/* ==========================================================================
   2. FORM GROUP
   ========================================================================== */

fieldset {
	min-width: 0;
}


/* ==========================================================================
   3. LABEL
   ========================================================================== */

label {
	display: inline-block;

	color:
		var(--rajgir-color-text);

	font-family:
		var(--rajgir-type-label-font-family);

	font-size:
		var(--rajgir-type-label-font-size);

	font-weight:
		var(--rajgir-type-label-font-weight);

	line-height:
		var(--rajgir-type-label-line-height);
}


/* ==========================================================================
   4. REQUIRED FIELD INDICATOR
   ========================================================================== */

[aria-required="true"] {
	/*
	 * The semantic required state remains in markup.
	 * Visual indication may be provided by the consuming component.
	 */
}


/* ==========================================================================
   5. TEXT INPUT CONTROLS
   ========================================================================== */

input:not(
	[type="checkbox"],
	[type="radio"],
	[type="range"],
	[type="file"],
	[type="hidden"],
	[type="submit"],
	[type="button"],
	[type="reset"],
	[type="image"]
),
select,
textarea {
	display: block;

	width: 100%;
	max-width: 100%;

	border: 1px solid var(--rajgir-color-border);

	border-radius:
		var(--rajgir-radius-input);

	background-color:
		var(--rajgir-color-background);

	color:
		var(--rajgir-color-text);

	font-family:
		var(--rajgir-font-family-ui);

	font-size:
		var(--rajgir-font-size-body);

	font-weight:
		var(--rajgir-font-weight-regular);

	line-height:
		var(--rajgir-line-height-body);
}


/* ==========================================================================
   6. TEXT INPUT PADDING
   ========================================================================== */

input:not(
	[type="checkbox"],
	[type="radio"],
	[type="range"],
	[type="file"],
	[type="hidden"],
	[type="submit"],
	[type="button"],
	[type="reset"],
	[type="image"]
),
select,
textarea {
	padding:
		var(--rajgir-space-component-internal);
}


/* ==========================================================================
   7. TEXTAREA
   ========================================================================== */

textarea {
	min-height: 8rem;

	resize: vertical;
}


/* ==========================================================================
   8. SELECT
   ========================================================================== */

select {
	max-width: 100%;
}


/* ==========================================================================
   9. PLACEHOLDER
   ========================================================================== */

input::placeholder,
textarea::placeholder {
	color:
		var(--rajgir-color-text-muted);

	opacity: 1;
}


/*
 * Placeholder is informational guidance only.
 *
 * It is NOT a replacement for a meaningful <label>.
 */


/* ==========================================================================
   10. CHECKBOX / RADIO
   ========================================================================== */

input[type="checkbox"],
input[type="radio"] {
	margin: 0;

	accent-color:
		var(--rajgir-color-interactive);
}


/* ==========================================================================
   11. CHECKBOX / RADIO LABEL RELATIONSHIP
   ========================================================================== */

label:has(
	input[type="checkbox"],
	input[type="radio"]
) {
	display: inline-flex;

	align-items: center;

	gap:
		var(--rajgir-space-icon-gap);
}


/* ==========================================================================
   12. FILE INPUT
   ========================================================================== */

input[type="file"] {
	max-width: 100%;

	color:
		var(--rajgir-color-text);

	font-family:
		var(--rajgir-font-family-ui);

	font-size:
		var(--rajgir-font-size-body);
}


/* ==========================================================================
   13. RANGE INPUT
   ========================================================================== */

input[type="range"] {
	max-width: 100%;

	accent-color:
		var(--rajgir-color-interactive);
}


/* ==========================================================================
   14. BUTTON CONTROLS
   ========================================================================== */

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	font-family:
		var(--rajgir-type-button-font-family);

	font-weight:
		var(--rajgir-type-button-font-weight);

	line-height:
		var(--rajgir-type-button-line-height);
}


/*
 * Detailed button appearance belongs to:
 *
 * assets/css/components/buttons.css
 *
 * This base file only establishes typography inheritance.
 */


/* ==========================================================================
   15. FOCUS
   ========================================================================== */

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   16. INVALID STATE
   ========================================================================== */

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
input:invalid,
select:invalid,
textarea:invalid {
	border-color:
		var(--rajgir-color-error);
}


/*
 * aria-invalid is preferred when the application explicitly communicates
 * the validated state.
 *
 * CSS does not perform validation.
 */


/* ==========================================================================
   17. VALID STATE
   ========================================================================== */

input[aria-invalid="false"],
select[aria-invalid="false"],
textarea[aria-invalid="false"] {
	border-color:
		var(--rajgir-color-success);
}


/* ==========================================================================
   18. DISABLED STATE
   ========================================================================== */

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
	cursor: not-allowed;

	opacity: 0.65;
}


/* ==========================================================================
   19. READONLY STATE
   ========================================================================== */

input[readonly],
textarea[readonly] {
	cursor: default;
}


/* ==========================================================================
   20. HELP TEXT
   ========================================================================== */

.form-help,
.form-description,
[role="note"] {
	color:
		var(--rajgir-color-text-muted);

	font-family:
		var(--rajgir-font-family-body);

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   21. ERROR MESSAGE
   ========================================================================== */

.form-error,
[role="alert"] {
	color:
		var(--rajgir-color-error);

	font-family:
		var(--rajgir-font-family-body);

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   22. SUCCESS MESSAGE
   ========================================================================== */

.form-success,
[role="status"] {
	color:
		var(--rajgir-color-success);

	font-family:
		var(--rajgir-font-family-body);

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   23. SEARCH INPUT
   ========================================================================== */

input[type="search"] {
	max-width: 100%;
}


/* ==========================================================================
   24. AUTOFILL
   ========================================================================== */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-text-fill-color:
		var(--rajgir-color-text);
}


/* ==========================================================================
   25. FORM CONTENT WRAPPING
   ========================================================================== */

input,
select,
textarea,
button {
	overflow-wrap: break-word;
}


/* ==========================================================================
   26. FORM ACCESSIBILITY FOUNDATION
   ========================================================================== */

/*
 * Forms must preserve:
 *
 * Label
 * Input
 * Help Text
 * Validation
 * Error
 * Success
 *
 * Semantic HTML remains the baseline.
 *
 * Native controls are preferred where applicable:
 *
 * <input>
 * <textarea>
 * <select>
 * <button>
 */


/* ==========================================================================
   27. FORM RESPONSIBILITY BOUNDARY
   ========================================================================== */

/*
 * Presentation:
 *     This file.
 *
 * Component-specific presentation:
 *     assets/css/components/forms.css
 *
 * Form behavior:
 *     assets/js/components/
 *     or approved feature module.
 *
 * Client-side validation:
 *     presentation/application-client boundary.
 *
 * Server-side validation:
 *     Application / backend authority.
 *
 * Authorization:
 *     Backend authority.
 *
 * Business rules:
 *     Application / domain authority.
 */


/* ==========================================================================
   28. FORM ANTI-PATTERNS
   ========================================================================== */

/*
 * This CSS must never be used to justify:
 *
 * - label-less inputs;
 * - placeholder-only labels;
 * - fake div-based controls;
 * - hidden focus indicators;
 * - client validation as security;
 * - business logic in CSS;
 * - authorization in frontend presentation.
 */


/* ==========================================================================
   29. BASE FORM BOUNDARY
   ========================================================================== */

/*
 * Detailed variants, visual states and reusable form components belong
 * to the component layer.
 *
 * Page-specific form presentation belongs to:
 *
 * assets/css/pages/
 *
 * Responsive form adjustments belong to:
 *
 * assets/css/responsive/
 */