/* مظهر عارض نظام التصميم فقط: الشريط العلوي، السايدبار، مساحة العرض، وصفحة الدخول.
   كل الأزرار والحقول والوسوم هنا تأتي من tokens/components.css — لا يُعاد تعريف أي منها.
   كل القيم من التوكنات، فينقلب التخطيط تلقائياً في الوضع RTL ويتبع الثيم الداكن. */

:root{
  --content-max:960px;
  --topbar-h:var(--header-height);
}

body.is-app{background:var(--surface-page)}

/* ---------- skip link ---------- */
.skip-link{position:fixed;top:8px;inset-inline-start:8px;z-index:90;transform:translateY(-200%)}
.skip-link:focus-visible{transform:none}

/* ============================================================ الشريط العلوي */
.topbar{
  position:sticky;top:0;z-index:50;
  /* تباعد أفقي أوسع قليلاً بين مجموعات الشريط: الشعار والتبويبات والأدوات. */
  display:flex;align-items:center;gap:var(--space-4);
  height:var(--topbar-h);padding-inline:var(--space-6);
  background:color-mix(in srgb,var(--surface-page) 82%,transparent);
  backdrop-filter:var(--blur-bar);-webkit-backdrop-filter:var(--blur-bar);
  border-bottom:var(--border-width-hairline) solid var(--border-default)
}
.topbar__logo{display:inline-flex;align-items:center;text-decoration:none}
.topbar__logo img{display:block}
.topbar__tabs{
  display:inline-flex;align-items:center;gap:2px;
  padding-inline-start:var(--space-4);
  border-inline-start:var(--border-width-hairline) solid var(--border-default)
}
.topbar__tab{
  display:inline-flex;align-items:center;padding:6px var(--space-4);border-radius:var(--radius-pill);
  font-size:var(--fs-body-sm);font-weight:var(--fw-medium);line-height:1.4;
  color:var(--text-secondary);text-decoration:none;white-space:nowrap;transition:var(--transition-control)
}
.topbar__tab:hover{background:var(--surface-hover);color:var(--text-primary)}
.topbar__tab.is-active{background:var(--surface-brand-quiet);color:var(--text-brand)}

.topbar__spacer{flex:1}

/* ---------- قائمة الحساب ---------- */
/* اسم المستخدم هو الزر. لوحة القائمة تعيد استخدام عناصر .dl-menu__item نفسها. */
.user-menu{position:relative}
.user-menu__button{
  display:inline-flex;align-items:center;gap:var(--space-3);
  padding:5px var(--space-3) 5px 5px;border-radius:var(--radius-pill);
  background:transparent;border:var(--border-width-hairline) solid transparent;
  font-family:inherit;font-size:var(--fs-body-sm);color:var(--text-secondary);
  /* ارتفاع سطر واحد للنص والأيقونات معاً — نفس ما يفعله .ed-btn.
     تركه على 1.6 الموروث من الصفحة كان يطيل صندوق النص وحده فتبدو الأيقونات أعلى. */
  line-height:1.4;
  cursor:pointer;transition:var(--transition-control)
}
[dir="rtl"] .user-menu__button{padding:5px 5px 5px var(--space-7)}
.user-menu__button:hover{background:var(--surface-hover);color:var(--text-primary)}
.user-menu__avatar{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:var(--radius-pill);
  background:var(--surface-brand-quiet);color:var(--text-brand)
}
.user-menu__avatar i{font-size:14px}
.user-menu__name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline-end:var(--space-1)}
.user-menu__caret{font-size:13px;color:var(--text-muted);transition:var(--transition-control)}
.user-menu.is-open .user-menu__caret{transform:rotate(180deg)}
.user-menu.is-open .user-menu__button{
  background:var(--surface-brand-quiet);border-color:var(--teal-300);color:var(--text-brand)
}

