/* SetupWizard — page-specific styles */

.setup-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--kr-sp-10);
}

.setup-card {
  background: var(--kr-bg-surface);
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-r-3xl);
  padding: var(--kr-sp-12);
  width: 100%;
  max-width: 560px;
}

.setup-header {
  text-align: center;
  margin-bottom: 28px;
}

.setup-logo { font-size: 32px; margin-bottom: var(--kr-sp-4); }

.setup-title {
  font-size: var(--kr-fs-4xl);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.setup-subtitle {
  color: var(--kr-text-muted);
  font-size: var(--kr-fs-md);
  margin-top: var(--kr-sp-2);
}

/* ── Steps indicator ─────────────────────────────────────── */
.setup-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  gap: var(--kr-sp-2);
}

.setup-step-item {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  opacity: 0.35;
}
.setup-step-item[data-active="true"],
.setup-step-item[data-done="true"] { opacity: 1; }

.setup-step-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--kr-r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kr-bg-hover);
  color: var(--kr-text-muted);
}
.setup-step-item[data-active="true"] .setup-step-icon {
  background: rgba(var(--kr-accent-rgb), 0.15);
  color: var(--kr-accent);
}
.setup-step-item[data-done="true"] .setup-step-icon {
  background: rgba(var(--kr-success-rgb), 0.15);
  color: var(--kr-success);
}

.setup-step-label {
  font-size: var(--kr-fs-base);
  font-weight: 400;
  color: var(--kr-text-muted);
}
.setup-step-item[data-active="true"] .setup-step-label {
  font-weight: 600;
  color: var(--kr-text-primary);
}

.setup-step-separator { color: var(--kr-text-ghost); margin: 0 var(--kr-sp-2); }


/* ── Content area ────────────────────────────────────────── */
.setup-content { min-height: 300px; }

.setup-h2 {
  font-size: var(--kr-fs-xl);
  font-weight: 600;
  margin-bottom: var(--kr-sp-4);
  letter-spacing: -0.01em;
}

.setup-desc {
  color: var(--kr-text-muted);
  font-size: var(--kr-fs-md);
  line-height: 1.6;
  margin-bottom: var(--kr-sp-9);
}

/* ── Error banner ────────────────────────────────────────── */
.setup-error {
  background: rgba(var(--kr-error-rgb), 0.1);
  border: 1px solid rgba(var(--kr-error-rgb), 0.2);
  border-radius: var(--kr-r-lg);
  padding: var(--kr-sp-5) var(--kr-sp-7);
  margin-bottom: var(--kr-sp-8);
  font-size: var(--kr-fs-base);
  color: var(--kr-error);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.setup-error-close {
  background: none;
  border: none;
  color: var(--kr-error);
  cursor: pointer;
  font-size: 16px;
}

/* ── Agent list ──────────────────────────────────────────── */
.setup-agent-list {
  display: flex;
  flex-direction: column;
  gap: var(--kr-sp-4);
  margin-bottom: var(--kr-sp-4);
}

.setup-agent-row {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-6);
  padding: var(--kr-sp-6) var(--kr-sp-7);
  border-radius: var(--kr-r-lg);
  background: var(--kr-bg-hover);
}

.setup-agent-name { font-weight: 600; font-size: var(--kr-fs-md); }

.setup-agent-meta {
  display: flex;
  gap: var(--kr-sp-4);
  align-items: center;
  font-size: var(--kr-fs-sm);
  margin-top: 2px;
  color: var(--kr-text-faint);
}

/* ── Badges ──────────────────────────────────────────────── */
.setup-badge-ok {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-2);
  font-size: var(--kr-fs-sm);
  color: var(--kr-success);
  padding: var(--kr-sp-2) var(--kr-sp-5);
  border-radius: 20px;
  background: rgba(var(--kr-success-rgb), 0.1);
}

.setup-badge-origin {
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  padding: 1px var(--kr-sp-3);
  border-radius: var(--kr-r-sm);
  background: rgba(var(--kr-info-rgb), 0.1);
  color: rgba(var(--kr-info-rgb), 0.7);
  border: 1px solid rgba(var(--kr-info-rgb), 0.15);
}

.setup-badge-host {
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  padding: 1px var(--kr-sp-3);
  border-radius: var(--kr-r-sm);
  background: rgba(var(--kr-warning-amber-rgb), 0.1);
  color: rgba(var(--kr-warning-amber-rgb), 0.8);
  border: 1px solid rgba(var(--kr-warning-amber-rgb), 0.2);
}

