/* =====================================================================
   theme.css  —  ملف الثيم الرئيسي (الألوان القابلة للتعديل)
   ---------------------------------------------------------------------
   لتغيير ألوان الموقع بالكامل: عدّل القيم الأربع في :root أدناه فقط.
   كل المكوّنات (الأزرار، الروابط، البطاقات، القائمة الجانبية...) تعتمد
   على هذه المتغيّرات، لذا لا حاجة للبحث داخل بقية الملفات.
   ===================================================================== */

:root {
  /* ---- 1) ألوان العلامة الأساسية (عدّلها هنا) ---- */
  --app-primary:        #4C787E;   /* أساسي  (أزرق مخضرّ غامق) */
  --app-secondary:      #3B9C9C;   /* ثانوي  (تركواز)          */
  --app-accent:         #3090C7;   /* تمييز  (أزرق)            */
  --app-accent-light:   #56A5EC;   /* تمييز فاتح (أزرق سماوي)  */

  /* ---- 2) نسخ RGB (تُستخدم للشفافية rgba). حدّثها إن غيّرت ما فوق ---- */
  --app-primary-rgb:        76, 120, 126;
  --app-secondary-rgb:      59, 156, 156;
  --app-accent-rgb:         48, 144, 199;
  --app-accent-light-rgb:   86, 165, 236;

  /* ---- 3) ألوان مساعدة مشتقّة ---- */
  --app-dark:    #1f3033;
  --app-light:   #f4f8f9;
  --app-muted:   #6b7c80;
  --app-success: #2e9e6b;
  --app-warning: #d8943a;
  --app-danger:  #d05a5a;

  /* ---- 4) تدرّج لوني للعناصر المميزة (الأبطال، الأزرار الرئيسية) ---- */
  --app-gradient: linear-gradient(135deg,
                    var(--app-primary) 0%,
                    var(--app-accent) 100%);
  --app-gradient-soft: linear-gradient(135deg,
                    rgba(var(--app-primary-rgb), .08) 0%,
                    rgba(var(--app-accent-rgb), .08) 100%);

  /* ---- 5) أبعاد التخطيط ---- */
  --app-sidebar-width: 260px;
  --app-sidebar-collapsed: 76px;
  --app-topbar-height: 64px;
  --app-radius: .65rem;
  --app-radius-sm: .4rem;
  --app-shadow: 0 .25rem 1rem rgba(var(--app-primary-rgb), .10);
  --app-shadow-lg: 0 .75rem 2rem rgba(var(--app-primary-rgb), .16);

  /* ---- 6) ربط متغيّرات Bootstrap العامة بالعلامة ---- */
  --bs-primary:           var(--app-primary);
  --bs-primary-rgb:       var(--app-primary-rgb);
  --bs-secondary:         var(--app-secondary);
  --bs-secondary-rgb:     var(--app-secondary-rgb);
  --bs-info:              var(--app-accent);
  --bs-info-rgb:          var(--app-accent-rgb);
  --bs-link-color:        var(--app-accent);
  --bs-link-color-rgb:    var(--app-accent-rgb);
  --bs-link-hover-color:  var(--app-primary);
  --bs-border-radius:     var(--app-radius);
  --bs-border-radius-sm:  var(--app-radius-sm);
}

/* الوضع الداكن (يُفعّل عبر data-bs-theme="dark" أو زر التبديل) */
[data-bs-theme="dark"] {
  --app-light: #16282b;
  --app-muted: #9fb2b6;
  --bs-body-bg: #0f1c1f;
  --bs-body-color: #e6eef0;
  --app-shadow: 0 .25rem 1rem rgba(0, 0, 0, .4);
}

/* =====================================================================
   إعادة تلوين مكوّنات Bootstrap لتتبع متغيّرات العلامة
   (Bootstrap 5.3 يستخدم متغيّرات على مستوى المكوّن --bs-btn-*، لذا نربطها)
   ===================================================================== */

