/* Hunter Row — Density table row for Dashboard "Активные Hunter'ы" list
 * UI v2 density-first refactor (2026-05-13)
 * Requires: tokens.css, spacing.css
 *
 * Replaces the previous .hunter-card / .hunter-one grid layout which used
 * 3 visible action buttons + emoji metrics + ~85px row height.
 * New layout is 44px high, label-above-value metric pairs, icon-only actions.
 *
 * Usage: see js/components.js HunterCard.render()
 */

.hunters-preview {
  /* Override the legacy grid/flex column layout — now it's a stacked list of rows */
  display: flex;
  flex-direction: column;
}

.hunter-row {
  display: grid;
  grid-template-columns:
    8px               /* status dot */
    minmax(160px, 1.4fr)   /* name + handle */
    minmax(70px, 1fr)      /* messages */
    minmax(70px, 1fr)      /* channels */
    minmax(70px, 1fr)      /* groups */
    minmax(70px, 1fr)      /* leads */
    minmax(110px, 1.2fr)   /* today */
    auto              /* status pill */
    auto;             /* actions */
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.12s ease;
}

.hunter-row:last-child { border-bottom: none; }
.hunter-row:hover { background: rgba(255, 255, 255, 0.02); }

/* ── Status dot (col 1) ──────────────────────────────────────────────── */
.hunter-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--text-muted);
}
.hunter-row__dot--active  { background: var(--color-success-500); }
.hunter-row__dot--paused  { background: var(--color-warning-500); }
.hunter-row__dot--stopped { background: var(--text-muted); }
.hunter-row__dot--error   { background: var(--color-error-500); }

/* ── Identity (col 2) ────────────────────────────────────────────────── */
.hunter-row__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hunter-row__name {
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hunter-row__handle {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Data-freshness chip rendered as the 3rd identity line. Self-start so the
 * .status-indicator--compact pill sizes to content instead of stretching the
 * full identity column. See js/components.js HunterCard.updateFreshness. */
.hunter-row__freshness {
  align-self: flex-start;
  margin-top: 2px;
  max-width: 100%;
  padding: 2px 8px;
}
.hunter-row__freshness .status-indicator__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Metric pairs (cols 3, 4, 5, 6) ──────────────────────────────────── */
.hunter-row__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hunter-row__label {
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}
.hunter-row__value {
  font-size: var(--font-sm);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Status pill (col 7) ─────────────────────────────────────────────── */
.hunter-row__status {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}
.hunter-row__status--active {
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-success-500);
}
.hunter-row__status--paused {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-warning-500);
}
.hunter-row__status--stopped {
  background: rgba(107, 114, 128, 0.18);
  color: var(--text-secondary);
}
.hunter-row__status--error {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-error-500);
}

/* ── Actions (col 8) ─────────────────────────────────────────────────── */
.hunter-row__actions {
  display: flex;
  gap: 4px;
}
.hunter-row__action {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.hunter-row__action:hover {
  background: var(--surface-hover);
  border-color: var(--border-default);
  color: var(--text-primary);
}
.hunter-row__action--danger:hover {
  color: var(--color-error-500);
  border-color: rgba(239, 68, 68, 0.4);
}
.hunter-row__action .icon {
  width: 14px;
  height: 14px;
}

/* ── Skeleton row placeholder ────────────────────────────────────────── */
.hunter-row--skeleton {
  height: 44px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  background-size: 200% 100%;
  animation: hunter-skel 1.4s infinite;
}
@keyframes hunter-skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Mobile responsive (collapse some columns) ───────────────────────── */
@media (max-width: 1024px) {
  .hunter-row {
    grid-template-columns:
      8px                    /* dot */
      minmax(140px, 1.4fr)   /* identity */
      minmax(70px, 1fr)      /* messages */
      minmax(70px, 1fr)      /* channels */
      minmax(70px, 1fr)      /* leads */
      minmax(100px, 1.2fr)   /* today */
      auto                   /* status */
      auto;                  /* actions — 8 tracks for 8 visible items */
  }
  /* At 1024px drop groups first; channels (broadcast) stays visible */
  .hunter-row__metric--groups { display: none; }
}
@media (max-width: 768px) {
  .hunter-row {
    grid-template-columns:
      8px
      minmax(120px, 1.4fr)
      minmax(80px, 1fr)
      auto
      auto;
    padding: var(--space-2) var(--space-3);
  }
  .hunter-row__metric--channels,
  .hunter-row__metric--groups,
  .hunter-row__metric--leads { display: none; }
}