/* ══════════════════════════════════════════════════════════
   TECHGATE v7.1.1 — Components
   ══════════════════════════════════════════════════════════ */

/* ── LAYOUT ──────────────────────────────────── */
.shell-dash{display:flex;min-height:100vh}
.dash-main{
  flex:1;
  margin-right:var(--sb-w);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition:margin-right var(--ts);
  min-width:0;
}
.dash-content{
  flex:1;
  padding:var(--sp6) var(--sp8);
  max-width:100%;
  overflow-x:hidden;
}

/* ── SIDEBAR ─────────────────────────────────── */
.sidebar{
  width:var(--sb-w);
  background:var(--sb-bg);
  position:fixed;
  top:0;right:0;bottom:0;
  z-index:var(--z3);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform var(--ts);
  box-shadow:-4px 0 24px rgba(0,0,0,.15);
}
.sidebar__logo{
  display:flex;align-items:center;gap:12px;
  padding:20px 18px 16px;
  border-bottom:1px solid var(--sb-border);
  flex-shrink:0;
}
/* ⚠️ V7.1.1 — كان 36×36 مربّعاً مقصوصاً.
   شعار المالك أفقيّ (اسم + سطر تحته)، وحصرُه في مربّع 36 يجعله
   غير مقروء تماماً. الآن: عرضٌ كامل بارتفاع محدود ومحاذاة يمين،
   فيظهر الشعار كما صُمّم لا كأيقونة مقصوصة. */
/* ⚠️ خلفية فاتحة خلف الشعار داخل القائمة الداكنة.
   شعار المالك مكتوب بلونٍ داكن على خلفية شفافة — وهو الشائع. ووضعه
   كما هو على قائمةٍ كحلية يجعله غير مرئي تماماً، فيبدو الرأس فارغاً
   بعد رفعٍ ناجح. وشعار الوضع الداكن خانةٌ اختيارية قد لا تُملأ أبداً،
   فلا يصحّ أن تتوقّف قراءة الشعار عليها. الرقعة الفاتحة تضمن ظهور
   أي شعار مهما كان لونه، وتختفي أثرها متى رُفع شعار داكن مخصّص. */
.sidebar__logo-img{max-width:100%;max-height:46px;width:auto;height:auto;
  object-fit:contain;object-position:center;flex-shrink:0;
  background:#fff;border-radius:var(--r8);padding:6px 10px;
  box-shadow:0 1px 4px rgba(0,0,0,.18)}
