/* ═══════════════════════════════════════════════
   Ishtre Admin — World-Class Glassmorphism Theme
   ═══════════════════════════════════════════════ */

/* F-113 — `admin.css` **مافيهوش قاعدة `a` أساسية** خالص، فأي رابط من غير
   كلاس بياخد أزرق المتصفح الافتراضي `#0000EE` على خلفية غامقة =
   **تباين 2.09**. اتمسك على صفحة الثيم («معاينة ↗»). */
a { color: var(--red-text); }

:root {
  --bg: #0a0b10;
  --bg2: #12131a;
  --bg3: #1a1b25;
  --bg4: #222330;
  /* F-094: `--card-bg` كان **مستخدم ومش معرّف** في
     `views/platform/onboarding/layout.ejs` (layout مستقل بياخد توكناته من
     هنا). `var(--card-bg)` بترجع قيمة غير صالحة → `background` بتتلغي →
     البطاقة بتطلع بخلفية الصفحة الغامقة ومحدش واخد باله. نفس فئة F-077. */
  --card-bg: #12131a;

  /* ═══ F-094 — أسماء مرادفة لتوكنز موجودة ═══
     12 قالب أدمن اتكتبوا بأسماء عامة (`--primary` · `--text-primary` …)
     والمشروع أسماؤه (`--red` · `--ink` …). التوكن الغلط `var()` بترجع
     قيمة **غير صالحة** فالخاصية كلها بتتلغي — لون بيختفي، حد بيروح، نص
     بياخد اللون الموروث. نفس فئة F-077 (الشريط الأبيض على أبيض).
     المرادفات هنا أأمن من تعديل 12 قالب، وبتخلي الاسمين يشاوروا على
     نفس القيمة فمفيش فرصة يختلفوا. */
  --primary: var(--red);
  --primary-dark: #C2181F;
  --text-primary: var(--ink);
  /* F-admin-css: `--text-secondary` و`--text-muted` كانوا **الاتنين**
     `--ink2` — اسمين لمستويين مختلفين بنفس القيمة، فمفيش تدرّج بصري بين
     «ثانوي» و«خافت» وده جزء من إحساس «الكلام مش متنسق».
     التدرّج دلوقتي 3 مستويات حقيقية وكلها فوق WCAG AA:
       --ink  17.4 · --ink2 7.3 · --ink3 4.5  */
  --text-secondary: var(--ink2);
  --text-muted: var(--ink3);
  --text-dim: var(--ink3);
  --bg-dark: var(--bg);
  --gray: var(--ink2);
  --border: rgba(255,255,255,.06);
  --border2: rgba(255,255,255,.1);
  --glass: rgba(255,255,255,.03);
  --glass2: rgba(255,255,255,.05);
  --ink: #f0f1f5;
  --ink2: #9b9db0;
  /* F-admin-css — التباين محسوب على **أسوأ خلفية فعلية** مش على `--bg`.
     `--bg` هو #0a0b10، بس الكروت بتقعد على `--glass2` (أبيض 5%) فوق
     `--bg2` = **#1e1f25** — أفتح، والتباين عليها أقل. القيمة اللي بتعدّي
     على الخلفية الغامقة بتسقط على الكارت، فالحساب اتعمل على الأفتح. */
  --ink3: #83859b;              /* كان #5c5e72 = 3.09 — تحت WCAG AA في 12 صفحة */

  --red: #E5232B;               /* الهوية — للخلفيات والحدود، **مش للنص** */
  /* ⚠️ ممنوع تفتيح `--red` نفسه: أبيض على #E5232B = 4.56 (يعدّي)، وعلى
     #e62e36 = 4.37 (**يسقط**) — يعني تفتيحه بيصلّح النص ويكسر كل زرار
     أحمر بنص أبيض. التوكن ده للنص لوحده. */
  --red-text: #ea5157;          /* أحمر للنص على الغامق — 4.55 على أسوأ خلفية */
  --red-dim: rgba(229,35,43,.12);
  --red-glow: rgba(229,35,43,.25);
  --gold: #FFC400;
  --gold-dim: rgba(255,196,0,.12);
  --green: #22c55e;
  --green-dim: rgba(34,197,94,.12);
  --blue: #3b82f6;
  --blue-dim: rgba(59,130,246,.12);
  --purple: #a855f7;
  --purple-dim: rgba(168,85,247,.12);
  --orange: #f97316;
  --orange-dim: rgba(249,115,22,.12);
  --cyan: #06b6d4;
  --cyan-dim: rgba(6,182,212,.12);
  /* F-122: بانر «الاشتراك متوقف» **متعمّد فاتح** جوه لوحة غامقة — تحذير
     بيلفت النظر بالمخالفة. التوكنز دي بتحفظ التصميم ده وتمنع في نفس الوقت
     إن حد يحوّل نص البانر لتوكن غامق ويسيب خلفيته فاتحة (وده اللي حصل فعلًا
     أول ما حوّلت الألوان آليًا: النص بقى ذهبي على كريمي = مش مقروء).
     الاتنين بيتحركوا مع بعض أو مايتحركوش. */
  --warn-surface: #FFF4E5;      /* سطح فاتح للتحذير الحرج */
  --warn-ink: #3a2a00;          /* نص عليه — 11.8:1 */
  --warn-ink-strong: #141414;   /* عنوان عليه — 16.4:1 */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2);
  --shadow-lg: 0 4px 24px rgba(0,0,0,.4);
  --glass-border: 1px solid rgba(255,255,255,.06);
  --glass-blur: blur(20px);
  --transition: .2s cubic-bezier(.4,0,.2,1);
  --sidebar-w: 260px;
  --topbar-h: 64px;

  /* ═══ F-admin-css — مرادفات لتوكنز كانت **مستدعاة ومش معرّفة** ═══
     مأكّدة من `getComputedStyle` على الموقع الحي (مش من قراءة CSS):
       --surface  ❌  · --text  ❌  · --ink-2  ❌
     مستعملة 24 مرة في **9 من 12 صفحة أدمن**. `var()` على توكن غير معرّف
     بترجع قيمة غير صالحة → الخاصية كلها بتتلغي (نفس فئة F-077/F-094). */
  --surface: var(--bg2);
  --surface-2: var(--bg3);
  --text: var(--ink);
  --ink-2: var(--ink2);
  --ink-3: var(--ink3);

  /* ═══ المرحلة 2 — سلّم مسافات ═══
     «المساحات متدمرة» سببها إن كل قاعدة بتختار رقمها لوحدها: 10 · 12 · 14
     · 16 · 18 · 20 · 24 متبعترة من غير نظام. السلّم بيدّي إيقاع واحد. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
}

*, *::before, *::after { margin:0; padding: 0; box-sizing:border-box; }

body {
  font-family: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 20%, rgba(229,35,43,.04) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(255,196,0,.03) 0%, transparent 50%);
  z-index: -1;
  pointer-events: none;
}

/* ═══ Scrollbar ═══ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink3); }

/* ═══ Animations ═══ */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes countUp {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes glow {
  0%,100% { box-shadow: 0 0 20px rgba(229,35,43,.1); }
  50% { box-shadow: 0 0 30px rgba(229,35,43,.2); }
}

.animate-in { animation: fadeIn .4s ease both; }
.animate-in-delay-1 { animation: fadeIn .4s ease .1s both; }
.animate-in-delay-2 { animation: fadeIn .4s ease .2s both; }
.animate-in-delay-3 { animation: fadeIn .4s ease .3s both; }

/* ═══ Login ═══ */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}

.login-card {
  background: var(--glass2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: 20px;
  padding: 48px 40px;
  width: 420px;
  max-width: 90vw;
  box-shadow: var(--shadow-lg);
  animation: scaleIn .5s ease;
}

.login-logo { text-align: center; margin-bottom: 32px; }
.login-brand {
  font-family: 'Cairo', sans-serif;
  font-size: 36px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--red), #ff6b6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-dot {
  font-family: 'Cairo', sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: var(--ink);
}
.login-sub {
  color: var(--ink3);
  font-size: 13px;
  margin-top: 6px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ═══ Layout ═══ */
/* ═══════════════════════════════════════════════════════════════════════
   F-114 — لوحة التاجر كانت **مكسورة على الديسكتوب من أول يوم**
   ═══════════════════════════════════════════════════════════════════════
   كان: `display:grid; grid-template-columns: var(--sidebar-w) 1fr;`
   و`.sidebar` جوّاها بـ`position: fixed`.

   العنصر الثابت **بيتشال من تدفّق الشبكة**. فالعمود الأول (260px) كان
   بيروح لـ`main.admin-main` — أول ابن باقي في التدفّق — و**العمود التاني
   (1180px) بيفضل فاضي تمامًا**.

   القياس على 1440×900: المحتوى **260px** تحت الشريط الثابت، وصفحة
   المنتجات طولها **8,239px**. الجدول (597px) بيطلع بره حاويته لأنه
   مابيصغّرش تحت `min-content`.

   والدليل إن ده انحراف مش تصميم: `.admin-main` **لسه فيه**
   `transition: margin-right` — يعني الأصل كان بالهامش، والشبكة اتضافت
   فوقه من غير ما الـ`position:fixed` يتشال.

   ⚠️ ولا فحص واحد مسكها: الأداة كانت بتفحص اللوحات على **مقاسات موبايل
   بس** (وعلى الموبايل الشبكة عمود واحد فالعطل مابيظهرش)، وكل الفحوصات
   الهندسية (تجاوز · قص · تباين) **بتعدّي على تخطيط مضغوط سليم نحويًا**.
   ده بند 16 حرفيًا. */
.admin-layout {
  display: block;
  min-height: 100vh;
}

/* ═══ Sidebar ═══ */
.sidebar {
  background: var(--bg2);
  border-left: var(--glass-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  /* F-114: كان `right: 0` — خاصية فيزيائية مابتنعكسش مع الاتجاه، و`dir`
     هنا **متغيّر** (`<html dir="<%= dir %>">`) لأن اللوحة بتدعم الإنجليزي.
     `inset-inline-start` = يمين في RTL · شمال في LTR — بتنعكس لوحدها،
     وبتخلي هامش المحتوى (`margin-inline-start`) دايمًا على نفس الجنب. */
  top: 0; bottom: 0;
  inset-inline-start: 0;
  width: var(--sidebar-w);
  z-index: 100;
  transition: width var(--transition), transform var(--transition);
}

.sidebar.collapsed { width: 72px; }
.sidebar.collapsed .sb-logo span:not(.sb-collapse-icon),
.sidebar.collapsed .sb-nav a span:not(.sb-icon),
.sidebar.collapsed .sb-nav .sb-group-label,
.sidebar.collapsed .sb-footer .sb-user-info,
.sidebar.collapsed .sb-footer .sb-logout span { display: none; }
.sidebar.collapsed .sb-nav a { justify-content: center; padding: 12px; }
.sidebar.collapsed .sb-nav a .sb-icon { margin: 0; }
.sidebar.collapsed .sb-footer { justify-content: center; }
.sidebar.collapsed .sb-collapse-icon { transform: rotate(180deg); }

.sb-logo {
  padding: 16px 16px 16px;
  border-bottom: var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sb-brand {
  font-family: 'Cairo', sans-serif;
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--red), #ff6b6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sb-dot {
  font-family: 'Cairo', sans-serif;
  font-size: 22px;
  font-weight: 800;
}
.sb-sub {
  display: block;
  color: var(--ink3);
  font-size: 10px;
  margin-top: 2px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.sb-collapse-btn {
  background: none;
  border: none;
  color: var(--ink3);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-xs);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-collapse-btn:hover { color: var(--ink); background: var(--glass2); }
.sb-collapse-icon { transition: transform var(--transition); }

/* Navigation */
.sb-nav {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.sb-group-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 16px 12px 8px;
}

.sb-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink2);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: all var(--transition);
  position: relative;
  /* F-admin-css: كان `overflow: hidden` — موجود عشان يقص تدرّج `::before`
     على الزوايا الدايرة، **وكان بيقص النص العربي معاه**: القياس 88 رابط
     بيضيع منهم **11px رأسي بالظبط** (نزلات Cairo والتشكيل).
     الحل: الزخرفة بتقص نفسها بـ`border-radius: inherit` بدل ما الحاوية
     تقص كل حاجة. نفس المظهر، من غير قص نص. */
  overflow: visible;
}
.sb-nav a::before {
  border-radius: inherit;
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--red-dim), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.sb-nav a:hover { color: var(--ink); }
.sb-nav a:hover::before { opacity: 1; }
.sb-nav a.active {
  color: var(--red-text);
  font-weight: 700;
}
.sb-nav a.active::before { opacity: 1; }
.sb-nav a .sb-icon {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.sb-nav a span:not(.sb-icon) {
  position: relative;
  z-index: 1;
}

/* Sidebar Footer */
.sb-footer {
  padding: 12px 16px;
  border-top: var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sb-user-info { flex: 1; min-width: 0; }
.sb-user-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-role {
  display: inline-block;
  background: var(--glass2);
  padding: 1px 8px;
  border-radius: 20px;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .5px;
}
.sb-role-owner { background: var(--gold-dim); color: var(--gold); }
.sb-role-manager { background: var(--blue-dim); color: var(--blue); }
.sb-role-staff { background: var(--glass2); color: var(--ink3); }
.sb-logout {
  background: none;
  border: 1px solid var(--border2);
  color: var(--ink3);
  padding: 8px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb-logout:hover { border-color: var(--red-text); color: var(--red-text); background: var(--red-dim); }

/* ═══ Main ═══ */
.admin-main {
  padding: 0;
  min-height: 100vh;
  /* الشريط `position:fixed` فبياخد مكانه بالهامش مش بعمود شبكة.
     خاصية منطقية (`margin-inline-end`) مش `margin-right` — دستور بند 4. */
  /* ⚠️ لازم `inline-start` مش `inline-end`: الشريط على `inset-inline-start`،
     وفي RTL دي **اليمين**. أول محاولة استعملت `inline-end` فالهامش راح
     الشمال والمحتوى فضل تحت الشريط — الجدول كان بيمتد لـ1383 والشريط
     بيبدأ من 1180، يعني **عمود اسم المنتج كله متخبّي**. */
  margin-inline-start: var(--sidebar-w);
  min-width: 0;
  transition: margin-inline-start var(--transition);
}
/* الطي بيغيّر عرض الشريط لـ72px — والهامش لازم يتبعه، وإلا يفضل فراغ 188px */
.sidebar.collapsed ~ .admin-main { margin-inline-start: 72px; }

/* ═══ Topbar ═══ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: rgba(10,11,16,.8);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: var(--glass-border);
}
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-title { font-size: 18px; font-weight: 800; }
.topbar-date { color: var(--ink3); font-size: 12px; font-weight: 500; }

.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass2);
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  min-width: 240px;
  transition: all var(--transition);
}
.topbar-search:focus-within {
  border-color: rgba(229,35,43,.3);
  box-shadow: 0 0 0 3px rgba(229,35,43,.08);
}
.topbar-search input {
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  width: 100%;
}
.topbar-search input::placeholder { color: var(--ink3); }
.topbar-search svg { color: var(--ink3); flex-shrink: 0; }

.topbar-btn {
  position: relative;
  background: var(--glass2);
  border: var(--glass-border);
  color: var(--ink2);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
}
.topbar-btn:hover { color: var(--ink); background: var(--bg4); }
.topbar-btn .notif-dot {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 7px;
  height: 7px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--bg);
}

.topbar-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--red-dim), var(--gold-dim));
  border: 2px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--red-text);
}

/* ═══ Page Content ═══ */
.page-content { padding: 24px 32px; }

/* ═══ Page Header ═══ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.page-header-left { display: flex; align-items: center; gap: 16px; }
.page-header h1 { font-size: 24px; font-weight: 800; }
.page-header .date { color: var(--ink3); font-size: 13px; }
.count-badge {
  background: var(--glass2);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  border: var(--glass-border);
}

/* ═══ KPI Stat Cards ═══ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-card {
  background: var(--glass2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  position: relative;
  /* F-admin-css: كان `overflow: hidden` — و`::after` (الشريط 3px) **عنده
     `border-radius` بتاعه أصلًا**، فالقص مكانش لازم. وكان بيقص المحتوى:
     «إجمالي المبيعات» ضايع منه **64px أفقي**. */
  overflow: visible;
  min-width: 0;
  transition: all var(--transition);
}
.stat-card:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.stat-trend.up { background: var(--green-dim); color: var(--green); }
.stat-trend.down { background: var(--red-dim); color: var(--red-text); }
.stat-trend.neutral { background: var(--glass2); color: var(--ink3); }

.stat-val {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
  animation: countUp .5s ease both;
}
.stat-val small { font-size: 14px; font-weight: 500; color: var(--ink2); }
.stat-label {
  font-size: 12px;
  color: var(--ink3);
  font-weight: 500;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.stat-card.red::after { background: linear-gradient(90deg, var(--red), transparent); }
.stat-card.gold::after { background: linear-gradient(90deg, var(--gold), transparent); }
.stat-card.green::after { background: linear-gradient(90deg, var(--green), transparent); }
.stat-card.blue::after { background: linear-gradient(90deg, var(--blue), transparent); }
.stat-card.purple::after { background: linear-gradient(90deg, var(--purple), transparent); }
.stat-card.orange::after { background: linear-gradient(90deg, var(--orange), transparent); }

/* ═══ Charts Grid ═══ */
.charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

/* ═══ Panels ═══ */
.panel {
  background: var(--glass2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius);
  padding: 24px;
  overflow-x: auto;
  transition: all var(--transition);
}
.panel:hover { border-color: var(--border2); }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.panel-header h3 {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-header h3 .panel-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.panel-header .panel-actions { display: flex; gap: 8px; }

.panel-body { position: relative; }

/* ═══ Chart Canvas ═══ */
.chart-wrap {
  position: relative;
  height: 280px;
  width: 100%;
}
.chart-wrap canvas { max-height: 100%; }
.chart-wrap-sm { height: 220px; }

/* ═══ Grid Layouts ═══ */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* ═══ Pipeline ═══ */
.pipeline {
  display: flex;
  gap: 4px;
  margin-top: 16px;
}
.pipeline-step {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  border-radius: var(--radius-sm);
  background: var(--glass);
  border: var(--glass-border);
  transition: all var(--transition);
  cursor: default;
}
.pipeline-step:hover { background: var(--glass2); transform: translateY(-2px); }
.pipeline-step .pipe-count {
  font-size: 22px;
  font-weight: 800;
  display: block;
  line-height: 1.2;
}
.pipeline-step .pipe-label {
  font-size: 10px;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}
.pipeline-step.pending { border-color: rgba(255,196,0,.2); }
.pipeline-step.pending .pipe-count { color: var(--gold); }
.pipeline-step.confirmed { border-color: rgba(59,130,246,.2); }
.pipeline-step.confirmed .pipe-count { color: var(--blue); }
.pipeline-step.packed { border-color: rgba(168,85,247,.2); }
.pipeline-step.packed .pipe-count { color: var(--purple); }
.pipeline-step.shipped { border-color: rgba(59,130,246,.2); }
.pipeline-step.shipped .pipe-count { color: var(--blue); }
.pipeline-step.delivered { border-color: rgba(34,197,94,.2); }
.pipeline-step.delivered .pipe-count { color: var(--green); }
.pipeline-step.cancelled { border-color: rgba(229,35,43,.2); }
.pipeline-step.cancelled .pipe-count { color: var(--red-text); }

/* ═══ Table ═══ */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: right;
  padding: 12px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tbl td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tr {
  transition: background var(--transition);
}
.tbl tbody tr:hover { background: var(--glass); }
.row-danger { border-right: 3px solid var(--red); }
.mono { font-family: 'IBM Plex Sans Arabic', monospace; }
.muted { color: var(--ink3); }
.text-red { color: var(--red-text); font-weight: 700; }
.text-green { color: var(--green); }
.text-gold { color: var(--gold); }
.emoji-cell { font-size: 24px; width: 40px; text-align: center; }

/* Row click */
.tbl tbody tr[data-href] { cursor: pointer; }
.tbl tbody tr[data-href]:hover { background: var(--glass2); }

/* ═══ Badges ═══ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.badge-pending { background: var(--gold-dim); color: var(--gold); }
.badge-pending::before { background: var(--gold); }
.badge-confirmed { background: var(--blue-dim); color: #60a5fa; }
.badge-confirmed::before { background: var(--blue); }
.badge-packed { background: var(--purple-dim); color: #c084fc; }
.badge-packed::before { background: var(--purple); }
.badge-shipped { background: var(--blue-dim); color: #60a5fa; }
.badge-shipped::before { background: var(--blue); }
.badge-out_for_delivery { background: var(--orange-dim); color: #fb923c; }
.badge-out_for_delivery::before { background: var(--orange); }
.badge-delivered { background: var(--green-dim); color: #4ade80; }
.badge-delivered::before { background: var(--green); }
.badge-failed_delivery, .badge-cancelled, .badge-returned { background: var(--red-dim); color: #f87171; }
.badge-failed_delivery::before, .badge-cancelled::before, .badge-returned::before { background: var(--red); }
.badge-refunded { background: var(--purple-dim); color: #a78bfa; }
.badge-refunded::before { background: var(--purple); }
.badge-paid { background: var(--green-dim); color: #4ade80; }
.badge-paid::before { background: var(--green); }
.badge-unpaid { background: var(--gold-dim); color: var(--gold); }
.badge-unpaid::before { background: var(--gold); }
.badge-partially_refunded { background: var(--orange-dim); color: #fb923c; }
.badge-partially_refunded::before { background: var(--orange); }

/* ═══ Tags ═══ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.tag-red { background: var(--red-dim); color: var(--red-text); }
.tag-green { background: var(--green-dim); color: var(--green); }
.tag-blue { background: var(--blue-dim); color: var(--blue); }
.tag-gold { background: var(--gold-dim); color: var(--gold); }
.tag-purple { background: var(--purple-dim); color: var(--purple); }
.tag-orange { background: var(--orange-dim); color: var(--orange); }
.tag-gray { background: var(--glass2); color: var(--ink3); }

/* ═══ Dot Indicator ═══ */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dot-green { background: var(--green); box-shadow: 0 0 8px rgba(34,197,94,.4); }
.dot-gray { background: var(--ink3); }
.dot-red { background: var(--red); box-shadow: 0 0 8px rgba(229,35,43,.4); }
.dot-gold { background: var(--gold); box-shadow: 0 0 8px rgba(255,196,0,.4); }

/* ═══ Status Filter Chips ═══ */
.status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.filter-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass2);
  border: var(--glass-border);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--transition);
  cursor: pointer;
}
.filter-chip:hover {
  border-color: rgba(229,35,43,.3);
  background: var(--red-dim);
  transform: translateY(-1px);
}
.filter-chip.active {
  border-color: var(--red-text);
  background: var(--red-dim);
  color: var(--red-text);
}
.filter-chip .chip-count {
  background: var(--bg4);
  padding: 1px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

/* ═══ Analytics Bar ═══ */
.analytics-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.analytics-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass2);
  border: var(--glass-border);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  min-width: 160px;
  transition: all var(--transition);
}
.analytics-item:hover { border-color: var(--border2); transform: translateY(-1px); }
.analytics-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.analytics-item .a-val { font-size: 18px; font-weight: 800; line-height: 1; }
.analytics-item .a-label { font-size: 11px; color: var(--ink3); font-weight: 600; }

/* ═══ Info Grid ═══ */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.info-grid .full { grid-column: 1 / -1; }
.info-item {
  background: var(--glass);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: var(--glass-border);
}
.info-item .info-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.info-item .info-value {
  font-size: 15px;
  font-weight: 700;
}

/* ═══ Forms ═══ */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink2);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 8px 12px;
  background: var(--glass);
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: all var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: rgba(229,35,43,.4);
  box-shadow: 0 0 0 3px rgba(229,35,43,.08);
  background: var(--glass2);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink3); }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.form-grid .full { grid-column: 1 / -1; }

