/* ==========================================================================
   Doraxtures — Admin Panel
   --------------------------------------------------------------------------
   Every rule here is scoped to the admin surfaces (#adminOverlay and the
   admin-only modals). Nothing in this file can affect the public site.

   Goals:
   - Keep the existing dark violet/cyan identity, just tighten it.
   - Reuse the real design tokens (--accent, --success, --danger) instead of
     the ad-hoc hex values (#2dd98a, #e94560, #00e5ff) the panel had drifted to.
   - Fix .atab.active, which previously had no visual state at all.
   - Stop .evo-card's product-card hover (lift + scale) from firing on cards
     that wrap full data tables.
   ========================================================================== */

#adminOverlay,
#membershipModal,
#limitedFreeModal,
#addPackModal,
#imgLightbox,
#previewOverlay {
  --a-1:  4px;
  --a-2:  8px;
  --a-3:  12px;
  --a-4:  16px;
  --a-5:  24px;
  --a-6:  32px;

  --a-r-sm: 8px;
  --a-r-md: 12px;
  --a-r-lg: 16px;

  /* Derived from the global theme tokens so the admin panel follows
     light/dark automatically — see :root in style.css. */
  --a-surface:   var(--surface-1);
  --a-surface-2: var(--bg3);
  --a-line:      var(--overlay-2);
  --a-line-2:    var(--overlay-3);

  --a-warn: var(--warn);
  --a-info: var(--accent2);

  --a-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Shell ─────────────────────────────────────────────────────────────── */

#adminOverlay {
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(139, 92, 246, 0.10), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%,  rgba(6, 182, 212, 0.07),  transparent 55%),
    var(--bg, #0a0a14);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

#adminOverlay ::selection {
  background: rgba(139, 92, 246, 0.35);
  color: var(--text);
}

/* Scrollbars, scoped so the public site keeps the native look. */
#adminOverlay *::-webkit-scrollbar,
#previewOverlay *::-webkit-scrollbar { width: 10px; height: 10px; }
#adminOverlay *::-webkit-scrollbar-track,
#previewOverlay *::-webkit-scrollbar-track { background: transparent; }
#adminOverlay *::-webkit-scrollbar-thumb,
#previewOverlay *::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.25);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
#adminOverlay *::-webkit-scrollbar-thumb:hover,
#previewOverlay *::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.45); background-clip: content-box; }

/* ── Top bar ───────────────────────────────────────────────────────────── */

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-4);
  padding: var(--a-3) var(--a-5);
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--a-line);
}

/* Gradient hairline under the bar. */
.admin-topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
  opacity: 0.55;
}

.admin-topbar__title {
  display: inline-flex;
  align-items: center;
  gap: var(--a-2);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--hero-ink) 10%, var(--accent) 55%, var(--accent2) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Emoji must not inherit the transparent text fill. */
.admin-topbar__title .emoji {
  -webkit-text-fill-color: initial;
  color: initial;
}

.admin-topbar__close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--overlay-2);
  border: 1px solid var(--a-line-2);
  color: var(--text2);
  border-radius: var(--a-r-sm);
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--a-ease), color 0.2s var(--a-ease), border-color 0.2s var(--a-ease);
}

.admin-topbar__close:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--danger-text);
}

/* ── Headings ──────────────────────────────────────────────────────────── */

#adminOverlay .section-title {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}

#adminOverlay .section-sub {
  font-size: 0.88rem;
  color: var(--text3);
  margin-bottom: var(--a-5);
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */
/* Previously .atab.active had no rule, so the selected tab was invisible.
   Rebuilt as a segmented control. */

#adminOverlay .admin-tabs,
#adminOverlay #adminTabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--a-1);
  padding: var(--a-1);
  margin-bottom: var(--a-5);
  background: var(--a-surface);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-md);
  list-style: none;
}

#adminOverlay .admin-tabs .nav-item,
#adminOverlay #adminTabs .nav-item { display: block; }

#adminOverlay .atab,
#adminOverlay .atab.btn-evo-outline {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text2);
  font-weight: 600;
  font-size: 0.84rem;
  padding: 8px 16px;
  border-radius: var(--a-r-sm);
  transition: color 0.2s var(--a-ease), background 0.2s var(--a-ease);
  transform: none;
}

/* .btn-evo-outline paints a ::before sweep at z-index:-1 — not wanted here. */
#adminOverlay .atab::before,
#adminOverlay .atab::after { display: none; }

