/* ============================================================================
   ضلال — طبقة التصميم المشتركة
   ============================================================================

   لماذا هذا الملف موجود
   ---------------------
   كانت كل وحدة تحمل لوحة ألوانها: ٢٤١ لونًا مكتوبًا يدويًّا في خمسة ملفات،
   وأخضرَين مختلفين، وأربع درجات رمادية للحدّ نفسه. فيبدو البريد منتجًا
   والمهامّ منتجًا آخر. هنا مصدرٌ واحد للحقيقة: الألوان والمسافات والحواف
   والظلال. الوحدات تستهلك المتغيّرات ولا تخترع قيمًا.

   التحميل بعد styles.css وقبل ملفات الوحدات: فهو يُعيد تعريف الرموز الأساسية
   التي بُنيت عليها، ثم تبني الوحدات فوقه.

   هويّة ضلال: لونان لا ثالث لهما
   ------------------------------
   أخضر ضلال الداكن #24483F، وبيج دافئ #F3EFE7. وما عداهما أبيضُ ورماديّ
   محايد للأسطح والنصّ والحدود لا غير. لا أزرق ولا بنفسجيّ ولا برتقاليّ ولا
   أصفر. والأحمر لا يظهر إلا حيث يكون وظيفيًّا: خطأ أو حذف.

   البيج أرضيةُ التطبيق كلّه — لا أبيض ناصع — والأبيض يرتفع فوقه أسطحًا
   للمحتوى. والأخضر للفعل والهوية: الزرّ الأساسي، والتنقّل المفعَّل، والمحدَّد،
   والتركيز. الرماديّ نفسه دافئ لا بارد، وإلا اصطدم بالبيج.
   ========================================================================= */

:root {
  /* ---- لونا الهوية ------------------------------------------------------ */
  --dh-green: #24483F;         /* أخضر ضلال الداكن */
  --dh-beige: #F3EFE7;         /* البيج الدافئ */

  /* ---- الأسطح: بيج في الأسفل، وأبيض فوقه ------------------------------- */
  --bg: #F3EFE7;               /* أرضية التطبيق — بيج الهوية نفسه */
  --surface: #FFFFFF;          /* سطح المحتوى */
  --surface-2: #FAF8F3;        /* سطح ثانويّ: أبيض مائل للدفء */
  --surface-hover: #EFE9DE;    /* التمرير فوق العناصر */
  --beige-deep: #EAE3D5;       /* فصل الأقسام والصفّ المحدَّد الهادئ */
  --bg-sunken: #EFEADF;        /* الشريط الجانبي: أغمق قليلًا من الأرضية */

  /* ---- الأخضر: الفعل والهوية ------------------------------------------- */
  --brand: #24483F;
  --brand-hover: #1A3630;
  --brand-soft: #E6EDE9;       /* أرضية خضراء خافتة تصلح فوق البيج */
  --brand-ink: #24483F;
  --brand-line: #C3D2CC;

  /* ---- النصّ: رماديّ دافئ لا بارد -------------------------------------- */
  --ink: #1F2A26;
  --ink-2: #5E6A64;
  --muted: #8B9089;
  --ink-inverse: #FFFFFF;

  /* ---- الحدود: خافتة، ودافئة لتنسجم مع البيج --------------------------- */
  --line: #E3DDD0;
  --line-soft: #EBE5D9;
  --line-strong: #D3CBBA;

  /* ---- الحالات: الأخضر للإيجابي، والمحايد للباقي، والأحمر للخطأ وحده --- */
  --ok: #24483F;
  --ok-soft: #E6EDE9;
  /* «تحذير» بلا برتقاليّ ولا أصفر: بيج أعمق ونصّ رماديّ دافئ. */
  --warn: #6B6152;
  --warn-soft: #F0EADD;
  --warn-line: #DFD6C4;
  --danger: #A6423B;           /* للخطأ والحذف لا غير */
  --danger-soft: #F6EBEA;
  --danger-line: #E6D2CF;

  /* ---- الحواف (القسم أ) ------------------------------------------------- */
  --r-sm: 10px;                /* الحقول والأزرار */
  --r-md: 14px;                /* البطاقات واللوحات */
  --r-lg: 14px;
  --r-dialog: 16px;            /* النوافذ */
  --r-badge: 8px;              /* الشارات الصغيرة */
  --r-pill: 999px;
  --radius: var(--r-md);

  /* ---- الظلال: اثنان فقط لا غير ---------------------------------------- */
  /* الظلّ يفصل الأسطح الكبيرة فقط — لا بطاقات طافية في كل مكان. */
  --shadow-sm: 0 1px 2px rgba(36, 72, 63, 0.05);
  --shadow: 0 1px 2px rgba(36, 72, 63, 0.05);
  --shadow-lg: 0 10px 30px rgba(36, 72, 63, 0.10);
  /* حلقة التركيز: أخضر الهوية بشفافية منخفضة، موحّدة في كل الحقول. */
  --focus-ring: 0 0 0 3px rgba(36, 72, 63, 0.13);

  /* ---- المسافات: 4 / 8 / 12 / 16 / 24 / 32 / 40 ------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;

  /* ---- الخطّ (القسم أ) --------------------------------------------------- */
  --font: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --fs-page: 28px;             /* عنوان الصفحة */
  --fs-section: 20px;          /* عنوان القسم */
  --fs-card: 16px;             /* عنوان البطاقة */
  --fs-body: 14px;
  --fs-meta: 12px;
  --lh-ar: 1.6;

  --fs-xs: var(--fs-meta);
  --fs-sm: 13px;
  --fs-md: var(--fs-body);
  --fs-lg: var(--fs-card);
  --fs-xl: var(--fs-section);
  --fs-2xl: var(--fs-page);

  /* ---- توافق مع أسماء الوحدات القائمة ----------------------------------- */
  --accent: var(--brand);
  --accent-soft: var(--brand-soft);
  --a-brand: var(--brand);
  --a-brand-ink: var(--brand-ink);
  --a-line-soft: var(--line-soft);
  --a-surface-2: var(--surface-2);
  --a-warn: var(--warn);
  --a-warn-soft: var(--warn-soft);
  --rp-brand: var(--brand);
  --rp-brand-soft: var(--brand-soft);
  --rp-brand-line: var(--brand-line);
  --rp-ink: var(--ink);
  --rp-line: var(--line);
  --rp-soft: var(--surface-2);
}

