/* =============================================================
   منصة الدبلومات — امتداد نظام التصميم
   كل ما هنا مأخوذ من المشروع المرجعي أو مبنيّ على رموزه نفسها
   (--sky-*, --slate-*, --r-*, --sh-*, --t-*, --ease-*).
   لا رموز جديدة ولا ألوان خارج لوحة المرجع.
   ============================================================= */

/* -------------------------------------------------------------
   0) أنماط منقولة من كتلة <style> الثانية في المشروع المرجعي
      (الكتلة الخاصة بالصفحات في 09-dashboard.html)
      كانت مفقودة لأن الاستخراج الأول شمل الكتلة الأولى وحدها.
      منقولة حرفياً كما هي.
   ------------------------------------------------------------- */

/* ===== صفّ مصغّر — يُستخدم في كل اللوحات ===== */
.mini-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--slate-100);
  transition:all var(--t-fast);cursor:pointer;}
.mini-row:last-child{border-bottom:none;}
.mini-row:hover{background:var(--sky-50);padding-right:8px;padding-left:8px;border-radius:9px;}

/* ===== القمع ===== */
.fn-row{display:flex;align-items:center;gap:12px;margin-bottom:9px;}
.fn-lbl{width:88px;flex-shrink:0;font-size:12px;font-weight:800;color:var(--slate-600);}
.fn-track{flex:1;height:34px;background:var(--slate-50);border-radius:9px;position:relative;overflow:hidden;}
.fn-bar{height:100%;border-radius:9px;width:0;transition:width 1.2s var(--ease-out);
  display:flex;align-items:center;justify-content:flex-end;padding-left:11px;cursor:pointer;}
.fn-bar:hover{filter:brightness(1.06);}
.fn-bar b{color:#fff;font-size:12px;font-weight:900;}
.fn-conv{width:64px;flex-shrink:0;text-align:left;font-size:11px;font-weight:800;}

/* ===== الرسم الخطي ===== */
.spark-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);}
.spark-line.run{transition:stroke-dashoffset 1.8s var(--ease-out);stroke-dashoffset:0;}
.spark-area{opacity:0;transition:opacity .9s var(--ease-out) .5s;}
.spark-area.run{opacity:1;}
.spark-dot{opacity:0;transition:opacity .3s;cursor:pointer;}
.chart-wrap:hover .spark-dot{opacity:1;}
.grid-line{stroke:var(--slate-100);stroke-width:1;}

/* ===== الحلقة ===== */
.donut-seg{transition:stroke-dashoffset 1.4s var(--ease-out),stroke-width .2s;cursor:pointer;}

/* تصحيح اتجاهي لما سبق */
[dir="ltr"] .fn-bar{justify-content:flex-end;padding-left:0;padding-right:11px;}
[dir="ltr"] .fn-conv{text-align:right;}

/* ===== النجوم =====
   المرجع يستهدف <i> لأنه كان يستخدم Font Awesome في نسخة سابقة،
   ونحن نستخدم SVG. نمدّد القاعدة للـ SVG بنفس ألوان المرجع. */
.stars{display:inline-flex;align-items:center;gap:2px;}
.stars svg{color:var(--warning);fill:var(--warning);width:15px;height:15px;}
.stars svg.empty{color:var(--slate-200);fill:none;}


/* -------------------------------------------------------------
   1) البوابة العامة — مأخوذة حرفياً من 01-portal-home.html
   ------------------------------------------------------------- */
.hero-wrap{position:relative;overflow:hidden;background:linear-gradient(180deg,#F8FAFC 0%,#F1F5F9 100%);}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--slate-200) 1px,transparent 1px),
                   linear-gradient(90deg,var(--slate-200) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 60% 30%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 60% 30%, #000 0%, transparent 72%);
}
.hero-search{
  background:#fff;border:1.5px solid var(--slate-200);border-radius:var(--r-3xl);
  box-shadow:0 6px 24px rgba(15,23,42,.06);
  transition:box-shadow .4s var(--ease-out),transform .4s var(--ease-out),border-color .3s;
}
.hero-search:focus-within{box-shadow:0 18px 46px rgba(14,165,233,.16);transform:translateY(-3px);border-color:var(--sky-300);}
.hero-search .divider{width:1px;height:34px;background:var(--slate-200);}

.word-slot{display:inline-block;position:relative;height:1.15em;overflow:hidden;vertical-align:bottom;}
.word-slot span{display:block;animation:word-roll 9s var(--ease-out) infinite;}
@keyframes word-roll{
  0%,26%{transform:translateY(0);}
  33%,59%{transform:translateY(-100%);}
  66%,92%{transform:translateY(-200%);}
  100%{transform:translateY(-300%);}
}

.value-card{transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);}
.value-card:hover{transform:translateY(-4px);border-color:var(--sky-300);box-shadow:var(--sh-lift);}


/* -------------------------------------------------------------
   2) شريط الخطوات + المعالج — من 06-application-form.html
   ------------------------------------------------------------- */
.steps{display:flex;align-items:center;gap:0;}
.step{display:flex;align-items:center;flex:1;min-width:0;}
.step:last-child{flex:0 0 auto;}
.step-lbl{margin-right:11px;min-width:0;}
.step-lbl p{font-size:12.5px;font-weight:800;color:var(--slate-400);transition:color var(--t-base);white-space:nowrap;}
.step-lbl span{font-size:10.5px;color:var(--slate-400);white-space:nowrap;}
.step.done .step-lbl p,.step.current .step-lbl p{color:var(--slate-900);}
.step-line{flex:1;height:2.5px;background:var(--slate-200);margin:0 14px;border-radius:3px;position:relative;overflow:hidden;}
.step-line::after{content:'';position:absolute;inset:0;width:0;background:var(--grad-success);
  border-radius:3px;transition:width .55s var(--ease-out);}
.step.done .step-line::after{width:100%;}

.wiz-pane{display:none;}
.wiz-pane.active{display:block;animation:wiz-in .45s var(--ease-out) both;}
@keyframes wiz-in{from{opacity:0;transform:translateX(-18px);}to{opacity:1;transform:none;}}
.wiz-pane.back.active{animation:wiz-in-b .45s var(--ease-out) both;}
@keyframes wiz-in-b{from{opacity:0;transform:translateX(18px);}to{opacity:1;transform:none;}}

.wiz-bar{position:sticky;bottom:0;z-index:30;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);border-top:1px solid var(--slate-200);box-shadow:0 -6px 22px rgba(15,23,42,.06);}

