/* ============================================================
   نظام القوالب (الثيمات) المركزي — يُطبَّق على كل الموقع
   - متغيّرات ألوان + خلفيات لكل قالب
   - خط أساسي قابل للتبديل عبر --app-font
   - تنسيق موحّد للبطاقات والأزرار وشريط التنقّل والأيقونات
   ============================================================ */

/* ===== الخطوط الافتراضية (يمكن استبدالها بخطوطك) ===== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

/* ▼▼▼ خطوطك المخصّصة ▼▼▼
   المرفوع حالياً: مدني العربي (وزن Black). */
@font-face{
  font-family:'Madani Arabic';   /* الملف المرفوع: وزن Black */
  src:url('/static/fonts/madani-arabic.woff2') format('woff2'),
      url('/static/fonts/madani-arabic.woff') format('woff'),
      url('/static/fonts/madani-arabic.ttf') format('truetype');
  font-weight:400 900; font-display:swap;
}
/* Rigot غير مرفوع بعد — مُعطّل لتفادي طلبات 404.
   لتفعيله لاحقاً: ارفع rigot.woff2 وأزل التعليق وأعد 'Rigot' لـ --app-display.
@font-face{
  font-family:'Rigot';
  src:url('/static/fonts/rigot.woff2') format('woff2'),
      url('/static/fonts/rigot.woff') format('woff'),
      url('/static/fonts/rigot.ttf') format('truetype');
  font-weight:400 800; font-display:swap;
}
*/
/* ▲▲▲ ───────────────────────────────────────────────────── ▲▲▲ */

/* ===== القالب الافتراضي: بنفسجي ملكي ===== */
:root{
  /* الخط الأساسي لكل الموقع: مدني العربي */
  --app-font:'Madani Arabic','Tajawal','Cairo','Segoe UI',Tahoma,Arial,sans-serif;
  /* خط العناوين: مدني أيضاً حالياً (يصبح Rigot عند رفعه) */
  --app-display:'Madani Arabic','Tajawal','Cairo','Segoe UI',sans-serif;

  --app-bg-1:#f7f6ff;  --app-bg-2:#edf0fb;
  --app-glow-1:rgba(124,58,237,.16);
  --app-glow-2:rgba(245,158,11,.10);

  --app-primary:#5b4bdb;   --app-primary-2:#8b5cf6;
  --app-accent:#f59e0b;

  --app-card:rgba(255,255,255,.94);
  --app-card-border:rgba(99,102,241,.16);
  --app-ring:rgba(124,58,237,.32);
  --app-shadow:0 10px 30px rgba(76,57,150,.10);
  --app-shadow-hover:0 16px 40px rgba(76,57,150,.18);

  --app-icon-1:rgba(124,58,237,.18);
  --app-icon-2:rgba(245,158,11,.16);
  --app-icon-ring:rgba(124,58,237,.22);
}

/* ===== أزرق بحري ===== */
[data-app-theme="ocean"]{
  --app-bg-1:#eff8ff; --app-bg-2:#e1eef9;
  --app-glow-1:rgba(14,165,233,.16); --app-glow-2:rgba(16,185,129,.10);
  --app-primary:#0e7490; --app-primary-2:#0ea5e9; --app-accent:#06b6d4;
  --app-card-border:rgba(14,165,233,.16); --app-ring:rgba(14,165,233,.32);
  --app-shadow:0 10px 30px rgba(12,74,110,.12);
  --app-shadow-hover:0 16px 40px rgba(12,74,110,.20);
  --app-icon-1:rgba(14,165,233,.18); --app-icon-2:rgba(6,182,212,.16); --app-icon-ring:rgba(14,165,233,.22);
}

/* ===== زمردي ===== */
[data-app-theme="emerald"]{
  --app-bg-1:#f0fdf6; --app-bg-2:#e3f6ed;
  --app-glow-1:rgba(16,185,129,.16); --app-glow-2:rgba(132,204,22,.12);
  --app-primary:#047857; --app-primary-2:#10b981; --app-accent:#f59e0b;
  --app-card-border:rgba(16,185,129,.16); --app-ring:rgba(16,185,129,.32);
  --app-shadow:0 10px 30px rgba(6,95,70,.12);
  --app-shadow-hover:0 16px 40px rgba(6,95,70,.20);
  --app-icon-1:rgba(16,185,129,.18); --app-icon-2:rgba(132,204,22,.16); --app-icon-ring:rgba(16,185,129,.22);
}

/* ===== غروب دافئ ===== */
[data-app-theme="sunset"]{
  --app-bg-1:#fff7ed; --app-bg-2:#fdeae2;
  --app-glow-1:rgba(244,63,94,.14); --app-glow-2:rgba(245,158,11,.16);
  --app-primary:#e11d48; --app-primary-2:#f97316; --app-accent:#f59e0b;
  --app-card-border:rgba(244,63,94,.14); --app-ring:rgba(244,63,94,.30);
  --app-shadow:0 10px 30px rgba(190,24,72,.12);
  --app-shadow-hover:0 16px 40px rgba(190,24,72,.20);
  --app-icon-1:rgba(244,63,94,.16); --app-icon-2:rgba(245,158,11,.18); --app-icon-ring:rgba(244,63,94,.20);
}

