/* ============================================================
   F-MAIL · Layout — هيكل الشاشة
   ------------------------------------------------------------
   شريط علوي ٦٤ + رَيْل ٢٥٦ + لوحة وحدة بتاخد الباقي.
   القائمة والقارئ الاتنين ساكنين نفس اللوحة وبيتبادلوا مكانها
   حسب data-pane على #app — القارئ بيحلّ محلّ القائمة، ما
   بيوقف جنبها.
   ============================================================ */

.fm-app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-gradient);
}

/* ============================================================
   1) الشريط العلوي — ٦٤ بكسل
   ============================================================ */
.fm-topbar {
  flex: none;
  height: var(--fm-topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 8px;
  background: transparent;
  color: var(--on-surface-variant);
  font-size: var(--fm-fs-13);
}

/* ---------- الشعار ----------
   نسخة أفقية: الظرف يسار والاسم جنبه. مركّبة من نفس ملف الماركة
   يلي جاي منه الشعار الكامل بلوحة الدخول (شوف components.css) —
   الظرف والاسم مقصوصين منه وانحطّوا جنب بعض. السطر التعريفي
   مطروح: بعلو ٢٨ بكسل ما بينقرا.

   ليش مش الشعار المربّع متل لوحة الدخول؟ خانة التوب بار علوّها
   ٣٢ بكسل، وبهالعلو الاسم والسطر التعريفي بيصيروا غير مقروءين.

   الملف ٣٢٦×٥٦ ومنعرضه ١٦٣×٢٨، يعني ضعف الكثافة — حاد على
   شاشات 2x كمان.

   ⚠️ نسختين لأنّ "Fota" كحلي: على الثيم الغامق بيختفي. نسخة
   الغامق بترفع الكحلي لفاتح وبس — "Mail" الأزرق والظرف ما
   بينلمسوا. والخلفية شفافة بالأصل فما في مربّع أبيض.

   القياس مكتوب صريح (مش auto) حتى ما يقفز التوب بار قبل ما
   تنزل الصورة. */
.fm-topbar__brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  block-size: 32px;
  margin-inline-end: 12px;
  text-decoration: none;
}
.fm-topbar__logo {
  flex: none;
  inline-size: 163px; block-size: 28px;
  background: url("../img/logo-wide.202609162341.png") center / contain no-repeat;
}
[data-theme="dark"] .fm-topbar__logo { background-image: url("../img/logo-wide-dark.202609162341.png"); }
.fm-topbar__brand:hover .fm-topbar__logo { opacity: .85; }

/* ---------- حقل البحث الأوسط ---------- */
.fm-topbar__search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 720px;
  margin-inline: auto;
}

.fm-topbar__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}

/* نص إضافي بالشريط (اسم المجلد) — مخفي، المجلد بيبان بالرَيْل */
.fm-topbar__extra { display: none; }

/* ============================================================
   2) الجسم — رَيْل + لوحة
   ============================================================ */
.fm-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  color: var(--on-surface);
}

.fm-sidebar {
  width: var(--fm-sidebar-w);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0 16px;
  padding-inline-end: 8px;
  background: transparent;
  border: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: width var(--fm-t) var(--fm-ease);
}

/* ============================================================
   3) اللوحة الرئيسية
   ------------------------------------------------------------
   القائمة والقارئ وأي صفحة داخلية (إنشاء، إعدادات، جهات اتصال،
   تقويم) كلهن بياخدوا نفس الشكل: تدرّج اللوحة، زوايا علوية ١٦،
   وظلّ خفيف. ٨ بكسل فراغ عاليمين متل ما بالمواصفة.
   ============================================================ */
.fm-list-pane,
.fm-reader,
.fm-page {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel-gradient);
  border-radius: 16px 16px 0 0;
  box-shadow: var(--panel-shadow);
  margin-inline-end: var(--fm-panel-gap);
  overflow: hidden;
}

/* لوحة القائمة بتنزل ١٦ عن الشريط العلوي — بتفصلها عنه وبتعطي
   سطر الأفعال السريعة (.cd-actions) مساحة يتنفّس فيها.
   ⚠️ على القائمة وحدها: بوضع "القارئ عاليمين" بتلاقي رأس القارئ
   أعلى من رأس القائمة بـ١٦. لو بدك الاتنين مستوين، حطّ نفس
   القاعدة على .fm-reader كمان. */
.fm-list-pane { margin-block-start: 16px; }

