/* =====================================================================
   SMART PRO — هوية المنصات والواجهات (UI Kit)
   ملف واحد: الخطوط + المتغيرات (فاتح وداكن) + الأساس + المكوّنات.
   الاستخدام: <link rel="stylesheet" href="smartpro-ui.css">  و  <html dir="rtl" lang="ar">
   الوضع الداكن: <html data-theme="dark">
   ممنوع إضافة أي لون خارج قسم «الألوان» أدناه.
   ===================================================================== */

/* ---------- ١. الخطوط (محلية — رخصة OFL) ---------- */
@font-face{font-family:'Tajawal';font-weight:400;font-display:swap;src:url('fonts/Tajawal-Regular.ttf') format('truetype')}
@font-face{font-family:'Tajawal';font-weight:500;font-display:swap;src:url('fonts/Tajawal-Medium.ttf') format('truetype')}
@font-face{font-family:'Tajawal';font-weight:700;font-display:swap;src:url('fonts/Tajawal-Bold.ttf') format('truetype')}
@font-face{font-family:'Tajawal';font-weight:800;font-display:swap;src:url('fonts/Tajawal-ExtraBold.ttf') format('truetype')}
@font-face{font-family:'Tajawal';font-weight:900;font-display:swap;src:url('fonts/Tajawal-Black.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-weight:400;font-display:swap;src:url('fonts/Poppins-Regular.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-weight:500;font-display:swap;src:url('fonts/Poppins-Medium.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-weight:600;font-display:swap;src:url('fonts/Poppins-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-weight:700;font-display:swap;src:url('fonts/Poppins-Bold.ttf') format('truetype')}

/* ---------- ٢. الألوان الرسمية (الهوية — لا تتغيّر) ---------- */
:root{
  --sp-navy:#004484;        /* أساسي، أزرار رئيسية، عناوين */
  --sp-deep-navy:#0F477E;   /* خلفيات داكنة، hover للأساسي */
  --sp-midnight:#0A2E52;    /* نص أساسي على الفاتح، خلفية الوضع الداكن */
  --sp-teal:#4DB9A7;        /* تمييز: زر الإجراء الأهم، المؤشر النشط، الأرقام المهمة */
  --sp-aqua:#18AEA7;        /* تدرج الرمز — فاتح */
  --sp-deep-teal:#0F899B;   /* أيقونات على الفاتح */
  --sp-teal-ink:#14738C;    /* روابط ونص تيل على الفاتح (تباين 5.4) */
  --sp-white:#FFFFFF;
  --sp-gray:#F2F5F8;        /* خلفية الصفحة في الفاتح */
  --sp-amber:#F5A623;       /* أيقونات التنبيه ونقاط الجذب فقط — ≤10% */
  --sp-mist:#DCE8F2;        /* نص ثانوي على الداكن */

  /* استثناء وظيفي وحيد: للأخطاء والحذف فقط. ممنوع في الزينة والتسويق */
  --sp-danger:#D04437;

  --sp-gradient:linear-gradient(135deg,#0A2E52 0%,#0F477E 55%,#14738C 100%);
  --sp-gradient-side:linear-gradient(180deg,#0A2E52 0%,#0F477E 70%,#14738C 140%);
  --sp-gradient-mark:linear-gradient(90deg,#18AEA7,#0F899B);

  /* الخطوط */
  --sp-font-ar:'Tajawal','Almarai','Cairo',system-ui,sans-serif;
  --sp-font-en:'Poppins','Tajawal',system-ui,sans-serif;

  /* السلّم الطباعي للواجهة */
  --sp-fs-display:32px;  /* عنوان صفحة الدخول / الترحيب — 800 */
  --sp-fs-h1:26px;       /* عنوان الصفحة — 800 */
  --sp-fs-h2:20px;       /* عنوان قسم أو بطاقة كبيرة — 700 */
  --sp-fs-h3:16px;       /* عنوان بطاقة — 700 */
  --sp-fs-body:15px;     /* النص — 400 */
  --sp-fs-sm:13px;       /* تسميات، تلميحات، جداول ثانوية — 500 */
  --sp-fs-xs:12px;       /* شارات، تاريخ صغير — 500 */
  --sp-fs-kpi:30px;      /* رقم المؤشر — Poppins 600 */

  /* الزوايا (الهوية: 12–20 للبطاقات والأزرار) */
  --sp-r-sm:8px;         /* عناصر صغيرة داخل البطاقة فقط */
  --sp-r:12px;           /* أزرار، حقول، قوائم */
  --sp-r-lg:16px;        /* بطاقات */
  --sp-r-xl:20px;        /* نوافذ منبثقة، بطاقات كبيرة */
  --sp-r-pill:999px;     /* شارات الحالة فقط */

  /* المسافات — شبكة 4px */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;

  /* أبعاد الهيكل */
  --sp-sidebar-w:264px;
  --sp-topbar-h:64px;
  --sp-control-h:44px;
  --sp-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- ٣. أدوار الألوان — الوضع الفاتح (الافتراضي) ---------- */
:root{
  color-scheme:light;
  --bg:var(--sp-gray);
  --surface:var(--sp-white);
  --surface-2:color-mix(in srgb,var(--sp-gray) 60%,#fff); /* رأس الجدول وخلفية الحقول */
  --border:rgba(0,68,132,.12);
  --border-strong:rgba(0,68,132,.22);
  --text:var(--sp-midnight);
  --text-2:rgba(10,46,82,.68);
  --text-3:rgba(10,46,82,.48);
  --heading:var(--sp-navy);
  --link:var(--sp-teal-ink);
  --icon:var(--sp-deep-teal);
  --primary:var(--sp-navy);
  --primary-hover:var(--sp-deep-navy);
  --on-primary:var(--sp-white);
  --accent:var(--sp-teal);
  --accent-hover:color-mix(in srgb,var(--sp-teal) 86%,#fff);
  --on-accent:var(--sp-midnight);
  --focus:rgba(77,185,167,.55);
  --success-bg:rgba(77,185,167,.14);  --success-fg:var(--sp-teal-ink);
  --warning-bg:rgba(245,166,35,.16);  --warning-fg:var(--sp-midnight);
  --info-bg:rgba(0,68,132,.08);       --info-fg:var(--sp-navy);
  --danger-bg:rgba(208,68,55,.10);    --danger-fg:var(--sp-danger);
  --shadow-1:0 1px 2px rgba(10,46,82,.06);
  --shadow-2:0 1px 2px rgba(10,46,82,.05),0 8px 24px rgba(10,46,82,.07);
  --shadow-3:0 2px 6px rgba(10,46,82,.08),0 24px 56px rgba(10,46,82,.16);
  --overlay:rgba(10,46,82,.55);
  --sidebar-bg:var(--sp-gradient-side);
  --topbar-bg:rgba(255,255,255,.92);
  --texture-opacity:.08;
}

/* ---------- ٤. الوضع الداكن ---------- */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:var(--sp-midnight);
  --surface:rgba(15,71,126,.42);          /* كحلي داكن فوق الخلفية */
  --surface-2:rgba(15,71,126,.62);
  --border:rgba(220,232,242,.10);
  --border-strong:rgba(220,232,242,.20);
  --text:var(--sp-white);
  --text-2:rgba(220,232,242,.78);
  --text-3:rgba(220,232,242,.52);
  --heading:var(--sp-white);
  --link:var(--sp-teal);
  --icon:var(--sp-teal);
  --primary:var(--sp-teal);               /* في الداكن الأساسي يصير تيل بنص كحلي */
  --primary-hover:color-mix(in srgb,var(--sp-teal) 86%,#fff);
  --on-primary:var(--sp-midnight);
  --accent:var(--sp-teal);
  --accent-hover:color-mix(in srgb,var(--sp-teal) 86%,#fff);
  --on-accent:var(--sp-midnight);
  --focus:rgba(77,185,167,.6);
  --success-bg:rgba(77,185,167,.16);  --success-fg:var(--sp-teal);
  --warning-bg:rgba(245,166,35,.16);  --warning-fg:var(--sp-amber);
  --info-bg:rgba(220,232,242,.10);    --info-fg:var(--sp-mist);
  --danger-bg:rgba(208,68,55,.18);    --danger-fg:color-mix(in srgb,var(--sp-danger) 70%,#fff);
  --shadow-1:none;
  --shadow-2:0 1px 0 rgba(255,255,255,.04) inset,0 12px 32px rgba(0,0,0,.22);
  --shadow-3:0 24px 64px rgba(0,0,0,.4);
  --overlay:rgba(5,20,38,.7);
  --sidebar-bg:linear-gradient(180deg,#0A2E52 0%,#0A2E52 100%);
  --topbar-bg:rgba(10,46,82,.88);
  --texture-opacity:.10;
}

/* ---------- ٥. الأساس ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sp-font-ar);
  font-size:var(--sp-fs-body);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--heading);line-height:1.3;font-weight:700}
h1{font-size:var(--sp-fs-h1);font-weight:800}
h2{font-size:var(--sp-fs-h2)}
h3{font-size:var(--sp-fs-h3)}
p{margin:0}
a{color:var(--link);text-decoration:none;font-weight:500}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--sp-r-sm)}
::selection{background:rgba(77,185,167,.3)}

/* أي نص لاتيني أو رقم أو رقم جوال أو إيميل */
.ltr,[dir="ltr"]{direction:ltr;unicode-bidi:isolate;font-family:var(--sp-font-en)}
.num{font-family:var(--sp-font-en);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.muted{color:var(--text-2)}
.subtle{color:var(--text-3)}
.teal{color:var(--sp-teal)}

/* الخط الفاصل التيل تحت العنوان — التوقيع البصري */
.sp-underline{display:block;width:44px;height:3px;border-radius:3px;background:var(--sp-teal);margin-top:var(--sp-2)}

/* أيقونات Outline — Lucide بسماكة 1.9 */
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:16px;height:16px}
.icon-lg{width:24px;height:24px}

/* ---------- ٦. هيكل التطبيق ---------- */
.sp-app{display:grid;grid-template-columns:var(--sp-sidebar-w) 1fr;min-height:100vh}
.sp-sidebar{position:sticky;top:0;height:100vh;background:var(--sidebar-bg);color:var(--sp-white);
  display:flex;flex-direction:column;padding:var(--sp-6) var(--sp-4);overflow-y:auto;isolation:isolate}
[data-theme="dark"] .sp-sidebar{border-inline-start:1px solid var(--border)}
.sp-sidebar__brand{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-1) var(--sp-3) var(--sp-6);
  border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:var(--sp-4)}
.sp-sidebar__brand img{width:132px;height:auto;display:block}
.sp-product{font-size:var(--sp-fs-sm);font-weight:700;color:var(--sp-mist);padding-inline-start:var(--sp-3);
  border-inline-start:1px solid rgba(255,255,255,.22);line-height:1.3}
.sp-nav{display:flex;flex-direction:column;gap:2px}
.sp-nav__label{font-size:var(--sp-fs-xs);font-weight:500;color:rgba(220,232,242,.55);padding:var(--sp-4) var(--sp-3) var(--sp-2)}
.sp-nav a{position:relative;display:flex;align-items:center;gap:var(--sp-3);min-height:44px;padding:0 var(--sp-3);
  border-radius:var(--sp-r);color:rgba(255,255,255,.82);font-weight:500;text-decoration:none;
  transition:background .15s var(--sp-ease),color .15s var(--sp-ease)}
.sp-nav a .icon{color:rgba(220,232,242,.7)}
.sp-nav a:hover{background:rgba(255,255,255,.07);color:var(--sp-white)}
.sp-nav a[aria-current="page"]{background:rgba(77,185,167,.16);color:var(--sp-white);font-weight:700}
.sp-nav a[aria-current="page"] .icon{color:var(--sp-teal)}
.sp-nav a[aria-current="page"]::before{content:"";position:absolute;inset-inline-start:-16px;top:10px;bottom:10px;
  width:4px;border-start-end-radius:4px;border-end-end-radius:4px;background:var(--sp-teal)}
.sp-nav .count{margin-inline-start:auto;font-family:var(--sp-font-en);font-size:var(--sp-fs-xs);font-weight:600;
  background:rgba(255,255,255,.12);color:var(--sp-white);border-radius:var(--sp-r-pill);padding:1px 8px}
.sp-sidebar__foot{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--sp-fs-xs);color:rgba(220,232,242,.6)}

.sp-main{min-width:0;display:flex;flex-direction:column}
.sp-topbar{position:sticky;top:0;z-index:20;height:var(--sp-topbar-h);display:flex;align-items:center;gap:var(--sp-4);
  padding:0 var(--sp-8);background:var(--topbar-bg);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
.sp-topbar__title{font-weight:700;color:var(--heading)}
.sp-topbar__actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--sp-2)}
.sp-content{padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-6);max-width:1360px;width:100%}
.sp-page-head{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap}
.sp-page-head p{color:var(--text-2);margin-top:var(--sp-2)}
.sp-page-head__actions{margin-inline-start:auto;display:flex;gap:var(--sp-2);flex-wrap:wrap}
.sp-breadcrumb{display:flex;gap:var(--sp-2);font-size:var(--sp-fs-sm);color:var(--text-3);margin-bottom:var(--sp-2)}

/* ---------- ٧. البطاقات ---------- */
.sp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--sp-r-lg);box-shadow:var(--shadow-2);padding:var(--sp-6)}
.sp-card__head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.sp-card__head .actions{margin-inline-start:auto;display:flex;gap:var(--sp-2)}
.sp-card--flush{padding:0;overflow:hidden}
.sp-card--hero{background:var(--sp-gradient);color:var(--sp-white);border:0;position:relative;overflow:hidden;isolation:isolate}
.sp-card--hero h2,.sp-card--hero h3{color:var(--sp-white)}
.sp-card--hero::after{content:"";position:absolute;inset-inline-end:-120px;top:-120px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(77,185,167,.35),transparent);z-index:-1}

/* نسيج تقني خفيف (7–15%) — للخلفيات الكبيرة فقط */
.sp-texture{position:relative;isolation:isolate}
.sp-texture::before{content:"";position:absolute;inset:0;z-index:-1;opacity:var(--texture-opacity);pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:32px 32px;mask-image:radial-gradient(ellipse at 20% 0%,#000 0%,transparent 70%)}

/* مؤشرات KPI */
.sp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-4)}
.sp-kpi{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5)}
.sp-kpi__top{display:flex;align-items:center;gap:var(--sp-2);color:var(--text-2);font-size:var(--sp-fs-sm);font-weight:500}
.sp-kpi__icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--success-bg);color:var(--icon)}
.sp-kpi__icon--amber{background:var(--warning-bg);color:var(--sp-amber)}
.sp-kpi__icon--navy{background:var(--info-bg);color:var(--info-fg)}
.sp-kpi__value{font-family:var(--sp-font-en);font-variant-numeric:tabular-nums;font-size:var(--sp-fs-kpi);font-weight:600;
  color:var(--heading);line-height:1.1;direction:ltr;unicode-bidi:isolate;text-align:end;align-self:flex-start}
.sp-kpi__foot{font-size:var(--sp-fs-xs);color:var(--text-3)}

/* ---------- ٨. الأزرار ---------- */
.sp-btn{--h:var(--sp-control-h);display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--h);
  padding:0 var(--sp-5);border-radius:var(--sp-r);border:1px solid transparent;font:inherit;font-weight:700;font-size:var(--sp-fs-body);
  cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s var(--sp-ease),border-color .15s,color .15s,transform .1s}