#adminOverlay .atab:hover {
  color: var(--text);
  background: var(--overlay-1);
  transform: none;
  border-color: transparent;
}

#adminOverlay .atab.active {
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-ink));
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
}

/* Panes re-render on every tab switch, so the entrance can afford a beat. */
#adminOverlay .atab-pane { animation: apane-in 0.28s var(--a-ease); }

@keyframes apane-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
/* .evo-card is tuned for pack tiles: it lifts 8px and scales on hover. That
   is wrong for a card wrapping a data table, so neutralize it in here. */

#adminOverlay .evo-card {
  background: var(--a-surface);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-lg);
  padding: var(--a-5);
  backdrop-filter: none;
  box-shadow: var(--shadow-sm);
  animation: none;
  transition: border-color 0.25s var(--a-ease), box-shadow 0.25s var(--a-ease);
}

#adminOverlay .evo-card:hover {
  transform: none;
  border-color: var(--a-line-2);
  box-shadow: var(--shadow-md);
}

#adminOverlay .evo-card::before,
#adminOverlay .evo-card:hover::before { display: none; }

#adminOverlay .evo-card h6 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Card header row: title + count chip on the left, actions on the right. */
#adminOverlay .acard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--a-3);
  margin-bottom: var(--a-4);
}

#adminOverlay .acard-head__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#adminOverlay .acount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: rgba(139, 92, 246, 0.13);
  color: var(--accent-soft);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Right-side cluster in a card header (search box + refresh button). */
#adminOverlay .ahead-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#adminOverlay .asearch {
  appearance: none;
  -webkit-appearance: none;
  width: 230px;
  max-width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--a-line-2);
  border-radius: var(--a-r-sm);
  padding: 6px 12px;
  font-size: 0.82rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#adminOverlay .asearch:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

#adminOverlay .asearch::placeholder { color: var(--text3); }

/* ── Tables ────────────────────────────────────────────────────────────── */
/* #previewOverlay renders the pack-preview table with the same classes but
   lives outside #adminOverlay, so it is included explicitly. */

#adminOverlay .table-responsive,
#previewOverlay .table-responsive {
  max-height: min(64vh, 720px);
  overflow: auto;
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-md);
  background: var(--bg2, #0f0f1e);
}

#previewOverlay .table-responsive { max-height: none; }

/* Inside a card the table bleeds to the card edges: one frame, not a box in
   a box. Direct child only — nested widgets keep the boxed look. */
#adminOverlay .evo-card > .table-responsive {
  margin: 0 calc(-1 * var(--a-5)) calc(-1 * var(--a-5));
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0 0 calc(var(--a-r-lg) - 1px) calc(var(--a-r-lg) - 1px);
}

#adminOverlay .evo-table,
#previewOverlay .evo-table { font-size: 0.84rem; margin: 0; }

/* Six columns crush below ~700px; scroll sideways instead. */
#adminOverlay .evo-table { min-width: 680px; }

#adminOverlay .evo-table th,
#previewOverlay .evo-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--a-surface-2);
  color: var(--text3);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: var(--a-3) var(--a-4);
  border-bottom: 1px solid var(--a-line-2);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

#adminOverlay .evo-table td,
#previewOverlay .evo-table td {
  padding: var(--a-3) var(--a-4);
  border-bottom: 1px solid var(--a-line);
  vertical-align: middle;
}

/* Breathing room against the rounded frame. */
#adminOverlay .evo-table th:first-child,
#adminOverlay .evo-table td:first-child,
#previewOverlay .evo-table th:first-child,
#previewOverlay .evo-table td:first-child { padding-left: var(--a-5); }

#adminOverlay .evo-table th:last-child,
#adminOverlay .evo-table td:last-child,
#previewOverlay .evo-table th:last-child,
#previewOverlay .evo-table td:last-child { padding-right: var(--a-5); }

#adminOverlay .evo-table tbody tr:last-child td,
#previewOverlay .evo-table tbody tr:last-child td { border-bottom: none; }

#adminOverlay .evo-table tbody tr:nth-child(even) td,
#previewOverlay .evo-table tbody tr:nth-child(even) td { background: var(--overlay-1); }

#adminOverlay .evo-table tbody tr,
#previewOverlay .evo-table tbody tr { transition: background 0.15s var(--a-ease); }

