/* =========================================================
 * نظام الإشعارات — واجهة الزائر.
 * كل المحدِّدات تحت بادئة dlhn- فلا تمسّ شيئًا في القالب.
 *
 * ١) لوحة التحكّم        — الأرقام والألوان التي تُعدَّل عادةً
 * ٢) ألوان الأنواع       — الغامق ثم الفاتح
 * ٣) البطاقة والأسطر
 * ٤) الأزرار
 * ٥) الشاشات الضيّقة
 *
 * ————— ملاحظةٌ على صيغة الألوان —————
 * ألوان الأنواع تُكتب ثلاثيّاتٍ «ر خ ز» بلا # ولا rgb():
 *     --dlhn-acc: 93 172 108;
 * لأنّ اللون الواحد يقود النصّ والشريطين والمسحة الخلفية بشفافيّاتٍ
 * مختلفة. فلو كان hex لاحتجنا لونًا منفصلًا لكل استعمال.
 * ========================================================= */

/* =========================================================
 * ١) لوحة التحكّم
 * ========================================================= */

.dlhn-card{
	--dlhn-w:340px;         /* عرض البطاقة */
	--dlhn-gap:12px;         /* المسافة بين السطرين */
	--dlhn-pad:15px;        /* الحشو أعلى وأسفل */
	--dlhn-pad-x:15px;      /* الحشو يمينًا ويسارًا */

	--dlhn-bar:3px;         /* سُمك الشريط الملوّن على الجانبين */
	--dlhn-edge:0.8px;      /* سُمك الإطار الرفيع أعلى وأسفل */
	--dlhn-edge-a:.45;      /* شفافية الإطار الرفيع */

	--dlhn-tint:.16;        /* قوّة مسحة اللون القادمة من الجانبين */
	--dlhn-tint-end:55%;    /* إلى أين تمتدّ المسحة قبل أن تتلاشى */

	/* ألوان القاعدة — الغامق */
	--dlhn-bg:#1c222c;
	--dlhn-tx:#e8edf4;
	--dlhn-dim:#d8dbe8;
	--dlhn-chip:rgba(255,255,255,.08);
	--dlhn-min-c:#e0808a;   /* لون الدقيقة — أحمر القالب في الغامق */
}

.dlh-light .dlhn-card{
	--dlhn-bg:#ffffff;
	--dlhn-tx:#101828;
	--dlhn-dim:#667085;
	--dlhn-chip:rgba(16,24,40,.06);
	--dlhn-min-c:#EA2027;   /* أحمر القالب في الفاتح (light-mode.css) */
}

/* =========================================================
 * ٢) ألوان الأنواع
 *
 * اللون الواحد يقود: نصّ الحدث · الشريطين · الإطار الرفيع ·
 * مسحة الخلفية. فتغييره في سطرٍ واحد يُغيّرها جميعًا.
 * ========================================================= */

/* ————— الغامق ————— */
.dlhn-k-goal {  --dlhn-acc: 93 172 108; }   /* هدف · ركلة جزاء · عكسي */
.dlhn-k-start{  --dlhn-acc: 91 157 224; }   /* بداية المباراة */
.dlhn-k-h2   {  --dlhn-acc: 91 157 224; }   /* بداية الشوط الثاني */
.dlhn-k-pen  {  --dlhn-acc:224 138  60; }   /* ركلات الترجيح */
.dlhn-k-et   {  --dlhn-acc:224 138  60; }   /* أشواط إضافية — كلون الترجيح */
.dlhn-k-end  {  --dlhn-acc:154 160 180; }   /* نهاية المباراة */

/* ————— الفاتح ————— */
.dlh-light .dlhn-k-goal {  --dlhn-acc: 31 138  77; }
.dlh-light .dlhn-k-start{  --dlhn-acc: 42 111 176; }
.dlh-light .dlhn-k-h2   {  --dlhn-acc: 42 111 176; }
.dlh-light .dlhn-k-end  {  --dlhn-acc: 92  99 118; }

/* =========================================================
 * ٣) البطاقة والأسطر
 * ========================================================= */

/* كل ما في البطاقة بـ border-box: الحشو يُحسب من العرض لا فوقه. */
.dlhn-card, .dlhn-card *{ box-sizing:border-box; }

.dlhn-wrap{
	position:fixed;
	inset-block-start:0;
	inset-inline:0;
	z-index:2147483646;          /* تحت القائمة السفلية بدرجة، وفوق ما عداها */
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	padding:10px 12px 0;
	pointer-events:none;         /* الحاوية شفّافة للنقر، والبطاقات وحدها تستقبله */
}

.dlhn-card{
	position:relative;
	width:min(var(--dlhn-w), 100vw - 24px);
	min-height:60px;
	padding:var(--dlhn-pad) var(--dlhn-pad-x);

	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	gap:var(--dlhn-gap);

	/* ————— الحدود —————
	   إطارٌ رفيع يلفّ البطاقة، وشريطان أسمك على الجانبين. الترتيب
	   مقصود: border-color يعمّ، ثم border-inline-color يخصّ الجانبين. */
	border-style:solid;
	border-color:rgb(var(--dlhn-acc) / var(--dlhn-edge-a));
	border-inline-color:rgb(var(--dlhn-acc));
	border-block-width:var(--dlhn-edge);
	border-inline-width:var(--dlhn-bar);
	border-radius:12px;

	/* ————— الخلفية —————
	   مسحتان تدخلان من الجانبين وتتلاشيان قبل المنتصف، فوق لون
	   القاعدة. بلا ظلّ: الفصل عن الصفحة من اللون والحدود لا من الظلّ. */
	background:
		linear-gradient(to left,  rgb(var(--dlhn-acc) / var(--dlhn-tint)), transparent var(--dlhn-tint-end)),
		linear-gradient(to right, rgb(var(--dlhn-acc) / var(--dlhn-tint)), transparent var(--dlhn-tint-end)),
		var(--dlhn-bg);

	color:var(--dlhn-tx);
	pointer-events:auto;
	overflow:hidden;

	opacity:0;
	transform:translateY(-14px);
	transition:opacity .25s ease, transform .25s ease;
}

