/* ==========================================================================
   Dammam Valley — Employee Performance Evaluation
   style.css
   --------------------------------------------------------------------------
   Colours, typography and the angular graphic system all follow
   "Dammam Valley — Brand Guidelines 2026, Version .01".

     1.  Design tokens (brand)
     2.  Reset & base
     3.  Layout primitives
     4.  Buttons & pills
     5.  Top bar & footer
     6.  Home view
     7.  Evaluation view: rail, progress, wizard
     8.  Cards & form controls
     9.  Rating scale (5-point)
    10.  Summary
    11.  Modal & toast
    12.  Success view
    13.  Responsive
    14.  RTL, motion, print
   ========================================================================== */

/* 1. DESIGN TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* --- Brand primaries (Guidelines §03) --- */
  --navy:        #0B1E41;   /* primary dark — headings, ink, dark surfaces */
  --navy-700:    #143059;
  --navy-100:    #E3E8F0;
  --navy-050:    #F2F5F9;

  --teal:        #00B1B2;   /* primary accent */
  --teal-600:    #009697;
  --teal-100:    #DCF3F3;
  --teal-050:    #F0FAFA;

  --green:       #35B27C;   /* the green end of the emblem gradient */
  --blue:        #1B5FA0;   /* the blue end of the emblem gradient */

  /* The emblem gradient: blue → teal → green. Used for progress and accents. */
  --grad: linear-gradient(100deg, var(--blue) 0%, var(--teal) 55%, var(--green) 100%);

  /* --- Neutrals --- */
  --bg:          #FFFFFF;
  --surface:     #F4F6F8;
  --surface-2:   #ECEFF3;
  --line:        #E1E5EA;
  --line-strong: #CCCCCC;   /* brand neutral */

  /* --- Text --- */
  --ink:   var(--navy);
  --ink-2: #3F4A5C;
  --ink-3: #46536B;   /* AA on white — used for lead text, descriptions */
  --ink-4: #64718A;   /* AA on white — used for hints, meta, placeholders */

  --danger:     #C0392B;
  --danger-050: #FDF2F1;

  /* --- مراتب النتيجة الخمس (ضعيف → ممتاز) ------------------------------
     تُعرَّف مرة واحدة هنا وتُستعمل في وسم اللوحة، وكتلة التفاصيل، ودائرة
     شاشة الشكر — فلا يختلف لون المرتبة الواحدة بين شاشة وأخرى.
     لكل مرتبة أربعة ألوان: خلفية فاتحة، حدّ، نصّ داكن بما يكفي ليُقرأ على
     تلك الخلفية (النص هو ما يحمل المعنى، واللون مؤكِّد له لا بديل)، ولون
     شريط أوضح — الشريط لا نصّ فيه فلا يقيّده تباين القراءة، فنستغلّ ذلك
     لنفرّق الأخضر الفاتح عن الغامق بوضوح: الأول يميل للّيموني والثاني
     للزمرّدي العميق، وإلا بدت المرتبتان الأخيرتان لونًا واحدًا. */
  --sc-poor-bg:  #FDF2F1;  --sc-poor-bd:  #F3C9C4;  --sc-poor-fg:  #B03024;  --sc-poor-bar:  #D0453A;
  --sc-fair-bg:  #FFF4EC;  --sc-fair-bd:  #FAD5B8;  --sc-fair-fg:  #B45309;  --sc-fair-bar:  #E4801F;
  --sc-good-bg:  #FFFAE6;  --sc-good-bd:  #F0DFA4;  --sc-good-fg:  #8A6A08;  --sc-good-bar:  #E0B617;
  --sc-vgood-bg: #F3FBEA;  --sc-vgood-bd: #D5EDBE;  --sc-vgood-fg: #427520;  --sc-vgood-bar: #77BE3C;
  --sc-exc-bg:   #E6F5EE;  --sc-exc-bd:   #BFE5D3;  --sc-exc-fg:   #0F6B45;  --sc-exc-bar:   #12855A;

  /* --- Radii: softened, but kept tighter than a consumer app.
         The brand's geometry is angular; corners stay disciplined. --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* --- Soft shadows --- */
  --sh-1: 0 1px 2px rgba(11, 30, 65, .04), 0 1px 3px rgba(11, 30, 65, .05);
  --sh-2: 0 2px 6px rgba(11, 30, 65, .05), 0 10px 28px rgba(11, 30, 65, .07);
  --sh-3: 0 16px 48px rgba(11, 30, 65, .18);
  --sh-teal: 0 6px 18px rgba(0, 177, 178, .28);

  /* --- Spacing --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 80px;

  /* --- Type (Guidelines §04: IBM Plex Sans Arabic, AR + EN) --- */
  --font: "IBM Plex Sans Arabic", "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --fast: 140ms;
  --base: 240ms;

  --maxw: 1220px;
  --topbar-h: 96px;
}

/* لوحة IT تتبع شكل صفوف لوحة HR، وتتحول لبطاقة مرتبة على الجوال. */
@media (max-width: 720px) {
  .it-dashboard .itrow__thead { display: none; }
  .it-dashboard .itrow { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "who actions" "subject subject" "category status" "priority date" "reject reject"; gap: var(--s-2) var(--s-3); padding: var(--s-4); }
  .it-dashboard .itrow__who { grid-area: who; }.it-dashboard .itrow__subject { grid-area: subject; }.it-dashboard .itrow__category { grid-area: category; }.it-dashboard .itrow > :nth-child(4) { grid-area: priority; }.it-dashboard .itrow > :nth-child(5) { grid-area: status; justify-self: end; }.it-dashboard .itrow__date { grid-area: date; justify-self: end; }.it-dashboard .itrow__actions { grid-area: actions; }.it-dashboard .itrow__reject { grid-area: reject; flex-wrap: wrap; }
}

/* لا نكتفي بخط العربية الذي يحوي محارف لاتينية؛ في وضع EN نستخدم النسخة
   اللاتينية الأصلية من IBM Plex Sans لتكون الحروف أخف وأنظف ومتناسقة. */
html[lang="en"] { --font: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif; }

/* 2. RESET & BASE
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* عمود رأسي بارتفاع الشاشة كاملًا: يبقى التذييل في الأسفل مهما قصر المحتوى. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;              /* يدفع التذييل إلى القاع */
  display: flex;               /* ليتمدّد القسم النشط ويملأ الارتفاع كاملًا */
  flex-direction: column;
}
/* القسم الظاهر يتمدّد ليملأ ما بين الهيدر والتذييل، فتستطيع الشاشات
   القصيرة (إدخال الرقم، خيار المدير) توسيط بطاقتها عموديًّا بدل
   التصاقها بالأعلى وترك فراغ كبير تحتها. */
main > .view:not([hidden]) {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* [hidden] wins over any component `display` rule. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; inset-inline-start: var(--s-4); top: -60px; z-index: 100;
  padding: 10px 16px;
  background: var(--navy); color: #fff;
  border-radius: var(--r-sm); text-decoration: none;
  transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: var(--s-3); }

/* 3. LAYOUT PRIMITIVES
   ------------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.view { animation: viewIn var(--base) var(--ease) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 4. BUTTONS & PILLS
   ------------------------------------------------------------------------ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink-2);
  --btn-bd: transparent;

  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 11px 18px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 15px; font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), transform var(--fast) var(--ease),
              box-shadow var(--base) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; pointer-events: none; }

.btn--primary {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  --btn-bd: var(--navy);
  box-shadow: 0 6px 18px rgba(11, 30, 65, .22);
}
.btn--primary:hover { --btn-bg: var(--navy-700); --btn-bd: var(--navy-700); }

.btn--ghost {
  --btn-bg: #fff; --btn-bd: var(--line-strong); --btn-fg: var(--ink);
  box-shadow: var(--sh-1);
}
.btn--ghost:hover { --btn-bg: var(--surface); --btn-bd: var(--teal); --btn-fg: var(--teal-600); }

.btn--subtle { --btn-fg: var(--ink-3); }
.btn--subtle:hover { --btn-bg: var(--surface-2); --btn-fg: var(--ink); }

/* زر خطر: للحذف النهائي. أحمر ممتلئ ليؤكّد جسامة الإجراء. */
.btn--danger { --btn-bg: var(--danger); --btn-bd: var(--danger); --btn-fg: #fff; }
.btn--danger:hover { --btn-bg: #A93226; --btn-bd: #A93226; --btn-fg: #fff; }

.btn--lg  { padding: 15px 28px; font-size: 15.5px; border-radius: var(--r-lg); }
.btn--sm  { padding: 8px 12px; font-size: 13px; }

/* The primary CTA carries the emblem gradient on its underside. */
.btn--primary.btn--lg { position: relative; overflow: hidden; }
.btn--primary.btn--lg::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: var(--grad);
}

.btn i.fa-arrow-right, .btn i.fa-arrow-left { transition: transform var(--fast) var(--ease); }
.btn--primary:hover i.fa-arrow-right { transform: translateX(3px); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: var(--teal-100);
  color: var(--teal-600);
  font-size: 12.5px; font-weight: 500;
}

/* 5. TOP BAR & FOOTER
   ------------------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

.brand { display: flex; align-items: center; text-decoration: none; }
.brand__logo { height: 44px; width: auto; }   /* رمز وادي الدمام */

.topbar__actions { display: flex; align-items: center; gap: var(--s-3); }

/* رابط نصي هادئ لمدخل الموارد البشرية */
.toplink {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--navy);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.toplink i { color: var(--navy); font-size: 13px; transition: color var(--fast) var(--ease); }
/* التمرير يبقى فيروزيًا: هو لون التفاعل في كل الواجهة، ويمنح الرابط دلالة
   واضحة على أنه قابل للنقر بعد أن صار لونه الأساسي داكنًا كنص عادي. */
.toplink:hover { color: var(--teal-600); border-bottom-color: var(--teal); }
.toplink:hover i { color: var(--teal-600); }

/* زر الخروج: محايد عادةً، بلمسة حمراء عند المرور تشير إلى مغادرة الجلسة. */
.toplink--logout:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-050); }
.toplink--logout:hover i { color: var(--danger); }

/* زر حذف الاستجابة في شاشة الملخّص: لمسة حمراء عند المرور. */
.detail__del:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-050); }
.detail__del:hover i { color: var(--danger); }


/* Compact navy footer — a survey needs a signature, not a sitemap.
   On a dark ground the logo must be the all-white version (Guidelines §01). */
.footer {
  position: relative;
  flex-shrink: 0;
  margin-top: var(--s-9);
  background: var(--navy);
  color: #fff;
}
/* بطاقة الدخول لها خلفية ممتدّة حتى التذييل؛ هامش التذييل العلوي يترك
   شريطًا أبيض بينهما، فنُلغيه ما دامت هذه الشاشة هي الظاهرة. */
body:has(.evaluate.is-login) .footer { margin-top: 0; }
.footer::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--grad);
}
.footer__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
  font-size: 13.5px;
}
.footer__logo { height: 38px; width: auto; flex: 0 0 auto; }   /* الشعار الأبيض الكامل: اسم + رمز */
.footer__copy { color: #fff; }
.footer__links { display: inline-flex; align-items: center; gap: var(--s-4); }
.footer__link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: #fff;
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}
.footer__link i { color: var(--teal); font-size: 13px; }
.footer__link:hover { color: var(--teal); }


/* 6. HOME VIEW
   ------------------------------------------------------------------------ */
.hero {
  padding-block: var(--s-9) var(--s-8);
}
.hero__copy { max-width: 780px; }

/* ── زخرفة الرمز ─────────────────────────────────────────────────────
   تظهر على الشاشات الواسعة فقط. على الشاشات الضيقة تُخفى تمامًا: المساحة
   هناك للمحتوى، وعلامة مائية خلف نص عربي تضر بالقراءة أكثر مما تزيّن. */
.hero__art { display: none; }

@media (min-width: 1040px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    align-items: center;
    gap: var(--s-9);
    /* الرسمة الجانبية أعرض من عمودها عمدًا (انظر .hero__art svg أدناه)، فتفيض
       على الجانبين. بين 1040px و1330px تقريبًا يتجاوز فيضُها حافةَ الصفحة
       فيظهر شريط تمرير أفقي في الشاشة الرئيسية — على عروض شائعة مثل 1280px.
       clip يقصّ الفائض عند حدّ الحاوية دون أن يُنشئ حاوية تمرير (بخلاف
       hidden)، فلا يكسر أي عنصر لاصق داخلها. */
    overflow-x: clip;
  }

  .hero__art {
    display: block;
    position: relative;
    height: 400px;
    pointer-events: none;   /* لا يعترض النقر على ما تحته */
    user-select: none;
  }

  .hero__art svg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    height: 460px;          /* أكبر قليلاً من حاويته ليمتلئ العرض الجانبي بأناقة */
    width: auto;
    opacity: 1;             /* رسمة مسطّحة مملوءة بألوان الهوية؛ لا تشفيف كالخطوط السابقة */
    overflow: visible;
  }
}