.user-menu__list{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:60;
  min-width:240px;max-width:min(320px,80vw);padding:var(--space-2);
  display:flex;flex-direction:column;gap:1px;
  background:var(--surface-card);border:var(--border-width-hairline) solid var(--border-default);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg)
}
.user-menu__list[hidden]{display:none}
/* ترويسة القائمة تحمل ما لا يتسع له الزر: البريد والدور. */
.user-menu__head{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);
  padding:var(--space-3);margin-bottom:var(--space-2);
  border-bottom:var(--border-width-hairline) solid var(--border-subtle)
}
.user-menu__head-name{font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--text-primary)}
.user-menu__head-email{font-size:11px;color:var(--text-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.user-menu__list .dl-menu__item.is-active{background:var(--surface-brand-quiet);color:var(--text-brand)}

.user-menu__logout{margin:0}
.user-menu__signout{
  width:100%;background:transparent;border:0;font-family:inherit;text-align:start;cursor:pointer
}
.user-menu__signout>i{color:var(--danger)}
.user-menu__signout:hover{color:var(--danger)}

.topbar__locales{display:inline-flex;gap:2px;padding:2px;background:var(--surface-subtle);border-radius:var(--radius-md)}
.topbar__locale{
  display:inline-flex;align-items:center;padding:5px 10px;border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:12px;font-weight:var(--fw-medium);
  color:var(--text-muted);text-decoration:none;transition:var(--transition-control)
}
.topbar__locale:hover{background:var(--surface-hover);color:var(--text-primary)}
.topbar__locale.is-active{background:var(--surface-card);color:var(--text-brand);box-shadow:var(--shadow-xs)}

/* ============================================================ التخطيط */
.shell{display:flex;align-items:flex-start}

.sidebar{
  position:sticky;top:var(--topbar-h);flex:none;
  width:var(--sidebar-width);height:calc(100vh - var(--topbar-h));overflow-y:auto;
  transition:width var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);
  border-inline-end:var(--border-width-hairline) solid var(--border-default);
  background:var(--surface-page);
  /* شريط تمرير نحيف بلون الهوية: يظهر باهتاً ويقوى عند مباشرة السايدبار. */
  scrollbar-width:thin;
  scrollbar-color:var(--border-default) transparent
}
.sidebar:hover,.sidebar:focus-within{scrollbar-color:var(--meridian-teal) transparent}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{
  background:var(--border-default);border-radius:var(--radius-pill);
  transition:var(--transition-control)
}
.sidebar:hover::-webkit-scrollbar-thumb,
.sidebar:focus-within::-webkit-scrollbar-thumb{background:var(--border-strong)}
.sidebar::-webkit-scrollbar-thumb:hover{background:var(--meridian-teal)}
/* الطي على الشاشات الواسعة: العرض وحده يتحرك، والمحتوى الداخلي يحتفظ بعرضه
   الثابت فلا تلتف نصوصه أثناء الحركة. */
@media (min-width:861px){
  .shell.is-sidebar-collapsed .sidebar{
    width:0;opacity:0;overflow:hidden;
    border-inline-end-width:0;pointer-events:none
  }
}
.sidebar__inner{width:var(--sidebar-width);padding:var(--space-6) var(--space-5) var(--space-11)}
.sidebar__filter{margin-bottom:var(--space-6)}
.sidebar__empty{margin:0 0 var(--space-5);font-size:var(--fs-body-sm);color:var(--text-muted)}
.sidebar__group{margin-bottom:var(--space-6)}
.sidebar__group-link{
  display:block;margin-bottom:var(--space-3);
  font-size:var(--fs-eyebrow);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);text-decoration:none
}
.sidebar__group-link:hover{color:var(--text-brand)}
.sidebar__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
/* العنصر سطران: الاسم المختصر في سطر واحد لا يلتف، والتفاصيل تحته بخط أنعم. */
.sidebar__link{
  display:flex;flex-direction:column;gap:1px;padding:6px var(--space-3);border-radius:var(--radius-sm);
  font-size:var(--fs-body-sm);line-height:1.45;color:var(--text-secondary);text-decoration:none;
  border-inline-start:2px solid transparent;transition:var(--transition-control)
}
.sidebar__link-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar__link-detail{
  font-size:11px;line-height:1.35;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.sidebar__link:hover{background:var(--surface-hover);color:var(--text-primary)}
.sidebar__link:hover .sidebar__link-detail,
.sidebar__link.is-active .sidebar__link-detail{color:var(--text-secondary)}
.sidebar__link.is-active{
  background:var(--surface-brand-quiet);color:var(--text-brand);
  font-weight:var(--fw-medium);border-inline-start-color:var(--meridian-teal)
}
.sidebar__scrim{display:none}

.main{flex:1;min-width:0;padding:var(--space-10) var(--pad-gutter) var(--space-14)}
.main>*{max-width:var(--content-max);margin-inline:auto}

/* شريط أدوات المحتوى: يخرق التوسيط عمداً ليلتصق زر الفهرس بحافة العمود. */
.main__bar{
  max-width:none;margin-inline:0;margin-bottom:var(--space-5);
  display:flex;align-items:center;gap:var(--space-3);flex-direction: column;align-items: normal;
}
/* حزم التبويب العامة على الطرف المقابل لزر الفهرس. */
.main__downloads{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-inline-start:auto;justify-content: end;}

/* ============================================================ النظرة العامة */
.overview{display:flex;flex-direction:column;gap:var(--space-5);padding-bottom:var(--space-11)}
.overview__title{margin:0}
.overview__body{max-width:var(--measure-body);margin:0}
.overview__stats{display:flex;flex-wrap:wrap;gap:var(--space-10);padding-block:var(--space-3)}
.overview__usage{display:flex;flex-direction:column;gap:var(--space-3)}
.overview__snippet{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  padding:var(--space-4);border-radius:var(--radius-md);background:var(--surface-subtle)
}
.overview__snippet code{font-family:var(--font-mono);font-size:var(--fs-body-sm);color:var(--text-primary)}

/* ============================================================ الأقسام */
.group{padding-block:var(--space-11) var(--space-8);scroll-margin-top:calc(var(--topbar-h) + var(--space-5))}
.group+.group{border-top:var(--border-width-hairline) solid var(--border-subtle)}
.group__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;margin-bottom:var(--space-8)}
.group__titles{display:flex;flex-direction:column;gap:var(--space-3);flex:1;min-width:280px}
.group__name{margin:0}
.group__desc{margin:0;max-width:var(--measure-body)}
.group__downloads,.spec__downloads{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.group__cards{display:flex;flex-direction:column;gap:var(--space-8)}

/* ============================================================ بطاقة العرض
   بلا overflow:hidden على البطاقة نفسها: قائمة التنزيل المنسدلة تنطلق من ترويستها
   وتتجاوز حدّها، فكان القصّ يبتلع جزءاً منها. تقويس الزوايا السفلية انتقل إلى
   الإطار — وهو آخر أبنائها — فبقي الشكل كما هو. */
.spec{
  background:var(--surface-card);border:var(--border-width-hairline) solid var(--border-default);
  border-radius:var(--radius-lg);
  scroll-margin-top:calc(var(--topbar-h) + var(--space-5))
}
.spec__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;
  padding:var(--space-5) var(--space-6)
}
.spec__titles{display:flex;flex-direction:column;gap:var(--space-1);flex:1;min-width:240px}
.spec__name{margin:0;font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);color:var(--text-primary)}
.spec__subtitle{margin:0;font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-secondary)}

