/* ==========================================================================
   البرنامج العلمي — نظام التصميم
   هوية مستلهمة من المخطوطات وفهارس الكتب، بواجهة حديثة نظيفة. Mobile-First / RTL.
   ========================================================================== */

:root {
  /* ورق ومداد */
  --c-bg: #f4efe4;
  --c-bg-2: #efe8d9;
  --c-surface: #fffdf7;
  --c-surface-2: #f7f1e4;
  --c-border: #e0d6c0;
  --c-border-strong: #cdbfa2;
  --c-ink: #241f18;
  --c-ink-soft: #5b5346;
  /* غُمِّق قليلًا (كان #8b8171) ليبقى النص الثانوي الباهت واضحًا فوق صورة الخلفية
     مهما كان ما تحته. وهو تحسين صافٍ: كان تباينه على الورق ٣٫٣:١ (دون حدّ AA)
     فصار ٥٫٨:١، ويبقى فوق ٤٫٥:١ حتى في أسوأ حالة فوق الصورة. */
  --c-ink-faint: #635c4d;

  /* أخضر داكن (اللون الأساس) */
  --c-primary: #1f5545;
  --c-primary-strong: #163c31;
  --c-primary-soft: #e0ece6;
  --c-on-primary: #fdfbf5;

  /* ألوان مساعدة */
  --c-accent: #8a6a2f; /* ذهبي مكسور، يستخدم بحذر */
  --c-accent-soft: #f2e9d5;
  --c-blue: #1f4a63;
  --c-blue-soft: #e2ecf2;
  --c-done: #1f6b4d;
  --c-done-soft: #dff0e5;
  --c-progress: #8a6a2f;
  --c-progress-soft: #f5ecd8;
  --c-idle: #6f6757;
  --c-idle-soft: #eee8db;
  --c-danger: #963528;
  --c-danger-soft: #f7e3df;

  /* خطوط الجهاز فقط — تُجرَّب بالترتيب حتى يوجد المتاح على نظام المستخدم */
  --font-title: 'Amiri', 'Scheherazade New', 'Sakkal Majalla', 'Traditional Arabic', 'Noto Naskh Arabic',
    'Times New Roman', Georgia, serif;
  --font-ui: 'Tajawal', 'Dubai', 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', system-ui, -apple-system,
    'Helvetica Neue', sans-serif;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(60, 45, 20, 0.07);
  --shadow: 0 3px 14px rgba(60, 45, 20, 0.09);
  --shadow-lg: 0 12px 34px rgba(50, 38, 18, 0.18);

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --nav-h: 62px;
  --content-max: 900px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background-color: var(--c-bg);
  /* ورق معتّق خفيف + زخرفة هندسية دقيقة جدًا — تبقى أساسًا تحت صورة الخلفية،
     وتظهر وحدها إن لم تتوفر الصورة، فلا تنكسر الهوية في أي حال. */
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255, 253, 247, 0.75), transparent 45%),
    radial-gradient(circle at 85% 0%, rgba(224, 236, 230, 0.5), transparent 40%),
    repeating-linear-gradient(45deg, rgba(138, 106, 47, 0.035) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(31, 85, 69, 0.03) 0 1px, transparent 1px 14px);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
  color: inherit;
}

a {
  color: var(--c-primary);
}

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================== صورة الخلفية ==============================
   تُرسم في عنصر زائف ثابت لا بـ background-attachment: fixed — لأن الأخير
   مكسور على Safari في iOS (يقفز مع التمرير ويتمدّد عند تغيير الاتجاه).
   والعنصر الثابت يعمل في الوضعين الأفقي والرأسي بلا قفز ولا تشويه.

   الصورة تُوضع في assets/background.jpg (ومعها نسخة webp إن توفرت). وإن غابت،
   لا يحدث خطأ ولا فراغ: تبقى خلفية الورق والتدرّجات أعلاه ظاهرة كما هي.
   ========================================================================== */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: var(--bg-image, none);
  background-size: cover;       /* تغطية كاملة بلا تمدّد يشوّه النسب */
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* طبقة لونية شفافة فوق الصورة.
   **لونها ورقيّ فاتح لا داكن** عن قصد: نصوص التطبيق كلها مداد داكن على ورق،
   فطبقة داكنة كانت ستقلب التباين وتُخفي النص خارج البطاقات (عناوين الأقسام
   والملاحظات). والفاتحة تُبقي كل نص وبطاقة وزر بوضوحه الحالي تمامًا، وتُظهر
   الصورة خلفها هادئة، مع لمسة خضراء وذهبية من ألوان الهوية. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(244, 239, 228, 0.9) 0%, rgba(247, 241, 228, 0.9) 45%, rgba(244, 239, 228, 0.92) 100%),
    radial-gradient(circle at 50% 8%, rgba(31, 85, 69, 0.1), transparent 55%),
    radial-gradient(circle at 82% 4%, rgba(138, 106, 47, 0.1), transparent 45%);
}