/* الطباعة: زخرفة لا مكان لها على الورق. */
@media print { .hero__art { display: none !important; } }

.hero__title {
  margin: 0 0 var(--s-4);
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 600;
  line-height: 1.4;              /* Arabic ascenders/descenders need the room */
  color: var(--navy);
}

.hero__lead { max-width: 58ch; font-size: 17.5px; line-height: 1.95; color: var(--ink-3); }

/* Button first, its caveat directly beneath — the note is about the button,
   so it belongs under it, not competing for the same line. */
.hero__cta {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  margin-top: var(--s-7);
}
.hero__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-7); }
.hero__buttons .hr-link { position: relative; }
.hero__note { margin-top: var(--s-4); }
.hero__note {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-4); font-size: 14px;
}

/* حالة ما بعد الإرسال: تحل محل زر البدء */
.hero__done {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  max-width: 520px;
  border: 1px solid var(--teal-100);
  border-radius: var(--r-lg);
  background: var(--teal-050);
}
.hero__done-mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: var(--r-full);
  background: var(--teal); color: #fff;
  font-size: 16px;
}
.hero__done-title { color: var(--navy); font-weight: 600; font-size: 16px; }
.hero__done-text { font-size: 14px; color: var(--ink-3); }
.hero__done-text a { color: var(--teal-600); font-weight: 500; }

/* (أُزيلت بطاقة «تابع تقييم موظفيك» الوسيطة: صار زرّ «ابدأ التقييم» نفسه
   يبقى متاحًا حتى يُتمّ المدير تقييمه الذاتي وتقييم فريقه كاملًا.) */

.hero__steps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-8); padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.hero__steps li { display: flex; align-items: center; gap: var(--s-3); color: var(--ink-3); font-size: 15px; }

/* The brand's slanted rectangle, shrunk to a bullet. */
.hero__mark {
  width: 16px; height: 10px; flex: 0 0 16px;
  background: var(--grad);
  transform: skewX(-20deg);
}

/* 7. EVALUATION VIEW
   ------------------------------------------------------------------------ */
.evaluate {
  display: grid;
  /* عمود واحد: مسار الخطوات صار أفقيًّا في أعلى البطاقة بدل شريط جانبي.
     نحدّ العرض ونتوسّط، فالسطر الطويل جدًّا مُتعب للقراءة والأزرار تتباعد. */
  grid-template-columns: minmax(0, 1fr);
  max-width: 940px;
  margin-inline: auto;
  gap: var(--s-8);
  padding-block: var(--s-8);
  align-items: start;
}
/* أثناء شاشة خيار المدير: نخفي القائمة الجانبية وتتوسّع البطاقة. */
/* is-choice تُستخدم لشاشتين قصيرتين: إدخال الرقم، وخيار المدير. نجعلهما
   تتوسّطان عموديًّا بدل الالتصاق بالأعلى وترك فراغ كبير تحتهما. */
.evaluate.is-choice {
  /* نتحوّل من شبكة إلى flex هنا: عنصر واحد (البطاقة) يتمركز عموديًّا
     وأفقيًّا بشكل موثوق، بدل بقائه ملتصقًا بأعلى الشبكة. */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* توسيط عمودي */
  align-items: center;       /* توسيط أفقي */
  flex: 1 0 auto;
  padding-block: var(--s-6);
}
/* البطاقة تأخذ عرضها المحدّد لا عرض الحاوية كاملًا. */
.evaluate.is-choice .wizard { width: 100%; }
.evaluate.is-choice .steps { display: none; }
.evaluate.is-choice .wizard__head { display: none; }
/* في هذا الوضع يتوسّط محتوى الخطوة في بطاقة كبيرة (الرقم أو خيار المدير). */
.evaluate.is-choice #stepContainer { max-width: 680px; margin: 0 auto; }
/* توسيط محتوى بطاقة الرقم: العنوان والأيقونة والوصف والحقل — كلها في الوسط. */
.evaluate.is-choice .card { padding: var(--s-9) var(--s-8); }
.evaluate.is-choice .card__head {
  flex-direction: column; align-items: center; text-align: center; gap: var(--s-3);
}
.evaluate.is-choice .card__head .card__title,
.evaluate.is-choice .card__head .card__desc { text-align: center; }
/* شبكة الحقول: الحقل يمتدّ العرض الكامل (لا نصف الشبكة) ليتوسّط فعليًّا. */
.evaluate.is-choice .grid { grid-template-columns: 1fr; justify-items: center; }
.evaluate.is-choice .field {
  align-items: center; width: 100%; max-width: 360px; margin: 0 auto;
}
/* عنوان الحقل يُحاذى لبداية السطر (اليمين في RTL) فوق حقله مباشرةً، لا
   موسَّطًا: العنوان الموسَّط فوق حقل بعرض ٣٦٠px يبدو معلّقًا في الفراغ وغير
   مرتبط بحقله. width:100% ضرورية لأن .field صار align-items:center هنا،
   فبدونها ينكمش العنوان لعرض نصّه ويبقى في المنتصف مهما كانت المحاذاة. */
.evaluate.is-choice .field > label { width: 100%; text-align: start; }
/* رسالة الخطأ تُحاذى مثل العنوان تمامًا (بداية السطر) لا موسَّطة، فتقرأ
   كجزء من الحقل نفسه لا كنصّ عائم أسفله. */
.evaluate.is-choice .field > .lookup__status { width: 100%; text-align: start; }
.evaluate.is-choice .field .input,
.evaluate.is-choice .field input { text-align: center; }
/* الأزرار تحت البطاقة، على اليسار دائمًا — بصرف النظر عن ظهور «السابق» من
   عدمه. margin-inline-start:auto على المجموعة يدفعها لأقصى اليسار في RTL
   حتى لو كانت العنصر الوحيد في الحاوية (كما في خطوة الرقم، حيث «السابق» مخفي). */
.evaluate.is-choice .wizard__actions {
  max-width: 680px; margin: var(--s-5) auto 0;
  justify-content: flex-start;
}
.evaluate.is-choice .wizard__actions-right {
  margin-inline-start: auto;
}
.mchoice { max-width: 640px; margin: 0 auto; text-align: center; padding: var(--s-4) 0; }
.mchoice--card { padding: var(--s-9) var(--s-7); }
.mchoice__select-wrap { max-width: 380px; margin: 0 auto; }
.mchoice__select {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: #fff; font: inherit; font-size: 15px; color: var(--ink);
  cursor: pointer; text-align: center;
  transition: border-color var(--fast) var(--ease);
}
.mchoice__select:focus { outline: none; border-color: var(--teal); }
.mchoice__error { margin-top: var(--s-3); color: var(--danger); font-size: 13px; }

/* --- مسار الخطوات الأفقي (كان شريطًا جانبيًّا) --- */
/* بطاقة رمادية خفيفة تحتضن المسار فيبدو وحدة مستقلّة واضحة. */
.steps {
  margin-bottom: var(--s-5);
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--navy-050);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.steps__list {
  display: flex; align-items: flex-start;
  list-style: none; margin: 0; padding: 0;
}
/* كل خطوة تتمدّد بالتساوي، ويربطها خط بالتالية. */
.steps__item {
  position: relative;
  flex: 1 1 0; min-width: 0;
  display: flex; justify-content: center;
}
/* الخط الواصل: يُرسم على يمين كل خطوة (عدا الأولى) ليصل بينها وبين السابقة.
   نرسمه على ::before بعرض نصف الخطوة من كل جانب، فيلتقي الخطان في المنتصف. */
.steps__item::before,
.steps__item::after {
  content: "";
  position: absolute;
  top: 15px;                       /* منتصف الدائرة */
  width: calc(50% - 20px);
  height: 2px;
  background: var(--line-strong);
  transition: background var(--base) var(--ease);
}
.steps__item::before { inset-inline-end: calc(50% + 20px); }
.steps__item::after  { inset-inline-start: calc(50% + 20px); }
/* لا خط قبل الأولى ولا بعد الأخيرة. */
.steps__item:first-child::before,
.steps__item:last-child::after { display: none; }
/* الخطوط المؤدّية للخطوات المكتملة/الحالية تتلوّن بلون الهوية. */
.steps__item.is-done::before,
.steps__item.is-done::after,
.steps__item.is-current::before { background: var(--teal); }

.steps__btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%;
  padding: 0 var(--s-2);
  border: 0; background: transparent;
  color: var(--ink-4);
  font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; text-align: center;
  transition: color var(--fast) var(--ease);
}
.steps__btn:hover { color: var(--ink); }

.steps__marker {
  position: relative; z-index: 1;      /* فوق الخط الواصل */
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: var(--r-full);
  border: 2px solid var(--line-strong);
  background: #fff;
  font-size: 13px; font-weight: 700; color: var(--ink-4);
  transition: all var(--fast) var(--ease);
}
.steps__label {
  display: block; line-height: 1.35;
  overflow-wrap: anywhere;
}

/* الخطوة الحالية */
.steps__btn[aria-current="step"] { color: var(--navy); font-weight: 600; }
.steps__btn[aria-current="step"] .steps__marker {
  background: var(--teal); border-color: var(--teal); color: #fff;
  box-shadow: 0 0 0 4px var(--teal-050);
}
/* الخطوات المكتملة: علامة صح بدل الرقم */
.steps__btn.is-done { color: var(--ink-2); }
.steps__btn.is-done .steps__marker {
  background: var(--teal); border-color: var(--teal); color: #fff;
}
.steps__btn.is-done .steps__marker::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px;
}
.steps__btn.is-done .steps__marker span { display: none; }

/* --- Progress --- */
.wizard__head { margin-bottom: var(--s-5); }
.wizard__meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-3); }
.wizard__count { color: var(--ink); font-weight: 600; font-size: 15px; }
.wizard__pct { color: var(--ink-4); font-size: 14px; }

.progress { height: 6px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; }
.progress__bar {
  height: 100%; width: 0;
  background: var(--grad);
  border-radius: inherit;
  transition: width 420ms var(--ease);
}

/* --- Sticky actions --- */
.wizard__actions {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  margin-top: var(--s-6);
  padding: var(--s-4) 0;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 32%);
}
.wizard__actions-right { display: flex; align-items: center; gap: var(--s-3); }

/* 8. CARDS & FORM CONTROLS
   ------------------------------------------------------------------------ */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--s-6);
  overflow: hidden;
  transition: box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.card + .card { margin-top: var(--s-5); }
.card:hover { box-shadow: var(--sh-2); border-color: var(--line-strong); }

/* A slanted brand rectangle sits quietly in the corner of every card. */
.card::after {
  content: "";
  position: absolute; top: -18px; inset-inline-end: -26px;
  width: 96px; height: 46px;
  background: var(--surface);
  transform: skewX(-20deg);
  pointer-events: none;
}

.card__head {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding-bottom: var(--s-5); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.card__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: var(--r-md);
  background: var(--navy-050);
  border: 1px solid var(--navy-100);
  color: var(--navy);
  font-size: 15px;
}
.card__title { font-size: 19px; }
.card__title-ar { display: block; font-size: 13px; font-weight: 400; color: var(--ink-4); margin-top: 1px; }
.card__desc { margin-top: 4px; font-size: 15px; color: var(--ink-3); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.field--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 6px; }

/* مبدّل اللغة: زران صغيران واضحان في الشريط العلوي، والحالة النشطة لا تعتمد
   على اللون وحده لأن الزر الآخر يبقى بإطار هادئ. */