/* الأزرار الممتلئة */
.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: #3f656a;
  --bs-btn-hover-border-color: #3f656a;
  --bs-btn-active-bg: #34555a;
  --bs-btn-active-border-color: #34555a;
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}
.btn-secondary {
  --bs-btn-bg: var(--app-secondary);
  --bs-btn-border-color: var(--app-secondary);
  --bs-btn-hover-bg: #338888;
  --bs-btn-hover-border-color: #338888;
  --bs-btn-active-bg: #2c7575;
  --bs-btn-active-border-color: #2c7575;
  --bs-btn-disabled-bg: var(--app-secondary);
  --bs-btn-disabled-border-color: var(--app-secondary);
}
.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2a7fae;
  --bs-btn-hover-border-color: #2a7fae;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #256f99;
  --bs-btn-active-border-color: #256f99;
}

/* الأزرار المفرّغة (Outline) */
.btn-outline-primary {
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-active-bg: var(--app-primary);
  --bs-btn-active-border-color: var(--app-primary);
}
.btn-outline-secondary {
  --bs-btn-color: var(--app-secondary);
  --bs-btn-border-color: var(--app-secondary);
  --bs-btn-hover-bg: var(--app-secondary);
  --bs-btn-hover-border-color: var(--app-secondary);
}
.btn-outline-info {
  --bs-btn-color: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-bg: var(--app-accent);
  --bs-btn-hover-border-color: var(--app-accent);
}

/* زر بتدرّج لوني خاص بالعلامة */
.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  background-image: var(--app-gradient);
  border: 0;
  color: #fff;
  box-shadow: 0 .25rem .75rem rgba(var(--app-accent-rgb), .35);
}
.btn-brand:hover { color: #fff; filter: brightness(1.06); }
.btn-brand:active { filter: brightness(.95); }

/* الخلفيات والنصوص والحدود */
.bg-primary   { background-color: var(--app-primary) !important; }
.bg-secondary { background-color: var(--app-secondary) !important; }
.bg-info      { background-color: var(--app-accent) !important; }
.bg-brand     { background-image: var(--app-gradient) !important; color:#fff; }
.bg-brand-soft{ background-image: var(--app-gradient-soft) !important; }

.text-primary   { color: var(--app-primary) !important; }
.text-secondary { color: var(--app-secondary) !important; }
.text-info      { color: var(--app-accent) !important; }
.text-accent    { color: var(--app-accent-light) !important; }

.border-primary { border-color: var(--app-primary) !important; }

/* الشارات */
.badge.text-bg-primary   { background-color: var(--app-primary) !important; color:#fff; }
.badge.text-bg-secondary { background-color: var(--app-secondary) !important; color:#fff; }
.badge.text-bg-info      { background-color: var(--app-accent) !important; color:#fff; }

/* تبويبات Pills وروابط التنقّل النشطة */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--app-primary);
}
.nav-link { --bs-nav-link-color: var(--app-primary); --bs-nav-link-hover-color: var(--app-accent); }

/* حلقة التركيز في الحقول */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible {
  border-color: var(--app-accent-light);
  box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb), .25);
}
.form-check-input:checked {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}
.form-range::-webkit-slider-thumb { background-color: var(--app-primary); }
.form-range::-moz-range-thumb { background-color: var(--app-primary); }

/* أشرطة التقدّم */
.progress-bar { background-color: var(--app-primary); }

/* مجموعات القوائم (List group) */
.list-group-item.active {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}

/* الجداول */
.table-primary {
  --bs-table-bg: rgba(var(--app-primary-rgb), .10);
  --bs-table-border-color: rgba(var(--app-primary-rgb), .25);
}

/* الإكسسوارات: مؤشرات التحميل بألوان العلامة */
.spinner-border.text-primary, .spinner-grow.text-primary { color: var(--app-primary) !important; }