/* Buttons */
.btn {
  display: inline-block;
  padding: 10px 12px;
  border: 1px solid #333;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  background: var(--bg-surface);
  cursor: pointer;
  user-select: none;
}

.btn.secondary {
  border-color: #999;
  color: var(--text);
}

.btn.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn.success {
  background: #1f8f4c;
  border-color: #1f8f4c;
  color: #fff;
}

.btn.success:hover { background: #16733d; }


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

/* Pills (used in machines board) */
.status-pill{
  display:inline-block;
  font-size:.8rem;
  padding:2px 8px;
  border:1px solid #ccc;
  border-radius:999px;
  background:#f8f8f8;
  color:#333;
  white-space:nowrap;
}

/* Status option group (radio-as-buttons) */
.status-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.status-option input { display: none; }

.status-option span {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  background: #f7f7f7;
}

.status-option input:checked + span {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}