.dlhn-card.is-in{ opacity:1; transform:translateY(0); }
.dlhn-card.is-out{ opacity:0; transform:translateY(-10px); }

/* ————— السطر الأوّل: الحدث · الفريق · الدقيقة ————— */

.dlhn-l1{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	max-width:100%;
	padding-inline:40px;          /* حشوٌ متساوٍ: يُبعد النصّ عن زرّ الإغلاق ويُبقي التوسيط */
	font-size:13px;
	line-height:18px;
	color:var(--dlhn-dim);
}
.dlhn-l1 span{
	color:rgb(var(--dlhn-acc));
	font-weight:500;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* الحدث والفاصل والدقيقة لا تُقصّ — واسم الفريق وحده يُقصّ من آخره،
   فيبقى مركز السطر مركزَ البطاقة مهما طال الاسم */
.dlhn-l1 > span{ flex:0 0 auto; }
.dlhn-l1 .dlhn-gt{
	flex:0 1 auto;
	min-width:0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* اسم الفريق في السطر الأوّل — بلون الفريقين في السطر الثاني */
.dlhn-l1 .dlhn-gt span{ color:var(--dlhn-tx); }

/* الفاصل · — بلون النصّ الباهت. اجعله rgb(var(--dlhn-acc)) ليصير بلون الحدث */
.dlhn-l1 .dlhn-dot{ color:var(--dlhn-dim); font-weight:700; }

/* الدقيقة — تكسر لون الحدث بأحمر القالب */
.dlhn-l1 .dlhn-min{
	flex:0 0 auto;
	color:var(--dlhn-min-c);
	font-weight:700;
	direction:ltr;
	unicode-bidi:isolate;
}

/* ————— السطر الثاني: فريق · نتيجة · فريق —————
 *
 * شبكةٌ لا صفٌّ مرن: الصفّ المرن يوزّع المساحة على المحتوى، فاسمٌ
 * طويل يزيح النتيجة عن المنتصف. والشبكة تحجز للنتيجة عمودها الأوسط
 * وتمنح الفريقين عمودين متساويين — فمركز النتيجة هو مركز البطاقة
 * دائمًا، ويُقصّ الاسم الطويل من آخره بدل أن يدفع جاره.
 */

.dlhn-l2{
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	gap:8px;
	width:100%;
	font-size:14px;
	line-height:19px;
	font-weight:700;
}

/* بطاقةٌ قديمة في الملفّ بلا نتيجةٍ مفصولة: سطرٌ واحد موسَّط */
.dlhn-l2:not(:has(.dlhn-sc)){ display:block; text-align:center; }

.dlhn-tm{
	min-width:0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
/* كلّ فريقٍ يلتصق بالنتيجة بدل أن يسبح في عموده */
.dlhn-l2 .dlhn-tm:first-child{ text-align:end; }
.dlhn-l2 .dlhn-tm:last-child{  text-align:start; }

.dlhn-sc{
	padding:2px 8px;
	border-radius:6px;
	background:var(--dlhn-chip);
	font-weight:800;

	/* بلا direction عمدًا: الرقم يتبع اتجاه الصفحة، فيقع رقم الفريق
	   الأوّل بجواره في العربية والإنجليزية معًا. */
	unicode-bidi:isolate;
}

/* =========================================================
 * ٤) الأزرار
 * ========================================================= */

.dlhn-tools{
	position:absolute;
	inset-block-start:5px;
	inset-inline-end:7px;
	display:flex;
	gap:2px;
	z-index:3;
}

.dlhn-tools button{
	all:unset;
	box-sizing:border-box;
	width:22px;
	height:22px;
	line-height:22px;
	text-align:center;
	font-size:12px;
	color:var(--dlhn-dim);
	border-radius:5px;
	cursor:pointer;
}
.dlhn-tools button:hover{ background:rgba(255,255,255,.10); color:var(--dlhn-tx); }
.dlh-light .dlhn-tools button:hover{ background:rgba(16,24,40,.07); }
.dlhn-tools button:focus-visible{ outline:2px solid rgb(var(--dlhn-acc)); outline-offset:1px; }

/* الرابط يغطّي البطاقة تحت الأزرار */
.dlhn-go{
	position:absolute;
	inset:0;
	z-index:2;
	text-indent:-9999px;
	overflow:hidden;
}

/* =========================================================
 * ٥) الشاشات الضيّقة
 * ========================================================= */

@media (max-width:360px){
	.dlhn-card{ --dlhn-gap:10px; --dlhn-pad:13px; --dlhn-pad-x:12px; }
	.dlhn-l1{ font-size:12px; padding-inline:34px; }
	.dlhn-l2{ font-size:13px; gap:6px; }
	.dlhn-sc{ padding:2px 7px; }
}

/* ————— تقليل الحركة ————— */

@media (prefers-reduced-motion:reduce){
	.dlhn-card{ transition:none; transform:none; }
	.dlhn-card.is-in{ transform:none; }
	.dlhn-card.is-out{ transform:none; }
}