.sidebar__logo{justify-content:center;cursor:pointer}
.sidebar__logo:hover{background:rgba(255,255,255,.04)}
.sidebar__logo-text{font-size:var(--tmd);font-weight:700;color:#fff;line-height:1.25;letter-spacing:-.2px}
.sidebar__logo-sub{font-size:var(--txs);color:var(--sb-text);margin-top:2px}

/* مبدّل القسم — نُقل إلى أسفل القائمة. يبقى .sidebar__mode معرَّفاً
   لتوافق أي شاشة قديمة، والتنسيق الحيّ هو .sidebar__switch أدناه. */
.sidebar__switch{
  margin-top:auto;flex-shrink:0;
  padding:12px 14px 14px;
  border-top:1px solid var(--sb-border);
}
.sidebar__switch-lbl{
  font-size:var(--txs);color:var(--sb-text);opacity:.75;
  margin-bottom:7px;letter-spacing:.2px;
}
.sidebar__switch-row{
  display:flex;gap:4px;padding:3px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r10);
}
.sidebar__switch-btn{
  flex:1;padding:7px 4px;border-radius:var(--r8);
  font-size:var(--tsm);font-weight:600;text-align:center;cursor:pointer;
  color:var(--sb-text);transition:all var(--tf);
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.sidebar__switch-btn i{font-size:.875rem}
.sidebar__switch-btn.on{background:var(--brand-600);color:#fff;box-shadow:0 2px 8px rgba(24,95,165,.35)}
.sidebar__switch-btn:not(.on):hover{background:rgba(255,255,255,.07);color:#fff}

.sidebar__mode{
  margin:12px 14px;
  display:flex;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r10);
  padding:3px;gap:3px;
  flex-shrink:0;
}
.sidebar__mode-btn{
  flex:1;padding:7px 4px;
  border-radius:var(--r8);
  font-size:var(--tsm);font-weight:600;
  text-align:center;cursor:pointer;
  color:var(--sb-text);
  transition:all var(--tf);
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.sidebar__mode-btn i{font-size:.875rem}
.sidebar__mode-btn.b2b-on{background:var(--brand-600);color:#fff;box-shadow:0 2px 8px rgba(24,95,165,.35)}
.sidebar__mode-btn.b2c-on{background:var(--brand-600);color:#fff;box-shadow:0 2px 8px rgba(24,95,165,.30)}

.sidebar__nav{flex:1;overflow-y:auto;padding:8px 0;scrollbar-width:none}
.sidebar__nav::-webkit-scrollbar{display:none}
.sidebar__section{
  font-size:var(--txs);font-weight:700;
  text-transform:uppercase;letter-spacing:1.4px;
  color:var(--sb-section);
  padding:14px 18px 5px;
  user-select:none;
}
.sidebar__item{
  display:flex;align-items:center;gap:11px;
  padding:10px 18px;
  color:var(--sb-text);
  font-size:var(--tsm);font-weight:500;
  cursor:pointer;width:100%;
  transition:background var(--tf),color var(--tf);
  position:relative;
  border-radius:0;
}
.sidebar__item:hover{background:var(--sb-hover-bg);color:var(--sb-hover)}
.sidebar__item.active{background:var(--sb-active-bg);color:var(--sb-active)}
.sidebar__item.active::before{
  content:'';
  position:absolute;right:0;
  top:50%;transform:translateY(-50%);
  width:3px;height:65%;
  background:var(--sb-bar);
  border-radius:2px 0 0 2px;
}
.sidebar__item-icon{font-size:1.05rem;flex-shrink:0;opacity:.7;transition:opacity var(--tf)}
.sidebar__item:hover .sidebar__item-icon,
.sidebar__item.active .sidebar__item-icon{opacity:1}
.sidebar__badge{
  margin-right:auto;
  background:var(--err-600);color:#fff;
  font-size:10px;font-weight:700;
  padding:1px 7px;border-radius:var(--rf);
  min-width:20px;text-align:center;
}
.sidebar__badge.new{background:var(--green-600)}
.sidebar__divider{height:1px;background:var(--sb-border);margin:6px 14px}
.sidebar__footer{
  padding:14px 18px;
  border-top:1px solid var(--sb-border);
  flex-shrink:0;
}
.sidebar__user{display:flex;align-items:center;gap:10px}
.sidebar__uname{font-size:var(--tsm);font-weight:600;color:#fff;line-height:1.3}
.sidebar__urole{font-size:var(--txs);color:var(--sb-text);margin-top:2px}
.sidebar__logout{
  margin-right:auto;
  color:rgba(255,255,255,.30);
  font-size:1.05rem;padding:4px;
  transition:color var(--tf);
  border-radius:var(--r);
}
.sidebar__logout:hover{color:rgba(255,255,255,.75);background:rgba(255,255,255,.07)}
.sidebar__overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  z-index:calc(var(--z3) - 1);
}
.sidebar__overlay.show{display:block}

/* ── TOPBAR ──────────────────────────────────── */
.topbar{
  height:var(--topbar);
  background:var(--s0);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--sp8);
  position:sticky;top:0;z-index:var(--z2);
  gap:var(--sp4);
  box-shadow:var(--sh-xs);
}
.topbar__start{display:flex;align-items:center;gap:var(--sp3)}
.topbar__menu{
  display:none;
  width:38px;height:38px;
  border-radius:var(--r8);
  align-items:center;justify-content:center;
  color:var(--text-m);font-size:1.15rem;
  transition:background var(--tf);
}
.topbar__menu:hover{background:var(--s2);color:var(--brand-600)}
.topbar__title{font-size:var(--tlg);font-weight:700;color:var(--text);letter-spacing:-.2px}
.topbar__end{display:flex;align-items:center;gap:var(--sp2)}
.topbar__divider{width:1px;height:26px;background:var(--border);margin:0 var(--sp1)}
.topbar__btn{
  width:38px;height:38px;
  border-radius:var(--r8);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-m);font-size:1.05rem;
  transition:background var(--tf),color var(--tf);
  position:relative;
}
.topbar__btn:hover{background:var(--s2);color:var(--brand-600)}
.lang-toggle{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;
  border-radius:var(--r8);
  border:none;
  background:transparent;color:var(--text-m);
  font-size:.8125rem;font-weight:700;cursor:pointer;
  transition:background var(--tf),color var(--tf);
}
.lang-toggle:hover{background:var(--s2);color:var(--brand-600)}
.lang-toggle__txt{font-family:'Segoe UI',system-ui,sans-serif;line-height:1;min-width:16px;text-align:center}
.topbar__dash-link{
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;
  background:var(--brand-50);
  color:var(--brand-700);
  border-radius:var(--r8);
  font-size:var(--tsm);font-weight:600;
  transition:all var(--tf);
  border:1px solid var(--brand-100);
}
.topbar__dash-link:hover{background:var(--brand-600);color:#fff;border-color:var(--brand-600)}

/* ── NAVBAR (public pages) ───────────────────── */
.navbar{
  height:var(--navbar);
  background:var(--s0);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:var(--z2);
  box-shadow:var(--sh-xs);
}
.navbar__inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;
  padding:0 var(--sp6);height:100%;gap:var(--sp3);
}
.navbar__brand{
  display:flex;align-items:center;gap:12px;
  cursor:pointer;flex-shrink:0;
  margin-left:var(--sp5);
  /* الشعار قد يكون أعرض من مربّع — لا نقيّده بعرض ثابت */
  max-width:280px;min-width:0;
}
/* v7.1.1 — الشعار المرفوع من لوحة الأدمن: الارتفاع هو المُقيِّد،
   والعرض يتبع النسبة الأصلية بلا تشويه. الحد الأقصى للعرض يمنع
   شعاراً أفقياً طويلاً من ابتلاع شريط التنقّل. */
.navbar__brand img{
  height:var(--logo-h);width:auto;
  max-width:220px;object-fit:contain;
  border-radius:var(--r8);display:block;
}
.navbar__brand svg{flex-shrink:0}
/* ═══════════════════════════════════════════════════════
   موضع الشعار في الشريط — يضبطه المالك من لوحة السوبر أدمن
   ═══════════════════════════════════════════════════════
   الشريط صفٌّ واحد يتقاسمه الشعار والروابط والأزرار، ولا يكفي فيه
   ‎justify-content‎ على الشعار وحده. لذلك تُنفَّذ المحاذاة بإعادة
   توزيع المساحة الحرّة:
     start  : الشعار عند حافة البداية (اليمين في العربية) — الافتراضي.
     center : الروابط تتوقّف عن ابتلاع المساحة، وهوامش الشعار
              التلقائية تضعه في منتصف الفراغ قبل الروابط.
     end    : الشعار يصير آخر عنصر في الصف وهامشه التلقائي يدفعه
              إلى الحافة المقابلة (اليسار في العربية).
   لا نستعمل position:absolute هنا: الشعار الطويل كان يركب فوق
   الروابط على الشاشات المتوسّطة، والتراكب لا يُكتشف إلا بعد النشر.
   ═══════════════════════════════════════════════════════ */
.navbar--brandrow{height:auto;min-height:var(--navbar)}
.navbar--brandrow .navbar__inner{height:var(--navbar)}
.navbar__brandrow{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;
  padding:12px var(--sp6) 2px;
}
.navbar__brandrow .navbar__brand{margin-left:0;max-width:none}
.navbar__brand-name{
  font-size:var(--txl);font-weight:800;
  color:var(--brand-800);letter-spacing:-.3px;
  white-space:nowrap;
}
[data-theme=dark] .navbar__brand-name{color:var(--brand-300)}
/* أُزيلت قواعد .navbar__toggle مع الزرّ المكرّر الذي كانت تخدمه. */
/* شريط الروابط — إصلاح v7.1.1
   كان: flex:1 بلا min-width. القيمة الافتراضية min-width:auto على
   ابن flex تساوي عرض المحتوى الأدنى، وكل رابط white-space:nowrap،
   فالصندوق يرفض النزول عن ٦٢١px مهما ضاقت الشاشة. ولأن الشعار
   والأزرار كلاهما flex-shrink:0، الفائض كلّه يدفع صندوق الأزرار
   خارج الشاشة (وفي RTL يعني ذلك خروج «إنشاء حساب» من اليسار).
   الآن: min-width:0 يسمح للصندوق بالانكماش إلى المساحة المتاحة،
   وoverflow-x:auto يجعل الروابط تمرّر داخل صندوقها بدل أن تدفع
   جيرانها. النتيجة: صندوق الأزرار لا يخرج عن الشريط أبداً. */
.navbar__links{
  display:flex;align-items:center;flex-wrap:nowrap;gap:10px;
  flex:1 1 0%;
  min-width:0;
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  /* الحشو/الهامش المتعادلان يفتحان ٥px حول الصندوق دون تغيير
     التخطيط، فلا يقصّ overflow خطَّ الرابط النشط (bottom:-2px) */
  padding-block:5px;margin-block:-5px;
  margin-inline-end:-6px;
}
.navbar__links::-webkit-scrollbar{display:none}
.navbar__link{
  padding:9px 13px;border-radius:var(--r8);
  font-size:var(--tsm);font-weight:500;
  color:var(--text-m);
  transition:background var(--tf),color var(--tf);
  white-space:nowrap;
}
.navbar__link:hover{background:var(--s2);color:var(--text)}
.navbar__link{position:relative}
.navbar__link.active{color:var(--brand-700);background:transparent;font-weight:700}
.navbar__link.active::after{
  content:'';position:absolute;
  right:13px;left:13px;bottom:-2px;height:2.5px;
  border-radius:2px;background:var(--brand-600);
}
[data-theme=dark] .navbar__link.active{color:var(--brand-300)}
[data-theme=dark] .navbar__link.active::after{background:var(--brand-300)}
.navbar__link.active.b2c{color:var(--brand-700);background:transparent}
.navbar__link.active.b2c::after{background:var(--brand-600)}
/* صندوق الأزرار: كان flex-shrink:0 فيبقى بعرضه الكامل ويُدفَع
   خارج الشريط بدل أن ينكمش. الآن يُسمح له بالانكماش كصمّام أمان
   أخير (بعد أن صار شريط الروابط هو ما ينكمش أولاً بفضل
   flex-basis:0). ملاحظة: لا نضع overflow هنا إطلاقاً — لوحة حجم
   الخط (.font-pop) وقائمة المستخدم تُموضَعان absolute داخله،
   وأي overflow غير visible يقصّهما. */
.navbar__actions{
  display:flex;align-items:center;flex-wrap:nowrap;gap:10px;
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
}
.navbar__burger{
  display:none;
  width:40px;height:40px;
  border-radius:var(--r8);
  align-items:center;justify-content:center;
  font-size:1.2rem;color:var(--text-m);
  transition:background var(--tf);
}
.navbar__burger:hover{background:var(--s2);color:var(--text)}

/* Mobile nav drawer */
.mobile-nav{display:none;position:fixed;inset:0;z-index:var(--z4)}
.mobile-nav.open{display:block}
.mobile-nav__overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.mobile-nav__drawer{
  position:absolute;top:0;right:0;bottom:0;
  width:min(300px,88vw);
  background:var(--s0);
  padding:var(--sp6) var(--sp5);
  overflow-y:auto;
  box-shadow:var(--sh-2xl);
}
.mobile-nav__header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--sp5);
  padding-bottom:var(--sp4);
  border-bottom:1px solid var(--border);
}
.mobile-nav__link{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:var(--r10);
  font-size:var(--tbase);color:var(--text-2);
  transition:background var(--tf);margin-bottom:3px;
  font-weight:500;
}
.mobile-nav__link:hover,.mobile-nav__link.active{background:var(--s2);color:var(--text)}
.mobile-nav__link.active{background:var(--brand-50);color:var(--brand-700)}
.mobile-nav__sep{height:1px;background:var(--border);margin:var(--sp4) 0}

/* ── BUTTONS ─────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:7px;padding:10px 20px;
  border-radius:var(--r10);
  font-size:var(--tsm);font-weight:600;
  transition:all var(--tf);
  white-space:nowrap;flex-shrink:0;cursor:pointer;
  border:1.5px solid transparent;
  letter-spacing:.1px;position:relative;
  line-height:1.4;
}
.btn:focus-visible{outline:2px solid var(--brand-400);outline-offset:2px}
.btn:disabled{opacity:.45;cursor:not-allowed!important;pointer-events:none}
.btn-xs{padding:4px 11px;font-size:var(--txs);border-radius:var(--r);gap:4px}
.btn-sm{padding:7px 15px;font-size:var(--tsm);border-radius:var(--r8);gap:5px}
.btn-lg{padding:12px 28px;font-size:var(--tbase);gap:8px}
.btn-xl{padding:14px 36px;font-size:var(--tlg);gap:9px}
.btn-full{width:100%}
.btn-icon{width:38px;height:38px;padding:0;border-radius:var(--r8)}

.btn-primary{background:var(--brand-600);color:#fff;border-color:var(--brand-600);box-shadow:var(--sh-brand)}
.btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700);transform:translateY(-1px);box-shadow:0 6px 22px rgba(24,95,165,.34)}
.btn-primary:active{transform:none;box-shadow:var(--sh-brand)}

.btn-success{background:var(--green-600);color:#fff;border-color:var(--green-600);box-shadow:var(--sh-green)}
.btn-success:hover{background:var(--green-700);border-color:var(--green-700);transform:translateY(-1px);box-shadow:0 6px 22px rgba(5,150,105,.30)}
.btn-success:active{transform:none}

.btn-secondary{background:var(--s0);color:var(--text-2);border-color:var(--border-s)}
.btn-secondary:hover{background:var(--s2);border-color:var(--brand-300);color:var(--brand-700)}

.btn-ghost{background:transparent;color:var(--text-m);border-color:transparent}
.btn-ghost:hover{background:var(--s2);color:var(--text);border-color:var(--border)}

.btn-danger{background:var(--err-600);color:#fff;border-color:var(--err-600)}
.btn-danger:hover{filter:brightness(.92);transform:translateY(-1px)}
.btn-danger:active{transform:none}
.btn-danger-outline{background:transparent;color:var(--err-600);border-color:var(--err-200)}
.btn-danger-outline:hover{background:var(--err-50);border-color:var(--err-600)}

.btn.loading .btn__text{opacity:0}
.btn.loading::after{
  content:'';position:absolute;
  width:15px;height:15px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;
  animation:spin .65s linear infinite;
}

/* ── CARDS ───────────────────────────────────── */
.card{background:var(--s0);border-radius:var(--r12);border:1px solid var(--border);box-shadow:var(--sh-sm)}
.card-p{padding:var(--sp5)}
.card-p-lg{padding:var(--sp6) var(--sp8)}
.card-hover{transition:box-shadow var(--t),transform var(--t),border-color var(--t)}
.card-hover:hover{box-shadow:var(--sh-lg);transform:translateY(-2px);border-color:var(--border-s)}

.stat-card{
  background:var(--s0);border-radius:var(--r12);
  border:1px solid var(--border);padding:var(--sp5);
  transition:all var(--t);
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--border-s)}
.stat-card__icon{
  width:46px;height:46px;border-radius:var(--r12);
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;margin-bottom:var(--sp3);
}
.stat-card__value{
  font-size:2rem;font-weight:800;color:var(--text);
  line-height:1;letter-spacing:-.5px;
}
.stat-card__label{font-size:var(--tsm);color:var(--text-m);margin-top:5px;font-weight:500}
.stat-card__change{font-size:var(--txs);font-weight:600;margin-top:7px;display:flex;align-items:center;gap:3px}
.stat-card__change.up{color:var(--ok-600)}
.stat-card__change.down{color:var(--err-600)}
.stat-card__change.neutral{color:var(--text-m)}