.sp-btn:hover{text-decoration:none}
.sp-btn:active{transform:translateY(1px)}
.sp-btn:disabled,.sp-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.sp-btn--primary{background:var(--primary);color:var(--on-primary)}
.sp-btn--primary:hover{background:var(--primary-hover)}
.sp-btn--accent{background:var(--accent);color:var(--on-accent)}
.sp-btn--accent:hover{background:var(--accent-hover)}
.sp-btn--secondary{background:var(--surface);color:var(--heading);border-color:var(--border-strong)}
.sp-btn--secondary:hover{background:var(--surface-2);border-color:var(--heading)}
.sp-btn--ghost{background:transparent;color:var(--text-2)}
.sp-btn--ghost:hover{background:var(--info-bg);color:var(--heading)}
.sp-btn--danger{background:var(--sp-danger);color:var(--sp-white)}
.sp-btn--danger:hover{filter:brightness(.92)}
.sp-btn--sm{--h:36px;padding:0 var(--sp-3);font-size:var(--sp-fs-sm)}
.sp-btn--lg{--h:52px;padding:0 var(--sp-6);font-size:16px}
.sp-btn--icon{width:var(--h);padding:0}
.sp-btn--block{width:100%}

/* ---------- ٩. الحقول والنماذج ---------- */
.sp-field{display:flex;flex-direction:column;gap:6px}
.sp-label{font-size:var(--sp-fs-sm);font-weight:700;color:var(--text)}
.sp-label .req{color:var(--sp-teal)}
.sp-hint{font-size:var(--sp-fs-xs);color:var(--text-3)}
.sp-error{font-size:var(--sp-fs-xs);color:var(--danger-fg);font-weight:500;display:flex;gap:6px;align-items:center}
.sp-input,.sp-select,.sp-textarea{width:100%;height:var(--sp-control-h);padding:0 var(--sp-4);border-radius:var(--sp-r);
  border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font:inherit;font-size:var(--sp-fs-body);
  transition:border-color .15s,box-shadow .15s,background .15s}
