/* ═══════════════════════════════════════════════════════════════
   برنولي — نظام التصميم المشترك (theme.css)
   ---------------------------------------------------------------
   يُربط قبل <style> الخاص بكل صفحة، فتبقى أنماط الصفحة قادرة
   على تجاوزه عند الحاجة أثناء الترحيل التدريجي.

   الخط المطلوب في <head> كل صفحة (أربعة أوزان فقط):
   Tajawal:wght@400;500;700;800
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   1 — الرموز (Design Tokens)
   ═══════════════════════════════════════ */
:root{
  /* ── سلّم اللون الأساسي (تركوازي) ── */
  --teal-50:#f0fdfa;
  --teal-100:#ccfbf1;
  --teal-200:#99f6e4;
  --teal-300:#5eead4;
  --teal-400:#2dd4bf;
  --teal-500:#14b8a6;
  --teal-600:#0d9488;   /* ← اللون الأساسي للنظام */
  --teal-700:#0f766e;
  --teal-800:#115e59;
  --teal-900:#134e4a;

  /* ── الألوان الدلالية ──
     ‏-       : لون الإشارة (نقاط، حدود، أيقونات، تدرّجات)
     ‏-ink    : درجة آمنة للنص فوق الخلفية أو فوق الشارة (AA)
     ‏-fill   : درجة تعبئة الزر، النص عليها أبيض (AA)
     ‏-soft   : خلفية شفافة 12% للشارات والتظليل */
  --primary:#0d9488;  --primary-2:#2dd4bf;  --primary-ink:#5eead4;  --primary-fill:#0f766e;  --primary-soft:rgba(13,148,136,.12);
  --success:#22c55e;  --success-2:#4ade80;  --success-ink:#4ade80;  --success-fill:#15803d;  --success-soft:rgba(34,197,94,.12);
  --warning:#f59e0b;  --warning-2:#fcd34d;  --warning-ink:#fcd34d;  --warning-fill:#b45309;  --warning-soft:rgba(245,158,11,.12);
  --danger:#ef4444;   --danger-2:#fca5a5;   --danger-ink:#fca5a5;   --danger-fill:#b91c1c;   --danger-soft:rgba(239,68,68,.12);
  --info:#0ea5e9;     --info-2:#38bdf8;     --info-ink:#38bdf8;     --info-fill:#0369a1;     --info-soft:rgba(14,165,233,.12);
  --violet:#a78bfa;   --violet-2:#c4b5fd;   --violet-ink:#c4b5fd;   --violet-soft:rgba(167,139,250,.12);
  --whatsapp:#25d366; --whatsapp-soft:rgba(37,211,102,.14);

  /* ── الأسطح والنص (الوضع الداكن هو الافتراضي) ── */
  --bg:#060b14;
  --bg2:#080f1a;
  --bg3:#0d1526;
  --surface:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.07);
  --surface-3:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.14);
  --ink:#e2e8f0;    /* نص أساسي   — 15.98:1 */
  --ink2:#94a3b8;   /* نص ثانوي   —  7.69:1 */
  --ink3:#7488a1;   /* نص خافت    —  5.42:1 */

  /* ── سلّم المسافات ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;

  /* ── سلّم أحجام الخط ── */
  --fs-2xs:9.5px; --fs-xs:10.5px; --fs-sm:11.5px; --fs-base:13px;
  --fs-md:13.5px; --fs-lg:15px; --fs-xl:18px; --fs-2xl:22px; --fs-3xl:28px;

  /* ── أوزان الخط (أربعة فقط) ── */
  --fw-regular:400; --fw-medium:500; --fw-bold:700; --fw-black:800;

  /* ── انحناء الزوايا ── */
  --radius-xs:8px; --radius-sm:10px; --radius-md:12px;
  --radius-lg:16px; --radius-xl:20px; --radius-2xl:24px; --radius-pill:99px;

  /* ── الظلال ── */
  --shadow-sm:0 2px 10px rgba(0,0,0,.25);
  --shadow:0 8px 32px rgba(0,0,0,.4);
  --shadow2:0 20px 60px rgba(0,0,0,.6);
  --shadow-glow:0 0 40px rgba(13,148,136,.18);

  /* ── سلّم z-index الموحّد ── */
  --z-orbs:-1;          /* خلف المحتوى: .shell لم تعد تنشئ طبقة مستقلة */
  --z-content:1;
  --z-topbar:100;
  --z-popover:300;      /* قائمة منسدلة/درج إشعارات معلّق بالشريط العلوي */
  --z-bottomnav:400;
  --z-scrim:900;
  --z-sidebar:1000;
  --z-drawer:1500;
  --z-modal:2000;
  --z-menu:2500;
  --z-toast:3000;

  /* ── التخطيط ── */
  --sb-w:260px;
  --hh:60px;
  --tap:44px;                                     /* أدنى مساحة لمس */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);

  /* ── الحركة ── */
  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:.15s; --dur:.25s; --dur-slow:.35s;

  /* ═══ أسماء قديمة مُبقاة كمرادفات ═══
     الصفحات غير المُرحَّلة تستعملها، فحذفها يكسرها.
     تبديل اللون الأساسي أعلاه يسري عليها تلقائياً. */
  --p:var(--primary);      --p2:var(--primary-2);  --p3:var(--primary-soft);
  --g:var(--success);      --g2:var(--success-2);  --g3:var(--success-soft);
  --am:var(--warning);     --am2:var(--warning-2); --am3:var(--warning-soft);
  --re:var(--danger);      --re2:var(--danger-2);  --re3:var(--danger-soft);
  --vi:var(--violet);      --vi2:var(--violet-2);  --te:var(--primary-2);
  --wa:var(--whatsapp);
  --glass:var(--surface);  --glass2:var(--surface-2);
  --gb:var(--border);      --gb2:var(--border-2);  --gb3:var(--surface-3);
  --r:var(--radius-lg);    --r2:var(--radius-xl);  --r3:var(--radius-md);
  /* M-3: صفحات عدّة تستعمل ‎--safe-t/--safe-b‎ وأخرى ‎--safe-top/--safe-bottom‎.
     تعريف الأربعة هنا يُصلح ‎calc()‎ المكسورة في كل الصفحات مرة واحدة. */
  --safe-t:var(--safe-top);
  --safe-b:var(--safe-bottom);
}