.lang-switch {
  display: inline-flex; align-items: center; padding: 3px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.lang-switch__btn {
  min-width: 34px; padding: 5px 7px; border: 0; border-radius: calc(var(--r-md) - 3px);
  background: transparent; color: var(--ink-4); font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.lang-switch__btn[aria-pressed="true"] { background: var(--navy); color: #fff; }
.lang-switch__btn:focus-visible { outline: 3px solid var(--teal-100); outline-offset: 2px; }

/* معظم التنسيق يستخدم خصائص منطقية RTL/LTR، لكن حقول النص الطويل تستفيد من
   محاذاة الاتجاه الفعلي حين يختار الموظف الإنجليزية. */
html[lang="en"] .textarea,
html[lang="en"] .input,
html[lang="en"] .card__desc,
html[lang="en"] .criterion__head { text-align: start; }

/* ══ شاشة خيار المدير (تقييم نفسي / موظفيّ) ══════════════════════════
   بطاقتان متجاورتان؛ عند المرور تتدرّج البطاقة كاملةً بألوان الهوية
   ويقلب النص للأبيض. */
.mchoice__greet {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px 16px; margin-bottom: var(--s-5);
  border-radius: var(--r-full);
  background: var(--teal-050); border: 1px solid var(--teal-100);
  color: var(--teal-600); font-size: 13px; font-weight: 500;
}
.mchoice__title { font-size: 23px; font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.mchoice__sub { font-size: 14.5px; color: var(--ink-3); margin: 0 0 var(--s-7); }
.mchoice__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5);
}
.mcard {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  text-align: center;
  padding: var(--s-7) var(--s-5);
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  background: #fff; cursor: pointer; font-family: inherit;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease),
              background var(--base) var(--ease), border-color var(--base) var(--ease);
}
.mcard__icon {
  width: 62px; height: 62px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-050); color: var(--navy);
  transition: background var(--base) var(--ease), color var(--base) var(--ease);
}
.mcard__icon i { font-size: 31px; }
.mcard__icon--teal { background: var(--teal-050); color: var(--teal-600); }
.mcard__title { display: block; font-size: 17px; font-weight: 600; color: var(--navy); transition: color var(--base) var(--ease); }
.mcard__desc { display: block; font-size: 13px; color: var(--ink-3); margin-top: 5px; transition: color var(--base) var(--ease); }

/* شاشة إتمام المدير: تحلّ محلّ البطاقتين حين لا يبقى فعل. */
.mchoice__done { display: grid; justify-items: center; gap: var(--s-4); }
.mchoice__done-mark {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--r-full);
  background: var(--teal-050); color: var(--teal-600);
  font-size: 34px;
}
.mchoice__done .mchoice__sub { margin: 0; max-width: 420px; }

/* المرور: تدرّج الهوية كامل + نص أبيض + رفعة */
.mcard:hover {
  background: var(--grad);
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11, 30, 65, .22);
}
.mcard:hover .mcard__title,
.mcard:hover .mcard__desc { color: #fff; }
.mcard:hover .mcard__icon {
  background: rgba(255, 255, 255, .22); color: #fff;
}
/* بطاقة معطّلة (مثلاً «تقييم نفسي» بعد إرساله): باهتة، بلا تأثير تحويم. */
.mcard--disabled {
  opacity: .5; cursor: not-allowed;
}
.mcard--disabled:hover {
  background: #fff; border-color: var(--line); transform: none; box-shadow: none;
}
.mcard--disabled:hover .mcard__title { color: var(--navy); }
.mcard--disabled:hover .mcard__desc { color: var(--ink-3); }
.mcard--disabled:hover .mcard__icon { background: var(--navy-050); color: var(--navy); }
@media (max-width: 560px) {
  .mchoice__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mcard, .mcard__icon, .mcard__title, .mcard__desc { transition: none; }
  .mcard:hover { transform: none; }
}

.label { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.label .req { color: var(--teal-600); font-weight: 600; }
/* شارة الحقل الاختياري: أخفت من التسمية عمدًا، فهي معلومة ثانوية لا تنبيه. */
.label .opt { color: var(--ink-4); font-weight: 400; font-size: 12px; }

/* --- Required-field errors -------------------------------------------------
   Every step is mandatory except ملاحظات إضافية. A missing answer is flagged
   on the field itself, not just announced in a toast the user has to remember. */
.field.is-error .input,
.field.is-error .select,
.field.is-error .textarea,
.field.is-error .choice__box {
  border-color: var(--danger);
  background: var(--danger-050);
}
.field.is-error .label { color: var(--danger); }

/* تجاوز تلوين التعبئة التلقائية للمتصفح (مهم لحقل كلمة المرور تحديدًا):
   بعض المتصفحات (خصوصًا Safari) تفرض خلفية زرقاء فاتحة خاصة بها على الحقل
   بمجرد التركيز عليه أو تعبئته تلقائيًا، فتُخفي خلفيتنا (var(--surface) أو
   var(--danger-050) عند الخطأ) ويبدو حقل كلمة المرور مختلفًا بصريًا عن حقل
   الرقم الوظيفي رغم أنهما بنفس التنسيق في الكود. الحل الوحيد الموثوق عبر
   المتصفحات هو فرض الخلفية بظل داخلي كبير (box-shadow inset) بدل background،
   لأن التعبئة التلقائية تتجاهل background لكنها لا تُلغي box-shadow. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:autofill,
.input:autofill:hover,
.input:autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  box-shadow: 0 0 0 1000px var(--surface) inset;
  transition: background-color 5000s ease-in-out 0s;
}
.field.is-error .input:-webkit-autofill,
.field.is-error .input:-webkit-autofill:hover,
.field.is-error .input:-webkit-autofill:focus,
.field.is-error .input:autofill,
.field.is-error .input:autofill:hover,
.field.is-error .input:autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--danger-050) inset;
  box-shadow: 0 0 0 1000px var(--danger-050) inset;
}

.question.is-error,
.criterion.is-error {
  border-inline-start: 3px solid var(--danger);
  background: var(--danger-050);
  padding-inline-start: var(--s-4);
  border-radius: var(--r-sm);
}
.question.is-error .scale__box,
.criterion.is-error .scale__box { border-color: #E8B4AE; }
.hint { font-size: 13px; color: var(--ink-4); }

/* --- حالة الرقم الوظيفي أسفل الحقل ---------------------------------------- */
/* رسالة الخطأ التي يكتشفها زر «التالي» (رقم غير موجود، فارغ، تعذّر الاتصال). */
.lookup__status { font-size: 13px; margin-top: 2px; }
.lookup__status--error   { color: var(--danger); }
.counter { align-self: flex-end; font-size: 11.5px; color: var(--ink-4); }

.input, .select, .textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: 15.5px;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-100);
}
.textarea { resize: vertical; min-height: 116px; line-height: 1.6; }
.textarea--bullets { min-height: 150px; line-height: 1.9; }

/* بطاقات الإنجازات المنظمة: كل إنجاز وحدة مستقلة بدل فقرة حرة، فيسهل على
   الموظف تعبئة البيانات وعلى الموارد البشرية قراءتها ومقارنتها. */
.achievements { display: grid; gap: var(--s-4); }
.achievements__list { display: grid; gap: var(--s-4); }
.achievements__add { justify-self: start; }
.achievement-card {
  padding: var(--s-5); border: 1px solid var(--line); border-inline-start: 3px solid var(--teal);
  border-radius: var(--r-md); background: var(--surface); transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.achievement-card.is-error { border-color: var(--danger); background: var(--danger-050); }
.achievement-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); color: var(--navy); font-weight: 700; }
.achievement-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.achievement-card__field { display: flex; flex-direction: column; gap: 6px; color: var(--ink); font-size: 14px; font-weight: 500; }
.achievement-card__field--full { grid-column: 1 / -1; }
.achievement-card__upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.achievement-card__upload input[type="file"] { max-width: 100%; color: var(--ink-3); font: inherit; font-size: 13px; }
.achievement-card__proof { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-700); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 620px) { .achievement-card__grid { grid-template-columns: 1fr; } .achievement-card__field--full { grid-column: auto; } }

.detail__achievements { display: grid; gap: var(--s-3); }
.detail__achievements__item { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-inline-start: 3px solid var(--teal); border-radius: var(--r-sm); background: var(--surface); }
.detail__achievements__item h4 { margin: 0; color: var(--ink); font-size: 14px; }
.detail__achievements__item p { margin: 5px 0 0; color: var(--ink-3); white-space: pre-wrap; }
.detail__achievements__links { margin-top: 7px; font-size: 12px; }
.detail__achievements__links a,
.detail__achievements__preview { color: var(--teal-700); text-decoration: underline; text-underline-offset: 2px; }
.detail__achievements__preview { border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; }
.detail__achievements__preview:hover { color: var(--teal-900); }

/* اختيار نعم/لا: أزرار راديو حقيقية مخفية بصريًا، فيبقى الخيار متاحًا
   للوحة المفاتيح وقارئات الشاشة مع واجهة مرتّبة وواضحة. */
.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.choice__opt { position: relative; cursor: pointer; }
.choice__input { position: absolute; opacity: 0; pointer-events: none; }
.choice__box {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 500;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.choice__box i { opacity: 0; font-size: 12px; }
.choice__input:checked + .choice__box {
  border-color: var(--teal-600); background: var(--teal-050); color: var(--teal-700);
  box-shadow: 0 0 0 3px var(--teal-100);
}
.choice__input:checked + .choice__box i { opacity: 1; }
.choice__input:focus-visible + .choice__box { outline: 3px solid var(--navy-100); outline-offset: 2px; }
@media (max-width: 480px) { .choice { grid-template-columns: 1fr; } }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2346536B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-inline-end: 38px;
  cursor: pointer;
}
[dir="rtl"] .select { background-position: left 14px center; }

/* 9. RATING SCALE
   ------------------------------------------------------------------------ */
.question { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.question:first-of-type { padding-top: 0; }
.question:last-of-type { border-bottom: 0; padding-bottom: 0; }

.question__head { display: flex; gap: var(--s-3); margin-bottom: var(--s-4); }
.question__num {
  flex: 0 0 auto; min-width: 26px; height: 26px;
  display: grid; place-items: center; padding-inline: 6px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-3); font-size: 11.5px; font-weight: 600;
}
.question__text { color: var(--ink); font-weight: 500; font-size: 16px; }
.question__hint { margin-top: 3px; font-size: 13.5px; color: var(--ink-4); }

.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); }
.scale__opt { position: relative; }
.scale__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.scale__box {
  display: grid; place-items: center; gap: 1px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-3);
  font-weight: 600; font-size: 17px;
  transition: all var(--fast) var(--ease);
  pointer-events: none;
}
.scale__box small { font-size: 10.5px; font-weight: 500; color: var(--ink-4); text-transform: uppercase; letter-spacing: .02em; }

.scale__input:hover + .scale__box {
  border-color: var(--teal);
  background: var(--teal-050);
  color: var(--teal-600);
  transform: translateY(-1px);
}
.scale__input:focus-visible + .scale__box { outline: 2px solid var(--teal); outline-offset: 2px; }
.scale__input:checked + .scale__box {
  background: var(--teal); border-color: var(--teal); color: #fff;
  box-shadow: var(--sh-teal);
}
.scale__input:checked + .scale__box small { color: rgba(255, 255, 255, .82); }

.scale__legend { display: flex; justify-content: space-between; margin-top: var(--s-2); font-size: 12.5px; color: var(--ink-4); }

/* الكفاءة: السؤال في الأعلى، ومقياس الدرجات تحته بعرض كامل — أوضح للقراءة
   وأسهل للنقر من وضعه في عمود ضيّق بجانب النص. */
.criterion {
  display: grid; grid-template-columns: 1fr;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.criterion:first-child { padding-top: 0; }
.criterion:last-child { border-bottom: 0; padding-bottom: 0; }
.criterion__head { display: flex; gap: var(--s-3); align-items: flex-start; }
.criterion__num {
  flex: 0 0 auto;
  min-width: 28px; height: 28px;
  display: grid; place-items: center;
  padding-inline: 6px;
  border-radius: var(--r-sm);
  background: var(--navy-050);
  border: 1px solid var(--navy-100);
  color: var(--navy);
  font-size: 12.5px; font-weight: 600;
}
.criterion__name { color: var(--ink); font-weight: 500; font-size: 16px; }
.criterion__desc { margin-top: 3px; font-size: 14.5px; line-height: 1.75; color: var(--ink-4); }

/* 10. MODAL & TOAST
   ------------------------------------------------------------------------ */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s-5); }
.modal__scrim {
  position: absolute; inset: 0;
  background: rgba(11, 30, 65, .55);
  backdrop-filter: blur(3px);
  animation: fadeIn var(--base) var(--ease) both;
}
.modal__dialog {
  position: relative; overflow: hidden;
  width: min(480px, 100%);
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: var(--s-8) var(--s-7);
  text-align: center;
  animation: popIn var(--base) var(--ease) both;
}
.modal__dialog::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--grad);
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.modal__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin: 0 auto var(--s-4);
  border-radius: var(--r-md);
  background: var(--navy-050); border: 1px solid var(--navy-100);
  color: var(--navy); font-size: 20px;
}
/* نسخة إعلامية بلون الهوية الفيروزي، لنافذة "سبق التقييم". */
.modal__icon--info {
  background: var(--teal-050); border-color: var(--teal-100); color: var(--teal-600);
}
/* نسخة خطر بالأحمر، لنافذة تأكيد الحذف. */
.modal__icon--danger {
  background: var(--danger-050); border-color: #F3C9C4; color: var(--danger);
}
.modal__title { font-size: 20px; }
.modal__desc { margin-top: var(--s-2); font-size: 15px; color: var(--ink-3); }