/* الإطار: البطاقة تشغل كامل عرض العمود وارتفاعها يتبع محتواها، فلا اقتطاع. */
.spec__frame{
  position:relative;
  border-top:var(--border-width-hairline) solid var(--border-subtle);
  background:var(--surface-subtle);
  /* البطاقة الأعرض من العمود تُمرَّر هنا بدل أن تُقتطع — انظر measureFrame في app.js.
     contain يمنع تمرير البطاقة من تحريك الصفحة أو تشغيل إيماءة الرجوع في المتصفح. */
  overflow-x:auto;overscroll-behavior-x:contain;
  border-end-start-radius:var(--radius-lg);border-end-end-radius:var(--radius-lg)
}
.spec__iframe{display:block;border:0;width:100%;background:transparent}

/* ================================================ منصّات العرض (الأطقم والشرائح)
   عكس بطاقة المرجع: المحتوى صفحة كاملة بعرضها الأصلي، تُقلَّص بالمقياس لتُرى
   كلها. لذلك لا عمود مقيّد العرض في هذه الصفحة. */
.main--wide{padding-inline:var(--space-8)}
.main--wide>*{max-width:1600px;margin-inline:auto}
.showcase__head{display:flex;flex-direction:column;gap:var(--space-2);padding-bottom:var(--space-6)}
.showcase__intro{margin:0;max-width:var(--measure-body);color:var(--text-secondary)}

.group__stages{display:flex;flex-direction:column;gap:var(--space-8)}

/* كالبطاقة: القصّ على المنصّة نفسها كان يبتلع قائمة التنزيل المنسدلة من ترويستها. */
.stage{
  background:var(--surface-card);border:var(--border-width-hairline) solid var(--border-default);
  border-radius:var(--radius-lg);
  scroll-margin-top:calc(var(--topbar-h) + var(--space-5))
}
.stage__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;
  padding:var(--space-5) var(--space-6)
}
.stage__titles{display:flex;flex-direction:column;gap:var(--space-1);flex:1;min-width:240px}
.stage__name{margin:0;font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);color:var(--text-primary)}
.stage__subtitle{margin:0;font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-secondary)}
.stage__tools{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}

