/* نستخدم مقاسات الإدارة فوق سلّم أفلم، وتبقى ألوان الهوية والخطوط من ملف الرموز المشترك. */
body {
  --admin-page-title: var(--text-2xl);
  --admin-section-title: var(--text-lg);
  --admin-metric: var(--text-2xl);
  --admin-ui-text: var(--text-sm);
  --admin-caption: var(--text-xs);
  --admin-inset: var(--space-5);
  --admin-section-gap: var(--space-5);
  --admin-header-height: var(--space-12);
  --admin-gap: var(--space-3);
  --admin-control: var(--space-8);
  --admin-panel-radius: var(--radius-xl);
  --admin-panel-shadow: var(--shadow-1);
  --rail-width: clamp(180px, 14vw, 196px);
  --shell-gutter: clamp(16px, 2vw, 32px);
  --rail-inset: var(--space-2);
  --toolbar-height: 48px;
  --admin-max: 1280px;
  --admin-icon-stroke: 1.8;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-gradient) var(--bg);
  font-size: var(--admin-ui-text);
}
body.demo-mode { --admin-banner: 22px; }
.demo {
  background: var(--surface-3);
  color: var(--text-secondary);
  font-size: var(--admin-caption);
  font-weight: var(--weight-medium);
}
.sidebar {
  width: var(--rail-width);
  padding: 0 var(--rail-inset) var(--space-3);
  border-color: var(--border-subtle);
  background: var(--bg);
  z-index: 20;
}
.main { margin-inline-start: var(--rail-width); }
.brand {
  justify-content: flex-start;
  flex: 0 0 var(--toolbar-height);
  padding: 0 var(--space-3);
  font: var(--weight-black) var(--text-3xl)/var(--leading-tight) var(--font-display);
  letter-spacing: var(--tracking-tight);
}
.brand-text, .nav-label, .owner-text { display: inline; }
#nav { overflow-y: auto; min-height: 0; gap: var(--space-1); padding: var(--space-3) 2px var(--space-1); }
/* نفصل المتابعة وإدارة الموقع وأدوات المالك من دون إضافة عناوين إلى الشريط. */
#nav a:is([href="#users"], [href="#audit"]) { margin-block-start: var(--space-2); }
.nav-item {
  min-height: max(36px, var(--admin-control));
  padding: var(--space-1) var(--space-2);
  gap: var(--admin-gap-small);
  justify-content: flex-start;
  font-size: var(--admin-ui-text);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  border-radius: var(--radius-full);
}
.nav-item.active { box-shadow: var(--shadow-1); }
.nav-label { white-space: nowrap; }
.nav-item svg { width: 17px; height: 17px; }
.owner-menu {
  margin: auto var(--space-1) 0;
  position: relative;
  border-top: var(--border-width) solid var(--border-strong);
}
.owner {
  list-style: none;
  padding: var(--space-2) var(--space-1);
  min-height: 48px;
  justify-content: flex-start;
  gap: var(--space-2);
  border: 0;
  cursor: pointer;
}
.owner::-webkit-details-marker { display: none; }
.owner:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: 2px; }
.owner .avatar {
  border-radius: var(--radius-full);
  background: var(--tag-1-bg);
  color: var(--tag-1-fg);
  width: 28px;
  height: 28px;
  font-size: var(--admin-caption);
}
.owner-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); }
.owner-actions {
  position: absolute;
  bottom: 100%;
  inset-inline-start: 0;
  min-width: 168px;
  padding: var(--space-1);
  display: grid;
  background: var(--surface-1);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.owner-actions > * {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--admin-control);
  padding: var(--space-1) var(--space-3);
  font: inherit;
  color: var(--text-primary);
  background: none;
  text-align: start;
  border: 0;
  border-radius: var(--radius-md);
}
.owner-actions svg { width: var(--admin-icon-small); height: var(--admin-icon-small); }
.owner-actions > :hover { background: var(--surface-2); }
.topbar {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(160px, 300px) auto;
  gap: var(--admin-gap);
  padding-block: 0;
  padding-inline: max(var(--shell-gutter), calc((100% - var(--admin-max)) / 2 + var(--shell-gutter)));
  height: var(--toolbar-height);
  border-color: var(--border-subtle);
}
.breadcrumb { color: var(--text-secondary); gap: var(--space-2); white-space: nowrap; }
.breadcrumb, .top-tools { font-size: var(--admin-caption); }
.top-tools { justify-self: end; gap: var(--space-3); }
.top-tools .date { font-size: inherit; margin: 0; white-space: nowrap; }
.button {
  min-height: var(--admin-control);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-1);
}
.button.quiet { box-shadow: none; }
.refresh-button {
  min-height: var(--admin-control);
  gap: var(--space-2);
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
  box-shadow: none;
}
#refresh-icon { display: flex; }
.refresh-button svg { width: var(--admin-icon-small); height: var(--admin-icon-small); }
#workspace .content { padding: var(--admin-inset) var(--shell-gutter) var(--space-6); }
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--admin-gap);
  margin-bottom: var(--admin-section-gap);
}
.page-head h1 { grid-area: 1 / 1; margin: 0; font: var(--weight-bold) var(--admin-page-title)/var(--leading-tight) var(--font-display); }
.page-head p { grid-column: 1 / -1; margin: 0; font-size: var(--admin-ui-text); color: var(--text-secondary); }
.page-head .actions { grid-area: 1 / 2; justify-self: end; margin: 0; }