/* تنفّس إضافي لنافذة "سبق التقييم": الوصف أوسع سطرًا، ومسافة أكبر قبل الزر. */
#alreadyModal .modal__icon { margin-bottom: var(--s-5); }
#alreadyModal .modal__desc { margin-top: var(--s-3); line-height: 1.85; max-width: 42ch; margin-inline: auto; }
#alreadyModal .modal__actions { margin-top: var(--s-7); }

.modal__facts {
  margin: var(--s-5) 0;
  padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  text-align: start;
}
.modal__facts li { display: flex; justify-content: space-between; gap: var(--s-4); padding: 6px 0; font-size: 14.5px; }
.modal__facts li span:first-child { color: var(--ink-4); }
.modal__facts li span:last-child { color: var(--ink); font-weight: 500; }

.modal__actions { display: flex; gap: var(--s-3); }
.modal__actions .btn { flex: 1; }
.modal__actions.modal__actions--stack { flex-direction: column; margin-top: var(--s-5); }
.modal__actions--stack .btn { width: 100%; justify-content: center; }
.modal__cancel { width: 100%; margin-top: var(--s-3); }
.modal__dialog--preview { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.attachment-preview__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-inline-end: var(--s-6); }
.attachment-preview__close { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.attachment-preview__close:hover { color: var(--ink); border-color: var(--teal-400); }
.attachment-preview__body { min-height: 280px; max-height: min(68vh, 680px); overflow: auto; margin-top: var(--s-4); border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.attachment-preview__body img { display: block; width: 100%; height: auto; max-height: 68vh; object-fit: contain; }
.attachment-preview__body iframe { display: block; width: 100%; height: min(68vh, 680px); border: 0; }

/* تذكرة تقنية سريعة: مقبض جانبي بسيط ولوحة صغيرة لا تقطع المستخدم عن عمله. */
.quick-ticket-launch {
  position: fixed; z-index: 70; inset-inline-end: 0; top: 30%;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; white-space: nowrap;
  border: 0; border-radius: 10px 0 0 10px; background: var(--navy); color: #fff;
  box-shadow: var(--sh-2); font: 700 12px/1.3 var(--font); cursor: pointer;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
.quick-ticket-launch:hover { background: var(--navy-700); transform: translateX(-3px); }
html[dir="ltr"] .quick-ticket-launch { border-radius: 0 10px 10px 0; }
html[dir="ltr"] .quick-ticket-launch:hover { transform: translateX(3px); }
.quick-ticket-launch i { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; }

.quick-ticket {
  position: fixed; z-index: 80; top: 50%; inset-inline-end: 20px; width: min(390px, calc(100vw - 32px));
  padding: 20px; border: 1px solid var(--line); border-inline-start: 4px solid var(--teal);
  border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-3); transform: translateY(-50%);
}
.quick-ticket[hidden] { display: none; }
.quick-ticket__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.quick-ticket__eyebrow { margin: 0 0 2px; color: var(--teal-600); font-size: 12px; font-weight: 700; }
.quick-ticket__head h2 { margin: 0; color: var(--ink); font-size: 20px; line-height: 1.3; }
.quick-ticket__close { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-3); cursor: pointer; }
.quick-ticket__close:hover { border-color: var(--teal); color: var(--teal-600); }
.quick-ticket__lead { margin: 8px 0 16px; color: var(--ink-3); font-size: 13px; line-height: 1.65; }
.quick-ticket__label { display: block; margin: 13px 0 6px; color: var(--ink); font-size: 13px; font-weight: 700; }
.quick-ticket .select, .quick-ticket .textarea { width: 100%; }
.quick-ticket__textarea { min-height: 108px; resize: vertical; }
.quick-ticket__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--ink-4); font-size: 11px; line-height: 1.5; }
.quick-ticket__meta span:last-child { flex: 0 0 auto; direction: ltr; }
.quick-ticket__status { margin: 12px 0 0; color: var(--danger); font-size: 12px; font-weight: 600; }
.quick-ticket__status.is-success { color: #087e53; }
.quick-ticket__submit { width: 100%; justify-content: center; margin-top: 16px; }
.quick-ticket__submit:disabled { opacity: .65; cursor: not-allowed; }

/* Employee Portal account drawer and IT Support pages. */
.profile-trigger { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); font: 700 13px var(--font); cursor: pointer; padding: 5px; }
.profile-trigger__avatar, .portal-profile__avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy-050); color: var(--navy); font-weight: 700; }
.profile-trigger:hover .profile-trigger__avatar { background: var(--teal-100); color: var(--teal-600); }
.portal-drawer { position: fixed; inset: 0; z-index: 90; }
.portal-drawer[hidden] { display: none; }
.portal-drawer__scrim { position: absolute; inset: 0; background: rgba(11,30,65,.36); }
.portal-drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(350px, 90vw); padding: 22px; background: #fff; box-shadow: var(--sh-3); animation: drawerIn var(--base) var(--ease) both; }
@keyframes drawerIn { from { transform: translateX(110%); } to { transform: translateX(0); } }
html[dir="ltr"] .portal-drawer__panel { inset-inline-end: auto; inset-inline-start: 0; }
html[dir="ltr"] .portal-drawer__panel { animation-name: drawerInLtr; }
@keyframes drawerInLtr { from { transform: translateX(-110%); } to { transform: translateX(0); } }
.portal-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.portal-profile { display: flex; align-items: center; gap: 10px; min-width: 0; }
.portal-profile strong, .portal-profile span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-profile strong { color: var(--ink); font-size: 15px; }.portal-profile span { color: var(--ink-4); font-size: 12px; }
.portal-drawer__close { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-3); cursor: pointer; }
.portal-drawer__nav { display: grid; gap: 6px; padding: 18px 0; }.portal-drawer__nav a, .portal-drawer__logout { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); text-decoration: none; font: 600 14px var(--font); text-align: start; cursor: pointer; }
.portal-drawer__nav a:hover { background: var(--teal-050); color: var(--teal-600); }.portal-drawer__logout { margin-top: auto; color: var(--danger); }.portal-drawer__logout:hover { background: var(--danger-050); }
.portal-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 4px; max-width: 550px; }.portal-service { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }.portal-service:hover { border-color: var(--teal); box-shadow: var(--sh-1); }.portal-service__icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--teal-050); color: var(--teal-600); }.portal-service strong,.portal-service span { display:block; }.portal-service strong { font-size: 13px; }.portal-service span { margin-top: 2px; color: var(--ink-4); font-size: 11px; }
.hero__eyebrow { margin-bottom: 7px; color: var(--teal-600); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }

.page-head { margin: 8px 0 28px; }.page-head h1 { margin: 0; color: var(--ink); font-size: clamp(25px, 3vw, 34px); }.page-head p { margin: 3px 0 0; color: var(--ink-4); }.page-head__eyebrow { color: var(--teal-600) !important; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.support-page, .ticket-detail { padding-top: 36px; padding-bottom: 60px; }.support-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 22px; align-items: start; }.support-form-card, .ticket-history, .ticket-detail__card { padding: 24px; }
.support-form-card__head, .ticket-history__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.support-form-card__head { justify-content: flex-start; }.support-form-card h2, .ticket-history h2 { margin: 0; color: var(--ink); font-size: 19px; }.support-form-card p, .ticket-history p { margin: 2px 0 0; color: var(--ink-4); font-size: 13px; }.support-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: var(--teal-600); background: var(--teal-050); }
.support-form { display: grid; gap: 14px; padding-top: 18px; }.support-form label { display: grid; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 700; }.support-form small, .support-form__count { color: var(--ink-4); font-size: 11px; font-weight: 400; }.support-form__count { text-align: end; margin-top: -3px; }.support-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.support-form__identity { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }.support-form__identity span, .support-form__identity strong { display: block; }.support-form__identity span { color: var(--ink-4); font-size: 11px; }.support-form__identity strong { color: var(--ink); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.support-form__file { padding: 8px; }.support-form__status { margin: 0; color: var(--danger); font-size: 12px; }.support-form__status.is-success { color: #087e53; }
.ticket-list { display: grid; gap: 10px; padding-top: 16px; }.ticket-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.ticket-card:hover { border-color: var(--teal); box-shadow: var(--sh-1); }.ticket-card__main { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: start; min-width: 0; padding: 5px; border: 0; background: transparent; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }.ticket-card__main:hover h3 { color: var(--teal-600); }.ticket-card__id { color: var(--teal-600); font-size: 12px; font-weight: 700; }.ticket-card h3 { margin: 2px 0; color: var(--ink); font-size: 14px; }.ticket-card p { margin: 0; font-size: 12px; }.ticket-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; color: var(--ink-4); font-size: 11px; }.ticket-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 700; white-space: nowrap; }.ticket-badge--open { color: #075ca8; background: #eaf4ff; }.ticket-badge--in_progress { color: #8a6400; background: #fff6d9; }.ticket-badge--resolved { color: #087e53; background: #e6f7ee; }.ticket-badge--rejected { color: #ae3529; background: #fff0ef; }.ticket-badge--urgent { color: #a41f1f; background: #fde9e7; }.ticket-badge--high { color: #a75614; background: #fff0df; }.ticket-badge--medium { color: #705d00; background: #fff8da; }.ticket-badge--low { color: #247147; background: #e7f6ec; }.ticket-badge--type { color: var(--teal-600); background: var(--teal-050); }.ticket-card__actions { display: flex; gap: 5px; align-items: center; padding-inline-start: 8px; border-inline-start: 1px solid var(--line); }.ticket-card__action { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-3); cursor: pointer; }.ticket-card__action:hover { border-color: var(--teal); color: var(--teal-600); background: var(--teal-050); }.ticket-card__action--resolve:hover { border-color: #35b27c; color: #087e53; background: #e6f7ee; }.ticket-card__action--reject:hover { border-color: #e2736a; color: #ae3529; background: #fff0ef; }.ticket-card__reject { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 9px 5px 2px; border-top: 1px dashed var(--line); }.ticket-card__reject[hidden] { display: none; }.ticket-card__reject .input { min-width: 0; flex: 1; }.ticket-card__reject button { flex: 0 0 auto; }
.ticket-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }.ticket-summary__item { padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.ticket-summary__item span { display: block; color: var(--ink-4); font-size: 12px; }.ticket-summary__item strong { display: block; margin-top: 3px; color: var(--ink); font-size: 24px; }.it-filters { margin-bottom: 8px; }.ticket-list--admin { padding-top: 10px; }.ticket-list__empty { padding: 35px 16px; color: var(--ink-4); text-align: center; }
.ticket-detail__card { min-height: 280px; }.ticket-detail__head { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.ticket-detail__head h1 { margin: 3px 0; color: var(--ink); font-size: 24px; }.ticket-detail__meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--ink-4); font-size: 12px; }.ticket-detail__section { padding-top: 18px; }.ticket-detail__section h3 { margin: 0 0 7px; color: var(--ink); font-size: 15px; }.ticket-detail__section p { margin: 0; white-space: pre-wrap; }.ticket-detail__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.ticket-detail__grid div { padding: 10px; border-radius: 8px; background: var(--surface); }.ticket-detail__grid span, .ticket-detail__grid strong { display: block; }.ticket-detail__grid span { color: var(--ink-4); font-size: 11px; }.ticket-detail__grid strong { color: var(--ink); font-size: 13px; }.ticket-detail__attachment { color: var(--teal-600); text-decoration: underline; }.ticket-manage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }.ticket-manage label { display: grid; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 700; }.ticket-manage__full { grid-column: 1 / -1; }.ticket-manage .btn { justify-self: start; }.ticket-manage__status { grid-column: 1 / -1; margin: 0; color: var(--danger); font-size: 12px; }
.it-mini-stats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }.it-mini-stat { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }.it-mini-stat__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--surface); color: var(--ink-3); }.it-mini-stat small,.it-mini-stat strong { display: block; }.it-mini-stat small { color: var(--ink-4); font-size: 11px; white-space: nowrap; }.it-mini-stat strong { margin-top: 1px; color: var(--ink); font-size: 21px; line-height: 1.1; }.it-mini-stat.is-resolved .it-mini-stat__icon { background: #e6f7ee; color: #087e53; }.it-mini-stat.is-rejected .it-mini-stat__icon { background: #fff0ef; color: #ae3529; }.it-mini-stat.is-progress .it-mini-stat__icon { background: #fff6d9; color: #8a6400; }.it-mini-stat.is-urgent .it-mini-stat__icon { background: #fde9e7; color: #a41f1f; }.it-mini-stat.is-full .it-mini-stat__icon { background: var(--teal-050); color: var(--teal-600); }.it-dashboard__list { display: flex; flex-direction: column; gap: 6px; }.itrow__thead, .itrow { display: grid; grid-template-columns: 1.45fr 1.45fr .75fr .7fr .75fr 1.1fr 142px; gap: var(--s-3); align-items: center; }.itrow__thead { padding: 0 var(--s-4) var(--s-2); color: var(--ink-4); font-size: 12px; font-weight: 600; }.itrow { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; transition: border-color var(--fast) var(--ease), box-shadow var(--base) var(--ease), transform var(--fast) var(--ease); }.itrow:hover { border-color: var(--teal); box-shadow: var(--sh-2); transform: translateY(-1px); }.itrow__who { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }.itrow__department, .itrow__date, .itrow__category, .itrow__closedby { color: var(--ink-3); font-size: 12px; }.itrow__status { display: grid; gap: 4px; }.itrow__subject { display: grid; gap: 5px; min-width: 0; }.itrow__subject strong { overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.itrow__actions { display: flex; gap: 5px; justify-content: flex-end; }.iconbtn--progress:hover { border-color: #d3a718; color: #8a6400; background: #fff6d9; }.iconbtn--resolve:hover { border-color: #35b27c; color: #087e53; background: #e6f7ee; }.iconbtn--reject:hover { border-color: #e2736a; color: #ae3529; background: #fff0ef; }.itrow__reject { grid-column: 1 / -1; display: flex; gap: 8px; padding-top: var(--s-2); border-top: 1px dashed var(--line); }.itrow__reject[hidden] { display: none; }.itrow__reject .input { flex: 1 1 auto; min-width: 0; }.it-dashboard__notice { margin-bottom: var(--s-4); }
@media (max-width: 640px) {
  .quick-ticket-launch { top: auto; bottom: 18px; inset-inline-end: 12px; border-radius: var(--r-full); }
  .quick-ticket-launch span { display: none; }
  .quick-ticket-launch i { width: 28px; height: 28px; }
  .quick-ticket { top: auto; bottom: 14px; inset-inline-end: 16px; transform: none; }
  .support-layout { grid-template-columns: 1fr; }.support-form__identity { grid-template-columns: 1fr; }.support-form__grid, .ticket-manage { grid-template-columns: 1fr; }.ticket-summary, .it-mini-stats { grid-template-columns: repeat(2, 1fr); }.ticket-detail__grid { grid-template-columns: 1fr; }.profile-trigger__name, .profile-trigger > i { display: none; }
  .portal-services { grid-template-columns: 1fr; }
  .ticket-card__main { grid-template-columns: 1fr; }.ticket-card__actions { padding-inline-start: 5px; }.ticket-card__reject { flex-wrap: wrap; }
}
/* زر واحد وسط النافذة: لا يُمدّ بعرضها كاملًا بل يأخذ حجمه الطبيعي. */
.modal__actions--center { justify-content: center; }
.modal__actions--center .btn { flex: 0 1 auto; min-width: 200px; }

.toast {
  position: fixed; left: 50%; bottom: 120px; z-index: 95;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-2);
  padding: 12px 20px;
  border-radius: var(--r-full);
  /* زجاج ضبابي واضح بذاته: طبقتان — لون شبه شفاف + لمعان علوي خفيف — فيبدو
     زجاجيًّا حتى فوق خلفية بلون واحد (كالتذييل)، لا يعتمد على تباين ما خلفه. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 42%),
    rgba(20, 42, 78, .62);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-size: 13.5px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(11, 30, 65, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
  animation: toastIn 220ms var(--ease) both;
}
.toast i { color: var(--teal); }
/* دخول خفيف: انزلاق قصير من الأسفل مع تلاشٍ — مثل إشعارات الجوال. */
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
/* خروج ناعم بنفس الروح: يتلاشى وينزلق قليلًا للأسفل. */
.toast.is-leaving { animation: toastOut 240ms var(--ease) both; }
@keyframes toastOut {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-leaving { animation: none; }
}

/* 11. SUCCESS VIEW
   ------------------------------------------------------------------------ */
.success { padding-block: var(--s-10); display: grid; place-items: center; }
.card--success {
  width: min(640px, 100%);
  padding: var(--s-8);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  text-align: center;
}
.card--success::after { display: none; }
.card--success::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--grad);
}
.success__mark {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin: 0 auto var(--s-5);
  border-radius: var(--r-full);
  background: var(--teal-100); color: var(--teal-600);
  font-size: 24px;
  animation: markIn 460ms var(--ease) both;
}
@keyframes markIn {
  0%   { opacity: 0; transform: scale(.6); }
  60%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
.success__title { font-size: 26px; }
.success__lead { margin-top: var(--s-3); color: var(--ink-3); font-size: 16px; }

/* نتيجة التقييم في شاشة الشكر: الرقم هو البطل هنا، فيأخذ حجمًا وحلقةً
   لونية تفصله عمّا حوله. اللون يتبع المرتبة نفسها المستخدمة في اللوحة. */
/* مربّع لا دائرة: يطابق شكل بطاقة النتيجة في صفحة التفاصيل، فيبدو العنصران
   لغةً واحدة لا شكلين مختلفين للمعلومة نفسها. والحدّ رفيع (1px) لا حلقة
   سميكة — الحلقة كانت تخدم الدائرة، أما الصندوق فيكفيه إطار كبقية البطاقات. */
.success__score {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 168px; margin: var(--s-7) auto 0;
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--teal-100);
  background: var(--teal-050);
}
.success__score-num { font-size: 40px; font-weight: 700; line-height: 1; color: var(--teal-600); font-variant-numeric: tabular-nums; }
.success__score-num small { font-size: 18px; font-weight: 600; margin-inline-start: 2px; }
.success__score-tier { font-size: 14.5px; font-weight: 700; color: var(--teal-600); margin-top: 3px; }
/* التسمية أعلى المربّع: مسافة تحتها تفصلها عن الرقم الكبير. */
.success__score-cap { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-bottom: 6px; }

.success__score--poor      { border-color: var(--sc-poor-bd);  background: var(--sc-poor-bg); }
.success__score--poor      .success__score-num,
.success__score--poor      .success__score-tier { color: var(--sc-poor-fg); }
.success__score--fair      { border-color: var(--sc-fair-bd);  background: var(--sc-fair-bg); }
.success__score--fair      .success__score-num,
.success__score--fair      .success__score-tier { color: var(--sc-fair-fg); }
.success__score--good      { border-color: var(--sc-good-bd);  background: var(--sc-good-bg); }
.success__score--good      .success__score-num,
.success__score--good      .success__score-tier { color: var(--sc-good-fg); }
.success__score--vgood     { border-color: var(--sc-vgood-bd); background: var(--sc-vgood-bg); }
.success__score--vgood     .success__score-num,
.success__score--vgood     .success__score-tier { color: var(--sc-vgood-fg); }
.success__score--excellent { border-color: var(--sc-exc-bd);   background: var(--sc-exc-bg); }
.success__score--excellent .success__score-num,
.success__score--excellent .success__score-tier { color: var(--sc-exc-fg); }

.success__receipt {
  /* الأعمدة تتبع عدد العناصر الفعلي. تثبيتها على رقم يترك خانة فارغة
     تظهر كمستطيل رمادي عندما تكون العناصر أقل. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px;
  margin: var(--s-7) 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  text-align: start;
}
.success__receipt > div { background: #fff; padding: var(--s-4); }
.success__receipt dt { font-size: 12px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .07em; }
.success__receipt dd { margin: 4px 0 0; color: var(--ink); font-weight: 500; font-size: 15px; }

.success__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-3); }

/* 12. RESPONSIVE
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .hero { padding-block: var(--s-7); }

  .evaluate { grid-template-columns: 1fr; gap: var(--s-5); }
  /* على الشاشات الضيقة: نصغّر المسار ونُخفي الخط الواصل لتوفير المساحة. */
  .steps__marker { width: 28px; height: 28px; flex: 0 0 28px; font-size: 12px; }
  .steps__btn { font-size: 12px; gap: 6px; padding: 0 4px; }
  .steps__item::before, .steps__item::after { top: 13px; }

  .criterion { grid-template-columns: 1fr; gap: var(--s-3); }

}

@media (max-width: 720px) {
  :root { --topbar-h: 76px; }
  .container { padding-inline: var(--s-4); }

  .hero__steps { grid-template-columns: 1fr; }
  .hero__cta { align-items: stretch; }
  .hero__buttons { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .hero__note { justify-content: center; }

  .grid { grid-template-columns: 1fr; gap: var(--s-4); }

  .card { padding: var(--s-5); }

  .scale { gap: 6px; }
  .scale__box { height: 46px; font-size: 14px; }
  .scale__box small { display: none; }

  /* شريط الأزرار: يبقى سطرًا واحدًا على الجوال.
     كان يتحوّل لعمود بأزرار بعرض الشاشة، وبما أن الشريط لاصق (sticky) كان
     يلتهم ٢٠١px — نحو ربع شاشة الهاتف — ويحجب الكفاءات التي يُفترض أن
     يقيّمها المستخدم. سطر واحد يعيد تلك المساحة للمحتوى. */
  .wizard__actions { flex-direction: row; align-items: center; gap: var(--s-2); padding-bottom: var(--s-4); }
  .wizard__actions-right { flex-direction: row; align-items: center; gap: var(--s-2); flex: 1 1 auto; justify-content: flex-end; }
  .wizard__actions .btn { width: auto; padding-inline: 14px; }
  /* الزر الرئيسي (التالي/إرسال) يملأ ما تبقّى: هو الفعل المقصود، ومساحة
     اللمس الأكبر تخصّه. */
  .wizard__actions-right .btn--primary { flex: 1 1 auto; justify-content: center; }
  /* «مسح النموذج» أيقونةً فقط: أقلّ الأفعال استعمالًا وأطولها نصًّا، وإخفاء
     نصّه وحده يضمن اتساع السطر حتى على شاشة ٣٢٠px. اسمه محفوظ في
     aria-label بـindex.php فلا يفقده قارئ الشاشة. */
  #resetBtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* مساحة لمس لا تقلّ عن ٤٤px: الزر بلا نصّ يتقلّص إلى عرض أيقونته (٢٦px)
     وهو أصغر من أن يُصاب بالإبهام بثقة. */
  #resetBtn {
    padding-inline: 12px; min-width: 44px; justify-content: center;
    /* stretch يجعل ارتفاعه مساويًا لأطول زرّ في الصف: إخفاء النصّ أخرجه من
       التدفّق فانهار ارتفاع الزرّ إلى ٢٤px (ارتفاع الأيقونة وحدها). */
    align-self: stretch;
  }

  .success__receipt { grid-auto-flow: row; }
  .success__actions .btn { width: 100%; }
  .modal__actions { flex-direction: column-reverse; }

  .brand__logo { height: 46px; }

  .footer__inner { flex-direction: column; gap: var(--s-3); text-align: center; }
  .footer__links { flex-wrap: wrap; justify-content: center; }
}

/* 13. RTL, MOTION, PRINT
   ------------------------------------------------------------------------ */
/* Arabic runs right-to-left. Logical properties handle most of it; these are
   the few directional flourishes that need mirroring. */
[dir="rtl"] .hero__mark,
[dir="rtl"] .card::after { transform: skewX(20deg); }

[dir="rtl"] .btn i.fa-arrow-right { transform: scaleX(-1); }
[dir="rtl"] .btn i.fa-arrow-left  { transform: scaleX(-1); }
[dir="rtl"] .btn--primary:hover i.fa-arrow-right { transform: scaleX(-1) translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}



/* ==========================================================================
   شاشة تسجيل الدخول (بوابة واجهة)
   ========================================================================== */
