/* =============================================================
   ADMIN — settings, users, services, tips, audit
   Same design language as the rest of the app: warm canvas,
   restrained typography, signature accents.
   ============================================================= */

.adm-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 920px) {
  .adm-shell { grid-template-columns: 1fr; }
}

/* ----- Sidebar nav ----- */
.adm-side {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  padding: 10px;
  box-shadow: var(--f-shadow-xs);
}
.adm-side__title {
  font-family: var(--f-disp);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--f-ink-3);
  padding: 6px 10px 8px;
}
.adm-side__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--f-r);
  border: 0;
  background: transparent;
  color: var(--f-ink-2);
  font-family: var(--f-arab);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  text-align: start;
  transition: background var(--f-dur) var(--f-ease), color var(--f-dur);
}
.adm-side__btn .material-symbols-outlined { font-size: 18px; color: var(--f-ink-3); }
.adm-side__btn:hover {
  background: var(--f-surface-2);
  color: var(--f-ink);
}
.adm-side__btn.is-on {
  background: color-mix(in srgb, var(--f-navy) 8%, var(--f-surface));
  color: var(--f-ink);
  font-weight: 600;
}
.adm-side__btn.is-on .material-symbols-outlined { color: var(--f-navy); }
.f-body.dark .adm-side__btn.is-on { background: color-mix(in srgb, var(--f-cs) 18%, transparent); }
.f-body.dark .adm-side__btn.is-on .material-symbols-outlined { color: var(--f-cs); }

.adm-side__count {
  margin-inline-start: auto;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--f-ink-3);
  background: var(--f-surface-2);
  border-radius: 999px;
  padding: 2px 8px;
}
.adm-side__sep { height: 1px; background: var(--f-border); margin: 8px 4px; }

.adm-side__user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: var(--f-surface-2);
  border-radius: var(--f-r);
  margin-top: 6px;
}
/* نفسُ الشخص في جانب الإدارة — يستهلك مفردةَ الأفاتار الواحدة
   (`final.css § الأفاتار`). و`--brand-grad` كان **التدرّجَ الثالث** على
   نفس المفهوم، وهو ما جعل الشكلَ غيرَ متناسق. */
.adm-side__user-avatar {
  width: var(--fav-md); height: var(--fav-md);
  border-radius: var(--fav-r);
  background: var(--fav-fill);
  border: 1px solid var(--fav-edge);
  color: var(--fav-ink); font-weight: 700; font-size: 0.85rem;
  display: grid; place-items: center;
  font-family: var(--fav-face);
}
.adm-side__user-main { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.adm-side__user-name { font-weight: 700; color: var(--f-ink); font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-side__user-role { font-size: 0.72rem; color: var(--f-ink-3); }

/* ----- Main column ----- */
.adm-main {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
}

.adm-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 4px;
}
/* عنوان الصفحة — نفس درجة `.f-pagehead h1` بالضبط (٣١ يوليو ٢٠٢٦).
   القياس أظهر أربعة مقاسات لعنوان الصفحة نفسه في أربع شاشات داخلية:
   الإشراف والتحكم 35px عبر DS.PageHead · الإدارة **25px** برأسٍ خاص ·
   التقارير **17px** لأنها كانت تستعير صنف عنوان قسم (.f-h2__title).
   الإدارة قوقعة بعمودين ورأسها داخل العمود الأيمن، فلا تُرحَّل بنيتها إلى
   PageHead (الخطّ الكهربائي وسكّة الأيقونة للصفحات الكاملة)، لكن
   **درجتها الطباعية تُطابق** فيقرأ المستخدم عنواناً واحداً في كل الشاشات. */
.adm-head__title {
  font-family: var(--f-disp);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);   /* = .f-pagehead h1 */
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--f-ink);
  display: flex; align-items: center; gap: 10px;
  margin: 0;
}
.adm-head__title .material-symbols-outlined { color: var(--f-navy); font-size: 28px; }
.f-body.dark .adm-head__title .material-symbols-outlined { color: var(--f-cs); }
/* الوصف = درجة `.f-pagehead__lede` (1rem) لا 0.88 */
.adm-head__sub {
  display: block;
  color: var(--f-ink-2);
  font-size: 1rem;
  line-height: 1.6;
  font-family: var(--f-arab);
  margin-top: 6px;
  max-width: 62ch;
}
.adm-head__actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* ----- Toolbar (search + filter row above tables) ----- */
.adm-toolbar {
  display: flex; gap: 10px; flex-wrap: wrap;
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  padding: 10px 12px;
  align-items: center;
}
.adm-search {
  flex: 1 1 240px;
  display: flex; align-items: center; gap: 8px;
  background: var(--f-bg-2);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r);
  padding: 6px 12px;
  color: var(--f-ink-2);
}
.adm-search input {
  flex: 1; border: 0; background: transparent;
  font-family: var(--f-arab);
  font-size: 0.92rem;
  color: var(--f-ink);
  outline: none;
}
.adm-search .material-symbols-outlined { font-size: 18px; color: var(--f-ink-3); }
.adm-toolbar__filter {
  display: inline-flex; gap: 6px; flex-wrap: wrap;
}
.adm-chip {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--f-border);
  background: var(--f-surface-2);
  color: var(--f-ink-2);
  font-size: 0.82rem;
  font-family: var(--f-arab);
  cursor: pointer;
  transition: color var(--f-dur),
              background-color var(--f-dur),
              border-color var(--f-dur),
              box-shadow var(--f-dur),
              transform var(--f-dur),
              opacity var(--f-dur);
}
.adm-chip:hover { color: var(--f-ink); border-color: var(--f-border-2); }
.adm-chip.is-on {
  background: var(--f-navy);
  color: #fff;
  border-color: var(--f-navy);
}