/* ═══════════════════════════════════════
   2 — الوضع الفاتح
   المفتاح المستعمل في localStorage هو bernoulli2-theme
   والسمة توضع على عنصر <html> كـ data-theme="light|dark"
   ═══════════════════════════════════════ */
[data-theme=light]{
  --bg:#f0f4f8;
  --bg2:#e2eaf3;
  --bg3:#dce6f0;
  --surface:rgba(255,255,255,.75);
  --surface-2:rgba(255,255,255,.95);
  --surface-3:rgba(0,0,0,.03);
  --border:rgba(0,0,0,.08);
  --border-2:rgba(0,0,0,.12);
  --ink:#0f172a;    /* 16.15:1 */
  --ink2:#334155;   /*  9.37:1 */
  --ink3:#5b6b80;   /*  4.92:1 */

  /* درجات النص والتعبئة تُعتِم في الوضع الفاتح حفاظاً على AA */
  --primary-ink:#0f766e;  --primary-fill:#0f766e;
  --success-ink:#166534;  --success-fill:#166534;
  --warning-ink:#92400e;  --warning-fill:#92400e;
  --danger-ink:#b91c1c;   --danger-fill:#b91c1c;
  --info-ink:#075985;     --info-fill:#075985;
  --violet-ink:#6d28d9;
  --whatsapp:#0f7038;

  --shadow-sm:0 2px 8px rgba(0,0,0,.05);
  --shadow:0 4px 24px rgba(0,0,0,.08);
  --shadow2:0 16px 48px rgba(0,0,0,.12);
  --shadow-glow:0 0 32px rgba(13,148,136,.12);
}

/* ═══════════════════════════════════════
   3 — الأساس
   ═══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;       /* clip لا hidden: لا ينشئ حاوية تمرير فيبقى position:sticky يعمل */
}

body{
  font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:var(--fw-regular);
  background:var(--bg);
  color:var(--ink);
  min-height:100dvh;
  direction:rtl;
  overflow-x:clip;
  transition:background var(--dur-slow),color var(--dur-slow);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent}
img{max-width:100%}
input,select,textarea{font-family:inherit}

/* الأرقام والتواريخ — تُعزل لتبقى من اليسار لليمين داخل النص العربي */
.mono,.num{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;text-align:start}

/* حقول محتواها لاتيني دائماً: هاتف، بريد، رقم، تاريخ، وقت، رابط */
input[type=tel],input[type=email],input[type=number],
input[type=date],input[type=time],input[type=datetime-local],input[type=url],
input[inputmode=tel],input[inputmode=numeric],input[inputmode=decimal],input[inputmode=email]{
  direction:ltr;
  text-align:start;
}
input[type=tel]::placeholder,input[type=email]::placeholder,
input[inputmode=tel]::placeholder,input[inputmode=email]::placeholder{direction:rtl;text-align:start}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:var(--radius-pill)}

/* حلقة تركيز واضحة لمستخدمي لوحة المفاتيح */
:focus-visible{outline:2px solid var(--primary-2);outline-offset:2px;border-radius:var(--radius-xs)}

/* ═══════════════════════════════════════
   4 — الكرات الضبابية في الخلفية
   مُعطّلة على الهاتف وتحت prefers-reduced-motion
   ═══════════════════════════════════════ */
.bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:var(--z-orbs);overflow:hidden;contain:strict}
.orb{
  position:absolute;border-radius:50%;
  filter:blur(120px);opacity:.1;
  animation:orbFloat 22s ease-in-out infinite alternate;
  will-change:transform;
}
[data-theme=light] .orb{opacity:.05}
.orb1{width:700px;height:700px;background:var(--primary);top:-250px;inset-inline-start:-150px;animation-delay:0s}
.orb2{width:600px;height:600px;background:var(--success);bottom:-200px;inset-inline-end:-150px;animation-delay:-8s}
.orb3{width:400px;height:400px;background:var(--violet);top:45%;inset-inline-end:30%;animation-delay:-16s}
@keyframes orbFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(50px,40px) scale(1.15)}}