.radio-card{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1.5px solid var(--slate-200);
  border-radius:var(--r-md);cursor:pointer;background:#fff;transition:all var(--t-fast);}
.radio-card:hover{border-color:var(--sky-300);background:var(--sky-50);}
.radio-card.on{border-color:var(--sky-500);background:var(--sky-50);box-shadow:0 0 0 3px rgba(14,165,233,.1);}
.radio-card .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--slate-300);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .22s var(--ease-spring);}
.radio-card.on .dot{border-color:var(--sky-500);}
.radio-card.on .dot::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--sky-500);}

.rev-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dashed var(--slate-200);}
.rev-row:last-child{border-bottom:none;}
.rev-row dt{font-size:12px;font-weight:700;color:var(--slate-500);flex-shrink:0;}
.rev-row dd{font-size:13px;font-weight:700;color:var(--slate-900);text-align:left;}

@keyframes pop-check{0%{transform:scale(0) rotate(-25deg);}60%{transform:scale(1.15) rotate(4deg);}100%{transform:scale(1) rotate(0);}}
.pop-check{animation:pop-check .6s var(--ease-spring) both;}


/* -------------------------------------------------------------
   3) مربّع اختيار الجداول — من 17-candidates.html
   ------------------------------------------------------------- */
.cbx{
  width:17px;height:17px;border-radius:5px;border:1.5px solid var(--slate-300);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all var(--t-fast);flex-shrink:0;
}
.cbx:hover{border-color:var(--sky-500);}
.cbx.on{background:var(--sky-500);border-color:var(--sky-500);}
.cbx.on::after{content:'';width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;
  transform:rotate(-45deg) translateY(-1px);}

/* شريط الإجراءات الجماعية */
.sel-bar{
  position:fixed;bottom:-90px;right:50%;transform:translateX(50%);z-index:70;
  background:var(--slate-900);color:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-pop);
  padding:12px 18px;display:flex;align-items:center;gap:16px;
  transition:bottom .4s var(--ease-out);max-width:calc(100vw - 32px);overflow-x:auto;
}
.sel-bar.show{bottom:22px;}


/* -------------------------------------------------------------
   4) مكوّنات خاصة بالنطاق التعليمي
      لا يوجد لها مقابل في المشروع المرجعي — بُنيت امتداداً له
      (نفس الحواف والظلال والألوان، انظر docs/DESIGN_DECISIONS.md)
   ------------------------------------------------------------- */

/* بطاقة دبلوم — نظير .job-card في المرجع */
.dip-card{
  transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
}
.dip-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(14,165,233,.06),transparent 55%);
  opacity:0;transition:opacity var(--t-base);
}
.dip-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--sky-300);}
.dip-card:hover::after{opacity:1;}