/* على الشاشات الصغيرة يُشدّ الحجاب قليلًا: مساحة القراءة أضيق والتباين أهم. */
@media (max-width: 560px) {
  body::after {
    background:
      linear-gradient(180deg, rgba(244, 239, 228, 0.9) 0%, rgba(247, 241, 228, 0.9) 45%, rgba(244, 239, 228, 0.92) 100%),
      radial-gradient(circle at 50% 6%, rgba(31, 85, 69, 0.09), transparent 55%);
  }
}

/* الطباعة لا تحمل خلفية إطلاقًا. */
@media print {
  body::before,
  body::after {
    display: none !important;
  }
}

/* ------------------------------- الهيكل العام ------------------------------ */

.app-root {
  min-height: 100vh;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--s5));
}

.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-strong) 100%);
  color: var(--c-on-primary);
  padding: var(--s3) var(--s4);
  box-shadow: var(--shadow);
}

.appbar__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 40px;
}

.appbar__title {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appbar__sub {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.82;
  letter-spacing: 0.04em;
}

.appbar__btn {
  background: rgba(253, 251, 245, 0.14);
  border: 1px solid rgba(253, 251, 245, 0.22);
  color: var(--c-on-primary);
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}

.appbar__btn:active {
  transform: scale(0.96);
}

.page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

/* صفحة عريضة للجداول الطويلة (التقارير) على الشاشات الكبيرة */
@media (min-width: 1000px) {
  .page--wide {
    max-width: 1200px;
  }
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}

.section__title {
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.section__title::before {
  content: '';
  width: 4px;
  height: 1.1em;
  background: var(--c-accent);
  border-radius: 2px;
  flex: none;
}

.muted {
  color: var(--c-ink-soft);
  font-size: 0.9rem;
}

.faint {
  color: var(--c-ink-faint);
  font-size: 0.82rem;
}

.nowrap {
  white-space: nowrap;
}

/* --------------------------------- بطاقات -------------------------------- */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--s4);
  position: relative;
}

/* بطاقة تشبه بطاقة الفهرس: خيط جانبي ملوّن */
.card--index {
  padding-inline-start: calc(var(--s4) + 6px);
}

.card--index::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: var(--radius-full);
  background: var(--c-accent);
  opacity: 0.55;
}

.card__title {
  font-family: var(--font-title);
  font-size: 1.12rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .grid--nodes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .grid--nodes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}

@media (min-width: 560px) {
  .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* شبكة أضيق للملخص المختصر في الصفحة الرئيسية (أربعة أرقام بلا ازدحام). */
.stat-grid--tight {
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.stat-grid--tight .stat {
  padding: var(--s2);
}

/* ------------------------------ بطاقات المؤشرات ----------------------------- */

.kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

@media (min-width: 560px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kpi {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--s3);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.kpi__title {
  font-family: var(--font-title);
  font-size: 1.02rem;
  color: var(--c-primary);
  margin-bottom: var(--s2);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--c-border);
}

.kpi__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  padding: 3px 0;
  font-size: 0.88rem;
}

.kpi__k {
  color: var(--c-ink-soft);
  min-width: 0;
}

.kpi__v {
  font-weight: 600;
  white-space: nowrap;
}

/* -------------------------------- رقائق الفترة ------------------------------ */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.chip-btn {
  min-height: 40px;
  padding: 6px var(--s3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-full);
  background: var(--c-surface);
  color: var(--c-ink-soft);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.chip-btn--on {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-on-primary);
  font-weight: 600;
}

.stat {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--s3);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.stat__value {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.2;
}

.stat__label {
  font-size: 0.8rem;
  color: var(--c-ink-soft);
}

/* -------------------------------- التقدّم -------------------------------- */

.bar {
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  overflow: hidden;
}

.bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-primary), #2f7a63);
  border-radius: var(--radius-full);
  transition: width 0.35s ease;
}

