@charset "UTF-8";

/* ============================================================
   دائرة الموارد البشرية — الفجيرة · نظام الاختبار القبلي والبعدي
   الهوية: عنّابي #601218 + ذهبي · خط Tajawal
   ملف واحد بلا أي أداة بناء: يُرفع كما هو ويعمل.
   ============================================================ */

@font-face {
  font-family: "Tajawal";
  src: url("fonts/Tajawal-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Tajawal";
  src: url("fonts/Tajawal-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Tajawal";
  src: url("fonts/Tajawal-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

:root {
  --radius: 1.1rem;

  --background: #fbf8f8;
  --foreground: #2b2228;
  --card: #ffffff;
  --popover: #ffffff;

  --primary: #601218;
  --primary-fg: #fdf2f1;
  --primary-50: #fbeeee;
  --primary-100: #f6dada;
  --primary-600: #7a1822;

  --gold: #b0883e;
  --gold-soft: #cdab63;

  --secondary: #f6f1f0;
  --secondary-fg: #3a2c2e;
  --muted: #f5f0ef;
  --muted-fg: #6e646a;
  --accent: #f6ecec;
  --accent-fg: #601218;

  --success: #2f7d52;
  --success-soft: #e3f1e9;
  --warning: #8a5a12;
  --warning-soft: #f8eed7;
  --danger: #b3261e;
  --danger-soft: #f8e4e2;
  --info: #2b6cb0;
  --info-soft: #e2edf7;

  --border: #efe7e6;
  --input: #e4d9d8;
  --ring: #601218;

  --sidebar: #ffffff;
  --sidebar-fg: #4a3b3d;
  --sidebar-border: #efe7e6;
  --sidebar-accent: #f8efef;

  /* ألوان الرسوم: سلسلتان فقط، القبلي والبعدي.
     اختيرتا بالتحقّق لا بالذوق: كلتاهما داخل نطاق الإضاءة المقبول وفوق حدّ
     التشبّع، وتفصلهما مسافة لونية ≈١٨ في عمى ألوان البروتان و≈٢٥ في الرؤية
     الطبيعية — أي يميّزهما المصاب بعمى الألوان الأحمر/الأخضر، وهو أشيعها.
     للوضع الداكن خطوتان مستقلّتان (لا قلب آلي) لأن الخطوة الفاتحة تفقد
     تباينها على السطح الداكن. */
  --chart-pre: #2b6cb0;
  --chart-post: #a8353f;
  --chart-grid: #ece3e2;
  --chart-axis: #8a7e80;
}

/* الوضع الافتراضي أبيض دائماً — لا تتبّع لتفضيل نظام التشغيل.
   الداكن لا يُفعّل إلا باختيار صريح من زرّ التبديل، فيُثبَّت على الجذر
   بـ`data-theme="dark"`. سبب ذلك تشغيلي: النظام يُعرض على شاشة القاعة
   ويُطبع، والخلفية البيضاء هي المتوقّعة في الحالتين — وجهاز موظف مضبوط على
   الوضع الليلي كان يقلب الشاشة عليه بلا أن يطلب. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #221a1d;
  --foreground: #e7dddb;
  --card: #2b2227;
  --popover: #2b2227;
  --primary: #b06a72;
  --primary-fg: #fff5f5;
  --primary-50: #2a1417;
  --primary-100: #3a181d;
  --primary-600: #bd7d83;
  --gold: #cdab63;
  --gold-soft: #b0883e;
  --secondary: #352c30;
  --secondary-fg: #e9dedc;
  --muted: #332a2e;
  --muted-fg: #a7989a;
  --accent: #3a2e33;
  --accent-fg: #f0c9cc;
  --success: #76b394;
  --success-soft: #18271f;
  --warning: #e3b563;
  --warning-soft: #2a2113;
  --danger: #d29089;
  --danger-soft: #2c1816;
  --info: #8fb2d6;
  --info-soft: #15212e;
  --border: #3e3338;
  --input: #4a3d42;
  --ring: #b06a72;
  --sidebar: #261e22;
  --sidebar-fg: #cabcbb;
  --sidebar-border: #392e33;
  --sidebar-accent: #342a2f;
  --chart-pre: #4d9ada;
  --chart-post: #df5f6e;
  --chart-grid: #3b3035;
  --chart-axis: #9d9092;
}

/* ── الأساس ─────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Tajawal", "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -0.01em;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* حلقة تركيز ظاهرة — تنقّل لوحة المفاتيح يجب ألّا يكون تخميناً. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 8px;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
  border-radius: 9999px;
}

/* ── أدوات عامة ─────────────────────────────────────────────── */

.wrap { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 16px; }
.wrap-narrow { max-width: 760px; }
.wrap-tight { max-width: 460px; }

.stack > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 8px; }
.stack-lg > * + * { margin-top: 24px; }

.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.push { margin-inline-start: auto; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.muted { color: var(--muted-fg); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.bold { font-weight: 700; }
.xbold { font-weight: 800; }
.num { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

/* ── البطاقة ────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20, 15, 14, 0.03), 0 6px 20px -14px rgba(96, 18, 24, 0.1);
}
.card-pad { padding: 20px; }
.card-link { display: block; transition: box-shadow 0.2s, transform 0.2s; }
.card-link:hover {
  box-shadow: 0 2px 4px rgba(20, 15, 14, 0.04), 0 16px 36px -20px rgba(96, 18, 24, 0.28);
  transform: translateY(-2px);
}

/* ── الترويسة المزخرفة ──────────────────────────────────────── */

.arabesque {
  background-color: #601218;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(176, 136, 62, 0.22) 0, transparent 42%),
    radial-gradient(circle at 86% 78%, rgba(255, 255, 255, 0.1) 0, transparent 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M30 0l30 30-30 30L0 30z'/%3E%3Ccircle cx='30' cy='30' r='14'/%3E%3C/g%3E%3C/svg%3E");
  color: #fdf2f1;
}
.hero { border-radius: 24px; padding: 36px 24px; text-align: center; }
.hero h1 { font-size: clamp(22px, 4vw, 30px); margin-top: 18px; }
.hero p { margin-top: 10px; color: rgba(253, 242, 241, 0.85); }
.hero-logo {
  display: inline-block;
  background: #fff;
  border-radius: 16px;
  padding: 14px 18px;
  line-height: 0;
}
.hero-logo img { width: 120px; height: auto; display: block; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.chip {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
}

/* صدر الصفحة الرئيسية: الشعار أوّلاً ثم اسم الورشة تحته مباشرةً. */
.hero-lg { padding: 40px 24px 34px; }
.hero-lg .hero-logo { padding: 16px 22px; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.45); }
.hero-lg .hero-logo img { width: 138px; }
.hero-lg h1 { font-size: clamp(24px, 5vw, 34px); margin-top: 22px; }

/* فاصل ذهبي رفيع بين الاسم ووصفه — يفصل السطرين بلا خطّ ثقيل. */
.hero-rule {
  width: 68px;
  height: 3px;
  border-radius: 999px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold), var(--gold-soft));
}

/* ── بطاقتا الاختبار ─────────────────────────────────────────── */

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-fg);
}
.section-label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to left, transparent, var(--border));
}

.phase-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  align-items: start;
}