.sp-textarea{height:auto;min-height:110px;padding:var(--sp-3) var(--sp-4);resize:vertical;line-height:1.6}
.sp-input::placeholder,.sp-textarea::placeholder{color:var(--text-3)}
.sp-input:hover,.sp-select:hover,.sp-textarea:hover{border-color:var(--sp-teal)}
.sp-input:focus,.sp-select:focus,.sp-textarea:focus{outline:none;border-color:var(--sp-teal);background:var(--surface);box-shadow:0 0 0 4px rgba(77,185,167,.18)}
.sp-input[aria-invalid="true"]{border-color:var(--danger-fg);box-shadow:0 0 0 4px var(--danger-bg)}
.sp-input.ltr,.sp-input[type="tel"],.sp-input[type="email"]{direction:ltr;text-align:left;font-family:var(--sp-font-en)}
.sp-select{appearance:none;padding-inline-end:var(--sp-10);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F899B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:18px;background-position:left 14px center}
.sp-input-group{position:relative}
.sp-input-group .icon{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.sp-input-group .sp-input{padding-inline-start:42px}
.sp-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-5)}

/* مفتاح تشغيل */
.sp-switch{position:relative;display:inline-flex;align-items:center;gap:var(--sp-3);cursor:pointer;font-weight:500}
.sp-switch input{position:absolute;opacity:0;width:1px;height:1px}
.sp-switch__track{width:44px;height:26px;border-radius:var(--sp-r-pill);background:var(--border-strong);position:relative;transition:background .2s;flex:none}
.sp-switch__track::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;
  background:var(--sp-white);box-shadow:0 1px 3px rgba(10,46,82,.25);transition:inset-inline-start .2s var(--sp-ease)}
