/**
 * Buttons (shared component)
 * Extracted from dashboard-base.css to avoid conflicts and to be reusable on non-dashboard pages.
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  min-height: var(--btn-height-md);
  padding: var(--btn-padding-md);
  font-family: var(--font-sans);
  font-size: var(--btn-font-md);
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  position: relative;
  user-select: none;
}

.btn:focus-visible {
  outline-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variants */
.btn-primary {
  background: var(--primary);
  color: var(--text-inverse, #ffffff);
  border-color: var(--primary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.btn-secondary {
  background: var(--bg-elevated, #ffffff);
  color: var(--text-secondary);
  border-color: var(--border-strong, var(--gray-300));
}

.btn-secondary:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-color, rgba(0,0,0,0.08));
}

.btn-danger {
  background: var(--danger);
  color: var(--text-inverse);
  border-color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-dark);
  border-color: var(--danger-dark);
}

.btn-success {
  background: var(--success);
  color: var(--text-inverse);
  border-color: var(--success);
}

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

.btn-info {
  background: var(--info);
  color: var(--text-inverse);
  border-color: var(--info);
}

.btn-info:hover:not(:disabled) {
  background: var(--info-dark);
  border-color: var(--info-dark);
}

/* Outline variants */
.btn-outline-primary {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

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

.btn-outline-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}

.btn-outline-danger:hover:not(:disabled) {
  background: var(--danger);
  color: var(--text-inverse);
}

.btn-outline-secondary {
  background: transparent;
  color: var(--gray-600);
  border-color: var(--gray-300);
}

.btn-outline-secondary:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--gray-400);
  color: var(--gray-700);
}

/* Sizes */
.btn-xs {
  min-height: var(--btn-height-xs);
  padding: var(--btn-padding-xs);
  font-size: var(--btn-font-xs);
}

.btn-sm {
  min-height: var(--btn-height-sm);
  padding: var(--btn-padding-sm);
  font-size: var(--btn-font-sm);
}

.btn-lg {
  min-height: var(--btn-height-lg);
  padding: var(--btn-padding-lg);
  font-size: var(--btn-font-lg);
}

.btn-block {
  width: 100%;
}

/* Prevent SVG icons from shrinking inside flex buttons */
.btn > svg {
  flex-shrink: 0;
}

/* Ensure text fits inside constrained-width buttons (sidebars, narrow containers) */
.sidebar .btn,
.sidebar-section .btn,
.btn-block {
  min-width: 0;
}
.sidebar .btn > span,
.sidebar .btn > svg + span,
.sidebar-section .btn > span,
.btn-block > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* For buttons with inline text (no inner span), use inner flex trick */
.sidebar .btn,
.sidebar-section .btn {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--btn-font-sm);
}
/* Reduce sidebar button padding to fit more text */
.sidebar .btn-block,
.sidebar-section .btn-block {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
}

@media (max-width: 480px) {
  .btn {
    min-height: var(--btn-height-sm);
    padding: var(--btn-padding-sm);
    font-size: var(--btn-font-sm);
  }
}

@media (prefers-contrast: high) {
  .btn:focus-visible {
    outline-width: 3px;
    outline-color: currentColor;
    box-shadow: none;
  }
}