/**
 * @file button.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The classic buttons (.btn-primary, .btn-outline, .btn-ghost, .btn-danger and friends), their copied and success states, and the solid danger button.
 *   Reads only the tokens in theme.css. The rules are theme.css's, moved unchanged and in order.
 * @usage Linked from public/spa.html right after theme.css, in the order theme.css held these rules
 *   (the shell block), and from every standalone page that links theme.css.
 * @version-history
 *   v1.0.0 — 2026-09-24 — Moved unchanged from css/theme.css (lines 959-1111, 1749-1750), so theme.css
 *     holds tokens only (UI consolidation, a move).
 */

/* ── Buttons ── */
/* Button classes are anchor-safe: applied to <a> they render as buttons,
   not underlined links (lets views use canonical .btn-* on link-buttons). */
.btn-primary, .btn-outline, .btn-ghost, .btn-danger, .btn-danger-solid,
.btn-success, .btn-info {
  text-decoration: none;
}
.btn-primary {
  padding: 8px 20px;
  background: var(--primary-gradient);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  font-weight: var(--weight-semibold);
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-heart);
  letter-spacing: 0;
  animation: none;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232, 86, 74, 0.35);
}

.btn-primary:active {
  transform: translateY(0);
}

/* `copied` is the confirmed state of <CopyButton> (components/CopyButton.js), which stamps the
   class on the button for ~2s after a successful copy. It shares .success's green so the one
   copy control looks the same everywhere — .hlp-copy-btn.copied, .dv-copy-btn.copied and
   .stb-copy-btn.stb-copied each used to reimplement this in their own view stylesheet. */
.btn-primary.success,
.btn-primary.copied {
  background: var(--success-gradient);
  box-shadow: var(--success-glow);
  animation: none;
}

.btn-outline {
  padding: 0.65rem 1.5rem;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.84rem;
  font-weight: var(--weight-medium);
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0;
  box-shadow: var(--shadow-sm);
  animation: none;
}

.btn-outline:hover {
  border-color: var(--text-muted);
  color: var(--text);
  background: var(--control-bg);
  box-shadow: var(--shadow-sm);
  transform: none;
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: var(--text-small);
  border-radius: var(--radius-xs);
}

.btn-success {
  padding: 0.65rem 1.5rem;
  background: var(--success-gradient);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

.btn-info {
  padding: 0.65rem 1.5rem;
  background: #3B82F6;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  font-weight: var(--weight-semibold);
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
.btn-info:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

.btn-danger {
  background: var(--danger-bg);
  color: var(--danger-fg);
  border: 1px solid var(--danger-border);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.81rem;
  font-weight: var(--weight-medium);
  transition: all 0.15s;
}

.btn-ghost:hover {
  border-color: var(--text-muted);
  color: var(--text);
  background: var(--control-bg);
}

/* The quiet buttons confirm a copy by turning green rather than by swapping background —
   they sit on cards and in field rows where a filled green pill would shout. */
.btn-outline.copied,
.btn-ghost.copied {
  border-color: var(--success-fg);
  color: var(--success-fg);
}

/* The one copy modifier. A copy button that sits inline in a field or row next to the value it
   copies (a <code> line, a GAII, a tunnel URL) must not stretch the row or wrap its label.
   Everything else a copy button needs is already in .btn-primary / .btn-outline / .btn-ghost. */
.btn-copy-inline {
  flex: none;
  white-space: nowrap;
}


.btn-danger-solid { padding: 8px 20px; background: var(--danger,#ef4444); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 0.84rem; font-weight: var(--weight-medium); cursor: pointer; transition: all 0.15s; }
.btn-danger-solid:hover { background: #dc2626; }