/* ============================================================
   طبقة الفندق — تُحمَّل بعد design-system.css و lms.css و app.css
   لا تُعيد تعريف أي مكوّن قائم؛ تضيف فوقه ما تحتاجه شاشات الفندق:
   خريطة الغرف · بطاقات الغرف · لوح التدبير · تقويم الأسعار · الفوليو
   ============================================================ */

:root{
  /* ألوان حالات الغرف — مشتقّة من سُلّم النظام لا من لوحة جديدة */
  --fo-vacant:#94A3B8;    --fo-vacant-bg:#F8FAFC;
  --fo-occupied:#0284C7;  --fo-occupied-bg:#F0F9FF;
  --fo-arrival:#A855F7;   --fo-arrival-bg:#FAF5FF;
  --fo-departure:#F59E0B; --fo-departure-bg:#FFFBEB;
  --fo-ooo:#DC2626;       --fo-ooo-bg:#FEF2F2;
}

/* ============ شارة الإشغال في الهيدر ============ */
.occ-chip{
  align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--sky-50);border:1px solid var(--sky-200);color:var(--sky-700);
  font-size:12px;font-weight:700;white-space:nowrap;transition:var(--t-fast);
}
.occ-chip:hover{background:var(--sky-100);border-color:var(--sky-300);}
.occ-chip b{font-weight:900;font-size:13px;}
.occ-sep{width:1px;height:12px;background:var(--sky-300);display:inline-block;}

/* ============ نقطة حالة ============ */
.st-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.st-vacant{background:var(--fo-vacant);}
.st-occupied{background:var(--fo-occupied);}
.st-arrival{background:var(--fo-arrival);}
.st-departure{background:var(--fo-departure);}
.st-ooo{background:var(--fo-ooo);}