.sp-switch input:checked+.sp-switch__track{background:var(--sp-teal)}
.sp-switch input:checked+.sp-switch__track::after{inset-inline-start:21px}
.sp-switch input:focus-visible+.sp-switch__track{outline:3px solid var(--focus);outline-offset:2px}

/* اختيار */
.sp-check{display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer}
.sp-check input{width:18px;height:18px;accent-color:var(--sp-teal)}

/* ---------- ١٠. الشارات والحالات ---------- */
.sp-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--sp-r-pill);
  font-size:var(--sp-fs-xs);font-weight:700;white-space:nowrap;background:var(--info-bg);color:var(--info-fg)}
.sp-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.sp-badge--plain::before{display:none}
.sp-badge--success{background:var(--success-bg);color:var(--success-fg)}
.sp-badge--success::before{background:var(--sp-teal);box-shadow:0 0 0 3px rgba(77,185,167,.22)}
.sp-badge--warning{background:var(--warning-bg);color:var(--warning-fg)}
.sp-badge--warning::before{background:var(--sp-amber)}
.sp-badge--danger{background:var(--danger-bg);color:var(--danger-fg)}
.sp-badge--new{background:var(--sp-teal);color:var(--sp-midnight)}
.sp-badge--new::before{display:none}
.sp-badge--pulse::before{animation:sp-pulse 1.4s ease-in-out infinite}
@keyframes sp-pulse{50%{opacity:.35}}