/* ══ خلفية بطاقة الدخول ═══════════════════════════════════════════════════
   صورة مقرّ وادي الدمام تملأ الشاشة خلف بطاقة «الرقم الوظيفي + كلمة المرور»،
   وفوقها تدرّج بألوان الهوية ليبقى النص والبطاقة واضحين تمامًا.

   نستهدف القسم كاملًا (لا الحاوية) ليمتدّ اللون من الحافة للحافة، ونستدلّ
   على وجود البطاقة بـ:has(.is-login) — التي يضعها renderStep على خطوة الرقم
   الوظيفي وحدها. أي: شاشات اختيار نوع التقييم واختيار الموظف وخطوات الأسئلة
   تبقى بيضاء كما هي، فالخلفية الداكنة تحت نصوص طويلة تتعب القراءة.
   (هذه الأنماط كانت لشاشة الدخول المنفصلة قبل توحيد الدخول؛ أُعيد توجيهها.) */
#view-evaluate:has(.evaluate.is-login) {
  position: relative;
  display: flex; flex-direction: column;
  flex: 1 0 auto;
  background-image: url("../Assets/Images/login-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#view-evaluate:has(.evaluate.is-login)::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg,
      rgba(11, 30, 65, .92) 0%,
      rgba(27, 95, 160, .86) 45%,
      rgba(0, 155, 160, .82) 75%,
      rgba(53, 178, 124, .80) 100%);
  pointer-events: none;
}
/* الحاوية فوق الطبقة اللونية، وإلا غطّتها. */
#view-evaluate:has(.evaluate.is-login) > .container { position: relative; z-index: 1; }

/* زرّ «التالي» تحت البطاقة يقع على الخلفية الداكنة: نمنحه حدًّا فاتحًا
   ليُرى، فالكحلي على الكحلي يكاد يختفي. */
#view-evaluate:has(.evaluate.is-login) .wizard__actions { background: none; }
#view-evaluate:has(.evaluate.is-login) .wizard__actions .btn--primary {
  border-color: rgba(255, 255, 255, .35);
}

/* «مسح النموذج» فوق الخلفية الداكنة: زرّ أبيض مربّع بأيقونة وحدها.
   لونه الرمادي الخافت (--ink-3) مقصود فوق الخلفية البيضاء لكنه يختفي هنا،
   ونصّه أطول نصوص الشريط لأقلّ أفعاله استعمالًا — فيسحب الانتباه من «التالي».
   الأبيض الممتلئ يجعله مرئيًّا، والاكتفاء بالأيقونة يُعيد الأولوية لزر التالي.
   اسمه يظهر في تلميح عند التمرير أدناه، ومحفوظ في aria-label لقارئ الشاشة. */
#view-evaluate:has(.evaluate.is-login) .wizard__actions #resetBtn {
  position: relative;
  --btn-bg: #fff;
  --btn-bd: #fff;
  --btn-fg: var(--navy);
  width: 44px; min-width: 44px; flex: 0 0 44px;
  padding: 0;
  align-self: auto;              /* لا يتمدّد لارتفاع الصف: مربّع ثابت */
  height: 44px;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(11, 30, 65, .18);
}
#view-evaluate:has(.evaluate.is-login) .wizard__actions #resetBtn:hover {
  --btn-bg: #fff;
  --btn-fg: var(--teal-600);
}
/* النصّ يُخفى بصريًّا لا بـdisplay:none، فيبقى مقروءًا لقارئ الشاشة. */
#view-evaluate:has(.evaluate.is-login) .wizard__actions #resetBtn span {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#view-evaluate:has(.evaluate.is-login) .wizard__actions #resetBtn i { font-size: 16px; }

/* التلميح: يحلّ محلّ title الأصلي (أُزيل من index.php حتى لا يظهر تلميحان
   فوق بعضهما). يظهر عند التمرير وعند التنقّل بلوحة المفاتيح أيضًا. */
#view-evaluate:has(.evaluate.is-login) .wizard__actions #resetBtn::after {
  content: "مسح النموذج";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--navy);
  color: #fff;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(11, 30, 65, .28);
  opacity: 0; visibility: hidden;
  transition: opacity var(--fast) var(--ease),
              transform var(--fast) var(--ease),
              visibility var(--fast) var(--ease);
  pointer-events: none;          /* لا يعترض النقر على الزرّ نفسه */
}
#view-evaluate:has(.evaluate.is-login) .wizard__actions #resetBtn:hover::after,
#view-evaluate:has(.evaluate.is-login) .wizard__actions #resetBtn:focus-visible::after {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.login {
  display: grid; place-items: center;
  padding-block: var(--s-8);
  /* لا نحسب ارتفاعًا هنا: القسم الأب (#view-evaluate) يتكفّل بملء الشاشة،
     وهذه الحاوية تتمدّد داخله فتتوسّط البطاقة دون فراغ أسفل الخلفية. */
  min-height: 100%;
}
.login__card {
  width: min(440px, 100%);
  padding: var(--s-8);
  text-align: center;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}
.login__card::after { display: none; }
.login__card::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--grad);
}
.login__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin: 0 auto var(--s-4);
  border-radius: var(--r-lg);
  background: var(--navy-050); border: 1px solid var(--navy-100);
  color: var(--navy); font-size: 22px;
}
.login__title { font-size: 22px; }
.login__sub { margin-top: var(--s-2); color: var(--ink-3); font-size: 14px; }

.login__form { margin-top: var(--s-6); text-align: start; display: flex; flex-direction: column; gap: var(--s-4); }
/* width:100% ضرورية: الحقل الأب (.field) يصبح align-items:center داخل بطاقة
   الرقم الوظيفي، فيتقلّص هذا الغلاف إلى عرض محتواه الطبيعي بدل أن يمتدّ —
   فيظهر حقل كلمة المرور أضيق من حقل الرقم الوظيفي رغم أن كليهما input واحد.
   بالعرض الصريح يتطابق الحقلان تمامًا. */
.login__pass { position: relative; width: 100%; }
/* حشوة متساوية من الجهتين: زر إظهار كلمة المرور يشغل جهة واحدة، ولو تركنا
   الجهة المقابلة بحشوة أصغر لظهر النص (الموسَّط في هذه البطاقة) مزاحًا عن
   المنتصف بينما نص حقل الرقم الوظيفي موسَّط تمامًا. */
.login__pass .input { padding-inline-start: 44px; padding-inline-end: 44px; }
.login__toggle {
  position: absolute; inset-inline-start: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 0; background: none; cursor: pointer;
  color: var(--ink-4); font-size: 14px;
  border-radius: var(--r-sm);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.login__toggle:hover { color: var(--teal-600); background: var(--surface); }

.login__error {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 10px var(--s-4);
  border-radius: var(--r-md);
  background: var(--danger-050);
  border: 1px solid #E8B4AE;
  color: var(--danger);
  font-size: 13.5px;
}
.login__submit { width: 100%; margin-top: var(--s-2); }

.login__note {
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-4);
}
.login__note strong { color: var(--ink-2); font-family: monospace; }


/* ==========================================================================
   12. HR DASHBOARD
   ========================================================================== */

/* Entry point in the top bar. The dot pulses only while something is unread. */
.hr-link { position: relative; }
@keyframes shine {
  0%   { box-shadow: 0 0 0 0 rgba(27, 95, 160, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(27, 95, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 95, 160, 0); }
}

.dash { padding-block: var(--s-8); }
.dash__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.dash__title { font-size: 26px; }
.dash__sub { margin-top: 4px; color: var(--ink-3); font-size: 14.5px; }
.dash__tools { display: flex; gap: var(--s-2); }

/* بطاقة تذكير "قيّم نفسك" — تظهر لموظف الموارد البشرية الذي لم يكمل تقييمه
   الذاتي بعد. انظر renderDashboard في script.js. */
.dash__self-banner {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding: var(--s-4);
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
  border-radius: var(--r-lg);
}
.dash__self-banner-icon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--teal-100); color: var(--teal-600); font-size: 17px;
}
.dash__self-banner-text { flex: 1 1 auto; min-width: 0; }
.dash__self-banner-title { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.dash__self-banner-sub { margin-top: 2px; color: var(--ink-3); font-size: 13px; }
.dash__self-banner .btn { flex: 0 0 auto; white-space: nowrap; }

/* حالة الاكتمال: البطاقة لا تختفي بل تتحوّل لتأكيد هادئ بالأخضر (طرف تدرّج
   الهوية)، والزر يفقد لونه الداعي للفعل — فلم يبقَ فعلٌ مطلوب، ووجوده فقط
   ليشرح ذلك عند النقر. انظر renderSelfEvalBanner في script.js. */
.dash__self-banner--done {
  background: #F1FAF6;
  border-color: #CDEBDD;
}
.dash__self-banner--done .dash__self-banner-icon {
  background: #DCF2E7; color: var(--green);
}
@media (max-width: 640px) {
  .dash__self-banner { flex-wrap: wrap; }
}

.dash__list { display: flex; flex-direction: column; gap: 6px; }

/* شريط الفلاتر: بحث مرن + ثلاث قوائم. يلتفّ على الشاشات الضيقة. */
.filters {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.filters__search {
  position: relative; flex: 1 1 240px; min-width: 200px;
  display: flex; align-items: center;
}
.filters__search i {
  position: absolute; inset-inline-start: 12px;
  color: var(--ink-4); font-size: 13px; pointer-events: none;
}
.filters__input {
  width: 100%;
  padding: 9px 36px 9px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: #fff; font: inherit; font-size: 14px; color: var(--ink);
  transition: border-color var(--fast) var(--ease);
}
.filters__input:focus { outline: none; border-color: var(--teal); }
.filters__select {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: #fff; font: inherit; font-size: 14px; color: var(--ink);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease);
}
.filters__select:focus { outline: none; border-color: var(--teal); }
.dash__reset { margin-top: var(--s-4); }

@media (max-width: 720px) {
  /* على الجوال: البحث سطر كامل، والقوائم تتوزّع تحته. */
  .filters { gap: var(--s-2); }
  .filters__search { flex: 1 1 100%; }
  .filters__select { flex: 1 1 calc(50% - var(--s-2)); }
}

/* رأس الجدول */
/* العمود الأخير 76px لا 48px: فيه زرّا العرض والحذف، عرض كلٍّ منهما 34px
   وبينهما فجوة 6px (= 74px). حين كان 48px تضغط الشبكةُ الزرّين إلى 21px
   عرضًا فيظهران مستطيلين ضيّقين بدل مربّعين — على كل عرض شاشة فوق 720px،
   إذ يتحوّل الصف دون ذلك إلى بطاقة بلا شبكة سباعية.
   ملاحظة: رقم الرأس يجب أن يطابق رقم الصف أدناه دائمًا، وإلا انزاحت
   عناوين الأعمدة عن محتواها. */
.dash__thead {
  display: grid;
  grid-template-columns: 1.7fr 1fr .85fr 1.25fr .8fr .8fr 76px;
  gap: var(--s-4);
  align-items: center;
  padding: 0 var(--s-5) var(--s-2);
  font-size: 12px; font-weight: 600; color: var(--ink-4);
  letter-spacing: .02em;
}
.dash__thead span { text-align: start; }

/* صف الاستجابة */
.drow {
  display: grid;
  /* 76px للعمود الأخير — انظر تعليق .dash__thead أعلاه. */
  grid-template-columns: 1.7fr 1fr .85fr 1.25fr .8fr .8fr 76px;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) var(--s-5);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), box-shadow var(--base) var(--ease),
              transform var(--fast) var(--ease);
}
.drow:hover { border-color: var(--teal); box-shadow: var(--sh-2); transform: translateY(-1px); }

