/* =====================================================================
   admin.css — هوية لوحة الإدارة البصرية الجديدة (اتجاه نيلي عصري — Indigo)

   اختير النيلي لأنه أنسب للوحة عمليات/مالية كثيفة: طابع مؤسسي حديث
   (Linear/Stripe)، ويتناغم مع أزرق الرسوم البيانية بدل أن يتضاربا.
   كل أزواج الألوان (نص/خلفية) مُتحقَّقة ≥ 4.5:1 في الوضعين.

   يُحمَّل في صفحات /admin وحدها، وكل قاعدة فيه مقصورة على `body.app-admin`
   فلا يمسّ واجهة المتجر إطلاقاً — حتى لو شاركت نفس style.css.

   الآلية: إعادة تعريف توكنز style.css على `body.app-admin` بدل :root.
   البطاقة الأقرب في الشجرة (body) تتغلّب على :root لكل ما بداخلها، فتُعاد
   صياغة الهوية كاملةً دون لمس المتجر. ألوان الحالة ولوحة الرسوم تبقى كما
   هي (مفحوصة لعمى الألوان) — نغيّر لون العلامة والأسطح والحبر والظلال فقط.
   الوضعان الفاتح والداكن مختاران يدوياً تماماً كالأصل (data-theme على <html>).
   ===================================================================== */