/* شريط المقاعد */
.seat-bar{height:6px;background:var(--slate-200);border-radius:10px;overflow:hidden;}
.seat-fill{height:100%;border-radius:10px;width:0;background:var(--grad-brand);transition:width 1.1s var(--ease-out);}
.seat-fill.full{background:linear-gradient(135deg,#F87171,#DC2626);}
.seat-fill.near{background:linear-gradient(135deg,#FBBF24,#F59E0B);}

/* الخطة الدراسية — مستوى */
.plan-level{border:1.5px solid var(--slate-200);border-radius:var(--r-xl);background:#fff;overflow:hidden;
  transition:border-color var(--t-base),box-shadow var(--t-base);}
.plan-level:hover{border-color:var(--sky-300);box-shadow:var(--sh-card-hover);}
.plan-head{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--slate-50);
  border-bottom:1px solid var(--slate-200);cursor:pointer;width:100%;text-align:right;}
.plan-head:hover{background:var(--sky-50);}
.plan-num{width:30px;height:30px;border-radius:var(--r-sm);background:var(--grad-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex-shrink:0;}
.plan-body{max-height:0;overflow:hidden;transition:max-height .34s var(--ease-out);}
.plan-level.open .plan-body{max-height:900px;}
.plan-level.open .plan-head .chev{transform:rotate(180deg);}
.plan-head .chev{transition:transform .28s var(--ease-out);margin-right:auto;flex-shrink:0;}

/* جدول الأقساط — نظير .activity-item في المرجع */
.inst-row{position:relative;padding-right:34px;padding-bottom:18px;}
.inst-row::before{content:'';position:absolute;right:11px;top:26px;bottom:0;width:2px;background:var(--slate-200);}
.inst-row:last-child{padding-bottom:0;}
.inst-row:last-child::before{display:none;}
.inst-dot{position:absolute;right:0;top:2px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#fff;flex-shrink:0;}

/* وسم الاعتماد — لا يُعرض «معتمد» إلا بحالة معتمد فعلاً */
.acc-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill);
  font-size:11px;font-weight:800;border:1px solid transparent;}
.acc-yes{background:#D1FAE5;color:#065F46;border-color:#A7F3D0;}
.acc-pend{background:#FEF3C7;color:#92400E;border-color:#FDE68A;}
.acc-no{background:#F1F5F9;color:#475569;border-color:var(--slate-200);}

/* عنصر قائمة قادم — في السايدبار */
.nav-leaf.is-soon{opacity:.62;}
.nav-leaf.is-soon:hover{opacity:1;}

/* شبكة مفاتيح الحالات (Developer state switch) */
.state-switch{display:inline-flex;align-items:center;gap:4px;background:var(--slate-50);
  border:1.5px solid var(--slate-200);border-radius:var(--r-md);padding:3px;flex-wrap:wrap;}
.state-switch button{padding:5px 11px;font-size:11.5px;font-weight:800;color:var(--slate-500);
  border-radius:var(--r-xs);transition:all var(--t-fast);white-space:nowrap;}
.state-switch button:hover{color:var(--sky-700);}
.state-switch button.active{background:#fff;color:var(--sky-700);box-shadow:0 1px 3px rgba(0,0,0,.08);}

/* حالات مشتركة */
.state-box{display:none;}
.state-box.on{display:block;animation:fade-up .4s var(--ease-out) both;}

/* بطاقة سجل على الجوال — بديل صفوف الجدول */
.row-card{border:1px solid var(--slate-200);border-radius:var(--r-lg);background:#fff;padding:14px;
  transition:border-color var(--t-base),box-shadow var(--t-base);}
.row-card:hover{border-color:var(--sky-300);box-shadow:var(--sh-card-hover);}
.row-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin-top:10px;}
.row-card dt{font-size:11px;font-weight:700;color:var(--slate-500);}
.row-card dd{font-size:12.5px;font-weight:700;color:var(--slate-800);text-align:left;}

/* الجداول: إخفاء على الجوال والاستعاضة بالبطاقات */
@media (max-width:767px){
  .table-wrap{display:none;}
  .cards-wrap{display:grid;gap:10px;}
}
@media (min-width:768px){
  .cards-wrap{display:none;}
}

/* تصحيح اتجاهي: العناصر التي تعتمد إزاحة يمين/يسار */
[dir="ltr"] .inst-row{padding-right:0;padding-left:34px;}
[dir="ltr"] .inst-row::before{right:auto;left:11px;}
[dir="ltr"] .inst-dot{right:auto;left:0;}
[dir="ltr"] .plan-head{text-align:left;}
[dir="ltr"] .plan-head .chev{margin-right:0;margin-left:auto;}
[dir="ltr"] .step-lbl{margin-right:0;margin-left:11px;}
[dir="ltr"] .rev-row dd{text-align:right;}
[dir="ltr"] .row-card dd{text-align:right;}
[dir="ltr"] .data-table thead th{text-align:left;}
[dir="ltr"] .data-table tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--sky-500);}
[dir="ltr"] .nav-item.active::before{right:auto;left:-12px;border-radius:0 4px 4px 0;}
[dir="ltr"] .nav-leaf::before{right:auto;left:-8px;}
[dir="ltr"] .nav-sub .nav-leaf{margin-right:0;margin-left:14px;}
[dir="ltr"] .nav-sub .nav-sub .nav-leaf{margin-right:0;margin-left:26px;}
[dir="ltr"] .nav-search i,[dir="ltr"] .nav-search svg{right:auto;left:11px;}
[dir="ltr"] .nav-search input{padding:8px 11px 8px 32px;}
[dir="ltr"] body.app-shell .sidebar{right:auto;left:0;}
[dir="ltr"] .sidebar{border-left:0;border-right:1px solid var(--slate-200);}
[dir="ltr"] body.app-shell .app-header{right:0;left:var(--sidebar-w);}
[dir="ltr"] body.app-shell .main-area{right:0;left:var(--sidebar-w);}
[dir="ltr"] .drawer{left:auto;right:0;transform:translateX(100%);box-shadow:-10px 0 30px rgba(0,0,0,.15);}
[dir="ltr"] .drawer.show{transform:translateX(0);}
[dir="ltr"] .notif-dropdown,[dir="ltr"] .acct-dropdown{left:auto;right:0;}
[dir="ltr"] .value-chip{margin-right:0;margin-left:8px;}
[dir="ltr"] .fab-assistant{left:auto;right:30px;}
[dir="ltr"] body.app-shell.rail .nav-item::after,
[dir="ltr"] body.app-shell.rail .nav-mod::after{right:auto;left:calc(100% + 10px);}

@media (max-width:1024px){
  [dir="ltr"] body.app-shell .sidebar{transform:translateX(-100%);}
  [dir="ltr"] body.app-shell .sidebar.open{transform:translateX(0);}
  [dir="ltr"] body.app-shell .app-header{left:0;}
  [dir="ltr"] body.app-shell .main-area{left:0 !important;}
}

/* -------------------------------------------------------------
   5) طبقة الرسوم — امتداد لنمط .gallery-tile في المرجع
   ------------------------------------------------------------- */

/* بلاطة المعرض — منقولة من 01-portal-home.html ثم وُسّعت بشبكة خفيفة */
.gallery-tile{border-radius:var(--r-2xl);overflow:hidden;position:relative;
  transition:transform var(--t-base),box-shadow var(--t-base);}
.gallery-tile:hover{transform:translateY(-4px) scale(1.012);box-shadow:var(--sh-lift);}
.gallery-tile .glow{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(15,23,42,.62) 100%);}
.gallery-tile .tile-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(circle at 30% 20%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 30% 20%,#000 0%,transparent 78%);}

/* غلاف بطاقة الدبلوم */
.dip-cover{display:block;width:100%;}
.cover-wrap{position:relative;margin:-20px -20px 0;overflow:hidden;
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;}
.cover-wrap::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(15,23,42,.28) 100%);}
.cover-badges{position:absolute;top:12px;right:12px;left:12px;z-index:2;
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.cover-badges .badge{backdrop-filter:blur(6px);box-shadow:0 2px 8px rgba(15,23,42,.14);}
.dip-card:hover .dip-cover{transform:scale(1.05);}
.dip-cover{transition:transform var(--t-slow);}

/* صورة رمزية مزخرفة */
.portrait{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-card);}

/* شريط شعارات الجهات */
.logo-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.logo-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;
  border-radius:var(--r-lg);background:#fff;border:1.5px solid var(--slate-200);
  font-size:12.5px;font-weight:800;color:var(--slate-600);transition:all var(--t-base);}
.logo-chip:hover{border-color:var(--sky-300);color:var(--sky-700);transform:translateY(-2px);
  box-shadow:var(--sh-card-hover);}
.logo-chip svg{color:var(--sky-500);}

/* بطاقة اقتباس بخلفية */
.quote-card{position:relative;overflow:hidden;}
.quote-card::before{content:'';position:absolute;top:-26px;left:-14px;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,233,.09),transparent 68%);pointer-events:none;}