/* ----- Table ----- */
.adm-tbl-wrap {
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  overflow: hidden;
  box-shadow: var(--f-shadow-xs);
}
.adm-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-arab);
  font-size: 0.9rem;
}
.adm-tbl thead th {
  background: var(--f-surface-2);
  color: var(--f-ink-2);
  font-weight: 600;
  font-size: 0.78rem;
  text-align: start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--f-border);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.adm-tbl tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--f-border);
  color: var(--f-ink);
  vertical-align: middle;
}
.adm-tbl tbody tr:last-child td { border-bottom: 0; }
.adm-tbl tbody tr:hover td { background: var(--f-bg-2); }

.adm-tbl__code {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--f-ink-2);
  background: var(--f-bg-2);
  padding: 3px 8px;
  border-radius: var(--f-r-sm);
  display: inline-block;
}
.adm-tbl__sec {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--sec-c, var(--f-navy)) 14%, transparent);
  /* لونُ القسم على تدرُّجٍ منه: قِيس 3.83 والعتبةُ 4.5 — يُمزَج نحو الحبر */
  color: color-mix(in oklch, var(--sec-c, var(--f-navy)) 68%, var(--f-ink));
  font-family: var(--f-disp);
}
.adm-tbl__actions {
  display: inline-flex; gap: 6px;
}
.adm-tbl__btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--f-border);
  background: var(--f-surface-2);
  color: var(--f-ink-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--f-dur),
              background-color var(--f-dur),
              border-color var(--f-dur),
              box-shadow var(--f-dur),
              transform var(--f-dur),
              opacity var(--f-dur);
}
.adm-tbl__btn:hover { color: var(--f-ink); border-color: var(--f-border-2); background: var(--f-surface-3); }
.adm-tbl__btn .material-symbols-outlined { font-size: 17px; }
.adm-tbl__btn--danger:hover { color: var(--f-err); border-color: var(--f-err); }

.adm-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--f-arab);
}
/* ألوانُ العلامة موزونةٌ على أرضية الصفحة (`--f-ok` موثَّقٌ بـ4.54)، وهذه
   الشاراتُ تضع اللونَ نفسَه على تدرُّجٍ 16% منه — فتنزل الأرضيةُ تحته
   وينزل معها التضادّ: قِيس ok = 4.32 وinfo = 4.45 والعتبةُ 4.5 عند 11.5px.
   العلاجُ نمطُ `--roles` أدناه نفسُه: يُمزَج الحبرُ نحو `--f-ink`، وهو
   يرفع التضادَّ في السمتين معاً لأن الحبرَ الأعلى ينقلب مع السمة. */
.adm-pill--ok    { background: color-mix(in srgb, var(--f-ok)   16%, transparent); color: color-mix(in oklch, var(--f-ok) 82%, var(--f-ink)); }
.adm-pill--off   { background: color-mix(in srgb, var(--f-ink-3) 16%, transparent); color: var(--f-ink-2); }
.adm-pill--warn  { background: color-mix(in srgb, var(--f-warn) 16%, transparent); color: var(--f-warn); }
.adm-pill--info  { background: color-mix(in srgb, var(--f-cs)   16%, transparent); color: color-mix(in oklch, var(--f-cs) 82%, var(--f-ink)); }

.adm-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--f-ink-3);
}
.adm-empty .material-symbols-outlined { font-size: 44px; opacity: 0.5; margin-bottom: 8px; }

/* ----- Stat cards (overview) ----- */
.adm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.adm-statcard {
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.adm-statcard::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 3px;
  background: var(--st-c, var(--f-navy));
}
.adm-statcard__lbl {
  font-size: 0.82rem;
  color: var(--f-ink-2);
  font-family: var(--f-arab);
  display: flex; align-items: center; gap: 6px;
}
.adm-statcard__lbl .material-symbols-outlined { font-size: 18px; color: var(--st-c, var(--f-navy)); }
.adm-statcard__val {
  font-family: var(--f-disp);
  font-size: 2rem;
  font-weight: 700;
  color: var(--f-ink);
  margin-top: 6px;
  line-height: 1;
}
.adm-statcard__sub {
  font-size: 0.78rem;
  color: var(--f-ink-3);
  margin-top: 4px;
}

/* ----- Modal ----- */
.adm-modal {
  position: fixed; inset: 0;
  z-index: 1100;
  display: grid; place-items: center;
  padding: 20px;
  background: color-mix(in srgb, black 50%, transparent);
  backdrop-filter: blur(6px);
  animation: admFade 180ms var(--f-ease);
}
@keyframes admFade { from { opacity: 0; } to { opacity: 1; } }
.adm-modal__sheet {
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-lg);
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 22px;
  box-shadow: var(--f-shadow-md);
  animation: admSlide 220ms var(--f-spring);
  font-family: var(--f-arab);
}
@keyframes admSlide {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.adm-modal__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.adm-modal__head .material-symbols-outlined {
  font-size: 24px; color: var(--f-navy);
  background: color-mix(in srgb, var(--f-navy) 12%, transparent);
  padding: 8px; border-radius: var(--f-r-sm);
}
.f-body.dark .adm-modal__head .material-symbols-outlined {
  color: var(--f-cs);
  background: color-mix(in srgb, var(--f-cs) 18%, transparent);
}
.adm-modal__title { font-family: var(--f-disp); font-size: 1.18rem; font-weight: 700; color: var(--f-ink); margin: 0; }
.adm-modal__sub { font-size: 0.84rem; color: var(--f-ink-3); margin-top: 2px; }

.adm-form {
  display: flex; flex-direction: column; gap: 14px;
}
.adm-form__row { display: grid; gap: 14px; }
.adm-form__row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .adm-form__row--2 { grid-template-columns: 1fr; } }