/* ── FORMS ───────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp4)}
.form-group:last-child{margin-bottom:0}
.form-label{font-size:var(--tsm);font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:4px}
/* v7.1.1 — نجمة الحقل الإلزامي كانت 4.3:1 على سطح البطاقة (الحدّ 4.5)
   لأن --err-600 مضبوط للخلفية البيضاء لا لسطح --s1. درجة أغمق تعبر
   الحدّ على السطحين، ويبقى للنمط الداكن درجته الفاتحة. */
.form-label .req{color:#B91C1C;font-weight:700}
[data-theme=dark] .form-label .req{color:#FCA5A5}
.form-input{
  width:100%;padding:10px 14px;
  border:1.5px solid var(--border-s);border-radius:var(--r10);
  background:var(--s0);color:var(--text);
  font-size:var(--tbase);
  transition:border-color var(--tf),box-shadow var(--tf);
  outline:none;line-height:1.5;
}
.form-input::placeholder{color:var(--text-ph)}
.form-input:focus{border-color:var(--brand-600);box-shadow:0 0 0 3px rgba(24,95,165,.10)}
.form-input:disabled{background:var(--s2);opacity:.6;cursor:not-allowed}
.form-input.err{border-color:var(--err-600);box-shadow:0 0 0 3px rgba(220,38,38,.08)}
.form-input.ok{border-color:var(--ok-600)}
.form-input-icon{padding-right:40px}
.form-icon-wrap{position:relative}
.form-icon{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--text-d);font-size:1rem;pointer-events:none}
select.form-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2394A3B8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 12px center;padding-left:34px}
textarea.form-input{resize:vertical;min-height:100px;line-height:1.65}
.form-hint{font-size:var(--txs);color:var(--text-m);line-height:1.55;margin-top:2px}
.form-error{font-size:var(--txs);color:var(--err-600);display:flex;align-items:center;gap:4px;font-weight:500}