[dir="ltr"] .cover-wrap{margin:-20px -20px 0;}
[dir="ltr"] .quote-card::before{left:auto;right:-14px;}


/* بطاقة تنبيه ملوّنة
   لا يصحّ الاعتماد على bg-red-50 من Tailwind هنا، لأن design-system.css
   يُحمَّل بعد tailwind.css فيغلب background:#fff في .card على أصناف الخلفية.
   فنعرّف الحالة صراحةً بنفس ألوان دلالة المرجع. */
.note{display:flex;align-items:flex-start;gap:14px;padding:16px;
  border-radius:var(--r-2xl);border:1px solid var(--slate-200);background:#fff;
  box-shadow:var(--sh-card);transition:box-shadow var(--t-base),border-color var(--t-base);}
.note:hover{box-shadow:var(--sh-card-hover);}
.note .note-ic{width:36px;height:36px;border-radius:var(--r-lg);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:#fff;}
.note-danger {background:#FEF2F2;border-color:#FECACA;}
.note-danger  .note-ic{color:var(--danger-strong,#DC2626);}
.note-warning{background:#FFFBEB;border-color:#FDE68A;}
.note-warning .note-ic{color:var(--warning);}
.note-info   {background:#F0F9FF;border-color:#BAE6FD;}
.note-info    .note-ic{color:var(--sky-600);}
.note-success{background:#F0FDF4;border-color:#A7F3D0;}
.note-slate  {background:#F8FAFC;border-color:#E2E8F0;}
.note-slate   .note-ic{color:var(--slate-500);}
.note-success .note-ic{color:var(--success);}


/* منع أي تجاوز أفقي غير مقصود
   اللوحات المنزلقة (.drawer) تقف خارج الشاشة بـ translateX،
   فتوسّع مستند الصفحات العامة. المرجع يخفي التجاوز على body فقط،
   وهو لا يكفي هنا لأن الصفحات العامة لا تستخدم app-shell. */
html{overflow-x:hidden;}
html,body{max-width:100%;}
.main-area,main{overflow-x:hidden;}
.overflow-x-auto{overflow-x:auto;}

/* -------------------------------------------------------------
   أدوات ناقصة من بناء Tailwind الثابت
   البناء في assets/css/tailwind.css ملف جاهز لا JIT، فلا يحوي إلا
   ما استعمله القالب الأصلي. هذه الأصناف مستعملة في الشاشات وغائبة
   عنه، فكانت تسقط بصمت. عرّفناها هنا بالقيم نفسها التي يولّدها Tailwind.
   ------------------------------------------------------------- */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.place-items-center{place-items:center;}
.self-center{align-self:center;}
.pb-2\.5{padding-bottom:.625rem;}
.pt-2\.5{padding-top:.625rem;}
.fill-slate-400{fill:#94A3B8;}
.fill-slate-900{fill:#0F172A;}
.h-\[220px\]{height:220px;}
.accent-sky-600{accent-color:#0284C7;}
.focus\:border-sky-400:focus{border-color:#38BDF8;}
.disabled\:opacity-40:disabled{opacity:.4;cursor:not-allowed;}
.col-span-2{grid-column:span 2 / span 2;}
@media (min-width:1024px){
  .lg\:col-span-2{grid-column:span 2 / span 2;}
  .lg\:col-span-3{grid-column:span 3 / span 3;}
  .lg\:col-span-4{grid-column:span 4 / span 4;}
  .lg\:col-span-5{grid-column:span 5 / span 5;}
  .lg\:col-span-7{grid-column:span 7 / span 7;}
  .lg\:col-span-8{grid-column:span 8 / span 8;}
  .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr));}
}
/* أصناف تعتمد عليها المكوّنات المشتركة في components.js
   كانت كل شاشة تعرّف .seg-wrap في <style> الخاص بها، فأي شاشة جديدة تستدعي
   C.chips بلا نسخها يفيض شريط الشرائح. ومثلها p-12 في C.noMatch و pb-3 في
   C.loadingTable — كلاهما غائب عن بناء tailwind الثابت فكان يسقط بصمت. */
.seg-wrap{overflow-x:auto;max-width:100%;scrollbar-width:none;}
.seg-wrap::-webkit-scrollbar{display:none;}
.p-12{padding:3rem;}
.pb-3{padding-bottom:.75rem;}

/* أصناف تستعملها شاشات التدبير (HK-01..04) */
.h-2{height:.5rem;}
.rounded-sm{border-radius:.125rem;}
.mb-3\.5{margin-bottom:.875rem;}
.opacity-90{opacity:.9;}
/* أصناف تستعملها خريطة الشاشات المولَّدة (app/index.html) */
.bg-amber-50\/50{background-color:rgba(255,251,235,.5);}
.last\:mb-0:last-child{margin-bottom:0;}
.min-w-\[104px\]{min-width:104px;}
.space-y-9 > :not([hidden]) ~ :not([hidden]){margin-top:2.25rem;}

/* أصناف تستعملها دفعة المالية (FI-01..04) — ساقطة من بناء Tailwind الثابت */
.justify-end{justify-content:flex-end;}

/* أصناف تستعملها دفعة الإيرادات والتسعير (RM-01..04) */
.h-full{height:100%;}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}

/* أصناف تستعملها دفعة المالية الثانية (FI-05..08) — ساقطة من بناء Tailwind الثابت */
.px-2\.5{padding-left:.625rem;padding-right:.625rem;}

/* أصناف تستعملها دفعة التدبير والصيانة (HK-05..08 · MT-01..05) */
.mt-auto{margin-top:auto;}
.my-4{margin-top:1rem;margin-bottom:1rem;}

/* أصناف تستعملها دفعة الأستاذ العام والتقارير المالية (FI-09..14)
   ولون البرتقالي الذي يستعمله دور الصيانة في خريطة الشاشات المولَّدة —
   ثلاثتها غائبة عن بناء Tailwind الثابت فكانت تسقط بصمت. */
.ml-1{margin-left:.25rem;}
.bg-orange-50{background-color:#FFF7ED;}
.text-orange-600{color:#EA580C;}
.border-orange-200{border-color:#FED7AA;}
@media (min-width:1024px){
  .lg\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr));}
}

/* أصناف تستعملها دفعة الأغذية والمشروبات (FB-01..09) — غائبة عن بناء Tailwind الثابت */
.pb-1{padding-bottom:.25rem;}
.pb-2{padding-bottom:.5rem;}
.col-span-full{grid-column:1 / -1;}
.text-4xl{font-size:2.25rem;line-height:2.5rem;}
.bg-teal-50{background-color:#F0FDFA;}
.text-teal-600{color:#0D9488;}
.border-teal-200{border-color:#99F6E4;}

/* أصناف تستعملها دفعة بوابة المدير العام (GM-08..11) — غائبة عن بناء Tailwind الثابت */
.w-\[150px\]{width:150px;}
.inline-grid{display:inline-grid;}
.align-middle{vertical-align:middle;}
.my-2{margin-top:.5rem;margin-bottom:.5rem;}
.my-3{margin-top:.75rem;margin-bottom:.75rem;}
.w-2{width:.5rem;}
.h-\[180px\]{height:180px;}
.h-\[210px\]{height:210px;}

/* أصناف تستعملها دفعة الاستقبال والعمليات الأمامية (FO-11..FO-18)
   — غائبة عن بناء Tailwind الثابت فتسقط بصمت لولا تعريفها هنا */
@media (min-width:640px){
  .sm\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr));}
}

/* لوحات التبويب — `initTabs` في core.js يبدّل `.active`، ولا معنى له بلا هذه القاعدة.
   صنفٌ يبنيه سلوكٌ مشترك يُعرَّف هنا لا في شاشة واحدة. */
.tab-pane{display:none;}
.tab-pane.active{display:block;}

/* أصناف تستعملها دفعة إتمام المراسلة (MS-09..MS-13)
   — غائبة عن بناء Tailwind الثابت فتسقط بصمت لولا تعريفها هنا */
.inline-block{display:inline-block;}
.text-\[20px\]{font-size:20px;}
.text-\[26px\]{font-size:26px;}
.text-\[32px\]{font-size:32px;}
@media (min-width:640px){
  .sm\:w-64{width:16rem;}
}
.mb-0\.5{margin-bottom:.125rem;}

/* أصناف تستعملها تتمّة الأغذية والمشروبات (FB-10..FB-22) — غائبة عن بناء Tailwind الثابت */
.min-w-\[110px\]{min-width:110px;}
.min-w-\[54px\]{min-width:54px;}
.min-w-\[150px\]{min-width:150px;}

/* أصناف تستعملها دفعة الموارد البشرية (HR-01..HR-38) — غائبة عن بناء
   Tailwind الثابت، فلولا تعريفها هنا لسقطت بصمت بلا خطأ في الطرفية ولا
   في الـ console: تخطيط خاطئ فقط. القيم هي قيم Tailwind نفسها. */
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}
.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr));}
.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr));}
.col-span-3{grid-column:span 3 / span 3;}
.row-span-2{grid-row:span 2 / span 2;}
.gap-px{gap:1px;}
.gap-0\.5{gap:.125rem;}
.w-1{width:.25rem;}
.w-1\.5{width:.375rem;}
.w-7{width:1.75rem;}
.w-14{width:3.5rem;}
.w-\[120px\]{width:120px;}
.w-\[180px\]{width:180px;}
.h-1{height:.25rem;}
.h-1\.5{height:.375rem;}
.h-3{height:.75rem;}
.h-7{height:1.75rem;}
.h-14{height:3.5rem;}
.h-\[120px\]{height:120px;}
.h-\[150px\]{height:150px;}
.h-\[260px\]{height:260px;}
.min-h-\[44px\]{min-height:44px;}
.min-w-\[44px\]{min-width:44px;}
.min-w-\[64px\]{min-width:64px;}
.min-w-\[140px\]{min-width:140px;}
.max-w-\[420px\]{max-width:420px;}
.text-\[10px\]{font-size:10px;}
.leading-none{line-height:1;}
.tracking-tight{letter-spacing:-.015em;}
.whitespace-nowrap{white-space:nowrap;}
.break-words{overflow-wrap:break-word;}
.cursor-pointer{cursor:pointer;}
.select-none{user-select:none;}
.sticky{position:sticky;}
.top-0{top:0;}
.z-10{z-index:10;}
.pt-3{padding-top:.75rem;}
.pt-4{padding-top:1rem;}
.pl-1{padding-left:.25rem;}
.pr-1{padding-right:.25rem;}
.mr-auto{margin-right:auto;}
.ml-auto{margin-left:auto;}
.mt-0\.5{margin-top:.125rem;}
.mb-1\.5{margin-bottom:.375rem;}
.space-y-1 > :not([hidden]) ~ :not([hidden]){margin-top:.25rem;}
.space-y-6 > :not([hidden]) ~ :not([hidden]){margin-top:1.5rem;}
.border-t-2{border-top-width:2px;}
.border-r-2{border-right-width:2px;}
.border-dashed{border-style:dashed;}
.rounded-full{border-radius:9999px;}
.overflow-hidden{overflow:hidden;}
.opacity-60{opacity:.6;}
.bg-white\/70{background-color:rgba(255,255,255,.7);}
.bg-emerald-50{background-color:#ECFDF5;}
.text-emerald-600{color:#059669;}
.border-emerald-200{border-color:#A7F3D0;}
@media (min-width:640px){
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (min-width:1024px){
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
  .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}
  .lg\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr));}
  .lg\:col-span-4{grid-column:span 4 / span 4;}
}
@media (min-width:1280px){
  .xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
  .xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}
  .xl\:col-span-2{grid-column:span 2 / span 2;}
  .xl\:col-span-3{grid-column:span 3 / span 3;}
}