/* الحقول والتفاصيل تستعمل المقاس نفسه في النوافذ المستقلة وفي صفحات الإدارة. */
.dialog-head, .dialog-actions { padding: var(--space-3) var(--space-4); border-color: var(--border-subtle); }
.dialog-head h2 { font: var(--weight-bold) var(--text-xl)/var(--leading-tight) var(--font-display); }
.dialog-body { padding: var(--space-4); overflow-wrap: anywhere; }
.dialog-body .detail-grid { margin-block: var(--admin-gap); gap: var(--admin-gap); }
.detail-grid dd { font-size: var(--admin-ui-text); }
dialog.modal { border-radius: var(--admin-panel-radius); width: min(560px, 100%); }
dialog.drawer { width: min(440px, 100%); }
.field { gap: var(--space-1); margin-bottom: var(--admin-gap); }
.field :is(input, textarea, select) { padding: var(--space-1) var(--space-3); min-height: var(--admin-control); border-radius: var(--radius-md); }
.field textarea { min-height: 64px; }
.dialog-head .icon-button { width: var(--admin-control); height: var(--admin-control); }
.dialog-head .icon-button svg { width: var(--admin-icon-small); height: var(--admin-icon-small); }
.dialog-body .spaced { margin-top: var(--admin-gap); }
.empty { padding: var(--space-6) var(--admin-inset); }
.loading, .error-state { min-height: 160px; padding: var(--space-6) var(--admin-inset); gap: var(--admin-gap); }
.gate-card { width: min(100%, 380px); padding: var(--space-6); border-radius: var(--admin-panel-radius); }
.gate-brand { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.gate h1 { font-size: var(--admin-page-title); }
.gate p, #gate-controls { margin-top: var(--admin-gap); }

/* تُصغّر المساحات البصرية مع بقاء أهداف اللمس مناسبة للهواتف والأجهزة اللوحية. */
@media (max-width: 1199px) {
  body { --admin-inset: var(--space-4); --admin-section-gap: var(--space-4); }
}
@media (pointer: coarse), (max-width: 560px) {
  body { --admin-control: var(--control-height); --toolbar-height: 52px; }
  .global-search-option, .global-search-more { min-height: var(--admin-control); }
}
@media (min-width: 561px) and (max-width: 980px) {
  body { --rail-width: 58px; --rail-inset: var(--space-1); }
  .sidebar .nav-label, .sidebar .owner-text { display: none; }
  .brand, .nav-item, .owner { justify-content: center; padding-inline: 0; }
  .brand { flex-basis: var(--toolbar-height); font-size: var(--text-xl); }
  .nav-item { max-width: 44px; width: 100%; justify-self: center; }
  .owner-menu { margin-inline: 0; }
}
@media (max-width: 700px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); }
  .top-tools .date, .refresh-label { display: none; }
  .refresh-button { width: var(--admin-control); height: var(--admin-control); padding: 0; }
}
@media (max-width: 560px) {
  body { --admin-page-title: 24px; --admin-section-title: 17px; --admin-metric: 24px; --admin-inset: var(--space-3); --admin-section-gap: var(--space-3); --shell-gutter: var(--space-3); }
  .main { margin: 0; }
  .sidebar.mobile-open { width: min(204px, 85vw); }
  .sidebar .brand { flex-basis: var(--toolbar-height); font-size: var(--text-2xl); }
  .breadcrumb > :not(#menu) { display: none; }
  .breadcrumb #menu { width: var(--admin-control); height: var(--admin-control); background: var(--surface-2); }
  .topbar { padding-inline: var(--space-2); }
}