/* ===== وردي ===== */
[data-app-theme="rose"]{
  --app-bg-1:#fff5f9; --app-bg-2:#fbe6f0;
  --app-glow-1:rgba(236,72,153,.16); --app-glow-2:rgba(168,85,247,.10);
  --app-primary:#be185d; --app-primary-2:#ec4899; --app-accent:#a855f7;
  --app-card-border:rgba(236,72,153,.16); --app-ring:rgba(236,72,153,.30);
  --app-shadow:0 10px 30px rgba(157,23,77,.12);
  --app-shadow-hover:0 16px 40px rgba(157,23,77,.20);
  --app-icon-1:rgba(236,72,153,.18); --app-icon-2:rgba(168,85,247,.16); --app-icon-ring:rgba(236,72,153,.22);
}

/* ============================================================
   التطبيق على عناصر الموقع
   (هذا الملف يُحقن بعد أنماط الصفحة، فيفوز عند تساوي الأولوية)
   ============================================================ */

/* الخط الأساسي على كامل الموقع + تنعيم العرض (يخفّف ثقل وزن Black) */
html body{
  font-family:var(--app-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* راحة أكبر للقراءة مع الخط الثقيل: تباعد أسطر مريح للفقرات */
html p, html li, html .card-desc, html .sc-desc, html .desc,
html .feed-summary, html .summary, html .excerpt{
  line-height:1.85;
}

/* خط الكلمات القصيرة فقط: العناوين والشعار والأزرار والوسوم
   (Rigot للّاتيني ويرجع لمدني للعربي). النصوص والجُمل تبقى بمدني. */
html .topbar-brand .name,
html .navbar-brand,
html .nav-brand,
html .page-title,
html .welcome h1,
html h1, html h2, html h3,
html .card-title,
html .tool-card .card-title,
html .sc-title,
html .feed-title,
html .stat-value, html .stat-label,
html .btn, html .btn-primary, html .btn-secondary,
html .nav-links a,
html .pill, html .chip{
  font-family:var(--app-display);
  letter-spacing:.2px;
}

/* استثناء صريح: الفقرات والأوصاف والنصوص الطويلة تبقى بالخط الأساسي (مدني) */
html p,
html .card-desc, html .sc-desc, html .desc,
html .feed-summary, html .summary, html .excerpt,
html .news-body, html article, html .content,
html li, html td, html input, html textarea{
  font-family:var(--app-font);
}

/* ====== الخلفية الفخمة (الوضع النهاري فقط) ====== */
html:not([data-theme="dark"]) body{
  background:
    radial-gradient(1200px 600px at 100% -10%, var(--app-glow-1), transparent 60%),
    radial-gradient(1000px 520px at -12% 110%, var(--app-glow-2), transparent 55%),
    linear-gradient(180deg, var(--app-bg-1) 0%, var(--app-bg-2) 100%) !important;
  background-attachment:fixed !important;
  color:#1e293b;
}

/* ====== الشريط العلوي الزجاجي (لوحة التحكم/المتجر) ====== */
html:not([data-theme="dark"]) .topbar{
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.6) !important;
  box-shadow:0 6px 26px -14px var(--app-ring) !important;
}
.topbar-brand .name{
  background:linear-gradient(115deg, var(--app-primary), var(--app-primary-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-weight:800;
}

/* ====== شريط التنقّل الملوّن (صفحات الأدوات) ====== */
html:not([data-theme="dark"]) .navbar{
  background:linear-gradient(115deg, var(--app-primary), var(--app-primary-2)) !important;
  box-shadow:0 6px 24px -8px var(--app-ring) !important;
  border:none !important;
}

/* ====== البطاقات — تصميم بريميوم بظلال طبقية وشريط لوني علوي ====== */
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .tool-card,
html:not([data-theme="dark"]) .stat-card,
html:not([data-theme="dark"]) .sel-card,
html:not([data-theme="dark"]) .sc-card,
html:not([data-theme="dark"]) .store-card{
  position:relative;
  background:#fff !important;
  border:1px solid rgba(16,24,40,.06) !important;
  border-radius:20px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 14px 30px -14px rgba(16,24,40,.20) !important;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .2s !important;
}
/* شريط لوني علوي يظهر عند المرور */
html:not([data-theme="dark"]) .tool-card::before,
html:not([data-theme="dark"]) .sc-card::before,
html:not([data-theme="dark"]) .store-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--app-primary), var(--app-primary-2));
  border-radius:20px 20px 0 0;
  opacity:0; transition:opacity .25s;
}
html:not([data-theme="dark"]) .tool-card:hover,
html:not([data-theme="dark"]) .sc-card:hover,
html:not([data-theme="dark"]) .store-card:hover{
  transform:translateY(-5px);
  border-color:var(--app-primary-2) !important;
  box-shadow:0 2px 6px rgba(16,24,40,.06), 0 26px 50px -18px var(--app-ring) !important;
}
html:not([data-theme="dark"]) .tool-card:hover::before,
html:not([data-theme="dark"]) .sc-card:hover::before,
html:not([data-theme="dark"]) .store-card:hover::before{ opacity:1; }

