/* =========================================================
   EL ABTAL — Theme Refresh (drop-in overlay)
   يتحمّل بعد الـ <style> الأصلي في index.html فيغيّر شكل
   كل حاجة (ألوان، ظلال، راديوس، هيدر، تابات) من غير ما
   يلمس أي HTML ID أو أي كلاس بيستخدمه app.js — صفر خطورة
   على أي فانكشن شغالة.

   إزاي تستخدمه:
   1. حط الملف ده في نفس مجلد public اللي فيه index.html
   2. ضيف السطر ده في index.html فورًا بعد وسم </style> الأصلي:
      <link rel="stylesheet" href="/theme-refresh.css">
   ========================================================= */

:root{
  /* راديوس وظلال أهدأ وأعمق شوية — إحساس "منتج" مش "لوحة بيانات" */
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(15,18,28,.03), 0 6px 18px rgba(15,18,28,.05);
  --shadow-lift:0 2px 8px rgba(15,18,28,.05), 0 18px 36px rgba(15,18,28,.08);

  /* البرتقالي فضل هو هوية العلامة الأصلية زي ما كان */
  --orange:#F0562A; --orange-dark:#D03D14; --orange-soft:rgba(240,86,42,.09);

  /* البنفسجي بيفضل بس للمعنى الدلالي الأصلي بتاعه (تمب/موقوف/إلخ)،
     مش لون تنقّل — البرتقالي هو لون النشاط والتابات زي ما كان */
  --purple:#6D5AE0; --purple-soft:rgba(109,90,224,.10);
}
html.dark{
  --shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 6px 20px rgba(0,0,0,.45);
  --shadow-lift:0 1px 0 rgba(255,255,255,.03) inset, 0 20px 40px rgba(0,0,0,.55);
  --orange:#FF7A47; --orange-dark:#DD4218; --orange-soft:rgba(255,122,71,.13);
  --purple:#9B8CF5; --purple-soft:rgba(155,140,245,.16);
}

/* ---- هيدر: حدود أخف، بدون ظل تحتي تقيل ---- */
header{
  border-bottom:1px solid var(--border-soft);
  box-shadow:0 1px 0 rgba(15,18,28,.02);
}
header h1 img{border-radius:11px}

/* ---- شريط التابات (mode-switch): من "أزرار رمادي متجاورة" لـ
   "segmented control" بخلفية واحدة وبنفسجي واضح للنشط ---- */