@media(max-width:767px){
  .bg-orbs{display:none}
}

/* ═══════════════════════════════════════
   5 — الهيكل
   ═══════════════════════════════════════ */
/* .shell بلا z-index ولا position: أي سياق طبقات هنا يحبس الشريط الجانبي والنوافذ تحت
   الستارة والشريط السفلي (الملحقَين بـ body). السلّم في :root يسري على الكل مباشرة. */
.shell{display:flex;min-height:100dvh;width:100%;overflow-x:clip}
/* يُبطل تعريفات قديمة في الصفحات (z-index أو overflow-x:hidden على .shell) — وزن (0,1,1) */
body .shell{z-index:auto;overflow-x:clip}

.main{
  flex:1;
  display:flex;flex-direction:column;
  min-height:100dvh;
  min-width:0;
  transition:margin-inline-start var(--dur-slow) var(--ease);
}
@media(min-width:768px){.main{margin-inline-start:var(--sb-w)}}

.ct{flex:1;padding:var(--sp-5);max-width:1440px;width:100%;margin:0 auto}
@media(max-width:1024px){.ct{padding:var(--sp-4) var(--sp-3)}}
@media(max-width:767px){.ct{padding:var(--sp-3);padding-bottom:calc(80px + var(--safe-bottom))}}

/* ═══════════════════════════════════════
   6 — الشريط الجانبي (النمط المرجعي من dashboard v3.2)
   ═══════════════════════════════════════ */
.sidebar{
  width:var(--sb-w);
  position:fixed;
  top:0;inset-inline-start:0;bottom:0;
  display:flex;flex-direction:column;
  background:var(--bg);
  border-inline-end:1px solid var(--border);
  z-index:var(--z-sidebar);
  transition:transform var(--dur-slow) var(--ease);
  will-change:transform;
  overflow:hidden;
  -webkit-overflow-scrolling:touch;
}
[data-theme=light] .sidebar{background:#f8fcff;border-inline-end-color:rgba(0,0,0,.08)}

@media(max-width:767px){
  .sidebar{
    width:78%;max-width:300px;
    top:0;bottom:auto;height:100dvh;   /* بارتفاع الشاشة كاملاً فوق الشريط السفلي */
    transform:translateX(100%);
    box-shadow:-20px 0 60px rgba(0,0,0,.5);
  }
  .sidebar.open{transform:translateX(0)}
}
@media(min-width:768px){
  .sidebar{transform:translateX(0)!important}
}

.sb-close{
  display:none;
  position:absolute;
  inset-inline-end:12px;
  top:calc(var(--sp-5) + var(--safe-top));
  width:36px;height:36px;
  border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--border);
  align-items:center;justify-content:center;
  font-size:var(--fs-lg);color:var(--ink2);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  z-index:2;
}
.sb-close:active{background:var(--border-2);transform:scale(.92)}
@media(max-width:767px){.sb-close{display:flex}}

.sb-brand{
  padding:var(--sp-5) var(--sp-4) var(--sp-4);
  display:flex;align-items:center;gap:var(--sp-3);
  border-bottom:1px solid var(--border);
  padding-top:calc(var(--sp-5) + var(--safe-top));
  flex-shrink:0;
}
.sb-logo{
  width:42px;height:42px;
  background:#fff;
  border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
}
.sb-logo img{width:100%;height:100%;object-fit:cover}
.sb-name{font-size:var(--fs-lg);font-weight:var(--fw-black);color:var(--ink);letter-spacing:-.3px}
.sb-ver{font-size:var(--fs-xs);color:var(--ink3);font-family:'JetBrains Mono',monospace;margin-top:2px}

.sb-nav{
  flex:1;
  padding:var(--sp-3) var(--sp-2);
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:1px;
  touch-action:pan-y;
  min-height:0;
}
.sb-sec{
  font-size:var(--fs-2xs);font-weight:var(--fw-black);
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink3);
  padding:var(--sp-3) var(--sp-3) var(--sp-1);
  margin-top:2px;flex-shrink:0;
}
.sb-link{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3);
  border-radius:11px;
  color:var(--ink2);
  font-size:var(--fs-md);font-weight:var(--fw-bold);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
  border:1px solid transparent;
  position:relative;
  -webkit-tap-highlight-color:transparent;
  flex-shrink:0;
  min-height:var(--tap);
}
.sb-link:hover{color:var(--ink);background:var(--surface-2)}
.sb-link:active{background:var(--border-2)}
.sb-link.on{
  color:#fff;
  background:linear-gradient(135deg,rgba(13,148,136,.24),rgba(34,197,94,.14));
  border-color:rgba(13,148,136,.32);
}
[data-theme=light] .sb-link.on{color:var(--primary-ink);background:rgba(13,148,136,.1);border-color:rgba(13,148,136,.22)}
.sb-link .ico{font-size:17px;flex-shrink:0;width:22px;text-align:center;pointer-events:none}
.sb-link .lbl{flex:1;pointer-events:none}

