/* ══════════════════════════════════════════════════════════════════════
   Zemam — طبقة الهويّه (دليل هويّة Zemam · المالك 2026-09-29)
   ──────────────────────────────────────────────────────────────────────
   بتتحمّل **آخر حاجه** فى بوّابة العميل (brand/layouts/app) وفى اللاند
   وصفحات الدخول (fulfillment/layouts/shell)، وكلها تحت ‎html.zm‎ — فمفيش
   ولا سطر هنا بيلمس لوحات شاركس.

   الفكره: مابنكتبش كومبوننتس تانيه. التوكنز المشتركه (sharks-tokens.css)
   هى اللى بترسم كل حاجه، فإحنا بنغيّر **قيمها** بس:
     الأسطح والنصوص والحدود والأكسنت والخط ونصف القطر والحالات.
   وبعدين لمسات شكل قليله على هيكل البوّابه (السايدبار والشريط والكروت)
   على طريقة الواجهات النضيفه: سايدبار أبيض، البند المختار رملى هادى
   بشريط كراميل، كروت بيضا بحد رفيع، زرار أساسى Slate.

   ⚠️ ‎html.zm‎ (0,1,1) أقوى من ‎:root‎ (0,1,0) على نفس العنصر — فالتوكنز
      المشتقّه (‎--ind: var(--accent)‎) بتتحسب بقيمنا. والوضع الغامق
      ‎:root[data-theme=dark]‎ (0,2,0) لسه بيغلب — فبنظبطه تحت لوحده.

   الألوان (مايتضافش غيرها):
     Sand #D4B48C · Caramel #B58963 · Slate #2F3A44 · Off-white #F8F6F2
     Green #2E7D59 (نجاح/اتسلّم بس) · Border #E8E5DF · Muted #F3F1ED
     Muted text #667085 · Secondary text #475467 · Info #3B82F6
     Warning #F59E0B · Error #D92D20
   ══════════════════════════════════════════════════════════════════════ */