/* ═══ Buttons ═══ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
  position: relative;
  /* F-113 — تالت حالة لنفس النمط (بعد `.sb-nav a` و`.stat-card`):
     `overflow:hidden` متحطوط عشان زخرفة `::before`، وبياخد نص الزرار معاه.
     القياس: «إرسال رسالة اختبار» ضايع منه **55px**، و«نسخ» **11px**. */
  overflow: visible;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.1), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.btn:hover::before { opacity: 1; }
.btn:active { transform: scale(.98); }

.btn-red {
  background: linear-gradient(135deg, var(--red), #c41e24);
  color: #fff;
  box-shadow: 0 2px 8px rgba(229,35,43,.3);
}
.btn-red:hover { box-shadow: 0 4px 16px rgba(229,35,43,.4); transform: translateY(-1px); }
.btn-sm { padding: 8px 12px; font-size: 12px; border-radius: var(--radius-xs); }
.btn-full { width: 100%; }
.btn-ghost {
  background: var(--glass2);
  border: var(--glass-border);
  color: var(--ink2);
}
.btn-ghost:hover { color: var(--ink); background: var(--bg4); }
.btn-success {
  background: linear-gradient(135deg, var(--green), #16a34a);
  color: #fff;
  box-shadow: 0 2px 8px rgba(34,197,94,.3);
}
.btn-danger {
  background: var(--red-dim);
  color: var(--red-text);
  border: 1px solid rgba(229,35,43,.2);
}
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-gold {
  background: linear-gradient(135deg, var(--gold), #e0b000);
  color: #141414;
  box-shadow: 0 2px 8px rgba(255,196,0,.3);
}
.btn-gold:hover { box-shadow: 0 4px 16px rgba(255,196,0,.4); transform: translateY(-1px); }

/* ═══ Alerts ═══ */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fadeIn .3s ease;
}
.alert-success {
  background: var(--green-dim);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,.2);
}
.alert-error {
  background: var(--red-dim);
  color: #f87171;
  border: 1px solid rgba(229,35,43,.2);
}
.alert-info {
  background: var(--blue-dim);
  color: #60a5fa;
  border: 1px solid rgba(59,130,246,.2);
}

/* ═══ Status Form ═══ */
.status-form {
  display: flex;
  gap: 12px;
  align-items: center;
}
.status-form select {
  width: auto;
  padding: 8px 12px;
  background: var(--glass);
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: all var(--transition);
}
.status-form select:focus {
  border-color: rgba(229,35,43,.4);
  box-shadow: 0 0 0 3px rgba(229,35,43,.08);
}

/* ═══ Status History Timeline ═══ */
.timeline { position: relative; padding-right: 24px; }
.timeline::before {
  content: '';
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.timeline-item {
  position: relative;
  padding: 12px 0 12px 16px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  right: -20px;
  top: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg4);
  border: 2px solid var(--border2);
}
.timeline-item:last-child::before { background: var(--red); border-color: var(--red-text); }
.timeline-from { font-size: 12px; color: var(--ink3); }
.timeline-to { font-size: 14px; font-weight: 700; }
.timeline-meta { font-size: 11px; color: var(--ink3); margin-top: 4px; }

/* ═══ Status Bars ═══ */
.status-bars { display: flex; flex-wrap: wrap; gap: 12px; }
.status-bar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: var(--glass-border);
  transition: all var(--transition);
}
.status-bar-item:hover { background: var(--glass2); }