#adminOverlay .evo-table tbody tr:hover td,
#previewOverlay .evo-table tbody tr:hover td { background: rgba(139, 92, 246, 0.07); }

/* Dates and countdowns line up column-wise. */
#adminOverlay .acell-num { font-variant-numeric: tabular-nums; }

#adminOverlay .acell-actions { white-space: nowrap; }

/* Action buttons cluster in a wrapping flex row; gap replaces the ad-hoc
   sibling margins, so wrapped rows stay aligned. */
#adminOverlay .aacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

#adminOverlay .aacts .abtn { margin: 0; }

#adminOverlay .acell-email {
  color: var(--text2);
  font-size: 0.8rem;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#adminOverlay .acell-date {
  color: var(--text3);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Identity cell: initial avatar + username. Hue comes from the row's
   --av-h custom property (hashed from the username in JS). */
#adminOverlay .auser {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#adminOverlay .aavatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  user-select: none;
  background: linear-gradient(135deg,
    hsl(var(--av-h, 262) 62% 52%),
    hsl(calc(var(--av-h, 262) + 45) 62% 42%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

#adminOverlay .auser__name {
  font-weight: 600;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Membership cell: badge, countdown and button stack with even rhythm. */
#adminOverlay .amem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

#adminOverlay .amem .abtn { margin: 0; }
#adminOverlay .amem .mtimer { margin-top: 0; }

/* A member row earns a soft violet left edge so the sorted block reads as
   one group at a glance. */
#adminOverlay .arow--member td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
#adminOverlay .arow--lifetime td:first-child { box-shadow: inset 3px 0 0 var(--accent2); }

#adminOverlay .aempty,
#adminOverlay .aloading {
  color: var(--text3);
  text-align: center;
  padding: var(--a-6) var(--a-4) !important;
  font-size: 0.85rem;
}

#adminOverlay td.aempty::before {
  content: '📭';
  display: block;
  font-size: 1.6rem;
  margin-bottom: 6px;
}

#adminOverlay .aloading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 9px;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid var(--overlay-3);
  border-top-color: var(--accent);
  animation: aspin 0.7s linear infinite;
}

@keyframes aspin { to { transform: rotate(360deg); } }

#adminOverlay .aerror {
  color: var(--danger-text);
  text-align: center;
  padding: var(--a-5) var(--a-4) !important;
  font-size: 0.85rem;
}

#adminOverlay .alink {
  color: var(--info-text);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(6, 182, 212, 0.4);
  transition: color 0.18s var(--a-ease), border-color 0.18s var(--a-ease);
}

#adminOverlay .alink:hover { color: var(--accent2); border-bottom-color: var(--accent2); }

#adminOverlay .alink--sm {
  font-size: 0.7rem;
  display: inline-block;
  margin-top: 6px;
}

#adminOverlay .athumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--a-r-sm);
  border: 1px solid var(--a-line-2);
  background: var(--bg3, #141428);
  flex: none;
}

#adminOverlay .athumb--sm { width: 40px; height: 40px; }

/* ── Action buttons ────────────────────────────────────────────────────── */

#adminOverlay .abtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--overlay-1);
  border: 1px solid var(--a-line-2);
  color: var(--text2);
  border-radius: var(--a-r-sm);
  padding: 6px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s var(--a-ease), background 0.18s var(--a-ease),
              border-color 0.18s var(--a-ease), color 0.18s var(--a-ease);
}

#adminOverlay .abtn + .abtn { margin-left: 6px; }
#adminOverlay .abtn:hover { transform: translateY(-1px); color: var(--text); }
#adminOverlay .abtn:active { transform: translateY(0) scale(0.97); }

#adminOverlay .abtn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-ink));
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 3px 12px rgba(139, 92, 246, 0.3);
}
#adminOverlay .abtn--primary:hover { color: var(--on-accent); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45); }

#adminOverlay .abtn--success { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.3);  color: var(--success-text); }
#adminOverlay .abtn--success:hover { background: rgba(16, 185, 129, 0.22); color: var(--success-text); }

#adminOverlay .abtn--danger  { background: rgba(239, 68, 68, 0.12);  border-color: rgba(239, 68, 68, 0.3);   color: var(--danger-text); }
#adminOverlay .abtn--danger:hover  { background: rgba(239, 68, 68, 0.22);  color: var(--danger-text); }

