/*
 * Buttons - Notion-style
 */

.btn {
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-button);
  font-weight: 500;
  font-size: 0.9375rem;
  border: none;
  transition: all var(--transition-fast);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  white-space: nowrap;
  /* Prevent mobile browsers from showing default blue tap highlight. */
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus,
.btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-primary-rgb), 0.3) !important;
}

.btn:hover,
.btn:active,
.btn.active,
.btn:focus,
.btn:focus-visible {
  outline: none !important;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: white;
}

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

.btn-primary:focus,
.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(var(--btn-primary-rgb), 0.32) !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.show > .btn-primary.dropdown-toggle {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  color: white;
}

.btn-outline-primary {
  background: transparent;
  border: 1.5px solid var(--accent-primary);
  color: var(--accent-primary);
}

.btn-outline-primary:hover {
  background: var(--accent-primary);
  color: white;
}

.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.show > .btn-outline-primary.dropdown-toggle {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

/* Incremental add (+ row, add to pick list) — mint chip; keeps solid / outline-primary for main CTAs */
.btn-add {
  background: var(--btn-add-bg);
  border: 1.5px solid var(--btn-add-border);
  color: var(--btn-add-color);
}

a.btn-add {
  text-decoration: none;
  color: var(--btn-add-color);
}

a.btn-add:hover {
  color: var(--btn-add-hover-color);
}

.btn-add:hover {
  background: var(--btn-add-hover-bg);
  border-color: var(--btn-add-hover-border);
  color: var(--btn-add-hover-color);
}

.btn-add:focus,
.btn-add:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-primary-rgb), 0.28) !important;
}

.btn-add:active,
.btn-add.active {
  background: var(--btn-add-active-bg);
  border-color: var(--btn-add-hover-border);
  color: var(--btn-add-hover-color);
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-success:hover {
  background: var(--success-hover);
  color: white;
}

.btn-success:focus,
.btn-success:focus-visible,
.btn-success:active,
.btn-success.active,
.btn-check:checked + .btn-success,
.btn-check:active + .btn-success,
.show > .btn-success.dropdown-toggle {
  background: var(--success-hover);
  border-color: var(--success-hover);
  color: white;
}

.btn-warning {
  background: var(--warning);
  color: var(--text-primary);
}

.btn-warning:hover {
  opacity: 0.92;
  color: var(--text-primary);
}

.btn-warning:focus,
.btn-warning:focus-visible,
.btn-warning:active,
.btn-warning.active,
.btn-check:checked + .btn-warning,
.btn-check:active + .btn-warning,
.show > .btn-warning.dropdown-toggle {
  background: var(--accent-gold-hover);
  border-color: var(--accent-gold-hover);
  color: var(--text-primary);
}

.btn-danger,
.btn-outline-danger {
  background: transparent;
  border: 1.5px solid var(--error);
  color: var(--error);
}

.btn-danger:hover,
.btn-outline-danger:hover {
  background: var(--error);
  color: white;
}

.btn-outline-secondary {
  background: transparent;
  border: 1.5px solid var(--text-tertiary);
  color: var(--text-secondary);
}

.btn-outline-secondary:hover {
  background: var(--btn-outline-secondary-hover-bg);
  border-color: var(--btn-outline-secondary-hover-border);
  color: var(--btn-outline-secondary-hover-color);
}

.btn-outline-secondary:focus-visible {
  background: var(--btn-outline-secondary-hover-bg);
  border-color: var(--btn-outline-secondary-hover-border);
  color: var(--btn-outline-secondary-hover-color);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active {
  background: rgba(var(--accent-primary-rgb), 0.16);
  border-color: rgba(var(--accent-primary-rgb), 0.5);
  color: var(--btn-outline-secondary-hover-color);
}

.btn-outline-success {
  background: transparent;
  border: 1.5px solid var(--success);
  color: var(--success);
}

.btn-outline-success:hover {
  background: var(--success);
  color: white;
}

.btn-outline-warning {
  background: transparent;
  border: 1.5px solid var(--warning);
  color: var(--warning);
}

.btn-outline-warning:hover {
  background: var(--warning);
  color: var(--text-primary);
}

.btn-outline-info {
  background: transparent;
  border: 1.5px solid var(--info);
  color: var(--info);
}

.btn-outline-info:hover {
  background: var(--info);
  color: white;
}

.btn-sm {
  padding: var(--space-1) var(--space-4);
  font-size: 0.875rem;
  min-height: 32px;
}

.btn-lg {
  padding: var(--space-3) var(--space-8);
  font-size: 1rem;
  min-height: 48px;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

/* Reusable split form actions (two equal-width buttons). */
.form-actions-split {
  display: flex;
  gap: var(--space-3);
  width: 100%;
}

.form-actions-split .btn {
  flex: 1 1 0;
  width: auto;
}

/* Mobile buttons */
@media (max-width: 768px) {
  .btn {
    width: 100%;
  }
  
  .btn-sm {
    width: auto;
  }

  .form-actions-split .btn {
    width: auto;
  }
}

.org-unit-favorite-btn .org-unit-favorite-star {
  font-size: 1.25rem;
  line-height: 1;
}

/* Solid warning fill + dark star (Bootstrap .btn-warning foreground). */
.org-unit-favorite-btn--favorited .org-unit-favorite-star {
  color: inherit;
  font-weight: 700;
}

/*
 * Org unit public CTAs: global mobile rule sets .btn { width: 100% } (not .btn-sm).
 * Keep join + favorite on intrinsic widths so they stay on one row when space allows.
 */
.org-unit-join-cta .btn {
  width: auto;
  max-width: 100%;
}

.org-unit-join-cta > form {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}