/* ═══ Top Product Item ═══ */
.top-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.top-product:last-child { border-bottom: none; }
.top-product-emoji {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--glass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.top-product-info { flex: 1; min-width: 0; }
.top-product-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-product-meta { font-size: 11px; color: var(--ink3); }
.top-product-stat { text-align: left; }
.top-product-stat .val { font-size: 16px; font-weight: 800; }
.top-product-stat .label { font-size: 10px; color: var(--ink3); }

/* ═══ Recent Order Row ═══ */
.order-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.order-row:last-child { border-bottom: none; }
.order-row:hover { background: var(--glass); margin: 0 -24px; padding: 12px 24px; border-radius: var(--radius-sm); }
.order-row-id { font-family: monospace; font-weight: 700; font-size: 13px; min-width: 80px; }
.order-row-customer { flex: 1; min-width: 0; }
.order-row-customer .name { font-size: 13px; font-weight: 600; }
.order-row-customer .phone { font-size: 11px; color: var(--ink3); }
.order-row-amount { font-family: monospace; font-weight: 700; font-size: 14px; }
.order-row-status { flex-shrink: 0; }
.order-row-date { font-size: 11px; color: var(--ink3); white-space: nowrap; }

/* ═══ Settings Inline Edit ═══ */
.setting-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-key {
  min-width: 180px;
  font-size: 13px;
  font-weight: 700;
  font-family: monospace;
  color: var(--gold);
}
.setting-val {
  flex: 1;
  padding: 8px 12px;
  background: var(--glass);
  border: var(--glass-border);
  border-radius: var(--radius-xs);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: all var(--transition);
}
.setting-val:focus {
  border-color: rgba(229,35,43,.4);
  box-shadow: 0 0 0 3px rgba(229,35,43,.08);
}

/* ═══ Empty State ═══ */
.empty-state {
  text-align: center;
  padding: 60px 16px;
  color: var(--ink3);
}
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: .5;
}
.empty-state-text {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink2);
}
.empty-state-sub { font-size: 13px; }

