/* صفحة اختيار القسم بعد تسجيل الدخول — App Launcher V1.
 *
 * لا نظامَ تصميمٍ جديد: كل لونٍ وخطٍّ ونصف قطرٍ هنا يأتي من متغيّرات
 * style.css نفسها (--accent · --panel · --border · --text · --muted)، والخط
 * هو IBM Plex Sans Arabic المستعمل في كل الصفحات. القيم الصريحة موجودة
 * كاحتياطٍ فقط لو حُمِّلت الصفحة قبل ورقة الأنماط. */

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

.lx-body {
  margin: 0;
  /* style.css (هيكل الدردشة المشترك) يثبّت body على height:100dvh مع
     overflow:hidden لأن صفحاته تمرّر داخل حاويات خاصة. هذه الصفحة تمرّر
     المستند نفسه، فلولا هذين السطرين لَقُصَّت الشبكة عند ارتفاع الشاشة على
     الهاتف (تظهر أول ثلاث بطاقات فقط بلا تمرير — علّة 2026-09-13).
     overflow:visible بالذات لا auto: أي قيمة أخرى تجعل body حاوية تمرير
     فتكسر ثبات الرأس (sticky) وتُغري بتمريرٍ مزدوج. الأفقي يبقى ممنوعاً
     عبر html{overflow-x:hidden} في style.css. */
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  display: flex;
  flex-direction: column;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  background: var(--bg, #f8fafc);
  color: var(--text, #0f172a);
  direction: rtl;
  font-size: 14px;
}

/* ═══════════ الرأس ═══════════ */

.lx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px;
  background: var(--panel, #fff);
  border-bottom: 1px solid var(--border, #e2e8f0);
  position: sticky;
  top: 0;
  z-index: 10;
}

.lx-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lx-logo { width: auto; max-width: 70px; height: 32px; object-fit: contain; }  /* logo-wide.png [brand-logo-wide-20261021-1] */
[data-theme="dark"] .lx-logo { background: #fff; padding: 3px 5px; border-radius: 7px; box-sizing: content-box; height: 26px; }
.lx-brand-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }

.lx-header-right { display: flex; align-items: center; gap: 10px; }

.lx-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--panel, #fff);
  color: var(--text-2, #334155);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.lx-icon-btn:hover { background: var(--panel-2, #f1f5f9); }

.lx-user { display: flex; align-items: center; gap: 8px; min-width: 0; }

.lx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent, #16a34a);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  flex: none;
}

.lx-user-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.lx-user-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-user-role { font-size: 11.5px; color: var(--muted, #64748b); }

.lx-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--panel, #fff);
  color: var(--text-2, #334155);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.lx-logout:hover { background: var(--error-soft, #fee2e2); border-color: var(--error, #dc2626); color: var(--error, #dc2626); }

/* ═══════════ الترحيب ═══════════ */

.lx-main {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

.lx-welcome { margin-bottom: 32px; }

.lx-title {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.lx-subtitle {
  margin: 0;
  font-size: 15px;
  color: var(--muted, #64748b);
}

/* ═══════════ الشبكة ═══════════ */

.lx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 18px;
}

.lx-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.lx-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent, #16a34a);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}
.lx-card:focus-visible {
  outline: 2px solid var(--accent, #16a34a);
  outline-offset: 3px;
}

/* شارة إشعارات المهام (2026-09-20): رقمٌ أحمر في زاوية البطاقة العليا
   (البداية في RTL) — تُضاف من launcher.js عند وجود إشعارات غير مقروءة فقط. */
.lx-card { position: relative; }
.lx-card-badge {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 99px;
  background: #ef4444;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.lx-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft, #dcfce7);
  color: var(--accent-mid, #15803d);
  flex: none;
}

.lx-card-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.lx-card-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted, #64748b);
  flex: 1;
}

.lx-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
  padding: 8px 20px;
  border-radius: 10px;
  background: var(--accent, #16a34a);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.lx-card:hover .lx-card-cta { background: var(--accent-mid, #15803d); }

/* هيكل التحميل — يمنع وميض بطاقةٍ غير مصرَّح بها */
.lx-skeleton {
  height: 168px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(15,23,42,.045) 25%, rgba(15,23,42,.075) 37%, rgba(15,23,42,.045) 63%);
  background-size: 400% 100%;
  animation: lx-shimmer 1.3s ease-in-out infinite;
}
@keyframes lx-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-skeleton { animation: none; }
  .lx-card { transition: none; }
  .lx-card:hover { transform: none; }
}

.lx-state {
  margin: 22px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: var(--panel, #fff);
  color: var(--muted, #64748b);
  font-size: 13.5px;
  line-height: 1.7;
}
.lx-state.lx-state-error {
  border-color: var(--error, #dc2626);
  background: var(--error-soft, #fee2e2);
  color: var(--error, #dc2626);
}

/* زرُّ إعادة المحاولة داخل رسالة الاحتياط — نفسُ هيئة .lx-logout كي لا يُستحدث
   طرازٌ ثانٍ للأزرار في الصفحة. يقف على سطره في الشاشات الضيقة. */
.lx-retry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 10px;
  padding: 6px 14px;
  min-height: 34px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--panel, #fff);
  /* رمزا النص والحدّ القياسيان لا `currentColor`: الوراثةُ من .lx-state-error
     تعطي أحمر #dc2626 على لوحةٍ داكنة = 3.58:1 (دون AA). والصندوقُ الأحمر
     حولَه يحمل التنبيه أصلاً. */
  color: var(--text-2, #334155);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.lx-retry:hover { background: var(--panel-2, #f1f5f9); }
.lx-retry:disabled { cursor: default; opacity: .6; }

@media (max-width: 560px) {
  .lx-retry { display: flex; width: 100%; justify-content: center; margin: 10px 0 0; }
}

/* ═══════════ الاستجابة ═══════════ */

@media (max-width: 900px) {
  .lx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-main { padding: 36px 20px 52px; }
  .lx-title { font-size: 26px; }
}

@media (max-width: 620px) {
  .lx-grid { grid-template-columns: minmax(0, 1fr); }
  .lx-header { padding: 10px 14px; gap: 8px; }
  .lx-main { padding: 28px 14px 44px; }
  .lx-title { font-size: 23px; }
  .lx-subtitle { font-size: 14px; }
  .lx-user-meta { display: none; }        /* الاسم يبقى في الصورة الرمزية */
  .lx-logout { padding: 8px 12px; }
  .lx-card { padding: 18px; }
}

/* المظهر الداكن — يتبع نفس مفتاح data-theme المستعمل في بقية الصفحات */
[data-theme="dark"] .lx-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
[data-theme="dark"] .lx-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.05) 63%);
  background-size: 400% 100%;
}


/* ══════════════════════════════════════════════════════
   MOB-005c — زر تبديل الثيم في شاشة الأقسام/الدخول كان 34×34.
══════════════════════════════════════════════════════ */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
  #lx-theme { position: relative; }
  #lx-theme::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }
}


/* ══════════════════════════════════════════════════════
   الجوال: عمودان مضغوطان بدل بطاقةٍ بعرض الشاشة  [launcher-2col-20261021-1]
   كانت الأقسام الثمانية عموداً واحداً بطول 1880px عند 390px. البطاقة كلها
   رابط، فزرّ «فتح» والوصف يختفيان (الوصف باقٍ في aria-label)؛ تبقى
   الأيقونة والاسم وشارة المهام.
══════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  .lx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lx-card {
    padding: 16px 12px;
    gap: 10px;
    align-items: center;
    text-align: center;
    min-height: 118px;
    justify-content: center;
  }
  .lx-card-name { font-size: 14.5px; line-height: 1.35; }
  .lx-card-desc,
  .lx-card-cta { display: none; }
  .lx-card-badge { top: 8px; inset-inline-end: 8px; }
  .lx-skeleton { height: 118px; }
}