#adminOverlay .abtn--warn    { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3);  color: var(--warn-text); }
#adminOverlay .abtn--warn:hover    { background: rgba(245, 158, 11, 0.22); color: var(--warn-text); }

#adminOverlay .abtn--info    { background: rgba(6, 182, 212, 0.12);  border-color: rgba(6, 182, 212, 0.3);   color: var(--info-text); }
#adminOverlay .abtn--info:hover    { background: rgba(6, 182, 212, 0.22);  color: var(--info-text); }

#adminOverlay .abtn--violet  { background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.32); color: var(--accent-soft); }
#adminOverlay .abtn--violet:hover  { background: rgba(139, 92, 246, 0.22); color: var(--accent-soft); }

/* Keyboard users get a visible ring everywhere in the panel. */
#adminOverlay .abtn:focus-visible,
#adminOverlay .atab:focus-visible,
#adminOverlay .btn:focus-visible,
.admin-topbar__close:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

/* ── Badges / pills ────────────────────────────────────────────────────── */

#adminOverlay .badge-evo,
#adminOverlay .apill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: uppercase;
}

/* Status dot. */
#adminOverlay .apill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

#adminOverlay .apill--free    { background: rgba(16, 185, 129, 0.13); color: var(--success-text); border: 1px solid rgba(16, 185, 129, 0.3); }
#adminOverlay .apill--members { background: rgba(139, 92, 246, 0.13); color: var(--accent-soft); border: 1px solid rgba(139, 92, 246, 0.32); }
#adminOverlay .apill--none    { background: var(--overlay-1); color: var(--text3); border: 1px solid var(--a-line-2); }
#adminOverlay .apill--limited { background: rgba(245, 158, 11, 0.13); color: var(--a-warn); border: 1px solid rgba(245, 158, 11, 0.35); margin-top: 4px; }

#adminOverlay .badge-admin  { background: rgba(139, 92, 246, 0.16); color: var(--accent-soft); border: 1px solid rgba(139, 92, 246, 0.35); }
#adminOverlay .badge-ok     { background: rgba(16, 185, 129, 0.14); color: var(--success-text); border: 1px solid rgba(16, 185, 129, 0.32); }
#adminOverlay .badge-banned { background: rgba(239, 68, 68, 0.14);  color: var(--danger-text); border: 1px solid rgba(239, 68, 68, 0.32); }

/* ── Membership countdown ──────────────────────────────────────────────── */

#adminOverlay .mtimer { min-width: 104px; margin-top: 6px; }

#adminOverlay .mtimer-text {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

#adminOverlay .mtimer-track {
  height: 5px;
  border-radius: 999px;
  background: var(--overlay-2);
  overflow: hidden;
  margin-top: 4px;
}

#adminOverlay .mtimer-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 0.5s var(--a-ease), background 0.4s var(--a-ease);
}

/* ── Coverage meter (packs tab) ────────────────────────────────────────── */

#adminOverlay .acover { min-width: 96px; }

#adminOverlay .acover__label {
  font-size: 0.74rem;
  color: var(--text2);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

#adminOverlay .acover__track {
  height: 5px;
  border-radius: 999px;
  background: var(--overlay-2);
  overflow: hidden;
}

#adminOverlay .acover__bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.35s var(--a-ease);
}

/* ── Featured packs (homepage tab) ─────────────────────────────────────── */

#adminOverlay .afeat-row {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  padding: 10px var(--a-3);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-md);
  background: var(--overlay-1);
  cursor: pointer;
  transition: border-color 0.2s var(--a-ease), background 0.2s var(--a-ease),
              transform 0.2s var(--a-ease);
}

#adminOverlay .afeat-row:hover {
  border-color: var(--a-line-2);
  background: var(--overlay-2);
  transform: translateX(3px);
}

#adminOverlay .afeat-row:has(.afeat-check:checked) {
  border-color: rgba(139, 92, 246, 0.45);
  background: rgba(139, 92, 246, 0.08);
}

#adminOverlay .afeat-check {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex: none;
  cursor: pointer;
}

#adminOverlay .afeat-check:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* ── Modals (admin-only) ───────────────────────────────────────────────── */

#membershipModal,
#limitedFreeModal { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

#addPackModal .modal-content {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-line-2) !important;
  border-radius: var(--a-r-lg);
  box-shadow: var(--shadow-lg);
}

#addPackModal .modal-header,
#addPackModal .modal-footer { border-color: var(--a-line) !important; }