.stage__widths{
  display:inline-flex;gap:2px;padding:2px;
  background:var(--surface-subtle);border-radius:var(--radius-md)
}
.stage__width{
  appearance:none;border:0;cursor:pointer;
  padding:4px 9px;border-radius:var(--radius-sm);background:transparent;
  font-family:var(--font-mono);font-size:11px;font-weight:var(--fw-medium);
  color:var(--text-muted);transition:var(--transition-control)
}
.stage__width:hover{background:var(--surface-hover);color:var(--text-primary)}
.stage__width.is-active{background:var(--surface-card);color:var(--text-brand);box-shadow:var(--shadow-xs)}

.stage__viewport{
  position:relative;overflow:hidden;
  border-top:var(--border-width-hairline) solid var(--border-subtle);
  background:var(--surface-subtle);
  border-end-start-radius:var(--radius-lg);border-end-end-radius:var(--radius-lg)
}
.stage__iframe{display:block;border:0;transform-origin:top left;background:var(--surface-page)}
[dir="rtl"] .stage__iframe{transform-origin:top right}

.stage__viewport--static{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6)}
.stage__thumb{
  display:block;width:100%;height:auto;border-radius:var(--radius-md);
  border:var(--border-width-hairline) solid var(--border-subtle)
}
.stage__note{
  display:flex;align-items:center;gap:var(--space-2);margin:0;
  font-size:var(--fs-body-sm);color:var(--text-muted)
}
.stage__note>i{font-size:15px;color:var(--text-brand)}

/* ============================================================ أزرار التنزيل */
.dl-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:var(--radius-pill);
  border:var(--border-width-hairline) solid var(--border-default);background:var(--surface-card);
  font-family:var(--font-sans);font-size:12px;font-weight:var(--fw-medium);line-height:1.4;
  color:var(--text-secondary);text-decoration:none;white-space:nowrap;transition:var(--transition-control)
}
.dl-chip>i{font-size:14px;color:var(--text-brand)}
.dl-chip:hover{background:var(--surface-brand-quiet);border-color:var(--teal-300);color:var(--text-brand)}
.dl-size{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}

/* قائمة منسدلة واحدة بدل صفٍّ من الأزرار عند تعدّد الموارد في الموضع نفسه. */
.dl-menu{position:relative;display:inline-block}
.dl-menu__button{cursor:pointer}
.dl-menu__count{
  font-family:var(--font-mono);font-size:11px;color:var(--text-muted);
  padding-inline:5px;border-radius:var(--radius-pill);background:var(--surface-subtle)
}
.dl-menu__caret{font-size:13px !important;color:var(--text-muted) !important;transition:var(--transition-control)}
.dl-menu.is-open .dl-menu__caret{transform:rotate(180deg)}
.dl-menu.is-open .dl-menu__button{background:var(--surface-brand-quiet);border-color:var(--teal-300);color:var(--text-brand)}

.dl-menu__list{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:30;
  min-width:240px;max-width:min(320px,80vw);padding:var(--space-2);
  display:flex;flex-direction:column;gap:1px;
  background:var(--surface-card);border:var(--border-width-hairline) solid var(--border-default);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg)
}
.dl-menu__list[hidden]{display:none}
.dl-menu__item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:7px var(--space-3);border-radius:var(--radius-sm);
  font-size:var(--fs-body-sm);line-height:1.4;color:var(--text-secondary);text-decoration:none;
  transition:var(--transition-control)
}
.dl-menu__item>i{font-size:14px;color:var(--text-brand);flex:none}
.dl-menu__item:hover{background:var(--surface-hover);color:var(--text-primary)}
.dl-menu__item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-menu__item-size{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);flex:none}

/* ============================================================ صفحة الدخول */
body.is-auth{background:var(--surface-page)}
.auth{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
.auth__panel{
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-10);
  padding:var(--space-12) var(--space-11);color:var(--text-on-dark)
}
.auth__brand img{display:block}
.auth__tagline{
  margin:0;max-width:var(--measure-narrow);
  font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-on-dark-muted)
}
.auth__form{display:flex;align-items:center;justify-content:center;padding:var(--space-10) var(--pad-gutter)}
.auth__form-inner{display:flex;flex-direction:column;gap:var(--space-4);width:100%;max-width:380px}
.auth__title{margin:0}
.auth__intro{margin:0}
.auth__fields{display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-3)}
.auth__note{margin:0}
.auth__locales{display:flex;gap:var(--space-2);margin-top:var(--space-3)}
.auth__locales a{text-decoration:none}