@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.zm{
  --zemam-primary:#D4B48C;
  --zemam-secondary:#B58963;
  --zemam-slate:#2F3A44;
  --zemam-bg:#F8F6F2;
  --zemam-success:#2E7D59;
  --zemam-white:#FFFFFF;
  --zemam-border:#E8E5DF;
  --zemam-muted-bg:#F3F1ED;
  --zemam-text-muted:#667085;
  --zemam-text-2:#475467;
  --zemam-info:#3B82F6;
  --zemam-warning:#F59E0B;
  --zemam-error:#D92D20;
  --zemam-sand-soft:#F3E8DA;   /* البند المختار */
  --zemam-sand-row:#F6EEE5;    /* الصف المختار */
  --zemam-hover-row:#FAFAF8;

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

  /* النصوص — Slate مكان الأسود */
  --ink  :#2F3A44;
  --slate:#475467;
  --mist :#667085;

  /* الحدود */
  --line :#E8E5DF;
  --line2:#D0D5DD;
  --sep  :#E8E5DF;

  /* الزرار الأساسى — Slate */
  --solid   :#2F3A44;
  --solid-tx:#FFFFFF;
  --solid-hv:#3E4A55;

  /* الأكسنت: الحاله النشطه والروابط. Slate للنص/التعبئه (تباين عالى)،
     والخلفيات الخفيفه رمليه — الرملى مايتكتبش عليه نص صغير على أبيض. */
  --accent-l:#2F3A44;  --accent-rgb-l:47,58,68;
  --accent2-l:#B58963; --accent-tx-l:#FFFFFF;
  --accent-d:#D4B48C;  --accent-rgb-d:212,180,140;
  --accent2-d:#E2C7A4; --accent-tx-d:#2F3A44;
  --accent-soft :#F3E8DA;
  --accent-soft2:#EADBC6;
  --accent-line :rgba(181,137,99,.45);
  --accent-ring :rgba(181,137,99,.28);

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

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

  /* الخطوط — Inter للإنجليزى و IBM Plex Sans Arabic للعربى */
  --f-ui :'Inter','IBM Plex Sans Arabic',Arial,sans-serif;
  --f-num:'Inter',Arial,sans-serif;

  /* الحالات */
  --ok  :#2E7D59;  --ok-bg  :#ECFDF3;  --ok-br  :rgba(46,125,89,.24);  --ok-tx  :#027A48;
  --err :#D92D20;  --err-bg :#FEF3F2;  --err-br :rgba(217,45,32,.24);  --err-tx :#B42318;
  --warn:#F59E0B;  --warn-bg:#FFFAEB;  --warn-br:rgba(245,158,11,.30); --warn-tx:#B54708;
  --info:#3B82F6;
  --ok-fill:#2E7D59; --err-fill:#D92D20; --warn-fill:#B54708; --info-fill:#2563EB;

  /* السايدبار (sharks-identity §14) */
  --side-on-bg :#F3E8DA;
  --side-on-ink:#2F3A44;
  --side-on-bar:#B58963;
  --side-mut   :#98A2B3;

  /* لون البراند — config/sharks.php بيحقنه، ده احتياطى */
  --brand-primary:var(--brand-primary-cfg, #2F3A44);
  --brand-hover  :var(--brand-hover-cfg,   #3E4A55);
  --brand-subtle :var(--brand-subtle-cfg,  #F3E8DA);
}

/* العربى: IBM Plex الأول عشان الأرقام والحروف الإنجليزى تيجى من Inter برضه */
html.zm[dir="rtl"]{
  --f-ui:'IBM Plex Sans Arabic','Inter','Noto Sans Arabic',Arial,sans-serif;
}

/* ═══════════════════  ٢) الوضع الغامق (اختيار المستخدم)  ═══════════ */
html.zm[data-theme="dark"]{
  --accent:#D4B48C; --accent-2:#E2C7A4; --accent-rgb:212,180,140; --accent-tx:#2F3A44;
  --accent-soft:rgba(212,180,140,.12); --accent-soft2:rgba(212,180,140,.22);
  --accent-line:rgba(212,180,140,.34); --accent-ring:rgba(212,180,140,.30);
  --ind:#D4B48C; --ind-fill:#D4B48C; --ind-fill-tx:#2F3A44;
  --side-on-bg:rgba(212,180,140,.14); --side-on-ink:#F8F6F2; --side-on-bar:#D4B48C;
  --solid:#D4B48C; --solid-tx:#2F3A44; --solid-hv:#E2C7A4;
}
@media (prefers-color-scheme: dark){
  html.zm:not([data-theme="light"]):not([data-theme="dark"]){
    --accent:#D4B48C; --accent-2:#E2C7A4; --accent-rgb:212,180,140; --accent-tx:#2F3A44;
    --ind:#D4B48C; --ind-fill:#D4B48C; --ind-fill-tx:#2F3A44;
    --side-on-bg:rgba(212,180,140,.14); --side-on-ink:#F8F6F2; --side-on-bar:#D4B48C;
    --solid:#D4B48C; --solid-tx:#2F3A44; --solid-hv:#E2C7A4;
  }
}

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

html.zm h1,html.zm h2,html.zm h3,html.zm h4,html.zm h5,html.zm h6,
html.zm .page-title,html.zm .header-title,html.zm .card-title{
  color:var(--ink)!important; font-weight:600!important; letter-spacing:-.01em;
}
/* عناوين الصفحات جوّه البوّابه مش ضخمه — كثافه معلومات */
html.zm .page-title,html.zm .content h4.page-title{ font-size:20px!important }
html.zm .header-title{ font-size:16px!important }

/* :where = صفر وزن — أى كلاس (زرار، بادج) بيغلبه، فالزرار الغامق يفضل نصّه أبيض */
:where(html.zm) a{ color:var(--ink) }
:where(html.zm) a:hover{ color:var(--zemam-secondary) }

/* الأرقام: جدوليه ومعزوله عن اتجاه الجمله */
html.zm .sk-num,html.zm .sk-stat__num,html.zm td.num,html.zm .ff-num{
  font-variant-numeric:tabular-nums;
}

/* فوكس واضح على كل حاجه بتتضغط */
html.zm :focus-visible{ outline:2px solid var(--zemam-secondary); outline-offset:2px }

/* ═══════════════════  ٤) السايدبار — أبيض، مختصر، البند المختار رملى  ═══ */
html.zm .left-side-menu{
  background:var(--surf)!important;
  border-inline-end:1px solid var(--line)!important;
  box-shadow:none!important;
}
html.zm .left-side-menu .user-box{
  border-bottom:1px solid var(--line)!important;
  padding:var(--sp-4) var(--sp-3)!important;
}
html.zm #sidebar-menu > ul > li > a,
html.zm #sidebar-menu ul li > a{
  color:var(--slate)!important;
  border-radius:var(--r-sm)!important;
  margin:2px 10px!important;
  padding:9px 12px!important;
  font-size:14px!important;
  font-weight:500!important;
  display:flex!important; align-items:center; gap:10px;
}
html.zm #sidebar-menu ul li > a:hover{
  background:var(--zemam-muted-bg)!important;
  color:var(--ink)!important;
}
html.zm #sidebar-menu ul li > a svg,
html.zm #sidebar-menu ul li > a i{ color:var(--mist)!important; stroke:currentColor }
html.zm #sidebar-menu ul li.mm-active > a svg,
html.zm #sidebar-menu ul li.active > a svg,
html.zm #sidebar-menu ul li > a.active svg{ color:var(--zemam-secondary)!important }
html.zm #sidebar-menu ul li > a.active,
html.zm #sidebar-menu ul li.mm-active > a,
html.zm #sidebar-menu ul li.active > a{
  /* الخلفيه شفافه — «اللمبه» والشعاع من sharks-limelight.css هم اللى بيعلّموا البند */
  background:transparent!important;
  color:var(--side-on-ink)!important;
  font-weight:600!important;
}
html.zm .menu-title{
  color:var(--side-mut)!important;
  font-size:11px!important;
  letter-spacing:.06em!important;
  padding:16px 22px 6px!important;
}
html.zm[dir="rtl"] .menu-title{ letter-spacing:0!important; text-transform:none!important }