/* ==========================================================================
   العناصر المشتركة — زرّ واحد وحقل واحد لكل المنصّة
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 40px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: 600 var(--fs-body) / 1 var(--font);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--surface-hover); }
.btn:disabled { opacity: 0.55; cursor: default; }

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink-inverse);
}
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-hover); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--ink-inverse); }
.btn-danger:hover { filter: brightness(0.94); }

.btn-sm { height: 32px; padding: 0 var(--s-3); font-size: var(--fs-meta); }

/* الحقول: ٤٠ ارتفاعًا، حدّ قويّ، وتركيز أخضر بهالة ١٠٪ */
.input,
.select,
.textarea,
.m-input {
  width: 100%;
  height: 40px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: 400 var(--fs-body) / 1.6 var(--font);
}
.input:focus,
.select:focus,
.textarea:focus,
.m-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
.textarea,
textarea.m-input {
  height: auto;
  min-height: 96px;
  padding: var(--s-3);
  resize: vertical;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

/* النوافذ: حافة ١٦ وظلّ مرتفع */
.dialog, .modal, dialog {
  border-radius: var(--r-dialog);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--s-2);
  border-radius: var(--r-badge);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-meta);
  font-weight: 600;
}
.badge-brand { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand); }
.badge-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.badge-danger { background: var(--danger-soft); border-color: var(--danger-soft); color: var(--danger); }

/* ==========================================================================
   الصفحة الرئيسية (القسم ج)
   ========================================================================== */

.home { padding: var(--s-6); background: var(--bg); min-height: 100%; }
.home-inner { max-width: 1080px; margin: 0 auto; }

.home-head { margin-bottom: var(--s-6); }
.home-greet { margin: 0 0 var(--s-1); font-size: var(--fs-page); font-weight: 600; color: var(--ink); }
.home-date { margin: 0; color: var(--ink-2); font-size: var(--fs-body); }

.home-alert {
  margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  color: var(--warn);
  font-size: var(--fs-body);
}

/* أربع بطاقات وصول سريع، بارتفاع ١١٦ بكسل على الأقلّ */
.home-tiles {
  display: grid;
  /* ثلاث بطاقات بعد إزالة المساعد — تُوزَّع بالتساوي بلا فراغ رابع. */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.home-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 116px;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.home-tile:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
/* الأيقونة داخل حاوية ٤٠×٤٠ بلون العلامة الفاتح */
.home-tile-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  font-size: 18px;
}
.home-tile-title { font-size: var(--fs-card); font-weight: 600; }
.home-tile-meta { font-size: var(--fs-meta); color: var(--ink-2); margin-top: auto; }

