/* ================================================================
   التصميم العصري النظيف - بدون أي ذهبي أو زيتوني
   اختر أحد الخيارات أعلاه واستبدل المتغيرات
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

/* ==============================================================
   1.  استخدم المتغيرات من الخيارات أعلاه
   ============================================================== */
:root {
  --primary: #9260b1;      /* بنفسجي غامق */
  --primary-bright: #975782; /* بنفسجي فاتح */
  --primary-light: #F3E5F5;
  --secondary: #da50bc;    /* وردي */
  --secondary-light: #FCE4EC;
  --accent: #26A69A;       /* فيروزي (لمسات) */
  --bg: #FAFAFA;
  --text: #1A1A2E;
  --white: #FFFFFF;
}

/* ==============================================================
   2.  الخطوط والخلفيات
   ============================================================== */
* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  background-image: url('#APP_FILES#gold.jfif');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--text);
  position: relative;
}

/* طبقة خلفية ناعمة جدًا */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(245, 247, 250, 0.92);
  backdrop-filter: blur(4px);
  z-index: -1;
}

/* منطقة المحتوى الرئيسية */
.t-Body {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  border-radius: 0;
}

/* ==============================================================
   3.  الرأس (Header) - أنيق وبسيط
   ============================================================== */
.t-Header {
  background: linear-gradient(135deg, var(--primary), var(--primary-bright)) !important;
  border-bottom: none !important;
  box-shadow: 0 4px 30px var(--shadow) !important;
  padding: 12px 24px;
}

.t-Header-branding {
  color: var(--white) !important;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.t-Header-branding small {
  font-weight: 400;
  font-size: 0.8rem;
  opacity: 0.85;
  margin-left: 12px;
}

/* أزرار الرأس */
.t-Header .t-Button--header {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--white) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 30px !important;
  padding: 6px 20px !important;
  font-weight: 600;
  transition: var(--transition);
}

.t-Header .t-Button--header:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px);
}

/* ==============================================================
   4.  القوائم الجانبية
   ============================================================== */
.t-NavigationBar {
  background: linear-gradient(180deg, var(--primary), #0D1544) !important;
  border-right: none !important;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.05);
}

.t-NavigationBar .t-Button--nav {
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 600;
  border-radius: 12px !important;
  margin: 4px 12px;
  padding: 10px 18px !important;
  transition: var(--transition);
  border-left: 3px solid transparent;
}

.t-NavigationBar .t-Button--nav:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--white) !important;
  border-left-color: var(--secondary);
  transform: translateX(6px);
}

.t-NavigationBar .t-Button--nav.is-active {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--white) !important;
  border-left-color: var(--secondary);
}

/* القوائم المنسدلة */
.a-Menu {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden;
}

.a-Menu-item {
  padding: 10px 20px !important;
  transition: var(--transition);
  font-weight: 500;
}

.a-Menu-item:hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  padding-left: 28px !important;
}

/* ==============================================================
   5.  البطاقات والمناطق
   ============================================================== */
.t-Region {
  background: var(--white) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03),
              0 1px 4px rgba(0, 0, 0, 0.04) !important;
  transition: var(--transition);
  overflow: hidden;
}

.t-Region:hover {
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.06),
              0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-4px);
}

/* رأس المنطقة */
.t-Region-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-bright)) !important;
  border-bottom: none !important;
  padding: 16px 24px !important;
  color: var(--white) !important;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.3px;
}

.t-Region-header .t-Button {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--white) !important;
  border-radius: 30px !important;
  padding: 4px 18px !important;
  font-weight: 600;
  transition: var(--transition);
}

.t-Region-header .t-Button:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.05);
}

/* ==============================================================
   6.  الأزرار - أنيقة وعصرية
   ============================================================== */
/* الزر الرئيسي */
.t-Button--primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-bright)) !important;
  border: none !important;
  color: var(--white) !important;
  border-radius: 30px !important;
  padding: 10px 32px !important;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 20px var(--shadow);
  transition: var(--transition);
}

.t-Button--primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 35px var(--shadow);
}

/* الزر الثانوي */
.t-Button--secondary {
  background: var(--secondary) !important;
  border: none !important;
  color: var(--white) !important;
  border-radius: 30px !important;
  padding: 10px 32px !important;
  font-weight: 700;
  transition: var(--transition);
}

.t-Button--secondary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 35px rgba(0, 188, 212, 0.3);
}

/* الزر الناعم (Outlined) */
.t-Button--simple {
  background: transparent !important;
  border: 2px solid var(--primary-bright) !important;
  color: var(--primary-bright) !important;
  border-radius: 30px !important;
  padding: 8px 30px !important;
  font-weight: 600;
  transition: var(--transition);
}

.t-Button--simple:hover {
  background: var(--primary-bright) !important;
  color: var(--white) !important;
  transform: translateY(-2px);
}

