/* ═══════════════════════════════════════════════════════════════════════════
   VINTOLOGY — OPERATOR CONSOLE (admin surfaces)
   Styles for /admin/status, /admin/catalog and the product-hunting controls on
   /admin/cj. These pages are OPERATOR-ONLY and deliberately plain: dense,
   scannable, and honest about state. They are never linked from the customer
   nav drawer.
   ═══════════════════════════════════════════════════════════════════════════ */

.admin-panel {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.2rem clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  gap: 1.2rem;
}

/* ── Connection cards ─────────────────────────────────────────────────── */
.conn-card {
  border: 1px solid var(--border, #DCD8CE);
  border-left: 4px solid var(--muted, #77766D);
  border-radius: 14px;
  background: var(--surface, #EAE6DC);
  padding: 1.2rem 1.3rem;
}

.conn-card.is-ok { border-left-color: #2e7d52; }
.conn-card.is-bad { border-left-color: #b3261e; }

.conn-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}

.conn-card__head h2 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}

.conn-badge {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--muted, #77766D);
}

.conn-card.is-ok .conn-badge { color: #2e7d52; }
.conn-card.is-bad .conn-badge { color: #b3261e; }

/* ── Fact list (credential shapes) ────────────────────────────────────── */
.conn-facts {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: .35rem 1rem;
  margin: 0 0 .9rem;
  font-size: .86rem;
}

.conn-facts dt {
  font-weight: 600;
  color: var(--muted, #77766D);
}

.conn-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.conn-shape {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem;
  padding: .1rem .4rem;
  border-radius: 5px;
  margin-right: .4rem;
  background: rgba(0, 0, 0, .07);
}

/* A wrong-shaped credential is the single most useful thing this page shows. */
.conn-shape--hex32,
.conn-shape--other,
.conn-shape--missing {
  background: #b3261e;
  color: #fff;
}

.conn-shape--shpat,
.conn-shape--shpss,
.conn-shape--shpca {
  background: #2e7d52;
  color: #fff;
}

/* ── Probe steps ──────────────────────────────────────────────────────── */
.conn-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .3rem;
  font-size: .86rem;
}

.conn-step {
  padding-left: 1.3rem;
  position: relative;
  line-height: 1.5;
}

.conn-step::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}

.conn-step.is-ok::before { content: "✓"; color: #2e7d52; }
.conn-step.is-bad::before { content: "✕"; color: #b3261e; }

.conn-sample,
.conn-error {
  margin: .8rem 0 0;
  font-size: .86rem;
  line-height: 1.5;
}

.conn-error {
  color: #b3261e;
  font-weight: 600;
}

/* ── Stats ────────────────────────────────────────────────────────────── */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 1rem;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.stat__num {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.stat__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted, #77766D);
}

/* ── Pills ────────────────────────────────────────────────────────────── */
.pill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.pill {
  font-size: .8rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--border, #DCD8CE);
  background: rgba(0, 0, 0, .03);
}

/* ── Catalog table ────────────────────────────────────────────────────── */
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.2rem;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, #DCD8CE);
  border-radius: 14px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--border, #DCD8CE);
  vertical-align: middle;
}

.admin-table thead th {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted, #77766D);
  background: rgba(0, 0, 0, .03);
  white-space: nowrap;
}

.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table td a { font-weight: 600; }
.admin-table td .small { display: block; font-size: .74rem; }

.src-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem;
  padding: .15rem .45rem;
  border-radius: 5px;
  background: rgba(0, 0, 0, .07);
}

.badge--on,
.badge--off {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.badge--on { background: #2e7d52; color: #fff; }
.badge--off { background: rgba(0, 0, 0, .12); color: var(--muted, #77766D); }

/* ── Product-hunting presets ──────────────────────────────────────────── */
.hunt-presets {
  max-width: 72rem;
  margin: 0 auto 1.4rem;
  padding: 0 1.2rem;
}

.hunt-presets__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted, #77766D);
  margin: 0 0 .7rem;
}

.hunt-presets__row {
  display: grid;
  gap: .9rem;
}

.hunt-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.hunt-group__name {
  min-width: 10.5rem;
  font-size: .8rem;
  font-weight: 700;
}

.hunt-chip {
  font: inherit;
  font-size: .8rem;
  padding: .32rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--border, #DCD8CE);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.hunt-chip:hover {
  background: var(--ink, #171815);
  border-color: var(--ink, #171815);
  color: var(--ivory, #F6F3EB);
  transform: translateY(-1px);
}

.hunt-chip:focus-visible { outline: 2px solid var(--ink, #171815); outline-offset: 2px; }

/* ── Missing button variants used by the admin templates ──────────────── */
.btn--gold {
  background: var(--gold, #c9a45c);
  border-color: var(--gold, #c9a45c);
  color: #06201f;
}

.btn--gold:disabled { opacity: .5; cursor: not-allowed; }

.btn--sm {
  font-size: .8rem;
  padding: .35rem .75rem;
}

.btn--ghost {
  background: transparent;
  border-color: var(--border, #DCD8CE);
  color: inherit;
}

/* The staged/results containers need a minimum rhythm even when empty. */
.cj-results { max-width: 72rem; margin: 0 auto; padding: 0 1.2rem; }

@media (max-width: 640px) {
  .conn-facts { grid-template-columns: 1fr; gap: .15rem; }
  .conn-facts dt { margin-top: .5rem; }
  .hunt-group__name { min-width: 100%; }
  .stat-row { gap: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hunt-chip { transition: none !important; transform: none !important; }
}