/**
 * ==========================================================================
 * الهوية البصرية — رابطة النشاطات الثقافية والرياضية لولاية المسيلة
 * Visual Identity — Cultural & Sports Activities League of M'sila
 * ==========================================================================
 * يُحمَّل هذا الملف بعد style.css لضمان أولوية متغيرات الهوية.
 */

:root {
  /* ---------- الألوان الأساسية ---------- */
  --brand-primary: #2196F3;
  /* الأزرق السماوي — الثقة والانفتاح */
  --brand-primary-dark: #1976D2;
  /* درجة داكنة للتفاعل (hover/active) */
  --brand-primary-light: #64B5F6;
  /* درجة فاتحة للتمييز */
  --brand-primary-soft: #E3F2FD;
  /* خلفيات ناعمة زرقاء */

  --brand-success: #4CAF50;
  /* الأخضر الزمردي — النشاط والطاقة */
  --brand-success-dark: #388E3C;
  --brand-success-light: #81C784;
  --brand-success-soft: #E8F5E9;

  --brand-accent: #FF9800;
  /* البرتقالي الحيوي — الدعوات والأحداث */
  --brand-accent-dark: #F57C00;
  --brand-accent-light: #FFB74D;
  --brand-accent-soft: #FFF3E0;

  /* ---------- المحايدات ---------- */
  --brand-white: #FFFFFF;
  /* الأبيض النقي */
  --brand-surface: #F5F5F5;
  /* الرمادي الفاتح — خلفيات ثانوية */
  --brand-border: #E0E0E0;
  --brand-muted: #757575;
  --brand-text: #212121;
  /* الأسود الأنيق — النصوص الأساسية */
  --brand-text-soft: #424242;
  --brand-dark: #212121;
  /* خلفيات داكنة (الهيدر/الفوتر) */
  --brand-darker: #1A1A1A;

  /* ---------- تدرجات وظلال ---------- */
  --brand-gradient: linear-gradient(135deg, #2196F3 0%, #4CAF50 100%);
  --brand-gradient-accent: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
  --brand-shadow-sm: 0 2px 8px rgba(33, 150, 243, 0.12);
  --brand-shadow-md: 0 6px 20px rgba(33, 150, 243, 0.18);
  --brand-shadow-lg: 0 12px 32px rgba(33, 33, 33, 0.14);

  /* ---------- أسماء متوافقة مع القالب القديم ---------- */
  --accent-color: #2196F3;
  --heading-color: #212121;
  --default-color: #424242;
  --surface-color: #FFFFFF;

  /* ---------- متغيرات أحجام حقول الإدخال والتحكم (للمبرمج والمصمم) ---------- */
  --input-font-size: 13.5px;
  --input-padding-y: 5px;
  --input-padding-x: 12px;
  --input-height: 25px;
  --input-border-radius: 8px;
  --label-font-size: 13px;
  --label-margin-bottom: 2px;
  --form-group-margin-bottom: 12px;
}

/* ==========================================================================
   عناصر عامة
   ========================================================================== */
body {
  color: var(--brand-text-soft);
  background-color: var(--brand-white);
}

a {
  color: var(--brand-primary);
}

a:hover {
  color: var(--brand-primary-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--brand-text);
}

/* ==========================================================================
   الأزرار
   ========================================================================== */
.btn-brand,
.get-started-btn,
.appointment-btn {
  background: var(--brand-primary);
  color: var(--brand-white) !important;
  border: 0;
  border-radius: 50px;
  transition: all .3s ease;
}

.btn-brand:hover,
.get-started-btn:hover,
.appointment-btn:hover {
  background: var(--brand-primary-dark);
  color: var(--brand-white) !important;
  box-shadow: var(--brand-shadow-md);
  transform: translateY(-2px);
}

/* زر الأنشطة (أخضر) */
.btn-activity {
  background: var(--brand-success);
  color: var(--brand-white) !important;
  border: 0;
  border-radius: 50px;
  transition: all .3s ease;
}

.btn-activity:hover {
  background: var(--brand-success-dark);
  box-shadow: 0 6px 20px rgba(76, 175, 80, .28);
  transform: translateY(-2px);
}

/* زر التسجيل/الأحداث (برتقالي) */
.btn-register,
.btn-event {
  background: var(--brand-accent);
  color: var(--brand-white) !important;
  border: 0;
  border-radius: 50px;
  font-weight: 600;
  transition: all .3s ease;
}

.btn-register:hover,
.btn-event:hover {
  background: var(--brand-accent-dark);
  box-shadow: 0 6px 20px rgba(255, 152, 0, .32);
  transform: translateY(-2px);
}

/* ==========================================================================
   الأقسام
   ========================================================================== */
.section-bg,
.section-alt {
  background-color: var(--brand-surface);
}

.section-title h2 {
  color: var(--brand-text);
}

.section-title h2::after,
.section-title p::after {
  background: var(--brand-primary);
}

/* قسم الأنشطة — لمسة خضراء */
#activities .section-title h2::after,
.activities .section-title h2::after {
  background: var(--brand-success);
}

/* ==========================================================================
   شارات وعناصر مساعدة
   ========================================================================== */
.badge-primary-soft {
  background: var(--brand-primary-soft);
  color: var(--brand-primary-dark);
}

.badge-success-soft {
  background: var(--brand-success-soft);
  color: var(--brand-success-dark);
}

.badge-accent-soft {
  background: var(--brand-accent-soft);
  color: var(--brand-accent-dark);
}

.text-brand {
  color: var(--brand-primary) !important;
}

.text-activity {
  color: var(--brand-success) !important;
}

.text-accent {
  color: var(--brand-accent) !important;
}

.bg-brand {
  background-color: var(--brand-primary) !important;
}

.bg-activity {
  background-color: var(--brand-success) !important;
}

.bg-accent {
  background-color: var(--brand-accent) !important;
}

.bg-surface {
  background-color: var(--brand-surface) !important;
}

/* ==========================================================================
   الروابط والتمرير
   ========================================================================== */
.back-to-top,
.scroll-top {
  background: var(--brand-primary);
}

.back-to-top:hover,
.scroll-top:hover {
  background: var(--brand-primary-dark);
}

::selection {
  background: var(--brand-primary);
  color: var(--brand-white);
}

/* شريط التمرير */
::-webkit-scrollbar-thumb {
  background: var(--brand-primary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-primary-dark);
}

::-webkit-scrollbar-track {
  background: var(--brand-surface);
}

/* ==========================================================================
   حقول الإدخال والنماذج — تحكم موحد مدمج عبر المتغيرات
   ========================================================================== */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
select {
  font-size: var(--input-font-size, 13.5px) !important;
  padding: var(--input-padding-y, 7px) var(--input-padding-x, 12px) !important;
  border-radius: var(--input-border-radius, 8px) !important;
  min-height: var(--input-height, 38px);
}

textarea.form-control,
textarea {
  min-height: auto !important;
  font-size: var(--input-font-size, 13.5px) !important;
  padding: var(--input-padding-y, 7px) var(--input-padding-x, 12px) !important;
  border-radius: var(--input-border-radius, 8px) !important;
}

.form-label {
  font-size: var(--label-font-size, 13px) !important;
  margin-bottom: var(--label-margin-bottom, 4px) !important;
}

/* ==========================================================================
   إصلاحات عامة لنموذج الاتصال (الوضع الافتراضي / الفاتح)
   ========================================================================== */
.contact .php-email-form input,
.contact .php-email-form textarea {
  color: var(--brand-text) !important;
  border-color: #ced4da;
}
.contact .php-email-form input::placeholder,
.contact .php-email-form textarea::placeholder {
  color: #757575 !important;
  opacity: 1; /* Firefox */
}

/* ==========================================================================
   الوضع الداكن (Dark Mode) - Public Site
   ========================================================================== */
[data-theme="dark"] {
  --brand-white: #12141c;
  --brand-surface: #1a1d29;
  --brand-border: rgba(255, 255, 255, 0.08);
  --brand-text: #f8fafc;
  --brand-text-soft: #cbd5e1;
  --brand-muted: #94a3b8;
}

[data-theme="dark"] body {
  background-color: var(--brand-white);
  color: var(--brand-text-soft);
}

[data-theme="dark"] #header {
  background-color: var(--brand-white);
  border-bottom: 1px solid var(--brand-border);
}