.mode-switch{
  gap:4px;
  padding:8px 12px;
  border-bottom:1px solid var(--border-soft);
}
.mode-btn{
  background:transparent;
  color:var(--muted);
  font-weight:600;
  padding:8px 16px;
  transition:background-color .15s ease, color .15s ease, transform .1s ease;
}
.mode-btn:hover{background:var(--card2);color:var(--text)}
.mode-btn.active{
  background:var(--orange);
  color:#fff;
  font-weight:700;
  box-shadow:0 3px 10px color-mix(in srgb, var(--orange) 45%, transparent);
}
html.dark .mode-btn.active{background:var(--orange);color:#1a0a03}

/* ---- كروت الإحصائيات: شريط لوني رفيع على الجنب بدل دايرة أيقونة كبيرة —
   نفس منطق الألوان الموجود (roster/booked/notbooked...) بس تنفيذ أنضف ---- */
.stat{
  border-radius:var(--radius-sm);
  padding:12px 14px 11px;
  border-right:3px solid transparent;
  background:var(--card) !important; /* نلغي التلوين الخفيف للخلفية، اللون بقى في الشريط بس */
}
.stat::before{
  width:20px;height:20px;font-size:10px;
  background:transparent !important;
}
.stat.roster,.stat.total,.stat.shifts,.stat.scheduled,.stat.bookedpct{border-right-color:var(--blue)}
.stat.booked,.stat.hours{border-right-color:var(--green)}
.stat.notbooked,.stat.lost,.stat.late{border-right-color:var(--red)}
.stat.offered,.stat.breaks{border-right-color:var(--amber)}
.stat.suspended,.stat.projected{border-right-color:var(--purple)}
.stat:hover{transform:none;box-shadow:var(--shadow)}

/* ---- شرائح المدن (city-chip): النشط بقى بنفسجي بدل أسود/برتقالي،
   ثابت مع لون التنقل في التابات فوق ---- */
.city-chip.active{background:var(--orange) !important;border-color:var(--orange) !important;color:#fff !important}
.city-chip.active::before{background:#fff !important;box-shadow:none !important}
html.dark .city-chip.active{background:var(--orange) !important;border-color:var(--orange) !important;color:#1a0a03 !important}

/* ---- أزرار عامة وحقول الإدخال: راديوس وباد أوسع شوية، إحساس أهدأ ---- */
.icon-btn{border-radius:12px}
input[type=date], select, button.ghost{border-radius:12px}

/* ---- كارت تسجيل الدخول: ظل أنعم ---- */
.login-card{box-shadow:var(--shadow-lift);border-radius:24px}
.login-card input{border-radius:14px}
.login-card button{border-radius:14px}

/* ---- كروت عامة تستخدم var(--radius) هتاخد الراديوس الجديد أوتوماتيك
   من غير أي تعديل تاني (ov-city-card, sup-card, region-card, ot-card...) ---- */

/* ---- شبكة إحصائيات اللايف (.lo-stat) — دي الشبكة الفعلية اللي بتظهر
   في تاب "المناديب" (متأخر/استارت/بريك/READY/شغال/فاضين...) وهي كلاس
   مختلف تمامًا عن .stat، فمحتاجة أوفررايد منفصل بنفس منطق الشريط اللوني ---- */
.lo-stat{
  background:var(--card);
  border:1px solid var(--border-soft);
  border-right:3px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 8px 9px;
  box-shadow:var(--shadow);
}
.lo-stat.lo-working,.lo-stat.lo-ready,.lo-stat.lo-withOrder,.lo-stat.lo-hours{border-right-color:var(--green)}
.lo-stat.lo-break,.lo-stat.lo-noOrder{border-right-color:var(--amber)}
.lo-stat.lo-starting,.lo-stat.lo-avgUtr,.lo-stat.lo-orders{border-right-color:var(--blue)}
.lo-stat.lo-late,.lo-stat.lo-lowUtr{border-right-color:var(--red)}
.lo-stat.lo-temp,.lo-stat.lo-other{border-right-color:var(--purple)}
.lo-stat.lo-ending,.lo-stat.lo-open{border-right-color:var(--muted2)}
.lo-stat.lo-highWallet{border-right-color:var(--teal)}
.lo-stat .lbl{font-weight:700}

/* ---- التابات الفرعية جوه تاب اللايف (لايف/حالات غريبة/الأرشيف/المناديب/Live)
   نفس منطق mode-btn.active — بنفسجي بدل برتقالي عشان التناسق ---- */
.lo-subtab.active{background:var(--orange);color:#fff}
html.dark .lo-subtab.active{color:#1a0a03}

/* ---- كارت المندوب في القايمة تحت — حدود خفيفة عشان الفصل بين الكروت
   يبقى أوضح على خلفية بيضا ---- */
.rider-card{border:1px solid var(--border-soft) !important}

/* =========================================================
   4 تعديلات احترافية إضافية — تطبيق مباشر من غير نقاش:
   1) توحيد حدود كل الكروت الرئيسية على نفس الحدود الخفيفة
   2) البرتقالي يفضل بس للأكشن/الهوية — التمييز والتحذير ياخدوا
      لون تاني (amber/blue) بدل ما البرتقالي يتكرر لمعاني مختلفة
   3) شيل التلوين البرتقالي من صفوف الجدول الزوجية (كان مزحوم)
   4) هوفر lift بس على الكروت القابلة للدوس، مش كل كارت إحصائي
   ========================================================= */

/* 1) توحيد الحدود على كل الكروت الرئيسية */
.region-card,.sup-card,.ov-city-card,#officeTargetPanel .ot-card,
.rlb-row,.asg-row,.adj-ov-cell,.rstmt-header,.rstmt-section,.stmt-cell,
.rstmt-cell,.starting-row,.lo-order-item,.roster-panel{
  border:1px solid var(--border-soft) !important;
}

/* 2) البرتقالي = أكشن أساسي بس. التمييز/الرابط ياخد أزرق هادي بدل ما
   يتكرر البرتقالي في سياقات معناها مختلف (شارة، حدود تمييز، لينكات) */
.stmt-grand{border-color:var(--blue) !important}
.stmt-grand b{color:var(--blue) !important}
.adj-zone-icon{background:var(--blue-soft) !important;color:var(--blue) !important}
.adj-zone-stats b{color:var(--blue) !important}
.lo-map-link,.rp-loc-link{color:var(--blue) !important}
.adj-row-check{accent-color:var(--blue) !important}
table.summary-table caption{border-bottom-color:var(--blue) !important}

/* 3) شيل تلوين الصفوف الزوجية البرتقالي — رمادي محايد بس،
   والبرتقالي يفضل للصف الكلي (grand) بس عشان معناه يوضح */
table.summary-table tbody tr:nth-child(even) td{background:var(--card2) !important}
table.summary-table tbody tr:nth-child(even) td.name{background:var(--card2) !important}

/* 4) الهوفر lift بس على الكروت اللي فعلاً قابلة للدوس/فيها أكشن.
   الكروت العرضية (ملخصات وإحصائيات) تفضل ثابتة */
.stat:hover,#officeTargetPanel .ot-card:hover,.ov-city-card:hover,
.adj-ov-cell:hover,.stmt-cell:hover,.rstmt-cell:hover{
  transform:none !important;
  box-shadow:var(--shadow) !important;
}
.rider-card:hover,.region-card:hover,.rlb-row:hover,.starting-row:hover,
.lo-order-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lift);
}