/* شريط سجل الدوام: حرفٌ لكل يوم — يُستعمل في HR-05 و HR-02 */
.att-strip{display:flex;gap:2px;flex-wrap:wrap;}
.att-cell{width:20px;height:24px;border-radius:5px;display:grid;place-items:center;
  font-size:10px;font-weight:900;color:#fff;}
.att-cell.sm{width:14px;height:18px;font-size:9px;}

.rounded-md{border-radius:.375rem;}

/* شبكة الورديات الأسبوعية — HR-07 */
.rost{width:100%;border-collapse:separate;border-spacing:3px;}
.rost th{font-size:11px;font-weight:800;color:var(--slate-400);padding-bottom:4px;}
.rost td{padding:0;}
.rost-cell{border-radius:8px;padding:6px 4px;text-align:center;font-size:11px;
  font-weight:800;border:1px solid transparent;}

/* مصفوفة تسعة مربعات — HR-27 */
.box9{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.box9 .cell{border:1px solid var(--slate-200);border-radius:10px;padding:10px;
  min-height:78px;transition:box-shadow var(--t-base);}
.box9 .cell:hover{box-shadow:var(--sh-card-hover);}

/* ═════════════════════════════════════════════════════════════
   تطبيق النزيل والخدمة الذاتية — GA-01..GA-15
   ⚠ كل صنفٍ يبنيه `components.js` (C.ga) يُعرَّف هنا لا في الشاشة،
     وإلا سقط في كل شاشةٍ تستدعيه لا في واحدة.
   ═════════════════════════════════════════════════════════════ */
.gp{max-width:468px;margin:0 auto;}
.gp-wide{max-width:760px;margin:0 auto;}

/* ترويسة التطبيق */
.ga-hd{border-radius:var(--r-2xl);padding:18px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0F172A 0%,#0C4A6E 56%,#0284C7 100%);}
.ga-hd::after{content:'';position:absolute;inset-inline-end:-40px;top:-40px;width:150px;height:150px;
  border-radius:50%;background:rgba(255,255,255,.07);}
.ga-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;
  background:rgba(255,255,255,.16);font-size:11.5px;font-weight:700;}
.ga-pill-w{background:#fff;color:var(--sky-800);}

/* شريط التبويبات السفلي */
.ga-tabs{position:fixed;inset-inline:0;bottom:0;z-index:35;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--slate-200);
  padding:6px max(10px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));}
.ga-tabs-in{max-width:468px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;}
.ga-tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;
  border-radius:12px;font-size:10.5px;font-weight:800;color:var(--slate-400);
  transition:color var(--t-fast),background var(--t-fast);position:relative;}