.adm-field { display: flex; flex-direction: column; gap: 6px; }
.adm-field > label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--f-ink-2);
}
.adm-field input,
.adm-field select,
.adm-field textarea {
  width: 100%;
  background: var(--f-bg-2);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r);
  padding: 9px 12px;
  font-family: var(--f-arab);
  font-size: 0.92rem;
  color: var(--f-ink);
  outline: none;
  transition: border-color var(--f-dur), box-shadow var(--f-dur);
}
.adm-field input:focus,
.adm-field select:focus,
.adm-field textarea:focus {
  border-color: var(--f-navy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-navy) 18%, transparent);
}
.adm-field textarea { min-height: 90px; resize: vertical; }
.adm-field__help { font-size: 0.74rem; color: var(--f-ink-3); }

.adm-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  user-select: none;
}
.adm-toggle__sw {
  width: 38px; height: 22px;
  background: var(--f-surface-3);
  border-radius: 999px;
  position: relative;
  transition: background var(--f-dur);
}
.adm-toggle__sw::after {
  content: '';
  position: absolute;
  top: 2px; inset-inline-start: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  transition: transform var(--f-dur) var(--f-spring);
}
.adm-toggle.is-on .adm-toggle__sw { background: var(--f-ok); }
.adm-toggle.is-on .adm-toggle__sw::after { transform: translateX(-16px); }
.adm-toggle__lbl { font-size: 0.88rem; color: var(--f-ink); font-weight: 500; }

.adm-modal__foot {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--f-border);
}

/* ----- Settings page ----- */
.adm-section {
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  padding: 18px;
  box-shadow: var(--f-shadow-xs);
}
.adm-section__title {
  font-family: var(--f-disp);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--f-ink);
  margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px;
}
.adm-section__title .material-symbols-outlined { color: var(--f-navy); font-size: 20px; }
.f-body.dark .adm-section__title .material-symbols-outlined { color: var(--f-cs); }
.adm-section__sub { color: var(--f-ink-3); font-size: 0.82rem; margin: 0 0 14px; }

/* ----- Audit feed ----- */
.adm-audit {
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  overflow: hidden;
}
.adm-audit__row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--f-border);
  font-family: var(--f-arab);
  font-size: 0.88rem;
}
.adm-audit__row:last-child { border-bottom: 0; }
/* صفوف السجل الكامل تحتوي زرها الشبكي الخاص — الصف حاوية فقط
   (يصحح انحشار المحتوى في عمود 110px المخصص لقائمة النشاط المصغرة) */
.adm-audit__row:has(> .adm-audit__head) {
  display: block;
  padding: 0;
}
.adm-audit__ts {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--f-ink-3);
}
.adm-audit__main {
  color: var(--f-ink);
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
/* الصياغة العربية أولاً (مصدرها opsAuditMeta الموحّد)، والرمز التقني تلوها بخفوت */
.adm-audit__verb {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-audit__main .adm-audit__action { flex: none; margin: 0; }
.adm-audit__action {
  display: inline-block;
  background: var(--f-bg-2);
  padding: 2px 8px;
  border-radius: var(--f-r-sm);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: var(--f-ink-3);
  direction: ltr;
}
.adm-audit__by {
  font-size: 0.78rem;
  color: var(--f-ink-3);
  white-space: nowrap;
}

/* ----- Service detail collapsible ----- */
.adm-svc-row { cursor: pointer; }
.adm-svc-row__icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--sec-c, var(--f-navy)) 14%, transparent);
  color: var(--sec-c, var(--f-navy));
}

/* ----- Tip preview in admin ----- */
.adm-tip-preview {
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--tip-c, var(--f-cs)) 8%, var(--f-surface));
  border: 1px solid color-mix(in srgb, var(--tip-c, var(--f-cs)) 20%, var(--f-border));
  border-radius: var(--f-r);
  padding: 8px 12px;
  margin-bottom: 10px;
}
.adm-tip-preview .material-symbols-outlined {
  color: var(--tip-c, var(--f-cs)); font-size: 20px;
}
.adm-tip-preview__title { font-weight: 700; color: var(--f-ink); font-size: 0.9rem; }
.adm-tip-preview__body  { font-size: 0.82rem; color: var(--f-ink-2); }

/* ----- Color picker chips for tips ----- */
.adm-colors {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.adm-color {
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--f-border);
  position: relative;
  transition: transform var(--f-dur) var(--f-spring);
}
.adm-color.is-on {
  border-color: var(--f-ink);
  transform: scale(1.12);
  box-shadow: 0 0 0 2px var(--f-surface), 0 0 0 4px color-mix(in srgb, var(--c) 50%, transparent);
}

/* =============================================================
   USER MANAGEMENT — table cells, drawer, sessions, security view
   ============================================================= */

/* select dropdown styled like .f-btn */
.adm-select {
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-sm);
  padding: 8px 14px;
  font-family: var(--f-arab);
  font-size: 0.88rem;
  color: var(--f-ink);
  cursor: pointer;
  transition: border-color var(--f-dur);
  min-width: 130px;
}
.adm-select:hover  { border-color: var(--f-border-2); }
.adm-select:focus  {
  outline: none;
  border-color: var(--f-navy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-navy) 14%, transparent);
}
.f-body.dark .adm-select:focus { border-color: var(--f-cs); }

/* checkbox in table */
.adm-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.adm-checkbox input { display: none; }
.adm-checkbox > span {
  width: 18px; height: 18px;
  border: 1.5px solid var(--f-border-2);
  border-radius: 4px;
  background: var(--f-bg-2);
  transition: color var(--f-dur),
              background-color var(--f-dur),
              border-color var(--f-dur),
              box-shadow var(--f-dur),
              transform var(--f-dur),
              opacity var(--f-dur);
  position: relative;
}
.adm-checkbox input:checked + span {
  background: var(--f-navy);
  border-color: var(--f-navy);
}
.adm-checkbox input:checked + span::after {
  content: '';
  position: absolute; top: 2px; inset-inline-start: 5px;
  width: 4px; height: 9px;
  border-right: 0; border-left: 0;
  border-bottom: 2px solid #fff;
  border-inline-end: 2px solid #fff;
  transform: rotate(45deg);
}
.f-body.dark .adm-checkbox input:checked + span { background: var(--f-cs); border-color: var(--f-cs); }