#addPackModal .form-control,
#addPackModal .form-select {
  background: var(--input-bg);
  border: 1px solid var(--a-line-2);
  color: var(--text);
  border-radius: var(--a-r-sm);
}

#addPackModal .form-control:focus,
#addPackModal .form-select:focus {
  background: var(--input-bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
  color: var(--text);
}

#addPackModal .form-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 0.01em;
}

/* ── Pack ordering ─────────────────────────────────────────────────────── */
#adminOverlay .apack-drag-name {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: grab;
  user-select: none;
  border-radius: 6px;
  padding: 3px 5px 3px 2px;
  transition: background .18s ease, color .18s ease;
}

#adminOverlay .apack-drag-name:hover { background: var(--overlay-2); color: var(--accent-text); }
#adminOverlay .apack-drag-name:active { cursor: grabbing; }
#adminOverlay .apack-row--dragging { opacity: .45; }
#adminOverlay .apack-row--drop-target td { background: rgba(139,92,246,.12); }
#adminOverlay .apack-row--drop-target td:first-child { box-shadow: inset 3px 0 var(--accent); }
#adminOverlay .apack-row--drop-blocked { cursor: not-allowed; }

/* ── Motion ────────────────────────────────────────────────────────────── */
/* Everything here is opacity/transform (compositor-friendly) except the
   coverage-bar grow, which is a handful of 5px-tall elements. All of it is
   killed wholesale by the prefers-reduced-motion block at the bottom.
   CSS animations restart whenever the element (or an ancestor) flips from
   display:none, so the panel replays its entrance on every open and each
   tab switch replays its pane. */

/* Panel entrance: topbar drops in, heading and tabs cascade up. */
.admin-topbar { animation: atop-in 0.35s var(--a-ease); }

#adminOverlay .section-title,
#adminOverlay .section-sub,
#adminOverlay #adminTabs { animation: afade-up 0.4s var(--a-ease) both; }

#adminOverlay .section-sub { animation-delay: 0.05s; }
#adminOverlay #adminTabs { animation-delay: 0.1s; }

/* Rows cascade in: first ten stagger, the rest arrive as one batch so a
   long user list never feels slow. Featured-pack rows join in. */
#adminOverlay .evo-table tbody tr,
#previewOverlay .evo-table tbody tr,
#adminOverlay #featuredPacksList .afeat-row {
  animation: arow-in 0.32s var(--a-ease) both;
}

#adminOverlay .evo-table tbody tr:nth-child(1),  #previewOverlay .evo-table tbody tr:nth-child(1),  #adminOverlay .afeat-row:nth-child(1)  { animation-delay: 0.03s; }
#adminOverlay .evo-table tbody tr:nth-child(2),  #previewOverlay .evo-table tbody tr:nth-child(2),  #adminOverlay .afeat-row:nth-child(2)  { animation-delay: 0.06s; }
#adminOverlay .evo-table tbody tr:nth-child(3),  #previewOverlay .evo-table tbody tr:nth-child(3),  #adminOverlay .afeat-row:nth-child(3)  { animation-delay: 0.09s; }
#adminOverlay .evo-table tbody tr:nth-child(4),  #previewOverlay .evo-table tbody tr:nth-child(4),  #adminOverlay .afeat-row:nth-child(4)  { animation-delay: 0.12s; }
#adminOverlay .evo-table tbody tr:nth-child(5),  #previewOverlay .evo-table tbody tr:nth-child(5),  #adminOverlay .afeat-row:nth-child(5)  { animation-delay: 0.15s; }
#adminOverlay .evo-table tbody tr:nth-child(6),  #previewOverlay .evo-table tbody tr:nth-child(6),  #adminOverlay .afeat-row:nth-child(6)  { animation-delay: 0.18s; }
#adminOverlay .evo-table tbody tr:nth-child(7),  #previewOverlay .evo-table tbody tr:nth-child(7),  #adminOverlay .afeat-row:nth-child(7)  { animation-delay: 0.21s; }
#adminOverlay .evo-table tbody tr:nth-child(8),  #previewOverlay .evo-table tbody tr:nth-child(8),  #adminOverlay .afeat-row:nth-child(8)  { animation-delay: 0.24s; }
#adminOverlay .evo-table tbody tr:nth-child(9),  #previewOverlay .evo-table tbody tr:nth-child(9),  #adminOverlay .afeat-row:nth-child(9)  { animation-delay: 0.27s; }
#adminOverlay .evo-table tbody tr:nth-child(10), #previewOverlay .evo-table tbody tr:nth-child(10), #adminOverlay .afeat-row:nth-child(10) { animation-delay: 0.30s; }