.toggle-wrap{display:flex;align-items:center;justify-content:space-between;padding:8px 0;gap:var(--sp4)}
.toggle-label{font-size:var(--tsm);color:var(--text-2);font-weight:500}
/* ══════════════════════════════════════════════════════════
   مفتاح التبديل — نمطان في المنصّة، وواحد منهما كان بلا أنماط

   كان في الشيفرة استعمالان لنفس الصنف:
     ١) <div class="toggle-sw" onclick="this.classList.toggle('on')">
     ٢) <label class="toggle-sw"><input type="checkbox"><span></span></label>

   والأنماط كُتبت للأول وحده. فالثاني — وهو ١٣ موضعاً في الطلبات
   والضريبة والفوترة والامتثال والصيانة — كان يعرض **مربّع اختيار
   خاماً داخل الحبّة**، ومعه المقبض المطلق فوقه، فيبدو المفتاح
   مكسوراً. وهو ما ظهر في لقطة المالك.

   الحلّ يغطّي النمطين معاً بدل توحيد ١٣ موضعاً يدوياً (وهو تغيير
   أوسع وأخطر): المربّع يُخفى بصرياً ويبقى في شجرة الوصول، و<span>
   يصير المقبض، والحالة تُقرأ من `.on` أو من `:checked`.
   ══════════════════════════════════════════════════════════ */
.toggle-sw{
  width:44px;height:26px;
  background:var(--border-s);border-radius:var(--rf);
  position:relative;cursor:pointer;
  transition:background var(--t),box-shadow var(--t);
  flex-shrink:0;display:inline-block;vertical-align:middle;
  border:none;padding:0;margin:0;
  -webkit-tap-highlight-color:transparent;
}
.toggle-sw.on{background:var(--brand-600)}
.toggle-sw.on.green{background:var(--ok-600)}

/* المقبض للنمط الأول (div بلا عناصر داخلية) */
.toggle-sw::after{
  content:'';position:absolute;
  width:20px;height:20px;background:#fff;
  border-radius:50%;top:3px;inset-inline-start:3px;
  transition:inset-inline-start var(--t);
  box-shadow:0 1px 4px rgba(0,0,0,.28);
  pointer-events:none;
}
.toggle-sw.on::after{inset-inline-start:21px}

/* النمط الثاني: label يحوي input + span */
.toggle-sw > input[type="checkbox"]{
  position:absolute;opacity:0;width:100%;height:100%;
  margin:0;top:0;inset-inline-start:0;cursor:pointer;z-index:2;
}
/* حين يوجد span نستخدمه مقبضاً ونُلغي المقبض الزائف — وإلا ظهر مقبضان */
.toggle-sw:has(> span)::after{display:none}
.toggle-sw > span{
  position:absolute;
  width:20px;height:20px;background:#fff;
  border-radius:50%;top:3px;inset-inline-start:3px;
  transition:inset-inline-start var(--t);
  box-shadow:0 1px 4px rgba(0,0,0,.28);
  pointer-events:none;
}
.toggle-sw:has(> input:checked){background:var(--brand-600)}
.toggle-sw:has(> input:checked) > span{inset-inline-start:21px}
.toggle-sw:has(> input:disabled){opacity:.5;cursor:not-allowed}

/* ارتداد للمتصفّحات بلا :has — المقبض يبقى في مكانه لكن اللون يعمل
   عبر الصنف .on الذي تضيفه الشيفرة، ولا يظهر مربّع خام أبداً. */
@supports not selector(:has(*)){
  .toggle-sw > span{display:none}
}

/* الوصولية: حلقة تركيز ظاهرة — كان المفتاح غير قابل للتمييز بلوحة
   المفاتيح رغم أنه يضبط أعلاماً تمسّ الضريبة والتوثيق. */
.toggle-sw:focus-within{box-shadow:0 0 0 3px rgba(24,95,165,.28)}
.toggle-sw:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}

/* ── BADGES ──────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--rf);
  font-size:var(--txs);font-weight:600;white-space:nowrap;
}
.badge-ok{background:var(--ok-100);color:#065F46}
.badge-warn{background:var(--warn-100);color:#92400E}
.badge-err{background:var(--err-100);color:#991B1B}
.badge-brand{background:var(--brand-50);color:var(--brand-700)}
.badge-green{background:var(--green-50);color:var(--green-800)}
.badge-purple{background:var(--pur-100);color:#5B21B6}
.badge-neutral{background:var(--s3);color:var(--text-m)}
/* ⚠️ اسمان كانا مستعملين في الشاشات بلا تعريف هنا، فتظهر الشارة
   بلا لون — أخطرها badge-danger: شارةٌ معناها «موقوف» تظهر رمادية
   كأنها محايدة. عُرِّفا بدل تعقّب كل موضع. */