.ga-tab:hover{color:var(--sky-600);background:var(--sky-50);}
.ga-tab.on{color:var(--sky-700);background:var(--sky-50);}
.ga-tab .ic{width:19px;height:19px;}
.ga-dot{position:absolute;top:4px;inset-inline-end:calc(50% - 15px);min-width:16px;height:16px;
  border-radius:99px;background:var(--danger);color:#fff;font-size:9.5px;font-weight:900;
  display:grid;place-items:center;padding:0 4px;}

/* ورقة «كل الشاشات» */
.ga-sheet{position:fixed;inset:0;z-index:60;display:none;}
.ga-sheet.on{display:block;}
.ga-sheet-bg{position:absolute;inset:0;background:rgba(15,23,42,.5);}
.ga-sheet-in{position:absolute;inset-inline:0;bottom:0;max-height:82vh;overflow-y:auto;
  background:#fff;border-radius:22px 22px 0 0;padding:16px 14px calc(20px + env(safe-area-inset-bottom));
  max-width:520px;margin:0 auto;box-shadow:var(--sh-drawer);}
.ga-grab{width:42px;height:4px;border-radius:99px;background:var(--slate-200);margin:0 auto 12px;}
.ga-link{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:13px;
  transition:background var(--t-fast);}
.ga-link:hover{background:var(--slate-50);}
.ga-link.on{background:var(--sky-50);}
.ga-lic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--slate-100);color:var(--slate-500);}
.ga-link.on .ga-lic{background:var(--sky-100);color:var(--sky-700);}