/* ═══ Skeleton Loading ═══ */
.skeleton {
  background: linear-gradient(90deg, var(--glass) 25%, var(--glass2) 50%, var(--glass) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-xs);
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text:last-child { width: 60%; }
.skeleton-card { height: 120px; border-radius: var(--radius); }

/* ═══ Responsive ═══ */
@media (max-width: 1200px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* F-096: الشريط `position:fixed` وبيتزحلق بره الشاشة بـ`translateX(100%)`.
     العنصر الثابت **مابيتقصّش** بالحاوية (بيتموضع على الـ viewport)، ومفيش
     `overflow-x` على `html` — فبيفضل يعد في `scrollWidth` و**الصفحة كلها
     بتبقى فيها تمرير أفقي**. القياس: 419px على شاشة 390px، في كل الـ12 صفحة.
     `clip` مش `hidden` — `hidden` بتكسر `position:sticky` بتاع الهيدر. */
  html { overflow-x: clip; }
  /* الشريط بيتزحلق بره الشاشة على الموبايل — فمفيش هامش محجوز له */
  .admin-main,
  .sidebar.collapsed ~ .admin-main { margin-inline-start: 0; }
  .sidebar {
    /* الإزاحة لازم تتبع الاتجاه: في RTL الشريط على اليمين فبيخرج بـ`+100%`،
       وفي LTR على الشمال فبيخرج بـ`-100%`. القيمة الثابتة كانت بتخرجه
       على الشاشة في الإنجليزي بدل ما تخبّيه. */
    transform: translateX(100%);
    width: var(--sidebar-w);
  }
  [dir="ltr"] .sidebar { transform: translateX(-100%); }
  .sidebar.mobile-open,
  [dir="ltr"] .sidebar.mobile-open { transform: translateX(0); }
  .page-content { padding: 16px; }
  .topbar { padding: 0 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .grid-2col { grid-template-columns: 1fr; }
  .grid-3col { grid-template-columns: 1fr; }
  .analytics-bar { gap: 8px; }
  .analytics-item { min-width: 130px; padding: 8px 12px; }
  .pipeline { flex-wrap: wrap; }
  .pipeline-step { min-width: 80px; }
  .topbar-search { min-width: 160px; }
  /* F-113: التاريخ الكامل («الأربعاء، ٥ أغسطس ٢٠٢٦») كان بيتلف على **3 سطور**
     في عمود ضيق جنب العنوان ويكوّم الشريط. مش معلومة محتاجة على الموبايل —
     والشاشة نفسها بتعرض التاريخ. */
  .topbar-date { display: none; }
  .topbar-right { gap: 8px; min-width: 0; }
  .topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .info-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; }
}

/* ═══ F-120: الجداول على الموبايل — كل صف بيبقى كارت ═══
   القياس اللي فتح البند (مِسبار الموبايل · 2026-08-05 · بيانات حقيقية مش
   صفحة فاضية):

     /admin/orders    677px على شاشة 360px = **1.88×**  · 8 أعمدة
     /admin/products  620px = 1.72×                     · 9 أعمدة
     /admin/coupons   668px = 1.86×                     · 8 أعمدة

   الصفحة نفسها مكانش فيها تمرير أفقي (F-096 صامد) — الجدول كان بيتمرّر
   **جوه** `.panel{overflow-x:auto}`. يعني الفحص القديم بيعدّي، والتاجر
   بيزحلق يمين وشمال **لكل صف** عشان يقرا حالة الطلب.

   والأسوأ: **أزرار الأفعال في كل صف كانت بره الشاشة** — 52 «تعديل» في
   المنتجات · 24 «تفاصيل» في الطلبات · 40 زرار في الكوبونات، كلهم
   `offscreen=true`. الزرار الموجود ومش باين = مش موجود عند التاجر.

   الحل: الجدول بيتحول لكارتات. `thead` بيتخفي، وكل `td` بياخد اسم عموده
   من `data-label` — عشان كده **كل `<td>` في قوالب الأدمن لازم يكون عليه
   `data-label`**، والقاعدة دي عليها اختبار (`tests/admin-mobile.test.js`).
   العمود اللي مالوش عنوان (خانة الأزرار · الصورة) بياخد `data-label=""`
   وبيتعرض من غير سطر عنوان. */
@media (max-width: 700px) {
  .tbl thead { display: none; }

  .tbl,
  .tbl tbody,
  .tbl tr,
  .tbl td { display: block; width: auto; }

  .tbl tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 12px;
    margin-bottom: 10px;
    background: var(--glass);
  }
  .tbl tbody tr:last-child { margin-bottom: 0; }

  .tbl td {
    display: flex;
    /* اللف ضروري: العنوان الطويل («الكمية المباعة») + قيمة طويلة (اسم منتج)
       مابيركبوش على سطر واحد في 360px. من غير `wrap` القيمة بتتضغط لعرض
       **9px** وتتقرا حرف تحت حرف — وده اللي حصل فعلًا في `/admin/analytics`
       أول ما التحويل اشتغل (رابط 9×157 و12×873). */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    /* `break-word` مش `anywhere`: `anywhere` بتخلّي أصغر عرض ممكن = **حرف
       واحد**، فالفليكس بيلاقي إنه يقدر يضغط القيمة لأي حد. `break-word`
       بتكسر الكلمة الطويلة اللي مش عارفة تلف بس. */
    overflow-wrap: break-word;
  }
  .tbl tbody tr td:last-child { border-bottom: none; }

  .tbl td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    /* العنوان مياخدش أكتر من نص الكارت مهما طال */
    max-width: 45%;
    color: var(--ink3);
    font-size: 12px;
    font-weight: 700;
  }
  /* الخانة من غير عنوان (الأزرار · الصورة) بتاخد العرض كله.
     و`colspan` = صف «مفيش بيانات» بيمتد على الجدول كله — مالوش عنوان أصلًا. */
  .tbl td[data-label=""],
  .tbl td[colspan] { justify-content: flex-start; }
  .tbl td[data-label=""]::before,
  .tbl td[colspan]::before { content: none; }

  /* الصف كارت — فالتحديد بالـ`border-right` مابيبانش. اللون بيبقى على الكارت. */
  .row-danger { border-right: none; border-color: var(--red); }

  /* أزرار الصف بقت جوه الكارت — تاخد عرضها كامل عشان تبقى هدف لمس محترم */
  .tbl td .btn-sm { min-height: 32px; }
}