/* شارة العدّاد داخل رابط الشريط الجانبي — الاسمان مدعومان */
.sb-link .cnt,.sb-link .sb-badge{
  font-size:var(--fs-xs);font-weight:var(--fw-black);
  min-width:22px;padding:2px var(--sp-2);
  border-radius:var(--radius-pill);text-align:center;
  background:var(--primary-fill);color:#fff;
  pointer-events:none;flex-shrink:0;
}
.sb-link .cnt.g,.sb-link .sb-badge.g{background:var(--success-fill)}
.sb-link .cnt.re,.sb-link .sb-badge.re{background:var(--danger-fill)}
/* الشارة تظهر فقط برقم أكبر من صفر (shell.js يضبط hidden)، ومخفية أثناء التحميل */
.sb-link .cnt[hidden],.sb-link .cnt.hide,.sb-link .cnt:empty,
.sb-link .sb-badge[hidden],.sb-link .sb-badge:empty{display:none!important}

.sb-user{
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--border);
  display:flex;align-items:center;gap:var(--sp-3);
  padding-bottom:calc(var(--sp-3) + var(--safe-bottom));
  flex-shrink:0;
}
.sb-av{
  width:36px;height:36px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--primary),var(--success));
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-lg);font-weight:var(--fw-black);color:#fff;flex-shrink:0;
}
.sb-uname{font-size:12.5px;font-weight:var(--fw-black);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-urole{font-size:var(--fs-xs);color:var(--ink3);display:inline-flex;align-items:center;gap:var(--sp-1);margin-top:2px}
.sb-out{
  margin-inline-start:auto;
  width:36px;height:36px;
  border-radius:var(--radius-sm);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-lg);transition:var(--dur-fast);flex-shrink:0;
}
.sb-out:hover{background:rgba(239,68,68,.18);color:var(--danger)}

/* ── الطبقة السوداء ── */
#scrim{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:var(--z-scrim);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur) ease,visibility var(--dur) ease;
}
#scrim.visible{opacity:1;visibility:visible}
@media(min-width:768px){#scrim{display:none!important}}

/* قفل التمرير عند فتح الشريط */
body.sidebar-open{overflow:hidden}
@media(min-width:768px){body.sidebar-open{overflow:auto}}

/* ═══════════════════════════════════════
   7 — الشريط العلوي
   ═══════════════════════════════════════ */
.topbar{
  height:calc(var(--hh) + var(--safe-top));
  position:sticky;top:0;
  z-index:var(--z-topbar);
  background:rgba(6,11,20,.75);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
  padding:0 var(--sp-5);
  padding-top:var(--safe-top);
  display:flex;align-items:center;gap:var(--sp-3);
}
[data-theme=light] .topbar{background:rgba(255,255,255,.85);border-bottom-color:rgba(0,0,0,.07)}
@media(max-width:768px){.topbar{padding-inline:var(--sp-3);gap:var(--sp-2)}}

.tb-ham{
  width:42px;height:42px;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--border);
  display:none;align-items:center;justify-content:center;
  font-size:var(--fs-xl);color:var(--ink2);
  transition:var(--dur-fast);flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.tb-ham:hover,.tb-ham.active{background:var(--primary-soft);border-color:rgba(13,148,136,.32);color:var(--primary-ink)}
@media(max-width:767px){.tb-ham{display:flex}}

.tb-btn{
  width:36px;height:36px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--ink2);
  transition:var(--dur-fast);position:relative;flex-shrink:0;
}
.tb-btn:hover{background:var(--primary-soft);border-color:rgba(13,148,136,.32);color:var(--primary-ink)}
.tb-btn.active{background:rgba(13,148,136,.18);border-color:rgba(13,148,136,.36);color:var(--primary-ink)}

.tb-title{font-size:var(--fs-lg);font-weight:var(--fw-black);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* نقطة الإشعار فوق زر الشريط العلوي — الاسمان مدعومان */
.ndot,.notif-dot{
  position:absolute;top:5px;inset-inline-start:5px;
  width:8px;height:8px;
  background:var(--danger);
  border-radius:50%;
  border:2px solid var(--bg);
  display:none;
  animation:notifPulse 2s infinite;
}
.ndot.on,.notif-dot.on{display:block}
@keyframes notifPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 4px rgba(239,68,68,0)}}

.tb-r{display:flex;align-items:center;gap:var(--sp-2);margin-inline-start:auto}
.tb-date{font-size:var(--fs-sm);color:var(--ink3);font-family:'JetBrains Mono',monospace;white-space:nowrap}
@media(max-width:640px){.tb-date{display:none}}

/* ═══════════════════════════════════════
   8 — الشريط السفلي (الهاتف)
   ═══════════════════════════════════════ */