/* بطاقات وأزرار التطبيق */
.ga-row{display:flex;align-items:center;gap:11px;width:100%;text-align:start;padding:12px;
  border-radius:var(--r-xl);border:1.5px solid var(--slate-200);background:#fff;
  transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast);}
.ga-row:hover{border-color:var(--sky-300);}
.ga-row:active{transform:scale(.99);}
.ga-row.on{border-color:var(--sky-400);background:var(--sky-50);
  box-shadow:inset 0 0 0 1px var(--sky-300);}
.ga-row.off{opacity:.55;}
.ga-ic{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--slate-100);color:var(--slate-500);}
.ga-row.on .ga-ic{background:var(--sky-100);color:var(--sky-700);}
.ga-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:14px;border-radius:var(--r-xl);font-weight:900;font-size:14.5px;
  transition:transform var(--t-fast),box-shadow var(--t-base);}
.ga-btn:active{transform:scale(.985);}
.ga-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.ga-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}

/* مفتاح التبديل */
.ga-sw{position:relative;display:inline-flex;align-items:center;width:44px;height:25px;flex:none;
  border-radius:99px;background:var(--slate-200);cursor:pointer;transition:background var(--t-fast);}
.ga-sw::after{content:'';position:absolute;right:3px;width:19px;height:19px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform var(--t-fast);}
.ga-sw.on{background:var(--success);}
.ga-sw.on::after{transform:translateX(-19px);}

/* الخط الزمني */
.ga-tl{position:relative;padding-inline-start:26px;}
.ga-tl::before{content:'';position:absolute;top:10px;bottom:10px;inset-inline-start:7px;width:2px;
  background:var(--slate-200);}
