/* =========================================================
   تسجيل الموردين — assets/css/supplier.css

   الصفحة تستعير نظام نموذج «واصل» (services.css تحت page-wasel-a) ولا تكرّره؛
   هنا ما يخصّها وحدها: حقول المرفقات وقائمة «جهّز قبل البدء».
   ========================================================= */

/* ---------- مجموعة المستندات ---------- */
body.page-supplier-a .sup-docs-note {
	margin: 0 0 16px;
	font-size: .8125rem;
	color: var(--svc-ink-2, #56606f);
}
body.page-supplier-a .sup-docs { display: grid; gap: 14px; }

/* صف المستند: النص على جهة القراءة وزر الاختيار مقابله في السطر نفسه،
   حتى يبقى الصندوق مضغوطًا وتُقرأ المستندات الأربعة دفعة واحدة. */
body.page-supplier-a .sup-doc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"label  action"
		"hint   action"
		"error  error";
	align-items: center;
	column-gap: 20px;
	row-gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--svc-line, #e2e6ea);
	border-radius: 12px;
	background: #fbfcfd;
	transition: border-color var(--ease), background var(--ease);
}
body.page-supplier-a .sup-doc:hover { border-color: rgba(0, 165, 181, .4); }
body.page-supplier-a .sup-doc.has-error { border-color: #cc4132; background: rgba(204, 65, 50, .04); }

body.page-supplier-a .sup-doc-label { grid-area: label; align-self: end; font-size: .9375rem; font-weight: 600; color: var(--svc-navy, #002d62); }
body.page-supplier-a .sup-doc-label b { color: var(--svc-teal-d, #008b99); margin-inline-start: 3px; }
/* السطر الشارح: أكثر ما يُفشل نماذج المستندات أن المُرسِل لا يعرف المطلوب بالضبط */
body.page-supplier-a .sup-doc-hint { grid-area: hint; align-self: start; font-size: .8125rem; line-height: 1.7; color: var(--svc-ink-2, #56606f); }
body.page-supplier-a .sup-doc > .wf-error { grid-area: error; margin-block-start: 6px; }

/* حقل الملف: الإدخال الأصلي شفاف فوق الزر — يبقى قابلًا للتشغيل بلوحة المفاتيح
   وبقارئ الشاشة، بلا سكربت يعترض النقر. */
body.page-supplier-a .sup-doc-input {
	grid-area: action;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	width: 190px;
}
body.page-supplier-a .sup-doc-input input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}
body.page-supplier-a .sup-doc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 10px 16px;
	border-radius: 8px;
	border: 1px solid var(--svc-line, #e2e6ea);
	background: #fff;
	font-size: .875rem;
	font-weight: 600;
	color: var(--svc-navy, #002d62);
	transition: border-color var(--ease), background var(--ease), color var(--ease);
}
body.page-supplier-a .sup-doc-btn svg { width: 17px; height: 17px; }
body.page-supplier-a .sup-doc-input input[type="file"]:hover + .sup-doc-btn { border-color: var(--svc-teal-d, #008b99); color: var(--svc-teal-d, #008b99); }
/* التركيز يظهر على الزر البديل لأن الإدخال نفسه شفاف */
body.page-supplier-a .sup-doc-input input[type="file"]:focus-visible + .sup-doc-btn {
	outline: 2px solid var(--svc-teal, #00a5b5);
	outline-offset: 2px;
}
body.page-supplier-a .sup-doc-name {
	width: 100%;
	font-size: .75rem;
	line-height: 1.6;
	text-align: center;
	color: var(--svc-ink-2, #56606f);
	overflow-wrap: anywhere;
}
body.page-supplier-a .sup-doc.is-filled .sup-doc-name { color: #14653f; font-weight: 600; }
body.page-supplier-a .sup-doc.is-filled { border-color: rgba(31, 157, 99, .45); background: rgba(31, 157, 99, .05); }

/* ---------- قائمة «جهّز قبل البدء» ---------- */
body.page-supplier-a .sup-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
body.page-supplier-a .sup-check li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	font-size: .875rem;
	line-height: 1.7;
}
body.page-supplier-a .sup-check svg { width: 16px; height: 16px; margin-block-start: 4px; color: var(--svc-teal-d, #008b99); }
body.page-supplier-a .sup-check-note {
	margin: 14px 0 0;
	padding-block-start: 12px;
	border-block-start: 1px solid var(--svc-line, #e2e6ea);
	font-size: .8125rem;
	color: var(--svc-ink-2, #56606f);
}

@media (max-width: 640px) {
	body.page-supplier-a .sup-doc {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "label" "hint" "action" "error";
		row-gap: 6px;
	}
	body.page-supplier-a .sup-doc-input { width: 100%; margin-block-start: 6px; }
}