.bottom-nav{
  display:none;
  position:fixed;bottom:0;inset-inline:0;
  background:rgba(6,11,20,.95);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--border);
  z-index:var(--z-bottomnav);
  padding:var(--sp-2) 0;
  padding-bottom:calc(var(--sp-2) + var(--safe-bottom));
  grid-template-columns:repeat(5,1fr);gap:0;
}
[data-theme=light] .bottom-nav{background:rgba(255,255,255,.95)}
@media(max-width:767px){.bottom-nav{display:grid}}
.bn-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:var(--sp-1) var(--sp-1);
  min-height:var(--tap);
  cursor:pointer;color:var(--ink3);
  transition:var(--dur-fast);
  -webkit-tap-highlight-color:transparent;
  font-size:var(--fs-xs);font-weight:var(--fw-bold);
}
.bn-item.on{color:var(--primary-ink)}
.bn-item .bn-ic{font-size:20px;line-height:1}
.bn-item .bn-lbl{font-size:var(--fs-2xs);font-weight:var(--fw-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bn-item{min-width:0}
.bn-more{border:0;background:none;font:inherit}
/* عناصر متساوية العرض في صف واحد لا يلتفّ (عددها يضبطه shell.js: 4 أو 5) */
.bottom-nav{grid-auto-flow:column;grid-auto-columns:1fr}

/* ═══════════════════════════════════════
   9 — الأزرار
   ═══════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:0 var(--sp-4);
  min-height:38px;
  border-radius:11px;
  font-family:'Tajawal',sans-serif;
  font-size:var(--fs-base);font-weight:var(--fw-black);
  color:var(--ink2);
  background:var(--surface-2);
  border:1px solid var(--border-2);
  cursor:pointer;white-space:nowrap;
  transition:transform var(--dur-fast) var(--spring),background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--border-2);color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

.btn-grad,.btn-p{background:linear-gradient(135deg,var(--primary-fill),var(--success-fill));color:#fff;border-color:transparent;box-shadow:0 4px 18px rgba(13,148,136,.3)}
.btn-grad:hover,.btn-p:hover{color:#fff;transform:translateY(-2px);box-shadow:0 8px 26px rgba(13,148,136,.42)}
.btn-g{background:var(--success-soft);color:var(--success-ink);border-color:rgba(34,197,94,.24)}
.btn-g:hover{background:rgba(34,197,94,.2);color:var(--success-ink)}
.btn-re,.btn-danger{background:var(--danger-soft);color:var(--danger-ink);border-color:rgba(239,68,68,.24)}
.btn-re:hover,.btn-danger:hover{background:rgba(239,68,68,.2);color:var(--danger-ink)}
.btn-am{background:var(--warning-soft);color:var(--warning-ink);border-color:rgba(245,158,11,.24)}
.btn-am:hover{background:rgba(245,158,11,.2);color:var(--warning-ink)}
.btn-vi{background:var(--violet-soft);color:var(--violet-ink);border-color:rgba(167,139,250,.24)}
.btn-vi:hover{background:rgba(167,139,250,.2);color:var(--violet-ink)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--ink2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn-wa{background:rgba(37,211,102,.12);color:#25d366;border-color:rgba(37,211,102,.22)}

.btn-sm{min-height:32px;padding:0 var(--sp-3);font-size:var(--fs-sm);border-radius:var(--radius-xs)}
.btn-xs{min-height:28px;padding:0 var(--sp-2);font-size:var(--fs-xs);border-radius:var(--radius-xs)}
.btn-block{width:100%}

/* زر عائم */
.fab{
  position:fixed;
  inset-inline-start:var(--sp-4);   /* = اليمين في rtl */
  bottom:calc(84px + var(--safe-bottom));
  width:56px;height:56px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--primary-fill),var(--success-fill));
  color:#fff;font-size:24px;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(13,148,136,.42);
  z-index:var(--z-bottomnav);
  transition:transform var(--dur-fast) var(--spring);
  -webkit-tap-highlight-color:transparent;
}
.fab:active{transform:scale(.92)}
/* الزر العائم تحت الستارة (سلّم الطبقات)، ويختفي تماماً عند فتح القائمة */
body.sidebar-open .fab,body.sidebar-open #offBadge.float{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:767px){.fab{display:flex}}

/* ═══════════════════════════════════════
   10 — الحقول
   ═══════════════════════════════════════ */
.fg{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.fg>label,.fl{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink2)}

.fi,.tf{
  width:100%;
  min-height:42px;
  background:var(--surface-2);
  border:1px solid var(--border-2);
  border-radius:11px;
  padding:0 var(--sp-3);
  font-family:'Tajawal',sans-serif;
  font-size:var(--fs-md);font-weight:var(--fw-medium);
  color:var(--ink);
  outline:none;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);
}
.fi::placeholder,.tf::placeholder{color:var(--ink3)}
.fi:focus,.tf:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.fi:disabled,.tf:disabled{opacity:.55;cursor:not-allowed}
textarea.fi,textarea.tf{padding:var(--sp-3);min-height:84px;line-height:1.6;resize:vertical}
select.fi,select.tf{cursor:pointer}
.fi[aria-invalid=true],.tf[aria-invalid=true]{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}