/* ═══════════════════  ٥) الشريط العلوى + اللوجو  ═══════════════════ */
html.zm .navbar-custom{
  background:var(--surf)!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:none!important;
}
html.zm .logo-box{
  background:var(--surf)!important;
  border-inline-end:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
html.zm .logo-box .logo img{ display:inline-block; vertical-align:middle }
html.zm .logo-box .logo-lg img{ max-height:36px!important; max-width:170px!important }
html.zm .logo-box .logo-sm img{ max-height:30px!important; width:auto }
/* لوجو الوضع الغامق (نص فاتح) — القالب بيبدّل logo-dark/logo-light لوحده */
html.zm[data-theme="dark"] .logo-box .logo-dark{ display:none!important }
html.zm[data-theme="dark"] .logo-box .logo-light{ display:block!important }
html.zm:not([data-theme="dark"]) .logo-box .logo-light{ display:none!important }
html.zm:not([data-theme="dark"]) .logo-box .logo-dark{ display:block!important }

/* ═══════════════════  ٦) الكروت  ════════════════════════════════════ */
html.zm .card,
html.zm .card-box{
  background:var(--surf)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--r)!important;
  box-shadow:var(--sh-card)!important;
}
html.zm .card-header{
  background:transparent!important;
  border-bottom:1px solid var(--line)!important;
}
/* كروت الأرقام (KPI) — رقم كبير هادى تحت عنوان صغير */
html.zm .sk-stat__num,
html.zm .card-box > h3,
html.zm .card-box h3{
  font-size:26px!important; font-weight:600!important; color:var(--ink);
  letter-spacing:-.02em;
}
html.zm .card-box h3.text-success{ color:var(--zemam-success)!important }
html.zm .card-box h3.text-warning{ color:var(--zemam-secondary)!important }
html.zm .card-box h3.text-info{ color:var(--ink)!important }

