/* ============================================================
   طبقة الفندق — تُحمَّل بعد 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;}