/* ==========================================================================
   تيسير الذكر - نمط الواجهة المطور والحديث (Tayseer Al-Dhikr Modern GUI)
   تحكم كامل من شيفرة C# في الأبعاد والمواقع مع الحفاظ على جمالية المظهر وثبات الشاشة
   ========================================================================== */

/* استيراد الخطوط القرآنية والعربية المعتمدة */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Cairo:wght@400;600;700;800;900&family=Scheherazade+New:wght@400;700&display=swap');

:root {
  --primary-color: #065f46;      /* زمردي داكن */
  --primary-dark: #064e3b;       /* زمردي عميق */
  --primary-light: #ecfdf5;      /* زمردي فائق النعومة */
  --primary-border: #a7f3d0;     /* إطار زمردي ناعم */
  --accent-gold: #d97706;        /* ذهبي هادئ */
  --accent-gold-bg: #fffbeb;     /* خلفية ذهبية */
  --accent-rose: #b91c1c;        /* أحمر قرميدي هادئ */
  --accent-rose-bg: #fee2e2;     /* خلفية قرميدية */
  --accent-blue: #1d4ed8;        /* أزرق نيلي */
  --accent-blue-bg: #eff6ff;     /* خلفية نيلية */
  --bg-page: #f8f7f4;            /* خلفية هادئة مستوحاة من ورق المصحف */
  --bg-card: #ffffff;            /* خلفية البطاقات واللوحات */
  --border-card: #e2e8f0;        /* لون حدود البطاقات */
  --text-main: #1e293b;          /* لون النص الرئيسي */
  --text-muted: #64748b;         /* لون النصوص المساعدة */
  --quran-font-size: 17px;       /* حجم الخط القرآني الأساسي */
}

/* ==========================================================================
   قفل شريط التمرير الخارجي تماماً - الصفحة ثابتة بملء الشاشة بنسبة 100%
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box !important;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  max-width: 100% !important;
  max-height: 100vh !important;
  overflow: hidden !important; /* إلغاء شريط التمرير الخارجي تماماً */
  background-color: var(--bg-page) !important;
  color: var(--text-main) !important;
  font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  direction: rtl !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

/* أشرطة التمرير الداخلية الأنيقة داخل اللوحات والقائمة فقط */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 4px !important;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color) !important;
}

/* ==========================================================================
   الحاوية الرئيسية للنموذج (حاوية نسبية تتسع لـ 100% من الشاشة دون تمرير خارجي)
   تسمح لكود C# بتحديد أماكن وأبعاد العناصر بنسبة % كما تم برمجتها بدقة
   ========================================================================== */
#TayseerF {
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important; /* ضمان ثبات الصفحة بدون شريط تمرير خارجي */
  box-sizing: border-box !important;
}

/* ==========================================================================
   1. الشريط العلوي القرآني (Header Banner: الآية الكريمة - Label [1])
   يأخذ الأبعاد والموقع (Left, Top, Width, Height) مباشرة من كود C#
   ========================================================================== */
[id="310001"],
.tayseer-header-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #064e3b 0%, #065f46 60%, #047857 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  font-family: 'Amiri', 'Scheherazade New', serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(6, 78, 59, 0.18) !important;
  letter-spacing: 0.5px !important;
  border: 1px solid rgba(251, 191, 36, 0.45) !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   2. عنوان الموقع والوصف الفرعي (Brand Title & Subtitle - Label [2] & [3])
   يأخذ الأبعاد والموقع (Left, Top, Width, Height) مباشرة من كود C#
   ========================================================================== */
[id="310002"],
.tayseer-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  color: #064e3b !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 900 !important;
  letter-spacing: -0.3px !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: visible !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

