/* ============================================================
   vendor-theme.css
   تصميم بصري بحت للعناصر الخاصة بلوحة تحكم البائع (vendor.html)
   التي لا توجد في admin.html — فلتر الوقت، مؤشرات النمو، جداول
   التحليلات، صندوق نسخ الرابط، والتبويبات الفرعية.
   -------------------------------------------------------------
   يُحمَّل بعد admin-theme.css ويستخدم نفس متغيرات التصميم (--a-*)
   ونفس نمط الوضع الليلي، من غير ما يغيّر أي class أو id أو أي
   سطر JavaScript. فقط ألوان/مسافات/استجابة.
   ============================================================ */

/* ---------------------------------------------------------
   1) شريط فلتر الوقت العام (اليوم/الأسبوع/الشهر/السنة/مخصص)
   --------------------------------------------------------- */
.time-filter-bar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  background:var(--a-panel); border:1px solid var(--a-line); border-radius:var(--a-radius);
  padding:12px 16px; margin-bottom:18px; box-shadow:var(--a-shadow);
}
.time-filter-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.tf-btn{
  background:var(--a-panel-soft); border:1px solid var(--a-line); border-radius:8px; padding:7px 14px;
  font-size:.85rem; font-family:'Almarai', sans-serif; font-weight:700; color:var(--a-muted); cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.tf-btn:hover{ border-color:var(--a-teal); color:var(--a-teal-dark); }
.tf-btn.active{ background:var(--a-teal); color:#fff; border-color:var(--a-teal); }
.time-filter-custom{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.time-filter-custom input{
  padding:7px 10px; border:1px solid var(--a-line); border-radius:8px;
  font-family:inherit; font-size:.85rem; background:var(--a-panel-soft); color:var(--a-ink);
}
.time-filter-label{ font-size:.8rem; color:var(--a-muted); font-weight:700; white-space:nowrap; }

@media(max-width:640px){
  .time-filter-bar{ flex-direction:column; align-items:stretch; }
  .time-filter-tabs{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:2px;
  }
  .time-filter-tabs::-webkit-scrollbar{ display:none; }
  .time-filter-tabs .tf-btn{ flex-shrink:0; }
  .time-filter-label{ order:-1; }
}

/* ---------------------------------------------------------
   2) مؤشرات النمو (Growth Chips/Badges) وسطر KPI الفرعي
   --------------------------------------------------------- */
.kpi-subline{ font-size:.82rem; color:var(--a-muted); margin:-10px 0 18px; }

.growth-strip{ display:flex; gap:10px; flex-wrap:wrap; margin:-8px 0 22px; }
.growth-chip{
  background:var(--a-panel); border:1px solid var(--a-line); border-radius:999px; padding:6px 14px;
  display:flex; gap:6px; align-items:center; font-size:.82rem; font-weight:700; color:var(--a-muted);
  box-shadow:var(--a-shadow);
}
.growth-chip.up{ color:var(--a-green); }
.growth-chip.down{ color:var(--a-rose); }
.growth-chip .g-sub{ font-weight:400; color:var(--a-muted); }
.growth-badge{ font-size:.85rem; font-weight:700; color:var(--a-muted); }
.growth-badge.up{ color:var(--a-green); }
.growth-badge.down{ color:var(--a-rose); }

/* ---------------------------------------------------------
   3) جداول التحليلات (أداء المنتجات، المرتجعات، مصادر الزيارات)
   --------------------------------------------------------- */
.analytics-table-wrap{
  background:var(--a-panel); border:1px solid var(--a-line); border-radius:var(--a-radius);
  padding:14px 16px; overflow-x:auto; margin-bottom:22px; box-shadow:var(--a-shadow);
}
.analytics-table{ width:100%; border-collapse:collapse; font-size:.85rem; min-width:480px; }
.analytics-table th, .analytics-table td{ padding:9px 10px; border-bottom:1px solid var(--a-line); text-align:right; }
.analytics-table th{ color:var(--a-muted); font-weight:700; font-size:.78rem; }
.analytics-table tbody tr:last-child td{ border-bottom:none; }

/* ---------------------------------------------------------
   4) صندوق نسخ الرابط (رابط المتجر / روابط التتبع)
   --------------------------------------------------------- */
.vendor-copy-box{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  background:var(--a-panel-soft); border:1px solid var(--a-line); border-radius:var(--a-radius-sm);
  padding:10px 14px;
}

/* ---------------------------------------------------------
   5) التبويبات الفرعية (طلباتي / طلبات الاسترجاع)
   --------------------------------------------------------- */
.vendor-tabs-sub{ display:flex; gap:8px; margin:14px 0; border-bottom:1px solid var(--a-line); overflow-x:auto; }
.vendor-tabs-sub button{
  background:none; border:none; padding:8px 4px; cursor:pointer;
  font-family:'Almarai', sans-serif; font-weight:700; color:var(--a-muted);
  border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s ease, border-color .15s ease;
}
.vendor-tabs-sub button:hover{ color:var(--a-teal-dark); }
.vendor-tabs-sub button.active{ color:var(--a-teal-dark); border-bottom-color:var(--a-teal); }

/* ---------------------------------------------------------
   6) توافق داكن لعناصر عامة يشترك فيها admin.html وvendor.html
   (section-title وstaff-perms-grid معرّفين أصلًا في styles.css
   بألوان الموقع الأساسية — هنا فقط بنظبطهم مع الوضع الليلي
   الخاص بلوحة التحكم، بدون تغيير أي شيء في الملف الأصلي)
   --------------------------------------------------------- */
html.dark-mode #dashboard .section-title{ color:var(--a-ink); }
html.dark-mode #dashboard .section-title::after{ background:linear-gradient(90deg, var(--a-line), transparent); }
html.dark-mode #dashboard .staff-perms-grid{ border-top-color:var(--a-line); }
html.dark-mode #dashboard .staff-perm-group-title{ border-top-color:var(--a-line); color:var(--a-muted); }

/* ---------------------------------------------------------
   7) بطاقة الرسم البياني: ارتفاع مرن حسب حجم الشاشة
   --------------------------------------------------------- */
#dashboard #vendorTimeChart{ max-width:100%; }

@media(max-width:480px){
  .growth-strip{ gap:8px; }
  .growth-chip{ padding:5px 11px; font-size:.78rem; }
}

/* ---------------------------------------------------------
   8) البنر الإعلاني الديناميكي أعلى لوحة تحكم البائع — الصور وحالة
   الإظهار/الإخفاء بيتحكم فيهم الأدمن الرئيسي بس من لوحته. لو الأدمن
   مفعّلش البنر (أو مفيش صور) الحاوية بتتشال بالكامل (display:none)
   من غير ما تسيب أي مساحة فاضية.

   البنر ثابت (Sticky) تحت شريط الحفظ العلوي طول الوقت، في كل أقسام
   لوحة البائع، وبيفضل ظاهر لما تمرّر لتحت جوه أي قسم — الـ top بيتحدّد
   ديناميكيًا بالجافاسكريبت على حسب ارتفاع شريط الحفظ الفعلي (عشان
   يتظبط صح حتى لو شريط الحفظ اتكسر لسطرين على الموبايل).
   --------------------------------------------------------- */
#vendorBannerWrap{
  margin-bottom:22px;
  position:sticky;
  top:56px; /* قيمة احتياطية، بيتم تحديثها ديناميكيًا بمعرفة الجافاسكريبت */
  z-index:39;
  background:var(--a-paper);
  padding-top:4px;
}
.vendor-banner-slider{
  position:relative; direction:ltr; overflow:hidden; border-radius:var(--a-radius);
  box-shadow:var(--a-shadow); border:1px solid var(--a-line); background:var(--a-panel-soft);
}
.vendor-banner-track{
  display:flex; transition:transform .55s cubic-bezier(.4,0,.2,1); will-change:transform;
}
.vendor-banner-slide{ flex:0 0 100%; min-width:100%; line-height:0; }
.vendor-banner-slide img{
  width:100%; height:170px; object-fit:cover; display:block; pointer-events:none;
}
.vendor-banner-dots{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:2;
}
.vb-dot{
  width:8px; height:8px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.55); transition:background .15s ease, width .15s ease;
}
.vb-dot.active{ background:#fff; width:20px; border-radius:5px; }
.vendor-banner-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:30px; height:30px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(15,20,18,.38); color:#fff; font-size:.9rem; display:flex;
  align-items:center; justify-content:center; transition:background .15s ease, opacity .15s ease;
  opacity:0;
}
.vendor-banner-slider:hover .vendor-banner-nav, .vendor-banner-slider:focus-within .vendor-banner-nav{ opacity:1; }
.vendor-banner-nav:hover{ background:rgba(15,20,18,.6); }
.vendor-banner-nav.vb-prev{ left:10px; }
.vendor-banner-nav.vb-next{ right:10px; }

@media(min-width:768px){
  .vendor-banner-slide img{ height:220px; }
}
@media(max-width:480px){
  .vendor-banner-slide img{ height:128px; }
  .vendor-banner-nav{ opacity:1; width:26px; height:26px; }
}
html.dark-mode .vendor-banner-slider{ border-color:var(--a-line); }

/* ---------------------------------------------------------
   9) الوضع الليلي — تثبيت خلفيات الأزرار النشطة برمادي غامق
   (نفس متغيرات التيل بقت فاتحة للنصوص في admin-theme.css)
   --------------------------------------------------------- */
html.dark-mode .tf-btn.active{ background:var(--a-btn-dark); color:#fff; border-color:var(--a-btn-dark); }

/* ---------------------------------------------------------
   10) كروت حالات الطلبات الملونة (طلبات جديدة / تم التواصل / تم الشحن / تم التوصيل / ملغى / مرتجع)
   --------------------------------------------------------- */
.status-stats-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:20px;
}
@media(min-width:640px){ .status-stats-grid{ grid-template-columns:repeat(3,1fr); gap:14px; } }
@media(min-width:1100px){ .status-stats-grid{ grid-template-columns:repeat(6,1fr); } }

.status-stat-card{
  display:flex; align-items:center; gap:12px;
  background:var(--panel, #fff);
  border:1px solid var(--line, #e2e8f0);
  border-inline-start:4px solid var(--st-color, var(--teal, #008080));
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.status-stat-card:hover{ transform:translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
.status-stat-icon{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; line-height:1;
  background:color-mix(in srgb, var(--st-color, var(--teal, #008080)) 14%, transparent);
}
.status-stat-info{ min-width:0; }
.status-stat-value{
  font-family:'Almarai', sans-serif; font-weight:800;
  font-size:clamp(1.1rem, 2.1vw, 1.4rem);
  color:var(--st-color, var(--teal-dark, #005959));
  letter-spacing:-.01em;
}
.status-stat-label{ font-size:.78rem; color:var(--muted, #64748b); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.status-stat-card.st-new{        --st-color:#2563eb; }
.status-stat-card.st-processing{ --st-color:#d97706; }
.status-stat-card.st-shipped{    --st-color:#7c3aed; }
.status-stat-card.st-delivered{  --st-color:#16a34a; }
.status-stat-card.st-cancelled{  --st-color:#dc2626; }
.status-stat-card.st-returned{   --st-color:#475569; }

@media(max-width:480px){
  .status-stats-grid{ gap:8px; }
  .status-stat-card{ padding:10px 12px; gap:8px; }
  .status-stat-icon{ width:32px; height:32px; font-size:1rem; }
  .status-stat-value{ font-size:1.05rem; }
  .status-stat-label{ font-size:.7rem; }
}

/* ---------------------------------------------------------
   11) لمسات الترقية البصرية الفاخرة لوحة تحكم البائع
   --------------------------------------------------------- */
.vendor-banner-slider {
  border-radius: var(--a-radius, 16px);
  overflow: hidden;
  box-shadow: var(--a-shadow, 0 4px 12px rgba(0,0,0,0.05));
  margin-bottom: 20px;
}

.analytics-table-wrap {
  border-radius: var(--a-radius, 16px);
  transition: box-shadow 0.22s ease;
}

.analytics-table-wrap:hover {
  box-shadow: var(--a-shadow-lg);
}

.vendor-copy-box {
  background: var(--a-panel-soft);
  border: 1px solid var(--a-line);
  border-radius: 12px;
  padding: 12px 16px;
  transition: border-color 0.18s ease;
}

.vendor-copy-box:hover {
  border-color: var(--a-teal);
}

html.dark-mode .status-stat-card {
  background: var(--a-panel, #212226);
  border-color: var(--a-line, #34363c);
}

html.dark-mode .status-stat-value {
  color: var(--a-ink, #e7e7ea);
}

html.dark-mode .status-stat-label {
  color: var(--a-muted, #9a9da5);
}