/* ══════════════════════════════════════════════════════════════════
   WAVENDO — هوية "Aurora" الجديدة v2 (طبقة إضافية، لا تعدّل style.css)
   نسخة مكثَّفة بصرياً بعد ملاحظة "مفيش أي تغيير" — تستهدف الكلاسات الحقيقية
   المستخدَمة فعلياً في الواجهة (glass-stat-card, premium-stats-grid,
   luxury-welcome-section...) بدل تخمينات .stat-card العامة في v1.
   ══════════════════════════════════════════════════════════════════ */

/* ── -1) أهمّ تعديل: رفع مستوى متغيّرات الظل الجذرية (--shadow / --shadow-sm).
      أغلب شاشات النظام (قوائم الموردين/العملاء/الطلبات...) مبنيّة بجافاسكريبت
      inline style مباشرة (~150 موضع في app_v3.js) لا بكلاسات CSS، فلا يمكن
      استهدافها بسلكتور — لكنها كلها تقرأ var(--shadow)/var(--shadow-sm)/var(--border)
      الموجودة أصلاً. رفع قوة هذين المتغيّرين هنا يصل تلقائياً لكل شاشة في النظام
      دفعة واحدة، بلا أي تعديل على app_v3.js نفسه. ── */
:root, [data-theme="zid-dark"]{
  --shadow-sm: 0 4px 18px color-mix(in srgb, var(--accent) 22%, rgba(0,0,0,.45)) !important;
  --shadow:    0 10px 40px color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,.75)) !important;
}
[data-theme="zid-light"]{
  --shadow-sm: 0 4px 16px color-mix(in srgb, var(--accent) 14%, rgba(0,0,0,.05)) !important;
  --shadow:    0 10px 34px color-mix(in srgb, var(--accent) 12%, rgba(0,0,0,.08)) !important;
}

/* عناصر تفاعلية inline (144+ موضع: cursor:pointer + border-radius) — توهّج عند
   المرور فوقها حتى بلا أي كلاس CSS مخصَّص لها */
[style*="cursor:pointer"][style*="border-radius"]{
  transition: box-shadow .2s cubic-bezier(.4,0,.2,1) !important;
}
[style*="cursor:pointer"][style*="border-radius"]:hover{
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 24%, transparent) !important;
}

/* ── 0) شريط توقيع علوي ثابت — عنصر جديد يُضاف عبر JS، ضمان ظهور مؤكَّد
      بصرف النظر عن أي كلاس موجود مسبقاً ── */
#wv-top-strip{
  position:fixed; top:0; right:0; left:0; height:3px; z-index:99999;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--green,#34d399), var(--accent));
  background-size: 300% 100%;
  animation: wvStripFlow 7s linear infinite;
  box-shadow: 0 0 14px var(--glow);
  pointer-events:none;
}
@keyframes wvStripFlow{ 0%{background-position:0% 0;} 100%{background-position:300% 0;} }
@media (prefers-reduced-motion: reduce){ #wv-top-strip{ animation:none; } }

/* ── 1) خلفية Aurora حيّة — أقوى وضوحاً وحركة من النسخة الأولى ── */
@keyframes wvAuroraDrift{
  0%{ transform:translate(0,0) scale(1) rotate(0deg); }
  33%{ transform:translate(-4%,3%) scale(1.12) rotate(6deg); }
  66%{ transform:translate(3%,-4%) scale(0.94) rotate(-5deg); }
  100%{ transform:translate(0,0) scale(1) rotate(0deg); }
}
body::after{
  content:''; position:fixed; inset:-10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 15% 10%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 62%),
    radial-gradient(ellipse 45% 40% at 90% 15%, color-mix(in srgb, var(--accent2) 18%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 90%, color-mix(in srgb, var(--green, #34d399) 14%, transparent) 0%, transparent 60%);
  animation: wvAuroraDrift 22s ease-in-out infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce){ body::after{ animation:none; } }

/* ── 1ب) هوية اللون تصل لكل الصفحة فوراً عند تبديل الباقة — لا تنتظر hover ولا
      تقتصر على السايدبار وحده. يقرأ كل عنصر هنا var(--accent) مباشرة، فأي
      تغيير من setColorPalette() في الإعدادات ينعكس بصرياً بوضوح في نفس اللحظة. ── */
.main-content{
  border-top: 3px solid color-mix(in srgb, var(--accent) 55%, transparent) !important;
}
.topbar{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--topbar-bg)), var(--topbar-bg)) !important;
}
.page h1, .page h2{
  position:relative;
}
.page h1::after{
  content:''; display:block; width:46px; height:3px; margin-top:8px; border-radius:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* ── 2) الشريط الجانبي: زجاجي أوضح + حافة متوهّجة دائمة ── */
.sidebar{
  background: color-mix(in srgb, var(--surface) 85%, transparent) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-left: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)) !important;
  box-shadow: 8px 0 45px rgba(0,0,0,.22), inset -1px 0 0 color-mix(in srgb, var(--accent) 10%, transparent);
}
.brand-banner{ position:relative; overflow:hidden; }
.brand-banner::before{
  content:''; position:absolute; inset:-60% -30%;
  background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--accent) 38%, transparent) 15%, transparent 35%, color-mix(in srgb, var(--accent2) 28%, transparent) 55%, transparent 75%);
  animation: wvSpin 8s linear infinite;
  opacity:.7;
}
@keyframes wvSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .brand-banner::before{ animation:none; } }

