/*
 * CheckInBuddy button palette
 *
 * Semantic button colors must remain identical at every responsive breakpoint.
 * Page styles may adjust layout, size, and spacing, but not action meaning.
 */
:root {
  --app-btn-primary: #2457ff;
  --app-btn-primary-hover: #1d46d8;
  --app-btn-success: #198754;
  --app-btn-success-hover: #157347;
  --app-btn-danger: #dc3545;
  --app-btn-danger-hover: #bb2d3b;
  --app-btn-warning: #ffc107;
  --app-btn-warning-hover: #e0a800;
  --app-btn-info: #0dcaf0;
  --app-btn-info-hover: #0aa2c0;
  --app-btn-secondary: #64748b;
  --app-btn-secondary-hover: #475569;
  --app-btn-dark: #1f2937;
  --app-btn-dark-hover: #111827;
  --app-btn-light: #f8fafc;
  --app-btn-light-hover: #e2e8f0;
  --app-btn-light-border: #dbe3ef;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-btn-primary);
  --bs-btn-border-color: var(--app-btn-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-btn-primary-hover);
  --bs-btn-hover-border-color: var(--app-btn-primary-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-btn-primary-hover);
  --bs-btn-active-border-color: var(--app-btn-primary-hover);
  background-color: var(--app-btn-primary) !important;
  border-color: var(--app-btn-primary) !important;
  color: #fff !important;
}

.btn-success {
  background-color: var(--app-btn-success) !important;
  border-color: var(--app-btn-success) !important;
  color: #fff !important;
}

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

.btn-warning {
  background-color: var(--app-btn-warning) !important;
  border-color: var(--app-btn-warning) !important;
  color: #2b2200 !important;
}

.btn-info {
  background-color: var(--app-btn-info) !important;
  border-color: var(--app-btn-info) !important;
  color: #082f49 !important;
}

.btn-secondary {
  background-color: var(--app-btn-secondary) !important;
  border-color: var(--app-btn-secondary) !important;
  color: #fff !important;
}

.btn-dark {
  background-color: var(--app-btn-dark) !important;
  border-color: var(--app-btn-dark) !important;
  color: #fff !important;
}

.btn-light {
  background-color: var(--app-btn-light) !important;
  border-color: var(--app-btn-light-border) !important;
  color: #1f2937 !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--app-btn-primary-hover) !important;
  border-color: var(--app-btn-primary-hover) !important;
  color: #fff !important;
}