[id="310003"],
.tayseer-subtitle {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  color: #475569 !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: visible !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   3. قائمة اختيار السور (Surah Select List: 400001)
   يتحكم كود C# في (Width, Height, Left, Top) بالكامل
   ========================================================================== */
[id="400001"],
select.tayseer-surah-list {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 10px !important;
  padding: 4px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  outline: none !important;
  cursor: pointer !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

[id="400001"]:focus,
select.tayseer-surah-list:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(6, 95, 70, 0.15) !important;
}

/* خيارات السور (Options) */
[id="400001"] option,
select.tayseer-surah-list option {
  padding: 5px 10px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  cursor: pointer !important;
  transition: none !important;
  line-height: 1.7 !important;
}

/* تمييز السورة المختارة */
[id="400001"] option:checked,
select.tayseer-surah-list option:checked {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   4. لوحات العرض (Panels: 300001, 300002, 300003, 300004)
   يتحكم كود C# في (Width, Height, Left, Top) بالكامل لكل لوحة
   ========================================================================== */
[id="300001"],
[id="300002"],
[id="300003"],
[id="300004"],
.tayseer-panel {
  border: 1px solid var(--border-card) !important;
  border-radius: 10px !important;
  background-color: var(--bg-card) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  padding: 10px 14px !important;
  overflow-y: auto !important;
  font-family: 'Amiri', 'Scheherazade New', serif !important;
  font-size: var(--quran-font-size) !important;
  line-height: 2 !important;
  color: var(--text-main) !important;
  box-sizing: border-box !important;
}

/* لوحة الآيات (Panel 1) */
[id="300001"],
.tayseer-panel-verses {
  background: #ffffff !important;
  text-align: right !important;
  box-sizing: border-box !important;
}

/* لوحة مقارنة المتشابهات (Panel 2) */
[id="300002"],
.tayseer-panel-compare {
  background: #ffffff !important;
  text-align: right !important;
  box-sizing: border-box !important;
}

/* لوحة الشرح (Panel 3) */
[id="300003"],
.tayseer-panel-sharh {
  background: #ffffff !important;
  box-sizing: border-box !important;
}

/* لوحة المراجع السفلية (Panel 4) */
[id="300004"],
.tayseer-panel-ref {
  background: #ffffff !important;
  padding: 4px 10px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

/* إخفاء اللوحات إذا كانت فارغة تماماً */
[id="300003"]:empty,
[id="300004"]:empty {
  display: none !important;
}

/* ضبط صور الشرح داخل اللوحة الثالثة */
[id="300003"] img,
.tayseer-panel-sharh img {
  position: static !important;
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 6px auto !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

/* ضبط روابط المراجع داخل اللوحة الرابعة */
[id="300004"] a,
.tayseer-panel-ref a {
  display: inline-block !important;
  padding: 2px 8px !important;
  margin: 2px 4px !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

[id="300004"] a:hover,
.tayseer-panel-ref a:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   4.1 تنسيق السجلات المستقلة داخل اللوحتين 1 و 2 (Separate Record Lines)
   ========================================================================== */
.tayseer-record-row {
  display: block !important;
  width: 100% !important;
  clear: both !important;
  margin-bottom: 6px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border-bottom: 1px dashed #e2e8f0 !important;
  line-height: 2 !important;
  text-align: right !important;
  direction: rtl !important;
  background-color: transparent !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

.tayseer-record-row:hover {
  background-color: #fafaf9 !important;
  border-bottom-color: #cbd5e1 !important;
}

.tayseer-record-row:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

.tayseer-record-row span,
.tayseer-record-row a {
  font-family: 'Amiri', 'Scheherazade New', serif !important;
  font-size: 17.5px !important;
}

/* علامة رقم الآية واسم السورة */
.tayseer-record-row .tayseer-aya-num,
[id="300001"] span[style*="DarkGreen" i], 
[id="300002"] span[style*="DarkGreen" i],
.tayseer-panel-verses span[style*="DarkGreen" i],
.tayseer-panel-compare span[style*="DarkGreen" i] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #065f46 !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background-color: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  padding: 1px 6px !important;
  border-radius: 9999px !important;
  margin: 0 4px !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
}

/* ==========================================================================
   5. تنسيق الألفاظ المتشابهة (Links of Mutashabihat)
   ========================================================================== */
[id="300001"] a, 
[id="300002"] a,
.tayseer-panel-verses a,
.tayseer-panel-compare a,
.tayseer-mutashabih-btn {
  text-decoration: none !important;
  font-family: 'Amiri', 'Scheherazade New', serif !important;
  font-weight: 700 !important;
  font-size: 1.05em !important;
  padding: 0 3px !important;
  border-radius: 4px !important;
  margin: 0 2px !important;
  display: inline !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  background-color: transparent !important;
}

/* الألوان المتمايزة للألفاظ */
[id="300001"] a[style*="Red" i], 
[id="300002"] a[style*="Red" i],
.tayseer-mutashabih-btn[style*="Red" i] {
  color: #b91c1c !important;
  background-color: transparent !important;
  border-bottom: 2px solid #ef4444 !important;
}
[id="300001"] a[style*="Red" i]:hover, 
[id="300002"] a[style*="Red" i]:hover,
.tayseer-mutashabih-btn[style*="Red" i]:hover {
  background-color: #fee2e2 !important;
}

[id="300001"] a[style*="Green" i], 
[id="300002"] a[style*="Green" i],
.tayseer-mutashabih-btn[style*="Green" i] {
  color: #047857 !important;
  background-color: transparent !important;
  border-bottom: 2px solid #10b981 !important;
}
[id="300001"] a[style*="Green" i]:hover, 
[id="300002"] a[style*="Green" i]:hover,
.tayseer-mutashabih-btn[style*="Green" i]:hover {
  background-color: #d1fae5 !important;
}

[id="300001"] a[style*="Blue" i], 
[id="300002"] a[style*="Blue" i],
.tayseer-mutashabih-btn[style*="Blue" i] {
  color: #1d4ed8 !important;
  background-color: transparent !important;
  border-bottom: 2px solid #3b82f6 !important;
}
[id="300001"] a[style*="Blue" i]:hover, 
[id="300002"] a[style*="Blue" i]:hover,
.tayseer-mutashabih-btn[style*="Blue" i]:hover {
  background-color: #dbeafe !important;
}

[id="300001"] a:hover, 
[id="300002"] a:hover,
.tayseer-mutashabih-btn:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}