/* ---------- ١١. التنبيهات والإشعارات ---------- */
.sp-alert{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4) var(--sp-5);border-radius:var(--sp-r);
  background:var(--info-bg);color:var(--text);border-inline-start:4px solid var(--info-fg)}
.sp-alert .icon{color:var(--info-fg);margin-top:2px}
.sp-alert strong{display:block;color:var(--heading);margin-bottom:2px}
.sp-alert--success{background:var(--success-bg);border-color:var(--sp-teal)}
.sp-alert--success .icon{color:var(--icon)}
.sp-alert--warning{background:var(--warning-bg);border-color:var(--sp-amber)}
.sp-alert--warning .icon{color:var(--sp-amber)}
.sp-alert--danger{background:var(--danger-bg);border-color:var(--danger-fg)}
.sp-alert--danger .icon{color:var(--danger-fg)}

.sp-toast{display:flex;align-items:center;gap:var(--sp-3);min-width:300px;max-width:420px;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--sp-r);background:var(--sp-midnight);color:var(--sp-white);box-shadow:var(--shadow-3);font-weight:500}
.sp-toast .icon{color:var(--sp-teal)}
.sp-toast--warning .icon{color:var(--sp-amber)}
.sp-toast--danger .icon{color:color-mix(in srgb,var(--sp-danger) 70%,#fff)}
.sp-toast .close{margin-inline-start:auto;color:rgba(220,232,242,.6);background:none;border:0;cursor:pointer;padding:4px;display:grid}
[data-theme="dark"] .sp-toast{background:var(--sp-deep-navy);border:1px solid var(--border-strong)}

/* ---------- ١٢. الجداول ---------- */
.sp-table-wrap{overflow-x:auto}
.sp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--sp-fs-body)}
.sp-table th{text-align:start;font-size:var(--sp-fs-sm);font-weight:700;color:var(--text-2);background:var(--surface-2);
  padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--border);white-space:nowrap}