/* آخر ما عملت عليه — لوحة بيضاء بصفوف، لا جدول */
.home-recent-t {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-section);
  font-weight: 600;
  color: var(--ink);
}
.home-recent-body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.home-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 64px;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.home-row:last-child { border-bottom: 0; }
.home-row:hover { background: var(--surface-hover); }
.home-row-icon {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-badge);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 15px;
}
.home-row-main { flex: 1; min-width: 0; }
.home-row-t {
  font-size: var(--fs-body); font-weight: 500; line-height: var(--lh-ar);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  unicode-bidi: plaintext;
}
.home-row-s {
  font-size: var(--fs-meta); color: var(--ink-2); margin-top: 2px;
  unicode-bidi: plaintext;
}
.home-kind {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--r-badge);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-weight: 600;
}
.home-row-side { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.home-row-date { font-size: var(--fs-meta); color: var(--muted); white-space: nowrap; }
.home-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); margin-inline-end: 6px; vertical-align: middle;
}
.home-warn {
  padding: 1px 6px; border-radius: var(--r-badge);
  background: var(--danger-soft); color: var(--danger); font-weight: 600;
}

/* ==========================================================================
   نموذج «مهمة من رسالة»
   ========================================================================== */

.m-form { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); }
.m-field { display: flex; flex-direction: column; gap: var(--s-1); }
.m-field-k { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.m-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.m-input {
  width: 100%;
  padding: 9px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: 400 var(--fs-md) / 1.7 var(--font);
}
.m-input:focus {
  outline: none;
  border-color: var(--brand-line);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.m-ghost {
  height: 38px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font: 600 var(--fs-md) / 1 var(--font);
  cursor: pointer;
}
.m-ghost:hover { background: var(--surface-hover); }

/* ==========================================================================
   الحالات الفارغة والتحميل والخطأ (القسم ك)
   ========================================================================== */

.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-6) var(--s-4);
  text-align: center;
}
.empty-state-icon { font-size: 22px; opacity: 0.7; }
.empty-state-t { font-size: var(--fs-card); font-weight: 600; color: var(--ink); }
.empty-state-s { font-size: var(--fs-body); color: var(--ink-2); max-width: 42ch; }

.skeleton {
  height: 14px; border-radius: var(--r-badge);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-hover) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: dh-skel 1.3s ease infinite;
}
@keyframes dh-skel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* الخطأ كتلة مضمّنة صغيرة، لا صفحة حمراء */
.error-block {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--danger-soft);
  background: var(--danger-soft);
  border-radius: var(--r-sm);
  color: var(--danger);
  font-size: var(--fs-body);
}

/* ==========================================================================
   الاستجابة (القسم ل)
   ========================================================================== */

/* لوحي: ٧٦٨ – ١١٩٩ */
@media (max-width: 1199px) {
  .home { padding: 20px; }
  .home-tiles { grid-template-columns: repeat(3, 1fr); }
}

/* جوّال: أقلّ من ٧٦٨ */
@media (max-width: 767px) {
  .home { padding: var(--s-3); }
  .home-greet { font-size: 22px; }
  .home-tiles { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .home-tile { min-height: 104px; padding: var(--s-4); }
  .home-row-date { display: none; }
  .m-field-row { grid-template-columns: 1fr; }
  /* ارتفاع لمس لا يقلّ عن ٤٤ */
  .btn, .input, .select, .m-input, .m-ghost { min-height: 44px; }
  /* النوافذ ملء الشاشة حيث يناسب */
  .dialog, .modal { border-radius: 0; width: 100vw; max-width: 100vw; height: 100vh; }
}

/* لا فيض أفقي من محتوى عاديّ */
html, body { max-width: 100%; overflow-x: hidden; }

/* ==========================================================================
   ٧: الرئيسية — هادئة كما هي، بهوية ضلال
   ========================================================================== */

.home { background: var(--bg); }
.home-greet { color: var(--ink); font-weight: 650; }

/* البطاقات الأربع: سطح أبيض على بيج، حدّ خافت، بلا ظلّ طافٍ */
.home-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.home-tile:hover {
  background: var(--surface);
  border-color: var(--brand-line);
  box-shadow: var(--shadow-sm);
  transform: none;
}
.home-tile-icon { background: var(--brand-soft); color: var(--brand); border: none; }
.home-tile-title { color: var(--ink); font-weight: 600; }
.home-tile-meta { color: var(--ink-2); }

/* «آخر ما عملت عليه»: قائمة خفيفة، لا بطاقات ثقيلة */
.home-recent-body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none;
  overflow: hidden;
}
.home-recent-t { color: var(--ink); font-weight: 600; }
.home-row { border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.home-row:last-child { border-bottom: 0; }
.home-row:hover { background: var(--surface-hover); }
.home-row-t { color: var(--ink); }
.home-row-s, .home-row-date { color: var(--ink-2); }
.home-dot { background: var(--brand); }
.home-kind { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }

/* حلقة التركيز موحّدة في كل الحقول */
.input:focus, .select:focus, .textarea:focus, .m-input:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}