/* ═══ F-120: أهداف اللمس والنص الصغير على الموبايل ═══
   المِسبار قاس: checkbox **13×13** في `/admin/payments` و`/admin/shipping`
   (WCAG 2.2 AA بيطلب 24×24)، ونص **10.83px** في 172 موضع (`small.muted`)
   و11px في الشارات وعناوين الجدول. النص ده مقروء على الديسكتوب ومش مقروء
   على شاشة 360. */
@media (max-width: 700px) {
  .tbl td small,
  .tbl td .muted,
  small.muted { font-size: 12px; }
  .badge, .tag { font-size: 12px; }

  /* المِسبار قاس النص ده كله تحت 12px على الموبايل: تسميات الخط الزمني
     (10px) · رقم موبايل العميل (11px) · تسميات الكروت (10px) · مسار الصورة
     في `code` (11px). كلها معلومات التاجر بيقراها من موبايله. */
  /* ⚠️ التخصيص لازم يساوي تعريفهم الأصلي (`.pipeline-step .pipe-label` =
     0,2,0). أول نسخة كتبت `.pipe-label` لوحده — القاعدة كانت **بعدهم في
     الملف وبرضه اتغلبت**، والمِسبار فضل يقيس 10px. */
  .pipeline-step .pipe-label,
  .analytics-item .a-label,
  .top-product-stat .label,
  .top-product-meta,
  .stat-trend,
  .order-row-date,
  .order-row-customer .phone,
  small,
  code { font-size: 12px; }

  /* المسار الطويل (`/uploads/branding/…`) مالوش مسافات فمابيلفّش — وبيوسّع
     الصفحة. هنا `anywhere` هي الصح: توكن واحد مالوش نقطة كسر طبيعية. */
  code { overflow-wrap: anywhere; }

  /* بلوك الإعدادات (`.env` بتاع التطبيق) **بيتمرّر أفقيًا عن قصد** — سطوره
     مايصحش تتلف. بس يتمرّر **جوه نفسه** مش يوسّع اللوحة اللي حواليه. */
  pre { max-width: 100%; }

  /* `.setting-key{min-width:180px}` + منتقي لون + حقل نص = **449px** على
     شاشة 360. الصف بيتقسّم لسطرين على الموبايل. */
  .setting-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .setting-key { min-width: 0; }

  input[type="checkbox"],
  input[type="radio"] {
    width: 24px;
    height: 24px;
    /* الـ`accent-color` بيخلي المربع نفسه بلون الهوية بدل الأزرق الافتراضي */
    accent-color: var(--red);
    flex-shrink: 0;
  }
}