.fm-panes {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 0;
  display: flex;
}

/* ---------- بلا تقسيم (الافتراضي) ----------
   القارئ بيحلّ محلّ القائمة، وبترجعلها بالسهم. */
.fm-app[data-pane="list"] .fm-reader { display: none; }
.fm-app[data-pane="reader"] .fm-list-pane { display: none; }

/* ============================================================
   لوحة القراءة
   ------------------------------------------------------------
   القائمة والقارئ ظاهرين سوا، والصف المختار بيتحمّل جنبه بدل
   ما يبدّل الشاشة.

   ⚠️ الحدّ الأدنى للعرض شرط مش تجميل: القائمة بدها ٤٢٠ والقارئ
   بدّو ٤٨٠ عالأقل حتى يضل النص مقروء. تحت هالحدّ منرجع لوضع
   "بلا تقسيم" مهما كان الإعداد — الإعداد نيّة، والشاشة هي يلي
   بتقرّر إذا بتسع.

   ⚠️ التخصيص (:where بلا وزن زايد) لازم يغلب قواعد data-pane
   فوق، فمنكتبهن بنفس المحدّد مع data-reading — وزنه أعلى
   بخاصية وحدة، وهاد كافي وواضح.
   ============================================================ */
@media (min-width: 1100px) {
  html[data-reading="right"] .fm-app[data-pane="list"] .fm-reader,
  html[data-reading="right"] .fm-app[data-pane="reader"] .fm-list-pane {
    display: flex;
  }
  html[data-reading="right"] .fm-list-pane {
    flex: none;
    inline-size: 420px;
    border-inline-end: 1px solid var(--outline);
  }
  html[data-reading="right"] .fm-reader { flex: 1; min-inline-size: 0; }

  /* القارئ ما عاد بلوحة لحاله — الحواف والظل مرة وحدة للمجموعة */
  html[data-reading="right"] .fm-list-pane {
    border-start-end-radius: 0;
    margin-inline-end: 0;
    box-shadow: none;
  }
  html[data-reading="right"] .fm-reader { border-start-start-radius: 0; }
}

@media (min-width: 900px) and (min-height: 760px) {
  html[data-reading="bottom"] .fm-panes { flex-direction: column; }
  html[data-reading="bottom"] .fm-app[data-pane="list"] .fm-reader,
  html[data-reading="bottom"] .fm-app[data-pane="reader"] .fm-list-pane {
    display: flex;
  }
  html[data-reading="bottom"] .fm-list-pane {
    flex: none;
    block-size: 42%;
    border-block-end: 1px solid var(--outline);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    box-shadow: none;
  }
  html[data-reading="bottom"] .fm-reader {
    flex: 1;
    min-block-size: 0;
    border-radius: 0;
  }
}

/* بوضع التقسيم، زر "رجوع للقائمة" ما إلو معنى — القائمة ظاهرة */
@media (min-width: 1100px) {
  html[data-reading="right"] [data-action="back"] { display: none; }
}
@media (min-width: 900px) and (min-height: 760px) {
  html[data-reading="bottom"] [data-action="back"] { display: none; }
}

.fm-list-pane__head { flex: none; }
.fm-list-pane__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

/* ---------- القارئ ---------- */
.fm-reader { animation: fm-in .25s var(--fm-ease); }
.fm-reader__head {
  flex: none;
  padding: 24px var(--fm-reader-pad) 0;
  max-width: var(--fm-reader-max);
  width: 100%;
  margin-inline: auto;
}
.fm-reader__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px var(--fm-reader-pad) 40px;
  max-width: var(--fm-reader-max);
  width: 100%;
  /* ⚠️ التوسيط لازم يكون على التلاتة (رأس/جسم/ذيل) سوا، وإلا
     بينزاح الرأس عن الجسم وبيبيّن الانحراف أوضح من الفراغ. */
  margin-inline: auto;
}
.fm-reader__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: var(--fm-reader-max);
  margin-inline: auto;
  padding: 10px var(--fm-reader-pad);
  border-block-start: 1px solid var(--outline);
  font-size: var(--fm-fs-12);
  color: var(--on-surface-variant);
}

/* ---------- الصفحات الداخلية ---------- */
.fm-page { animation: fm-in .25s var(--fm-ease); }

/* زر الرجوع — ظاهر دايماً هلق، لأنه القارئ بياكل القائمة */
.fm-back { display: inline-flex; }