/* =====================================================================
   DESIGN SYSTEM — منصة إدارة الأكاديميات
   ملف موحّد لكل لوحات التحكم (طالب / مدرب / نادي / إدارة / استقبال / دعم فني)
   يعتمد على متغيرات CSS بحيث يسهل تغيير الهوية اللونية من مكان واحد،
   ويوفر مكونات جاهزة (بطاقات، جداول، شارات، أزرار...) تعمل تلقائياً
   مع Tailwind ومع اتجاه RTL/LTR.
   ===================================================================== */

:root {
  /* الألوان الأساسية */
  --color-primary: #4f46e5;      /* indigo-600 */
  --color-primary-dark: #4338ca; /* indigo-700 */
  --color-primary-light: #eef2ff;/* indigo-50 */
  --color-accent: #0ea5e9;       /* sky-500 */
  --color-success: #16a34a;
  --color-success-light: #dcfce7;
  --color-warning: #d97706;
  --color-warning-light: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-light: #fee2e2;
  --color-info: #0284c7;
  --color-info-light: #e0f2fe;

  /* محايدات */
  --color-bg: #f4f5fa;
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  --color-text: #1f2430;
  --color-text-muted: #6b7280;

  /* هندسة */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 8px 24px -6px rgba(17, 24, 39, 0.12);
  --shadow-lg: 0 20px 40px -12px rgba(17, 24, 39, 0.18);
  --sidebar-w: 16rem;
  --topbar-h: 4rem;
  --bottomnav-h: 4.5rem;
  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* وضع داكن اختياري (يُفعّل بإضافة data-theme="dark" على <html>) */
[data-theme="dark"] {
  --color-bg: #10131c;
  --color-surface: #171b26;
  --color-border: #262c3a;
  --color-text: #e7e9f0;
  --color-text-muted: #9aa1b3;
  --color-primary-light: #1e2240;
}

html, body {
  background-color: var(--color-bg);
  color: var(--color-text);
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }

::selection { background: var(--color-primary); color: #fff; }

/* شريط تمرير أنيق */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7cbd6; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #a4a9b8; }

[x-cloak] { display: none !important; }

/* =====================================================================
   الحاوية / تخطيط الصفحة
   ===================================================================== */
.page-container {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  padding-block: 1.5rem;
  width: 100%;
}

.app-main {
  min-height: 100vh;
  /* لم يعد أي قالب يعرض شريط تنقل سفلياً (استُبدل بالشريط الجانبي)،
     فحجز ارتفاعه كان يترك فراغاً ميتاً أسفل كل صفحة. */
  padding-bottom: 1.5rem;
}

@media (min-width: 1280px) {
  .app-main-with-sidebar {
    padding-inline-start: var(--sidebar-w);
    padding-bottom: 1.5rem;
  }
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-header h1,
.page-header .page-title {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 800;
  color: var(--color-text);
  margin: 0;
}

.page-subtitle {
  color: var(--color-text-muted);
  font-size: 0.925rem;
  margin-top: 0.25rem;
}

/* خيط تنقّل (Breadcrumb) */
.breadcrumb-ds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}
.breadcrumb-ds a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb-ds a:hover { color: var(--color-primary); }
.breadcrumb-ds .sep { opacity: 0.5; }
.breadcrumb-ds .current { color: var(--color-text); font-weight: 600; }

/* =====================================================================
   البطاقات (Cards)
   ===================================================================== */
.card-ds {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card-ds:hover { box-shadow: var(--shadow-md); }
.card-ds-hover:hover { transform: translateY(-3px); }
.card-ds-body { padding: 1.25rem; }
.card-ds-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.card-ds-header h2, .card-ds-header h3 { font-size: 1rem; font-weight: 700; margin: 0; }

/* شبكة بطاقات متجاوبة تلقائياً */
.grid-cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.grid-cards-sm { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid-cards-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* بطاقات إحصائية (Stat cards) لصفحات الرئيسية بكل اللوحات */
.stat-card-ds {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.stat-card-ds:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat-card-ds .stat-icon {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}
.stat-card-ds .stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text);
}
.stat-card-ds .stat-label {
  font-size: 0.825rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}
.stat-card-ds.tone-success .stat-icon { background: linear-gradient(135deg,#22c55e,#15803d); }
.stat-card-ds.tone-warning .stat-icon { background: linear-gradient(135deg,#f59e0b,#b45309); }
.stat-card-ds.tone-danger  .stat-icon { background: linear-gradient(135deg,#f87171,#b91c1c); }
.stat-card-ds.tone-info    .stat-icon { background: linear-gradient(135deg,#38bdf8,#0369a1); }
.stat-card-ds .stat-trend { font-size: .75rem; font-weight: 700; display:inline-flex; align-items:center; gap:.25rem; }
.stat-card-ds .stat-trend.up { color: var(--color-success); }
.stat-card-ds .stat-trend.down { color: var(--color-danger); }

/* =====================================================================
   الشارات (Badges) والأزرار المساعدة
   ===================================================================== */
.badge-ds {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-ds.success { background: var(--color-success-light); color: #166534; }
.badge-ds.warning { background: var(--color-warning-light); color: #92400e; }
.badge-ds.danger  { background: var(--color-danger-light);  color: #991b1b; }
.badge-ds.info    { background: var(--color-info-light);    color: #075985; }
.badge-ds.neutral { background: #f1f2f6; color: #4b5563; }

.btn-ds {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .875rem;
  padding: .6rem 1.15rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-ds:active { transform: scale(0.97); }
.btn-ds-primary { background: var(--color-primary); color: #fff; }
.btn-ds-primary:hover { background: var(--color-primary-dark); }
.btn-ds-outline { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-ds-outline:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); }
.btn-ds-danger { background: var(--color-danger); color: #fff; }
.btn-ds-danger:hover { background: #b91c1c; }
.btn-ds-icon { width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 999px; }

/* =====================================================================
   الجداول المتجاوبة
   ===================================================================== */
.table-wrap-ds {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.table-wrap-ds table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table-wrap-ds thead th {
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
  padding: .85rem 1rem;
  text-align: start;
  white-space: nowrap;
}
.table-wrap-ds tbody td {
  padding: .85rem 1rem;
  border-top: 1px solid var(--color-border);
  font-size: .9rem;
  vertical-align: middle;
}
.table-wrap-ds tbody tr { transition: background var(--transition); }
.table-wrap-ds tbody tr:hover { background: var(--color-primary-light); }

/* بطاقة-جدول للموبايل: تتحول الصفوف إلى بطاقات عبر data-label */
@media (max-width: 640px) {
  .table-stack-ds thead { display: none; }
  /* ‏`table` كان ناقصاً من هذه القائمة، وهو أصل العطل: الصفوف والخلايا
     تصير كتلاً بينما يبقى الجدول نفسه `display:table` بـ`min-width:640px`
     مورَّثةً من `.table-wrap-ds table`. فيُفرض على شاشة ٣٦٠ بكسل عرضٌ
     ٦٤٠، ويُقصّ ما زاد خلف تمريرٍ أفقيّ لا يراه أحد — وهو ما يجعل
     الصفحة «لا تطلع كاملة» على الجوّال. */
  .table-stack-ds table,
  .table-stack-ds, .table-stack-ds tbody, .table-stack-ds tr, .table-stack-ds td {
    display: block; width: 100%;
  }
  .table-stack-ds table { min-width: 0; }
  /* وبلا هذا يبقى التمرير الأفقيّ قائماً على الغلاف بعد زوال سببه */
  .table-stack-ds { overflow-x: visible; }

  .table-stack-ds tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: .75rem;
    overflow: hidden;
  }
  .table-stack-ds td {
    display: grid;
    grid-template-columns: minmax(5.5rem, 38%) 1fr;
    align-items: start;
    gap: .35rem 1rem;
    text-align: end;
    border-top: 1px solid var(--color-border);
    min-width: 0;
  }
  .table-stack-ds td:first-child { border-top: none; }
  .table-stack-ds td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--color-text-muted);
    text-align: start;
    min-width: 0;
  }

  /* خليةٌ محتواها مركَّب — أزرارٌ أو شارات أو قائمة — لا تُحشر في نصف
     السطر: نصفُ سطرٍ لثلاثة أزرار يجعل كلّ كلمةٍ حرفاً في سطر. فالعنوان
     سطرٌ والمحتوى سطرٌ تحته بعرض البطاقة كاملاً. */
  .table-stack-ds td:has(.btn-ds),
  .table-stack-ds td:has(.badge-ds),
  .table-stack-ds td:has(ul),
  .table-stack-ds td:has(table),
  .table-stack-ds td:has(form),
  .table-stack-ds td:has(> div) {
    grid-template-columns: 1fr;
    text-align: start;
  }
  .table-stack-ds td:has(.btn-ds)::before,
  .table-stack-ds td:has(.badge-ds)::before,
  .table-stack-ds td:has(ul)::before,
  .table-stack-ds td:has(table)::before,
  .table-stack-ds td:has(form)::before,
  .table-stack-ds td:has(> div)::before {
    margin-bottom: .1rem;
  }

  /* الأزرار داخل البطاقة تتقاسم العرض بدل أن تفيض عنه */
  .table-stack-ds td .btn-ds { flex: 1 1 auto; }
  .table-stack-ds td > div { min-width: 0; }

  /* الخلية الفارغة (colspan لحالةٍ فارغة) لا تحتاج عنواناً ولا شبكة */
  .table-stack-ds td[colspan] { grid-template-columns: 1fr; text-align: center; }
  .table-stack-ds td[colspan]::before { content: none; }
}

.flash-highlight-bg { background-color: var(--color-primary-light) !important; transition: background-color .3s ease; }
.flash-highlight-text { color: var(--color-primary) !important; transition: color .3s ease; }

/* =====================================================================
   حالات فارغة / تحميل
   ===================================================================== */
.empty-state-ds {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--color-text-muted);
}
.empty-state-ds i { font-size: 2.75rem; opacity: .35; margin-bottom: 1rem; }
.empty-state-ds h3 { color: var(--color-text); font-size: 1.05rem; font-weight: 700; margin-bottom: .35rem; }

.skeleton-ds {
  background: linear-gradient(90deg, #eef0f4 25%, #f7f8fa 37%, #eef0f4 63%);
  background-size: 400% 100%;
  animation: skeleton-ds-loading 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-ds-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* دائرة تحميل عامة */
.spinner-ds {
  width: 1.35rem; height: 1.35rem;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-ds .7s linear infinite;
}
@keyframes spin-ds { to { transform: rotate(360deg); } }

/* =====================================================================
   طبقة تنقّل (Sidebar / Topbar / Bottom nav) — تُستخدم من قِبل كل الشرائح
   ===================================================================== */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: saturate(180%) blur(6px);
}
/* ضمانة صلبة لظهور الشريط العلوي (سطح المكتب) والشريط السفلي (الموبايل)
   بغضّ النظر عن نجاح توليد كلاسات Tailwind الديناميكية (hidden/xl:block) —
   نفس فئة المشكلة التي عولجت سابقاً في الشريط الجانبي لبعض اللوحات. */
@media (max-width: 1279.98px) {
  .app-topbar { display: none !important; }
}
@media (min-width: 1280px) {
  .app-topbar { display: block !important; }
  .app-bottomnav { display: none !important; }
}

.app-sidebar {
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--color-surface);
  border-inline-end: 1px solid var(--color-border);
  z-index: 45;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition);
  /* مخفية افتراضياً على الجوال — هذا مضمون 100% ولا يعتمد على أي
     كلاسات Tailwind ديناميكية قد تفشل بصمت حسب طريقة تحميل CDN. */
  transform: translateX(-100%);
}
html[dir="rtl"] .app-sidebar {
  transform: translateX(100%);
}
.app-sidebar.is-open {
  transform: translateX(0) !important;
}
@media (min-width: 1280px) {
  .app-sidebar {
    transform: translateX(0) !important;
  }
}
/* ضمانة إضافية للوحة السوبر أدمن (لها بنية مختلفة عن باقي اللوحات) —
   تجبر الحالة الصحيحة بغض النظر عن نجاح توليد كلاسات Tailwind الديناميكية.
   ملاحظة: قاعدة "إخفاء الجوال" ADDS .translate-x-full لنفس تحديد
   [data-admin-sidebar] الخاص بقاعدة "إظهار سطح المكتب" أدناه، حتى تتساوى
   خصوصية (specificity) القاعدتين وتفوز الأحدث بترتيب الظهور بدلاً من أن
   تفوز الأكثر تحديداً دائماً (وهو ما كان يُبقي الشريط الجانبي مخفياً حتى
   على الشاشات الكبيرة). */
@media (max-width: 1279.98px) {
  [data-admin-sidebar].translate-x-full {
    transform: translateX(100%) !important;
  }
}
@media (min-width: 1280px) {
  [data-admin-sidebar],
  [data-admin-sidebar].translate-x-full {
    transform: translateX(0) !important;
  }
}
.app-sidebar-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .9rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: .9rem;
  transition: background var(--transition), color var(--transition);
}
.app-sidebar-link i { width: 1.25rem; text-align: center; color: inherit; }
.app-sidebar-link:hover { background: var(--color-primary-light); color: var(--color-primary); }
.app-sidebar-link.active { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.app-sidebar-section-title {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  font-weight: 800;
  padding: 0 .9rem;
  margin: 1.1rem 0 .4rem;
}

.app-bottomnav {
  position: fixed;
  bottom: 0; inset-inline: 0;
  z-index: 50;
  height: var(--bottomnav-h);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 20px rgba(17,24,39,.06);
}
.app-bottomnav-scroll {
  display: flex;
  align-items: stretch;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.app-bottomnav-scroll::-webkit-scrollbar { display: none; }
.app-bottomnav-item {
  flex: 0 0 auto;
  min-width: 4.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  font-size: .65rem;
  font-weight: 700;
  color: var(--color-text-muted);
  padding: .35rem .5rem;
  position: relative;
  transition: color var(--transition), transform var(--transition);
}
.app-bottomnav-item i { font-size: 1.1rem; }
.app-bottomnav-item.active { color: var(--color-primary); }
.app-bottomnav-item:active { transform: scale(.93); }

.notif-dot-ds {
  position: absolute;
  top: -2px; inset-inline-end: -6px;
  min-width: 16px; height: 16px;
  background: var(--color-danger);
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-surface);
  padding: 0 3px;
}

/* طبقة تعتيم عند فتح القائمة الجانبية على الموبايل */
.app-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 28, .45);
  z-index: 44;
  backdrop-filter: blur(1px);
}

/* زر العودة للأعلى */
.back-to-top-ds {
  position: fixed;
  bottom: calc(var(--bottomnav-h) + 1rem);
  inset-inline-end: 1.25rem;
  z-index: 49;
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition);
}
.back-to-top-ds.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

@media (min-width: 1280px) {
  .back-to-top-ds { bottom: 1.5rem; }
}

/* طباعة */
@media print {
  .no-print, .app-bottomnav, .app-sidebar, .app-topbar, .back-to-top-ds { display: none !important; }
  .app-main-with-sidebar { padding-inline-start: 0 !important; }
}

/* =====================================================================
   واجهة لوحة السوبر أدمن (v2) — شريط جانبي مضغوط بالأيقونات + بطاقات
   زجاجية (Glassmorphism). محصورة عمداً تحت body.admin-glass حتى لا تؤثر
   على بقية اللوحات (طالب/مدرب/نادي/استقبال/دعم) التي تستخدم نفس أسماء
   الكلاسات (.card-ds ...) بمظهرها الأصلي. الألوان والخطوط كما هي —
   فقط التركيبة (composition) والبطاقات والشريط الجانبي تتغيّر.
   ===================================================================== */
:root {
  --admin-sidebar-w: 4.75rem;
}

body.admin-glass {
  position: relative;
  isolation: isolate;
}
/* خلفية متدرّجة هادئة خلف كل شيء حتى يكون لتأثير البلور (blur) ما "يبرز" من خلاله */
body.admin-glass::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--color-primary) 16%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 92% 15%, color-mix(in srgb, var(--color-accent) 14%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--color-success) 10%, transparent) 0%, transparent 50%),
    var(--color-bg);
}

body.admin-glass .card-ds,
body.admin-glass .stat-card-ds {
  background: color-mix(in srgb, var(--color-surface) 62%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--color-surface) 40%, var(--color-border));
  box-shadow: var(--shadow-md);
}
body.admin-glass .card-ds:hover,
body.admin-glass .stat-card-ds:hover {
  box-shadow: var(--shadow-lg);
}
body.admin-glass .card-ds-header {
  border-bottom-color: color-mix(in srgb, var(--color-surface) 40%, var(--color-border));
}
body.admin-glass .stat-card-ds .stat-icon {
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--color-primary) 55%, transparent);
}
body.admin-glass .table-wrap-ds {
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-color: color-mix(in srgb, var(--color-surface) 40%, var(--color-border));
}
body.admin-glass .table-wrap-ds thead th {
  background: color-mix(in srgb, var(--color-bg) 65%, transparent);
}

/* --- الشريط الجانبي المضغوط (أيقونات فقط + تلميحات عند hover) --- */
.app-sidebar-compact {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--admin-sidebar-w);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding-block: 1rem;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-inline-end: 1px solid color-mix(in srgb, var(--color-surface) 40%, var(--color-border));
}
.app-main-compact-sidebar {
  padding-inline-start: var(--admin-sidebar-w);
  min-height: 100vh;
}
.compact-logo {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  object-fit: contain;
  margin-bottom: .5rem;
}
.compact-nav-item {
  position: relative;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 1.1rem;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.compact-nav-item:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  transform: translateY(-1px);
}
.compact-nav-item.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
/* تلميح (tooltip) بالاسم يظهر جانب الأيقونة عند hover */
.compact-nav-item .tip {
  position: absolute;
  inset-inline-start: calc(100% + .6rem);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: var(--color-text);
  color: var(--color-surface);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  padding: .35rem .65rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 60;
}
html[dir="rtl"] .compact-nav-item .tip {
  inset-inline-start: auto;
  inset-inline-end: calc(100% + .6rem);
}
.compact-nav-item:hover .tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.compact-sidebar-sep {
  width: 1.75rem;
  height: 1px;
  background: color-mix(in srgb, var(--color-surface) 30%, var(--color-border));
  margin-block: .35rem;
}
.compact-sidebar-spacer { flex: 1; }
.compact-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

@media print {
  .app-sidebar-compact { display: none !important; }
  .app-main-compact-sidebar { padding-inline-start: 0 !important; }
}

/* =====================================================================
   مكوّن تقييم بالنجوم (CSS-only) — يُستخدم عبر أي form يحتوي على
   <div class="star-rating"> مع أزرار راديو مرتبة تنازلياً (5..1) يتبعها
   label لكل واحد، بنمط: <input value="5"><label>★</label><input value="4">...
   ===================================================================== */
.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: .15rem;
  font-size: 1.75rem;
}
.star-rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-rating label {
  cursor: pointer;
  color: #d1d5db;
  transition: color var(--transition), transform var(--transition);
  line-height: 1;
}
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: var(--color-warning);
  transform: scale(1.1);
}
.star-rating input:checked ~ label {
  color: var(--color-warning);
}

/* --- الخط الزمني للنشاطات الأخيرة --- */
.activity-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity-timeline::before {
  content: '';
  position: absolute;
  inset-inline-start: 1.35rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-border), transparent);
}
.activity-timeline-item {
  position: relative;
  display: flex;
  gap: 1rem;
  padding-block: .85rem;
}
.activity-timeline-item:not(:last-child) { border-bottom: 1px dashed var(--color-border); }
.activity-timeline-dot {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  z-index: 1;
  box-shadow: var(--shadow-sm);
  background: linear-gradient(135deg, var(--color-text-muted), var(--color-text));
}
.activity-timeline-dot.tone-info { background: linear-gradient(135deg, #38bdf8, #0369a1); }
.activity-timeline-dot.tone-success { background: linear-gradient(135deg, #22c55e, #15803d); }
.activity-timeline-dot.tone-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); }
.activity-timeline-dot.tone-neutral { background: linear-gradient(135deg, #9ca3af, #6b7280); }
.activity-timeline-content { flex: 1; min-width: 0; padding-top: .3rem; }

/* =====================================================================
   حقول النماذج والمكوّنات المساعدة
   كانت هذه الأصناف مستعملة في القوالب بلا تعريف، فتظهر الحقول خاماً بلا
   تنسيق وتتجاوز حدود بطاقاتها. bootstrap غير محمّل في لوحة الإدارة،
   لذلك لا يصلح الاعتماد على .form-control هنا.
   ===================================================================== */

.input-ds,
.select-ds,
.textarea-ds {
  width: 100%;
  max-width: 100%;
  min-width: 0;                 /* يمنع نصّ الخيار الطويل من تمديد الحقل خارج البطاقة */
  display: block;
  padding: .55rem .75rem;
  font: inherit;
  font-size: .85rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
select.input-ds, .select-ds {
  appearance: none;
  padding-inline-end: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: .7rem;
  background-position: left .7rem center;
  text-overflow: ellipsis;      /* الاسم الطويل يُقصّ لا يمدّد البطاقة */
}
html[dir="ltr"] select.input-ds,
html[dir="ltr"] .select-ds { background-position: right .7rem center; }

textarea.input-ds, .textarea-ds { min-height: 4.5rem; resize: vertical; }

.input-ds:focus, .select-ds:focus, .textarea-ds:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.input-ds::placeholder, .textarea-ds::placeholder { color: var(--color-text-muted); }
.input-ds:disabled { background: var(--color-bg); cursor: not-allowed; }

/* حقول التاريخ: أيقونة المتصفّح تبقى داخل الحقل في RTL */
.input-ds[type="date"] { min-height: 2.4rem; }
.input-ds[type="date"]::-webkit-calendar-picker-indicator { margin-inline-start: 0; cursor: pointer; }

/* صفّ نموذج: عناصر متجاورة تنكسر تحت بعضها على الجوّال */
.form-row-ds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .6rem;
  align-items: end;
}
.form-row-ds > * { min-width: 0; }
.field-ds { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field-ds > label { font-size: .78rem; font-weight: 600; color: var(--color-text); }

/* مربّع اختيار بصفّ واحد */
.check-ds {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  font-size: .85rem;
  cursor: pointer;
}
.check-ds input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--color-primary); flex: none; }

/* صفّ قائمة عام */
.list-row-ds {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: .85rem;
}
.list-row-ds:last-child { border-bottom: 0; }
.list-row-ds > .grow { flex: 1; min-width: 0; }

/* نصّ ثانوي، عنوان بطاقة، شبكة إحصاءات، زرّ صغير */
.text-muted-ds { color: var(--color-text-muted); }
.card-ds-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .95rem;
  font-weight: 800;
  color: var(--color-text);
}
.stats-grid-ds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .9rem;
}
.btn-ds-sm { padding: .35rem .7rem; font-size: .78rem; }

/* كتلة شيفرة/حمولة مقترحة */
.code-ds {
  margin: .4rem 0 0;
  padding: .6rem .75rem;
  max-height: 16rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .75rem;
  line-height: 1.6;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

/* تنبيه */
.alert-ds {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: .85rem;
}
.alert-ds-warning { background: var(--color-warning-light); border-color: #fcd34d; color: #92400e; }
.alert-ds-success { background: var(--color-success-light); border-color: #86efac; color: #14532d; }
.alert-ds-danger  { background: var(--color-danger-light);  border-color: #fca5a5; color: #7f1d1d; }
.alert-ds-info    { background: var(--color-info-light);    border-color: #7dd3fc; color: #075985; }

/* أداة نصّ صغير — كانت مستعملة في القوالب معتمدةً على bootstrap غير المحمّل */
.small { font-size: .78rem; line-height: 1.55; }

/* =====================================================================
   بطاقة مهمّة وكيل — تُستعمل في صفحة القسم وصفحة الوكيل معاً، فمكانها هنا
   لا داخل قالب واحد.
   ===================================================================== */
.ag-task {
  border: 1px solid var(--color-border);
  border-radius: .7rem;
  padding: .7rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-width: 0;
}
.ag-task + .ag-task { margin-top: .6rem; }
.ag-task.overdue { border-color: #fca5a5; background: rgba(220, 38, 38, .035); }
.ag-task-h { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ag-task-h .grow { flex: 1; min-width: 0; font-size: .88rem; }
.ag-task-body {
  font-size: .8rem;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  border-radius: .5rem;
  padding: .5rem .65rem;
  word-break: break-word;
}
.ag-task-body.empty {
  color: var(--color-text-muted);
  font-style: italic;
  background: transparent;
  padding: 0;
}
.ag-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  font-size: .72rem;
  color: var(--color-text-muted);
}
.ag-task-meta .late { color: var(--color-danger); font-weight: 700; }
.ag-task-meta .done { color: var(--color-success); }