/* ============================================================
   app.css — تخطيط الواجهة فقط
   ------------------------------------------------------------
   قواعد ملزمة محكومة بها كل قاعدة في هذا الملف:

   ١) **لا قيمة لون ولا حجم خط واحدة مكتوبة هنا** (§17.9).
      كل لون وكل حجم خط عبر متغيّرات tokens.css التي تُحقن قيمها
      من إعدادات الهوية وقت التشغيل.

   ٢) **الخصائص المنطقية إلزامية** (§17.10):
      margin-inline-start لا margin-right · text-align:start لا right ·
      inset-inline-start لا right. الاستثناء الوحيد: الأرقام والمعرّفات
      اللاتينية تُحاذى left بـ direction:ltr صراحةً.

   ٣) المسافات وأنصاف الأقطار وارتفاع الترويسة ثوابت في الكود لا في
      لوحة التحكم (§17.8 و§20.2)، وتُعرَّف متغيّراتٍ هنا لا قيماً متناثرة.
   ============================================================ */

:root{
  /* ثوابت تخطيط — لا تُعرَض في إعدادات الهوية (§17.8) */
  --sidebar-w:248px;
  --sidebar-w-collapsed:64px;
  --content-max:1120px;
  --reading-max:860px;
  --logo-size:34px;
  --control-h:38px;
}

body{
  background:var(--surface-base);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ============================================================
   الترويسة — ثابتة أعلى الشاشة، وارتفاعها ثابت (§20.2)
   ============================================================ */
.brand{display:flex;align-items:center;gap:var(--space-2);min-width:0;}
.brand-logo{
  width:var(--logo-size);height:var(--logo-size);
  border-radius:var(--radius-sm);
  background:var(--brand-600);color:var(--brand-fg);
  display:grid;place-items:center;font-weight:700;flex:none;
  object-fit:contain;
}
.brand-names{display:flex;align-items:baseline;gap:var(--space-2);min-width:0;}
/* اسم النظام يُخفى قبل اسم الجهة عند ضيق المساحة (§20.2) */
.system-name{color:var(--gray-500);font-weight:400;white-space:nowrap;}

.header-nav{display:flex;align-items:center;gap:var(--space-1);}
.header-nav a{
  color:var(--color-subheading);text-decoration:none;
  padding-block:var(--space-2);padding-inline:var(--space-3);
  border-radius:var(--radius-sm);
}
.header-nav a:hover{background:var(--gray-100);}
.header-nav a[aria-current="page"]{color:var(--brand-600);font-weight:600;}

.icon-btn{
  width:var(--control-h);height:var(--control-h);
  display:grid;place-items:center;border-radius:var(--radius-sm);
  background:none;border:0;cursor:pointer;position:relative;
  min-width:var(--touch-min);min-height:var(--touch-min);
}
.icon-btn:hover{background:var(--gray-100);}
.badge-dot{
  position:absolute;inset-block-start:var(--space-2);inset-inline-start:var(--space-2);
  width:var(--space-2);height:var(--space-2);border-radius:50%;
  background:var(--err);
}

/* قائمة الحساب بلا JavaScript */
.menu{position:relative;}
.menu > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-2);
  padding-block:var(--space-1);padding-inline:var(--space-2);
  border-radius:var(--radius-sm);color:var(--color-subheading);
  min-height:var(--touch-min);
}
.menu > summary::-webkit-details-marker{display:none;}
.menu > summary:hover{background:var(--gray-100);}
.menu-panel{
  position:absolute;inset-block-start:calc(100% + var(--space-1));inset-inline-end:0;
  min-width:220px;z-index:30;
  background:var(--header-bg);border:1px solid var(--gray-200);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:var(--space-2);
}
.menu-panel a,.menu-panel button{
  display:block;width:100%;text-align:start;
  padding-block:var(--space-2);padding-inline:var(--space-3);
  border-radius:var(--radius-sm);color:var(--color-subheading);
  text-decoration:none;background:none;border:0;cursor:pointer;font:inherit;
}
.menu-panel a:hover,.menu-panel button:hover{background:var(--gray-100);}
.menu-head{
  padding-block:var(--space-2);padding-inline:var(--space-3);
  border-block-end:1px solid var(--gray-200);margin-block-end:var(--space-2);
}

/* ============================================================
   ترويسة الاختبار — بلا شعار ولا تنقل ولا إشعارات (§20.2)
   ============================================================ */
