/* ══════════════════════════════════════════════════════════════════════
   SHARKS — طبقة الهويّه (دليل هويّة شاركس · المالك 2026-09-29)
   ──────────────────────────────────────────────────────────────────────
   «Find. Promote. Scale.» — شبكة أفيليت، مش شركة شحن. أزرق حادّ، نظيف،
   فاتح، والأخضر للنجاح بس.

   نفس فكرة zemam-skin.css بالظبط: مابنكتبش كومبوننتس تانيه. التوكنز
   المشتركه (sharks-tokens.css) هى اللى بترسم كل حاجه، فإحنا بنغيّر
   **قيمها** تحت ‎html.sh‎ — وبعدين لمسات قليله على هيكل اللوحات
   (السايدبار والشريط العلوى واللوجو) بحيث الأربع لوحات تبان زى بوّابة
   Zemam فى الترتيب والنضافه، بهويّة شاركس.

   بتتحمّل **آخر حاجه** فى: الأدمن · التاجر · المسوّق · المخازن ·
   صفحات الدخول. ‎html.zm‎ (Zemam) مابيتلمسش — الكلاس مش عليه.

   ⚠️ ‎html.sh‎ (0,1,1) أقوى من ‎:root‎ (0,1,0) ومن ‎html[data-panel]‎ لو
      اتحمّل بعده — فلون كل لوحه القديم (برتقالى/تيل/إندجو/أسود) بيتلغى
      ويبقى أزرق شاركس فى الكل. الوضع الغامق ‎:root[data-theme=dark]‎
      (0,2,0) بيقرا ‎--d-*‎ اللى بنعرّفها هنا، فبيطلع كحلى مش رمادى.

   الألوان (مايتضافش غيرها):
     Primary #1457FF · Bright #168BFF · Cyan #14D8E6 · Navy #071A3A
     Blue-gray #94A3B8 · Surface #F8FAFC · Success #22C55E
     Border #E2E8F0 · Muted #F1F5F9 · Text2 #334155 · Muted text #64748B
     Info #0EA5E9 · Warning #F59E0B · Error #EF4444 · (Purple #7C3AED رسوم بس)
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* ═══════════════════  ١) التوكنز — الوضع الفاتح  ═══════════════════ */
html.sh{
  --sharks-primary:#1457FF;
  --sharks-primary-hv:#0F4BE0;
  --sharks-secondary:#168BFF;
  --sharks-accent:#14D8E6;
  --sharks-navy:#071A3A;
  --sharks-gray:#94A3B8;
  --sharks-bg:#F8FAFC;
  --sharks-success:#22C55E;
  --sharks-white:#FFFFFF;
  --sharks-border:#E2E8F0;
  --sharks-border-2:#CBD5E1;
  --sharks-muted-bg:#F1F5F9;
  --sharks-text-secondary:#334155;
  --sharks-text-muted:#64748B;
  --sharks-info:#0EA5E9;
  --sharks-warning:#F59E0B;
  --sharks-error:#EF4444;
  --sharks-soft:#EAF2FF;       /* البند المختار · خلفيات الأيقونات */
  --sharks-row-sel:#EFF6FF;    /* الصف المختار */
  --sharks-grad:linear-gradient(115deg,#1457FF 0%,#168BFF 55%,#14D8E6 100%);

  /* الأسطح */
  --paper :#F8FAFC;
  --paper2:#F1F5F9;
  --surf  :#FFFFFF;

  /* النصوص — كحلى مكان الأسود */
  --ink  :#071A3A;
  --slate:#334155;
  --mist :#64748B;

  /* الحدود */
  --line :#E2E8F0;
  --line2:#CBD5E1;
  --sep  :#E2E8F0;

  /* الزرار الأساسى — أزرق */
  --solid   :#1457FF;
  --solid-tx:#FFFFFF;
  --solid-hv:#0F4BE0;

  /* الأكسنت — واحد لكل لوحات شاركس (كان لكل لوحه لون) */
  --accent-l:#1457FF;  --accent-rgb-l:20,87,255;
  --accent2-l:#168BFF; --accent-tx-l:#FFFFFF;
  --accent-d:#5B8CFF;  --accent-rgb-d:91,140,255;
  --accent2-d:#4FB0FF; --accent-tx-d:#071A3A;

  /* الظلال — شبه معدومه */
  --sh-sm  :0 1px 2px rgba(7,26,58,.04);
  --sh     :0 8px 24px rgba(7,26,58,.08);
  --sh-card:0 1px 2px rgba(7,26,58,.04);
  --sh-lg  :0 16px 40px rgba(7,26,58,.12);

  /* نصف القطر — ٨ للأدوات · ١٠ للأزرار والحقول · ١٢ للكروت */
  --r   :12px;
  --r-sm:8px;
  --r-xs:6px;
  --r-btn:10px;

  /* الخطوط — Inter للإنجليزى و IBM Plex Sans Arabic للعربى،
     والأرقام Inter بأرقام جدوليه (مش مونو) */
  --f-ui :'Inter','IBM Plex Sans Arabic','Noto Sans Arabic',Arial,sans-serif;
  --f-num:'Inter',Arial,sans-serif;

  /* الحالات — النص أغمق من اللون عشان التباين على الأبيض */
  --ok  :#22C55E;  --ok-bg  :#F0FDF4;  --ok-br  :rgba(34,197,94,.28);  --ok-tx  :#15803D;
  --err :#EF4444;  --err-bg :#FEF2F2;  --err-br :rgba(239,68,68,.26);  --err-tx :#B91C1C;
  --warn:#F59E0B;  --warn-bg:#FFFBEB;  --warn-br:rgba(245,158,11,.30); --warn-tx:#B45309;
  --info:#0EA5E9;
  --ok-fill:#15803D; --err-fill:#DC2626; --warn-fill:#B45309; --info-fill:#0369A1;

  /* السايدبار (sharks-identity §14) */
  --side-on-bg :#EAF2FF;
  --side-on-ink:#071A3A;
  --side-on-bar:#1457FF;
  --side-mut   :#94A3B8;

  /* الوضع الغامق — كحلى (بيتقرا من ‎:root[data-theme=dark]‎) */
  --d-paper :#060F22;
  --d-paper2:#0E1A33;
  --d-surf  :#0A1429;
  --d-ink   :#F1F5F9;
  --d-slate :#B4C0D4;
  --d-mist  :#8C9BB5;
  --d-line  :#1A2742;
  --d-line2 :#283A5C;
  --d-sep   :rgba(148,163,184,.24);
  --d-ind   :#5B8CFF;
  --d-ind2  :#4FB0FF;
  --d-ind-fill:#1457FF;
  --d-ind-fill-tx:#FFFFFF;
  --d-soft  :rgba(91,140,255,.12);
  --d-soft2 :rgba(91,140,255,.22);
  --d-solid :#1457FF;
  --d-solid-tx:#FFFFFF;
  --d-solid-hv:#3B74FF;
  --d-sh-sm :0 1px 2px rgba(0,0,0,.5);
  --d-sh    :0 8px 24px rgba(0,0,0,.55);

  /* لون البراند — config/sharks.php بيحقنه، ده احتياطى */
  --brand-primary:var(--brand-primary-cfg, #1457FF);
  --brand-hover  :var(--brand-hover-cfg,   #0F4BE0);
  --brand-subtle :var(--brand-subtle-cfg,  #EAF2FF);
}

html.sh[dir="rtl"]{
  --f-ui:'IBM Plex Sans Arabic','Inter','Noto Sans Arabic',Arial,sans-serif;
}

/* ═══════════════════  ٢) الوضع الغامق (اختيار المستخدم)  ═══════════ */
html.sh[data-theme="dark"]{
  --side-on-bg:rgba(91,140,255,.14); --side-on-ink:#F1F5F9; --side-on-bar:#5B8CFF;
  --side-mut:#6E7F9E;
}
@media (prefers-color-scheme: dark){
  html.sh:not([data-theme="light"]):not([data-theme="dark"]){
    --side-on-bg:rgba(91,140,255,.14); --side-on-ink:#F1F5F9; --side-on-bar:#5B8CFF;
  }
}

/* ═══════════════════  ٣) الأساس  ═══════════════════════════════════ */
html.sh body{
  font-family:var(--f-ui)!important;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
}
html.sh body,
html.sh #wrapper,
html.sh .content-page,
html.sh .page-body,
html.sh .content-body{ background:var(--paper)!important; color:var(--ink) }

html.sh h1,html.sh h2,html.sh h3,html.sh h4,html.sh h5,html.sh h6,
html.sh .page-title,html.sh .header-title,html.sh .card-title{
  color:var(--ink); letter-spacing:-.01em;
}
html.sh .page-title{ font-weight:600!important }

/* الأرقام جدوليه ومعزوله عن اتجاه الجمله */
html.sh .sk-num,html.sh .sk-stat__num,html.sh td.num,html.sh .sk-kpi__num{
  font-family:var(--f-num)!important; font-variant-numeric:tabular-nums;
}

html.sh :focus-visible{ outline:2px solid var(--sharks-primary)!important; outline-offset:2px }
html.sh ::selection{ background:#DCE8FF; color:var(--ink) }

/* ═══════════════════  ٤) اللوجو — الزعنفه + sharks  ═════════════════
   partials/sharks-lockup — نفس الكلاسات دى معرّفه فى اللاند والدخول */
/* القوالب بتحط على ‎.logo‎ حروف كبيره ولون ومقاس — فالقيم هنا ‎!important‎
   والمقاس كله بالـem من ‎.skl‎ نفسه (15px افتراضى). */
.skl{ display:inline-flex!important; align-items:center; gap:.55em; line-height:1!important; color:#071A3A!important;
      font-family:'Inter','Segoe UI',Arial,sans-serif!important; font-size:15px; text-decoration:none!important;
      text-transform:none!important; letter-spacing:normal!important; vertical-align:middle; direction:ltr }
.skl__mark{ inline-size:2.1em!important; block-size:2.1em!important; flex:none; display:block!important; max-width:none!important }
.skl__txt{ display:inline-flex!important; flex-direction:column; align-items:flex-start; gap:.32em; color:inherit!important }  /* القالب: .logo span span{color:#3520C8} */
.skl__word{ font-weight:700!important; font-size:1.6em!important; letter-spacing:-.045em!important; line-height:.9!important;
            color:inherit!important; text-transform:lowercase!important; font-family:inherit!important }
.skl__desc{ font-weight:600!important; font-size:.5em!important; letter-spacing:.24em!important; text-transform:uppercase!important;
            color:#168BFF!important; line-height:1!important; white-space:nowrap; font-family:inherit!important }
.skl--light{ color:#fff!important }
.skl--light .skl__desc{ color:#7CC4FF!important }
.skl--mark{ gap:0 }
html.sh[data-theme="dark"] .skl{ color:#F1F5F9!important }
html.sh[data-theme="dark"] .skl__desc{ color:#7CC4FF!important }
/* اللوجو المرفوع من الأدمن (partials/sharks-lockup + App\Support\SiteLogo) — المالك 2026-09-29 */
.skl.skl--img{gap:0!important}
.skl__img{display:block;block-size:2.4em;inline-size:auto;max-inline-size:100%;flex:none}
.skl--mark .skl__img{block-size:2.1em}
/* ★ 2026-10-22 — لوجو AFFILIATE بـ٣ نسخ: القصير (الزعنفه + sharks) أعرض وأقل طول فكلمة sharks بنفس الحجم؛
   الكامل (٣ سطور) أكبر عشان AFFILIATE والجمله يتقروا */
.skl--short .skl__img{block-size:1.8em}
.skl--full .skl__img{block-size:auto; inline-size:15em; max-inline-size:100%}
/* ‎!important‎: قوالب اللوحات بتحط display:block على أى img جوّه اللوجو */
.skl .skl__img--dk{display:none!important}
/* على الغامق: النسخه اللى كلامها أبيض — نفس الأماكن اللى بتبيّض الرسم فى sharks-skin / sharks-hx */
.skl--light .skl__img--std,
html.sh.hx .topbar .skl__img--std,
html.sh.hx .nav-header .skl__img--std,
html.sh.hx .sk-mobile-logo .skl__img--std,
html.sh[data-theme="dark"] .skl__img--std{display:none!important}
.skl--light .skl__img--dk,
html.sh.hx .topbar .skl__img--dk,
html.sh.hx .nav-header .skl__img--dk,
html.sh.hx .sk-mobile-logo .skl__img--dk,
html.sh[data-theme="dark"] .skl__img--dk{display:block!important}

/* ═══════════════════  ٥) السايدبار — أبيض، مختصر، زى Zemam  ══════════
   أربع قوالب: الأدمن (.side-menu) · التاجر (.left-side-menu) ·
   المسوّق (.sidebar-wrapper) · المخازن (.dlabnav). */
html.sh .side-menu,
html.sh .left-side-menu,
html.sh .sidebar-wrapper,
html.sh .dlabnav{
  background:var(--surf)!important;
  border-inline-end:1px solid var(--line)!important;
  box-shadow:none!important;
}

/* البند */
html.sh #sidebar-menu ul li > a,
html.sh .dlabnav .metismenu > li > a,
html.sh .sidebar-wrapper .sidebar-links > li > .sidebar-link{
  color:var(--slate)!important;
  border-radius:var(--r-sm)!important;
  font-size:14px!important;
  font-weight:500!important;
}
html.sh #sidebar-menu > ul > li > a,
html.sh .dlabnav .metismenu > li > a{
  margin:2px 10px!important;
  padding:9px 12px!important;
  display:flex!important; align-items:center; gap:10px;
}
html.sh #sidebar-menu ul li > a:hover,
html.sh .dlabnav .metismenu > li > a:hover,
html.sh .sidebar-wrapper .sidebar-links > li > .sidebar-link:hover{
  background:var(--sharks-muted-bg)!important;
  color:var(--ink)!important;
}
html.sh #sidebar-menu ul li > a svg,
html.sh #sidebar-menu ul li > a i,
html.sh .dlabnav .metismenu > li > a svg,
html.sh .sidebar-wrapper .sidebar-links > li > .sidebar-link svg{ color:var(--mist); stroke:currentColor }

/* البند المختار — شفاف؛ اللمبه والشعاع (sharks-limelight.css) بلون الأزرق */
html.sh #sidebar-menu ul li > a.active,
html.sh #sidebar-menu ul li.mm-active > a,
html.sh #sidebar-menu ul li.active > a,
html.sh #sidebar-menu ul li a.sk-on,
html.sh .dlabnav .metismenu > li > a.wh-on,
html.sh .dlabnav .metismenu > li.mm-active > a,
html.sh .sidebar-wrapper .sidebar-links > li > .sidebar-link.active{
  color:var(--side-on-ink)!important;
  font-weight:600!important;
}

/* عنوان القسم — «— القسم» صغير وباهت، زى Zemam */
html.sh .menu-title,
html.sh .dlabnav .metismenu > li.nav-label,
html.sh .dlabnav .metismenu > li.sk-navgrp,
html.sh .sidebar-wrapper .sidebar-main-title h6{
  color:var(--side-mut)!important;
  font-size:11px!important;
  font-weight:600!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  padding:16px 22px 6px!important;
  display:flex!important; align-items:center; gap:8px;
  opacity:1!important;
}
html.sh .sidebar-wrapper .sidebar-main-title h6{ padding:0!important; margin:0!important }
html.sh .menu-title::before,
html.sh .dlabnav .metismenu > li.nav-label::before,
html.sh .dlabnav .metismenu > li.sk-navgrp::before,
html.sh .sidebar-wrapper .sidebar-main-title h6::before{
  content:""!important; display:inline-block!important; flex:none;
  inline-size:10px!important; block-size:2px!important; border-radius:2px!important;
  background:var(--line2)!important; margin:0!important; position:static!important;
  box-shadow:none!important;
}
html.sh[dir="rtl"] .menu-title,
html.sh[dir="rtl"] .dlabnav .metismenu > li.nav-label,
html.sh[dir="rtl"] .dlabnav .metismenu > li.sk-navgrp,
html.sh[dir="rtl"] .sidebar-wrapper .sidebar-main-title h6{ letter-spacing:0!important; text-transform:none!important; font-size:12px!important }

/* ═══════════════════  ٦) اللوجو فوق السايدبار  ══════════════════════ */
/* مقاس اللوجو فى كل لوحه — ١٤ بكسل = زعنفه ٢٩ وكلمه ٢٢ */
html.sh .topbar-left .logo .skl,
html.sh .logo-box .skl,
html.sh .sidebar-wrapper .logo-wrapper .skl,
html.sh .page-header .logo-wrapper .skl,
html.sh .nav-header .brand-logo .skl,
html.sh .sk-mobile-logo .skl{ font-size:14px }
html.sh .skl.skl--mark{ font-size:15px }

/* الأدمن */
html.sh .topbar .topbar-left{
  background:var(--surf)!important;
  border-inline-end:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;
}
html.sh .topbar .topbar-left .logo{ display:flex!important; align-items:center; justify-content:flex-start;
  block-size:70px; padding-inline:22px; text-decoration:none }
html.sh .topbar .topbar-left .logo > span{ display:flex; align-items:center; line-height:1 }
html.sh .topbar .topbar-left .logo > i{ display:none!important }
/* السايدبار المقفول (body.enlarged): الزعنفه لوحدها فى النص.
   قاعدة القالب ‎.enlarged .logo span{display:none}‎ بتمسك أى span جوّه —
   حتى اللوجو اللى جوّه <i> — فبنرجّعه صراحه. */
html.sh .enlarged #wrapper .topbar .topbar-left .logo{ justify-content:center; padding-inline:0 }
html.sh .enlarged #wrapper .topbar .topbar-left .logo > span{ display:none!important }
html.sh .enlarged #wrapper .topbar .topbar-left .logo > i{ display:flex!important; align-items:center; justify-content:center; line-height:1 }
html.sh .enlarged #wrapper .topbar .topbar-left .logo > i .skl{ display:inline-flex!important; opacity:1!important }
/* التاجر */
html.sh .logo-box{
  background:var(--surf)!important;
  border-inline-end:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
html.sh .logo-box .logo{ display:flex!important; align-items:center; block-size:70px; padding-inline:20px; text-decoration:none }
html.sh .logo-box .logo-lg,
html.sh .logo-box .logo-sm{ display:flex; align-items:center }
/* المسوّق */
html.sh .sidebar-wrapper .logo-wrapper{ display:flex!important; align-items:center; min-block-size:70px;
  border-bottom:1px solid var(--line)!important }
html.sh .sidebar-wrapper .logo-wrapper > a,
html.sh .sidebar-wrapper .logo-icon-wrapper > a{ display:flex; align-items:center; text-decoration:none }
html.sh .page-header .header-logo-wrapper .logo-wrapper a{ display:flex; align-items:center }
/* المخازن */
html.sh .nav-header{ border-bottom:1px solid var(--line)!important }
html.sh .nav-header .brand-logo{ display:flex!important; align-items:center; text-decoration:none }

/* لودر الصفحه — الزعنفه بدل صورة اللوجو */
html.sh .sk-loader .skl{ font-size:22px }

/* ═══════════════════  ٧) الشريط العلوى — أيقونات مرتّبه زى Zemam  ═══ */
html.sh .navbar-custom,
html.sh .topbar,
html.sh .page-header .header-wrapper,
html.sh .header{
  background:var(--surf)!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:none!important;
}
html.sh .sk-tbcs{ display:flex; align-items:center; gap:4px }

/* الأزرار الأيقونيه — شكل واحد ٤٠×٤٠ */
html.sh #skTheme,
html.sh .sk-tbc__btn,
html.sh .navbar-custom .topnav-menu > li > a.nav-link:not(.nav-user),
html.sh .navbar-custom .navbar-right > li > a.nav-link:not(.nav-profile):not(.nav-user),
html.sh .button-menu-mobile{
  display:inline-flex!important; align-items:center; justify-content:center; gap:4px;
  min-inline-size:40px!important; block-size:40px!important; line-height:1!important;
  padding:0 10px!important; margin:0!important;
  border:0!important; border-radius:10px!important; background:transparent!important;
  color:var(--slate)!important; box-shadow:none!important; cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
html.sh #skTheme:hover, html.sh .sk-tbc__btn:hover,
html.sh .navbar-custom .topnav-menu > li > a.nav-link:not(.nav-user):hover,
html.sh .navbar-custom .navbar-right > li > a.nav-link:not(.nav-profile):not(.nav-user):hover,
html.sh .button-menu-mobile:hover{ background:var(--sharks-muted-bg)!important; color:var(--ink)!important }
html.sh #skTheme svg, html.sh .sk-tbc__btn svg,
html.sh .navbar-custom .topnav-menu > li > a.nav-link:not(.nav-user) svg,
html.sh .navbar-custom .navbar-right > li > a.nav-link svg,
html.sh .button-menu-mobile svg{ width:20px!important; height:20px!important; opacity:.8 }
html.sh .sk-tbc__code{ font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--slate) }
html.sh:not([data-theme="dark"]) #skTheme .sk-sun{ display:none }
html.sh[data-theme="dark"] #skTheme .sk-moon{ display:none }

/* الأدمن — الشريط كان بند ٧٠ بكسل لكل أيقونه */
html.sh .topbar .navbar-custom .navbar-right{ gap:4px; block-size:70px; padding-inline-end:12px }
html.sh .topbar .navbar-custom .navbar-right > li{ display:flex!important; align-items:center; margin:0!important }
html.sh .topbar .navbar-custom .navbar-right > li > a.nav-link{ block-size:40px!important; min-inline-size:40px!important }

/* التاجر — نفس ترتيب بوّابة Zemam */
html.sh .navbar-custom{ block-size:70px }
html.sh .navbar-custom .topnav-menu > li{ display:flex; align-items:center; block-size:70px }
html.sh .navbar-custom .topnav-menu{ display:flex!important; align-items:center; gap:4px }

/* الحساب — كبسوله (التاجر والأدمن) */
html.sh .navbar-custom .nav-user{
  display:inline-flex!important; align-items:center; gap:8px;
  block-size:44px!important; line-height:1!important;
  padding:4px 10px 4px 4px!important; margin:0!important;
  border:1px solid var(--line)!important; border-radius:999px!important; background:var(--surf)!important;
  color:var(--ink)!important; min-height:0!important;
}
html.sh[dir="rtl"] .navbar-custom .nav-user{ padding:4px 4px 4px 10px!important }
html.sh .navbar-custom .nav-user:hover{ border-color:var(--line2)!important; background:var(--paper)!important }
html.sh .navbar-custom .nav-user .pro-user-name{
  display:inline-flex; align-items:center; gap:4px; margin:0!important;
  font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap;
  max-inline-size:180px; overflow:hidden; text-overflow:ellipsis;
}
html.sh .navbar-custom .nav-user .pro-user-name svg{ width:16px; height:16px; opacity:.6 }
html.sh .navbar-custom .nav-user img,
html.sh .navbar-custom .nav-user .sk-av{ inline-size:34px!important; block-size:34px!important; border-radius:50%!important }

/* صورة الحساب بالحروف — أزرق هادى (مش لون عشوائى) */
html.sh .sk-av--init{ background:var(--sharks-soft)!important; color:var(--sharks-primary)!important; border:1px solid #D4E3FF!important; font-weight:600 }

/* القوايم المنسدله */
html.sh .dropdown-menu,
html.sh .onhover-show-div{
  border:1px solid var(--line)!important; border-radius:12px!important;
  box-shadow:0 12px 32px rgba(7,26,58,.12)!important;
}
html.sh .navbar-custom .dropdown-menu{ padding:6px!important; margin-top:6px!important }
html.sh .dropdown-item{ border-radius:8px }
html.sh .dropdown-item:hover,html.sh .dropdown-item:focus{ background:var(--sharks-muted-bg); color:var(--ink) }

/* البحث السريع فى الشريط */
html.sh .sk-tsearch{ background:var(--paper)!important; border:1px solid var(--line)!important; border-radius:10px!important }
html.sh .sk-tsearch:focus-within{ border-color:var(--sharks-primary)!important; box-shadow:0 0 0 3px rgba(20,87,255,.12)!important; background:#fff!important }

@media (max-width: 767.98px){
  html.sh .navbar-custom .nav-user .pro-user-name{ display:none }
  html.sh .navbar-custom .nav-user{ padding:3px!important; border-color:transparent!important }
}

/* ═══════════════════  ٨) الكروت  ════════════════════════════════════ */
html.sh .card,
html.sh .card-box{
  background:var(--surf)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--r)!important;
  box-shadow:var(--sh-card)!important;
}
html.sh .card-header{ background:transparent!important; border-bottom:1px solid var(--line)!important }

/* ═══════════════════  ٩) الأزرار  ═══════════════════════════════════ */
html.sh .btn{ border-radius:var(--r-btn)!important; font-weight:500!important; box-shadow:none!important }
html.sh .btn-primary{
  background:var(--sharks-primary)!important; border-color:var(--sharks-primary)!important; color:#fff!important;
}
html.sh .btn-primary:hover,html.sh .btn-primary:focus{ background:var(--sharks-primary-hv)!important; border-color:var(--sharks-primary-hv)!important }
html.sh .btn-secondary,html.sh .btn-light,html.sh .btn-outline-secondary{
  background:#fff!important; border:1px solid var(--line2)!important; color:var(--ink)!important;
}
html.sh .btn-secondary:hover,html.sh .btn-light:hover,html.sh .btn-outline-secondary:hover{ background:var(--sharks-muted-bg)!important }
html.sh .btn-outline-primary{ background:#fff!important; border:1px solid var(--sharks-primary)!important; color:var(--sharks-primary)!important }
html.sh .btn-outline-primary:hover{ background:var(--sharks-soft)!important }
html.sh .btn-success{ background:#16A34A!important; border-color:#16A34A!important; color:#fff!important }
html.sh .btn-danger { background:var(--sharks-error)!important; border-color:var(--sharks-error)!important; color:#fff!important }
html.sh .btn-danger:hover{ background:#DC2626!important; border-color:#DC2626!important }
html.sh .btn-info{ background:#fff!important; border:1px solid var(--line2)!important; color:var(--ink)!important }
html.sh .btn-warning{ background:#FFFBEB!important; border:1px solid rgba(245,158,11,.4)!important; color:#92400E!important }

/* ═══════════════════  ١٠) الحقول  ════════════════════════════════════ */
html.sh .form-control,
html.sh .custom-select,
html.sh select.form-control{
  min-height:40px;
  background:#fff;
  border:1px solid var(--line2)!important;
  border-radius:var(--r-btn)!important;
  color:var(--ink);
  box-shadow:none!important;
}
html.sh .form-control:focus,
html.sh .custom-select:focus{
  border-color:var(--sharks-primary)!important;
  box-shadow:0 0 0 3px rgba(20,87,255,.14)!important;
}
html.sh[data-theme="dark"] .form-control,
html.sh[data-theme="dark"] .custom-select{ background:var(--surf); color:var(--ink) }

/* ═══════════════════  ١١) الجداول  ═══════════════════════════════════ */
html.sh .table thead th{
  background:var(--paper)!important;
  color:var(--mist)!important;
  font-size:12px!important; font-weight:600!important;
  border-bottom:1px solid var(--line)!important;
  border-top:0!important;
  white-space:nowrap;
}
html.sh .table td,html.sh .table th{ border-color:var(--line)!important; vertical-align:middle }
html.sh .table tbody tr:hover{ background:var(--paper)!important }
html.sh .table tbody tr.selected,html.sh .table tbody tr.is-selected{ background:var(--sharks-row-sel)!important }

/* ═══════════════════  ١٢) الشارات — خلفيه هاديه ونص واضح  ════════════ */
html.sh .badge{ border-radius:999px!important; padding:4px 8px!important; font-size:12px!important; font-weight:500!important; line-height:1.2 }
html.sh .badge-success{ background:#F0FDF4!important; color:#15803D!important }
html.sh .badge-danger { background:#FEF2F2!important; color:#B91C1C!important }
html.sh .badge-warning{ background:#FFFBEB!important; color:#B45309!important }
html.sh .badge-info   { background:#F0F9FF!important; color:#0369A1!important }
html.sh .badge-primary{ background:#EAF2FF!important; color:#1447D6!important }
html.sh .badge-secondary,html.sh .badge-light{ background:var(--sharks-muted-bg)!important; color:var(--slate)!important }
/* الشاره اللى فوق أيقونة الإشعارات تفضل ممليه — عشان تتشاف */
html.sh .noti-icon-badge,html.sh .notification-box .badge{ background:var(--sharks-error)!important; color:#fff!important; padding:2px 6px!important }

html.sh .alert{ border-radius:var(--r-sm)!important; border-width:1px!important }
html.sh .alert-success{ background:#F0FDF4!important; border-color:rgba(34,197,94,.28)!important; color:#166534!important }
html.sh .alert-danger { background:#FEF2F2!important; border-color:rgba(239,68,68,.26)!important; color:#991B1B!important }
html.sh .alert-warning{ background:#FFFBEB!important; border-color:rgba(245,158,11,.30)!important; color:#92400E!important }
html.sh .alert-info   { background:#F0F9FF!important; border-color:rgba(14,165,233,.28)!important; color:#075985!important }

/* الترقيم */
html.sh .page-item.active .page-link{ background:var(--sharks-primary)!important; border-color:var(--sharks-primary)!important; color:#fff!important }
html.sh .page-link{ color:var(--ink)!important; border-color:var(--line)!important; border-radius:var(--r-sm)!important; margin:0 2px }

/* روابط عاديه — :where صفر وزن عشان أى كلاس يغلبه */
:where(html.sh) a{ color:inherit }
:where(html.sh .content-page, html.sh .page-body, html.sh .content-body) a:not([class]){ color:var(--sharks-primary) }

html.sh .footer{ background:transparent!important; border-top:1px solid var(--line)!important; color:var(--mist)!important; font-size:13px }

/* ═══════════════════  ١٣) لوحة المسوّق (قالب Cuba) — نفس ترتيب Zemam  ═══
   الحساب كبسوله بحد رفيع، الأيقونات ٤٠×٤٠ باهته، واسم البند مايتقصّش. */
html.sh .page-header .header-wrapper{ min-block-size:70px; padding-block:0!important }
html.sh .page-header .nav-menus{ gap:4px; align-items:center }
html.sh .page-header .nav-menus > li{ margin:0!important }
html.sh .page-header .nav-menus > li > .notification-box,
html.sh .page-header .nav-menus > li > a:not(.btn),
html.sh .page-header .nav-menus > li > svg{
  display:inline-flex; align-items:center; justify-content:center;
  min-inline-size:40px; block-size:40px; border-radius:10px; color:var(--slate);
  transition:background-color .15s ease;
}
html.sh .page-header .nav-menus > li:hover > .notification-box,
html.sh .page-header .nav-menus > li > a:not(.btn):hover{ background:var(--sharks-muted-bg) }
html.sh .page-header .nav-menus .notification-box svg{ width:20px!important; height:20px!important; stroke:var(--slate)!important; opacity:.8 }
html.sh .page-header .profile-nav{
  margin-inline-start:6px!important; padding-inline-start:10px!important;
  border-inline-start:1px solid var(--line)!important;
}
html.sh .page-header .profile-nav .profile-media{
  gap:8px; block-size:44px; padding:4px 12px 4px 4px; border:1px solid var(--line);
  border-radius:999px; background:var(--surf); cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
html.sh[dir="rtl"] .page-header .profile-nav .profile-media{ padding:4px 4px 4px 12px }
html.sh .page-header .profile-nav:hover .profile-media{ border-color:var(--line2); background:var(--paper) }
html.sh .page-header .profile-nav .profile-media .sk-av{ inline-size:34px!important; block-size:34px!important; border-radius:50%!important }
html.sh .page-header .profile-nav .profile-media .flex-grow-1{ margin:0!important; line-height:1.2 }
html.sh .page-header .profile-nav .profile-media .flex-grow-1 span{ font-size:14px; font-weight:600; color:var(--ink);
  display:block; max-inline-size:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
html.sh .page-header .profile-nav .profile-media .flex-grow-1 p{ font-size:12px; color:var(--mist)!important; display:flex; align-items:center; gap:2px }
html.sh .page-header .profile-nav .profile-media .flex-grow-1 p svg{ width:14px; height:14px; opacity:.7 }
@media (max-width: 767.98px){
  html.sh .page-header .profile-nav .profile-media{ padding:3px!important; border-color:transparent }
  html.sh .page-header .profile-nav .profile-media .flex-grow-1{ display:none }
  html.sh .page-header .profile-nav{ border:0!important; padding:0!important; margin:0!important }
}

/* السايدبار: نفس حشو ومسافات بنود Zemam، والاسم الطويل بينزل سطر بدل ما يتقصّ */
html.sh .sidebar-wrapper .sidebar-links > li > .sidebar-link{
  padding:9px 12px!important; margin-block:2px!important; gap:10px;
}
html.sh .sidebar-wrapper .sidebar-links > li > .sidebar-link > span{
  white-space:normal!important; overflow:visible!important; text-overflow:clip!important; line-height:1.35;
}
html.sh .sidebar-wrapper .sidebar-links .sidebar-submenu li a{ color:var(--slate)!important; font-size:13.5px!important }
html.sh .sidebar-wrapper .sidebar-links .sidebar-submenu li a:hover,
html.sh .sidebar-wrapper .sidebar-links .sidebar-submenu li a.active{ color:var(--sharks-primary)!important }
/* زرار الطىّ (٤ مربّعات) — أهدى جنب اللوجو */
html.sh .sidebar-wrapper .logo-wrapper .toggle-sidebar{ opacity:.55 }
html.sh .sidebar-wrapper .logo-wrapper .toggle-sidebar:hover{ opacity:.9 }

/* ═══════════════════  ١٤) لوحة التاجر — مقاسات شريط Zemam بالظبط  ═════
   sharks-mc-shell.css بيعرّف الشريط ٥٦ بكسل والحساب من غير حد — بوّابة
   Zemam (نفس القالب) ٧٠ بكسل وكبسولة الحساب بحد رفيع. */
html.sh[data-panel="merchant"]{ --h-top:70px }
html.sh .navbar-custom .topnav-menu > li > a.nav-link:not(.nav-user),
html.sh .navbar-custom #skTheme{ width:40px!important; height:40px!important; border-radius:10px!important }
html.sh .navbar-custom .topnav-menu > li > a.nav-link.nav-user{
  height:44px!important; max-width:260px; padding:4px 12px 4px 4px!important;
  border:1px solid var(--line)!important; border-radius:999px!important; background:var(--surf)!important;
}
html.sh[dir="rtl"] .navbar-custom .topnav-menu > li > a.nav-link.nav-user{ padding:4px 4px 4px 12px!important }
html.sh .navbar-custom .topnav-menu > li > a.nav-link.nav-user:hover{ border-color:var(--line2)!important; background:var(--paper)!important }
html.sh .navbar-custom .nav-user .sk-av{ width:34px!important; height:34px!important; font-size:12px }
html.sh .navbar-custom .nav-user .pro-user-name{ font-size:14px!important }
html.sh .navbar-custom .topnav-menu > li.notification-list.topbar-dropdown:last-child{
  padding-inline-start:10px; margin-inline-start:6px!important; border-inline-start:1px solid var(--line); height:36px!important; align-self:center }
@media (max-width: 767.98px){
  html.sh .navbar-custom .topnav-menu > li > a.nav-link.nav-user{ padding:3px!important; border-color:transparent!important }
  html.sh .navbar-custom .topnav-menu > li.notification-list.topbar-dropdown:last-child{ border:0; padding:0; margin:0!important }
}

/* شارة الإشعارات وهى صفر عليها hidden — ماتظهرش */
html.sh .noti-icon-badge[hidden], html.sh .badge[hidden]{ display:none!important }

/* ═══════════════════  ١٥) ألوان أهدى (المالك 2026-09-29: «الألوان أوفر»)  ═══
   الأزرق بقى للّمسات بس: الروابط، البند المختار (اللمبه)، حلقة التركيز،
   الشارات. الزرار الأساسى والفلاتر المختاره كحلى — نفس فكرة Zemam (Slate). */
html.sh{
  --solid   :#071A3A;
  --solid-tx:#FFFFFF;
  --solid-hv:#0E2A57;
}
html.sh[data-theme="dark"]{ --solid:#F1F5F9; --solid-tx:#071A3A; --solid-hv:#E2E8F0 }
html.sh .btn-primary,
html.sh .btn-primary:not(:disabled):not(.disabled){
  background:var(--solid)!important; border-color:var(--solid)!important; color:var(--solid-tx)!important;
}
html.sh .btn-primary:hover,html.sh .btn-primary:focus{ background:var(--solid-hv)!important; border-color:var(--solid-hv)!important }
/* الخلفيات المليانه أزرق فى القوالب القديمه (bg-primary) بقت هاديه */
html.sh .bg-primary:not(.badge):not(.progress-bar){ background:var(--surf)!important; color:var(--ink)!important }
html.sh .bg-primary.text-white .text-white-50,
html.sh .bg-primary .text-white-50{ color:var(--mist)!important }

/* ═══════════════════  ١٦) كروت الأرقام — شكل واحد فى كل اللوحات  ═══════
   المالك: «شكل الكاردس والأرقام وحش». كان فيه ٦ أشكال: عنوان كابيتال
   بحروف متباعده، رقم تقيل ٧٠٠، و«LE» بنفس مقاس الرقم. دلوقتى:
     الكارت  أبيض · حد رفيع · ١٤ نصف قطر · حشو ١٦/١٨
     العنوان ١٣px رمادى عادى (مش كابيتال)
     الرقم   ٢٦px وزن ٦٠٠ كحلى · أرقام جدوليه
     العمله  ١٣px رمادى فاتح جنب الرقم
   المكوّنات: .sk-an__tile (المسوّق/التاجر) · .sk-kpi (داشبورد الأدمن) ·
   .sk-stat · .mini-stat (شاشات الأدمن القديمه) · .card-box h3 · .sk-wh__q */
html.sh .sk-an__tile,
html.sh .sk-kpi,
html.sh .mini-stat{
  background:var(--surf)!important; color:var(--ink)!important;
  border:1px solid var(--line)!important; border-radius:14px!important;
  box-shadow:0 1px 2px rgba(7,26,58,.04)!important;
  padding:16px 18px!important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
html.sh a.sk-kpi:hover,
html.sh .sk-an__tile:hover{ border-color:#C9DAFF!important; box-shadow:0 8px 22px -16px rgba(20,87,255,.45)!important }
html.sh .mini-stat .card-body{ padding:0!important; background:transparent!important }
html.sh .mini-stat .mb-4{ margin-bottom:0!important }
html.sh .mini-stat .mini-stat-img{ display:none!important }   /* صوره PNG قديمه — ملهاش لازمه */

/* العنوان */
html.sh .sk-an__l,
html.sh .sk-kpi-lbl,
html.sh .sk-stat__label,
html.sh .mini-stat h5,
html.sh .card-box > p.text-muted,
html.sh .sk-wh__q span{
  font-family:var(--f-ui)!important;
  font-size:13px!important; font-weight:500!important; line-height:1.4!important;
  letter-spacing:0!important; text-transform:none!important;
  color:var(--mist)!important; margin:0 0 8px!important; opacity:1!important;
}
/* الرقم */
html.sh .sk-an__v,
html.sh .sk-kpi-val,
html.sh .sk-stat__num,
html.sh .mini-stat h4,
html.sh .card-box > h3,
html.sh .card-box h3,
html.sh .sk-wh__q b{
  font-family:var(--f-num)!important;
  font-size:26px!important; font-weight:600!important; line-height:1.15!important;
  letter-spacing:-.02em!important; color:var(--ink)!important;
  font-variant-numeric:tabular-nums; margin:0!important;
}
/* العمله والوحده */
html.sh .sk-an__v small,
html.sh .sk-kpi-val > span,
html.sh .sk-stat__unit,
html.sh .mini-stat .sk-cur,
html.sh .card-box h3 small,
html.sh .card-box h3 span:not([data-plugin]){
  font-family:var(--f-ui)!important;
  font-size:13px!important; font-weight:500!important; letter-spacing:0!important;
  color:var(--sharks-gray)!important; margin-inline-start:4px!important; vertical-align:baseline;
}
/* السطر الصغير تحت الرقم */
html.sh .sk-an__d,
html.sh .sk-kpi-sub,
html.sh .sk-stat__foot,
html.sh .mini-stat small:not(.sk-cur){
  display:block; margin-top:8px!important;
  font-size:12.5px!important; font-weight:400!important; line-height:1.5!important;
  color:var(--mist)!important; letter-spacing:0!important; text-transform:none!important;
}
/* الألوان الدلاليه فى الرقم بتفضل (نجاح/تحذير/خطأ) — بس أهدى */
html.sh .card-box h3.text-success,html.sh .sk-an__v.is-ok{ color:var(--ok-tx)!important }
html.sh .card-box h3.text-danger,html.sh .sk-an__v.is-err{ color:var(--err-tx)!important }
html.sh .card-box h3.text-warning{ color:var(--warn-tx)!important }
/* الشريط الرمادى اللى ورا صف الكروت فى الأدمن — مالوش لازمه */

/* صف كروت الداشبورد: كروت منفصله بمسافه — مش جوّه إطار تانى (كان حد مزدوج) */
html.sh .sk-kpis{ gap:12px!important; border:0!important; background:transparent!important; border-radius:0!important; overflow:visible!important }
html.sh .sk-kpi{ gap:0!important }
html.sh .sk-kpi-sub{ display:flex!important; flex-wrap:wrap; align-items:center; gap:4px }
html.sh .sk-kpi-sub .sk-delta{ font-size:11.5px!important; font-weight:600!important }
html.sh .mini-stat h4 .sk-cur{ display:inline!important }
/* كروت .mini-stat قاعده جوّه صف ملفوف بكارت — نشيل الإطار الخارجى */
html.sh .card:has(> .card-body > .row > [class*="col"] > .mini-stat),
html.sh .card-body:has(> .row > [class*="col"] > .mini-stat){ background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important }
/* sharks-core بيعمل الصف شبكه بفجوه ١px وخلفية حد (إطار رمادى) — كروت منفصله بدل كده */
html.sh .row:has(> [class*="col-"] > .mini-stat){ gap:12px!important; background:transparent!important; border:0!important; border-radius:0!important; overflow:visible!important }
html.sh .card.mini-stat{ margin:0!important }

/* المسوّق: زرار طىّ القايمه كان فوق اللوجو فى العربى — بقى جنبه فى نفس الصف */
html.sh .sidebar-wrapper .logo-wrapper{ gap:10px; justify-content:space-between; padding-inline:20px 14px!important }
html.sh .sidebar-wrapper .logo-wrapper .toggle-sidebar{ position:static!important; inset:auto!important; transform:none!important; margin:0!important; flex:none }
html.sh .sidebar-wrapper .logo-wrapper .back-btn{ position:static!important; flex:none }

/* صفوف الكروت: عرض أدنى ١٩٠ بكسل — ٩ كروت فى صف كانت بتكسّر العنوان ٣ سطور */
html.sh .sk-an__tiles{ grid-template-columns:repeat(auto-fill, minmax(190px, 1fr))!important; gap:12px!important }
@media (min-width:1200px){ html.sh .sk-home__tiles{ grid-template-columns:repeat(6, minmax(0,1fr))!important } }
html.sh .sk-an__tile{ display:flex!important; flex-direction:column; justify-content:flex-start; min-height:112px }

/* التقويم (jQuery UI) — نفس شكل الأدمن (sharks-core.css) فى كل لوحات شاركس. المالك 2026-10-22 «صلحه»:
   • كان بيبان شفاف: بياخد z-index:1 من الخانه فصفوف الجدول بتترسم فوقه. jQuery UI بيكتب
     z-index فى الـstyle ← لازم !important. ١٠٦٠ = فوق المودال (١٠٥٠) عشان يشتغل جوّه البوب أب.
   • المخزن بيدّى كل خانات الجداول padding:12px — الأيام كانت بتطلع برّه الصندوق.
   • ثيم ٢٠١٥ (هيدر برتقالى) صوره بترجع 404 — حتى أسهم الشهر اللى فات/الجاى كانت مش باينه. */
html.sh #ui-datepicker-div{
  z-index:1060!important; width:auto!important; padding:6px!important;
  background:var(--sharks-white)!important; border:1px solid var(--sharks-border)!important; border-radius:12px!important;
  box-shadow:0 12px 32px rgba(7,26,58,.14)!important; font-size:13px!important;
}
html.sh #ui-datepicker-div,
html.sh #ui-datepicker-div .ui-widget-header, html.sh #ui-datepicker-div .ui-state-default{ background-image:none!important }
html.sh #ui-datepicker-div .ui-datepicker-header{ background:transparent!important; border:0!important; color:var(--sharks-navy)!important; font-weight:700 }
html.sh #ui-datepicker-div .ui-datepicker-title{ color:var(--sharks-navy)!important }
html.sh #ui-datepicker-div .ui-datepicker-prev, html.sh #ui-datepicker-div .ui-datepicker-next{
  background:transparent!important; border:0!important; border-radius:8px!important; cursor:pointer; top:2px!important;
}
html.sh #ui-datepicker-div .ui-datepicker-prev:hover, html.sh #ui-datepicker-div .ui-datepicker-next:hover{ background:var(--sharks-muted-bg)!important }
html.sh #ui-datepicker-div .ui-datepicker-prev span, html.sh #ui-datepicker-div .ui-datepicker-next span{
  background:none!important; inline-size:8px!important; block-size:8px!important; margin:-4px 0 0 -4px!important;
  border:solid var(--sharks-navy); border-width:0 0 2px 2px; transform:rotate(45deg);
}
html.sh #ui-datepicker-div .ui-datepicker-next span{ transform:rotate(-135deg) }
html.sh #ui-datepicker-div.ui-datepicker-rtl .ui-datepicker-prev span{ transform:rotate(-135deg) }
html.sh #ui-datepicker-div.ui-datepicker-rtl .ui-datepicker-next span{ transform:rotate(45deg) }
html.sh #ui-datepicker-div table{ margin:0!important; width:100%!important }
html.sh #ui-datepicker-div th{ padding:.6em .25em!important; border:0!important; background:none!important; color:var(--sharks-text-muted)!important; font-size:11px!important; font-weight:700; text-transform:none!important; letter-spacing:.02em!important }
html.sh #ui-datepicker-div td{ padding:1px!important; border:0!important; background:none!important }
html.sh #ui-datepicker-div td a, html.sh #ui-datepicker-div td span{
  background:transparent!important; border:0!important; border-radius:6px!important;
  color:var(--sharks-text-secondary)!important; text-align:center!important; padding:.35em .45em!important; font-variant-numeric:tabular-nums;
}
html.sh #ui-datepicker-div td a:hover{ background:var(--sharks-muted-bg)!important; color:var(--sharks-navy)!important }
html.sh #ui-datepicker-div td .ui-state-highlight{ background:var(--sharks-soft)!important; color:var(--sharks-primary)!important; font-weight:700 }
html.sh #ui-datepicker-div td .ui-state-active, html.sh #ui-datepicker-div td a.ui-state-active{ background:var(--sharks-primary)!important; color:#fff!important }
html.sh #ui-datepicker-div td.ui-datepicker-unselectable span{ color:var(--sharks-gray)!important; opacity:.55 }

/* ★ 2026-10-22 — السيستم كله بيفتح بحجم ٩٠٪ على الكمبيوتر (المالك: «أى حاجه فى السيستم تفتح على ٩٠»).
   ‎zoom‎ على ‎html‎ = نفس زووم ٩٠٪ فى المتصفح. الشاشه بس (الطباعه ١٠٠٪) والموبايل زى ما هو.
   ⚠️ جوّه الزووم ‎100vh‎ بيبقى ٩٠٪ من الشاشه — اللى محتاج طول الشاشه بيتقسم على .9 */
@media screen and (min-width: 1024px){
  html{ zoom:.9 }
  html.sh.mk body .mk-app, html.sh.mk body .mk-stage{ min-height:calc(100dvh / .9) }
  html.sh.mk body .mk-side{ height:calc(100dvh / .9 - var(--mk-gap) * 2) }
  html.sh.hx body #wrapper .content-page{ min-height:calc(100vh / .9 - var(--h-topbar))!important }
  html.sh.hx body .content-body{ min-height:calc(100vh / .9 - var(--h-top-wh))!important }
}