/* ═══ Mobile Sidebar Overlay ═══ */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 90;
  backdrop-filter: blur(4px);
}
.sidebar-overlay.active { display: block; }

/* ═══ Mobile Hamburger ═══ */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  padding: 8px;
  cursor: pointer;
}
@media (max-width: 900px) {
  .mobile-menu-btn { display: flex; }
}

/* ═══ Date Range Picker ═══ */
.date-range {
  display: flex;
  gap: 4px;
  background: var(--glass);
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.date-range button {
  background: none;
  border: none;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  color: var(--ink3);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.date-range button:hover { color: var(--ink2); }
.date-range button.active {
  background: var(--red);
  color: #fff;
  box-shadow: 0 2px 6px rgba(229,35,43,.3);
}

/* ═══ Quick Actions ═══ */
.quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--glass);
  border: var(--glass-border);
  border-radius: var(--radius-xs);
  color: var(--ink2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.quick-action-btn:hover {
  background: var(--glass2);
  color: var(--ink);
  border-color: var(--border2);
}

/* ═══ Modal ═══ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-overlay.active { display: flex; }
.modal-wrap {
  background: var(--bg2);
  border: var(--glass-border);
  border-radius: 16px;
  padding: 0;
  max-width: 560px;
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  animation: scaleIn .25s ease;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: var(--glass-border);
}
.modal-header h3 { font-size: 16px; font-weight: 700; }
.modal-close {
  background: none;
  border: none;
  color: var(--ink3);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-xs);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover { color: var(--ink); background: var(--glass2); }
.modal-body { padding: 24px; }
.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  padding: 16px 24px;
  border-top: var(--glass-border);
}

/* ═══ Tooltip ═══ */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg4);
  color: var(--ink);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ═══ Switch Toggle ═══ */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute;
  inset: 0;
  background: var(--bg4);
  border-radius: 22px;
  cursor: pointer;
  transition: all .3s;
}
.switch-slider::before {
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  right: 3px;
  bottom: 3px;
  background: var(--ink3);
  border-radius: 50%;
  transition: all .3s;
}
.switch input:checked + .switch-slider { background: var(--green-dim); }
.switch input:checked + .switch-slider::before { transform: translateX(-18px); background: var(--green); }