[data-theme="dark"] .navbar a, 
[data-theme="dark"] .navbar a:focus {
  color: var(--brand-text-soft);
}
[data-theme="dark"] .navbar a:hover,
[data-theme="dark"] .navbar .active,
[data-theme="dark"] .navbar .active:focus,
[data-theme="dark"] .navbar li:hover > a {
  color: var(--brand-primary);
}
[data-theme="dark"] .navbar .dropdown ul { background: var(--brand-surface); border: 1px solid var(--brand-border); }
[data-theme="dark"] .navbar .dropdown ul a { color: var(--brand-text-soft); }

[data-theme="dark"] .section-title h2 { color: var(--brand-text); }
[data-theme="dark"] .section-title p { color: var(--brand-text-soft); }

[data-theme="dark"] #hero, [data-theme="dark"] .hero {
  background-color: var(--brand-white);
}
[data-theme="dark"] #hero h1, [data-theme="dark"] #hero h2, [data-theme="dark"] .about h3 {
  color: var(--brand-text);
}
[data-theme="dark"] .about p { color: var(--brand-text-soft); }

[data-theme="dark"] .counts, [data-theme="dark"] .doctors {
  background-color: var(--brand-surface) !important;
}

[data-theme="dark"] .icon-box, [data-theme="dark"] .count-box {
  background-color: var(--brand-surface) !important;
  border: 1px solid var(--brand-border) !important;
  color: var(--brand-text-soft) !important;
  box-shadow: 0px 4px 15px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] .icon-box h4 { color: var(--brand-text); }