.bar--sm {
  height: 6px;
}

.progress-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.progress-row .bar {
  flex: 1;
}

.progress-row__pct {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 3.2em;
  text-align: end;
}

/* -------------------------------- الشارات -------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}

.chip--done {
  background: var(--c-done-soft);
  color: var(--c-done);
  border-color: #bfe0cd;
}

.chip--progress {
  background: var(--c-progress-soft);
  color: var(--c-progress);
  border-color: #e6d5ad;
}

.chip--idle {
  background: var(--c-idle-soft);
  color: var(--c-idle);
  border-color: var(--c-border);
}

.chip--danger {
  background: var(--c-danger-soft);
  color: var(--c-danger);
  border-color: #e8c6bf;
}

.chip--info {
  background: var(--c-blue-soft);
  color: var(--c-blue);
  border-color: #cadce6;
}

.chip--plain {
  background: var(--c-surface-2);
  color: var(--c-ink-soft);
  border-color: var(--c-border);
}

/* -------------------------------- الأزرار -------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-ink);
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-on-primary);
}

.btn--primary:hover {
  background: var(--c-primary-strong);
}

.btn--ghost {
  background: transparent;
}

.btn--danger {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: #fff;
}

.btn--sm {
  min-height: 36px;
  padding: 0 var(--s3);
  font-size: 0.85rem;
}

.btn--icon {
  min-height: 38px;
  width: 38px;
  padding: 0;
  flex: none;
}

.btn--block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.fab {
  position: fixed;
  inset-inline-end: var(--s4);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--s3));
  z-index: 25;
  min-height: 52px;
  padding: 0 var(--s4);
  border-radius: var(--radius-full);
  background: var(--c-primary);
  color: var(--c-on-primary);
  border: none;
  box-shadow: var(--shadow-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 700;
  cursor: pointer;
}

/* -------------------------------- التنقّل -------------------------------- */

.nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  display: flex;
  box-shadow: 0 -2px 12px rgba(60, 45, 20, 0.07);
}

.nav__item {
  flex: 1;
  border: none;
  background: none;
  color: var(--c-ink-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0;
  min-width: 0;
}

.nav__item--active {
  color: var(--c-primary);
  font-weight: 700;
}

.nav__item--active svg {
  stroke-width: 2.2;
}

/* -------------------------------- النماذج -------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--s3);
}

.field__label {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--c-ink-soft);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px var(--s3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
}

.textarea {
  min-height: 84px;
  resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--c-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}

@media (min-width: 560px) {
  .field-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* حقلا «من صفحة / إلى صفحة» يبقيان جنبًا إلى جنب على الجوال أيضًا:
   حقلان رقميان قصيران، وفصلهما سطرين يطيل النموذج بلا فائدة. */
.field-row--pages {
  grid-template-columns: 1fr 1fr;
}

.hint {
  font-size: 0.78rem;
  color: var(--c-ink-faint);
}

.error-text {
  color: var(--c-danger);
  font-size: 0.85rem;
}

/* ----------------------- مبدّل بين طريقتين (segmented) ---------------------- */

.seg {
  display: flex;
  gap: 0;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.seg__btn {
  flex: 1;
  min-height: 46px;
  padding: 8px var(--s2);
  border: none;
  background: var(--c-surface);
  color: var(--c-ink-soft);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.seg__btn + .seg__btn {
  border-inline-start: 1px solid var(--c-border);
}

.seg__btn--on {
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-weight: 600;
}

/* ------------------------------- صناديق تنبيه ------------------------------ */

.callout {
  background: var(--c-primary-soft);
  border: 1px solid var(--c-border);
  border-inline-start: 4px solid var(--c-primary);
  border-radius: var(--radius-sm);
  padding: var(--s3);
  margin: var(--s3) 0;
  font-size: 0.9rem;
}

.callout--warn {
  background: var(--c-progress-soft);
  border-inline-start-color: var(--c-progress);
}

.callout--muted {
  background: var(--c-idle-soft);
  border-inline-start-color: var(--c-idle);
}

/* ------------------------------ نوافذ ورسائل ------------------------------ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(36, 31, 24, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

@media (min-width: 640px) {
  .overlay {
    align-items: center;
    padding: var(--s4);
  }
}

.modal {
  background: var(--c-surface);
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg);
  padding: var(--s4);
}

@media (min-width: 640px) {
  .modal {
    border-radius: var(--radius-lg);
  }
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--c-border);
}

.modal__title {
  font-size: 1.15rem;
}

.modal__actions {
  display: flex;
  gap: var(--s2);
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: var(--s4);
}

.toast-root {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--s3));
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  pointer-events: none;
  padding: 0 var(--s4);
}

.toast {
  pointer-events: auto;
  background: var(--c-ink);
  color: #fdfbf5;
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--s3);
  max-width: 520px;
  width: 100%;
  font-size: 0.9rem;
}

.toast__btn {
  background: rgba(253, 251, 245, 0.16);
  border: 1px solid rgba(253, 251, 245, 0.3);
  color: inherit;
  border-radius: var(--radius-sm);
  min-height: 34px;
  padding: 0 var(--s3);
  cursor: pointer;
  flex: none;
}

/* -------------------------------- القوائم -------------------------------- */

.list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--s3) var(--s3) var(--s3) var(--s3);
  padding-inline-start: calc(var(--s3) + 6px);
  position: relative;
}

.item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: var(--radius-full);
  background: var(--c-idle);
  opacity: 0.45;
}