/* ═══════════════════  ٧) الأزرار  ═══════════════════════════════════ */
html.zm .btn{
  border-radius:var(--r-btn)!important;
  font-weight:500!important;
  box-shadow:none!important;
}
html.zm .btn-primary{
  background:var(--zemam-slate)!important; border-color:var(--zemam-slate)!important; color:#fff!important;
}
html.zm .btn-primary:hover,html.zm .btn-primary:focus{
  background:#3E4A55!important; border-color:#3E4A55!important;
}
/* زرار الهويّه التانوى — رملى بنص Slate */
html.zm .btn-brand,html.zm .btn-warning{
  background:var(--zemam-primary)!important; border-color:var(--zemam-primary)!important; color:var(--zemam-slate)!important;
}
html.zm .btn-brand:hover,html.zm .btn-warning:hover{ background:#C5A477!important; border-color:#C5A477!important }
html.zm .btn-secondary,html.zm .btn-light,html.zm .btn-outline-secondary{
  background:#fff!important; border:1px solid #D0D5DD!important; color:#344054!important;
}
html.zm .btn-secondary:hover,html.zm .btn-light:hover,html.zm .btn-outline-secondary:hover{ background:var(--zemam-muted-bg)!important }
html.zm .btn-success{ background:var(--zemam-success)!important; border-color:var(--zemam-success)!important; color:#fff!important }
html.zm .btn-danger{ background:var(--zemam-error)!important; border-color:var(--zemam-error)!important; color:#fff!important }
html.zm .btn-info{ background:#fff!important; border:1px solid #D0D5DD!important; color:var(--zemam-slate)!important }

/* ═══════════════════  ٨) الحقول  ════════════════════════════════════ */
html.zm .form-control,
html.zm .custom-select,
html.zm select.form-control{
  min-height:40px;
  background:#fff!important;
  border:1px solid #D0D5DD!important;
  border-radius:var(--r-btn)!important;
  color:var(--ink)!important;
  box-shadow:none!important;
}
html.zm .form-control:focus,
html.zm .custom-select:focus{
  border-color:var(--zemam-secondary)!important;
  box-shadow:0 0 0 3px rgba(181,137,99,.16)!important;
}
html.zm label,html.zm .col-form-label{ color:var(--ink); font-weight:500 }

/* ═══════════════════  ٩) الجداول  ═══════════════════════════════════ */
html.zm .table{ color:var(--ink)!important; background:#fff }
html.zm .table thead th{
  background:#FCFBF9!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.zm .table td,html.zm .table th{ border-color:var(--line)!important; vertical-align:middle }
html.zm .table-striped tbody tr:nth-of-type(odd){ background:transparent!important }
html.zm .table tbody tr:hover{ background:var(--zemam-hover-row)!important }
html.zm .table tbody tr.selected,html.zm .table tbody tr.is-selected{ background:var(--zemam-sand-row)!important }

/* ═══════════════════  ١٠) الشارات — خلفيه هاديه ونص واضح  ════════════ */
html.zm .badge{
  border-radius:999px!important;
  padding:4px 8px!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.2;
}
html.zm .badge-success{ background:#ECFDF3!important; color:#027A48!important }
html.zm .badge-danger { background:#FEF3F2!important; color:#B42318!important }
html.zm .badge-warning{ background:#F6EEE5!important; color:#8A5A2B!important }
html.zm .badge-info,html.zm .badge-primary{ background:#EFF6FF!important; color:#1D4ED8!important }
html.zm .badge-secondary,html.zm .badge-light{ background:var(--zemam-muted-bg)!important; color:var(--slate)!important }

/* التنبيهات */
html.zm .alert{ border-radius:var(--r-sm)!important; border-width:1px!important }
html.zm .alert-success{ background:#ECFDF3!important; border-color:rgba(46,125,89,.24)!important; color:#05603A!important }
html.zm .alert-danger { background:#FEF3F2!important; border-color:rgba(217,45,32,.24)!important; color:#912018!important }
html.zm .alert-warning{ background:#FFFAEB!important; border-color:rgba(245,158,11,.30)!important; color:#93370D!important }
html.zm .alert-info   { background:#F8F6F2!important; border-color:var(--line)!important; color:var(--ink)!important }

/* الفوتر */
html.zm .footer{
  background:transparent!important;
  border-top:1px solid var(--line)!important;
  color:var(--mist)!important;
  font-size:13px;
}
html.zm .footer a{ color:var(--slate) }

/* الصفحات والترقيم */
html.zm .page-item.active .page-link{ background:var(--zemam-slate)!important; border-color:var(--zemam-slate)!important; color:#fff!important }
html.zm .page-link{ color:var(--ink)!important; border-color:var(--line)!important; border-radius:var(--r-sm)!important; margin:0 2px }

/* أيقونات Lucide (App\Support\ZemamIcon) — الاتجاهيه بتتقلب فى العربى */
html.zm .zi-svg{ flex:none; vertical-align:middle }
html.zm[dir="rtl"] .zi-mirror{ transform:scaleX(-1) }

/* ═══════════════════  ١١) الشريط العلوى — أيقونات مرتّبه (المالك 2026-09-29)  ═══
   كانت أربع تحكّمات كل واحد مبنى بطريقه (زرار · بارشال · لينك · قايمة الحساب)
   ومفيش ستايل بيجمعهم فى البوّابه دى — فكانوا طالعين فوق ومتلخبطين.
   دلوقتى: كل أيقونه زرار ٤٠×٤٠ فى نص الشريط بالظبط، نفس المقاس والبُعد،
   باهته لحد ما تقف عليها، والحساب «كبسوله» فيها الصوره والاسم. */
html.zm .navbar-custom{ height:70px; padding-inline:16px 12px!important }
html.zm .navbar-custom > .container-fluid{ display:flex; align-items:center; height:100%; padding:0 }
html.zm .navbar-custom .topnav-menu{
  display:flex!important; align-items:center; gap:4px; height:70px; margin:0!important; order:2;
  margin-inline-start:auto!important;
}
html.zm .navbar-custom .topnav-menu-left{ order:1; display:flex!important; align-items:center; height:70px; margin:0!important; margin-inline-start:8px!important }
html.zm .navbar-custom .topnav-menu-left .navbar-toggle,
html.zm .navbar-custom > .container-fluid > .clearfix{ display:none!important }
html.zm .navbar-custom .topnav-menu > li{
  display:flex!important; align-items:center; height:70px; float:none!important; margin:0!important;
}
/* الغلاف بتاع اللغه/المظهر بيفضل صف واحد جوّه البند */
html.zm .sk-tbcs{ display:flex; align-items:center; gap:4px }

/* الأزرار الأيقونيه — شكل واحد */
html.zm #skTheme,
html.zm .sk-tbc__btn,
html.zm .navbar-custom .topnav-menu > li > a.nav-link:not(.nav-user),
html.zm .button-menu-mobile{
  display:inline-flex!important; align-items:center; justify-content:center; gap:4px;
  min-inline-size:40px; 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.zm #skTheme:hover, html.zm .sk-tbc__btn:hover,
html.zm .navbar-custom .topnav-menu > li > a.nav-link:not(.nav-user):hover,
html.zm .button-menu-mobile:hover{ background:var(--zemam-muted-bg)!important; color:var(--ink)!important }
html.zm #skTheme svg, html.zm .sk-tbc__btn svg,
html.zm .navbar-custom .topnav-menu > li > a.nav-link:not(.nav-user) svg,
html.zm .button-menu-mobile svg{ width:20px!important; height:20px!important; opacity:.8 }
html.zm .sk-tbc__code{ font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--slate) }
/* أيقونة القمر/الشمس: واحده بس ظاهره */
html.zm:not([data-theme="dark"]) #skTheme .sk-sun{ display:none }
html.zm[data-theme="dark"] #skTheme .sk-moon{ display:none }

/* فاصل رفيع قبل الحساب */
html.zm .navbar-custom .topnav-menu > li.notification-list{
  padding-inline-start:10px; margin-inline-start:6px!important; border-inline-start:1px solid var(--line);
  height:36px!important; align-self:center;
}

/* الحساب — كبسوله */
html.zm .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.zm[dir="rtl"] .navbar-custom .nav-user{ padding:4px 4px 4px 10px!important }
html.zm .navbar-custom .nav-user:hover{ border-color:#D0D5DD!important; background:#FCFBF9!important }
html.zm .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.zm .navbar-custom .nav-user .pro-user-name svg{ width:16px; height:16px; opacity:.6 }
html.zm .navbar-custom .nav-user img,
html.zm .navbar-custom .nav-user .sk-avatar{ inline-size:34px!important; block-size:34px!important; border-radius:50%!important }

/* قايمة الحساب المنسدله */
html.zm .navbar-custom .dropdown-menu{
  border:1px solid var(--line)!important; border-radius:12px!important;
  box-shadow:0 12px 32px rgba(16,24,40,.12)!important; padding:6px!important; margin-top:6px!important;
}
html.zm .navbar-custom .dropdown-item{ border-radius:8px; display:flex; align-items:center; gap:8px; padding:8px 10px }
html.zm .navbar-custom .dropdown-item:hover{ background:var(--zemam-muted-bg) }

/* الموبايل: الاسم بيتشال، الصوره كفايه */
@media (max-width: 767.98px){
  html.zm .navbar-custom .nav-user .pro-user-name{ display:none }
  html.zm .navbar-custom .nav-user{ padding:3px!important; border-color:transparent!important }
  html.zm .navbar-custom .topnav-menu > li.notification-list{ border:0; padding:0; margin:0!important }
}
/* كود اللغه جنب الكوره دايمًا — ماينزلش سطر */
html.zm .sk-tbc__btn{ white-space:nowrap; flex:none }
/* زرار ملء الشاشه للكمبيوتر بس (d-none d-lg-inline-block) — قاعدة الـflex فوق كانت بتظهره */
@media (max-width: 991.98px){
  html.zm .navbar-custom .topnav-menu > li.d-none.d-lg-inline-block{ display:none!important }
  html.zm .navbar-custom .topnav-menu{ gap:0 }
}
/* صورة الحساب بالحروف — رملى بدل لون عشوائى (الأخضر للنجاح بس فى دليل الهويّه) */
html.zm .sk-av--init{ background:var(--zemam-sand-soft)!important; color:var(--zemam-slate)!important; border:1px solid #EADBC6!important }