/* ══════════════════════════════════════════
   CSS Files Organization
══════════════════════════════════════════ */

/* 
هيكلية مجلدات CSS الجديدة:

/css/
├── central/          # ملفات نظام Central (المنصة التعليمية)
│   ├── front.css     # تأثيرات الصفحة الرئيسية والكورسات
│   ├── home.css      # تأثيرات حركية متقدمة
│   ├── panel.css     # إعدادات لوحة التحكم
│   └── root.css      # ألوان Bootstrap للأزرق (#052341)
│
├── tabibi/           # ملفات نظام Tabibi (العيادة الطبية)
│   ├── tabibi.css    # التصميم الشامل للعيادة
│   ├── main.css      # أنماط أساسية
│   └── bootstrap-theme.css # ألوان Bootstrap للبنفسجي (#6f42c1)
│
├── shared/           # ملفات مشتركة بين النظامين
│   └── editor.css    # خطوط التاجوال للمحرر
│
└── vendor/           # ملفات خارجية (Bootstrap, Select2, etc.)
    ├── bootstrap/
    ├── select2/
    ├── sweetalert2/
    └── tinymce/

*/

/* استيراد الخطوط المحلية فقط */
@import "../fonts/fonts.css";

/* متغيرات CSS مشتركة */
:root {
  --font-family-arabic: "IBM Plex Sans Arabic", "Noto-Sans", 'Segoe UI', Tahoma, sans-serif;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.2s ease-in-out;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* أنماط أساسية مشتركة */
body {
  font-family: var(--font-family-arabic);
}

a {
  text-decoration: none;
  transition: var(--transition-smooth);
}

.pointer {
  cursor: pointer;
}

.bg-light-2 {
  background-color: #f5f5f5;
}

.boxed-image {
  aspect-ratio: 16/9;
  object-fit: cover;
}

.border-dashed {
  border-style: dashed;
}

.border-dashed:hover,
.border-dashed:focus {
  border-style: solid;
}

.border-dotted {
  border-style: dotted;
}

.border-dotted:hover,
.border-dotted:focus {
  border-style: solid;
}

/* تحسينات الأداء */
.card-hover-lift,
.btn-hover-scale,
.img-zoom {
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

/* دعم الوصولية */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 3px solid rgba(111, 66, 193, 0.5);
  outline-offset: 3px;
}