/* عمود المرحلة: البطاقة فوق وباركودها تحتها. البطاقة تمتدّ لتملأ ما تبقى من
   ارتفاع العمود، فيستوي الباركودان في سطر واحد مهما اختلف طول البطاقتين. */
.phase-col { display: flex; flex-direction: column; }
.phase-col > .phase-card { flex: 1 1 auto; }

.phase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px 22px 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(20, 15, 14, 0.03), 0 6px 20px -14px rgba(96, 18, 24, 0.1);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

/* شريط علوي ملوّن: يميّز المرحلتين قبل قراءة أي كلمة. */
.phase-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--phase-color);
}

.phase-card--pre { --phase-color: var(--chart-pre); --phase-soft: var(--info-soft); }
.phase-card--post { --phase-color: var(--success); --phase-soft: var(--success-soft); }

a.phase-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--phase-color) 45%, transparent);
  box-shadow: 0 3px 6px rgba(20, 15, 14, 0.05),
    0 22px 46px -24px color-mix(in srgb, var(--phase-color) 65%, transparent);
}
a.phase-card:active { transform: translateY(-1px); }

.phase-card.is-closed { opacity: 0.58; }

.phase-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

.phase-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--phase-soft);
  color: var(--phase-color);
}
.phase-icon svg { width: 26px; height: 26px; }