#adminOverlay .evo-table tbody tr:nth-child(n+11),
#previewOverlay .evo-table tbody tr:nth-child(n+11),
#adminOverlay .afeat-row:nth-child(n+11) { animation-delay: 0.32s; }

/* The newly selected tab settles with a small pop. */
#adminOverlay .atab.active { animation: atab-pop 0.25s var(--a-ease); }

/* Coverage bars grow out to their value on render. */
#adminOverlay .acover__bar { animation: abar-in 0.7s var(--a-ease); }

/* Empty-state icon bounces in. */
#adminOverlay td.aempty::before { animation: apop 0.4s var(--a-ease); }

/* Pack thumbnails perk up with their row. */
#adminOverlay .athumb { transition: transform 0.2s var(--a-ease); }
#adminOverlay .evo-table tbody tr:hover .athumb { transform: scale(1.07); }

/* Admin-only modals and the lightbox zoom-fade in on open. */
#membershipModal > div { animation: azoom-in 0.22s var(--a-ease); }
#limitedFreeModal > div { animation: azoom-in 0.22s var(--a-ease); }
#addPackModal .modal-content { animation: azoom-in 0.24s var(--a-ease); }
#imgLightbox { animation: afade 0.2s var(--a-ease); }
#imgLightbox img { animation: azoom-in 0.24s var(--a-ease); }
#previewOverlay { animation: afade 0.25s var(--a-ease); }

@keyframes atop-in {
  from { transform: translateY(-14px); opacity: 0.4; }
}

@keyframes afade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes arow-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

@keyframes atab-pop {
  0%   { transform: scale(0.96); }
  60%  { transform: scale(1.02); }
  100% { transform: none; }
}

@keyframes abar-in {
  from { width: 0; }
}

@keyframes apop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes azoom-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes afade {
  from { opacity: 0; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .admin-topbar { padding: var(--a-3) var(--a-4); }

  #adminOverlay .evo-card { padding: var(--a-4); border-radius: var(--a-r-md); }
  #adminOverlay .section-title { font-size: 1.35rem; }
  #adminOverlay .table-responsive { max-height: none; }

  /* Full-bleed margins track the smaller card padding/radius. */
  #adminOverlay .evo-card > .table-responsive {
    margin: 0 calc(-1 * var(--a-4)) calc(-1 * var(--a-4));
    border-radius: 0 0 calc(var(--a-r-md) - 1px) calc(var(--a-r-md) - 1px);
  }

  /* Sticky headers fight touch scrolling inside a short table. */
  #adminOverlay .evo-table th { position: static; }

  #adminOverlay #adminTabs { display: flex; width: 100%; }
  #adminOverlay .atab { flex: 1 1 auto; text-align: center; padding: 8px 10px; font-size: 0.78rem; }

  #adminOverlay .abtn + .abtn { margin-left: 0; }
  #adminOverlay .acell-email { max-width: 160px; }
  #adminOverlay .auser__name { max-width: 120px; }
}

/* ── Motion preferences ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #adminOverlay *,
  #membershipModal *,
  #limitedFreeModal *,
  #addPackModal *,
  #previewOverlay * {
    animation: none !important;
    transition: none !important;
  }
  #adminOverlay .abtn:hover { transform: none; }
  #adminOverlay .afeat-row:hover { transform: none; }
  #adminOverlay .evo-table tbody tr:hover .athumb { transform: none; }
}

/* ── Per-pack price editor (packs tab) ─────────────────────────────────── */
/* Compact "$ 0.99" input group sitting in the actions cluster, sized to the
   .abtn rhythm. All colors come from theme tokens so light mode follows. */

#adminOverlay .aprice {
  display: inline-flex;
  align-items: center;
  width: 90px;
  flex: none;
  background: var(--input-bg);
  border: 1px solid var(--a-line-2);
  border-radius: var(--a-r-sm);
  overflow: hidden;
  transition: border-color 0.15s var(--a-ease), box-shadow 0.15s var(--a-ease),
              background 0.3s var(--a-ease);
}

#adminOverlay .aprice:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

#adminOverlay .aprice__cur {
  flex: none;
  padding: 5px 0 5px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-soft);
  user-select: none;
  line-height: 1.2;
}

