/* ==========================================================================
   Thunder Stallion — Admin Dashboard
   (extends dashboard.css shell: .app-shell, .side, .panel, .dash-tabs)
   ========================================================================== */

.admin-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.admin-search { flex: 1; min-width: 220px; max-width: 360px; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); }
.admin-search input { flex: 1; background: none; border: none; font-size: 14px; }
.admin-search svg { width: 16px; height: 16px; color: var(--text-faint); }

.queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }

.listing-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.listing-card__banner { height: 96px; background-size: cover; background-position: center; position: relative; }
.listing-card__banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(13, 20, 48, 0.9)); }
.listing-card__status { position: absolute; top: 12px; right: 12px; z-index: 2; }
.listing-card__logo { width: 54px; height: 54px; border-radius: 14px; object-fit: cover; position: absolute; bottom: -22px; left: 20px; z-index: 2; box-shadow: 0 0 0 3px var(--surface-solid), var(--glow-purple); background: var(--surface-2); }
.listing-card__body { padding: 32px 20px 20px; }
.listing-card__name { font-family: var(--font-display); font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.listing-card__meta { display: flex; gap: 10px; align-items: center; color: var(--text-dim); font-size: 12.5px; margin-top: 4px; }
.listing-card__desc { color: var(--text-dim); font-size: 13.5px; margin: 12px 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.listing-card__sub { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.listing-card__sub div span { display: block; font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; }
.listing-card__sub div b { font-family: var(--font-mono); font-size: 13px; }

.listing-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.listing-actions .btn { padding: 10px; font-size: 13px; }
.listing-actions .btn--full { grid-column: 1 / -1; }
.act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; border: 1px solid var(--border); transition: all var(--t-fast); }
.act svg { width: 15px; height: 15px; }
.act--approve { color: var(--up); border-color: rgba(33, 230, 164, 0.3); background: rgba(33, 230, 164, 0.08); }
.act--approve:hover { background: rgba(33, 230, 164, 0.18); }
.act--reject { color: var(--down); border-color: rgba(255, 72, 107, 0.3); background: rgba(255, 72, 107, 0.08); }
.act--reject:hover { background: rgba(255, 72, 107, 0.18); }
.act--feature { color: var(--orange); border-color: rgba(255, 138, 61, 0.3); background: rgba(255, 138, 61, 0.08); }
.act--feature:hover { background: rgba(255, 138, 61, 0.18); }
.act--delete { color: var(--text-dim); }
.act--delete:hover { color: var(--down); border-color: rgba(255, 72, 107, 0.3); }
.act--view { color: var(--cyan-bright); border-color: rgba(25, 227, 255, 0.25); background: rgba(25, 227, 255, 0.06); }
.act--view:hover { background: rgba(25, 227, 255, 0.14); }

/* Admin stat badge row */
.admin-counts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.admin-count { display: flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; }
.admin-count b { font-family: var(--font-mono); }
.admin-count i { width: 8px; height: 8px; border-radius: 50%; }

/* fade-out on action */
.listing-card.removing { animation: fade-out 0.4s var(--ease) forwards; }
@keyframes fade-out { to { opacity: 0; transform: scale(0.92); } }

/* ---- Admin controls (header) ------------------------------------------ */
.admin-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#admin-status { white-space: nowrap; }

/* ---- Listing card extras (links row) ---------------------------------- */
.listing-card__links { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.listing-card__links a { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); padding: 5px 9px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.listing-card__links a:hover { color: var(--cyan-bright); border-color: var(--border-glow); }
.act--boost { color: var(--orange); border-color: rgba(255, 138, 61, 0.3); background: rgba(255, 138, 61, 0.08); }
.act--boost:hover { background: rgba(255, 138, 61, 0.18); }

/* ---- User cards -------------------------------------------------------- */
.user-card { padding: 18px; display: flex; align-items: center; gap: 14px; }
.user-card__av { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-brand); color: #04121f; font-weight: 700; font-family: var(--font-display); flex-shrink: 0; }
.user-card .m { flex: 1; min-width: 0; }
.user-card .m b { display: block; }
.user-card .m span { font-size: 12.5px; color: var(--text-dim); }

/* ---- Admin key gate (overlay) ----------------------------------------- */
.admin-gate { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: 24px; background: rgba(4, 5, 13, 0.82); backdrop-filter: blur(10px); }
.admin-gate__card { width: min(420px, 100%); padding: 36px; text-align: center; }
.admin-gate__card .tile__ico { margin: 0 auto 16px; }
.admin-gate__card h2 { font-size: 22px; margin-bottom: 6px; }
.admin-gate__card p { color: var(--text-dim); font-size: 14px; margin-bottom: 20px; }
.admin-gate__err { display: none; margin-bottom: 12px; color: #ffd0d8; background: rgba(255, 72, 107, 0.1); border: 1px solid rgba(255, 72, 107, 0.3); padding: 10px 12px; border-radius: 12px; font-size: 13px; }
.admin-gate .auth-foot { margin-top: 18px; }

/* ---- Details modal ----------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: var(--z-overlay); display: none; place-items: center; padding: 24px; }
.modal.open { display: grid; animation: fade-in 0.2s ease; }
.modal__scrim { position: absolute; inset: 0; background: rgba(4, 5, 13, 0.7); backdrop-filter: blur(6px); }
.modal__card { position: relative; width: min(560px, 100%); max-height: 86vh; overflow-y: auto; padding: 28px; animation: pop-in 0.24s var(--ease-out); }
.modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); }
.modal__close:hover { color: var(--text); border-color: var(--border-strong); }