.sp-table td{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);vertical-align:middle}
.sp-table tbody tr{transition:background .12s}
.sp-table tbody tr:hover{background:var(--info-bg)}
.sp-table tbody tr:last-child td{border-bottom:0}
.sp-table td.num,.sp-table th.num{text-align:end}
.sp-cell-main{font-weight:700;color:var(--heading)}
.sp-cell-sub{font-size:var(--sp-fs-xs);color:var(--text-3)}
.sp-avatar{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--info-bg);color:var(--info-fg);font-weight:700;font-size:var(--sp-fs-sm)}
.sp-row{display:flex;align-items:center;gap:var(--sp-3)}

/* ---------- ١٣. التبويبات والترقيم ---------- */
.sp-tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--border);overflow-x:auto}
.sp-tabs button{position:relative;background:none;border:0;padding:var(--sp-3) var(--sp-4);font:inherit;font-weight:500;color:var(--text-2);cursor:pointer;white-space:nowrap}
.sp-tabs button:hover{color:var(--heading)}
.sp-tabs button[aria-selected="true"]{color:var(--heading);font-weight:700}
.sp-tabs button[aria-selected="true"]::after{content:"";position:absolute;inset-inline:var(--sp-3);bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--sp-teal)}
.sp-seg{display:inline-flex;padding:4px;gap:4px;border-radius:var(--sp-r);background:var(--surface-2);border:1px solid var(--border)}
.sp-seg button{border:0;background:none;font:inherit;font-size:var(--sp-fs-sm);font-weight:500;color:var(--text-2);padding:6px 14px;border-radius:var(--sp-r-sm);cursor:pointer}
.sp-seg button[aria-pressed="true"]{background:var(--surface);color:var(--heading);font-weight:700;box-shadow:var(--shadow-1)}
.sp-pager{display:flex;align-items:center;gap:var(--sp-1);font-family:var(--sp-font-en);font-size:var(--sp-fs-sm)}
.sp-pager button{min-width:36px;height:36px;border-radius:var(--sp-r-sm);border:1px solid transparent;background:none;color:var(--text-2);font:inherit;cursor:pointer;display:grid;place-items:center}
.sp-pager button:hover{background:var(--info-bg)}
.sp-pager button[aria-current="page"]{background:var(--primary);color:var(--on-primary);font-weight:600}