.item--done::before {
  background: var(--c-done);
  opacity: 0.85;
}

.item--progress::before {
  background: var(--c-progress);
  opacity: 0.85;
}

.item__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
}

.item__title {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  margin-top: 4px;
}

.item__actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px dashed var(--c-border);
}

.item__order {
  font-size: 0.72rem;
  color: var(--c-ink-faint);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full);
  min-width: 26px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 3px;
}

.stage-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-ink-soft);
  border-radius: var(--radius-full);
  min-height: 34px;
  padding: 0 var(--s3);
  font-size: 0.8rem;
  cursor: pointer;
}

.stage-toggle--on {
  background: var(--c-done-soft);
  border-color: #bfe0cd;
  color: var(--c-done);
  font-weight: 700;
}

.status-select {
  min-height: 38px;
  padding: 0 var(--s2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  font-size: 0.85rem;
  max-width: 100%;
}

/* -------------------------------- الجداول -------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  -webkit-overflow-scrolling: touch;
}

table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 100%;
}

table.tbl th,
table.tbl td {
  padding: 8px var(--s3);
  text-align: start;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}

table.tbl th {
  background: var(--c-primary-soft);
  color: var(--c-primary-strong);
  font-weight: 700;
  white-space: nowrap;
  position: sticky;
  top: 0;
}

table.tbl tbody tr:nth-child(even) {
  background: var(--c-surface-2);
}

table.tbl tbody tr:last-child td {
  border-bottom: none;
}

.num {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------ حالات فارغة ------------------------------ */

.empty {
  text-align: center;
  padding: var(--s6) var(--s4);
  border: 1px dashed var(--c-border-strong, var(--c-border));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-surface-2) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
}

.empty__glyph {
  font-family: var(--font-title);
  font-size: 2rem;
  color: var(--c-accent);
  line-height: 1;
}

.empty__title {
  font-size: 1.1rem;
}

/* ------------------------------ لوحة التصفية ------------------------------ */

.toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--s3);
}

