/* ==========================================================================
   لوحة تحكم الإدارة — نفس هوية الشعار: ورق أبيض وحبر كحلي
   ========================================================================== */

.admin-shell { display: flex; min-height: 100vh; }

.admin-side {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40;
  width: 258px; overflow-y: auto;
  background: var(--mist); border-inline-end: 1px solid var(--line);
  transform: translateX(100%); transition: transform .25s ease;
}
.admin-side.is-open { transform: none; box-shadow: var(--shadow-lg); }

.admin-main { flex: 1; min-width: 0; }

@media (min-width: 1024px) {
  .admin-side { transform: none; }
  .admin-main { margin-inline-start: 258px; }
}

.side-link {
  display: block; padding: .65rem .9rem; border-radius: .6rem;
  font-size: .93rem; color: var(--ink-soft); transition: all .18s ease;
}
.side-link:hover { background: var(--paper); color: var(--ink); }
.side-link.is-active {
  background: var(--paper); color: var(--ink); font-weight: 500;
  box-shadow: inset 3px 0 0 var(--gold-mid), var(--shadow-sm);
}
.side-link--danger { color: var(--muted); }
.side-link--danger:hover { background: var(--ink); color: var(--paper); }

.admin-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.admin-content { padding: 1.5rem 1.25rem 4rem; }
@media (min-width: 1024px) { .admin-content { padding-inline: 2rem; } }

/* ── بطاقات الإحصاء ───────────────────────────────────────────────────── */
.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.stat-card { padding: 1.25rem; border-radius: 1rem; border: 1px solid var(--line); background: var(--paper); }
.stat-card__label { font-size: .8rem; color: var(--muted); }
.stat-card__value { margin-top: .4rem; font-family: Amiri, serif; font-size: 2rem; font-weight: 700; color: var(--ink); }
.stat-card { border-block-start: 3px solid var(--gold-mid); }
.stat-card__hint { margin-top: .35rem; font-size: .75rem; color: var(--muted); }

/* ── البطاقات والجداول ────────────────────────────────────────────────── */
.panel { border: 1px solid var(--line); border-radius: 1rem; background: var(--paper); overflow: hidden; }
.panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.panel__title { font-family: Amiri, serif; font-size: 1.35rem; color: var(--ink); }
.panel__body { padding: 1.25rem; }

.table-wrap { overflow-x: auto; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 40rem; }
table.admin-table th {
  padding: .8rem 1rem; text-align: right; font-weight: 500; white-space: nowrap;
  color: var(--muted); background: var(--mist); border-bottom: 1px solid var(--line);
}
table.admin-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-soft); }
table.admin-table tbody tr:hover { background: var(--mist); }

.thumb-sm {
  display: grid; place-items: center; width: 3rem; height: 3rem; overflow: hidden; flex-shrink: 0;
  border-radius: .55rem; border: 1px solid var(--line); background: var(--mist);
}
.thumb-sm img { width: 100%; height: 100%; object-fit: cover; }
.thumb-sm .bottle-art { width: 72%; }

/* الحالات تتمايز بالتعبئة والوزن، لا بدرجة اللون */
.pill { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .72rem; border: 1px solid; white-space: nowrap; }
.pill--on { color: var(--paper); border-color: var(--ink); background: var(--ink); font-weight: 500; }
.pill--off { color: var(--muted); border-color: var(--line); background: var(--mist); }
.pill--warn { color: var(--gold); border-color: var(--gold); background: rgba(180, 137, 74, .12); font-weight: 500; }

.btn-sm {
  display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem; border-radius: .5rem;
  font-size: .8rem; color: var(--ink); border: 1px solid var(--line); background: var(--paper); transition: all .18s;
}
.btn-sm:hover { border-color: var(--ink); background: var(--mist); }
.btn-sm--danger { color: var(--ink); border-color: rgba(0, 18, 32, .3); }
.btn-sm--danger:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }

.inline-input { width: 6.5rem; padding: .35rem .6rem; font-size: .85rem; border-radius: .45rem; }

/* ── النماذج داخل اللوحة ──────────────────────────────────────────────── */
.form-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.form-grid > .full { grid-column: 1 / -1; }
.form-help { margin-top: .35rem; font-size: .75rem; color: var(--muted); }

.switch-row { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--mist); }
.switch-row label { margin: 0; font-size: .9rem; color: var(--ink); }
.switch-row input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: #001220; }

.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: 1.25rem; margin-top: 1.5rem; border-top: 1px solid var(--line); }

.tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.tab { padding: .45rem 1rem; border-radius: 999px; font-size: .85rem; color: var(--ink-soft); border: 1px solid var(--line); background: var(--paper); }
.tab:hover { border-color: var(--ink); color: var(--ink); }
.tab.is-active { color: var(--paper); background: var(--ink); border-color: var(--ink); }

.empty-state { padding: 3.5rem 1.5rem; text-align: center; color: var(--muted); }

/* ── صفحة الدخول ─────────────────────────────────────────────────────── */
.login-wrap { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; background: var(--mist); }
.login-card { width: min(100%, 26rem); padding: 2.25rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--paper); box-shadow: var(--shadow-lg); }