/* ============================================================ الشاشات الضيقة */
@media (max-width:1080px){
  :root{--content-max:100%}
  /* الاسم يختفي فيبقى الزر أيقونة الحساب وحدها — القائمة نفسها لا تتغيّر. */
  .user-menu__name{display:none}
}

@media (max-width:860px){
  .topbar{padding-inline:var(--space-5);gap:var(--space-3)}
  .main{padding:var(--space-8) var(--space-5) var(--space-12)}

  /* السايدبار يصبح درجاً منزلقاً */
  .sidebar{
    position:fixed;inset-block:var(--topbar-h) 0;inset-inline-start:0;z-index:45;
    height:auto;transform:translateX(-100%);
    transition:transform var(--dur-base) var(--ease-out);
    box-shadow:var(--shadow-lg)
  }
  [dir="rtl"] .sidebar{transform:translateX(100%)}
  .sidebar.is-open,[dir="rtl"] .sidebar.is-open{transform:none}
  .sidebar__scrim{display:block;position:fixed;inset:var(--topbar-h) 0 0;z-index:44;background:var(--surface-overlay)}
  .sidebar__scrim[hidden]{display:none}

  .auth{grid-template-columns:1fr}
  .auth__panel{padding:var(--space-9) var(--space-6);gap:var(--space-6)}
  .auth__tagline{max-width:none}
}

@media (max-width:560px){
  /* الشريط العلوي يصير صفّين: الأدوات فوق والتبويبات تحتها بعرض كامل.
     التبويبات الأربع تحتاج ‎267px‎ ولا تتّسع بجانب الأدوات في شاشة ‎375px‎،
     فكانت تفيض خارج الشاشة وتسحب الصفحة كلها معها وتسحق الشعار إلى صفر عرض.
     صفٌّ خاص بها أوضح من شريط تمرير أفقي لا يتجاوز عرضه ‎90px‎.
     رفع ‎--topbar-h‎ هنا يكفي: السايدبار والحجاب وscroll-margin كلها تشتقّ منه. */
  :root{--topbar-h:calc(var(--header-height) + 40px)}

  .topbar{flex-wrap:wrap;align-content:center;row-gap:var(--space-4)}
  /* الشعار مربّع ‎40×40‎ ولا يجوز أن يتقلّص: تقلّصه إلى صفر هو ما كان يُخفيه. */
  .topbar__logo{flex:none}
  .topbar__tabs{
    order:1;flex:1 0 100%;min-width:0;
    /* التبويبات وحدها في صفّها فتُوسَّط فيه. safe يمنع اختفاء أولها خارج
       حدود التمرير لو ضاق الصف يوماً عن محتواه. */
    justify-content:safe center;
    /* الفاصل الرأسي منطقه أن التبويبات بجانب الشعار — وقد صارت تحته. */
    padding-inline-start:0;border-inline-start:none;
    /* احتياط للغات أطول أو تبويب خامس: تمرير بلا شريط مرئي. */
    overflow-x:auto;scrollbar-width:none
  }
  .topbar__tabs::-webkit-scrollbar{display:none}

  .overview__stats{gap:var(--space-7)}
  .spec__head{padding:var(--space-5)}
}

/* ============================================================ إدارة المستخدمين */
/* عمودان على الشاشات الواسعة: النموذج ملتصق أعلى الشاشة، والجدول يمرّ بجانبه.
   لا يُعاد تعريف أي حقل أو زر هنا — كلها من tokens/components.css. */
/* minmax(0,1fr) لا 1fr: عنصر الشبكة الافتراضي min-width:auto فلا يضيق دون عرض
   محتواه، فكان الجدول العريض ينفخ العمود ويجرّ الصفحة كلها معه بدل أن يمرّر
   داخل .dtable-scroll. الصفر يسمح للعمود بالضيق، فيعمل تمرير الجدول كما صُمّم. */
.users{
  display:grid;grid-template-columns:minmax(320px,380px) minmax(0,1fr);
  gap:var(--space-7);align-items:start
}
.users__toast{margin-bottom:var(--space-5)}

.users__form{position:sticky;top:calc(var(--topbar-h) + var(--space-6));padding:var(--space-6)}
.users__fields{display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-5)}
.users__actions{display:flex;gap:var(--space-3);flex-wrap:wrap}
.users__divider{
  height:var(--border-width-hairline);margin:var(--space-7) 0 var(--space-6);
  background:var(--border-default)
}