/* bulk action bar */
.adm-bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--f-navy) 6%, var(--f-surface));
  border: 1px solid color-mix(in srgb, var(--f-navy) 18%, var(--f-border));
  border-radius: var(--f-r-md);
  font-family: var(--f-arab);
  font-size: 0.9rem;
  color: var(--f-ink);
  animation: adm-bulk-in 200ms var(--f-spring);
}
@keyframes adm-bulk-in { from { transform: translateY(-4px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.adm-bulk b { color: var(--f-navy); font-weight: 700; }
.f-body.dark .adm-bulk b { color: var(--f-cs); }
.adm-bulk__actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.adm-bulk > span { display: inline-flex; align-items: center; gap: 6px; }

/* users table cells */
.adm-tbl--users tr.is-sel td { background: color-mix(in srgb, var(--f-navy) 4%, var(--f-surface)); }
.adm-cell--user { cursor: pointer; }
.adm-cell--user:hover { background: var(--f-bg-2); }
.adm-userav {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--f-navy), var(--f-crimson));
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.88rem;
  flex-shrink: 0;
}
.adm-cell--user {
  display: flex; align-items: center; gap: 12px;
}
.adm-userinfo { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.adm-userinfo__name {
  font-weight: 600;
  color: var(--f-ink);
  font-size: 0.92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-userinfo__meta {
  font-size: 0.76rem;
  color: var(--f-ink-3);
  font-family: var(--f-mono);
}
.adm-userscope { display: inline-flex; flex-direction: column; line-height: 1.25; }
.adm-userscope__b { font-size: 0.84rem; color: var(--f-ink); font-weight: 600; }
.adm-userscope__d { font-size: 0.72rem; color: var(--f-ink-3); }

/* extra pill tones */
.adm-pill--warn  { background: color-mix(in srgb, var(--f-warn) 14%, transparent); color: var(--f-warn); }
.adm-pill--off   { background: color-mix(in srgb, var(--f-ink-3) 16%, transparent); color: var(--f-ink-2); }

/* warn variant of f-btn */
.f-btn--warn { color: var(--f-warn); border-color: color-mix(in srgb, var(--f-warn) 35%, var(--f-border)); }
.f-btn--warn:hover { background: color-mix(in srgb, var(--f-warn) 10%, transparent); }
.f-btn--danger { color: var(--f-err); border-color: color-mix(in srgb, var(--f-err) 35%, var(--f-border)); }
.f-btn--danger:hover { background: color-mix(in srgb, var(--f-err) 10%, transparent); }

/* =============================================================
   DRAWER — side panel
   ============================================================= */
.adm-drawer {
  position: fixed; inset: 0;
  z-index: 1200;
  background: color-mix(in srgb, var(--f-ink) 32%, transparent);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: flex-start;     /* drawer slides from start (inline-start = right in RTL) */
  animation: adm-fade 180ms ease-out;
}
@keyframes adm-fade { from { opacity: 0; } to { opacity: 1; } }
.adm-drawer__sheet {
  width: min(820px, 100%);
  height: 100%;
  background: var(--f-bg-2);
  display: flex;
  flex-direction: column;
  box-shadow: var(--f-shadow-md);
  animation: adm-slide 280ms var(--f-spring);
  overflow: hidden;
}
@keyframes adm-slide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
/* in LTR, slide from left instead */
html[dir="ltr"] .adm-drawer__sheet,
[dir="ltr"] .adm-drawer__sheet {
  animation-name: adm-slide-ltr;
}
@keyframes adm-slide-ltr {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.adm-drawer__hdr {
  position: relative;
  padding: 20px 24px 16px;
  background: var(--f-surface);
  border-bottom: 1px solid var(--f-border);
}
.adm-drawer__close {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  width: 34px; height: 34px;
  border-radius: var(--f-r-sm);
  border: 1px solid var(--f-border);
  background: var(--f-surface);
  color: var(--f-ink-2);
  cursor: pointer;
  display: grid; place-items: center;
  transition: color var(--f-dur),
              background-color var(--f-dur),
              border-color var(--f-dur),
              box-shadow var(--f-dur),
              transform var(--f-dur),
              opacity var(--f-dur);
}
.adm-drawer__close:hover { background: var(--f-bg-2); color: var(--f-ink); }
.adm-drawer__close .material-symbols-outlined { font-size: 20px; }

.adm-drawer__id {
  display: flex; gap: 16px; align-items: center;
  padding-inline-start: 48px;       /* leave room for close button */
}
.adm-drawer__av {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--f-navy), var(--f-crimson));
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.adm-drawer__name {
  font-family: var(--f-disp);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--f-ink);
}
.adm-drawer__meta {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  color: var(--f-ink-3);
  margin: 2px 0 8px;
}
.adm-drawer__badges {
  display: flex; gap: 6px; flex-wrap: wrap;
}

.adm-drawer__actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--f-border);
}

/* tabs */
.adm-drawer__tabs {
  display: flex;
  background: var(--f-surface);
  border-bottom: 1px solid var(--f-border);
  padding: 0 20px;
  gap: 0;
  overflow-x: auto;
}
.adm-drawer__tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  font-family: var(--f-arab);
  font-size: 0.88rem;
  color: var(--f-ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--f-dur),
              background-color var(--f-dur),
              border-color var(--f-dur),
              box-shadow var(--f-dur),
              transform var(--f-dur),
              opacity var(--f-dur);
  white-space: nowrap;
  font-weight: 500;
}
.adm-drawer__tab:hover { color: var(--f-ink); }
.adm-drawer__tab.is-on {
  color: var(--f-navy);
  border-bottom-color: var(--f-navy);
  font-weight: 600;
}
.f-body.dark .adm-drawer__tab.is-on { color: var(--f-cs); border-bottom-color: var(--f-cs); }
.adm-drawer__tab .material-symbols-outlined { font-size: 16px; }