.exam-header{
  height:var(--header-h);
  background:var(--header-bg);
  border-block-end:1px solid var(--gray-200);
  display:flex;align-items:center;gap:var(--space-4);
  padding-inline:var(--space-6);
  position:sticky;inset-block-start:0;z-index:20;
}
.exam-cohort{
  color:var(--color-heading);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.exam-saved{display:flex;align-items:center;gap:var(--space-2);color:var(--gray-500);}
/* العدّاد يسار الشريط — موضع بارز في واجهة RTL لا يزاحم اسم الدورة (§20.2) */
.exam-timer{
  margin-inline-start:auto;
  display:flex;align-items:center;gap:var(--space-2);
  padding-block:var(--space-1);padding-inline:var(--space-3);
  border-radius:var(--radius-sm);background:var(--gray-100);
  font-variant-numeric:tabular-nums;direction:ltr;font-weight:600;
}
.exam-timer.is-warn{background:var(--warn-bg);color:var(--warn);}
.exam-timer.is-danger{background:var(--err-bg);color:var(--err);}

/* ============================================================
   التخطيط العام والشريط الجانبي (§20.2)
   ============================================================ */
.shell{display:flex;flex:1;min-height:0;align-items:stretch;}
.page{flex:1;min-width:0;}
.container{
  max-width:var(--content-max);margin-inline:auto;
  padding-inline:var(--space-6);padding-block:var(--space-8) var(--space-8);
}
.container-reading{max-width:var(--reading-max);}

.sidebar{
  width:var(--sidebar-w);flex:none;
  background:var(--header-bg);
  border-inline-end:1px solid var(--gray-200);
  padding-block:var(--space-4);
  position:sticky;inset-block-start:var(--header-h);
  align-self:flex-start;
  max-height:calc(100vh - var(--header-h));overflow-y:auto;
}
.sidebar-group{margin-block-end:var(--space-4);}
.sidebar-group-title{
  padding-block:var(--space-1);padding-inline:var(--space-6);
  color:var(--gray-500);font-size:calc(var(--fs-quote) * var(--fs-scale));
}
.sidebar a{
  display:flex;align-items:center;gap:var(--space-2);
  padding-block:var(--space-2);padding-inline:var(--space-6);
  color:var(--color-subheading);text-decoration:none;
  border-inline-start:3px solid transparent;
  min-height:var(--touch-min);
}
.sidebar a:hover{background:var(--gray-50);}
/* العنصر النشط: لون العلامة وشريط رفيع على حافته المبدئية (اليمنى في RTL) */
.sidebar a[aria-current="page"]{
  color:var(--brand-600);font-weight:600;
  background:var(--brand-50);
  border-inline-start-color:var(--brand-600);
}

/* ============================================================
   التذييل — غير ثابت، يظهر عند نهاية المحتوى (§20.2)
   ============================================================ */
.footer{
  border-block-start:1px solid var(--gray-200);
  padding-block:var(--space-6);padding-inline:var(--space-6);
  color:var(--gray-500);
  display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;
}
.footer a{color:var(--link-on-base);text-decoration:none;}
.footer a:hover{text-decoration:underline;}
.footer-end{margin-inline-start:auto;}
.footer .version{direction:ltr;font-variant-numeric:tabular-nums;}

/* ============================================================
   الشاشات العامة (الدخول، التحقق) — شاشة كاملة (§20.2)
   ============================================================ */
.guest{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-8);padding:var(--space-8);
}
.guest-brand{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;}
.guest-panel{width:100%;max-width:420px;}

/* ============================================================
   النماذج والأزرار والجداول
   ============================================================ */
.stack{display:flex;flex-direction:column;gap:var(--space-4);}
.row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;}
.row-end{margin-inline-start:auto;}

.field{display:flex;flex-direction:column;gap:var(--space-1);}
.field label{color:var(--color-subheading);text-align:start;}
.field .hint{color:var(--gray-500);font-size:calc(var(--fs-quote) * var(--fs-scale));}
.field .error{color:var(--err);font-size:calc(var(--fs-quote) * var(--fs-scale));}
.input,select,textarea{
  font-family:inherit;font-size:inherit;color:var(--color-text);
  background:var(--header-bg);
  border:1px solid var(--gray-300);border-radius:var(--radius-sm);
  padding-block:var(--space-2);padding-inline:var(--space-3);
  min-height:var(--touch-min);width:100%;text-align:start;
}
.input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--brand-600);}
/* حقول اسم المستخدم وكلمة المرور لاتينية دائماً (§3.1) */
.input[dir="ltr"]{direction:ltr;text-align:left;}

.page-head{
  display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;
  margin-block-end:var(--space-6);
}
.page-head h1{margin:0;}

.pill{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding-block:2px;padding-inline:var(--space-2);
  border-radius:var(--radius-sm);
  font-size:calc(var(--fs-quote) * var(--fs-scale));
  border:1px solid var(--gray-200);color:var(--gray-600);
}
.pill-ok{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok);}
.pill-off{background:var(--gray-100);color:var(--gray-500);}
.pill-brand{background:var(--brand-50);border-color:var(--brand-600);color:var(--brand-600);}

.muted{color:var(--gray-500);}
.empty{
  padding:var(--space-8);text-align:center;color:var(--gray-500);
  border:1px dashed var(--gray-300);border-radius:var(--radius);
}

/* الجداول الطويلة تتحول إلى بطاقات على الجوال لا إلى تمرير أفقي (§20.1) */
@media (max-width:640px){
  .sidebar{display:none;}
  .system-name{display:none;}
  .table-cards thead{display:none;}
  .table-cards tr{
    display:block;margin-block-end:var(--space-3);
    border:1px solid var(--table-border);border-radius:var(--radius);
  }
  .table-cards td{
    display:flex;justify-content:space-between;gap:var(--space-3);
    border:0;border-block-end:1px solid var(--table-border);
  }
  .table-cards td:last-child{border-block-end:0;}
  .table-cards td::before{content:attr(data-label);color:var(--gray-500);}
}

@media print{
  .header,.exam-header,.sidebar,.footer{display:none;}
}