/* ============================================================================
   ROEIA LMS — عناصر الإدخال
   ----------------------------------------------------------------------------
   مفردات واحدة لكل حقل في المنتج. كانت ثمانية قوالب تُنسّق حقولها بنفسها،
   كلٌّ بمقاس وحدّ ونصف قطر مختلف — فتبدو الشاشات وكأنها من منتجات شتّى.

   ❗ قاعدة النظام (design/BRAND.md): صفر قيمة لونية أو مقاس مكتوب مباشرة.
   ============================================================================ */

/* ------------------------------------------------------- 1. الحقل الأساسي */

.rlms-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.rlms-wrap select,
.rlms-wrap textarea,
.rlms-filters input,
.rlms-filters select,
.rlms-field input,
.rlms-field select,
.rlms-field textarea {
	appearance: none;
	font: inherit;

	/*
	 * 16px لا 13px. سببان: قابلية القراءة أثناء الكتابة، والأهم أن
	 * iOS Safari يُكبّر الصفحة تلقائيًا عند التركيز على حقل أصغر من
	 * 16px — فيقفز التخطيط بأكمله. هذا خلل حقيقي على الجوّال لا تفضيل.
	 */
	font-size: var( --rlms-text-base );
	line-height: var( --rlms-leading-body-en );

	/* حشو أوسع: 8px/12px السابقة كانت تخنق النصّ داخل الحقل. */
	padding-block: var( --rlms-space-3 );
	padding-inline: var( --rlms-space-4 );

	color: var( --rlms-text );
	background-color: var( --rlms-surface );

	/*
	 * ❗ حدّ مرئي لا شفاف. كانت `border: 1px solid transparent` تخالف
	 * قاعدة النظام نفسه: «الفصل الأساسي حدّ شعري 1px لا ظلّ»
	 * (DESIGN.md §Elevation). بلا حدّ يذوب الحقل في الخلفية فيُقرأ
	 * مستطيلًا رماديًا لا حقل إدخال — وهو أصل الإحساس بالبدائية.
	 */
	border: var( --rlms-border-hair ) solid var( --rlms-border-strong );

	/* 8px ضمن النطاق العملي للنظام (8–11)، لا 5px الضيّقة. */
	border-radius: var( --rlms-radius-md );

	transition:
		border-color var( --rlms-dur-fast ) var( --rlms-ease ),
		background-color var( --rlms-dur-fast ) var( --rlms-ease ),
		box-shadow var( --rlms-dur-fast ) var( --rlms-ease );
}

/* ------------------------------------------------------- 2. حالات كاملة */

.rlms-wrap input:hover:not(:disabled):not([type="submit"]):not([type="button"]),
.rlms-wrap select:hover:not(:disabled),
.rlms-wrap textarea:hover:not(:disabled),
.rlms-filters input:hover,
.rlms-filters select:hover {
	border-color: var( --rlms-text-faint );
}

.rlms-wrap input:focus-visible,
.rlms-wrap select:focus-visible,
.rlms-wrap textarea:focus-visible,
.rlms-filters input:focus-visible,
.rlms-filters select:focus-visible {
	outline: none;
	border-color: var( --rlms-brand );
	/* هالة رقيقة بلون العلامة — تأكيد للتركيز لا ظلّ زخرفي. */
	box-shadow: 0 0 0 3px var( --rlms-brand-subtle );
}

.rlms-wrap input:disabled,
.rlms-wrap select:disabled,
.rlms-wrap textarea:disabled {
	background-color: var( --rlms-surface-sunken );
	color: var( --rlms-text-faint );
	border-color: var( --rlms-border );
	cursor: not-allowed;
}

.rlms-wrap input[aria-invalid="true"],
.rlms-wrap textarea[aria-invalid="true"],
.rlms-wrap .is-error input,
.rlms-wrap .is-error textarea {
	border-color: var( --rlms-danger );
}

/*
 * ❗ النصّ النائب: `--rlms-text-muted` (#8A857B) يعطي 3.67:1 على سطح
 * أبيض — راسب في شرط 4.5:1. النائب نصّ يقرأه المستخدم فعلًا ليعرف
 * ما يُكتب هنا، لا زخرفة. `--rlms-text-placeholder` يعطي 5.62:1.
 */
.rlms-wrap ::placeholder,
.rlms-filters ::placeholder,
.rlms-field ::placeholder {
	color: var( --rlms-text-placeholder );
	opacity: 1; /* Firefox يخفّضها افتراضيًا فيهبط التباين دون الحدّ. */
}