/* body */
.adm-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px;
}

/* readonly fields grid */
.adm-detail__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  padding: 18px 22px;
}
@media (max-width: 640px) { .adm-detail__grid { grid-template-columns: 1fr; } }
.adm-detail__note {
  font-size: 0.86rem;
  color: var(--f-ink-2);
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.adm-detail__note b { color: var(--f-ink); }
.adm-field-ro { display: flex; flex-direction: column; gap: 4px; }
.adm-field-ro__lbl {
  font-size: 0.74rem;
  color: var(--f-ink-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.adm-field-ro__val {
  font-size: 0.92rem;
  color: var(--f-ink);
  font-weight: 500;
}
.adm-field-ro__val.mono {
  font-family: var(--f-mono);
  font-size: 0.86rem;
  direction: ltr;
  unicode-bidi: plaintext;
}

/* permissions list by category */
.adm-permcat { margin-bottom: 18px; }
.adm-permcat__lbl {
  font-family: var(--f-disp);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--f-ink);
  margin: 0 0 8px;
  padding-inline-start: 8px;
  border-inline-start: 3px solid var(--f-navy);
}
.f-body.dark .adm-permcat__lbl { border-inline-start-color: var(--f-cs); }
.adm-permcat__list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.adm-permpill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--f-ok) 10%, var(--f-surface));
  border: 1px solid color-mix(in srgb, var(--f-ok) 25%, var(--f-border));
  color: var(--f-ok);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: var(--f-arab);
}
.adm-permpill .material-symbols-outlined { font-size: 14px; }

/* sessions list */
.adm-sessions { display: flex; flex-direction: column; gap: 10px; }
.adm-session {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
}
.adm-session.is-revoked { opacity: 0.6; }
.adm-session__ico {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.adm-session.is-active   .adm-session__ico { background: color-mix(in srgb, var(--f-ok) 15%, transparent); color: var(--f-ok); }
.adm-session.is-revoked  .adm-session__ico { background: var(--f-bg-2); color: var(--f-ink-3); }
.adm-session__line {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 4px;
}
.adm-session__ua {
  font-family: var(--f-arab);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--f-ink);
}
.adm-session__meta {
  font-size: 0.78rem;
  color: var(--f-ink-3);
}
.adm-session__meta code {
  font-family: var(--f-mono);
  background: var(--f-bg-2);
  padding: 1px 6px;
  border-radius: var(--f-r-xs);
  font-size: 0.78rem;
}

/* security rows */
.adm-secrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-sm);
  margin-bottom: 8px;
}
.adm-secrow > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.adm-secrow strong { font-size: 0.92rem; color: var(--f-ink); font-weight: 600; }
.adm-secrow small { font-size: 0.78rem; color: var(--f-ink-3); }
.adm-secrow code {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  background: var(--f-bg-2);
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--f-ink-2);
}

@media (max-width: 720px) {
  .adm-drawer__sheet { width: 100%; }
  .adm-drawer__id { flex-direction: column; align-items: flex-start; gap: 12px; }
  .adm-drawer__actions { gap: 6px; }
}

/* =============================================================
   ROLES & PERMISSIONS — two-column shell with editor matrix
   ============================================================= */
.adm-roles {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 920px) { .adm-roles { grid-template-columns: 1fr; } }

/* ── LEFT: list ── */
.adm-roles__list {
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  box-shadow: var(--f-shadow-xs);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 100px);
}
.adm-roles__list-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--f-border);
  background: var(--f-surface-2);
  font-family: var(--f-disp);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--f-ink);
  letter-spacing: 0.02em;
}
.adm-roles__add {
  width: 28px; height: 28px;
  border-radius: var(--f-r-sm);
  border: 1px solid var(--f-border);
  background: var(--f-surface);
  color: var(--f-navy);
  cursor: pointer;
  display: grid; place-items: center;
  transition: color var(--f-dur),
              background-color var(--f-dur),
              border-color var(--f-dur),
              box-shadow var(--f-dur),
              transform var(--f-dur),
              opacity var(--f-dur);
}
.adm-roles__add:hover { background: var(--f-navy); color: #fff; }
.f-body.dark .adm-roles__add { color: var(--f-cs); }
.f-body.dark .adm-roles__add:hover { background: var(--f-cs); color: #0b1020; }
.adm-roles__add .material-symbols-outlined { font-size: 18px; }

.adm-roles__list-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.adm-rolerow {
  display: block;
  width: 100%;
  text-align: start;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--f-r-sm);
  padding: 10px 12px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: color var(--f-dur),
              background-color var(--f-dur),
              border-color var(--f-dur),
              box-shadow var(--f-dur),
              transform var(--f-dur),
              opacity var(--f-dur);
  font-family: var(--f-arab);
}
.adm-rolerow:hover { background: var(--f-bg-2); }
.adm-rolerow.is-on {
  background: color-mix(in srgb, var(--f-navy) 8%, var(--f-surface));
  border-color: color-mix(in srgb, var(--f-navy) 28%, var(--f-border));
}
.f-body.dark .adm-rolerow.is-on {
  background: color-mix(in srgb, var(--f-cs) 14%, var(--f-surface));
  border-color: color-mix(in srgb, var(--f-cs) 38%, var(--f-border));
}
.adm-rolerow__main { display: flex; flex-direction: column; gap: 4px; }
.adm-rolerow__name {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--f-ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.adm-rolerow__sys {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--f-gold) 18%, transparent);
  /* قفلُ الدورِ النظامي: ذهبٌ على تدرُّجٍ 18% منه. عتبةُ العناصر غير
     النصّية 3:1، وقِيس 2.69 على الصفِّ العادي و2.36 على المحدَّد — أي
     أن الصفَّ المحدَّدَ يُقرِّب الأرضيةَ من الحبر فيضيق الفرق. المزجُ
     نحو `--f-ink` يرفع الحالتين معاً وينقلب مع السمة. */
  color: color-mix(in oklch, var(--f-gold) 62%, var(--f-ink));
}
.adm-rolerow__sys .material-symbols-outlined { font-size: 12px; }
.adm-rolerow__meta {
  font-size: 0.74rem;
  /* قِيس 4.44 عند 11.8px والعتبةُ 4.5 — الحبرُ الثالث لا يكفي هنا */
  color: var(--f-ink-2);
}
.adm-rolerow__meta code {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  background: var(--f-bg-2);
  padding: 1px 5px;
  border-radius: var(--f-r-xs);
  color: var(--f-ink-2);
}