.toolbar__row {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.toolbar__row > * {
  flex: 1 1 150px;
  min-width: 0;
}

.tabs {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: var(--radius-full);
  min-height: 38px;
  padding: 0 var(--s3);
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}

.tab--active {
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-color: var(--c-primary);
  font-weight: 700;
}

/* ------------------------------- سجل النشاط ------------------------------ */

.log {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.log__row {
  display: flex;
  gap: var(--s3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--s3);
  box-shadow: var(--shadow-sm);
}

.log__time {
  font-size: 0.75rem;
  color: var(--c-ink-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.log__body {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.log__diff {
  font-size: 0.8rem;
  color: var(--c-ink-soft);
}

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

.print-root {
  display: none;
}

@media print {
  @page {
    size: A4;
    margin: 16mm 12mm;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .app-root,
  .nav,
  .fab,
  .toast-root,
  #overlay-root,
  .appbar {
    display: none !important;
  }

  .print-root {
    display: block !important;
  }

  .print-doc {
    max-width: none;
  }

  .print-doc h1,
  .print-doc h2 {
    break-after: avoid;
  }

  .print-doc table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
  }

  .print-doc thead {
    display: table-header-group; /* تكرار ترويسة الجدول في كل صفحة */
  }

  .print-doc tr {
    break-inside: avoid;
  }

  .print-doc th,
  .print-doc td {
    border: 1px solid #999;
    padding: 4px 6px;
    text-align: start;
  }

  .print-doc th {
    background: #e6ede9 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-doc section {
    break-inside: auto;
    margin-bottom: 10mm;
  }
}

/* أنماط مستند الطباعة (تُستعمل داخل print-root فقط) */
.print-doc {
  font-family: var(--font-ui);
  direction: rtl;
}

.print-doc__head {
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.print-doc__title {
  font-family: var(--font-title);
  font-size: 18pt;
  margin: 0;
}

.print-doc__sub {
  font-size: 10pt;
  color: #444;
}

.print-doc h2 {
  font-family: var(--font-title);
  font-size: 13pt;
  margin: 12px 0 6px;
  border-inline-start: 4px solid var(--c-accent);
  padding-inline-start: 8px;
}

/* -------------------------- إتاحة/تفاصيل مساعدة -------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

details.help {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
}

details.help > summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--c-primary);
}

details.help ul {
  margin: var(--s2) 0 0;
  padding-inline-start: var(--s4);
  font-size: 0.86rem;
  color: var(--c-ink-soft);
}

.divider {
  height: 1px;
  background: var(--c-border);
  border: none;
  margin: var(--s2) 0;
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: 6px 0;
  border-bottom: 1px dashed var(--c-border);
  font-size: 0.9rem;
}

.kv:last-child {
  border-bottom: none;
}

.kv__k {
  color: var(--c-ink-soft);
}

.kv__v {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* مخطط أعمدة بسيط للمقارنة بين العقد (بلا مكتبات) */
.chart {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.chart__row {
  display: grid;
  grid-template-columns: minmax(90px, 34%) 1fr auto;
  align-items: center;
  gap: var(--s2);
  font-size: 0.86rem;
}

.chart__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================= الصفحة الافتتاحية (الأبيات) ==================   نص لا صورة: يبقى قابلًا للنسخ والتكبير وقراءة قارئ الشاشة، وتظهر حركاته
   بخط الجهاز العربي الوقور (نسخ/أميري) ببدائل متدرجة.
   ============================================================================ */

.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + var(--s5)) var(--s4)
    calc(env(safe-area-inset-bottom, 0px) + var(--s5));
  /* الخلفية نفسها + طبقة أغمق قليلًا ليتصدّر النص */
  background-color: var(--c-primary-strong);
  background-image:
    linear-gradient(180deg, rgba(16, 44, 36, 0.88) 0%, rgba(22, 60, 49, 0.82) 50%, rgba(16, 44, 36, 0.92) 100%),
    var(--bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--c-on-primary);
  /* حركة ظهور هادئة وقصيرة */
  opacity: 0;
  transition: opacity 320ms ease;
  overflow-y: auto;
}

.splash--in {
  opacity: 1;
}

.splash--leaving {
  opacity: 0;
}

/* من يفضّل تقليل الحركة لا يُجبَر عليها. */
@media (prefers-reduced-motion: reduce) {
  .splash,
  .splash__inner {
    transition: none !important;
    animation: none !important;
  }
}

body.splash-open {
  overflow: hidden;
}

.splash__inner {
  width: min(760px, 100%);
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s5);
  transform: translateY(10px);
  transition: transform 380ms ease;
}

.splash--in .splash__inner {
  transform: translateY(0);
}

.splash__eyebrow {
  margin: 0;
  font-family: var(--font-title);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: #e8d9b0;
  opacity: 0.95;
}

.splash__eyebrow::after {
  content: '';
  display: block;
  width: 72px;
  height: 2px;
  margin: var(--s3) auto 0;
  background: linear-gradient(90deg, transparent, #c9a961, transparent);
}

.splash__poem {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  width: 100%;
}

/* البيت شطران: متجاوران على الشاشات الواسعة، ومتتاليان على الجوال بلا قص. */
.splash__verse {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
  align-items: baseline;
}

@media (min-width: 700px) {
  .splash__verse {
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
  }
}

.splash__hemistich {
  font-family: var(--font-title);
  /* يكبر بسلاسة مع الشاشة ولا يفيض */
  font-size: clamp(1.12rem, 4.4vw, 1.62rem);
  line-height: 2.15; /* مساحة كافية للحركات فوق الحروف وتحتها */
  color: #fdfbf5;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  overflow-wrap: break-word;
  text-wrap: balance;
}

.splash__enter {
  font-family: var(--font-title);
  font-size: 1.06rem;
  min-height: 52px;
  padding: 12px var(--s6);
  border-radius: var(--radius-full);
  border: 1px solid #c9a961;
  background: linear-gradient(180deg, #1f5545 0%, #163c31 100%);
  color: #f7edd6;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.splash__enter:hover {
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
}

.splash__enter:active {
  transform: scale(0.98);
}

.splash__close {
  position: absolute;
  inset-block-start: calc(env(safe-area-inset-top, 0px) + var(--s3));
  inset-inline-end: var(--s3);
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(253, 251, 245, 0.3);
  background: rgba(0, 0, 0, 0.28);
  color: #fdfbf5;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.splash__close:active {
  transform: scale(0.95);
}

/* الوضع الأفقي على الجوال: ارتفاع قليل، فتُضغط المسافات ولا يُقص النص. */
@media (max-height: 520px) {
  .splash__inner {
    gap: var(--s4);
  }

  .splash__poem {
    gap: var(--s3);
  }

  .splash__hemistich {
    font-size: clamp(0.98rem, 3.4vh, 1.2rem);
    line-height: 1.95;
  }

  .splash__enter {
    min-height: 46px;
    padding: 10px var(--s5);
  }
}
=======
/* ------------------------------ شارة المزامنة ------------------------------ */
/* تُقرأ بالنص لا باللون وحده: اللون يعزّز المعنى ولا ينفرد بحمله، فيبقى مفهومًا
   لمن لا يميّز الألوان. وتختفي على الشاشات الضيقة إبقاءً للعنوان مقروءًا. */

.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid var(--line, #d8d2c4);
  color: var(--muted, #6b6355);
  background: var(--surface-2, #f4f1ea);
}

.sync-badge__glyph { font-weight: 700; }

.sync-badge--synced { color: #1f6b3f; border-color: #bfe0cc; background: #eef7f1; }
.sync-badge--saving { color: #7a5a10; border-color: #e6d6a8; background: #fbf5e4; }
.sync-badge--offline { color: #5a5a5a; border-color: #d8d8d8; background: #f2f2f2; }
.sync-badge--error { color: #9b2c2c; border-color: #f0c6c6; background: #fdeeee; }

@media (max-width: 560px) {
  .sync-badge__text { display: none; }
}

.kv { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line, #e6e1d6); }
.kv:last-child { border-bottom: 0; }
.kv__k { color: var(--muted, #6b6355); }
.kv__v { font-weight: 600; }

/* ===================== نماذج الحساب وكلمة المرور ===================== */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.form-error,
.form-ok {
  margin: 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  border-inline-start: 3px solid;
}

.form-error {
  color: var(--c-danger);
  background: var(--c-danger-soft);
  border-inline-start-color: var(--c-danger);
}

.form-ok {
  color: var(--c-done);
  background: var(--c-done-soft);
  border-inline-start-color: var(--c-done);
}

/* حقل مع زر جانبي (إظهار/إخفاء كلمة المرور) */
.field__with-action {
  display: flex;
  gap: var(--s2);
  align-items: stretch;
}

.field__with-action .input {
  flex: 1;
  min-width: 0;
}

.field__with-action .btn {
  flex: none;
  min-width: 68px;
}

/* زر بهيئة رابط — «نسيت كلمة المرور؟» */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--c-primary);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px; /* مساحة لمس كافية على الجوال */
}

.link-btn:active {
  opacity: 0.75;
}

.list {
  margin: var(--s2) 0;
  padding-inline-start: var(--s5);
}