/* ---- Base ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;

  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);

  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;

  border: none;
  cursor: pointer;
  user-select: none;

  transition: 0.18s ease;

  /* keep button label stable without forcing global nowrap */
  min-width: 0;
}

/* ---- Primary ---- */
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
}

/* ---- Ghost ---- */
.btn-ghost {
  background: var(--btn-ghost-bg);
  border: 1px solid var(--btn-ghost-border);
  color: var(--btn-ghost-fg);
}

.btn-ghost:hover {
  background: var(--btn-ghost-hover);
}

/* ---- Danger ---- */
.btn-danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-fg);
}

.btn-danger:hover {
  background: var(--btn-danger-hover);
}

/* ---- Table Button (Compact) ---- */
.btn-table {
  padding: 0.4rem 0.8rem; /* Minimum size that does not compress the line */
  font-size: 1.2rem;
  line-height: 1;

  border-radius: calc(var(--radius) - 2px);
}

.btn-table--icon {
  padding: 0.4rem;
  width: 2.4rem;
  height: 2.4rem;
}

/* ---- Header Button Rules ---- */
/* prevent labels from breaking into vertical characters in header */
.app-header .btn {
  white-space: nowrap;
}

/* ---- Button Reset for <a> ---- */
a.btn {
  text-decoration: none; /* Remove underline */
  color: inherit; /* Kill the blue text */
}

a.btn:visited {
  color: inherit; /* Kill visited purple */
}

/* ---- Touch Device ---- */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  .btn,
  .btn-primary,
  .btn-ghost,
  .btn-danger {
    transition: none;
  }

  .btn:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .btn-danger:hover {
    background: unset;
    border-color: unset;
    box-shadow: unset;
  }

  .btn:focus,
  .btn:focus-visible {
    outline: none;
    box-shadow: none;
  }

  /* compact header buttons on mobile to avoid overflow */
  .app-header .btn {
    padding: 0.8rem 1.1rem;
    font-size: 1.2rem;
  }
}