.phase-name { margin-top: 16px; font-size: 19px; font-weight: 800; }

.phase-desc {
  margin: 6px 0 18px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted-fg);
}

/* `margin-top:auto` يدفع التذييل إلى قاع البطاقة، فيستوي تذييلا البطاقتين مهما
   اختلف طول الوصف — بلا ارتفاع أدنى مصطنع كان يترك فجوة فارغة وسط البطاقة. */
.phase-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.phase-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--phase-color);
}
.phase-go .arrow { display: inline-block; transition: transform 0.18s; }
a.phase-card:hover .phase-go .arrow { transform: translateX(-5px); }

/* ── الترويسة العلوية ───────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.topbar-logo img { width: 88px; height: auto; display: block; }
.topbar-title { border-inline-end: 1px solid var(--border); padding-inline-end: 14px; }

/* ── الأزرار ────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding-inline: 20px;
  border-radius: 14px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: 0 1px 2px rgba(96, 18, 24, 0.2);
}
.btn:hover { background: var(--primary-600); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-sm { height: 34px; padding-inline: 12px; font-size: 13px; border-radius: 11px; }

.btn-ghost {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--accent); color: var(--accent-fg); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }

/* ── الحقول ─────────────────────────────────────────────────── */

.field { display: block; }
.field > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.input,
select.input,
textarea.input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--input);
  background: var(--card);
  color: var(--foreground);
}
.input::placeholder { color: color-mix(in srgb, var(--muted-fg) 65%, transparent); }
.input:focus {
  border-color: var(--ring);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}
.input.is-error { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 11px; font-weight: 700; margin-top: 4px; }
.field-hint { color: var(--muted-fg); font-size: 11px; margin-top: 4px; }

/* حقل الرقم المالي: كبير ومتباعد الأرقام — يُملأ بإبهام على هاتف في قاعة. */
.input-lg {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 14px;
  font-variant-numeric: tabular-nums;
}

/* ── التنبيهات ──────────────────────────────────────────────── */

.alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
}
.alert-danger { background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.alert-success { background: var(--success-soft); color: var(--success); font-weight: 700; }
.alert-warning { background: var(--warning-soft); color: var(--warning); }
.alert-info { background: var(--info-soft); color: var(--info); }

/* ── الشارات ────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-muted { background: var(--muted); color: var(--muted-fg); }
.badge-primary { background: var(--primary-50); color: var(--primary); }

/* ── خيارات الاختبار ────────────────────────────────────────── */

.question { padding: 20px; }
.question + .question { margin-top: 14px; }
.q-head { display: flex; gap: 12px; align-items: flex-start; }
.q-num {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--primary-50);
  color: var(--primary);
  font-weight: 800;
  font-size: 13px;
}
.q-text { font-size: 15px; font-weight: 700; line-height: 1.7; margin-top: 2px; }

.options { margin-top: 14px; display: grid; gap: 8px; }
.option { display: block; cursor: pointer; }

/* زرّ الاختيار نفسه مخفيّ بصرياً لا وظيفياً: يبقى في شجرة الوصول وقابلاً
   للتنقّل بلوحة المفاتيح، بينما يحمل الـlabel كامل مساحة اللمس. */
.option input { position: absolute; opacity: 0; width: 0; height: 0; }
.option-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  transition: border-color 0.15s, background-color 0.15s;
}
.option:hover .option-body {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  background: var(--accent);
}
.option input:checked + .option-body {
  border-color: var(--primary);
  background: var(--primary-50);
}
.option input:focus-visible + .option-body { outline: 2px solid var(--ring); outline-offset: 2px; }
.option-key {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted-fg);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.option input:checked + .option-body .option-key {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
}
.option-text { line-height: 1.7; }

/* ── شريط التسليم الثابت ────────────────────────────────────── */

.submitbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--card) 95%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 12px 0;
  margin-top: 20px;
}
.progress { height: 6px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.progress > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  transition: width 0.25s;
}
.bar { height: 8px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; }
.bar-pre > span { background: var(--chart-pre); }
.bar-post > span { background: var(--chart-post); }

/* ── حلقة الدرجة ────────────────────────────────────────────── */