.btn-success:hover,
.btn-success:focus-visible,
.btn-success:active,
.btn-success.active,
.show > .btn-success.dropdown-toggle {
  background-color: var(--app-btn-success-hover) !important;
  border-color: var(--app-btn-success-hover) !important;
  color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus-visible,
.btn-danger:active,
.btn-danger.active,
.show > .btn-danger.dropdown-toggle {
  background-color: var(--app-btn-danger-hover) !important;
  border-color: var(--app-btn-danger-hover) !important;
  color: #fff !important;
}

.btn-warning:hover,
.btn-warning:focus-visible,
.btn-warning:active,
.btn-warning.active,
.show > .btn-warning.dropdown-toggle {
  background-color: var(--app-btn-warning-hover) !important;
  border-color: var(--app-btn-warning-hover) !important;
  color: #211a00 !important;
}

.btn-info:hover,
.btn-info:focus-visible,
.btn-info:active,
.btn-info.active,
.show > .btn-info.dropdown-toggle {
  background-color: var(--app-btn-info-hover) !important;
  border-color: var(--app-btn-info-hover) !important;
  color: #fff !important;
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
  background-color: var(--app-btn-secondary-hover) !important;
  border-color: var(--app-btn-secondary-hover) !important;
  color: #fff !important;
}

.btn-dark:hover,
.btn-dark:focus-visible,
.btn-dark:active,
.btn-dark.active,
.show > .btn-dark.dropdown-toggle {
  background-color: var(--app-btn-dark-hover) !important;
  border-color: var(--app-btn-dark-hover) !important;
  color: #fff !important;
}

.btn-light:hover,
.btn-light:focus-visible,
.btn-light:active,
.btn-light.active,
.show > .btn-light.dropdown-toggle {
  background-color: var(--app-btn-light-hover) !important;
  border-color: #cbd5e1 !important;
  color: #111827 !important;
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-light {
  background-color: transparent !important;
}

.btn-outline-primary { border-color: var(--app-btn-primary) !important; color: var(--app-btn-primary) !important; }
.btn-outline-success { border-color: var(--app-btn-success) !important; color: var(--app-btn-success) !important; }
.btn-outline-danger { border-color: var(--app-btn-danger) !important; color: var(--app-btn-danger) !important; }
.btn-outline-warning { border-color: var(--app-btn-warning-hover) !important; color: #8a6500 !important; }
.btn-outline-info { border-color: var(--app-btn-info-hover) !important; color: #087990 !important; }
.btn-outline-secondary { border-color: var(--app-btn-secondary) !important; color: var(--app-btn-secondary) !important; }
.btn-outline-dark { border-color: var(--app-btn-dark) !important; color: var(--app-btn-dark) !important; }
.btn-outline-light { border-color: var(--app-btn-light-border) !important; color: #f8fafc !important; }

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active,
.btn-outline-primary.active { background-color: var(--app-btn-primary) !important; border-color: var(--app-btn-primary) !important; color: #fff !important; }
.btn-outline-success:hover,
.btn-outline-success:focus-visible,
.btn-outline-success:active,
.btn-outline-success.active { background-color: var(--app-btn-success) !important; border-color: var(--app-btn-success) !important; color: #fff !important; }
.btn-outline-danger:hover,
.btn-outline-danger:focus-visible,
.btn-outline-danger:active,
.btn-outline-danger.active { background-color: var(--app-btn-danger) !important; border-color: var(--app-btn-danger) !important; color: #fff !important; }
.btn-outline-warning:hover,
.btn-outline-warning:focus-visible,
.btn-outline-warning:active,
.btn-outline-warning.active { background-color: var(--app-btn-warning) !important; border-color: var(--app-btn-warning) !important; color: #2b2200 !important; }
.btn-outline-info:hover,
.btn-outline-info:focus-visible,
.btn-outline-info:active,
.btn-outline-info.active { background-color: var(--app-btn-info) !important; border-color: var(--app-btn-info) !important; color: #082f49 !important; }
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible,
.btn-outline-secondary:active,
.btn-outline-secondary.active { background-color: var(--app-btn-secondary) !important; border-color: var(--app-btn-secondary) !important; color: #fff !important; }
.btn-outline-dark:hover,
.btn-outline-dark:focus-visible,
.btn-outline-dark:active,
.btn-outline-dark.active { background-color: var(--app-btn-dark) !important; border-color: var(--app-btn-dark) !important; color: #fff !important; }
.btn-outline-light:hover,
.btn-outline-light:focus-visible,
.btn-outline-light:active,
.btn-outline-light.active { background-color: var(--app-btn-light) !important; border-color: var(--app-btn-light-border) !important; color: #1f2937 !important; }

.btn-check:checked + .btn-outline-primary { background-color: var(--app-btn-primary) !important; border-color: var(--app-btn-primary) !important; color: #fff !important; }
.btn-check:checked + .btn-outline-success { background-color: var(--app-btn-success) !important; border-color: var(--app-btn-success) !important; color: #fff !important; }
.btn-check:checked + .btn-outline-danger { background-color: var(--app-btn-danger) !important; border-color: var(--app-btn-danger) !important; color: #fff !important; }
.btn-check:checked + .btn-outline-warning { background-color: var(--app-btn-warning) !important; border-color: var(--app-btn-warning) !important; color: #2b2200 !important; }
.btn-check:checked + .btn-outline-info { background-color: var(--app-btn-info) !important; border-color: var(--app-btn-info) !important; color: #082f49 !important; }
.btn-check:checked + .btn-outline-secondary { background-color: var(--app-btn-secondary) !important; border-color: var(--app-btn-secondary) !important; color: #fff !important; }
.btn-check:checked + .btn-outline-dark { background-color: var(--app-btn-dark) !important; border-color: var(--app-btn-dark) !important; color: #fff !important; }
.btn-check:checked + .btn-outline-light { background-color: var(--app-btn-light) !important; border-color: var(--app-btn-light-border) !important; color: #1f2937 !important; }

.btn:disabled,
.btn.disabled {
  opacity: 0.62;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(36, 87, 255, 0.2) !important;
}