.drow.is-unread { border-inline-start: 3px solid var(--blue); background: #F5F9FD; }

/* الموظف: نقطة + صورة رمزية + الاسم */
.drow__who { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.drow__dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: transparent; }
.drow.is-unread .drow__dot { background: var(--blue); animation: shine 1.9s var(--ease) infinite; }
.drow__avatar {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: var(--r-full);
  background: var(--navy-050);
  border: 1px solid var(--navy-100);
  color: var(--navy);
  font-size: 14px; font-weight: 600;
}
.drow.is-unread .drow__avatar { background: var(--navy); border-color: var(--navy); color: #fff; }
.drow__id { display: flex; flex-direction: column; min-width: 0; }
.drow__name { font-size: 15px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow.is-unread .drow__name { font-weight: 600; color: var(--navy); }

.drow__dept, .drow__date { font-size: 13.5px; color: var(--ink-3); min-width: 0; }

/* شريط الاكتمال */
.drow__fill { display: flex; align-items: center; gap: var(--s-2); }
.drow__bar { flex: 1; height: 6px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; min-width: 40px; }
.drow__bar > span { display: block; height: 100%; background: var(--grad); border-radius: inherit; }
.drow__fillnum { font-size: 12px; color: var(--ink-4); white-space: nowrap; }

/* شارة الحالة */
.chip {
  display: inline-block;
  padding: 3px 11px;
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.chip--new  { background: var(--blue); color: #fff; }
.chip--read { background: var(--surface-2); color: var(--ink-3); }

.drow__type { display: flex; align-items: center; min-width: 0; }

/* --- وسم النتيجة (النسبة المئوية) ------------------------------------------
   ثلاث مراتب لونية: ٨٠٪ فأعلى، ٦٠–٧٩٪، أقل من ٦٠٪. اللون مساعد لا وحيد —
   الرقم مكتوب دائمًا، فلا يتوقّف الفهم على تمييز الألوان. */
.drow__score { display: flex; align-items: center; }
.score-link { padding: 0; border: 0; background: transparent; cursor: pointer; }
.score-link:hover .pscore { filter: brightness(.96); box-shadow: 0 0 0 2px var(--teal-100); }
.score-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: var(--r-full); }
.pscore {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.pscore--poor      { background: var(--sc-poor-bg);  border-color: var(--sc-poor-bd);  color: var(--sc-poor-fg); }
.pscore--fair      { background: var(--sc-fair-bg);  border-color: var(--sc-fair-bd);  color: var(--sc-fair-fg); }
.pscore--good      { background: var(--sc-good-bg);  border-color: var(--sc-good-bd);  color: var(--sc-good-fg); }
.pscore--vgood     { background: var(--sc-vgood-bg); border-color: var(--sc-vgood-bd); color: var(--sc-vgood-fg); }
.pscore--excellent { background: var(--sc-exc-bg);   border-color: var(--sc-exc-bd);   color: var(--sc-exc-fg); }

/* أزرار الإجراءات */
.drow__actions { display: flex; gap: 6px; justify-content: flex-end; }

/* بطاقة الموظف الموحّدة: تجمع تقييمه الذاتي وتقييم مديره في موضع واحد،
   مع بقاء كل تقييم قابلًا للفتح أو الحفظ أو الحذف على حدة. */
.employee-card {
  margin-top: var(--s-3);
  padding: var(--s-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--fast) var(--ease), box-shadow var(--base) var(--ease);
}
.employee-card:hover { border-color: var(--teal); box-shadow: var(--sh-1); }
.employee-card.is-unread { border-inline-start: 3px solid var(--blue); background: #F5F9FD; }
.employee-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.employee-card__who { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.employee-card__dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: transparent; }
.employee-card.is-unread .employee-card__dot { background: var(--blue); animation: shine 1.9s var(--ease) infinite; }
.employee-card__name { margin: 0; font-size: 16px; color: var(--ink); }
.employee-card__dept { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }
.employee-card__year { color: var(--ink-4); font-size: 12px; white-space: nowrap; }
.employee-card__evaluations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }

.eval-panel {
  position: relative;
  min-height: 138px;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.eval-panel:hover { border-color: var(--teal); background: var(--teal-050); transform: translateY(-1px); }
.eval-panel.is-unread { border-color: var(--blue); }
.eval-panel--missing { display: flex; flex-direction: column; justify-content: center; cursor: default; background: var(--surface-2); border-style: dashed; color: var(--ink-3); }
.eval-panel--missing:hover { border-color: var(--line); background: var(--surface-2); transform: none; }
.eval-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.eval-panel__new { color: var(--blue); font-size: 11px; font-weight: 700; }
.eval-panel__score { margin: var(--s-3) 0 var(--s-2); }
.eval-panel__meta { display: flex; align-items: center; gap: 5px; margin: 3px 0; color: var(--ink-3); font-size: 12px; }
.eval-panel__actions { position: absolute; inset-inline-end: var(--s-3); inset-block-end: var(--s-3); display: flex; gap: 6px; }
.eval-panel__label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.eval-panel__missing-text { margin-top: 5px; font-size: 13px; }
.pscore small { font-size: 11px; font-weight: 600; }

/* --- قائمة الاستجابات على الجوال: بطاقة لا صفّ جدول -------------------------
   ستة أعمدة في ٣٩٠px تعطي كل عمود ~٥٠px: اسم الموظف كان يُقصّ حتى يختفي
   تمامًا (لا يبقى منه إلا الحرفان في الدائرة)، والتاريخ ينكسر على خمسة أسطر.
   الجدول شكلٌ لشاشة عريضة؛ على الجوال يصير كل صفّ بطاقةً من ثلاثة سطور.
   موضع هذه الكتلة بعد تعريفات .drow مقصود: قواعد قسم RESPONSIVE أعلى الملف
   تسبق تلك التعريفات، فكانت تُهزم بأسبقية "الأخير يفوز" رغم صحّتها. */
@media (max-width: 720px) {
  .dash__thead { display: none; }   /* رؤوس أعمدة بلا أعمدة */

  .drow {
    grid-template-columns: minmax(0, 1fr) auto;
    /* التاريخ في عمود مستقلّ عن الاسم عمدًا: وضعُه بجانب القسم كان يوسّع
       العمود الثاني (auto) إلى ١٧٥px لأنه أطول محتوى فيه، فلا يبقى للاسم
       إلا ٦٥px وينكسر على أربعة أسطر. بهذا التوزيع يبقى العمود الثاني بعرض
       أضيق عناصره (الوسم/العدّاد/الأزرار) ويأخذ الاسم بقية السطر. */
    grid-template-areas:
      "who   self"
      "dept  manager"
      "fill  acts"
      "date  date";
    gap: var(--s-2) var(--s-3);
    padding: var(--s-4);
  }
  .drow__who     { grid-area: who; }
  .drow__score--self    { grid-area: self; justify-content: flex-end; align-self: start; }
  .drow__score--manager { grid-area: manager; justify-content: flex-end; }
  .drow__dept    { grid-area: dept; }
  .drow__date    { grid-area: date; }
  .drow__fill    { grid-area: fill; justify-content: flex-end; }
  .drow__actions { grid-area: acts; }
  /* الاسم يعود مرئيًا: صار له عرض السطر كاملًا ناقص وسم النتيجة.
     flex:1 على .drow__id ضرورية معه — بدونها ينكمش العنصر إلى عرض أطول
     كلمة (min-content) فينكسر الاسم على أربعة أسطر رغم توفّر المساحة. */
  .drow__id      { flex: 1 1 auto; }
  .drow__name    { white-space: normal; overflow: visible; }
  .employee-card { padding: var(--s-3); }
  .employee-card__evaluations { grid-template-columns: 1fr; }
  .eval-panel { min-height: 126px; }
}
.iconbtn {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 14px;
  transition: all var(--fast) var(--ease);
}
.iconbtn--view:hover { border-color: var(--teal); color: var(--teal-600); background: var(--teal-050); }
.iconbtn--save:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-050); }
.iconbtn--del:hover  { border-color: var(--danger); color: var(--danger); background: var(--danger-050); }

.dash__empty {
  display: grid; place-items: center; gap: var(--s-2);
  padding: var(--s-10) var(--s-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
}
.dash__empty i { font-size: 30px; color: var(--ink-4); margin-bottom: var(--s-2); }
.dash__empty p { color: var(--ink-3); }
.dash__empty-hint { font-size: 13.5px; color: var(--ink-4); max-width: 46ch; }

/* --- Response detail: a neat summary of what was actually filled --- */
.detail__head {
  /* center لا flex-start: بطاقة النتيجة في الطرف المقابل أطول من كتلة الاسم،
     فمحاذاتهما لأعلى تترك الاسم معلّقًا وتبدو الترويسة غير متّزنة. */
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  padding-bottom: var(--s-5); margin-bottom: var(--s-6);
  border-bottom: 2px solid var(--navy);
}
.detail__name { font-size: 24px; }
/* وسم نوع التقييم بجانب اسم الموظف: يميّز الذاتي عن تقييم المدير بلمحة. */
.dbadge {
  display: inline-block; vertical-align: middle;
  margin-inline-start: 10px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.6;
}
.dbadge--self { background: var(--teal-050); color: var(--teal-600); border: 1px solid var(--teal); }
.dbadge--mgr  { background: var(--navy-050); color: var(--navy); border: 1px solid var(--navy); }
/* نسخة مصغّرة للقائمة: الوسم هناك داخل صفّ لا بجانب عنوان، فلا يحتاج حجم
   وسم الترويسة ولا هامشه الجانبي. */
.dbadge--sm { margin-inline-start: 0; padding: 2px 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
/* وسم نوع التقييم داخل التقرير (نسخة الشاشة؛ نسخة الطباعة في كتلة @media print). */
.rbadge {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; border: 1px solid currentColor;
}
.rbadge--self { color: var(--teal-600); background: var(--teal-050); }
.rbadge--mgr  { color: var(--navy); background: var(--navy-050); }
.detail__meta {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-top: 4px;
  font-size: 14px; color: var(--ink-3);
}
.detail__count {
  padding: 6px 12px;
  border: 1px solid var(--teal-100);
  border-radius: var(--r-full);
  background: var(--teal-050);
  color: var(--teal-600);
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
}

/* --- تفاصيل الاستجابة: النتيجة في الترويسة ------------------------------
   بطاقة صغيرة في طرف الترويسة مقابل اسم الموظف: النسبة النهائية واسم
   مرتبتها فقط. لا تفصيل فني/سلوكي هنا — الدرجات التفصيلية معروضة كاملةً
   أسفل الصفحة، فنسبٌ وسيطة فوقها تكرار يزحم الشاشة. */
.dscore {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 auto;
  min-width: 116px;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
}
.dscore__num { font-size: 30px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.dscore__num small { font-size: 15px; font-weight: 600; margin-inline-start: 2px; }
/* اسم المرتبة (ضعيف … ممتاز): هو ما يشرح الرقم، فيأخذ لون المرتبة. */
.dscore__tier { font-size: 13.5px; font-weight: 700; margin-top: 2px; }
/* التسمية أعلى المربّع: مسافة تحتها تفصلها عن الرقم الكبير. */
.dscore__cap  { font-size: 11.5px; font-weight: 500; color: var(--ink-4); margin-bottom: 5px; }

.dscore--poor      { border-color: var(--sc-poor-bd);  background: var(--sc-poor-bg); }
.dscore--poor      .dscore__num,
.dscore--poor      .dscore__tier { color: var(--sc-poor-fg); }
.dscore--fair      { border-color: var(--sc-fair-bd);  background: var(--sc-fair-bg); }
.dscore--fair      .dscore__num,
.dscore--fair      .dscore__tier { color: var(--sc-fair-fg); }
.dscore--good      { border-color: var(--sc-good-bd);  background: var(--sc-good-bg); }
.dscore--good      .dscore__num,
.dscore--good      .dscore__tier { color: var(--sc-good-fg); }
.dscore--vgood     { border-color: var(--sc-vgood-bd); background: var(--sc-vgood-bg); }
.dscore--vgood     .dscore__num,
.dscore--vgood     .dscore__tier { color: var(--sc-vgood-fg); }
.dscore--excellent { border-color: var(--sc-exc-bd);   background: var(--sc-exc-bg); }
.dscore--excellent .dscore__num,
.dscore--excellent .dscore__tier { color: var(--sc-exc-fg); }

/* الترويسة تلتفّ عموديًا على الشاشات الضيقة (قاعدة قائمة أدناه)، فتتمدّد
   البطاقة حينها بعرض السطر بدل أن تُترك معلّقة. */
@media (max-width: 900px) {
  .dscore { width: 100%; }
}

/* --- تفاصيل الاستجابة: أقسام الدرجات والملاحظات ------------------------- */
.dsec { margin-bottom: var(--s-6); }
.dsec__title {
  font-size: 15px; color: var(--ink-2); font-weight: 600;
  margin-bottom: var(--s-3);
}
.slist { list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) {
  /* كفاءتان جنب بعض على الشاشات الأوسع، اختصارًا للمساحة العمودية. */
  .slist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
}
.srow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 6px;
}
@media (min-width: 640px) { .srow { margin-bottom: 0; } }
.srow__label { color: var(--ink); font-size: 14.5px; }
.srow__val {
  flex: 0 0 auto;
  min-width: 38px; text-align: center;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--navy-050); border: 1px solid var(--navy-100);
  color: var(--navy); font-weight: 600; font-size: 15px;
}
.dnote { margin-bottom: var(--s-4); }
.dnote h4 { font-size: 13px; color: var(--ink-4); margin: 0 0 4px; font-weight: 600; }
.dnote p { margin: 0; color: var(--ink-2); line-height: 1.7; white-space: pre-wrap; }
.dnote__empty { color: var(--ink-4); font-style: italic; }

/* مؤشّر تحميل في اللوحة والتفاصيل. */
.dash__loading { text-align: center; padding: var(--s-8); color: var(--ink-4); font-size: 24px; }

/* سطر إرشاد أول دخول. */
.login__hint {
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin-top: var(--s-2); font-size: 13px; color: var(--teal-600);
  line-height: 1.6;
}

/* ظهور ناعم لحقل التأكيد وسطر الإرشاد عند أول دخول: ينزلقان للأسفل مع تلاشٍ
   بدل الظهور الفوري المربك. العنصر يبدأ مطويًّا (hidden=false يزيل display:none،
   ثم صنف is-revealed يشغّل الانتقالة). */
#confirmField:not([hidden]),
#loginHint:not([hidden]) {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  margin-top: 0;
  transition: max-height .28s var(--ease), opacity .28s var(--ease),
              transform .28s var(--ease), margin-top .28s var(--ease);
}
#confirmField.is-revealed { max-height: 120px; opacity: 1; transform: none; margin-top: var(--s-4); }
#loginHint.is-revealed    { max-height: 60px;  opacity: 1; transform: none; margin-top: var(--s-2); }

/* من يفضّل تقليل الحركة: نُظهر بلا انتقالة. */
@media (prefers-reduced-motion: reduce) {
  #confirmField:not([hidden]), #loginHint:not([hidden]) {
    transition: none; max-height: none; opacity: 1; transform: none;
  }
}

.sum__section + .sum__section { margin-top: var(--s-6); }
.sum__h {
  font-size: 15px; font-weight: 600;
  color: var(--navy);
  padding: 7px var(--s-4);
  background: var(--surface);
  border-inline-start: 3px solid var(--teal);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-4);
}

/* الحقول القصيرة */
.sum__pairs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-5);
}
.sum__pairs dt { font-size: 12.5px; color: var(--ink-4); }
.sum__pairs dd { margin: 2px 0 0; font-size: 15px; color: var(--ink); font-weight: 500; }