/* الزر الأحمر (للحذف) */
.t-Button--danger {
  background: linear-gradient(135deg, #EF5350, #C62828) !important;
  border: none !important;
  color: var(--white) !important;
  border-radius: 30px !important;
  padding: 10px 32px !important;
  font-weight: 700;
  transition: var(--transition);
}

.t-Button--danger:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 35px rgba(239, 83, 80, 0.4);
}

/* ==============================================================
   7.  الجداول
   ============================================================== */
.a-GV-header,
.t-Report-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-bright)) !important;
  color: var(--white) !important;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 12px 16px !important;
  border-bottom: 3px solid var(--secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.t-Report tbody tr:nth-child(even) {
  background-color: var(--primary-light) !important;
}

.t-Report tbody tr:nth-child(odd) {
  background-color: var(--white) !important;
}

.t-Report tbody tr:hover {
  background: var(--secondary-light) !important;
  cursor: pointer;
}

.t-Report td,
.a-GV-cell {
  padding: 12px 16px !important;
  border-bottom: 1px solid #ECF0F1;
  color: var(--text);
  font-size: 0.9rem;
}

/* ==============================================================
   8.  نماذج الإدخال
   ============================================================== */
.t-Form-input,
.t-Form-select,
.t-Form-textarea {
  border: 2px solid #E8E8E8 !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  transition: var(--transition);
  background-color: var(--white);
  color: var(--text);
  font-size: 0.95rem;
}

.t-Form-input:focus,
.t-Form-select:focus,
.t-Form-textarea:focus {
  border-color: var(--primary-bright) !important;
  box-shadow: 0 0 0 6px rgba(63, 81, 181, 0.1) !important;
  transform: translateY(-1px);
}

.t-Form-label {
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

/* ==============================================================
   9.  التنبيهات
   ============================================================== */
.t-Alert {
  border-radius: 14px !important;
  border-left: 6px solid var(--primary-bright) !important;
  background: var(--primary-light) !important;
  color: var(--text) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  padding: 16px 24px !important;
}

.t-Alert--success {
  border-left-color: #4CAF50 !important;
  background: #E8F5E9 !important;
}

.t-Alert--danger {
  border-left-color: #EF5350 !important;
  background: #FFEBEE !important;
}

.t-Alert--warning {
  border-left-color: #FF9800 !important;
  background: #FFF3E0 !important;
}

/* ==============================================================
   10. الروابط
   ============================================================== */
a {
  color: var(--primary-bright);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
  border-bottom: 2px solid transparent;
}

a:hover {
  color: var(--primary);
  border-bottom-color: var(--secondary);
}

/* ==============================================================
   11. التذييل
   ============================================================== */
.t-Footer {
  background: linear-gradient(135deg, var(--primary), #0D1544) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-top: none !important;
  padding: 20px 24px !important;
  text-align: center;
  margin-top: 40px;
  font-size: 0.9rem;
}

.t-Footer a {
  color: rgba(255, 255, 255, 0.8) !important;
  border-bottom: none !important;
}

.t-Footer a:hover {
  color: var(--white) !important;
}

/* ==============================================================
   12. النوافذ المنبثقة
   ============================================================== */
.t-Dialog {
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden;
}

.t-Dialog-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-bright)) !important;
  border-bottom: none !important;
  color: var(--white) !important;
  padding: 18px 28px !important;
  font-weight: 700;
}

.t-Dialog-footer {
  background: var(--bg) !important;
  border-top: 1px solid #ECF0F1 !important;
  padding: 14px 28px !important;
}

/* ==============================================================
   13. شريط التمرير
   ============================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary-bright), var(--secondary));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--primary), var(--secondary));
}

/* ==============================================================
   14. التجاوب مع الشاشات الصغيرة
   ============================================================== */
@media (max-width: 768px) {
  .t-Region {
    border-radius: 12px !important;
    margin: 12px 0;
  }

  .t-Header-branding {
    font-size: 1.2rem !important;
  }

  .t-Button--primary,
  .t-Button--secondary,
  .t-Button--danger {
    padding: 8px 20px !important;
    font-size: 0.85rem !important;
  }

  body {
    background-attachment: scroll;
  }
}

/* ==============================================================
   15. علامات التبويب
   ============================================================== */
.t-Tabs-item.is-active .t-Tabs-label {
  background: var(--primary-bright) !important;
  color: var(--white) !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 10px 20px !important;
  font-weight: 700;
}

.t-Tabs-label {
  color: var(--text);
  font-weight: 600;
  padding: 8px 16px !important;
  transition: var(--transition);
}

.t-Tabs-label:hover {
  color: var(--primary-bright);
  background: var(--primary-light);
  border-radius: 12px 12px 0 0;
}

/* ==============================================================
   16. الأيقونات
   ============================================================== */
.fa,
.fas,
.far,
.fal,
.fab {
  color: var(--primary-bright);
  margin-right: 8px;
}

.t-Button .fa,
.t-Button .fas {
  color: inherit !important;
}

/* نهاية الملف */