/* ═══ Tabs ═══ */
.tabs { display: flex; gap: 2px; margin-bottom: 24px; background: var(--glass); border-radius: var(--radius-sm); padding: 3px; }
.tab {
  padding: 8px 16px;
  border-radius: var(--radius-xs);
  background: none;
  border: none;
  color: var(--ink3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.tab:hover { color: var(--ink2); }
.tab.active { background: var(--bg4); color: var(--ink); }

/* ═══ Spinner ═══ */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border2);
  border-top-color: var(--red-text);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   [F-125] — الحفظ لازم يكون تحت إيد المستخدم، والحقل يبان إنه حقل
   ═══════════════════════════════════════════════════════════════════════════

   المالك عدّل سعر محافظة ومالقاش زرار حفظ: زرار **واحد** في آخر صفحة
   طولها **8446px** على الموبايل (y=7011) — ~8 شاشات بعد أول حقل.
   الواجهة كانت موجودة والحفظ شغّال والفحص عدّى 15/15، **والتاجر مش قادر
   يستعملها**. تسليم غير قابل للاستعمال.

   وحقول الأرقام كانت **بيضا بستايل المتصفح** جوّه لوحة غامقة، لأن مفيش
   ولا قاعدة CSS لحقل جوّه `.tbl`.                                        */

/* ═══ حقول جوّه الجداول — من توكنز اللوحة مش من المتصفح ═══ */
.tbl input[type="text"],
.tbl input[type="number"],
.tbl select {
  width: 100%;
  max-width: 140px;
  padding: 7px 10px;
  background: var(--glass);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xs);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  transition: border-color var(--transition);
}
.tbl input[type="text"]:focus,
.tbl input[type="number"]:focus {
  outline: none;
  border-color: var(--red);
  background: var(--glass2);
}
.tbl input::placeholder { color: var(--ink3); }