/* ── RIGHT: editor ── */
.adm-roles__editor {
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  box-shadow: var(--f-shadow-xs);
  overflow: hidden;
}
.adm-roles__editor.adm-empty { padding: 80px 20px; text-align: center; }

.adm-roleed__hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--f-border);
  background: var(--f-surface-2);
  flex-wrap: wrap;
}
.adm-roleed__id {
  display: flex; gap: 14px;
  align-items: flex-start;
  flex: 1;
}
.adm-roleed__icon {
  width: 44px; height: 44px;
  border-radius: var(--f-r-sm);
  background: color-mix(in srgb, var(--f-navy) 10%, transparent);
  color: var(--f-navy);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.f-body.dark .adm-roleed__icon {
  background: color-mix(in srgb, var(--f-cs) 18%, transparent);
  color: var(--f-cs);
}
.adm-roleed__icon .material-symbols-outlined { font-size: 24px; }
.adm-roleed__name {
  font-family: var(--f-disp);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--f-ink);
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  outline: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--f-dur);
}
.adm-roleed__name:focus { border-bottom-color: var(--f-navy); }
.f-body.dark .adm-roleed__name:focus { border-bottom-color: var(--f-cs); }
.adm-roleed__name.as-text { border-bottom: 0; }
.adm-roleed__sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--f-ink-3);
}
.adm-roleed__sub code {
  font-family: var(--f-mono);
  background: var(--f-bg-2);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--f-ink-2);
  font-size: 0.8rem;
}
.adm-roleed__count {
  font-weight: 600;
  color: var(--f-ink-2);
}
.adm-roleed__users {
  display: inline-flex; align-items: center; gap: 4px;
}
.adm-roleed__users .material-symbols-outlined { font-size: 14px; }
.adm-roleed__actions {
  display: inline-flex; gap: 6px; flex-wrap: wrap;
}

.adm-roleed__desc {
  padding: 14px 24px;
  border-bottom: 1px solid var(--f-border);
  background: var(--f-bg-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adm-roleed__desc-lbl {
  font-size: 0.74rem;
  color: var(--f-ink-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.adm-roleed__desc-in {
  border: 1px solid var(--f-border);
  background: var(--f-surface);
  border-radius: var(--f-r-sm);
  padding: 8px 12px;
  font-family: var(--f-arab);
  font-size: 0.9rem;
  color: var(--f-ink);
  outline: none;
  transition: border-color var(--f-dur);
}
.adm-roleed__desc-in:focus { border-color: var(--f-navy); }
.f-body.dark .adm-roleed__desc-in:focus { border-color: var(--f-cs); }
.adm-roleed__autokey {
  margin-inline-start: 8px;
  background: transparent;
  border: 0;
  color: var(--f-navy);
  font-size: 0.72rem;
  cursor: pointer;
  font-family: var(--f-arab);
  text-decoration: underline;
}
.f-body.dark .adm-roleed__autokey { color: var(--f-cs); }

/* ── Permission matrix ── */
.adm-roleed__matrix {
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adm-permblock {
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  overflow: hidden;
}
.adm-permblock__hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--f-surface-2);
  border-bottom: 1px solid var(--f-border);
  font-family: var(--f-arab);
  font-size: 0.92rem;
}
.adm-permblock__title {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700;
  color: var(--f-ink);
}
.adm-permblock__title .material-symbols-outlined {
  font-size: 18px;
  color: var(--f-navy);
}
.f-body.dark .adm-permblock__title .material-symbols-outlined { color: var(--f-cs); }
.adm-permblock__count {
  display: inline-flex; align-items: center; gap: 6px;
  margin-inline-start: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--f-ink-2);
}
.adm-permblock__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--f-border-2);
}
.adm-permblock__dot.some { background: var(--f-warn); }
.adm-permblock__dot.all  { background: var(--f-ok); }
.adm-permblock__bulk { display: inline-flex; gap: 6px; }
.adm-permblock__bulk button {
  border: 1px solid var(--f-border);
  background: var(--f-surface);
  color: var(--f-ink-2);
  border-radius: var(--f-r-sm);
  padding: 5px 12px;
  font-family: var(--f-arab);
  font-size: 0.78rem;
  cursor: pointer;
  transition: color var(--f-dur),
              background-color var(--f-dur),
              border-color var(--f-dur),
              box-shadow var(--f-dur),
              transform var(--f-dur),
              opacity var(--f-dur);
}
.adm-permblock__bulk button:hover:not(:disabled) {
  color: var(--f-ink); border-color: var(--f-border-2);
}
.adm-permblock__bulk button:disabled { opacity: 0.4; cursor: not-allowed; }

.adm-permblock__list {
  list-style: none;
  margin: 0; padding: 8px 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 8px;
}
@media (max-width: 880px) { .adm-permblock__list { grid-template-columns: 1fr; } }

