/* ═══════════════════════════ COMPONENTS ═══════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  border: 1px solid transparent;
  height: 42px;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.btn-primary {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  color: var(--accent-contrast);
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--accent-ring), inset 0 1px 0 rgba(255,255,255,0.25);
  text-decoration: none;
  color: var(--accent-contrast);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  text-decoration: none;
  color: var(--text);
}

/* ── Badges (soft style) ─────────────────────────────────── */
.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
}

.status-badge.online  { background: rgba(62,207,142,0.12);  color: var(--st-online); }
.status-badge.recent  { background: rgba(245,181,68,0.12);  color: var(--st-recent); }
.status-badge.offline { background: var(--surface); color: var(--text-muted); }
.status-badge.unknown { background: var(--surface); color: var(--text-dim); }
[data-theme="light"] .status-badge.online { background: rgba(22,163,74,0.10); }
[data-theme="light"] .status-badge.recent { background: rgba(217,119,6,0.10); }

.source-badge { background: var(--surface); color: var(--text-muted); border-color: var(--border); }
.role-badge   { background: rgba(139,92,246,0.12); color: #a78bfa; }
[data-theme="light"] .role-badge { background: rgba(124,58,237,0.10); color: #6d28d9; }

/* ── Count badge ─────────────────────────────────────────── */
.count-badge {
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 7px;
  border-radius: 100px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* ── Status dots ─────────────────────────────────────────── */
.dot-status {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-status.online  { background: var(--st-online); box-shadow: 0 0 6px var(--st-online); }
.dot-status.recent  { background: var(--st-recent); }
.dot-status.offline { background: var(--st-offline); }
.dot-status.unknown { background: var(--st-unknown); border: 1px solid var(--border); }

/* ── Source dot / badge (used in map filters) ────────────── */
.src-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.src-name { flex: 1; color: var(--text); font-size: 13px; }
.src-badge {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 7px;
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ── Spinner ─────────────────────────────────────────────── */
.spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

/* ── Copyable values ─────────────────────────────────────── */
.copyable {
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
}
.copyable:hover {
  filter: brightness(1.15);
  border-color: var(--accent) !important;
}
.copyable::after {
  content: '⧉';
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.5;
}

/* ── Copy toast ──────────────────────────────────────────── */
#copy-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(62,207,142,0.15);
  border: 1px solid var(--st-online);
  color: var(--st-online);
  padding: 9px 16px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}