/* ---------------------------------------------------- الوضع الفاتح */
body.app-admin{
  color-scheme:light;

  --bg:#F4F5FB;
  --surface:#FFFFFF;
  --surface-2:#EFF1F9;
  --surface-3:#E4E7F4;
  --line:#E1E4F0;
  --line-strong:#CBD0E6;

  --ink:#14161F;
  --ink-2:#454A5A;
  --ink-3:#656B80;   /* مُتحقَّق: 5.29:1 على السطح، 4.69:1 على surface-2 */

  --accent:#4F46E5;
  --accent-hover:#4338CA;
  --accent-ink:#4338CA;
  --accent-soft:#E8E7FD;
  --on-accent:#FFFFFF;

  /* تدرّج العلامة — لأسطح التمييز (الأزرار، الشعار، الشارات الفاعلة) */
  --grad:linear-gradient(135deg,#4F46E5,#4338CA);
  --grad-soft:linear-gradient(135deg,#5A52E8,#4F46E5);

  /* ظلال بمسحة نيلية خفيفة تشدّ المكوّنات لهوية واحدة */
  --shadow-sm:0 1px 2px rgba(20,22,45,.06);
  --shadow:0 1px 2px rgba(20,22,45,.06), 0 8px 20px -12px rgba(50,45,160,.26);
  --shadow-lg:0 2px 8px rgba(20,22,45,.08), 0 22px 46px -22px rgba(50,45,160,.36);

  /* زوايا أكبر قليلاً — إحساس منتج عصري */
  --r-sm:10px; --r:14px; --r-lg:18px;
}

/* ---------------------------------------------------- الوضع الداكن */
:root[data-theme="dark"] body.app-admin{
  color-scheme:dark;
  --bg:#0D0F1A;
  --surface:#171A2B;
  --surface-2:#1F2236;
  --surface-3:#282C44;
  --line:#2D3148;
  --line-strong:#3E4463;
  --ink:#ECEDF5;
  --ink-2:#A9AEC4;
  --ink-3:#8C92AC;
  --accent:#818CF8;
  --accent-hover:#A5B0FB;
  --accent-ink:#C7CCFF;
  --accent-soft:#232A4A;
  --on-accent:#FFFFFF;
  --grad:linear-gradient(135deg,#5F5AE8,#4F46E5);
  --grad-soft:linear-gradient(135deg,#6E72F2,#5F5AE8);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -12px rgba(0,0,0,.65);
  --shadow-lg:0 2px 8px rgba(0,0,0,.45), 0 22px 46px -22px rgba(0,0,0,.75);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body.app-admin{
    color-scheme:dark;
    --bg:#0D0F1A;
    --surface:#171A2B;
    --surface-2:#1F2236;
    --surface-3:#282C44;
    --line:#2D3148;
    --line-strong:#3E4463;
    --ink:#ECEDF5;
    --ink-2:#A9AEC4;
    --ink-3:#8C92AC;
    --accent:#818CF8;
    --accent-hover:#A5B0FB;
    --accent-ink:#C7CCFF;
    --accent-soft:#232A4A;
    --on-accent:#FFFFFF;
    --grad:linear-gradient(135deg,#5F5AE8,#4F46E5);
    --grad-soft:linear-gradient(135deg,#6E72F2,#5F5AE8);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -12px rgba(0,0,0,.65);
    --shadow-lg:0 2px 8px rgba(0,0,0,.45), 0 22px 46px -22px rgba(0,0,0,.75);
  }
}

/* =====================================================================
   طبقة المكوّنات — لمسات الهوية التي لا تكفيها التوكنز وحدها.
   كلها بأسبقية `body.app-admin ...` فتتغلّب على style.css بلا !important،
   ولا تلمس أي خاصية تخطيط (عرض/flex/grid) حفاظاً على عمل الصفحات.
   ===================================================================== */

/* ── الشعار في السايدبار: علامة متدرّجة بوهج خفيف ── */
body.app-admin .sidebar .logo .mark{
  background:var(--grad);
  box-shadow:0 6px 16px -6px var(--accent);
  border-radius:11px;
}

/* ── السايدبار: حدّ أنعم ومسحة سطح ── */
body.app-admin .sidebar{
  background:var(--surface);
  border-inline-start:1px solid var(--line);
}

/* ── عناصر التنقّل: زوايا أنعم وانتقال ألطف ── */
body.app-admin .sidebar .nav-item,
body.app-admin .sidebar .nav-toggle{
  border-radius:10px;
}
/* العنصر النشط: شريحة متدرّجة بنصّ فاتح ووهج — أبرز إشارة في الهوية */
body.app-admin .sidebar .nav-item.active{
  background:var(--grad);
  color:var(--on-accent);
  box-shadow:0 6px 16px -8px var(--accent);
}
body.app-admin .sidebar .nav-item.active svg{color:var(--on-accent)}
/* الرابط الفرعي النشط: حافّة ملوّنة أعرض بدل التعبئة الصلبة */
body.app-admin .nav-sub a.active{
  background:var(--accent-soft);
  color:var(--accent-ink);
  border-inline-start:2px solid var(--accent);
}

/* ── الترويسة: شفافية خفيفة مع ضباب يفصلها عن المحتوى عند التمرير ── */
body.app-admin .header{
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}

/* ── صورة المستخدم الرمزية: متدرّجة بنصّ فاتح ── */
body.app-admin .avatar{
  background:var(--grad);
  color:var(--on-accent);
}

/* ── بطاقات المؤشر: رمز متدرّج ملوّن يعطي نبضة لون في الصف ── */
body.app-admin .kpi .ico{
  background:var(--grad-soft);
  color:var(--on-accent);
  box-shadow:0 4px 12px -6px var(--accent);
}
body.app-admin .kpi .ico svg{color:var(--on-accent)}

/* ── البطاقات: زوايا أكبر (من التوكنز) + حدّ أرقّ ── */
body.app-admin .card{
  border-color:var(--line);
}

/* ── الأزرار: التعبئة الأساسية متدرّجة بوهج خفيف ── */
body.app-admin .btn{
  background:var(--grad);
  border-color:transparent;
  box-shadow:0 6px 16px -10px var(--accent);
}
body.app-admin .btn:hover{
  background:var(--grad);
  border-color:transparent;
  filter:brightness(1.07);
}
body.app-admin .btn.ghost{
  background:var(--surface);
  color:var(--ink-2);
  border-color:var(--line-strong);
  box-shadow:none;
}
body.app-admin .btn.ghost:hover{
  background:var(--surface-2);
  color:var(--ink);
  filter:none;
}
body.app-admin .btn.danger{
  background:var(--critical);
  border-color:transparent;
  box-shadow:0 6px 16px -10px var(--critical);
}

/* ── الجداول: رأس بمسحة العلامة الخفيفة بدل الرمادي المحايد ── */
body.app-admin thead th{
  background:color-mix(in srgb,var(--accent) 7%,var(--surface-2));
  color:var(--ink-2);
}
body.app-admin tbody tr:hover{
  background:color-mix(in srgb,var(--accent) 4%,var(--surface-2));
}

/* ── الرقائق الفاعلة والشرائط: تتبع تدرّج العلامة ── */
body.app-admin .chip.on,
body.app-admin .tab-pill.on,
body.app-admin .mode-tab.on{
  background:var(--grad);
  border-color:transparent;
  color:var(--on-accent);
}

/* ملاحظة: شريط التقدّم (.prog-track) والمقياس (.meter) يستعملان --accent،
   فصارا بنفسجيَّين تلقائياً عبر التوكنز. لا نتجاوز هنا كي لا نطمس ألوان
   الحالة الدلالية (فشل=أحمر، مخزون منخفض=برتقالي) بأسبقية أعلى. */

/* ── صفحة الدخول: بطاقة بشريط علوي متدرّج يعرّف الهوية فوراً ── */
body.app-admin .login-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
}
body.app-admin .login-card::before{
  content:"";position:absolute;inset-inline:0;top:0;height:4px;
  background:var(--grad);
}
body.app-admin .login-brand .mark{
  background:var(--grad);
  color:var(--on-accent);
  box-shadow:0 6px 16px -6px var(--accent);
}

/* ── حلقة التركيز: وهج العلامة الأنعم ── */
body.app-admin input:focus,
body.app-admin select:focus,
body.app-admin textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

@media (prefers-reduced-motion:reduce){
  body.app-admin .btn,
  body.app-admin .sidebar .nav-item{transition:none}
}

/* =====================================================================
   طبقة الهيكلية — مكوّنات التخطيط الجديدة للرئيسية (Hero KPI).
   بنية فقط؛ البيانات والوظائف من القالب كما هي.
   ===================================================================== */

/* ── عنوان قسم: شريط لوني + عنوان خافت يعطي إيقاعاً بين الأقسام ── */
body.app-admin .section-head{
  display:flex;align-items:center;gap:10px;margin:22px 2px 12px;
}
body.app-admin .section-head.first{margin-top:14px}
body.app-admin .section-head .bar{
  width:4px;height:16px;border-radius:999px;background:var(--grad);flex:0 0 4px;
}
body.app-admin .section-head h2{
  font-size:13.5px;font-weight:600;color:var(--ink-2);letter-spacing:.01em;
}
body.app-admin .section-head .count{
  font-size:11.5px;background:var(--surface-3);color:var(--ink-2);
  border-radius:999px;padding:1px 9px;
}
body.app-admin .section-head .count.warn{background:var(--critical);color:#fff}
body.app-admin .section-link{
  margin-inline-start:auto;font-size:13px;color:var(--accent-ink);font-weight:600;
}

/* ── البطاقة البطل: الإيراد يتصدّر بحجم كبير، واتجاهه بجانبه ── */
body.app-admin .hero-kpi{position:relative;overflow:hidden}
body.app-admin .hero-kpi::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--grad);
}
body.app-admin .hero-main{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
}
body.app-admin .hero-lead{
  display:flex;gap:14px;padding:22px 22px 20px;
  border-inline-end:1px solid var(--line);
}
body.app-admin .hero-lead .ico{
  width:42px;height:42px;border-radius:12px;flex:0 0 42px;
  background:var(--grad-soft);color:var(--on-accent);display:grid;place-items:center;
  box-shadow:0 5px 14px -6px var(--accent);
}
body.app-admin .hero-lead .ico svg{width:21px;height:21px;color:var(--on-accent)}
body.app-admin .hero-lead-txt{min-width:0}
body.app-admin .hero-lead .lbl{font-size:13px;color:var(--ink-3);font-weight:500}
body.app-admin .hero-val{
  font-size:40px;font-weight:700;line-height:1.08;letter-spacing:-.025em;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;
  margin:5px 0 9px;white-space:nowrap;
}
body.app-admin .hero-val .unit{
  font-size:17px;font-weight:500;color:var(--ink-3);margin-inline-start:4px;
}
body.app-admin .hero-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px}
body.app-admin .hero-compare{margin:11px 0 0;font-size:12.5px;line-height:1.95}
body.app-admin .hero-chart{padding:16px 20px 10px;min-width:0}
body.app-admin .hero-chart-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:4px;
}
body.app-admin .hero-chart-head h2{font-size:13.5px;color:var(--ink-2);font-weight:600}
@media (max-width:860px){
  body.app-admin .hero-main{grid-template-columns:1fr}
  body.app-admin .hero-lead{
    border-inline-end:none;border-bottom:1px solid var(--line);
  }
  body.app-admin .hero-val{font-size:34px}
}

/* ── مؤشر مضغوط للشريط الثانوي (البطل أخذ الإيراد) ── */
body.app-admin .kpi.compact{padding:14px 16px}
body.app-admin .kpi.compact .top{margin-bottom:8px}
body.app-admin .kpi.compact .val{font-size:25px}

/* =====================================================================
   طبقة الهيكلية المشتركة — ترقية المكوّنات التي تظهر في كل الصفحات،
   فيستفيد كل /admin دفعةً واحدة بلا لمس كل قالب على حدة.
   ===================================================================== */

/* ── رأس الصفحة: فاصل سفلي يفصل الترويسة عن المحتوى (كل الصفحات) ── */
body.app-admin .page-head{
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
body.app-admin .page-head h1{font-size:23px;letter-spacing:-.02em}
body.app-admin .page-head .sub{font-size:13.5px}

/* ── شريط الفلاتر كبطاقة: يجمع أدوات التصفية في حاوية واحدة واضحة
   (الطلبات/الباقات/البطاقات/المدفوعات/التقارير/البحث/الاستيراد) ── */
body.app-admin form.filters{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:14px 16px;
  box-shadow:var(--shadow-sm);
}
body.app-admin form.filters label{font-size:12px;color:var(--ink-3)}
/* زرّ التطبيق يبقى محاذياً لأسفل الحقول */
body.app-admin form.filters .btn{align-self:flex-end}

/* ── رؤوس البطاقات: عنوان أوضح وإيقاع ثابت ── */
body.app-admin .card-head{padding:14px 18px}
body.app-admin .card-head h2{font-size:15px}

/* ── صفوف الفلو (التحصيل/الإيرادات): زوايا متناسقة مع الهوية ── */
body.app-admin .flow-step{border-radius:var(--r)}

/* ── شرائح التبويب (التحصيل): إيقاع أوضح ── */
body.app-admin .tabs-row{margin-bottom:18px}

/* ── قوائم المفاتيح (kv) في صفحات التفاصيل: تباعد أريح ── */
body.app-admin .kv{gap:10px 20px}

/* =====================================================================
   شريط الفلترة العصري — يعالج «العجقة»: شبكة محاذاة منتظمة بدل flex
   المبعثر، وشرائح مسطّحة segmented بدل الأقراص المحاطة، وعناصر نماذج
   بلون العلامة. كله مُنطَّق على body.app-admin فلا يمسّ المتجر.
   ===================================================================== */

/* ── شريط الفلاتر كشبكة منتظمة: الحقول تصطفّ بأعمدة متساوية لا تتبعثر ── */
body.app-admin form.filters{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:13px 14px;
  align-items:end;
  padding:16px 16px 17px;
}
body.app-admin form.filters .f{min-width:0;margin:0}
body.app-admin form.filters label{
  font-size:11.5px;font-weight:600;color:var(--ink-3);
  letter-spacing:.01em;margin-bottom:5px;
}
/* ارتفاع موحّد لكل الحقول فيتحقّق خطّ أساس واحد عبر الصف */
body.app-admin form.filters input,
body.app-admin form.filters select{
  min-height:40px;border-radius:10px;
}
/* زرّا «عرض» و«مسح» في نهاية الشبكة، محاذيان لأسفل الحقول */
body.app-admin form.filters > div[style*="flex:0"]{align-self:end}
body.app-admin form.filters > div[style*="flex:0"] .btn{min-height:40px;width:100%}

/* خانة «تصفية إضافية»: مفاتيح مرتّبة عمودياً داخل خليّتها ── */
body.app-admin form.filters .f input[type=checkbox]{
  width:16px;height:16px;accent-color:var(--accent);
}

/* عناصر النماذج عبر اللوحة: لون العلامة للتحديد ── */
body.app-admin input[type=checkbox],
body.app-admin input[type=radio]{accent-color:var(--accent)}

/* ── الشرائح (تبويب نوع التقرير + مَدَيات التاريخ): مسطّحة segmented ──
   ممتلئة بلا حدٍّ للخامل، وبتدرّج العلامة للفاعل — يزيل «حساء الأقراص». */
body.app-admin .chips .chip{
  border:1px solid transparent;
  background:var(--surface-2);
  color:var(--ink-2);
  font-weight:500;
  padding:6px 13px;
}
body.app-admin .chips .chip:hover{
  background:var(--surface-3);color:var(--ink);
}
body.app-admin .chips .chip.on{
  background:var(--grad);color:var(--on-accent);border-color:transparent;
  box-shadow:0 4px 12px -6px var(--accent);
}
body.app-admin .chips .chip .n{opacity:.8}

/* صفّ «المدى:» — تباعد أنعم وإيقاع أهدأ ── */
body.app-admin .chips{gap:7px;align-items:center}

/* ── عنوان قسم داخل نموذج: يجمّع الحقول الطويلة في مجموعات مقروءة ── */
body.app-admin .form-section{
  display:flex;align-items:center;gap:9px;
  margin:24px 0 14px;
  font-size:12.5px;font-weight:700;color:var(--ink-2);letter-spacing:.02em;
}
body.app-admin .form-section::before{
  content:"";width:4px;height:14px;border-radius:999px;
  background:var(--grad);flex:0 0 4px;
}
body.app-admin .form-section::after{
  content:"";flex:1;height:1px;background:var(--line);
}
body.app-admin form > .form-section:first-of-type{margin-top:6px}

/* =====================================================================
   عناصر النماذج العصرية — قوائم بسهم مخصّص، حقول تاريخ ملمّعة، وتحويمات
   أنعم. مُطبَّقة على كل /admin فتتوحّد الفلاتر والنماذج بمظهر حديث واحد.
   ===================================================================== */

/* ── القوائم المنسدلة: سهم مخصّص بدل سهم المتصفح الخام ── */
body.app-admin select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8599' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 13px center;
  padding-inline-end:36px;
  cursor:pointer;
}
body.app-admin select:hover{border-color:var(--line-strong)}

/* ── حقول التاريخ: مؤشّر التقويم أنعم ويتبع وضع اللون ── */
body.app-admin input[type=date]{cursor:pointer}
body.app-admin input[type=date]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.55;transition:opacity .12s;
}
body.app-admin input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:.9}

/* ── كل الحقول: تحويم أنعم على الحدّ + placeholder أهدأ ── */
body.app-admin input:hover:not(:focus),
body.app-admin select:hover:not(:focus),
body.app-admin textarea:hover:not(:focus){border-color:var(--line-strong)}
body.app-admin input::placeholder,
body.app-admin textarea::placeholder{color:var(--ink-3);opacity:.7}

/* ── داخل شريط الفلاتر: الحقول بسطح أخفت قليلاً لتبرز عن البطاقة ── */
body.app-admin form.filters input,
body.app-admin form.filters select{
  background-color:var(--surface-2);
  border-color:var(--line);
  transition:border-color .12s, box-shadow .12s, background-color .12s;
}
body.app-admin form.filters input:focus,
body.app-admin form.filters select:focus{background-color:var(--surface)}

/* ── أزرار الفلتر: «عرض» بارز و«مسح» أخفّ — مجموعة متّسقة ── */
body.app-admin form.filters > div[style*="flex:0"] .btn.ghost{
  background:transparent;border-color:var(--line-strong);
}
body.app-admin form.filters > div[style*="flex:0"] .btn.ghost:hover{
  background:var(--surface-2);
}