/**
 * پنل مدیریت.
 *
 * زبان بصری عمداً از بخش کاربر جدا است: شل تیره، گوشه‌های کم‌شعاع‌تر،
 * و فاصله‌های فشرده‌تر — تا ادمین در یک نگاه بفهمد داخل پنل است، نه
 * در فروشگاه. رنگ‌ها همچنان از متغیرها می‌آیند، نه هاردکد.
 */

/* ---------------------------------------------------------------------------
   شل تیره
   --------------------------------------------------------------------------- */
.admin {
  min-height: 100dvh;
  background: var(--n-100);
  display: flex;
  flex-direction: column;
}

.admin .topbar {
  background: var(--n-800);
  border-bottom: none;
}
.admin .topbar h2 { color: var(--n-0); }
.admin .topbar .icon-btn {
  background: rgba(255, 255, 255, .12);
  color: var(--n-0);
}

/* هدر بزرگ داشبورد */
.admin-head {
  background: var(--n-800);
  padding: 16px 12px 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-head h1 { margin: 0; font-size: 18px; font-weight: 800; color: var(--n-0); }
.admin-head p { margin: 0; font-size: 12.5px; color: var(--n-400); }

/* بدنه که روی هدر تیره می‌نشیند */
.admin-body {
  flex: 1;
  margin-top: -16px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--n-100);
  padding: 16px 12px calc(var(--nav-h) + var(--safe-b) + 26px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* صفحه‌های داخلی پنل بدون هدر بزرگ */
.admin-page {
  padding: 14px 12px calc(var(--nav-h) + var(--safe-b) + 26px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------------------------------------------------------------------------
   کارت‌های پنل — شعاع کمتر از بخش کاربر
   --------------------------------------------------------------------------- */
.admin .card { border-radius: var(--r-md); }
.admin .card-head { font-size: 12.5px; }

.admin .field input,
.admin .field textarea,
.admin .field select {
  min-height: 44px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
}
.admin .field label { font-size: 12.5px; }

.admin .btn {
  min-height: 48px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  box-shadow: none;
}
.admin .btn.dark { background: var(--n-800); }

/* ---------------------------------------------------------------------------
   کارت آماری
   --------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat {
  padding: 13px;
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  background: var(--n-0);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.stat .label { font-size: 11.5px; color: var(--n-500); }
.stat .value {
  font-size: 16px;
  font-weight: 800;
  color: var(--n-900);
  font-variant-numeric: tabular-nums;
}

/* کارت اولویت‌دار «فیش در انتظار بررسی» */
.stat.priority {
  grid-column: 1 / -1;
  background: var(--warn-50);
  border-color: var(--warn-500);
  flex-direction: row;
  align-items: center;
  gap: 11px;
  min-height: 66px;
}
.stat.priority .value { color: var(--warn-700); font-size: 19px; }
.stat.priority .label { color: var(--warn-700); font-size: 13px; font-weight: 700; }

/* ---------------------------------------------------------------------------
   ردیف فهرست‌های پنل
   --------------------------------------------------------------------------- */
.admin-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: start;
  padding: 12px;
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  background: var(--n-0);
  transition: transform .12s ease;
}
.admin-row:active { transform: scale(.985); }

.admin-row .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.admin-row .title { font-size: 13.5px; font-weight: 700; color: var(--n-900); }
.admin-row .meta { font-size: 11.5px; color: var(--n-500); }

/* ---------------------------------------------------------------------------
   نویگیشن پایین پنل — ۵ آیتمه و تیره
   --------------------------------------------------------------------------- */
#adminNav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  background: var(--n-800);
  padding-bottom: var(--safe-b);
}

#adminNav button {
  flex: 1;
  min-height: var(--nav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  color: var(--n-400);
  font-size: 10.5px;
  font-weight: 700;
}
#adminNav button.on { color: var(--n-0); }

#adminNav .dot {
  position: absolute;
  top: 8px;
  inset-inline-end: calc(50% - 18px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--warn-500);
  color: var(--n-900);
  font-size: 9.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   نمودار ستونی گزارش‌ها
   --------------------------------------------------------------------------- */
.chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 150px;
  padding: 12px 4px 0;
}
.chart .col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  height: 100%;
  justify-content: flex-end;
}
.chart .bar-fill {
  width: 100%;
  max-width: 34px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
  transition: height .3s ease;
}
.chart .col span { font-size: 10.5px; color: var(--n-500); }

/* ---------------------------------------------------------------------------
   نوار مصرف کد تخفیف و سهم فضای فایل‌ها
   --------------------------------------------------------------------------- */
.usage {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--n-200);
  overflow: hidden;
  display: flex;
}
.usage i { height: 100%; display: block; }

/* ---------------------------------------------------------------------------
   جدول‌های کوچک پنل
   --------------------------------------------------------------------------- */
.admin table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.admin th {
  text-align: start;
  padding: 9px 10px;
  background: var(--n-50);
  font-weight: 700;
  color: var(--n-600);
  font-size: 11.5px;
}
.admin td { padding: 10px; border-top: 1px solid var(--n-100); color: var(--n-800); }

/* ---------------------------------------------------------------------------
   چیپ سایز در فرم الگو — لمس = موجود/ناموجود
   --------------------------------------------------------------------------- */
.size-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 8px 0 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--n-300);
  background: var(--n-0);
  font-size: 14px;
  font-weight: 700;
  color: var(--n-800);
}
.size-chip.out {
  border-style: dashed;
  color: var(--n-400);
  text-decoration: line-through;
  background: var(--n-50);
}
.size-chip .x {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--n-100);
}