/**
 * سمة Smart Vision — مشتقّة من Elastic، بواجهة عربية أصيلة.
 *
 * ★ لماذا تستورد "elastic-rtl.css" لا ورقة elastic الأصلية:
 *   قياسٌ على الورقة الأصلية أعطى **صفر** خاصية منطقية (inline-start/end)
 *   مقابل 243 خاصية فيزيائية (margin-left، float، left:). ومعناه أن
 *   `direction: rtl` وحده كان يقلب اتجاه النصّ ويترك الأعمدة والمسافات
 *   والأيقونات في مواضعها اللاتينية — واجهة مشوّهة أسوأ من LTR نظيف.
 *   وRoundcube نفسه لا يضع سمة dir إطلاقاً (يضع lang وحدها)، وElastic
 *   لا يحوي قاعدة RTL واحدة.
 *
 *   فالنسخة المعكوسة مولَّدة آلياً بـrtlcss من ورقة elastic:
 *       npx rtlcss elastic/styles/styles.min.css → elastic-rtl.css
 *   ثم صُحّحت مساراتها النسبية لأنها انتقلت مجلداً.
 *
 * ★ وتُعاد التوليد بعد كل ترقية لـRoundcube — وإلا بقيت الواجهة على
 *   تخطيط إصدار قديم بلا أن يشتكي شيء.
 */
@import url("fonts.css");
@import url("elastic-rtl.css");

:root {
  --sv-purple:  #51267F;
  --sv-indigo:  #4A3B8B;
  --sv-blue:    #334C8F;
  --sv-azure:   #22689E;
  --sv-cyan:    #35AEC8;
  --sv-coral:   #EA735E;
  /* نسخ مُعتِمة للنصوص الصغيرة على أبيض — الخام لا يبلغ حدّ التباين.
     درس مسجَّل من بناء لوحات BMC ويسري هنا حرفياً. */
  --sv-coral-ink: #B8452C;
  --sv-cyan-ink:  #10708A;
  --sv-grad-cool: linear-gradient(135deg, #51267F 0%, #334C8F 45%, #35AEC8 100%);
}

/* ── الاتجاه: يُفرض هنا لأن Roundcube لا يضعه */
html, body { direction: rtl; }

/* ── الخط: أكبر أثر منفرد على القراءة العربية.
      Roboto بلا محارف عربية فيسقط المتصفّح إلى خط النظام،
      ويختلف الشكل بين جهاز وآخر. */
html body,
body input, body select, body textarea, body button,
body .listing, body .menu, body .header-title,
body .popupmenu, body .propform, body .boxtitle {
  font-family: 'Tajawal', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* العربية تحتاج ارتفاع سطر أعلى من اللاتينية عند الحجم نفسه */
body, .listing li, #messagelist td { line-height: 1.7; }

/* ── ما يجب أن يبقى لاتينيّ الاتجاه داخل واجهة عربية:
      عنوان بريد أو اسم ملفّ يُعرض معكوساً يصير غير مقروء. */
input[type="email"], input[name="_user"], input[name="_pass"],
.adr, code, pre, .attachment-name, a[href^="mailto:"] {
  direction: ltr;
  text-align: start;
}
/* الأسطر المختلطة تُترك للمتصفّح ليستنتج اتجاهها من أول محرف قويّ */
#messagelist .fromto, #messagelist .subject, .message-part { unicode-bidi: plaintext; }

/* ── الهوية */
#layout-menu, #layout-menu .popover-header { background: var(--sv-grad-cool); }
#layout-menu .special-buttons a, #taskmenu a { color: rgba(255,255,255,.82); }
#taskmenu a:hover { color: #fff; }
#taskmenu a.selected { color: #fff; background: rgba(255,255,255,.14); border-radius: .4rem; }

.btn-primary, button.btn.btn-primary, #rcmloginsubmit {
  background-color: var(--sv-purple); border-color: var(--sv-purple);
}
.btn-primary:hover, button.btn.btn-primary:hover, #rcmloginsubmit:hover {
  background-color: var(--sv-indigo); border-color: var(--sv-indigo);
}
a, a:hover { color: var(--sv-azure); }

/* ── حالات الرسائل */
#messagelist tr.unread td.subject, .listing li.unread .subject {
  font-weight: 700; color: var(--sv-purple);
}
#messagelist tr.selected td, .listing li.selected { background-color: rgba(53,174,200,.12); }
.listing li.selected { border-right: 3px solid var(--sv-cyan); }

#logo, img#logo { max-height: 72px; width: auto; }

.ui.alert.alert-success { border-right-color: var(--sv-cyan-ink); }
.ui.alert.alert-danger  { border-right-color: var(--sv-coral-ink); }

/* ── الوضع الداكن: يحترم لوحتنا بدل الرمادي المحايد */
html.dark-mode #layout-menu { background: linear-gradient(135deg, #0B1020 0%, #1a1338 60%, #14405a 100%); }
html.dark-mode a { color: var(--sv-cyan); }
html.dark-mode #messagelist tr.unread td.subject { color: var(--sv-cyan); }

/* ══════════════════════════════════════════════════════════
   تصحيحات بعد أول استعمال حقيقي — 2026-08-20
   ══════════════════════════════════════════════════════════ */


/* ── عمود المهام: تسمياته العربية أطول من اللاتينية عند الحجم نفسه،
      فكانت «تسجيل الخروج» تُقصّ. توسيعٌ محسوب أفضل من إخفاء النصّ —
      الأيقونة وحدها تُلزم المستخدم بحفظ معناها. */
#layout-menu { width: 100px; min-width: 100px; }
#layout-menu #taskmenu a {
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  word-break: keep-all;
  padding-inline: 4px;
  text-align: center;
}
#layout-menu #taskmenu a .inner {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: block;
}
/* المحتوى يزاح بقدر ما اتّسع العمود */
@media screen and (min-width: 769px) {
  #layout-sidebar, #layout-list, #layout-content { margin-right: 0; }
}

/* ── الشعار: بلا لوح أبيض.
      اللوح كان يعالج التباين ويصنع مربّعاً دخيلاً. البديل ظلٌّ خفيف
      يفصله عن الخلفية بلا حدٍّ مرئي، وخلفية الترويسة تُفرَّغ
      (elastic يفرضها #2f3a3f بـ!important). */
#layout-menu .popover-header,
#layout-menu .popover-header.navbar {
  background-color: transparent !important;
  background: transparent !important;
  height: auto !important;
  line-height: normal !important;
  padding: 12px 6px 10px !important;
  border: 0 !important;
}
#layout-menu .popover-header img,
#layout-menu #logo {
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 78px !important;
  max-height: none !important;
  width: auto;
  height: auto;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.45));
}

/* ── الصندوق السفلي: كان مثبّتاً بعرض محتواه ولونه رماديّ محايد
      لا صلة له باللوحة، فبدا دخيلاً بعد توسيع العمود. */
#layout-menu .special-buttons {
  width: 100% !important;
  right: 0 !important;
  left: 0 !important;
  box-sizing: border-box;
  background-color: rgba(11,16,32,.66) !important;
  background-image: none !important;
  padding: 6px 0 !important;
  border-top: 1px solid rgba(255,255,255,.10);
}
#layout-menu .special-buttons a,
#layout-menu .special-buttons a:not(:focus) {
  background: transparent !important;
  border: 0 !important;
  width: 100%;
  text-align: center;
}
#layout-menu .special-buttons a:hover {
  background: rgba(255,255,255,.10) !important;
}