.ring { position: relative; display: inline-grid; place-items: center; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring-label { position: absolute; text-align: center; line-height: 1.1; }
.ring-label b { font-size: 20px; font-weight: 800; }
.ring-label span { font-size: 10px; color: var(--muted-fg); font-weight: 700; }

/* ── الجداول ────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 640px;
}
table.data th,
table.data td { padding: 12px 14px; text-align: start; vertical-align: top; }
table.data thead th {
  background: var(--secondary);
  color: var(--muted-fg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
table.data tbody tr { border-top: 1px solid var(--border); }
table.data tbody tr:hover { background: color-mix(in srgb, var(--accent) 50%, transparent); }
table.data td.tight { white-space: nowrap; }

/* ── لوحة الإدارة ───────────────────────────────────────────── */

.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 264px;
  flex: 0 0 264px;
  background: var(--sidebar);
  border-inline-start: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
}
.sidebar-brand { padding: 24px 20px 16px; text-align: center; }
.sidebar-brand img { width: 132px; height: auto; }
.sidebar-brand .name { margin-top: 14px; font-size: 17px; font-weight: 800; color: var(--primary); }
.sidebar-brand .sub { font-size: 11px; color: var(--muted-fg); margin-top: 2px; }
.sidebar-divider {
  height: 1px;
  margin: 0 22px 10px;
  background: linear-gradient(to left, transparent, var(--sidebar-border), transparent);
}
.sidebar nav { padding: 0 10px 16px; flex: 1 1 auto; overflow-y: auto; }
.nav-group + .nav-group { margin-top: 18px; }
.nav-group > h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted-fg) 80%, transparent);
  padding: 0 12px 6px;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sidebar-fg);
  transition: background-color 0.15s, color 0.15s;
}
.nav-item:hover { background: color-mix(in srgb, var(--sidebar-accent) 70%, transparent); color: var(--primary); }
.nav-item.is-active { background: var(--sidebar-accent); color: var(--accent-fg); font-weight: 700; }
.nav-item.is-active::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-end: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--primary);
}
.nav-item .ico { flex: 0 0 auto; width: 18px; height: 18px; opacity: 0.8; }
.nav-item.is-danger { color: var(--danger); }
.nav-item.is-danger:hover { background: var(--danger-soft); color: var(--danger); }

.sidebar-foot {
  border-top: 1px solid var(--sidebar-border);
  padding: 12px 20px;
  font-size: 11px;
  color: var(--muted-fg);
}

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.main-head {
  position: sticky;
  top: 0;
  z-index: 25;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.main-body { padding: 22px 20px 40px; flex: 1 1 auto; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.page-head h1 { font-size: clamp(20px, 3vw, 26px); }
.page-head p { margin-top: 6px; color: var(--muted-fg); font-size: 13px; max-width: 62ch; }

.menu-toggle { display: none; }

/* ── بطاقة المؤشّر ──────────────────────────────────────────── */

.stat { padding: 18px 20px; }
.stat .label { font-size: 12px; font-weight: 700; color: var(--muted-fg); }
.stat .value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.stat .hint { font-size: 11px; color: var(--muted-fg); margin-top: 8px; line-height: 1.6; }

/* ── الرسوم ─────────────────────────────────────────────────── */

.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-inline-end: 6px; }
.legend .pre i { background: var(--chart-pre); }
.legend .post i { background: var(--chart-post); }

.chart { width: 100%; overflow-x: auto; }
.chart svg { display: block; max-width: 100%; height: auto; }
.chart text { font-family: inherit; }

.bars { display: grid; gap: 14px; margin-top: 16px; }
.bars-row { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; }
.bars-label { font-size: 12px; font-weight: 700; color: var(--muted-fg); }
.bars-pair { display: grid; gap: 5px; }
.bars-line { display: grid; grid-template-columns: 1fr 44px; gap: 8px; align-items: center; }
.bars-track { height: 14px; border-radius: 7px; background: var(--muted); overflow: hidden; }
.bars-fill { height: 100%; border-radius: 7px; }
.bars-value {
  font-size: 11px;
  font-weight: 700;
  text-align: end;
  font-variant-numeric: tabular-nums;
  color: var(--muted-fg);
}

/* باركود المرحلة أسفل بطاقتها في الصفحة الرئيسية.
   يشترك مع البطاقة في متغيّر `--phase-color` فيتناسق إطاره مع شريطها. */
.phase-qr {
  margin-top: 10px;
  padding: 14px 12px 12px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--phase-color);
  border-radius: 16px;
  background: var(--card);
  text-align: center;
}
.phase-qr-code {
  display: inline-block;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  line-height: 0;
}
.phase-qr-code svg { display: block; width: 168px; height: 168px; }
.phase-qr .tiny { margin-top: 8px; }