/* التقييمات كصفوف واضحة: العبارة على جهة، والتقييم مع تسميته على الأخرى */
.ratings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px var(--s-5);
}
.ratings__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 11px var(--s-3);
  border-bottom: 1px solid var(--line);
}
/* الصف الفردي في العمود الأول يفصله خط خفيف عن الثاني */
.ratings__row:nth-last-child(-n+1):nth-child(odd) { border-bottom: 0; }
.ratings__label { display: flex; align-items: center; gap: var(--s-3); font-size: 14px; color: var(--ink); min-width: 0; }
.ratings__num {
  flex: 0 0 auto;
  min-width: 26px; height: 24px;
  display: grid; place-items: center;
  padding-inline: 5px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 11.5px; font-weight: 600;
}
.ratings__value { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }

.ratings__dots { display: inline-flex; gap: 3px; }
.ratings__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.ratings__dot.is-on { background: var(--teal); border-color: var(--teal); }

.ratings__score {
  min-width: 74px; text-align: start;
  font-size: 13px; font-weight: 600; color: var(--teal-600);
  white-space: nowrap;
}
.ratings__row.is-empty .ratings__score { color: var(--ink-4); font-weight: 400; font-style: italic; }

/* الملاحظات المكتوبة */
.sum__note {
  padding: var(--s-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-2);
}
.sum__note-label { display: block; font-size: 12px; line-height: 1.3; color: var(--ink-4); }
.sum__note p { margin-top: 3px; font-size: 14.5px; color: var(--ink-2); line-height: 1.75; }
.sum__empty { color: var(--ink-4); font-style: italic; }

/* --- Response detail: the printable report, shown on screen --- */
.detail { padding-block: var(--s-7) var(--s-8); }
.detail__bar { display: flex; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
/* مجموعة (حفظ + حذف) معًا على اليسار؛ «عودة» تبقى يمينًا. */
.detail__actions { display: flex; align-items: center; gap: var(--s-2); }
/* زر أيقوني مربّع (سلة الحذف بلا نص). */
.btn--icon {
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: #fff; color: var(--ink-3); cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.btn--icon i { font-size: 16px; }
.detail__card { padding: var(--s-8); }
.detail__card::after { display: none; }

@media (max-width: 900px) {
  .detail__card { padding: var(--s-5); }
  .detail__head { flex-direction: column; gap: var(--s-3); }
}

/* --- التقرير القابل للطباعة / الحفظ كـ PDF ---------------------------------
   مخفي على الشاشة تمامًا؛ عند الطباعة يُخفى التطبيق ويظهر التقرير وحده. */
.report { display: none; }

@media print {
  /* margin-boxes مفرّغة: تمنع ظهور نصوص المتصفح التلقائية (الرابط، عنوان
     الصفحة، التاريخ، رقم الصفحة) في زوايا الورقة. المتصفحات الحديثة تحترمها،
     أما ترويسة/تذييل المتصفح الكاملة فيُطفئها المستخدم من إعدادات الطباعة. */
  @page {
    size: A4;
    /* الهامش السفلي ضيّق: رقم الصفحة يُرسم فيه، فكلّما ضاق اقترب من شريط
       التذييل وبدا معه سطرًا واحدًا بدل أن يبدو نازلًا في أسفل الورقة. */
    margin: 14mm 14mm 16mm;   /* مساحة كافية للتذييل في الهامش */
    @top-left     { content: ""; }
    @top-center   { content: ""; }
    @top-right    { content: ""; }
    /* التذييل كاملًا يُرسم في هوامش الورقة السفلية، فتقع أجزاؤه الثلاثة على
       سطر واحد متحاذٍ، ويتكرّر تلقائيًّا في كل صفحة برقمها الصحيح.
       (margin box هو المكان الوحيد الذي يفهم counter(page).) */
    @bottom-right {
      content: "شركة وادي الدمام القابضة";
      font-family: "IBM Plex Sans Arabic", sans-serif;
      font-size: 8pt; color: #0B1E41;
      vertical-align: top; padding-top: 6px;
    }
    @bottom-center{
      content: "صفحة " counter(page);
      font-family: "IBM Plex Sans Arabic", sans-serif;
      font-size: 8pt; color: #64718A;
      vertical-align: top; padding-top: 6px;
    }
    @bottom-left {
      content: "hrservices@dammamvalley.sa";
      font-family: "IBM Plex Sans Arabic", sans-serif;
      font-size: 8pt; color: #0B1E41;
      vertical-align: top; padding-top: 6px;
    }
  }

  .topbar, .footer, .modal, .toast, main { display: none !important; }

  body { background: #fff; color: #14181F; font-size: 10.5pt; line-height: 1.6; }

  .report {
    display: block; direction: rtl; font-family: var(--font);
    /* ترقيم الصفحات يعتمد على عدّاد المتصفّح المدمج (counter(page)). */
  }

  /* ترويسة التقرير: شعار وادي الدمام يمين، بياناته بجانبه، والنتيجة أقصى
     اليسار. flex-start مع margin تلقائي على الصندوق (بدل space-between)
     يُبقي الشعار والعنوان متجاورين ويدفع النتيجة وحدها للطرف المقابل. */
  .report__head {
    display: flex; align-items: center; justify-content: flex-start; gap: 16px;
    padding-bottom: 9px; margin-bottom: 13px;
    border-bottom: 2px solid var(--navy);
  }
  .report__brand { height: 56px; width: auto; object-fit: contain; }
  .report__meta { text-align: start; }

  /* صندوق النتيجة في الترويسة: أول ما تقع عليه العين عند فتح الورقة.
     print-color-adjust لازمة وإلا حذف المتصفّح الخلفية والحدّ عند الطباعة. */
  .report__score {
    margin-inline-start: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 82px; padding: 6px 12px;
    border: 1px solid #C9D2DE; border-radius: 8px;
    background: #F7F9FB;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .report__score-num  { font-size: 17pt; font-weight: 700; line-height: 1.05; color: var(--navy); }
  .report__score-tier { font-size: 9pt;  font-weight: 700; margin-top: 1px; color: var(--navy); }

  /* لون المرتبة على النصّ فقط: الخلفيات الملوّنة تُهدر الحبر وقد تُطبع رماديةً
     غير مقروءة، والاسم مكتوب تحت الرقم فلا يضيع المعنى بلا لون. */
  .report__score--poor      .report__score-num,
  .report__score--poor      .report__score-tier { color: #B03024; }
  .report__score--fair      .report__score-num,
  .report__score--fair      .report__score-tier { color: #B45309; }
  .report__score--good      .report__score-num,
  .report__score--good      .report__score-tier { color: #8A6A08; }
  .report__score--vgood     .report__score-num,
  .report__score--vgood     .report__score-tier { color: #427520; }
  .report__score--excellent .report__score-num,
  .report__score--excellent .report__score-tier { color: #0F6B45; }
  .report__title { font-size: 15pt; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
  .report__meta p { font-size: 9pt; color: #46536B; }

  /* الأقسام: عمود واحد، كل قسم أسفل الآخر */
  .report__body { display: block; }
  .report__section { margin-bottom: 11px; break-inside: avoid; }

  .report__h2 {
    font-size: 11.5pt; font-weight: 600; color: var(--navy);
    padding: 4px 9px; margin-bottom: 6px;
    background: #F1F4F8;
    border-inline-start: 3px solid var(--teal);
  }
  .report__h3 { font-size: 10pt; font-weight: 600; color: #46536B; margin: 7px 0 5px; }

  /* الجداول */
  .report__table { width: 100%; border-collapse: collapse; }
  .report__table th, .report__table td {
    border: 1px solid #D9DEE5;
    padding: 4px 9px;
    font-size: 9.5pt;
    text-align: start;
    vertical-align: top;
  }
  .report__table th { background: #FAFBFC; font-weight: 500; color: #46536B; }
  .report__table td { color: #14181F; }

  /* بطاقة البيانات: عمودان (الحقل / القيمة) */
  .report__table--pairs th { width: 32%; }

  /* وسم نوع التقييم داخل التقرير: إطار وخط عريض بدل خلفية ملوّنة، لأن
     المتصفّحات كثيرًا ما تُسقط ألوان الخلفية عند الطباعة. */
  .rbadge {
    display: inline-block; padding: 2px 10px;
    border-radius: 999px; font-weight: 700; font-size: 9.5pt;
    border: 1.2pt solid currentColor;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .rbadge--self { color: #00767A; }
  .rbadge--mgr  { color: #0B1E41; }

  /* البنود المُقيَّمة: رقم · العبارة · القيمة */
  .report__idx { width: 34px; text-align: center; color: #64718A; background: #FAFBFC; font-size: 9pt; }
  .report__table--rated th { font-weight: 400; color: #14181F; background: #fff; }
  .report__table--rated .report__val { width: 32%; font-weight: 600; color: var(--navy); white-space: nowrap; }

  /* الملاحظات المكتوبة */
  .report__note { border: 1px solid #D9DEE5; padding: 6px 9px; margin-bottom: 6px; break-inside: avoid; }
  .report__note h4 { font-size: 9.5pt; line-height: 1.3; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
  .report__note p { font-size: 9.5pt; line-height: 1.4; }
  .report__achievements { display: grid; gap: 5px; }
  .report__achievements__item { padding: 5px 7px; border-inline-start: 2px solid var(--teal); background: #F7FAFC; }
  .report__achievements__item h4 { margin: 0; font-size: 9pt; }
  .report__achievements__item p { margin: 2px 0 0; }
  .report__achievements__links { margin-top: 3px; font-size: 8.5pt; }
  .report__achievements__links a { color: #0757b8; text-decoration: underline; text-underline-offset: 2px; }
  .report__empty { color: #93A0B0; font-style: italic; }

  /* التذييل يتكرّر أسفل كل صفحة مطبوعة (لا مرة واحدة في نهاية المحتوى):
     position:fixed داخل سياق الطباعة يجعل المتصفّح يرسمه في كل ورقة. */
  /* التذييل نفسه يُرسم عبر @bottom-* في هوامش الورقة (أعلاه)؛ نُبقي هنا
     خطًّا فاصلًا ثابتًا أسفل كل صفحة يفصل المحتوى عن التذييل. */
  .report__foot {
    position: fixed;
    bottom: 0; inset-inline: 0;
    height: 2px;
    background: var(--navy);
  }
  /* الشريط النصّي داخل المحتوى مُخفى: التذييل كله يُرسم عبر @bottom-* في
     هوامش الورقة. إظهاره هنا كان يجعله يطفو في أعلى الصفحات التالية
     ويتداخل مع العناوين. */
  .report__bar,
  .report__foot-start,
  .report__foot-end,
  .report__pageno { display: none; }
}