/* ---------- ١٤. النافذة المنبثقة ---------- */
.sp-modal-backdrop{position:fixed;inset:0;background:var(--overlay);display:grid;place-items:center;padding:var(--sp-4);z-index:100}
.sp-modal{width:min(480px,100%);background:var(--surface);border-radius:var(--sp-r-xl);box-shadow:var(--shadow-3);padding:var(--sp-8);
  border:1px solid var(--border)}
[data-theme="dark"] .sp-modal{background:var(--sp-deep-navy)}
.sp-modal__icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:var(--sp-4)}
.sp-modal h2{margin-bottom:var(--sp-2)}
.sp-modal p{color:var(--text-2)}
.sp-modal__actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-6)}
.sp-modal__actions .sp-btn{flex:1}

/* ---------- ١٥. الحالة الفارغة ---------- */
.sp-empty{text-align:center;padding:var(--sp-12) var(--sp-6);display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
.sp-empty__art{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;background:var(--success-bg);color:var(--icon);margin-bottom:var(--sp-2)}
.sp-empty__art .icon{width:34px;height:34px;stroke-width:1.7}
.sp-empty p{color:var(--text-2);max-width:360px}

/* ---------- ١٦. بطاقة ربط الرقم (QR) ---------- */
.sp-qr{display:grid;grid-template-columns:1fr auto;gap:var(--sp-8);align-items:center}
.sp-qr__frame{width:244px;aspect-ratio:1;border-radius:var(--sp-r-lg);background:var(--sp-white);padding:14px;
  border:1px solid var(--border-strong);position:relative;display:grid;place-items:center}
.sp-qr__frame::before,.sp-qr__frame::after{content:"";position:absolute;width:28px;height:28px;border:3px solid var(--sp-teal)}
.sp-qr__frame::before{top:-6px;right:-6px;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.sp-qr__frame::after{bottom:-6px;left:-6px;border-right:0;border-top:0;border-radius:0 0 0 12px}
.sp-qr__placeholder{width:100%;height:100%;border-radius:var(--sp-r-sm);border:2px dashed rgba(0,68,132,.25);display:grid;place-items:center;
  text-align:center;color:rgba(10,46,82,.55);font-size:var(--sp-fs-sm);padding:var(--sp-4)}
.sp-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4);counter-reset:s}
.sp-steps li{display:flex;gap:var(--sp-3);align-items:flex-start;counter-increment:s}
.sp-steps li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--sp-font-en);font-weight:600;font-size:var(--sp-fs-sm);background:var(--success-bg);color:var(--success-fg)}
.sp-timer{display:inline-flex;align-items:center;gap:6px;font-size:var(--sp-fs-sm);color:var(--text-2)}