.badge-info{background:var(--brand-50);color:var(--brand-700)}
.badge-danger{background:var(--err-100);color:#991B1B}
.badge-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ── TABLE ───────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--r12);border:1px solid var(--border);background:var(--s0);-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;min-width:560px}
.table thead tr{background:var(--s1)}
.table th{
  padding:12px 16px;text-align:right;
  font-size:var(--txs);font-weight:700;color:var(--text-m);
  text-transform:uppercase;letter-spacing:.7px;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.table td{
  padding:13px 16px;text-align:right;
  font-size:var(--tsm);color:var(--text-2);
  border-bottom:1px solid var(--border);
  transition:background var(--tf);
  vertical-align:middle;
}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:var(--s1)}
.table td.primary{font-weight:600;color:var(--text)}
.table td.mono{font-family:'Courier New',monospace;color:var(--brand-600);font-weight:700;font-size:.85em}

/* ── MODAL ───────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;z-index:var(--z5);
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp5);animation:fadeIn .15s ease;
}
.modal{
  background:var(--s0);border-radius:var(--r16);
  width:100%;max-width:540px;max-height:92vh;
  overflow-y:auto;box-shadow:var(--sh-2xl);
  animation:slideUp .22s ease;
}
.modal-wide{max-width:740px}.modal-narrow{max-width:420px}
.modal__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--sp6);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--s0);z-index:1;
}
.modal__title{font-size:var(--tlg);font-weight:700;color:var(--text);letter-spacing:-.2px}
.modal__close{
  width:32px;height:32px;border-radius:var(--r8);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-m);font-size:1.05rem;cursor:pointer;
  transition:background var(--tf);flex-shrink:0;
}
.modal__close:hover{background:var(--s2);color:var(--text)}
.modal__body{padding:var(--sp6)}
.modal__footer{
  padding:var(--sp4) var(--sp6);
  border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:var(--sp3);
  position:sticky;bottom:0;background:var(--s0);
}

/* ── TOASTS ──────────────────────────────────── */
#tg-toasts{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  z-index:var(--z6);
  display:flex;flex-direction:column;gap:10px;
  pointer-events:none;
  width:min(460px,calc(100vw - 32px));
}
.toast{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:var(--r12);
  background:var(--s0);border:1px solid var(--border);
  box-shadow:var(--sh-xl);pointer-events:all;
  animation:slideDown .22s ease;
  font-size:var(--tsm);color:var(--text-2);font-weight:500;
  line-height:1.45;
}
.toast__icon{font-size:1.1rem;flex-shrink:0}
.toast-ok{border-color:var(--ok-600)}.toast-ok .toast__icon{color:var(--ok-600)}
.toast-err{border-color:var(--err-600)}.toast-err .toast__icon{color:var(--err-600)}
.toast-info{border-color:var(--brand-300)}.toast-info .toast__icon{color:var(--brand-600)}
.toast-warn{border-color:var(--warn-600)}.toast-warn .toast__icon{color:var(--warn-600)}
.toast-out{animation:fadeOut .22s ease forwards}