/* ── أهداف اللمس ────────────────────────────────────────────
   الإصبع لا يصيب هدفاً أصغر من نحو 40 بكسل بثقة (توصية آبل 44، غوغل 48).
   القياس على خمسة عروض هاتف أظهر عنصرين دون ذلك، فرُفعا هنا. */

/* رقاقة تصفية النتائج — كانت 30 بكسل */
.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  transition: background-color 0.15s, color 0.15s;
}

/* اسم الموظف في جدول النتائج — كان 21 بكسل (ارتفاع السطر).
   الحشو الرأسي مع هامش سالب يوسّع مساحة اللمس بلا أن يزيد ارتفاع الصفّ. */
.row-link {
  display: inline-block;
  padding-block: 7px;
  margin-block: -7px;
  font-weight: 700;
}
.row-link:hover { color: var(--primary); }

/* رابط نصّي في تذييل — كان 18 بكسل، وهو ارتفاع السطر وحده */
.foot-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  margin-inline-end: -10px;
  border-radius: 10px;
  font-weight: 700;
  transition: background-color 0.15s, color 0.15s;
}
.foot-link:hover { background: var(--accent); color: var(--accent-fg); }

/* ── شريط مشاركة الباركود (لوحة الإدارة) ────────────────────── */

.share-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.share-btn:hover {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--accent-fg);
}
.share-btn.is-done {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  color: var(--success);
}
.share-ico { font-size: 13px; line-height: 1; }

/* ── الباركود ───────────────────────────────────────────────── */

.qr-sheet { text-align: center; }
.qr-frame {
  display: inline-block;
  background: #fff;
  border: 4px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 20px;
  padding: 14px;
  line-height: 0;
  margin-top: 18px;
}
.qr-frame svg { width: 230px; height: 230px; }
.qr-url {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: var(--secondary);
  color: var(--muted-fg);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11px;
  margin-top: 10px;
}

/* ── شريط التسليم على الشاشات القصيرة ───────────────────────
   الشريط لاصق، فالمحتوى يمرّ تحته أثناء التمرير — وهذا سلوك أصيل لكل شريط
   إجراء سفلي. لكنه كان يشغل 67 بكسل من شاشة ارتفاعها 568، فيغطّي خياراً
   كاملاً في أوّل مشهد. القياس على iPhone SE أظهر 54 بكسل مغطّاة.
   هنا يُضغط إلى النصف تقريباً: يُحذف سطر «متبقٍ N سؤال» — وعدّاده مكرّر أصلاً
   في رأس النموذج (N / 5) — ويُقلَّص الحشو وارتفاع الزرّ. */
@media (max-height: 680px), (max-width: 360px) {
  .submitbar { padding: 8px 0; margin-top: 14px; }
  .submitbar [data-remaining] { display: none; }
  .submitbar .btn { height: 38px; padding-inline: 18px; }
}

/* ── الجوال ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.2s;
    box-shadow: -12px 0 30px -20px rgba(0, 0, 0, 0.5);
  }
  html[dir="rtl"] .sidebar { transform: translateX(100%); }
  .shell.is-open .sidebar { transform: translateX(0); }
  .shell.is-open .scrim {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.42);
  }
  .menu-toggle { display: inline-grid; }
}

@media (max-width: 560px) {
  .card-pad { padding: 16px; }
  .hero { padding: 26px 16px; }
  .qr-frame svg { width: 190px; height: 190px; }
}

/* ── الطباعة ────────────────────────────────────────────────── */

@media print {
  @page { margin: 12mm; }
  body { background: #fff !important; color: #000; }
  .no-print, .topbar, .sidebar, .main-head, .submitbar { display: none !important; }
  .main-body { padding: 0; }
  .card { box-shadow: none; border-color: #ddd; }
  .card-link:hover { transform: none; }
  .print-page { break-after: page; page-break-after: always; }
  .print-keep { break-inside: avoid; page-break-inside: avoid; }
  .arabesque { background: #fff !important; color: #000 !important; }
  .arabesque .chip { background: #f2f2f2; color: #333; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}