/* ============================================================
   AURORA — طبقة التحسينات البصرية فوق style.css
   لا تغيّر أي IDs/classes — تأثيرات بصرية فقط.

   كل قيمة هنا من tokens.css. لا تكتب لوناً صريحاً — سيكسر الوضع الفاتح.

   وكانت هنا خمسةَ عشرَ رمزاً في ثلاث كتلٍ متقابلةٍ للثيمين: تدرّجُ
   العلامة، وتدرّجُ الزرّ، وسطحُ البطاقة والشريطِ والنافذة، وظلالُها.
   ولا يقرؤها أحد — لا في هذا الملفّ ولا في غيره. فمن يفتح الملفّ
   ليغيّر شكلَ البطاقة يجدها ويظنّها المصدر، ويعدّلها فلا يتغيّر شيء:
   البطاقةُ تُطلى أسفلَ الملفّ بـ `--surface-2` مباشرةً. فحُذفت.
   ============================================================ */

/**
 * الخلفية: سطحٌ واحد.
 * ====================
 *
 * كانت أربعَ بقعٍ ضوئيةٍ — بنفسجيتين وسماويةً ووردية — تتحرّك في حلقةٍ
 * مدّتُها ثمانيَ عشرةَ ثانيةً بلا توقّف، وفوقها شبكةُ خطوطٍ ممسوحةٌ
 * بشكلٍ بيضويّ.
 *
 * وذلك يصبغ كلَّ ما فوقه: البطاقةُ الرماديةُ تصير بنفسجيةً باهتة،
 * وحدُّها يصير أرجوانياً، والشاشةُ كلُّها تُقرأ متجرَ ألعابٍ لا أداةَ
 * عمل. وهو ما قيل عنها بالضبط.
 *
 * وحركةٌ لا تتوقّف خلف شاشةٍ تُفتَح ثماني ساعاتٍ ليست تفصيلاً: العينُ
 * تلاحقها بلا أن تجد فيها معنى.
 *
 * فسطحٌ واحدٌ ساكن. والألوانُ تبقى حيث تحمل معنىً: حالةٌ، أو تفاعل.
 */
body { background: var(--surface-0); }
body::before { display: none; }
body::after { display: none; }

/* ── الشريط الجانبي ────────────────────────────────────── */
.sidebar {
  background: var(--surface-1) !important;
  border-left: 1px solid var(--border-subtle) !important;
  box-shadow: none;
}
/**
 * الشعار: حرفٌ مقروء، لا لافتةٌ متحرّكة.
 *
 * كان تدرّجاً بنفسجياً‑سماوياً يتحرّك في حلقةٍ دائمة، فوقه هالةُ ضوءٍ
 * بثمانيةَ عشرَ بكسلاً. وحركةٌ لا تتوقّف في زاويةِ شاشةٍ تُفتَح ثماني
 * ساعاتٍ تسحب العينَ إليها بلا أن تقول شيئاً.
 */
.sidebar-logo h1 {
  color: var(--text-strong) !important;
  letter-spacing: .08em;
  font-weight: var(--fw-bold) !important;
}

/**
 * عناصر التنقّل: شريطٌ يقول أين أنت.
 *
 * كان البندُ النشط تدرّجاً بنفسجياً بتوهّجٍ داخليٍّ وخارجيّ، وأيقونتُه
 * تُسقِط ظلاً ضوئياً، والبندُ عند المرور يزحف أربعةَ بكسلات.
 *
 * وما يحتاجه المستعمِل أن يعرف أين هو: سطحٌ خافتٌ وشريطٌ على الحافّة
 * ونصٌّ أوضح. والحركةُ عند المرور تُشوّش قائمةً تُقرأ بالمسح السريع.
 */
.nav-item {
  position: relative;
  transition: background-color .15s ease, color .15s ease;
}
.nav-item::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 0 3px 3px 0;
  background: var(--accent);
  transition: height .18s ease;
}
.nav-item.active {
  background: var(--surface-3) !important;
  color: var(--text-strong) !important;
}
.nav-item.active::before { height: 60%; }
.nav-item.active i , .nav-item.active svg{ color: var(--accent); }