#adminOverlay .aprice__input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  padding: 5px 8px 5px 4px;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* The spinners would eat most of a 90px input. */
#adminOverlay .aprice__input::-webkit-outer-spin-button,
#adminOverlay .aprice__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Free packs keep the editor (value is simply unused for now) but read muted. */
#adminOverlay .aprice--free { opacity: 0.7; }
#adminOverlay .aprice--free:focus-within { opacity: 1; }

#adminOverlay .aprice--invalid,
#adminOverlay .aprice--invalid:focus-within {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

/* Subtle green pulse after a confirmed save; the class is removed ~1s later. */
#adminOverlay .aprice--saved { animation: aprice-flash 0.9s var(--a-ease); }

@keyframes aprice-flash {
  0%   { border-color: var(--success); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.12); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ── Bundles tab ─────────────────────────────────────────────────────
   A bundle row has to answer three questions at a glance: which packs are
   in it, what it costs against what they cost separately, and whether Whop
   knows about it. Everything here serves one of those three. */

#adminOverlay .abundle-note {
  color: var(--text3);
  font-size: 0.85rem;
  margin: -6px 0 16px;
  max-width: 760px;
  line-height: 1.55;
}
#adminOverlay .abundle-note strong { color: var(--text2); font-weight: 700; }

#adminOverlay .abhead {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
#adminOverlay .abname {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
#adminOverlay .abdesc {
  color: var(--text3);
  font-size: 0.79rem;
  max-width: 260px;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pack chips: the bundle's actual contents, wrapped so a big bundle stays
   one readable block instead of stretching the column. */
#adminOverlay .abchips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 300px;
}
#adminOverlay .abchip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(139, 92, 246, 0.12);
  color: var(--accent-soft);
  border: 1px solid rgba(139, 92, 246, 0.3);
}
/* A pack that has since been switched to free — the buyer would be paying
   for something they already have. */
#adminOverlay .abchip--free {
  background: rgba(245, 158, 11, 0.13);
  color: var(--a-warn);
  border-color: rgba(245, 158, 11, 0.35);
}
#adminOverlay .abchip--empty {
  background: var(--overlay-1);
  color: var(--text3);
  border: 1px dashed var(--a-line-2);
}
#adminOverlay .abcount {
  color: var(--text3);
  font-size: 0.74rem;
  margin-top: 6px;
}

#adminOverlay .abwarn {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.76rem;
  line-height: 1.45;
  max-width: 300px;
  background: rgba(245, 158, 11, 0.1);
  color: var(--a-warn);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

#adminOverlay .abprice {
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
#adminOverlay .abprice__sub {
  color: var(--success-text);
  font-size: 0.75rem;
  margin-top: 3px;
  white-space: nowrap;
}
#adminOverlay .abprice__sub--warn { color: var(--a-warn); }

/* ── Bundle create/edit modal ── */

#bundleModal .abpick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--overlay-3);
  border-radius: 10px;
  background: var(--overlay-1);
  cursor: pointer;
  transition: border-color 0.18s var(--a-ease), background 0.18s var(--a-ease);
}
#bundleModal .abpick:hover { border-color: rgba(139, 92, 246, 0.45); }
#bundleModal .abpick:has(.abpick__check:checked) {
  border-color: rgba(139, 92, 246, 0.55);
  background: rgba(139, 92, 246, 0.1);
}
#bundleModal .abpick__check { width: 16px; height: 16px; flex: 0 0 auto; }
#bundleModal .abpick img {
  width: 52px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--overlay-3);
  flex: 0 0 auto;
}
#bundleModal .abpick__name { font-weight: 600; color: var(--text); flex: 1 1 auto; }
#bundleModal .abpick__price {
  color: var(--text3);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

/* Running total: what the picked packs are worth against the bundle price,
   or the rules still blocking a save. */
#bundleModal .abm-summary {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.84rem;
  line-height: 1.5;
  border: 1px solid var(--overlay-3);
  background: var(--overlay-1);
  color: var(--text2);
}
#bundleModal .abm-summary strong { color: var(--text); }
#bundleModal .abm-summary--good {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--success-text);
}
#bundleModal .abm-summary--good strong { color: var(--success-text); }
#bundleModal .abm-summary--bad {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--a-warn);
}
#bundleModal .abm-summary--flat { color: var(--text2); }