.setup-toggle-btn {
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  padding: 3px var(--kr-sp-4);
  border-radius: var(--kr-r-sm);
  border: 1px solid var(--kr-border);
  background: transparent;
  color: var(--kr-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.setup-toggle-btn[data-on="true"] {
  background: rgba(var(--kr-success-rgb), 0.1);
  color: rgba(var(--kr-success-rgb), 0.9);
  border-color: rgba(var(--kr-success-rgb), 0.3);
}
.setup-toggle-btn[data-on="false"] {
  background: rgba(var(--kr-error-rgb), 0.08);
  color: rgba(var(--kr-error-rgb), 0.7);
  border-color: rgba(var(--kr-error-rgb), 0.2);
}

.setup-agent-row[data-disabled="true"] {
  opacity: 0.5;
}

.setup-badge-update {
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  padding: 1px var(--kr-sp-3);
  border-radius: var(--kr-r-sm);
  background: rgba(var(--kr-warning-rgb), 0.1);
  color: var(--kr-warning);
}

.setup-badge-hidden {
  font-size: var(--kr-fs-2xs);
  padding: 1px 5px;
  border-radius: var(--kr-r-xs);
  background: var(--kr-bg-hover-strong);
  color: var(--kr-text-dim);
}

.setup-badge-ai-config {
  font-size: var(--kr-fs-xs);
  padding: 1px var(--kr-sp-3);
  border-radius: var(--kr-r-sm);
  background: rgba(var(--kr-success-rgb), 0.1);
  color: var(--kr-success);
}

/* ── Buttons (setup-specific) ────────────────────────────── */
.setup-btn-primary {
  width: 100%;
  padding: var(--kr-sp-6) var(--kr-sp-9);
  background: var(--kr-accent);
  color: var(--kr-bg-base);
  border: none;
  border-radius: var(--kr-r-lg);
  font-size: var(--kr-fs-lg);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kr-sp-4);
  margin-top: var(--kr-sp-9);
  font-family: inherit;
}
.setup-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Repo list ───────────────────────────────────────────── */
.setup-repo-list {
  display: flex;
  flex-direction: column;
  gap: var(--kr-sp-3);
  max-height: 320px;
  overflow-y: auto;
}

.setup-repo-row {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-5);
  padding: var(--kr-sp-5) var(--kr-sp-6);
  border-radius: var(--kr-r-lg);
  background: var(--kr-bg-hover);
}

.setup-repo-name { font-weight: 600; font-size: var(--kr-fs-md); }

.setup-repo-meta {
  display: flex;
  gap: var(--kr-sp-4);
  align-items: center;
  font-size: var(--kr-fs-sm);
  margin-top: 2px;
  color: var(--kr-text-faint);
}

/* ── Path list ───────────────────────────────────────────── */
.setup-path-list { display: flex; flex-direction: column; gap: var(--kr-sp-3); }

.setup-path-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--kr-sp-4) var(--kr-sp-6);
  border-radius: var(--kr-r-md);
  background: var(--kr-bg-hover);
}

/* ── Detecting skeleton ────────────────────────────────────── */
.setup-detecting-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--kr-sp-4);
  padding: var(--kr-sp-5) var(--kr-sp-6);
  border-radius: var(--kr-r-md);
  background: rgba(var(--kr-accent-rgb, 99, 102, 241), 0.06);
  border-left: 3px solid var(--kr-accent);
  margin-bottom: var(--kr-sp-5);
}
.setup-detecting-hint {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-faint);
  margin: 2px 0 0;
}
.setup-skeleton {
  opacity: 0.4;
  animation: pulse 1.5s infinite ease-in-out;
}
.setup-skeleton-bar {
  height: 14px;
  width: 60%;
  border-radius: var(--kr-r-sm);
  background: var(--kr-text-faint);
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.15; }
}

/* ── Done step ───────────────────────────────────────────── */
.setup-done-icon { font-size: 48px; margin-bottom: var(--kr-sp-6); }
.setup-completing-spinner {
  color: var(--kr-accent);
  margin-bottom: var(--kr-sp-5);
}
.setup-completing-steps {
  margin-top: var(--kr-sp-6);
  text-align: left;
  display: inline-block;
}
.setup-completing-step {
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-muted);
  padding: var(--kr-sp-2) 0;
  animation: fadeIn 0.5s ease-in;
}
.setup-completing-step::before {
  content: '›  ';
  color: var(--kr-accent);
  font-weight: bold;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.setup-completing-step:nth-child(2) { animation-delay: 0.3s; animation-fill-mode: backwards; }
.setup-completing-step:nth-child(3) { animation-delay: 0.6s; animation-fill-mode: backwards; }