[data-theme="dark"] .doctors .member {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  box-shadow: 0px 4px 15px rgba(0,0,0,0.4);
}
[data-theme="dark"] .doctors .member .member-info h4 { color: var(--brand-text); }
[data-theme="dark"] .doctors .member .member-info p,
[data-theme="dark"] .doctors .member .member-info span { color: var(--brand-text-soft) !important; }
[data-theme="dark"] .doctors .member .contact-details p { color: var(--brand-text-soft); }
[data-theme="dark"] .doctors .member .contact-details p a { color: var(--brand-text-soft); }
[data-theme="dark"] .doctors .member .contact-details p a:hover { color: var(--brand-primary); }

[data-theme="dark"] .contact .info {
  background: var(--brand-surface);
  border-top: 3px solid var(--brand-primary);
  border-bottom: 3px solid var(--brand-primary);
}
[data-theme="dark"] .contact .info h4,
[data-theme="dark"] .contact .info p {
  color: var(--brand-text-soft);
}
[data-theme="dark"] .contact .php-email-form {
  background: var(--brand-surface);
  border-top: 3px solid var(--brand-primary);
  border-bottom: 3px solid var(--brand-primary);
}
[data-theme="dark"] .contact .php-email-form input,
[data-theme="dark"] .contact .php-email-form textarea {
  background: var(--brand-white) !important;
  border-color: var(--brand-border) !important;
  color: var(--brand-text) !important;
}
[data-theme="dark"] .contact .php-email-form input::placeholder,
[data-theme="dark"] .contact .php-email-form textarea::placeholder {
  color: var(--brand-muted) !important;
}
[data-theme="dark"] .contact .php-email-form .form-text {
  color: var(--brand-muted) !important;
}

/* الأنشطة والتطوع والمنشورات */
[data-theme="dark"] .act-card {
  background: var(--brand-surface);
  border-color: var(--brand-border);
}
[data-theme="dark"] .act-card-title {
  color: var(--brand-text);
}
[data-theme="dark"] .act-card-desc {
  color: var(--brand-text-soft);
}
[data-theme="dark"] .act-card-meta li {
  color: var(--brand-muted);
}
[data-theme="dark"] .activities-section {
  background: var(--brand-white);
}
[data-theme="dark"] .act-empty {
  background: var(--brand-surface);
  border-color: var(--brand-border);
}
[data-theme="dark"] .act-filter {
  background: var(--brand-surface);
  border-color: var(--brand-border);
  color: var(--brand-text-soft);
}
[data-theme="dark"] .act-filter:hover {
  background: rgba(33, 150, 243, 0.1);
  color: var(--brand-primary);
}
[data-theme="dark"] .act-modal-content {
  background: var(--brand-surface);
  color: var(--brand-text-soft);
  border: 1px solid var(--brand-border);
}
[data-theme="dark"] .act-modal-content h3 {
  color: var(--brand-text);
}

/* ==========================================================================
   قسم "لماذا نحن؟" — إصلاح ألوان الوضعين
   ========================================================================== */

/* الوضع الفاتح: الخلفية الداكنة هي جزء من التصميم، لكن الزر يجب أن يكون مقروءاً */
.why-us .content {
  background: #212121;
  color: #fff;
}
.why-us .content h3 { color: #fff; }
.why-us .content p   { color: rgba(255,255,255,0.85); }
.why-us .content .more-btn {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.why-us .content .more-btn:hover {
  background: #fff;
  color: var(--brand-primary);
}

/* الوضع الداكن: نخفف الخلفية لتعتمد على سطح القسم بدل الأسود القاسي */
[data-theme="dark"] .why-us {
  background-color: var(--brand-white);
}
[data-theme="dark"] .why-us .content {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
}
[data-theme="dark"] .why-us .content h3 { color: var(--brand-text); }
[data-theme="dark"] .why-us .content p   { color: var(--brand-text-soft); }
[data-theme="dark"] .why-us .content .more-btn {
  background: rgba(33, 150, 243, 0.15);
  color: var(--brand-primary-light);
  border: 1px solid rgba(33, 150, 243, 0.35);
}
[data-theme="dark"] .why-us .content .more-btn:hover {
  background: var(--brand-primary);
  color: #fff;
  border-color: transparent;
}
[data-theme="dark"] .why-us .icon-boxes .icon-box {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
[data-theme="dark"] .why-us .icon-boxes .icon-box h4 { color: var(--brand-text); }
[data-theme="dark"] .why-us .icon-boxes .icon-box p  { color: var(--brand-text-soft); }

/* About section */
[data-theme="dark"] .about {
  background-color: var(--brand-white);
}
[data-theme="dark"] .about .icon-boxes h3,
[data-theme="dark"] .about .icon-boxes h4 { color: var(--brand-text); }
[data-theme="dark"] .about .icon-boxes p,
[data-theme="dark"] .about .description   { color: var(--brand-text-soft); }

/* Why Us / About — icon box إطار أزرق في الداكن */
[data-theme="dark"] .about .icon-box .icon {
  border-color: var(--brand-primary-light);
  background: rgba(33, 150, 243, 0.08);
}
[data-theme="dark"] .about .icon-box .icon i {
  color: var(--brand-primary-light);
}