.ga-tl-i{position:relative;padding:8px 0;}
.ga-tl-i::before{content:'';position:absolute;inset-inline-start:-24px;top:13px;width:14px;height:14px;
  border-radius:50%;background:#fff;border:2.5px solid var(--slate-300);}
.ga-tl-i.done::before{border-color:var(--success);background:var(--success);}
.ga-tl-i.now::before{border-color:var(--sky-500);box-shadow:0 0 0 4px rgba(2,132,199,.16);}
.ga-tl-i.wait::before{border-color:var(--warning);}

/* فقاعات المحادثة */
.ga-msg{max-width:84%;padding:9px 12px;border-radius:16px;font-size:13px;line-height:1.65;}
.ga-me{margin-inline-start:auto;background:var(--sky-600);color:#fff;border-end-end-radius:5px;}
.ga-them{margin-inline-end:auto;background:var(--slate-100);color:var(--slate-800);
  border-end-start-radius:5px;}

/* مخطط المنتجع */
.ga-map{position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(180deg,#7DD3FC 0%,#BAE6FD 13%,#FEF3C7 19%,#F0FDF4 34%,#F8FAFC 100%);}
.ga-pin{position:absolute;transform:translate(50%,-50%);display:grid;place-items:center;
  width:27px;height:27px;border-radius:50%;background:#fff;color:var(--sky-700);
  box-shadow:0 2px 6px rgba(15,23,42,.22);border:1.5px solid var(--sky-200);cursor:pointer;
  transition:transform var(--t-fast);}
.ga-pin:hover{transform:translate(50%,-50%) scale(1.16);}
.ga-pin.on{background:var(--sky-600);color:#fff;border-color:#fff;}
.ga-pin .ic{width:13px;height:13px;}

/* شريط فترات المرافق */
.ga-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:7px;}
.ga-slot{padding:8px 4px;border-radius:11px;border:1.5px solid var(--slate-200);text-align:center;
  font-size:11.5px;font-weight:800;color:var(--slate-700);background:#fff;
  transition:border-color var(--t-fast),background var(--t-fast);}
.ga-slot:hover:not(.full){border-color:var(--sky-300);}
.ga-slot.on{border-color:var(--sky-500);background:var(--sky-50);color:var(--sky-800);}
.ga-slot.full{opacity:.45;background:var(--slate-50);cursor:not-allowed;}

/* خطوات المعالج */
.ga-steps{display:flex;gap:5px;}
.ga-step{flex:1;height:5px;border-radius:99px;background:var(--slate-200);}
.ga-step.done{background:var(--success);}
.ga-step.now{background:var(--sky-500);}

/* بطاقة المفتاح */
.ga-key{border-radius:var(--r-2xl);padding:22px;color:#fff;text-align:center;
  background:linear-gradient(140deg,#0C4A6E 0%,#0369A1 45%,#38BDF8 100%);
  box-shadow:var(--sh-brand);}
.ga-keyring{width:96px;height:96px;border-radius:50%;margin:0 auto 14px;display:grid;
  place-items:center;background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.32);}
.ga-keyring.open{background:rgba(16,185,129,.28);border-color:rgba(255,255,255,.7);}

/* شبكة أزرار الغرفة */
.ga-dev{aspect-ratio:1/1;border-radius:var(--r-xl);border:1.5px solid var(--slate-200);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:#fff;font-size:11.5px;font-weight:800;color:var(--slate-600);
  transition:border-color var(--t-fast),background var(--t-fast);}
.ga-dev:hover{border-color:var(--sky-300);}
.ga-dev.on{border-color:#F59E0B;background:#FFFBEB;color:#B45309;}
.ga-dev .ic{width:22px;height:22px;}

/* أدوات صغيرة */
.ga-note{font-size:11.5px;line-height:1.7;color:var(--slate-500);}
.ga-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13px;}
.ga-kv dt{color:var(--slate-500);font-weight:700;font-size:12px;white-space:nowrap;}
.ga-kv dd{color:var(--slate-900);font-weight:800;text-align:end;}
.ga-stars{display:inline-flex;gap:3px;}
.ga-star{width:30px;height:30px;color:var(--slate-300);transition:color var(--t-fast),transform var(--t-fast);}
.ga-star.on{color:#F59E0B;}
.ga-star:hover{transform:scale(1.14);}
.ga-bar{height:7px;border-radius:99px;background:var(--slate-100);overflow:hidden;}
.ga-bar>i{display:block;height:100%;border-radius:99px;background:var(--sky-500);}
.money{font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;}
.text-end{text-align:end;}
.text-start{text-align:start;}
.rounded-\[10px\]{border-radius:10px;}
.text-\[22px\]{font-size:22px;}
.text-\[26px\]{font-size:26px;}
.text-\[17px\]{font-size:17px;}
.text-\[10\.5px\]{font-size:10.5px;}
.text-\[11\.5px\]{font-size:11.5px;}
.text-\[12\.5px\]{font-size:12.5px;}
.text-\[13\.5px\]{font-size:13.5px;}
.text-\[14\.5px\]{font-size:14.5px;}
.text-\[18px\]{font-size:18px;}
.text-\[19px\]{font-size:19px;}
.text-\[20px\]{font-size:20px;}
.text-\[15px\]{font-size:15px;}
.text-\[16px\]{font-size:16px;}
.h-\[74px\]{height:74px;}
.h-\[120px\]{height:120px;}
.h-\[160px\]{height:160px;}
.min-h-\[64px\]{min-height:64px;}
.max-w-\[150px\]{max-width:150px;}
.max-w-\[160px\]{max-width:160px;}
.w-\[46px\]{width:46px;}
.leading-none{line-height:1;}
.text-\[30px\]{font-size:30px;}
.text-\[28px\]{font-size:28px;}
.pt-1\.5{padding-top:.375rem;}
.pb-1\.5{padding-bottom:.375rem;}
.pr-\[42px\]{padding-right:42px;}
.text-\[32px\]{font-size:32px;}

/* ── دفعة سلسلة الفنادق متعددة الفروع (GP-10 · GP-11 · GP-12) ──
   صنفان ناقصان من بناء tailwind الثابت — يسقطان بصمت لولا تعريفهما. */
.not-italic{font-style:normal;}
@media (min-width:1280px){
  .xl\:col-span-4{grid-column:span 4 / span 4;}
}

/* ── دفعة النظام والتوطين والمرافق (SY · LZ · RC) ──
   `pr-9` غائبة عن بناء tailwind الثابت، وتسقط بصمت لولا تعريفها. */
.pr-9{padding-right:2.25rem;}