/* ── الهيدر (topbar) زجاجي ─────────────────────────────── */
/* الشريطُ العلويّ: سطحٌ مصمت. كان تدرّجاً مموّهاً بظلٍّ تحته */
.topbar {
  background: var(--surface-1) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: none;
}
/* عنوانُ الصفحة: يُقرأ لا يُزيَّن. كان تدرّجاً بنفسجياً‑سماوياً.
   ولا يُثبَّت مقاسُه هنا: كان `19px !important` يعلو تصغيرَه على الشاشة
   الضيّقة، فيبقى العنوانُ كبيراً حيث لا يتّسع له الشريط. */
.topbar-title {
  color: var(--text-strong);
  font-weight: var(--fw-bold) !important;
  letter-spacing: -.01em;
}
.topbar-refresh { transition: transform .4s ease; }
.topbar-refresh:hover { transform: rotate(180deg); }

/* زر تبديل الثيم — تظهر أيقونة واحدة حسب الوضع الحالي */
.theme-toggle { position: relative; }
.theme-toggle .theme-icon-light { display: inline-flex; }
.theme-toggle .theme-icon-dark  { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-light { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-dark  { display: inline-flex; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .theme-toggle .theme-icon-light { display: none; }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .theme-toggle .theme-icon-dark  { display: inline-flex; }
}
.theme-toggle:hover i , .theme-toggle:hover svg{ transform: rotate(20deg); transition: transform var(--transition-base); }

/**
 * البطاقات: سطحٌ وحدٌّ رفيع.
 *
 * كانت زجاجاً مموّهاً بحافّةٍ تتوهّج، وترتفع خمسةَ بكسلاتٍ عند مرور
 * الفأرة فوقها بهالةٍ بنفسجيةٍ بأربعين بكسلاً. وفي صفحةٍ فيها عشرُ
 * بطاقاتٍ يعني ذلك أنّ الشاشةَ تتحرّك كلّما تحرّك المؤشّر.
 *
 * والبطاقةُ في أداةِ عملٍ حاويةٌ لا عنصرُ عرض: سطحٌ، وحدٌّ يفصلها عمّا
 * جاورها، وظلٌّ خفيفٌ يرفعها عن الخلفية. ولا ترتفع إلا ما يُنقَر.
 */
.card, .kpi-card, .category-card, .product-card,
.home-section, .wa-manage-card, .wa-action-card, .sales-stat-pill {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
/* وما يُنقَر وحدَه يستجيب: البطاقةُ الساكنة لا تتحرّك تحت المؤشّر */
.category-card:hover, .product-card:hover, .kpi-clickable:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-md) !important;
}

/**
 * أرقامُ اللوحة: مسطّحةٌ وثقيلة.
 *
 * كانت مصبوغةً بتدرّجٍ بنفسجيٍّ‑سماويّ عبر background-clip. ورقمُ مبيعاتٍ
 * ملوَّنٌ بتدرّجٍ يُقرأ زينةً لا معلومة، ويفقد من تباينه: أهمُّ رقمٍ في
 * الصفحة يصير أضعفَ ما فيها.
 */
.kpi-value, .sales-stat-pill .val {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text-strong) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
/* الزخرفةُ تُطفَأ عن البطاقات الساكنة وحدَها.
   وكانت `.kpi-card::after` بلا استثناء — والبطاقةُ التي تُفتَح تحمل
   الصنفين معاً، فكان `!important` هنا يقتل علامةَ «هذه تُضغَط» هناك
   (style.css). فبقيت البطاقاتُ الثلاثُ القابلةُ للفتح بلا ما يميّزها،
   والقاعدةُ التي كُتبت لتميّزها لا تُرسَم أصلاً. */
.kpi-card:not(.kpi-clickable)::after { display: none !important; }

/**
 * الأزرار: لونٌ واحد، بلا لمعةٍ ولا ارتفاع.
 *
 * كان الزرُّ الأساسيُّ تدرّجاً متحرّكاً تعبره لمعةٌ بيضاءُ مائلةٌ عند
 * المرور، ويرتفع بكسلين، ويُلقي هالةً بثمانيةٍ وعشرين بكسلاً. ذلك شكلُ
 * زرِّ «اشترِ الآن» في صفحةِ منتج، لا زرِّ «حفظ» يُضغَط أربعين مرّةً
 * في اليوم.
 */
.btn-primary {
  background: var(--accent-solid) !important;
  color: var(--text-on-accent) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border: 1px solid transparent;
}
.btn-primary:hover {
  background: var(--accent-solid-hover) !important;
  transform: none;
  box-shadow: none !important;
}
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }

/* ── شارات وتبويبات ─────────────────────────────────────── */
.seg-btn.active, .period-btn.active {
  background: var(--accent-solid) !important;
  color: var(--text-on-accent) !important;
  box-shadow: none !important;
}

/* ── شريطُ التمرير: رمادي ──
   كان تدرّجاً بنفسجياً يتحوّل إلى سماويٍّ عند المرور. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong) !important;
  border-radius: var(--radius-xs); border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted) !important; }

/**
 * دخولُ المحتوى: تلاشٍ خفيف.
 *
 * كان كلُّ شيءٍ يصعد ستّةَ عشرَ بكسلاً ويكبر من 98.5%، والبطاقاتُ
 * بتتابعٍ متدرّج، وكلُّ صفٍّ في الجدول يفعل ذلك بعد سابقه. فجدولُ
 * طلباتٍ بعشرين صفاً يتلوّى ربعَ ثانيةٍ قبل أن يُقرأ.
 *
 * والحركةُ في أداةِ عملٍ تُخفي معنىً واحداً: أنّ شيئاً جديداً وصل.
 * فتُختصَر إلى تلاشٍ سريعٍ على الكتلة، وتُترَك الصفوفُ ساكنة.
 */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.kpi-grid > *, .home-grid > *, .category-grid > *,
.product-cards-grid > *, .alerts-box, .table-wrap, .card, .set-layout {
  animation: riseIn .18s ease-out both;
}

/* صفوفُ المحادثات: تُبرَز بسطحٍ لا بحركة */
.chat-item { transition: background-color .15s ease; }
.chat-item:hover { background: var(--surface-3); }

/**
 * ومن طلب سكوناً، سكنت.
 *
 * نظامُ التشغيل يحمل التفضيل، ومن فعّله عنده سببٌ — دوارٌ أو صداعٌ
 * تُثيره الحركة. وتجاهلُه ليس ذوقاً في التصميم.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* صورةُ المحادثة: دائرةٌ بلا هالة */
.chat-avatar { box-shadow: none !important; }

/* ── المودال والدروار زجاج ───────────────────────────────── */
/* النافذةُ المنبثقة: سطحٌ وظلٌّ يرفعها — بلا هالةٍ بنفسجية */
.modal, .drawer {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-lg) !important;
}
.modal-overlay, .drawer-overlay { backdrop-filter: blur(4px); }

/* ── حقول الإدخال: حلقةٌ تقول أين التركيز ──────────────────
   الحلقةُ إشارة، والهالةُ التي كانت خلفها بأربعةٍ وعشرين بكسلاً زينةٌ
   من الطبقة التي أُطفئت في بقيّة اللوحة — وهي تلوّن ما جاور الحقلَ في
   نموذجٍ حقولُه متجاورة. */
.form-input:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* QR يطفو ويتوهّج — الخلفية نفسها تبقى بيضاء في الثيمين (شرط المسح) */
/* إطارُ رمز QR: ظلٌّ يرفعه لا هالةٌ بنفسجية بخمسين بكسلاً */
.qr-wrapper { box-shadow: var(--shadow-lg) !important; }

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  *, body::before { animation: none !important; }
}