/* ============================================================
   MR.FLEX — الوضع الداكن (لوحة الإدارة + بوابة المسوّقين)
   ------------------------------------------------------------
   كل الواجهات مبنية على متغيرات style.css، فالوضع الداكن يعيد
   تعريف المتغيرات نفسها، ثم يصحّح القليل من الألوان الثابتة.
   الـpalette: Navy عميق بدل الأسود الصافي، وألوان الحالات أفتح
   قليلًا لتبقى مقروءة على الخلفية الداكنة.
   ============================================================ */

/* زر التبديل */
.theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
.md-icon-btn.theme-toggle svg { width: 18px; height: 18px; }

[data-theme="dark"] {
  --bg: #0A0F1E;
  --surface: #111829;
  --surface-2: #172036;

  --sidebar-bg: #070B16;
  --sidebar-bg-hover: #10172B;
  --sidebar-bg-active: #1B2446;
  --sidebar-text: #8F98B8;
  --sidebar-text-active: #FFFFFF;

  --primary: #7B74FF;
  --primary-dark: #9A94FF;
  --primary-soft: rgba(123, 116, 255, 0.16);
  --mint: #2BC4BD;
  --mint-soft: rgba(43, 196, 189, 0.14);

  --text: #E7EAF6;
  --text-muted: #A2AAC6;
  --text-faint: #6E7797;
  --border: #222C45;
  --border-strong: #303C5C;

  --success: #3DCB82;
  --success-soft: rgba(61, 203, 130, 0.14);
  --warning: #F3AE45;
  --warning-soft: rgba(243, 174, 69, 0.14);
  --danger: #F46476;
  --danger-soft: rgba(244, 100, 118, 0.14);
  --info: #6C9BF5;
  --info-soft: rgba(108, 155, 245, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* ---------- تصحيحات الألوان الثابتة (مشتركة) ---------- */
[data-theme="dark"] .btn-primary { background: #5B53EE; color: #fff; }
[data-theme="dark"] .btn-primary:hover { background: #6A63F5; }
[data-theme="dark"] .btn-danger:hover { background: rgba(244, 100, 118, 0.24); }
[data-theme="dark"] .toast { background: #1E2944; color: #fff; border: 1px solid var(--border-strong); }
[data-theme="dark"] .toast.success { background: #0F3A28; }
[data-theme="dark"] .toast.error { background: #46192A; }
[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .sidebar-scrim { background: rgba(2, 4, 12, 0.7); }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { color: var(--text); background-color: var(--surface); }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-faint); }
[data-theme="dark"] select option { background: var(--surface); color: var(--text); }
[data-theme="dark"] .cell-thumb,
[data-theme="dark"] .image-upload img { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] tbody tr:hover { background: var(--surface-2); }
[data-theme="dark"] .auth-card { box-shadow: var(--shadow-lg); }

/* ---------- بوابة المسوّقين ---------- */
[data-theme="dark"] .md-notif-item.unread:hover { background: rgba(123, 116, 255, 0.22); }
[data-theme="dark"] .md-alert.warn { color: #F6C27A; border-color: rgba(243, 174, 69, 0.3); }
[data-theme="dark"] .md-alert.danger { border-color: rgba(244, 100, 118, 0.3); }
[data-theme="dark"] .md-alert.info { color: #A9C4FA; border-color: rgba(108, 155, 245, 0.3); }
[data-theme="dark"] .md-stat.hero { background: linear-gradient(135deg, #4F46E5, #7B5CF0); }
[data-theme="dark"] .md-btn.primary { background: #5B53EE; border-color: #5B53EE; }
[data-theme="dark"] .md-chip.active { background: #5B53EE; border-color: #5B53EE; }
[data-theme="dark"] .md-state.error { border-color: rgba(244, 100, 118, 0.3); }
[data-theme="dark"] .md-skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, #1F2A45 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
}
[data-theme="dark"] .md-modal-overlay,
[data-theme="dark"] .md-drawer-scrim { background: rgba(2, 4, 12, 0.7); }
[data-theme="dark"] .md-topbar { background: #070B16; border-bottom: 1px solid var(--border); }

/* ---------- وحدات المنصة ---------- */
[data-theme="dark"] .wd-contact-callout span { color: var(--text); }
[data-theme="dark"] .tpl-thumb-2 { background: #050811; }

/* ============================================================
   الصفحات العامة الخفيفة (site.css): تتبّع الطلب، بعد الطلب،
   من نحن، تواصل معنا، السياسات، الشروط، الشحن والاسترجاع، 404،
   الصيانة. نفس منطق أعلاه: إعادة تعريف متغيرات --s-* الخاصة
   بـsite.css فقط، بنفس ألوان الوضع الداكن المستخدمة في لوحة
   الإدارة/بوابة المسوّقين حتى تبقى الهوية موحّدة، دون أي تعديل
   على البنية أو التخطيط. الأزرار والبطاقات والحقول تعتمد بالفعل
   على هذه المتغيرات بالكامل في site.css فتتبدّل تلقائيًا.
   ============================================================ */
[data-theme="dark"] {
  --s-bg: #0A0F1E;
  --s-surface: #111829;
  --s-surface-2: #172036;
  --s-ink: #E7EAF6;
  --s-ink-soft: #A2AAC6;
  --s-ink-faint: #6E7797;
  --s-line: #222C45;

  --s-accent: #7B74FF;
  --s-accent-dark: #9A94FF;
  --s-accent-soft: rgba(123, 116, 255, 0.16);

  --s-good: #3DCB82;
  --s-good-soft: rgba(61, 203, 130, 0.14);
  --s-warn: #F3AE45;
  --s-warn-soft: rgba(243, 174, 69, 0.14);
  --s-bad: #F46476;
  --s-bad-soft: rgba(244, 100, 118, 0.14);

  --s-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -18px rgba(0, 0, 0, .6);
}
[data-theme="dark"] .s-header { background: rgba(10, 15, 30, .86); border-bottom-color: var(--s-line); }
[data-theme="dark"] .s-prose p,
[data-theme="dark"] .s-prose li { color: var(--s-ink-soft); }
[data-theme="dark"] .s-contact-icon.whatsapp { background: rgba(61, 203, 130, 0.14); color: #3DCB82; }
[data-theme="dark"] .s-skip { background: var(--s-ink); color: var(--s-bg); }

@media (prefers-reduced-motion: no-preference) {
  html[data-theme] body { transition: background-color .2s ease, color .2s ease; }
}