/* ============ بطاقة غرفة — شبكة الغرف ============ */
.rm{
  position:relative;border:1.5px solid var(--slate-200);border-radius:var(--r-lg);
  padding:10px 10px 9px;background:#fff;text-align:right;display:block;
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
  cursor:pointer;overflow:hidden;
}
.rm:hover{transform:translateY(-2px);box-shadow:var(--sh-card-hover);border-color:var(--slate-300);}
.rm:focus-visible{outline:2px solid var(--sky-500);outline-offset:2px;}
.rm::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--slate-300);}
.rm-no{font-size:15px;font-weight:900;color:var(--slate-900);line-height:1;font-variant-numeric:tabular-nums;}
.rm-type{font-size:10px;font-weight:700;color:var(--slate-400);margin-top:3px;}
.rm-guest{font-size:10.5px;color:var(--slate-500);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rm-foot{display:flex;align-items:center;gap:5px;margin-top:7px;padding-top:6px;border-top:1px solid var(--slate-100);}
.rm-hk{font-size:9.5px;font-weight:800;}

.rm.fo-vacant::before{background:var(--fo-vacant);}
.rm.fo-occupied{background:var(--fo-occupied-bg);}     .rm.fo-occupied::before{background:var(--fo-occupied);}
.rm.fo-arrival{background:var(--fo-arrival-bg);}       .rm.fo-arrival::before{background:var(--fo-arrival);}
.rm.fo-departure{background:var(--fo-departure-bg);}   .rm.fo-departure::before{background:var(--fo-departure);}
.rm.fo-ooo{background:var(--fo-ooo-bg);opacity:.9;}    .rm.fo-ooo::before{background:var(--fo-ooo);}
.rm.fo-ooo .rm-no{color:var(--danger-strong);}

/* شارة صغيرة في زاوية البطاقة */
.rm-flag{
  position:absolute;inset-block-start:8px;inset-inline-end:8px;
  width:18px;height:18px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:9px;
}

/* ============ خريطة الغرف — Tape Chart ============ */
.tape-wrap{overflow:auto;border:1px solid var(--slate-200);border-radius:var(--r-xl);background:#fff;max-height:70vh;}
table.tape{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:12px;}
table.tape th,table.tape td{border-inline-end:1px solid var(--slate-100);border-block-end:1px solid var(--slate-100);}
table.tape thead th{
  position:sticky;top:0;z-index:3;background:var(--slate-50);
  padding:7px 6px;font-weight:800;color:var(--slate-500);font-size:10.5px;text-align:center;
  min-width:62px;white-space:nowrap;
}
table.tape thead th.tape-wknd{background:var(--sky-50);color:var(--sky-700);}
table.tape thead th.tape-evt{background:var(--warning-bg);color:var(--warning-ink);}
table.tape .tape-room{
  position:sticky;inset-inline-start:0;z-index:2;background:#fff;
  min-width:118px;padding:5px 10px;text-align:start;box-shadow:1px 0 0 var(--slate-200);
}
table.tape thead .tape-room{z-index:4;background:var(--slate-50);}
table.tape .tape-floor td{background:var(--slate-100);font-weight:900;color:var(--slate-600);padding:5px 10px;font-size:11px;}
table.tape .tape-floor td.tape-room{background:var(--slate-100);}
table.tape tbody td{height:34px;padding:0;position:relative;}
table.tape tbody tr:hover .tape-room{background:var(--sky-50);}

.tape-cell{position:absolute;inset:3px 1px;border-radius:5px;background:var(--slate-50);}
.tape-cell.wknd{background:#F0F9FF;}
/* الشريط يمتدّ على عدّة خلايا، وكل خليّة تُخرج قطعةً منه.
   فالقاعدة الأساس مسطّحة الحواف وتتجاوز حدّ الخليّة بمقدار بكسل حتى تلتحم
   القطع بلا فجوة — والتدوير يُضاف عند الطرف الفعلي للإقامة وحده.
   الخصائص المنطقية (inline-start/end) تتكفّل بانعكاس RTL تلقائياً. */
.tape-bar{
  position:absolute;inset-block:4px;inset-inline:-1px;border-radius:0;
  display:flex;align-items:center;gap:4px;padding:0 7px;overflow:hidden;
  font-size:10.5px;font-weight:800;color:#fff;white-space:nowrap;cursor:pointer;
  transition:filter var(--t-fast);
}
.tape-bar:hover{filter:brightness(1.08);}
.tape-bar.b-occupied{background:linear-gradient(135deg,#38BDF8,#0284C7);}
.tape-bar.b-arrival{background:linear-gradient(135deg,#C084FC,#9333EA);}
.tape-bar.b-departure{background:linear-gradient(135deg,#FBBF24,#D97706);}
.tape-bar.b-ooo{background:repeating-linear-gradient(45deg,#FCA5A5 0 6px,#EF4444 6px 12px);}
/* بداية الإقامة: تُدوَّر جهة البداية (اليمين في RTL) وتبقى النهاية مسطّحة لتكمل */
.tape-bar.seg-first{inset-inline-start:2px;border-start-start-radius:6px;border-end-start-radius:6px;}
/* نهاية الإقامة: تُدوَّر جهة النهاية (اليسار في RTL) وتبقى البداية مسطّحة لتلتحم بما قبلها */
.tape-bar.seg-last{inset-inline-end:2px;border-start-end-radius:6px;border-end-end-radius:6px;}

/* مفتاح الخريطة */
.tape-key{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:11.5px;font-weight:700;color:var(--slate-600);}
.tape-key i{width:14px;height:10px;border-radius:3px;display:inline-block;margin-inline-end:6px;vertical-align:-1px;}

/* ============ لوح التدبير الفندقي ============ */
.hk-col{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--r-xl);display:flex;flex-direction:column;min-height:220px;}
.hk-col-head{padding:11px 13px;border-bottom:1px solid var(--slate-200);display:flex;align-items:center;gap:9px;}
.hk-col-body{padding:9px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:56vh;}
.hk-card{
  background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:10px 11px;
  transition:box-shadow var(--t-fast),transform var(--t-fast),border-color var(--t-fast);cursor:grab;
}
.hk-card:hover{box-shadow:var(--sh-card-hover);transform:translateY(-1px);border-color:var(--sky-300);}
.hk-card.urgent{border-inline-start:3px solid var(--danger);}
.hk-card.late{background:var(--danger-bg);border-color:#FCA5A5;}

/* ============ تقويم الأسعار والإتاحة ============ */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;}
.cal-day{
  border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:9px 9px 10px;background:#fff;
  transition:box-shadow var(--t-fast),border-color var(--t-fast),transform var(--t-fast);cursor:pointer;position:relative;
}
.cal-day:hover{box-shadow:var(--sh-card-hover);border-color:var(--sky-300);transform:translateY(-2px);}
.cal-day.wknd{background:var(--sky-50);border-color:var(--sky-200);}
.cal-day.stop{background:var(--danger-bg);border-color:#FCA5A5;}
.cal-day.evt{border-color:var(--warning);box-shadow:0 0 0 1px var(--warning) inset;}
.cal-dn{font-size:16px;font-weight:900;color:var(--slate-900);line-height:1;font-variant-numeric:tabular-nums;}
.cal-dow{font-size:10px;font-weight:700;color:var(--slate-400);}
.cal-rate{font-size:13px;font-weight:900;color:var(--slate-800);font-variant-numeric:tabular-nums;}
.cal-occ{height:4px;border-radius:99px;background:var(--slate-200);overflow:hidden;margin-top:6px;}
.cal-occ i{display:block;height:100%;border-radius:99px;background:var(--success-strong);transition:width .7s var(--ease-out);}
.cal-occ.warn i{background:var(--warning);}
.cal-occ.hot i{background:var(--danger);}
.cal-tag{
  position:absolute;inset-block-start:-7px;inset-inline-start:8px;
  font-size:9px;font-weight:800;padding:2px 7px;border-radius:var(--r-pill);
  background:var(--warning);color:#fff;white-space:nowrap;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;
}

/* ============ صفّ القناة ============ */
.chan-row{
  display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--slate-200);
  border-radius:var(--r-xl);background:#fff;transition:box-shadow var(--t-fast),border-color var(--t-fast);
}
.chan-row:hover{box-shadow:var(--sh-card-hover);}
.chan-row.down{border-color:#FCA5A5;background:var(--danger-bg);}
.chan-row.off{opacity:.68;}

/* ============ الفوليو ============ */
.folio{width:100%;border-collapse:collapse;font-size:12.5px;}
.folio thead th{
  text-align:start;padding:9px 12px;font-size:10.5px;font-weight:800;color:var(--slate-500);
  background:var(--slate-50);border-bottom:1px solid var(--slate-200);white-space:nowrap;
}
.folio tbody td{padding:10px 12px;border-bottom:1px solid var(--slate-100);vertical-align:middle;}
.folio tbody tr:hover{background:var(--slate-50);}
.folio .num{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;}
.folio tfoot td{padding:9px 12px;font-weight:800;border-top:1px solid var(--slate-200);}
.folio tfoot tr.grand td{background:var(--slate-900);color:#fff;font-size:14px;font-weight:900;}
.folio tfoot tr.grand td:first-child{border-start-start-radius:var(--r-md);border-end-start-radius:var(--r-md);}
.folio tfoot tr.grand td:last-child{border-start-end-radius:var(--r-md);border-end-end-radius:var(--r-md);}
.fcode{
  display:inline-block;min-width:40px;text-align:center;font-size:9.5px;font-weight:900;
  padding:3px 6px;border-radius:var(--r-xs);font-family:ui-monospace,monospace;letter-spacing:.3px;
}

/* ============ مقياس أفقي مصغّر ============ */
.mini-meter{height:6px;border-radius:99px;background:var(--slate-200);overflow:hidden;}
.mini-meter i{display:block;height:100%;border-radius:99px;transition:width .8s var(--ease-out);}

/* ============ شريط تقدّم بأجزاء (مزيج الغرف) ============ */
.stack-bar{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--slate-100);}
.stack-bar span{display:block;height:100%;transition:width .8s var(--ease-out);}

/* ============ بطاقة إحصاء صغيرة ============ */
.mini-stat{border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:11px 13px;background:#fff;}
.mini-stat .v{font-size:20px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;}
.mini-stat .l{font-size:10.5px;font-weight:700;color:var(--slate-500);margin-top:4px;}

/* ============ صفّ زمني للوصول والمغادرة ============ */
.arr-row{
  display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid var(--slate-200);
  border-radius:var(--r-xl);background:#fff;transition:box-shadow var(--t-fast),border-color var(--t-fast);
}
.arr-row:hover{box-shadow:var(--sh-card-hover);border-color:var(--sky-300);}
.arr-row.vip{border-color:var(--purple);background:linear-gradient(180deg,#FAF5FF,#fff);}
.arr-row.blocked{border-color:#FCA5A5;background:var(--danger-bg);}

/* ============ طباعة ============ */
@media print{
  .sidebar,.app-header,.side-scrim,.fab,.state-switch,.no-print{display:none !important;}
  body.app-shell{height:auto;overflow:visible;}
  body.app-shell .main-area{margin:0 !important;padding:0 !important;height:auto;overflow:visible;}
  .card{box-shadow:none !important;border:1px solid #CBD5E1 !important;break-inside:avoid;}
}

/* ============ تقليل الحركة ============ */
@media (prefers-reduced-motion:reduce){
  .rm,.hk-card,.cal-day,.tape-bar,.arr-row,.chan-row{transition:none !important;}
  .cal-occ i,.mini-meter i,.stack-bar span{transition:none !important;}
}

/* ============================================================
   طبقة مطابقة معيار الوصول — WCAG 2.1 AA
   ------------------------------------------------------------
   سُلّم ألوان النظام الأصلي يستخدم الدرجة 400/500/600 لنصوص صغيرة،
   وقياس التباين أظهر أنها دون 4.5:1 على الخلفيات الفاتحة المستعملة
   (‏slate-100 · sky-50 · amber-50 · red-100 …). هنا تُعمَّق درجاتُ
   النص وحدَها — بالصبغة نفسها — حتى يجتاز كل نص العتبة على أغمق
   خلفية يظهر عليها فعلياً. الخلفيات والحدود والأيقونات لم تُمَس.

   لإعادة المظهر الأصلي حرفياً: احذف هذه الطبقة كاملة.
   ============================================================ */

/* --- متغيّرات النص المكتومة (تستخدمها مكوّنات نظام التصميم) --- */
:root{
  --slate-400:#59657A;   /* كان #94A3B8 — 2.34:1 على slate-100 */
  --slate-500:#4A5568;   /* كان #64748B — 4.34:1 على slate-100 */
}

/* --- تدرّج العلامة: النص الأبيض فوقه كان 2.77:1 --- */
:root{
  --grad-brand:linear-gradient(135deg,#0369A1 0%,#075985 100%);
  --grad-brand-deep:linear-gradient(135deg,#0284C7 0%,#0369A1 55%,#075985 100%);
  --grad-success:linear-gradient(135deg,#036B4E,#025C43);
}

/* --- أدوات Tailwind للنص (قيم حرفية لا متغيّرات) --- */
.text-slate-400{color:#59657A;}
.text-slate-500{color:#4A5568;}
.text-sky-500,.text-sky-600{color:#0369A1;}
.text-emerald-500,.text-emerald-600{color:#036B4E;}
.text-amber-500,.text-amber-600{color:#9A4A08;}
.text-red-500,.text-red-600{color:#B91C1C;}
.text-purple-500,.text-purple-600{color:#7E22CE;}
.text-rose-500,.text-rose-600{color:#BE123C;}
.text-teal-500,.text-teal-600{color:#0B5F59;}
.text-orange-500,.text-orange-600{color:#9A3412;}
.text-indigo-500,.text-indigo-600{color:#4338CA;}

/* الدرجة 700 تبقى كما هي — كانت مجتازة أصلاً */

/* --- أشرطة خريطة الغرف: نص أبيض فوق تدرّج --- */
.tape-bar.b-occupied{background:linear-gradient(135deg,#0369A1,#075985);}
.tape-bar.b-arrival{background:linear-gradient(135deg,#7E22CE,#581C87);}
.tape-bar.b-departure{background:linear-gradient(135deg,#92400E,#7C2D12);}
.tape-bar.b-ooo{background:repeating-linear-gradient(45deg,#B91C1C 0 6px,#7F1D1D 6px 12px);}

/* --- وسم الفعالية في التقويم --- */
.cal-tag{background:#92400E;}

/* --- رقم الغرفة المعطّلة --- */
.rm.fo-ooo .rm-no{color:#B91C1C;}

/* --- عدّاد وحدات القائمة الجانبية — كان 2.34:1 --- */
.nav-mod .cnt{color:#4A5568;background:var(--slate-200);}

/* ============================================================
   رابط تجاوز إلى المحتوى
   ملاحظة: الصنف .acc-native في نظام التصميم مكوّنُ أكورديون،
   فلا يصلح لهذا الغرض. هذا صنف مستقل.
   ============================================================ */
.skip-link{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:100;
  background:#0F172A;color:#fff;padding:12px 22px;
  border-end-end-radius:var(--r-lg);border-end-start-radius:var(--r-lg);
  font-size:13px;font-weight:800;text-decoration:none;
}
.skip-link:focus{inset-inline-start:0;outline:3px solid #38BDF8;outline-offset:2px;}

/* --- حلقة تركيز مرئية موحّدة على كل عنصر تفاعلي --- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #0369A1;outline-offset:2px;border-radius:4px;
}

/* --- على الخلفيات الداكنة يُفتح المكتوم لا يُغمق --- */
.bg-slate-900 .text-slate-400,.bg-slate-900 .text-slate-500,
footer.bg-slate-900 p,footer.bg-slate-900 a{color:#CBD5E1;}
.bg-slate-900 .text-slate-300{color:#E2E8F0;}

/* --- عدّاد الوحدة النشطة: كان sky-600 على أبيض = 4.10:1 --- */
.nav-mod.has-active .cnt{background:#fff;color:#0369A1;}

/* --- التبويب النشط: نص أبيض على sky-500 كان 2.77:1 --- */
.tab-btn.active{background:#0369A1;box-shadow:0 2px 10px rgba(3,105,161,.30);}

/* --- خريطة الغرف: عمود اليوم والأيام الماضية ونصف خليّة المغادرة --- */
table.tape thead th.tape-past{background:var(--slate-100);color:#59657A;}
table.tape thead th.tape-today{background:#E0F2FE;box-shadow:inset 0 -2px 0 #0369A1;}
table.tape .tape-cell.past{background:#F1F5F9;}
table.tape td.tape-todaycol{box-shadow:inset 1px 0 0 #0369A1,inset -1px 0 0 #0369A1;}
/* يوم المغادرة: النزيل فيه حتى الإخلاء ظهراً، فيشغل نصف الخليّة من جهة بداية
   اليوم. وهو آخر قطعة في الشريط — فالتدوير في طرفه المنتهي (اليسار في RTL)،
   وطرفه المتّصل بما قبله يبقى مسطّحاً. يأتي بعد seg-last ليتجاوز موضعه. */
.tape-bar.checkout{inset-inline-start:-1px;inset-inline-end:50%;
                   border-start-start-radius:0;border-end-start-radius:0;
                   border-start-end-radius:6px;border-end-end-radius:6px;}

/* ============================================================
   خريطة الطوابق — صفّان حول ممر ومرافق ثابتة
   ============================================================ */
.plan{border:1px solid var(--slate-200);border-radius:var(--r-xl);background:#fff;padding:14px;overflow-x:auto;}
/* عرض بمقاس المحتوى حتى يتحاذى الممر مع صفّي الغرف بدل أن يمتدّ وحده */
.plan-rows{display:flex;flex-direction:column;gap:0;width:max-content;min-width:100%;}
.plan-row{justify-content:flex-start;}
.plan-row{display:flex;gap:6px;flex-wrap:wrap;}
.plan-rm{
  width:74px;min-height:58px;border:1.5px solid var(--slate-200);border-radius:var(--r-md);
  padding:6px 5px;text-align:center;background:#fff;cursor:pointer;position:relative;
  transition:transform var(--t-fast),box-shadow var(--t-fast);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.plan-rm:hover{transform:scale(1.06);box-shadow:var(--sh-card-hover);z-index:2;}
.plan-rm:focus-visible{outline:2px solid #0369A1;outline-offset:2px;z-index:2;}
.plan-rm b{font-size:13px;font-weight:900;color:var(--slate-900);line-height:1;font-variant-numeric:tabular-nums;}
.plan-rm span{font-size:9px;font-weight:700;color:#59657A;line-height:1;}
.plan-rm.fo-occupied{background:var(--fo-occupied-bg);border-color:#7DD3FC;}
.plan-rm.fo-arrival{background:var(--fo-arrival-bg);border-color:#D8B4FE;}
.plan-rm.fo-departure{background:var(--fo-departure-bg);border-color:#FCD34D;}
.plan-rm.fo-ooo{background:var(--fo-ooo-bg);border-color:#FCA5A5;}
.plan-rm.fo-ooo b{color:#B91C1C;}
.plan-rm i.dot{position:absolute;top:4px;inset-inline-end:4px;width:7px;height:7px;border-radius:50%;}

/* الممر بين الصفّين */
.plan-hall{
  display:flex;gap:6px;align-items:center;justify-content:center;
  margin:7px 0;padding:6px;border-radius:var(--r-md);
  background:repeating-linear-gradient(90deg,var(--slate-100) 0 14px,#fff 14px 28px);
  border:1px dashed var(--slate-300);min-height:38px;
}
.plan-fac{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--slate-300);font-size:10.5px;font-weight:800;color:#4A5568;
  white-space:nowrap;
}
.plan-fac.warn{border-color:#FCA5A5;background:var(--danger-bg);color:#B91C1C;}

/* ============ منشئ التقارير ============ */
.rb-col{
  display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--slate-200);
  border-radius:var(--r-md);background:#fff;cursor:pointer;transition:var(--t-fast);font-size:12.5px;font-weight:700;
}
.rb-col:hover{border-color:var(--sky-300);background:var(--sky-50);}
.rb-col.on{border-color:#0369A1;background:#E0F2FE;color:#075985;}
.rb-col i{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--slate-300);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;}
.rb-col.on i{background:#0369A1;border-color:#0369A1;}
.rb-col.on i::after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px);}

/* ============================================================
   شريط التبويبات
   ------------------------------------------------------------
   ‏.tab-track في نظام التصميم مجرّد حاوية موضع (position:relative)
   لخطّ .tab-ink، والتخطيط يأتي في النموذج من أدوات Tailwind تُكتب
   بجانبه: flex items-center gap-1 border-b overflow-x-auto.
   إغفال تلك الأدوات يجعل كل .tab-btn — وهو display:flex — كتلةً
   مستقلة فتتراص التبويبات رأسياً.

   نُثبّت التخطيط هنا في الصنف نفسه حتى لا يتكرّر الإغفال في شاشة
   جديدة. الأدوات المكتوبة في الوسم تبقى قادرة على التجاوز.
   ============================================================ */
.tab-track{
  display:flex;align-items:center;gap:4px;
  overflow-x:auto;overflow-y:hidden;
  border-bottom:1px solid var(--slate-200);
  scrollbar-width:thin;
}
.tab-track::-webkit-scrollbar{height:5px;}
.tab-track::-webkit-scrollbar-thumb{background:var(--slate-300);border-radius:6px;}
.tab-track > .tab-btn{flex:0 0 auto;}

/* خطوات المعالج صارت أزراراً للتنقّل الحرّ — تُجرَّد من مظهر الزرّ الافتراضي */
button.wz-step{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:start;}
button.wz-step:hover .wz-num{border-color:var(--sky-400);}
button.wz-step:hover .wz-lbl{color:var(--sky-700);}

/* ============ زرّ «ما هذه الشاشة؟» في الشريط العلوي ============ */
/* زرّ مملوء بلون العلامة — كان فاتحاً فلم يُلحَظ بين أيقونات الشريط */
.help-btn{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;
  border-radius:var(--r-pill);background:var(--grad-brand);border:0;
  color:#fff;font-size:12.5px;font-weight:800;white-space:nowrap;
  box-shadow:var(--sh-brand);transition:transform var(--t-fast),box-shadow var(--t-base),filter var(--t-fast);
}
.help-btn .ic{width:19px;height:19px;stroke-width:2.2;}
.help-btn:hover{transform:translateY(-1px);box-shadow:var(--sh-brand-lg);filter:brightness(1.06);}
.help-btn:active{transform:translateY(0) scale(.97);}
/* على الشاشات الضيّقة يبقى الزرّ دائرةً بالأيقونة وحدها */
@media (max-width:1023px){ .help-btn{padding:0;width:38px;justify-content:center;} }

/* مبدّل الحالات أُسقط — الحاويات الفارغة تُخفى كي لا تترك فجوة */
#stateBar{display:none !important;}

/* ============================================================
   حاوية الحالة لا تُلغي تخطيط المحتوى
   ------------------------------------------------------------
   ‏.state-box.on في نظام التصميم يفرض display:block، وأسبقيته
   (صنفان) تتغلّب على أدوات Tailwind ذات الصنف الواحد — فحاوية
   تحمل grid أو flex تفقد تخطيطها بمجرّد تفعيل حالتها.
   نُعيد لها تخطيطها هنا مع إبقاء حركة الظهور.
   ============================================================ */
.state-box.on.grid{display:grid;}
.state-box.on.flex{display:flex;}
.state-box.on.inline-flex{display:inline-flex;}

/* ============================================================
   إعادة التنظيم 2026-10 — القائمة الجديدة · يوم العمل · «شرح الشاشة»
   ============================================================ */
:root{ --sidebar-w:272px; }

/* أسماء الشاشات لا تُقطع بعلامة الحذف — تلتفّ إلى سطرين عند الحاجة */
.nav-leaf span.nl-t{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45;}
.nav-mod .mt{white-space:normal;line-height:1.4;}
.nav-mod.nav-direct{text-decoration:none;}
.nav-mod.nav-direct.has-active{background:var(--sky-700);color:#fff;}
.nav-empty a{display:inline;}

/* روابط ثابتة أسفل القائمة */
.side-fixed{flex-shrink:0;}
.side-fixed-link{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border-radius:10px;
  font-size:12.5px;font-weight:700;color:var(--slate-600);text-align:right;transition:var(--t-fast);}
.side-fixed-link:hover{background:var(--slate-50);color:var(--sky-700);}
.side-fixed-link.active{background:var(--sky-50);color:var(--sky-700);}
.side-fixed-link.danger:hover{color:#B91C1C;background:#FEF2F2;}
.side-fixed-link .ic{width:15px;height:15px;opacity:.8;}
body.app-shell.rail .side-fixed{display:none;}

/* يوم العمل في الهيدر */
.bizday-chip{align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-600);
  font-size:11.5px;font-weight:600;white-space:nowrap;}
.bizday-chip b{color:var(--slate-900);font-weight:800;}
.hdr-primary{white-space:nowrap;}
@media (max-width:767px){ .hdr-primary span{display:none;} .hdr-primary{padding:0 10px;height:38px;} }
.help-btn span{display:inline;}
@media (max-width:1023px){ .help-btn{padding:0 12px;width:auto;} }
@media (max-width:639px){ .help-btn span{display:none;} .help-btn{padding:0;width:38px;} }

/* ---------- لوحة «شرح الشاشة» ---------- */
.help-overlay{position:fixed;inset:0;background:rgba(15,23,42,.28);z-index:80;opacity:0;pointer-events:none;transition:opacity .2s;}
.help-overlay.show{opacity:1;pointer-events:auto;}
.help-panel{position:fixed;top:0;bottom:0;left:0;width:min(600px,100vw);background:#fff;z-index:81;
  display:flex;flex-direction:column;box-shadow:12px 0 40px rgba(15,23,42,.18);
  transform:translateX(-104%);transition:transform .28s var(--ease-out);outline:none;}
[dir="ltr"] .help-panel{left:auto;right:0;transform:translateX(104%);}
.help-panel.show{transform:none;}
body.help-open{overflow:hidden;}
body.help-open .main-area{overflow:hidden;}
.help-head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--slate-100);}
.help-x{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--slate-500);flex-shrink:0;}
.help-x:hover{background:var(--slate-100);}
.help-tools{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--slate-100);background:var(--slate-50);}
.help-search{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--slate-200);border-radius:12px;padding:0 10px;}
.help-search:focus-within{border-color:var(--sky-400);}
.help-search input{flex:1;border:0;outline:0;background:transparent;padding:9px 0;font-size:13px;}
.help-count{font-size:11.5px;font-weight:700;color:var(--slate-500);white-space:nowrap;}
.help-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 18px 24px;}
.help-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--slate-100);}
@media (max-width:639px){ .help-panel{width:100vw;} }

/* ---------- المقال (اللوحة ومركز المساعدة) ---------- */
.help-article{font-size:13.5px;line-height:1.85;color:var(--slate-700);}
.help-summary{font-size:14.5px;font-weight:700;color:var(--slate-900);background:var(--sky-50);border:1px solid var(--sky-100);
  border-radius:14px;padding:12px 14px;margin-bottom:12px;}
.help-toc{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.help-toc a{font-size:11.5px;font-weight:700;color:var(--slate-600);background:var(--slate-50);border:1px solid var(--slate-200);
  border-radius:999px;padding:3px 10px;white-space:nowrap;}
.help-toc a:hover{color:var(--sky-700);border-color:var(--sky-300);}
.help-sec{border:1px solid var(--slate-200);border-radius:14px;margin-bottom:8px;background:#fff;scroll-margin-top:12px;}
.help-sec > summary{display:flex;align-items:center;gap:9px;padding:11px 14px;cursor:pointer;font-weight:800;color:var(--slate-900);
  font-size:14px;list-style:none;border-radius:14px;}
.help-sec > summary::-webkit-details-marker{display:none;}
.help-sec > summary:hover{background:var(--slate-50);}
.help-sec > summary:focus-visible{outline:2px solid var(--sky-500);outline-offset:2px;}
.help-sec > summary > span{flex:1;}
.help-sec .help-chev{width:12px;height:12px;color:var(--slate-400);transition:transform .2s;}
.help-sec[open] .help-chev{transform:rotate(180deg);}
.help-sec-b{padding:2px 16px 14px;}
.help-sec-b > p{margin:6px 0;}
.help-ul{list-style:disc;padding-right:20px;margin:6px 0;}
.help-ol{list-style:decimal;padding-right:22px;margin:6px 0;}
.help-ul li,.help-ol li{margin:4px 0;}
.help-sub{font-weight:800;color:var(--slate-900);margin:12px 0 4px;font-size:13.5px;}
.help-alt{color:var(--sky-800);}
.help-na{color:var(--slate-500);font-style:normal;background:var(--slate-50);border-radius:10px;padding:8px 12px;}
.help-cards{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.help-card{border:1px solid var(--slate-200);border-radius:12px;padding:10px 12px;background:var(--slate-50);}
.help-card-t{font-weight:800;color:var(--slate-900);font-size:13.5px;}
.help-kv{margin:3px 0;}
.help-kv > span{display:inline-block;font-weight:800;color:var(--slate-500);font-size:12px;margin-left:6px;}
.help-kv > span::after{content:':';}
.help-dl > div{padding:8px 0;border-bottom:1px dashed var(--slate-200);}
.help-dl > div:last-child{border-bottom:0;}
.help-dl dt{font-weight:800;color:var(--slate-900);}
.help-dl dd{margin:2px 0 0;}
.help-calc{display:block;font-size:12px;color:var(--slate-500);margin-top:2px;}
.help-table-wrap{overflow-x:auto;margin:6px 0;border:1px solid var(--slate-200);border-radius:12px;}
.help-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.help-table th{background:var(--slate-50);text-align:right;padding:8px 10px;font-weight:800;color:var(--slate-600);white-space:nowrap;}
.help-table td{padding:8px 10px;border-top:1px solid var(--slate-100);vertical-align:top;}
.help-field,.help-faq{border-right:3px solid var(--sky-200);padding:4px 12px 6px;margin:10px 0;}
.help-field-t{font-weight:800;color:var(--slate-900);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.help-pill{display:inline-block;font-size:10.5px;font-weight:800;color:var(--slate-600);background:var(--slate-100);
  border-radius:999px;padding:1px 8px;line-height:1.7;}
.help-pill.is-req{background:#FEF3C7;color:#92400E;}
.help-form{margin-bottom:10px;}
.help-flow{margin:8px 0 14px;}
.help-rels{display:grid;gap:10px;}
.help-rel{border:1px solid var(--slate-200);border-radius:12px;padding:10px 12px;}
.help-rel-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px;}
.help-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--sky-700);
  background:var(--sky-50);border:1px solid var(--sky-200);border-radius:10px;padding:5px 11px;}
.help-link:hover{background:var(--sky-100);}
.help-link.is-off{color:var(--slate-500);background:var(--slate-50);border-color:var(--slate-200);cursor:not-allowed;}
.help-inline-link{color:var(--sky-700);font-weight:800;text-decoration:underline;text-underline-offset:3px;}
.help-meta{font-size:11px;color:var(--slate-400);margin-top:14px;}
.help-flash{animation:helpflash 1.6s ease-out;}
@keyframes helpflash{0%{background:#FEF9C3;}100%{background:transparent;}}

/* زرّ «شرح هذه الخطوة» داخل النماذج */
.step-help{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:var(--sky-700);}
.step-help:hover{text-decoration:underline;}

/* أخطاء الحقول — بجوار الحقل، لا تمسح المدخلات */
.form-input.is-invalid{border-color:#DC2626 !important;background:#FEF2F2;}
.fld-msg{font-size:11.5px;font-weight:700;color:#B91C1C;margin-top:4px;}
.form-summary{border:1px solid #FCA5A5;background:#FEF2F2;color:#7F1D1D;border-radius:12px;padding:10px 12px;font-size:12.5px;}
.req-mark{color:#B91C1C;margin-right:3px;}
.opt-mark{color:var(--slate-400);font-weight:600;font-size:11px;margin-right:4px;}

/* طباعة الشرح وحده — بلا أزرار الواجهة */
@media print{
  body.print-help > *:not(.help-panel){display:none !important;}
  body.print-help .help-panel{position:static;transform:none;box-shadow:none;width:auto;}
  body.print-help .help-tools,body.print-help .help-foot,body.print-help .help-x,body.print-help .help-toc{display:none !important;}
  body.print-help .help-body{overflow:visible;}
  .help-sec{break-inside:avoid;}
  .help-link{border:0;background:none;padding:0;}
}