/* ---------- ١٧. بطاقات الباقات ---------- */
.sp-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sp-5);align-items:stretch}
.sp-plan{display:flex;flex-direction:column;gap:var(--sp-4);position:relative}
.sp-plan__name{font-size:var(--sp-fs-h3);font-weight:800;color:var(--heading)}
.sp-plan__price{display:flex;align-items:baseline;gap:6px}
.sp-plan__price .num{font-size:40px;font-weight:700;color:var(--heading);line-height:1}
.sp-plan__features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.sp-plan__features li{display:flex;gap:var(--sp-2);align-items:flex-start}
.sp-plan__features .icon{color:var(--icon);margin-top:3px}
.sp-plan--featured{border:2px solid var(--sp-teal);box-shadow:0 0 0 6px rgba(77,185,167,.10),var(--shadow-2)}
.sp-plan--featured .sp-badge{position:absolute;top:-13px;inset-inline-start:var(--sp-6)}

/* شريط الاستهلاك */
.sp-meter{height:8px;border-radius:var(--sp-r-pill);background:var(--info-bg);overflow:hidden}
.sp-meter>span{display:block;height:100%;border-radius:inherit;background:var(--sp-gradient-mark)}
.sp-meter--warn>span{background:var(--sp-amber)}

/* ---------- ١٨. صفحة الدخول ---------- */
.sp-auth{display:grid;grid-template-columns:minmax(380px,1fr) 1.1fr;min-height:100vh;background:var(--surface)}
.sp-auth__form{display:flex;flex-direction:column;justify-content:center;padding:var(--sp-12) clamp(24px,6vw,96px);gap:var(--sp-6)}
.sp-auth__form form{display:flex;flex-direction:column;gap:var(--sp-5);max-width:400px;width:100%}
.sp-auth__brand{background:var(--sp-gradient);color:var(--sp-white);padding:var(--sp-12);display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-8)}
.sp-auth__brand h2{font-size:var(--sp-fs-display);font-weight:800;color:var(--sp-white);line-height:1.35}

/* الشعار النصي الثابت + شريط التواصل */
.sp-slogan{font-weight:700;font-size:18px;line-height:1.6}
.sp-slogan em{font-style:normal;color:var(--sp-teal)}
.sp-contact{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);padding-top:var(--sp-4);
  border-top:1px solid rgba(255,255,255,.16);font-size:var(--sp-fs-sm);color:var(--sp-mist)}
.sp-contact__item{display:inline-flex;align-items:center;gap:var(--sp-2)}
.sp-contact__item .icon{width:17px;height:17px;color:var(--sp-teal)}
.sp-contact__sep{width:4px;height:4px;border-radius:50%;background:rgba(77,185,167,.75)}
.sp-on-light .sp-contact{border-top-color:rgba(0,68,132,.16);color:var(--sp-deep-navy)}
[data-theme="dark"] .sp-on-light .sp-contact{color:var(--sp-mist);border-top-color:var(--border)}

/* ---------- ١٩. رمز الريال السعودي ---------- */
.sp-riyal{display:inline-block;width:.9em;height:.9em;vertical-align:-.06em;background:currentColor;
  -webkit-mask:url('badges/saudi-riyal-symbol.png') center/contain no-repeat;mask:url('badges/saudi-riyal-symbol.png') center/contain no-repeat}

/* ---------- ٢٠. الجوال ---------- */
@media (max-width:960px){
  .sp-app{grid-template-columns:1fr}
  .sp-sidebar{position:fixed;inset-block:0;inset-inline-start:0;width:var(--sp-sidebar-w);z-index:50;transform:translateX(100%);transition:transform .25s var(--sp-ease)}
  .sp-sidebar[data-open="true"]{transform:none;box-shadow:var(--shadow-3)}
  .sp-topbar,.sp-content{padding-inline:var(--sp-4)}
  .sp-content{padding-block:var(--sp-5)}
  .sp-auth{grid-template-columns:1fr}
  .sp-auth__brand{order:-1;padding:var(--sp-8) var(--sp-5)}
  .sp-qr{grid-template-columns:1fr;justify-items:center}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}