.adm-permitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--f-r-sm);
  cursor: pointer;
  transition: color var(--f-dur),
              background-color var(--f-dur),
              border-color var(--f-dur),
              box-shadow var(--f-dur),
              transform var(--f-dur),
              opacity var(--f-dur);
}
.adm-permitem:hover { background: var(--f-bg-2); }
.adm-permitem.is-on {
  background: color-mix(in srgb, var(--f-ok) 6%, var(--f-surface));
  border-color: color-mix(in srgb, var(--f-ok) 22%, var(--f-border));
}
.adm-permitem input { display: none; }
.adm-permitem__check {
  width: 18px; height: 18px;
  border: 1.5px solid var(--f-border-2);
  border-radius: 4px;
  background: var(--f-bg-2);
  display: grid; place-items: center;
  transition: color var(--f-dur),
              background-color var(--f-dur),
              border-color var(--f-dur),
              box-shadow var(--f-dur),
              transform var(--f-dur),
              opacity var(--f-dur);
  flex-shrink: 0;
}
.adm-permitem.is-on .adm-permitem__check {
  background: var(--f-ok);
  border-color: var(--f-ok);
  color: var(--f-bg);
}
/* لا لونَ هنا: علامةُ الصحّ تُرسم عند التأشير فقط (`final_admin.jsx`:
   `{checked && <Icon/>}`)، أي أنها دائماً على أخضرِ `--f-ok`. وقاعدةُ
   `.is-on` أعلاه تعطيها `var(--f-bg)` وهو الصحيحُ في السمتين: الأخضرُ
   نهاراً غامق (#19794a) فتقرأ فاتحةً، وليلاً فاتح (#49b178) فتقرأ غامقة.
   كان `#fff` مثبَّتاً هنا فيدهسها، فتبقى بيضاءَ على أخضرَ فاتح: قِيس
   2.68 والعتبةُ 3 — اثنتان وثلاثون علامةً مكسورةً في لوح الأدوار ليلاً. */
.adm-permitem__check .material-symbols-outlined { font-size: 13px; font-weight: 700; }
.adm-permitem__main {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.adm-permitem__lbl {
  font-size: 0.86rem;
  color: var(--f-ink);
  font-weight: 500;
  font-family: var(--f-arab);
}
.adm-permitem__key {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--f-ink-3);
}
.adm-permitem input:disabled ~ .adm-permitem__check {
  opacity: 0.5;
  cursor: not-allowed;
}

/* users-in-role panel */
.adm-roleed__users-list {
  padding: 18px 24px;
  border-top: 1px solid var(--f-border);
  background: var(--f-bg-2);
}
.adm-roleed__users-list > header {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-disp);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--f-ink);
  margin-bottom: 12px;
}
.adm-roleed__users-list > header .material-symbols-outlined {
  font-size: 18px; color: var(--f-navy);
}
.f-body.dark .adm-roleed__users-list > header .material-symbols-outlined { color: var(--f-cs); }
.adm-roleed__users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.adm-roleed__user {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 12px;
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-sm);
}
/* =============================================================
   AUDIT LOG — enterprise filters + expandable rows + CSV export
   ============================================================= */

/* stats strip */
.adm-audit-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.adm-audit-stats__card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  box-shadow: var(--f-shadow-xs);
  transition: transform var(--f-dur) var(--f-ease), box-shadow var(--f-dur) var(--f-ease);
}
.adm-audit-stats__card:hover {
  transform: translateY(-1px);
  box-shadow: var(--f-shadow-sm);
}
.adm-audit-stats__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--f-r-sm);
  background: color-mix(in oklch, var(--f-navy) 12%, transparent);
  /* `--f-navy` بلا قيمةٍ ليلية — يبقى #1e2a4d على سطحٍ داكن فقِيس 1.1
     والعتبةُ 3. المزجُ نحو `--f-ink` هو حلُّ الجارة `--today` نفسِه:
     يغمق نهاراً ويفتح ليلاً بلا قاعدةِ سمةٍ ثانية. */
  color: color-mix(in oklch, var(--f-navy) 58%, var(--f-ink));
  flex-shrink: 0;
}
.adm-audit-stats__ico--today {
  background: color-mix(in oklch, var(--f-gold) 18%, transparent);
  color: color-mix(in oklch, var(--f-gold) 70%, var(--f-ink));
}
.adm-audit-stats__ico--week {
  background: color-mix(in oklch, var(--f-cb) 14%, transparent);
  color: var(--f-cb);
}
.adm-audit-stats__ico--users {
  background: color-mix(in oklch, var(--f-cs) 14%, transparent);
  color: var(--f-cs);
}
.adm-audit-stats__n {
  font: 700 1.35rem/1.1 var(--f-disp);
  color: var(--f-ink);
  font-variant-numeric: tabular-nums;
}
.adm-audit-stats__l {
  font-size: 0.82rem;
  color: var(--f-ink-3);
  margin-top: 2px;
}

/* filters bar */
.adm-audit__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  margin-bottom: 12px;
}
.adm-audit__search {
  flex: 1 1 240px;
  min-width: 200px;
}
.adm-audit__filters .adm-select {
  min-width: 160px;
}
.adm-audit__range {
  display: inline-flex;
  background: var(--f-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-sm);
  padding: 3px;
  gap: 2px;
}
.adm-audit__range-btn {
  background: transparent;
  border: none;
  padding: 6px 12px;
  font-family: var(--f-arab);
  font-size: 0.82rem;
  color: var(--f-ink-2);
  border-radius: calc(var(--f-r-sm) - 2px);
  cursor: pointer;
  transition: background var(--f-dur) var(--f-ease), color var(--f-dur) var(--f-ease);
  white-space: nowrap;
}
.adm-audit__range-btn:hover {
  background: color-mix(in oklch, var(--f-navy) 6%, transparent);
  color: var(--f-ink);
}
.adm-audit__range-btn.is-on {
  background: var(--f-navy);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--f-shadow-xs);
}
.adm-audit__actions {
  display: inline-flex;
  gap: 8px;
  margin-inline-start: auto;
  flex-wrap: wrap;
}

/* result count line */
.adm-audit__count {
  font-size: 0.84rem;
  color: var(--f-ink-3);
  padding: 0 4px 8px;
}
.adm-audit__count strong {
  color: var(--f-ink);
  font-variant-numeric: tabular-nums;
}