/* ── 3) عناصر التنقّل: مؤشّر نشِط منزلق + تفعيل أقوى وضوحاً ── */
.sidebar-nav{ position:relative; }
.wv-nav-indicator{
  position:absolute; right:0; width:4px; border-radius:4px;
  background: linear-gradient(var(--accent), var(--accent2));
  box-shadow: 0 0 12px var(--glow), 0 0 28px var(--glow);
  transition: top .32s cubic-bezier(.4,0,.2,1), height .32s cubic-bezier(.4,0,.2,1), opacity .2s;
  opacity:0; pointer-events:none; z-index:1;
}
.nav-item{ overflow:hidden; }
.nav-item::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(circle at var(--wv-x,50%) var(--wv-y,50%), color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 60%);
  opacity:0; transition:opacity .25s;
}
.nav-item:hover::after{ opacity:1; }
.nav-item.active{
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent2) 8%, transparent)) !important;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 22%, transparent);
}

.nav-section-body{
  overflow:hidden; max-height:900px;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s;
  opacity:1;
}
.nav-section-body.collapsed{ max-height:0; opacity:0; }
.nav-sec-toggle{ cursor:pointer; user-select:none; }
.nav-sec-chevron{ display:inline-block; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.nav-sec-toggle.collapsed .nav-sec-chevron{ transform: rotate(-90deg); }

/* ── 4) انتقال الصفحات ── */
@keyframes wvPageIn{
  from{ opacity:0; transform: translateY(14px) scale(.99); }
  to{   opacity:1; transform: translateY(0) scale(1); }
}
.page.wv-page-in{ animation: wvPageIn .42s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce){ .page.wv-page-in{ animation:none; } }

/* ── 5) بطاقة الترحيب الرئيسية (luxury-welcome-section) — توهّج أقوى وحركة ── */
.luxury-welcome-section{
  position:relative; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--glass-border, var(--border))) !important;
}
.luxury-welcome-section::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--accent) 12%, transparent) 50%, transparent 70%);
  background-size: 220% 220%;
  animation: wvSheen 6s ease-in-out infinite;
}
@keyframes wvSheen{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
@media (prefers-reduced-motion: reduce){ .luxury-welcome-section::before{ animation:none; } }
.pulse-status-dot.connected{ box-shadow:0 0 0 0 var(--green-glow, rgba(52,211,153,.5)); animation: wvDotPulse 1.8s infinite; }
@keyframes wvDotPulse{ 0%{ box-shadow:0 0 0 0 var(--green-glow,rgba(52,211,153,.5)); } 70%{ box-shadow:0 0 0 9px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }

/* ── 6) بطاقات KPI الزجاجية (glass-stat-card) — حدّ متدرّج متوهّج دائم ── */
.glass-stat-card{
  position:relative;
  border:1px solid color-mix(in srgb, var(--accent) 18%, var(--glass-border, var(--border))) !important;
}
.glass-stat-card::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  padding:1px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent 40%, color-mix(in srgb, var(--accent2) 45%, transparent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.55; transition: opacity .3s;
}
.glass-stat-card:hover::before{ opacity:1; }
.glass-icon-box{ transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.glass-stat-card:hover .glass-icon-box{ transform: scale(1.12) rotate(-6deg); box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent); }

/* ── 7) تبويبات موحّدة احترافية ── */
.q-tab, .pur-tab, .cs-tab, .vb-ftab, .fleet-tab, .ec-tab-btn, .wa-tab-btn{
  transition: background .25s, color .25s, border-color .25s, transform .15s, box-shadow .25s !important;
}
.q-tab:hover, .pur-tab:hover, .cs-tab:hover, .vb-ftab:hover, .fleet-tab:hover, .ec-tab-btn:hover, .wa-tab-btn:hover{
  transform: translateY(-2px);
}
.q-tab.active, .pur-tab.active, .cs-tab.active, .vb-ftab.active, .fleet-tab.active, .ec-tab-btn.active, .wa-tab-btn.active{
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 32%, transparent) !important;
}

#erpTabBar{
  background: color-mix(in srgb, var(--surface2) 65%, transparent);
  backdrop-filter: blur(12px);
  border:1px solid color-mix(in srgb, var(--accent) 14%, var(--border2));
  border-radius: 14px; padding:6px; gap:4px;
  box-shadow: var(--shadow-sm);
}
#erpTabBar .btn{ border-radius:10px; transition: all .22s cubic-bezier(.4,0,.2,1); }
#erpTabBar .btn-primary{ box-shadow: 0 4px 16px var(--glow); }