/* ------------------------------------------------ 3. القوائم المنسدلة */

.rlms-wrap select,
.rlms-filters select {
	cursor: pointer;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B6760' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-size: 10px 6px;

	/*
	 * ❗ السهم على الجهة المنطقية النهائية، والحشو على **نفس** الجهة.
	 * العلّة السابقة: السهم يسار (صحيح في RTL) لكن الحشو
	 * `padding-inline-start` أي يمين — فيصطدم النصّ بالسهم. هنا
	 * الحشو `padding-inline-end` فيتطابقان في الاتجاهين معًا.
	 */
	padding-inline-end: var( --rlms-space-8 );
}

[dir="rtl"] .rlms-wrap select,
[dir="rtl"] .rlms-filters select {
	background-position: left var( --rlms-space-4 ) center;
}

[dir="ltr"] .rlms-wrap select,
[dir="ltr"] .rlms-filters select,
.rlms-wrap select,
.rlms-filters select {
	background-position: right var( --rlms-space-4 ) center;
}

[dir="rtl"] .rlms-wrap select,
[dir="rtl"] .rlms-filters select {
	background-position: left var( --rlms-space-4 ) center;
}

/* ------------------------------------------------------------ 4. الأزرار */

.rlms-wrap button:not(.rlms-plain),
.rlms-wrap input[type="submit"],
.rlms-filters button,
.rlms-btn {
	appearance: none;
	font: inherit;
	font-size: var( --rlms-text-md );
	font-weight: var( --rlms-weight-medium );
	line-height: var( --rlms-leading-none );

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --rlms-space-2 );

	padding-block: var( --rlms-space-3 );
	padding-inline: var( --rlms-space-6 );

	color: var( --rlms-text-on-brand );
	background-color: var( --rlms-brand );
	border: var( --rlms-border-hair ) solid var( --rlms-brand );
	border-radius: var( --rlms-radius-md );
	box-shadow: var( --rlms-shadow-sm );
	cursor: pointer;

	transition:
		background-color var( --rlms-dur-fast ) var( --rlms-ease ),
		border-color var( --rlms-dur-fast ) var( --rlms-ease ),
		transform var( --rlms-dur-fast ) var( --rlms-ease ),
		box-shadow var( --rlms-dur-fast ) var( --rlms-ease );
}

.rlms-wrap button:not(.rlms-plain):hover,
.rlms-wrap input[type="submit"]:hover,
.rlms-filters button:hover,
.rlms-btn:hover {
	background-color: var( --rlms-brand-hover );
	border-color: var( --rlms-brand-hover );
	/* رفعة 1px — توقيع الأزرار في هذا النظام (DESIGN.md §Components). */
	transform: translateY( -1px );
	box-shadow: var( --rlms-shadow-md );
}

.rlms-wrap button:not(.rlms-plain):active,
.rlms-filters button:active,
.rlms-btn:active {
	transform: translateY( 0 );
	box-shadow: var( --rlms-shadow-xs );
	background-color: var( --rlms-brand-active );
}

.rlms-wrap button:disabled,
.rlms-wrap input[type="submit"]:disabled,
.rlms-btn:disabled {
	background-color: var( --rlms-border );
	border-color: var( --rlms-border );
	color: var( --rlms-text-faint );
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}

/* زرّ ثانوي: حدّ شعري بلا تعبئة. */
.rlms-btn--ghost {
	color: var( --rlms-text );
	background-color: transparent;
	border-color: var( --rlms-border-strong );
	box-shadow: none;
}

.rlms-btn--ghost:hover {
	color: var( --rlms-text );
	background-color: var( --rlms-surface );
	border-color: var( --rlms-text-faint );
}

/* ------------------------------------------------------- 5. تسميات الحقول */

.rlms-field label,
.rlms-wrap form label {
	display: block;
	margin-bottom: var( --rlms-space-2 );
	font-size: var( --rlms-text-sm );
	font-weight: var( --rlms-weight-medium );
	color: var( --rlms-text-secondary );
}

/* ------------------------------------------------------ 6. تقليل الحركة */

@media ( prefers-reduced-motion: reduce ) {

	.rlms-wrap button:not(.rlms-plain):hover,
	.rlms-filters button:hover,
	.rlms-btn:hover {
		transform: none;
	}
}