/* table — collapsible rows */
.adm-audit__row {
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-sm);
  margin-bottom: 6px;
  overflow: hidden;
  transition: box-shadow var(--f-dur) var(--f-ease);
}
.adm-audit__row.is-open {
  box-shadow: var(--f-shadow-sm);
  border-color: color-mix(in oklch, var(--f-navy) 22%, var(--f-border));
}
.adm-audit__head {
  display: grid;
  grid-template-columns: 100px 140px 1fr auto 22px;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  text-align: start;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  transition: background var(--f-dur) var(--f-ease);
}
.adm-audit__head:hover {
  background: color-mix(in oklch, var(--f-navy) 4%, transparent);
}
.adm-audit__row.is-open .adm-audit__head {
  background: color-mix(in oklch, var(--f-navy) 5%, transparent);
}

.adm-audit__ts {
  font-size: 0.78rem;
  color: var(--f-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* category pill — uses the same palette as the rest of admin */
.adm-audit__cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  background: color-mix(in oklch, var(--f-navy) 8%, transparent);
  color: var(--f-navy);
  border: 1px solid color-mix(in oklch, var(--f-navy) 18%, transparent);
  white-space: nowrap;
}
.adm-audit__cat .material-symbols-outlined { font-size: 0.95rem; }
.adm-audit__cat--users    { background: color-mix(in oklch, var(--f-cs) 10%, transparent); color: var(--f-cs); border-color: color-mix(in oklch, var(--f-cs) 22%, transparent); }
.adm-audit__cat--roles    { background: color-mix(in oklch, var(--f-gold) 14%, transparent); color: color-mix(in oklch, var(--f-gold) 65%, var(--f-ink)); border-color: color-mix(in oklch, var(--f-gold) 28%, transparent); }
.adm-audit__cat--requests { background: color-mix(in oklch, var(--f-cb) 10%, transparent); color: color-mix(in oklch, var(--f-cb) 68%, var(--f-ink)); border-color: color-mix(in oklch, var(--f-cb) 22%, transparent); }
.adm-audit__cat--payments { background: color-mix(in oklch, var(--f-ct) 10%, transparent); color: color-mix(in oklch, var(--f-ct) 68%, var(--f-ink)); border-color: color-mix(in oklch, var(--f-ct) 22%, transparent); }
.adm-audit__cat--audit    { background: color-mix(in oklch, var(--f-crimson) 10%, transparent); color: var(--f-crimson); border-color: color-mix(in oklch, var(--f-crimson) 22%, transparent); }
.adm-audit__cat--reports  { background: color-mix(in oklch, var(--f-ca) 10%, transparent); color: var(--f-ca); border-color: color-mix(in oklch, var(--f-ca) 22%, transparent); }
.adm-audit__cat--content  { background: color-mix(in oklch, var(--f-ink-2) 10%, transparent); color: var(--f-ink-2); border-color: color-mix(in oklch, var(--f-ink-2) 22%, transparent); }
/* التصنيفاتُ ثمانيةٌ في `final_admin.jsx` (CATEGORY_ORDER) وكانت سبعةً هنا:
   `system` بلا قاعدة، فيسقط إلى أساسِ `.adm-audit__cat` — أي حبرُ
   `--f-navy` على تدرُّجٍ منه. و`--f-navy` **بلا قيمةٍ ليلية**: يبقى
   #1e2a4d على سطحٍ داكن، فقِيس 1.11 والعتبةُ 4.5 — نصٌّ غيرُ مقروءٍ عملياً
   هو وأيقونتُه. والاصطلاحُ في هذا الملف (١٦ موضعاً) أن الليلَ يستبدل
   البحريَّ بـ`--f-cs`. */
.adm-audit__cat--system   { background: color-mix(in oklch, var(--f-navy) 10%, transparent); color: color-mix(in oklch, var(--f-navy) 72%, var(--f-ink)); border-color: color-mix(in oklch, var(--f-navy) 22%, transparent); }
.f-body.dark .adm-audit__cat--system { background: color-mix(in oklch, var(--f-cs) 12%, transparent); color: var(--f-cs); border-color: color-mix(in oklch, var(--f-cs) 26%, transparent); }

.adm-audit__main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.adm-audit__action {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  background: color-mix(in oklch, var(--f-navy) 6%, transparent);
  padding: 2px 8px;
  border-radius: var(--f-r-sm);
  color: var(--f-ink);
  white-space: nowrap;
}
.adm-audit__target {
  font-size: 0.86rem;
  color: var(--f-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-audit__by {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--f-ink-2);
  white-space: nowrap;
}
.adm-audit__by-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--f-navy), color-mix(in oklch, var(--f-navy) 70%, var(--f-cb)));
  color: #fff;
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
}
.adm-audit__by-name { font-weight: 500; }

/* expanded detail */
.adm-audit__detail {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--f-border);
  background: var(--f-bg);
  animation: adm-audit-slide 0.18s var(--f-ease);
}
@keyframes adm-audit-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.adm-audit__detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 20px;
}
.adm-audit__detail-grid label {
  display: block;
  font-size: 0.72rem;
  color: var(--f-ink-3);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.adm-audit__detail-grid > div > div {
  font-size: 0.88rem;
  color: var(--f-ink);
}
.adm-audit__detail-grid code {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  background: var(--f-surface);
  padding: 2px 6px;
  border-radius: var(--f-r-sm);
  border: 1px solid var(--f-border);
}

.adm-audit__payload {
  margin-top: 14px;
}
.adm-audit__payload label {
  display: block;
  font-size: 0.72rem;
  color: var(--f-ink-3);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.adm-audit__payload pre {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-sm);
  padding: 12px 14px;
  color: var(--f-ink);
  overflow-x: auto;
  direction: ltr;
  text-align: start;
  margin: 0;
}

/* responsive */
@media (max-width: 960px) {
  .adm-audit-stats { grid-template-columns: repeat(2, 1fr); }
  .adm-audit__head {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .adm-audit__by { justify-content: flex-start; }
}