.setting-nav-item{ transition: all .22s cubic-bezier(.4,0,.2,1); border-radius:10px; }
.setting-nav-item.active{
  box-shadow: inset 3px 0 0 var(--accent), 0 4px 14px color-mix(in srgb, var(--accent) 15%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
}

/* ── 8) الأزرار ── */
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  transition: transform .16s cubic-bezier(.4,0,.2,1), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn:active{ transform: scale(.96); }
.btn svg{ width:15px; height:15px; flex-shrink:0; }
.btn-primary{ position:relative; overflow:hidden; box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn-primary:hover{ box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 45%, transparent) !important; }

.wv-ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background: rgba(255,255,255,.4); transform: scale(0);
  animation: wvRipple .55s ease-out forwards;
}
@keyframes wvRipple{ to{ transform:scale(2.6); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .wv-ripple{ display:none; } }

/* ── 9) بطاقات وجداول عامة (settings-card, um-table-card) ── */
.settings-card, .um-table-card, .premium-table-container, .luxury-table-wrapper, .wl-card, .vbset-card{
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s, border-color .22s;
}
.settings-card:hover, .um-table-card:hover{
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border)) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.um-table-head, .table-header-luxury{
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface2) 92%, transparent), transparent);
}

/* حقول الإدخال — توهّج تركيز أوضح */
.luxury-input:focus, .search-input:focus, .luxury-select:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* مفاتيح التبديل — لون نشط أوضح */
.premium-switch input:checked + .switch-slider, .switch input:checked + .slider{
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ── 10) شريط علوي (topbar) ── */
.topbar{
  background: var(--topbar-bg);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border2));
}

/* ── 11) شريط تمرير مخصّص ── */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--accent) 45%, var(--surface3));
  border-radius:20px; border:2px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background: color-mix(in srgb, var(--accent) 65%, var(--surface3)); }

/* ── 12) تركيز لوحة المفاتيح ── */
a:focus-visible, button:focus-visible, .nav-item:focus-visible, .btn:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius:8px;
}

/* ── 13) الشارات ── */
@keyframes wvBadgePulse{ 0%{ box-shadow:0 0 0 0 var(--glow);} 70%{ box-shadow:0 0 0 8px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
.badge.wv-pulse{ animation: wvBadgePulse 1.6s ease-out 2; }

/* ── 14) أزرار الإجراءات المميّزة (premium-action-btn) وأزرار التحديث ── */
.premium-action-btn, .um-refresh-btn{
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .2s;
}
.premium-action-btn:hover, .um-refresh-btn:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ── 15) نافذة منبثقة (modal-overlay) — دخول أنعم ── */
@keyframes wvModalIn{ from{ opacity:0; transform:translateY(14px) scale(.97);} to{ opacity:1; transform:translateY(0) scale(1);} }
.modal-overlay > *{ animation: wvModalIn .32s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce){ .modal-overlay > *{ animation:none; } }