/* ═══════════════════════════════════════
   11 — البطاقات واللوحات
   ═══════════════════════════════════════ */
.card,.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  overflow:hidden;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.card:hover,.panel:hover{border-color:var(--border-2)}
.panel-hd,.card-hd{
  padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:var(--sp-3);
}
.panel-title,.card-title{font-size:var(--fs-md);font-weight:var(--fw-black);flex:1;color:var(--ink)}
.panel-link{
  font-size:var(--fs-sm);color:var(--primary-ink);font-weight:var(--fw-bold);
  transition:var(--dur-fast);
  padding:var(--sp-1) var(--sp-3);
  border-radius:var(--radius-xs);
  min-height:32px;display:inline-flex;align-items:center;
}
.panel-link:hover{background:var(--primary-soft)}
.panel-bd,.card-bd{padding:var(--sp-3) var(--sp-4)}
@media(max-width:768px){
  .panel-hd,.card-hd{padding:var(--sp-3) var(--sp-4)}
  .panel-bd,.card-bd{padding:var(--sp-3) var(--sp-4)}
}

/* ═══════════════════════════════════════
   12 — الجداول
   ═══════════════════════════════════════ */
.tpanel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  overflow:hidden;
}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll table{width:100%;border-collapse:collapse;min-width:760px}
.tscroll th{
  position:sticky;top:0;z-index:1;
  background:var(--bg2);
  padding:var(--sp-3) var(--sp-3);
  text-align:start;
  font-size:var(--fs-sm);font-weight:var(--fw-black);
  color:var(--ink2);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.tscroll td{
  padding:var(--sp-3);
  font-size:var(--fs-base);
  color:var(--ink);
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.tscroll tbody tr{transition:background var(--dur-fast)}
.tscroll tbody tr:hover{background:var(--surface-2)}
.tscroll tbody tr:last-child td{border-bottom:0}

/* ═══════════════════════════════════════
   13 — بطاقات الموبايل (بديل الجدول تحت 768px)
   ═══════════════════════════════════════ */
.m-cards{display:none;flex-direction:column;gap:var(--sp-3)}
.m-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--sp-3) var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.mc-top{display:flex;align-items:center;gap:var(--sp-3);justify-content:space-between}
.mc-title{font-size:var(--fs-md);font-weight:var(--fw-black);color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis}
.mc-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-sm)}
.mc-lbl{color:var(--ink3);flex-shrink:0}
.mc-val{color:var(--ink);font-weight:var(--fw-bold);text-align:end;min-width:0}
.mc-foot{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding-top:var(--sp-2);border-top:1px solid var(--border)}
.mc-actions{display:flex;gap:var(--sp-2);margin-inline-start:auto}

@media(max-width:767px){
  .m-cards{display:flex}
  .tpanel.has-cards{display:none}
}

/* ══════════════════════════════════════
   14 — المودال
   التسمية المعتمدة في المشروع:
   .modal-bd    = الطبقة السوداء المغطّية (تظهر بإضافة .show)
   .modal-panel = صندوق الحوار
   .modal-hd / .modal-body / .modal-ft = رأس / متن / ذيل
   ══════════════════════════════════════ */
.modal-bd{
  position:fixed;inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:var(--z-modal);
  display:none;
  align-items:center;justify-content:center;
  padding:var(--sp-4);
}
.modal-bd.show,.modal-bd.open{display:flex}