.users__name{display:block;font-weight:var(--fw-medium);color:var(--text-primary)}
.users__email{display:block;font-size:12px;color:var(--text-muted)}
.users__date{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);white-space:nowrap}
.users__you{color:var(--text-muted)}

.users__row-actions{white-space:nowrap}
.users__row-actions>*{display:inline-flex;vertical-align:middle;margin-inline-end:var(--space-2)}
.users__row-actions>*:last-child{margin-inline-end:0}
.users__delete:hover{color:var(--danger);border-color:var(--danger-border)}

@media (max-width:1100px){
  .users{grid-template-columns:minmax(0,1fr)}
  .users__form{position:static}
}

/* ============================================================ جدول بيانات مشترك */
/* لوحة جدول واحدة تخدم صفحة المستخدمين وصفحة السجل — لا يُنسخ التنسيق لكل صفحة. */
.dtable-panel{
  background:var(--surface-card);border:var(--border-width-hairline) solid var(--border-default);
  border-radius:var(--radius-lg);overflow:hidden
}
.dtable-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-5) var(--space-6);
  border-bottom:var(--border-width-hairline) solid var(--border-default)
}
.dtable-head .ed-card-title{margin:0}
/* position:relative شرط لعمل الحاوية: العنصر ذو position:absolute لا يقصّه
   overflow إلا إن كان الحاوي كتلته الحاوية. بدونها كان عنوان عمود «إجراءات»
   المخفي بصرياً (‎.ed-sr-only‎ المطلق) يفلت من الحاوية ويمدّ الصفحة كلها. */
.dtable-scroll{overflow-x:auto;position:relative}

.dtable{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm)}
.dtable th{
  padding:var(--space-3) var(--space-6);text-align:start;
  font-size:var(--fs-eyebrow);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap;
  border-bottom:var(--border-width-hairline) solid var(--border-default)
}
.dtable td{
  padding:var(--space-4) var(--space-6);vertical-align:middle;
  border-bottom:var(--border-width-hairline) solid var(--border-subtle)
}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable tbody tr:hover{background:var(--surface-hover)}
/* الصف المحدَّد (قيد التعديل أو المصفّى عليه) يحمل علامة العنصر النشط نفسها. */
.dtable tbody tr.is-selected{background:var(--surface-brand-quiet)}

/* ============================================================ سجل التنزيلات */
.log{display:flex;flex-direction:column;gap:var(--space-6)}

.log__filters{
  display:flex;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;
  padding:var(--space-5) var(--space-6);
  background:var(--surface-subtle);border:var(--border-width-hairline) solid var(--border-default);
  border-radius:var(--radius-lg)
}
.log__filters .ed-field{min-width:220px}
.log__filter-actions{display:flex;gap:var(--space-3);margin-inline-start:auto}

.log__stats{display:flex;gap:var(--space-9);flex-wrap:wrap}
.log__stat-date{font-family:var(--font-mono);font-size:var(--fs-h4)}

/* الجدول يأخذ ما تبقّى، ولوحة الأكثر طلباً بعرض ثابت بجانبه. */
/* minmax(0,1fr) للسبب نفسه الموضّح عند .users — الجدول يمرّر ولا ينفخ الصفحة. */
.log__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:var(--space-6);align-items:start}
.log__top{padding:var(--space-6)}
.log__top-list{list-style:none;margin:var(--space-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}

.log__user{color:var(--text-brand);text-decoration:none;font-weight:var(--fw-medium)}
.log__user:hover{text-decoration:underline}
.log__user-name{display:block;font-weight:var(--fw-medium);color:var(--text-primary)}
.log__email{display:block;font-size:12px;color:var(--text-muted)}
.log__asset{display:block;color:var(--text-primary)}
.log__key{display:block;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
.log__date{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);white-space:nowrap}
.log__num{font-family:var(--font-mono);color:var(--text-primary)}

.log__empty{
  display:flex;align-items:center;gap:var(--space-3);
  margin:0;padding:var(--space-9) var(--space-6);
  color:var(--text-muted);justify-content:center
}
.log__pager{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) var(--space-6);
  border-top:var(--border-width-hairline) solid var(--border-default)
}
.log__pager .ed-caption{color:var(--text-muted)}

@media (max-width:1100px){
  .log__grid{grid-template-columns:minmax(0,1fr)}
  .log__filter-actions{margin-inline-start:0}
}