/* ── NOTIFICATIONS ───────────────────────────── */
.notif-badge{
  position:absolute;top:-5px;right:-5px;
  min-width:18px;height:18px;
  background:var(--err-600);color:#fff;
  font-size:10px;font-weight:800;border-radius:var(--rf);
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--s0);padding:0 3px;
}
.notif-panel{
  position:fixed;top:72px;left:20px;
  width:380px;max-height:520px;
  background:var(--s0);border:1px solid var(--border);
  border-radius:var(--r16);box-shadow:var(--sh-2xl);
  z-index:var(--z4);overflow:hidden;
  display:flex;flex-direction:column;
  animation:slideDown .18s ease;
}
.notif-panel__header{
  padding:16px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.notif-panel__title{font-size:var(--tmd);font-weight:700;color:var(--text)}
.notif-list{overflow-y:auto;flex:1}
.notif-item{
  display:flex;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--border);
  cursor:pointer;transition:background var(--tf);
}
.notif-item:hover{background:var(--s1)}
.notif-item.unread{background:var(--brand-25)}
.notif-item__icon{
  width:38px;height:38px;border-radius:var(--r10);
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;flex-shrink:0;
}
.notif-item__body{flex:1;min-width:0}
.notif-item__title{font-size:var(--tsm);font-weight:600;color:var(--text);line-height:1.45}
.notif-item__sub{font-size:var(--txs);color:var(--text-m);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-item__time{font-size:11px;color:var(--text-d);margin-top:4px}
.notif-item__dot{width:7px;height:7px;border-radius:50%;background:var(--brand-500);flex-shrink:0;margin-top:6px}
.notif-panel__footer{padding:12px 18px;border-top:1px solid var(--border);text-align:center}

/* ── USER MENU ───────────────────────────────── */
.user-menu{position:relative;display:inline-block}
.user-menu__trigger{
  display:flex;align-items:center;gap:9px;
  padding:6px 12px;
  border:1.5px solid var(--border);border-radius:var(--r10);
  background:var(--s0);cursor:pointer;
  font-size:var(--tsm);color:var(--text);
  transition:all var(--tf);
}
.user-menu__trigger:hover{border-color:var(--brand-300);background:var(--s1)}
.user-menu__name{font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu__drop{
  display:none;
  position:absolute;left:0;top:calc(100% + 9px);
  min-width:220px;
  background:var(--s0);border:1px solid var(--border);
  border-radius:var(--r12);box-shadow:var(--sh-xl);
  z-index:var(--z3);overflow:hidden;
  animation:slideDown .16s ease;
}
.user-menu__drop.open{display:block}
.user-menu__info{padding:14px 16px;border-bottom:1px solid var(--border);background:var(--s1)}
.user-menu__info-name{font-size:var(--tsm);font-weight:700;color:var(--text)}
.user-menu__info-email{font-size:var(--txs);color:var(--text-m);margin-top:2px}
.user-menu__item{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;font-size:var(--tsm);color:var(--text-2);
  width:100%;cursor:pointer;transition:background var(--tf);
  font-family:inherit;text-align:right;font-weight:500;
}
.user-menu__item:hover{background:var(--s2);color:var(--text)}
.user-menu__item.danger{color:var(--err-600)}
.user-menu__item.danger:hover{background:var(--err-50)}
.user-menu__sep{height:1px;background:var(--border);margin:3px 0}

/* ── FONT CONTROL styles live in pages.css (compact popover) ── */

/* ── STEPS ───────────────────────────────────── */
.steps{display:flex;align-items:center;gap:0;margin-bottom:var(--sp8)}
.step{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.step:not(:last-child)::after{
  content:'';position:absolute;
  top:14px;left:0;right:50%;height:2px;background:var(--border);
}
.step.done:not(:last-child)::after,
.step.active:not(:last-child)::after{background:var(--brand-600)}
.step__dot{
  width:30px;height:30px;border-radius:50%;
  border:2px solid var(--border);background:var(--s0);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--tsm);font-weight:700;color:var(--text-m);
  position:relative;z-index:1;transition:all var(--t);
}
.step.active .step__dot{border-color:var(--brand-600);color:var(--brand-600);background:var(--brand-25)}
.step.done .step__dot{border-color:var(--ok-600);background:var(--ok-600);color:#fff}
.step__label{font-size:var(--tsm);font-weight:500;color:var(--text-m);text-align:center}
.step.active .step__label{color:var(--brand-600);font-weight:600}
.step.done .step__label{color:var(--ok-600)}

/* ── EMPTY STATE ─────────────────────────────── */
.empty{
  text-align:center;
  padding:clamp(48px,8vw,80px) var(--sp6);
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.empty__icon{font-size:3.2rem;color:var(--border-s)}
.empty__title{font-size:var(--txl);font-weight:700;color:var(--text)}
.empty__desc{font-size:var(--tbase);color:var(--text-m);max-width:380px;line-height:1.65}

/* ── INFO BOX ────────────────────────────────── */
.info-box{
  display:flex;gap:11px;padding:13px 15px;
  border-radius:var(--r10);
  font-size:var(--tsm);line-height:1.6;border:1px solid;
}
.info-box__icon{font-size:1.05rem;flex-shrink:0;margin-top:1px}
.info-box-info{background:var(--brand-25);border-color:var(--brand-100);color:var(--brand-800)}.info-box-info .info-box__icon{color:var(--brand-600)}
.info-box-warn{background:var(--warn-50);border-color:var(--warn-200);color:#92400E}.info-box-warn .info-box__icon{color:var(--warn-600)}
.info-box-ok{background:var(--ok-50);border-color:var(--ok-200);color:#065F46}.info-box-ok .info-box__icon{color:var(--ok-600)}
.info-box-err{background:var(--err-50);border-color:var(--err-200);color:#991B1B}.info-box-err .info-box__icon{color:var(--err-600)}
.info-box-b2c{background:var(--brand-25);border-color:var(--brand-100);color:var(--brand-800)}.info-box-b2c .info-box__icon{color:var(--brand-600)}

/* ── OTP ─────────────────────────────────────── */
.otp-grid{display:flex;gap:10px;justify-content:center;direction:ltr}
.otp-box{
  width:54px;height:64px;
  border:2px solid var(--border-s);border-radius:var(--r10);
  font-size:1.6rem;font-weight:900;text-align:center;
  background:var(--s0);color:var(--text);
  transition:border-color var(--tf),box-shadow var(--tf);outline:none;
}
.otp-box:focus{border-color:var(--brand-600);box-shadow:0 0 0 3px rgba(24,95,165,.12)}
.otp-box.filled{border-color:var(--brand-400);background:var(--brand-25)}

/* ── PRODUCT CARDS ───────────────────────────── */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.prod-card{
  background:var(--s0);border-radius:var(--r12);
  border:1.5px solid var(--border);padding:var(--sp5);
  display:flex;flex-direction:column;gap:14px;
  transition:all var(--t);cursor:pointer;
}
.prod-card:hover{border-color:var(--brand-300);box-shadow:0 8px 28px rgba(24,95,165,.13);transform:translateY(-3px)}
.prod-card.b2c:hover{border-color:var(--brand-400);box-shadow:0 8px 28px rgba(24,95,165,.13)}

/* ── TICKET CARD ─────────────────────────────── */
.ticket-card{
  background:var(--s0);border:1.5px solid var(--border);
  border-radius:var(--r12);padding:var(--sp4) var(--sp5);
  cursor:pointer;transition:all var(--t);
  display:flex;align-items:center;gap:var(--sp4);
}
.ticket-card:hover{border-color:var(--brand-300);box-shadow:var(--sh-md)}
.ticket-card__id{font-size:var(--txs);color:var(--text-m);font-family:monospace;flex-shrink:0}
.ticket-card__title{flex:1;min-width:0;font-size:var(--tsm);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket-card__meta{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ── ERP CARD ────────────────────────────────── */
.api-card{
  background:var(--s0);border:1.5px solid var(--border);
  border-radius:var(--r12);overflow:hidden;
  transition:all var(--t);
}
.api-card:hover{border-color:var(--brand-200);box-shadow:var(--sh-md)}
.api-card__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--border);
}
.api-card__service{display:flex;align-items:center;gap:12px}
.api-card__icon{
  width:40px;height:40px;border-radius:var(--r10);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex-shrink:0;
}
.api-card__name{font-size:var(--tsm);font-weight:700;color:var(--text)}
.api-card__desc{font-size:var(--txs);color:var(--text-m);margin-top:2px}
.api-card__body{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.api-card__footer{
  padding:12px 18px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--s1);
}
.api-card__msg{font-size:var(--txs);margin-right:auto;font-weight:600}
.api-card__msg.ok{color:var(--ok-600)}.api-card__msg.err{color:var(--err-600)}
.api-status{display:flex;align-items:center;gap:6px;font-size:var(--txs);font-weight:600;padding:4px 10px;border-radius:var(--rf);white-space:nowrap}
.api-status__dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.api-status-ok{color:var(--ok-600);background:var(--ok-50)}
.api-status-off{color:var(--text-m);background:var(--s2)}
/* حالة ثالثة: حُفظ لكن الربط ناقص — لا خضراء ولا رمادية. */
.api-status-warn{color:var(--warn-600);background:var(--warn-50)}
.api-status-err{color:var(--err-600);background:var(--err-50)}

/* Meeting selector */
.api-active-sel{display:flex;gap:12px;flex-wrap:wrap}
.api-active-card{
  flex:1;min-width:160px;
  background:var(--s0);border:1.5px solid var(--border);
  border-radius:var(--r12);padding:var(--sp4);
  cursor:pointer;transition:all var(--t);text-align:center;
}
.api-active-card:hover{border-color:var(--brand-300)}
.api-active-card.on-b2b{border-color:var(--brand-600);background:var(--brand-25)}
.api-active-card.on-b2c{border-color:var(--brand-600);background:var(--brand-25)}
.api-active-card i{font-size:1.5rem;margin-bottom:8px;display:block;color:var(--text-m)}
.api-active-card.on-b2b i{color:var(--brand-600)}
.api-active-card.on-b2c i{color:var(--brand-600)}
.api-active-card__name{font-size:var(--tsm);font-weight:600;color:var(--text)}
.api-active-card__status{font-size:var(--txs);color:var(--text-m);margin-top:4px}

/* ── DEAL ROOM ───────────────────────────────── */
.deal-room{display:flex;height:calc(100vh - var(--topbar));overflow:hidden}
.deal-room__main{flex:1;display:flex;flex-direction:column;min-width:0;border-left:1px solid var(--border)}
.deal-room__chat{flex:1;display:flex;flex-direction:column;overflow:hidden}
.deal-room__messages{flex:1;overflow-y:auto;padding:var(--sp5);display:flex;flex-direction:column;gap:12px}
.deal-room__msg{display:flex}
.deal-room__msg.own{justify-content:flex-start}
.deal-room__bubble{
  max-width:70%;padding:10px 14px;
  border-radius:var(--r12);
  font-size:var(--tsm);line-height:1.6;
  background:var(--s2);color:var(--text-2);
}
.deal-room__msg.own .deal-room__bubble{background:var(--brand-50);color:var(--brand-800)}
.deal-room__input-area{
  display:flex;gap:10px;padding:var(--sp4) var(--sp5);
  border-top:1px solid var(--border);background:var(--s0);
}
.deal-room__sidebar{width:280px;flex-shrink:0;overflow-y:auto;padding:var(--sp4);display:flex;flex-direction:column;gap:14px}

/* ── RESPONSIVE BREAKPOINTS ──────────────────── */
/* Large tablets and small desktops */
@media(max-width:1200px){
  :root{--sb-w:240px}
  .dash-content{padding:var(--sp5) var(--sp6)}
}

/* ── حدّ تبديل شريط الروابط إلى الدرج ────────────────────
   كان ٧٦٨px، وهو أقل بكثير من العرض الذي يحتاجه الشريط فعلاً.
   قياس صندوق الشريط (زائر غير مسجَّل، سبعة روابط افتراضية،
   حجم خط md): الشعار ≈٢٥٨px + الروابط ≈٦٢١px + الأزرار ≈٤٦٠px
   + فجوتان ٢٤px = ١٢٣٥px محتوى، وحشو .navbar__inner ٤٨px،
   أي أن الصفّ يحتاج ١٢٨٣px عرض نافذة. لذلك كان يفيض في كل
   المدى ٧٦٩–١٢٨٠px. الحدّ الجديد ١١٠٠px يستبدل الشريط بالدرج
   قبل أن يضيق الفارق، وما بين ١١٠٠ و١٢٨٣ يمرّر شريط الروابط
   داخل صندوقه (min-width:0 أعلاه) فلا يُقصّ أي زر.
   ملاحظة: زر تكبير الخط في المنصة يضخّم الأرقام أعلاه، فيتولّى
   أمرَه ما بعد هذه الكتلة.
   لتقديم الدرج أكثر (شعار أطول أو روابط أكثر) غيّر ١١٠٠ هنا. */
@media(max-width:1100px){
  .navbar__burger{display:flex}
  .navbar__links{display:none}
}
/* ── زرّ تكبير الخط في المنصة ─────────────────────────────
   القاعدتان بلا media query عن قصد. الحساب:
     عرض الصفّ = ٦٠٠px ثابتة (شعار، حشو الروابط والأزرار،
     الفجوات ١٠px، الأزرار ٣٨px) + ٦٣٥px تتناسب مع حجم الخط.
     وحاوية الشريط محدودة بـ --maxw:1320px مهما اتّسعت الشاشة.
       md (16px): ٦٠٠+٦٣٥  = ١٢٣٥px  ≤ ١٢٧٢ متاحة ⇒ يتّسع
       lg (18px): ٦٠٠+٧١٤  = ١٣١٤px  > ١٢٦٦ متاحة ⇒ لا يتّسع
       xl (20px): ٦٠٠+٧٩٤  = ١٣٩٤px  > ١٢٦٠ متاحة ⇒ لا يتّسع
   أي أن الصفّ عند lg و xl لا يتّسع على أي عرض شاشة — حتى ١٩٢٠px
   — لأن السقف هو الحاوية لا النافذة. ولهذا كان يخرج عن الشاشة
   على ١٤٤٠px مع زر التكبير. الدرج هو الحلّ الصحيح هنا، والروابط
   كلها موجودة فيه. */
html[data-font=lg] .navbar__burger,
html[data-font=xl] .navbar__burger{display:flex}
html[data-font=lg] .navbar__links,
html[data-font=xl] .navbar__links{display:none}

/* Tablets */
@media(max-width:1024px){
  :root{--sb-w:220px;--topbar:60px;--navbar:86px;--logo-h:54px}
  .deal-room__sidebar{width:240px}
}

/* Mobile landscape and small tablets */
@media(max-width:768px){
  :root{--topbar:58px;--sb-w:270px;--navbar:80px;--logo-h:48px}
  .sidebar{transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
  .sidebar.open{transform:translateX(0)}
  .dash-main{margin-right:0}
  .topbar__menu{display:flex}
  .topbar{padding:0 var(--sp5)}
  /* .navbar__burger/.navbar__links انتقلا إلى @media(max-width:1100px) */
  .navbar__inner{padding:0 var(--sp4);gap:var(--sp2)}
  /* تحت هذا الحدّ لم يعد صندوق الأزرار وحده يتّسع مع الشعار الكامل.
     الأولوية للأزرار: اسم المنصة يُقصّ بثلاث نقاط، ولا يُدفع أي زر
     خارج الشاشة. وزرّا الدخول والتسجيل موجودان في درج الجوال، فلا
     حاجة لتكرارهما في الشريط على عرض ٧٦٨px فأقل. */
  .navbar__brand{flex:0 1 auto;min-width:0;overflow:hidden;margin-left:var(--sp3)}
  .navbar__brand-name{overflow:hidden;text-overflow:ellipsis}
  .navbar__actions > .btn{display:none}
  /* «لوحة التحكم» موجودة في الدرج أيضاً — لا داعي لتكرارها في شريط
     ضيّق بينما تدفع بقية الأزرار خارج الشاشة */
  .navbar__actions .topbar__dash-link{display:none}
  .dash-content{padding:var(--sp4) var(--sp4)}
  .modal-overlay{align-items:flex-end;padding:0}
  .modal{border-radius:var(--r16) var(--r16) 0 0;max-height:94vh}
  .modal-narrow{max-width:100%}
  .prod-grid{grid-template-columns:1fr 1fr}
  #tg-toasts{width:calc(100vw - 24px)}
  .notif-panel{left:8px;right:8px;width:auto}
  .deal-room{flex-direction:column}
  .deal-room__sidebar{width:100%;height:200px;overflow-x:auto}
  .stat-card__value{font-size:1.6rem}
}

/* Mobile portrait */
@media(max-width:560px){
  :root{--topbar:56px;--navbar:72px;--logo-h:42px}
  .prod-grid{grid-template-columns:1fr}
  .api-active-card{min-width:130px}
  .navbar__brand-name{font-size:var(--tsm)}
  /* الاسم داخل قائمة المستخدم: الصورة الرمزية تكفي للتعرّف على
     الشريط، والاسم كامل داخل القائمة المنسدلة وفي الدرج */
  .user-menu__name{display:none}
  .topbar__title{font-size:var(--tbase)}
}

/* Small mobile */
@media(max-width:380px){
  :root{--topbar:54px;--navbar:66px;--logo-h:38px}
  .step__label{display:none}
  .otp-box{width:46px;height:56px;font-size:1.3rem;gap:7px}
  .otp-grid{gap:7px}
  .btn-xl{padding:12px 24px;font-size:var(--tbase)}
  .modal__body{padding:var(--sp4)}
  .modal__footer{padding:var(--sp3) var(--sp4)}
}

/* Print */
@media print{
  .sidebar,.topbar,.navbar,#tg-toasts,.notif-panel{display:none!important}
  .dash-main{margin-right:0}
  .page{display:block!important}
}
/* شريحة معرّف العضوية في قائمة المستخدم */
.member-id-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:999px;
  background:var(--s2);border:1px solid var(--border);
  font-size:10px;font-weight:600;color:var(--text-m);
  font-family:ui-monospace,Menlo,Consolas,monospace;
  cursor:pointer;transition:background var(--tf),color var(--tf);
  letter-spacing:.3px;
}
.member-id-chip:hover{background:var(--brand-50);color:var(--brand-600);border-color:var(--brand-600)}
.member-id-chip i{font-size:11px}


/* ── رابط تخطّي التنقّل (v7.1.1) ───────────────────────
   لم يكن في المنصة رابط تخطٍّ ولا معلَم <header>. من يتصفّح
   بلوحة المفاتيح أو بقارئ شاشة كان يمرّ على شريط التنقّل كاملاً
   في كل صفحة قبل أن يبلغ المحتوى. الرابط مخفيّ بصرياً حتى
   يستقبل التركيز — وهو النمط المعتمد لا الإخفاء بـ display:none
   الذي يُخرجه من ترتيب التنقّل أصلاً. */
.tg-skip{
  position:absolute;inset-inline-start:-9999px;top:8px;z-index:10000;
  background:var(--brand-600);color:#fff;padding:10px 18px;
  border-radius:var(--r10);font-weight:700;font-size:var(--tsm);
  text-decoration:none;box-shadow:var(--sh-lg);
}
.tg-skip:focus{inset-inline-start:12px}
#tg-main:focus{outline:none}

/* ═══════════════════════════════════════════════════════
   بانر الهيدر والفوتر — صورة واحدة في موضعين
   ═══════════════════════════════════════════════════════
   الارتفاع يأتي من اللوحة عبر style مضمَّن، وهذه القواعد تضبط ما
   عداه. والارتفاع يتقلّص على الشاشات الضيقة بنسبة ثابتة: بانر
   ٢٠٠ بكسل على جوّالٍ عرضه ٣٦٠ يأكل نصف الشاشة قبل أي محتوى.
   ═══════════════════════════════════════════════════════ */
.tg-banner{
  width:100%;display:block;flex-shrink:0;
  background-color:var(--navy,#0b2545);
}
.tg-banner--header{border-bottom:1px solid rgba(0,0,0,.06)}
.tg-banner--footer{border-bottom:1px solid rgba(255,255,255,.10)}
@media (max-width:1024px){ .tg-banner{height:auto!important;aspect-ratio:9.6/1;min-height:56px} }
@media (max-width:640px){  .tg-banner{aspect-ratio:6/1;min-height:52px} }
@media print{ .tg-banner{display:none} }

/* ═══════════════════════════════════════════════════════
   شعار المنصّة — الصورة التي يرفعها المالك وحدها
   ═══════════════════════════════════════════════════════
   الارتفاع يأتي من اللوحة عبر style مضمَّن؛ وهذه القواعد تضبط ما
   عداه. object-fit: contain يمنع تشوّه الشعار مهما كانت نسبته،
   و max-width يمنعه من دفع الروابط خارج الشريط على الشاشات الضيقة.
   ═══════════════════════════════════════════════════════ */
.tg-brandlogo{
  width:auto;max-width:min(46vw,340px);object-fit:contain;
  object-position:center;display:block;flex-shrink:0;
}
.tg-brandname{
  font-weight:800;letter-spacing:-.2px;color:inherit;
  white-space:nowrap;line-height:1.2;
}
/* داخل القائمة الجانبية والفوتر الخلفية داكنة: رقعة فاتحة تضمن
   ظهور أي شعار مهما كان لونه، حتى لو لم يرفع المالك نسخة داكنة. */
.sidebar__logo .tg-brandlogo,
.footer__brand-logo .tg-brandlogo{
  background:#fff;border-radius:var(--r8);padding:6px 10px;
  box-shadow:0 1px 4px rgba(0,0,0,.18);max-width:100%;
}
.sidebar__logo .tg-brandname,
.footer__brand-logo .tg-brandname,
.auth-panel__logo .tg-brandname{color:#fff}
.auth-panel__logo .tg-brandlogo{background:#fff;border-radius:var(--r8);padding:7px 12px}
@media (max-width:640px){
  .navbar__brand .tg-brandlogo{max-height:var(--logo-h);max-width:52vw}
}


/* ── Open APIs: مربّعات النطاقات في شاشة الربط البرمجي ── */
.ap-scopes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.ap-scope{
  display:flex;align-items:flex-start;gap:9px;
  padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r10);
  background:var(--s1);cursor:pointer;transition:border-color var(--tf),background var(--tf);
}
.ap-scope:hover{border-color:var(--brand-300);background:var(--s0)}
.ap-scope input{margin-top:3px;flex-shrink:0;accent-color:var(--brand-600);cursor:pointer}
.ap-scope span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ap-scope strong{font-size:var(--tsm);font-weight:600;color:var(--text)}
.ap-scope em{font-size:10px;font-style:normal;color:var(--text-m);line-height:1.6}
.ap-scope:has(input:checked){border-color:var(--brand-600);background:var(--brand-50)}
[data-theme=dark] .ap-scope:has(input:checked){background:rgba(24,95,165,.16)}