/* الحقل اللي اتعدّل ولسه ما اتحفظش — بيبان بالعين */
.tbl input.dirty,
input.dirty { border-color: var(--gold); background: var(--gold-dim); }

/* ═══ شريط الحفظ الثابت ═══
   بيظهر **بس لما يبقى فيه تعديل غير محفوظ** — الشريط الدائم بياكل مساحة
   على الموبايل من غير سبب، والشريط اللي بيظهر عند التعديل بيجاوب على
   سؤالين مع بعض: «فيه حاجة مش محفوظة؟» و«أحفظ منين؟». */
.save-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg3);
  border-top: 1px solid var(--border2);
  box-shadow: 0 -6px 24px rgba(0,0,0,.45);
}
.save-bar.show { display: flex; }
/* 🔴 على الديسكتوب الشريط الجانبي **ثابت** بعرض `--sidebar-w`، والشريط
   لو أخد عرض الشاشة كله بيبتدي تحته — فنص «فيه تعديلات مش محفوظة» بيتخبّى
   وراه (اتقاس: النص عند x=1222 والشريط الجانبي من 1180). نفس فئة
   `UNDER_NAV`: العنصر موجود ومش مرئي. */
@media (min-width: 901px) {
  /* الشريط الجانبي دايمًا في **بداية السطر** (يمين في RTL · شمال في LTR)،
     فالإزاحة `inset-inline-start`. أول محاولة كتبت `end` — الجهة الغلط،
     والنص فضل متخبّي وراه (اتقاس تاني بعد التعديل). */
  .save-bar { inset-inline-start: var(--sidebar-w); }
}
.save-bar .save-note {
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.save-bar .save-count {
  background: var(--gold-dim);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
}
/* المحتوى مايتحبسش ورا الشريط (نفس فئة UNDER_NAV) */
body.has-save-bar .page-content { padding-bottom: 88px; }

/* ═══ أقسام قابلة للطي — الـ27 محافظة مش لازم تبقى مفتوحة دايمًا ═══ */
.fold > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  margin-block-start: 16px;
  background: var(--glass);
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: '▾'; color: var(--ink3); transition: transform var(--transition); }
.fold[open] > summary::after { transform: rotate(180deg); }
.fold > summary:hover { border-color: var(--border2); }
.fold .fold-hint { color: var(--ink3); font-weight: 400; font-size: 12px; }

/* ═══ [F-159] الحالة المقفولة — ميزة في باقة أعلى ═══
   الرابط **بيفضل ظاهر وقابل للضغط** (بيودّي شاشة الترقية) — مش مخفي ومش
   معطّل. الميزة المدفوعة اللي التاجر مش شايفها مش هتبيعله ترقية.
   ⚠️ التباين: `--ink3` مش أفتح من كده — النص المقفول لازم يفضل **مقروء**
      (بند 16: الفحص البصري بيقيس التباين، و«باهت» مش مبرر لنص مطموس). */
.sb-nav a.sb-locked { color: var(--ink3); }
.sb-nav a.sb-locked .sb-icon { opacity: .55; }
.sb-nav a.sb-locked:hover { color: var(--ink2); }
.sb-nav a.sb-locked .sb-lock {
  margin-inline-start: auto;
  font-size: 11px;
  line-height: 1;
  opacity: .9;
}
.sidebar.collapsed .sb-nav a.sb-locked .sb-lock { display: none; }

/* بطاقة «وصلت لحد باقتك» — بتحل محل زرار الإضافة لما الحد يتملى */
.quota-full {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--border2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.7;
}
.quota-full .quota-ico { font-size: 18px; line-height: 1; }
.quota-full a { color: var(--red-text); font-weight: 700; text-decoration: underline; }