/* ====== الأزرار ====== */
.btn-primary, .btn.btn-primary, button.btn-primary,
a.btn-primary, .btn-big.btn-primary{
  background:linear-gradient(115deg, var(--app-primary), var(--app-primary-2)) !important;
  border:none !important; color:#fff !important;
  border-radius:12px !important;
  box-shadow:0 10px 22px -10px var(--app-ring) !important;
  transition:transform .15s, box-shadow .2s, filter .2s !important;
}
.btn-primary:hover, .btn.btn-primary:hover,
button.btn-primary:hover, a.btn-primary:hover{
  filter:brightness(1.07); transform:translateY(-2px);
  box-shadow:0 16px 30px -10px var(--app-ring) !important;
}

/* ====== أيقونات داخل مربّعات متدرّجة ====== */
.tool-card .card-icon, .card-icon, .sc-icon, .sel-card .sel-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:18px; margin-bottom:16px;
  background:linear-gradient(135deg, var(--app-icon-1), var(--app-icon-2));
  box-shadow:inset 0 0 0 1px var(--app-icon-ring), 0 10px 20px -10px var(--app-icon-ring);
  line-height:1;
}

/* ====== عناوين الأقسام والترحيب ====== */
html .section-title, html .sc-section-title{ color:var(--app-primary) !important; }
html .welcome h1{ font-weight:800 !important; letter-spacing:-.4px; }
html .card-arrow{ color:var(--app-primary) !important; }

/* ====== الحقول ====== */
html:not([data-theme="dark"]) input:not([type=checkbox]):not([type=radio]):not([type=range]),
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea{
  border-radius:12px !important;
  transition:border-color .15s, box-shadow .15s !important;
}
html:not([data-theme="dark"]) input:focus,
html:not([data-theme="dark"]) select:focus,
html:not([data-theme="dark"]) textarea:focus{
  border-color:var(--app-primary-2) !important;
  box-shadow:0 0 0 4px var(--app-ring) !important;
  outline:none !important;
}

/* ====== الرقائق والوسوم ====== */
html:not([data-theme="dark"]) .pill,
html:not([data-theme="dark"]) .chip,
html:not([data-theme="dark"]) .sugg-chip{
  border-color:var(--app-card-border) !important;
}

/* ====== حركة ظهور ناعمة للمحتوى (إحساس بريميوم) ====== */
@keyframes appFadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
html:not([data-theme="dark"]) .tools-grid,
html:not([data-theme="dark"]) .stats-row,
html:not([data-theme="dark"]) .sc-grid,
html:not([data-theme="dark"]) .welcome{
  animation:appFadeUp .5s ease both;
}

/* ============================================================
   زر اختيار القالب العائم + لوحة القوالب
   ============================================================ */
#appThemeFab{
  position:fixed; bottom:20px; left:20px; z-index:99998;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  font-size:1.4rem; color:#fff;
  background:linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
  box-shadow:0 10px 26px -6px var(--app-ring);
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s, box-shadow .2s;
}
#appThemeFab:hover{ transform:translateY(-2px) rotate(8deg); box-shadow:0 14px 30px -6px var(--app-ring); }

#appThemePanel{
  position:fixed; bottom:84px; left:20px; z-index:99999;
  width:240px; padding:14px; border-radius:18px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--app-card-border);
  box-shadow:0 20px 50px -12px rgba(30,27,75,.35);
  font-family:var(--app-font);
  opacity:0; transform:translateY(10px) scale(.96); pointer-events:none;
  transition:opacity .18s, transform .18s;
}
#appThemePanel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#appThemePanelTitle{ font-size:.82rem; font-weight:800; color:#1e293b; margin-bottom:10px; text-align:right; }
#appThemeGrid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.appThemeSwatch{
  position:relative; height:54px; border-radius:13px; cursor:pointer;
  border:2px solid transparent; padding:0; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
  transition:transform .14s, border-color .15s;
}
.appThemeSwatch:hover{ transform:translateY(-2px); }
.appThemeSwatch span{
  width:100%; text-align:center; font-size:.68rem; font-weight:800; color:#fff;
  padding:3px 2px; background:rgba(0,0,0,.22);
  font-family:var(--app-font);
}
.appThemeSwatch.active{ border-color:#1e293b; box-shadow:0 0 0 2px #fff inset; }
.appThemeSwatch.active::after{
  content:'✓'; position:absolute; top:4px; right:6px; color:#fff; font-weight:900;
  font-size:.8rem; text-shadow:0 1px 3px rgba(0,0,0,.5);
}

@media (max-width:640px){
  #appThemeFab{ width:46px; height:46px; bottom:16px; left:16px; font-size:1.2rem; }
  #appThemePanel{ bottom:72px; left:16px; width:210px; }
}