.modal-panel{
  background:var(--bg2);
  border:1px solid var(--border-2);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow2);
  width:100%;max-width:800px;
  max-height:92dvh;overflow:auto;
  animation:modalIn var(--dur) var(--spring);
}
[data-theme=light] .modal-panel{background:#fff}
@keyframes modalIn{from{opacity:0;transform:scale(.94) translateY(14px)}to{opacity:1;transform:none}}
.modal-panel.wide{max-width:1000px}
.modal-panel.sm{max-width:520px}
.modal-panel.xs{max-width:400px}

.modal-hd{
  padding:var(--sp-5) var(--sp-6) var(--sp-3);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:var(--sp-3);
  position:sticky;top:0;
  background:var(--bg2);
  z-index:5;
  border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;
}
[data-theme=light] .modal-hd{background:#fff}
.modal-title{font-size:var(--fs-xl);font-weight:var(--fw-black);flex:1;min-width:0;color:var(--ink)}
.modal-x{
  width:32px;height:32px;
  border-radius:var(--radius-xs);
  background:var(--surface-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-md);color:var(--ink2);
  cursor:pointer;transition:var(--dur-fast);flex-shrink:0;
}
.modal-x:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

.modal-body{padding:var(--sp-5) var(--sp-6)}

.modal-ft{
  padding:var(--sp-3) var(--sp-6);
  border-top:1px solid var(--border);
  display:flex;gap:var(--sp-2);justify-content:flex-end;
  position:sticky;bottom:0;
  background:var(--bg2);
  border-radius:0 0 var(--radius-2xl) var(--radius-2xl);
  padding-bottom:calc(var(--sp-3) + var(--safe-bottom));
}
[data-theme=light] .modal-ft{background:#fff}

@media(max-width:767px){
  .modal-bd{padding:0;align-items:flex-end}
  /* المُعدِّلات أكثر تخصيصاً من .modal-panel وحدها، فتُذكر صراحةً */
  .modal-panel,
  .modal-panel.wide,
  .modal-panel.sm,
  .modal-panel.xs{
    max-width:100%;width:100%;
    max-height:92dvh;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  }
  .modal-hd{border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--sp-3) var(--sp-5)}
  .modal-ft{border-radius:0;padding:var(--sp-3) var(--sp-4) calc(var(--sp-4) + var(--safe-bottom))}
  .modal-body{padding:var(--sp-3) var(--sp-4)}
}


/* ═══════════════════════════════════════
   15 — التنبيهات
   ═══════════════════════════════════════ */
#toasts{
  position:fixed;
  bottom:calc(var(--sp-5) + var(--safe-bottom));
  inset-inline-start:var(--sp-5);
  z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:var(--sp-2);
  max-width:340px;
  pointer-events:none;
}
#toasts>*{pointer-events:auto}
@media(max-width:480px){#toasts{inset-inline:var(--sp-3);max-width:none;bottom:calc(90px + var(--safe-bottom))}}
/* الزر العائم والتنبيهات صارا على الجهة نفسها (اليمين)،
   فترتفع التنبيهات فوقه بدل أن تختفي خلفه — الزر 84+56=140px */
@media(max-width:767px){#toasts{bottom:calc(148px + var(--safe-bottom))}}

.toast-el,.tst{
  background:rgba(6,11,20,.95);
  border:1px solid var(--border-2);
  border-radius:14px;
  padding:var(--sp-3) var(--sp-3);
  display:flex;align-items:flex-start;gap:var(--sp-3);
  box-shadow:var(--shadow2);
  animation:toastIn var(--dur-slow) var(--spring);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
[data-theme=light] .toast-el,[data-theme=light] .tst{background:rgba(255,255,255,.97)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px) scale(.95)}to{opacity:1;transform:none}}
.toast-el.err,.tst.err{border-inline-start:3px solid var(--danger)}
.toast-el.suc,.tst.suc{border-inline-start:3px solid var(--success)}
.toast-el.wrn,.tst.wrn{border-inline-start:3px solid var(--warning)}
.t-ico{font-size:17px;flex-shrink:0}
.t-title{font-size:var(--fs-base);font-weight:var(--fw-black);color:var(--ink)}
.t-msg{font-size:var(--fs-sm);color:var(--ink2);margin-top:2px;line-height:1.5}
.t-x{
  margin-inline-start:auto;
  font-size:var(--fs-lg);color:var(--ink3);cursor:pointer;
  padding:0 var(--sp-1);
  align-self:flex-start;
}

/* ═══════════════════════════════════════
   16 — الشارات
   ═══════════════════════════════════════ */
.badge{
  display:inline-flex;align-items:center;gap:var(--sp-1);
  padding:3px var(--sp-2);
  border-radius:var(--radius-pill);
  font-size:var(--fs-xs);font-weight:var(--fw-black);
  white-space:nowrap;
  background:var(--surface-2);color:var(--ink2);
  border:1px solid transparent;
}
.badge-primary{background:var(--primary-soft);color:var(--primary-ink)}
.badge-success{background:var(--success-soft);color:var(--success-ink)}
.badge-warning{background:var(--warning-soft);color:var(--warning-ink)}
.badge-danger{background:var(--danger-soft);color:var(--danger-ink)}
.badge-info{background:var(--info-soft);color:var(--info-ink)}
.badge-violet{background:var(--violet-soft);color:var(--violet-ink)}

/* ═══════════════════════════════════════
   17 — حالة الفراغ
   ═══════════════════════════════════════ */
.empty{text-align:center;padding:var(--sp-7) var(--sp-4);color:var(--ink3)}
.empty-ic{font-size:2.2rem;margin-bottom:var(--sp-2);opacity:.6}
.empty-t{font-size:var(--fs-base);font-weight:var(--fw-black);color:var(--ink2)}
.empty-s{font-size:var(--fs-sm);margin-top:var(--sp-1)}

/* ═══════════════════════════════════════
   18 — هيكل التحميل
   ═══════════════════════════════════════ */
.sk{
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--border-2) 50%,var(--surface-2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s ease infinite;
  border-radius:var(--radius-sm);
}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ═══════════════════════════════════════
   19 — مساعدات
   ═══════════════════════════════════════ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* مساحة لمس لا تقل عن 44px على أجهزة اللمس، بلا تكبير المظهر على الحاسوب */
@media(pointer:coarse){
  .tb-btn,.sb-close,.modal-x,.t-x,.btn-sm,.btn-xs,.panel-link{
    min-width:var(--tap);
    min-height:var(--tap);
  }
}

/* ══════════════════════════════════════
   20 — الهاتف: المساحات الآمنة واللمس والتكبير التلقائي
   ══════════════════════════════════════ */

/* الحافة الجانبية في الوضع الأفقي — النتوء فيزيائي لا منطقي،
   فهذا الموضع الوحيد الذي تصحّ فيه left/right الفيزيائيتان */
@media(orientation:landscape){
  .ct{
    padding-left:calc(var(--sp-3) + var(--safe-left));
    padding-right:calc(var(--sp-3) + var(--safe-right));
  }
  .topbar{
    padding-left:calc(var(--sp-3) + var(--safe-left));
    padding-right:calc(var(--sp-3) + var(--safe-right));
  }
  .bottom-nav{
    padding-left:var(--safe-left);
    padding-right:var(--safe-right);
  }
  #toasts{
    margin-left:var(--safe-left);
    margin-right:var(--safe-right);
  }
}

/* منع تكبير iOS التلقائي: أي حقل أصغر من 16px يُجبر المتصفّح
   على تكبير الصفحة عند التركيز عليه.
   المحدّد يبدأ بـ body ليتجاوز تعريفات الصفحات (0,1,1) > (0,1,0)
   دون الحاجة إلى important */
@media(pointer:coarse){
  body input:not([type=checkbox]):not([type=radio]),
  body select,
  body textarea,
  body .fi, body .tf, body .fi-sel, body .fi-ta, body .tb-search{
    font-size:16px;
  }
}

/* مساحة لمس لا تقل عن 44px على أجهزة اللمس
   القائمة تشمل الأصناف الخاصة بالصفحات أيضاً، لأن الصنف يُعرَّف
   داخل الصفحة بوزن (0,1,0) وهذا المحدّد (0,1,1) يعلوه بلا important */
@media(pointer:coarse){
  body .btn, body .btn-sm, body .btn-xs,
  body .tb-btn, body .tb-ham, body .sb-close, body .modal-x, body .nd-x,
  body .sb-link, body .bn-item, body .panel-link,
  body .pager button, body .kebab,
  /* أزرار وعناصر تنقّل تعرّفها الصفحات وحدها */
  body .hbtn, body .qa, body .nav-arrow, body .fab,
  body .sb-av, body .sb-out, body .rmi, body .mi-btn,
  body .chip, body .ms-btn, body .option-btn,
  body .btn-login, body .btn-reset, body .btn-install{
    min-height:var(--tap);
    min-width:var(--tap);
  }
  /* الحقول تُرفع ارتفاعاً فقط: فرض عرض أدنى عليها يكسر صفوف الفلاتر */
  body .tf, body .fi, body .fi-sel, body .tf-chk{min-height:var(--tap)}
  /* مربّعات الاختيار وأزرار الراديو: الهدف الملموس هو الإطار حولها */
  body .tf-chk input[type=checkbox], body .tf-chk input[type=radio],
  body input[type=checkbox].t-lg, body input[type=radio].t-lg{
    width:20px;height:20px;flex-shrink:0;
  }
  body .t-x{min-width:var(--tap);min-height:var(--tap);display:flex;align-items:center;justify-content:center}
}

/* ══════════════════════════════════════
   21 — جدول يتحوّل إلى بطاقات تحت 768px
   الاستعمال: <div class="tscroll as-cards"> وكل <td data-label="العنوان">
   مسار عرض واحد لا اثنان، فلا تتباعد البطاقات عن الجدول
   ══════════════════════════════════════ */
@media(max-width:767px){
  .tscroll.as-cards{overflow-x:visible;max-height:none}
  .tscroll.as-cards table{display:block;min-width:0;width:100%}
  .tscroll.as-cards thead{display:none}
  .tscroll.as-cards tbody{display:block}
  .tscroll.as-cards tr{
    display:block;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:var(--sp-2) var(--sp-4);
    margin-bottom:var(--sp-3);
  }
  .tscroll.as-cards td{
    display:flex;align-items:center;justify-content:space-between;
    gap:var(--sp-3);
    padding:var(--sp-2) 0;
    border-bottom:1px solid var(--border);
    text-align:start;
    max-width:none!important;
    white-space:normal!important;
    overflow:visible!important;
  }
  .tscroll.as-cards td:last-child{border-bottom:0}
  .tscroll.as-cards td::before{
    content:attr(data-label);
    flex-shrink:0;
    color:var(--ink3);
    font-size:var(--fs-sm);
    font-weight:var(--fw-bold);
  }
  .tscroll.as-cards td:not([data-label])::before{content:none}
  .tscroll.as-cards td[colspan]{display:block;border-bottom:0}
  .tscroll.as-cards td[colspan]::before{content:none}
  .tscroll.as-cards td input,
  .tscroll.as-cards td select{max-width:55%;min-width:0}
}


/* ═══════════════════════════════════════
   22 — تقليل الحركة
   ═══════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .bg-orbs{display:none}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}