/* ============================================
   BUTTON COMPONENT
   Rendered by <x-button> (resources/views/components/button.blade.php)
   and by UIButton.html() in frontend/js/button.js.

   Markup:  .btn .btn--{primary|secondary|outline|ghost|destructive}
                 .btn--{sm|md|lg} [.btn--block] [.btn--icon-only] [.is-loading]
            > i.btn__icon + span.btn__label

   Each variant also sets Bootstrap's --bs-btn-* variables so Bootstrap's own
   :hover / :active / :disabled rules can never fall back to an unset colour.
   ============================================ */

:root {
  --btn-gradient-primary: linear-gradient(120deg, var(--primary-light) 0%, var(--primary) 38%, var(--primary-dark) 72%, var(--primary) 100%);
  --btn-gradient-secondary: linear-gradient(120deg, #24438f 0%, #18306b 38%, #0f1d3d 72%, #18306b 100%);
  --btn-gradient-destructive: linear-gradient(120deg, #ef5a5d 0%, var(--danger) 38%, var(--danger-dark) 72%, var(--danger) 100%);
  --btn-ring: 0 0 0 3px rgba(var(--primary-rgb), 0.35);
}

/* ==================== BASE ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
  transition: background-position 0.45s var(--ease-out), background-color var(--transition-base),
    border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base),
    transform var(--transition-fast), opacity var(--transition-base);
}

/* Shared by every component variant */
:is(.btn--primary, .btn--secondary, .btn--outline, .btn--ghost, .btn--destructive) {
  position: relative;
  height: var(--btn-height, 42px);
  padding: 0 var(--btn-px, 20px);
  font-size: var(--btn-font-size, 0.875rem);
  border-radius: var(--btn-radius, 10px);
  border: 1px solid var(--bs-btn-border-color, transparent);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  background-size: 220% 100%;
  background-position: 0% 0%;
  box-shadow: var(--btn-shadow, none);
}

:is(.btn--primary, .btn--secondary, .btn--outline, .btn--ghost, .btn--destructive):hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  background-position: 100% 0%;
  box-shadow: var(--btn-shadow-hover, var(--btn-shadow, none));
  transform: translateY(-1px);
}

:is(.btn--primary, .btn--secondary, .btn--outline, .btn--ghost, .btn--destructive):active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
  box-shadow: var(--btn-shadow, none);
  transform: translateY(0) scale(0.98);
}

:is(.btn--primary, .btn--secondary, .btn--outline, .btn--ghost, .btn--destructive):focus-visible {
  outline: none;
  color: var(--bs-btn-hover-color);
  box-shadow: var(--btn-shadow, 0 0 #0000), var(--btn-ring);
}

/* Icons & label */
.btn__icon {
  font-size: var(--btn-icon-size, 1.05em);
  line-height: 1;
  flex-shrink: 0;
}

.btn__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==================== VARIANTS ==================== */
.btn--primary {
  --bs-btn-color: var(--white);
  --bs-btn-hover-color: var(--white);
  --bs-btn-active-color: var(--white);
  --bs-btn-disabled-color: var(--white);
  --bs-btn-bg: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-border-color: transparent;
  --btn-spinner-color: var(--white);
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 80, 208, 0.24), 0 6px 16px -6px rgba(var(--primary-rgb), 0.55);
  --btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 4px rgba(0, 80, 208, 0.22), 0 12px 24px -8px rgba(var(--primary-rgb), 0.6);
  background-image: var(--btn-gradient-primary);
}

.btn--secondary {
  --bs-btn-color: var(--white);
  --bs-btn-hover-color: var(--white);
  --bs-btn-active-color: var(--white);
  --bs-btn-disabled-color: var(--white);
  --bs-btn-bg: #18306b;
  --bs-btn-hover-bg: #18306b;
  --bs-btn-active-bg: #0f1d3d;
  --bs-btn-disabled-bg: #18306b;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-border-color: transparent;
  --btn-spinner-color: var(--white);
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(15, 29, 61, 0.3), 0 6px 16px -6px rgba(15, 29, 61, 0.55);
  --btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(15, 29, 61, 0.28), 0 12px 24px -8px rgba(15, 29, 61, 0.6);
  background-image: var(--btn-gradient-secondary);
}

.btn--outline {
  --bs-btn-color: var(--primary);
  --bs-btn-hover-color: var(--primary-dark);
  --bs-btn-active-color: var(--primary-dark);
  --bs-btn-disabled-color: var(--primary);
  --bs-btn-bg: var(--bg-surface);
  --bs-btn-hover-bg: var(--primary-subtle);
  --bs-btn-active-bg: #dfeaff;
  --bs-btn-disabled-bg: var(--bg-surface);
  --bs-btn-border-color: rgba(var(--primary-rgb), 0.45);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-border-color: var(--primary-dark);
  --bs-btn-disabled-border-color: rgba(var(--primary-rgb), 0.3);
  --btn-spinner-color: var(--primary);
  --btn-shadow: 0 1px 2px rgba(var(--shadow-color), 0.05);
  --btn-shadow-hover: 0 6px 14px -6px rgba(var(--primary-rgb), 0.35);
}

.btn--ghost {
  --bs-btn-color: var(--dark-secondary);
  --bs-btn-hover-color: var(--primary);
  --bs-btn-active-color: var(--primary-dark);
  --bs-btn-disabled-color: var(--muted);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: rgba(var(--primary-rgb), 0.08);
  --bs-btn-active-bg: rgba(var(--primary-rgb), 0.14);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-border-color: transparent;
  --btn-spinner-color: var(--primary);
}

/* Ghost buttons stay flat: no lift on hover */
.btn--ghost:hover {
  transform: none;
}

/* Ghost + text-danger (e.g. "Remove item"): red tint instead of blue */
.btn--ghost.text-danger {
  --bs-btn-hover-bg: var(--danger-subtle);
  --bs-btn-active-bg: rgba(var(--danger-rgb), 0.16);
  --btn-spinner-color: var(--danger);
  --btn-ring: 0 0 0 3px rgba(var(--danger-rgb), 0.3);
}

.btn--destructive {
  --bs-btn-color: var(--white);
  --bs-btn-hover-color: var(--white);
  --bs-btn-active-color: var(--white);
  --bs-btn-disabled-color: var(--white);
  --bs-btn-bg: var(--danger);
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-active-bg: var(--danger-dark);
  --bs-btn-disabled-bg: var(--danger);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-border-color: transparent;
  --btn-spinner-color: var(--white);
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(185, 36, 39, 0.25), 0 6px 16px -6px rgba(var(--danger-rgb), 0.55);
  --btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 4px rgba(185, 36, 39, 0.22), 0 12px 24px -8px rgba(var(--danger-rgb), 0.6);
  --btn-ring: 0 0 0 3px rgba(var(--danger-rgb), 0.35);
  background-image: var(--btn-gradient-destructive);
}

/* ==================== SIZES ==================== */
.btn--sm {
  --btn-height: 34px;
  --btn-px: 14px;
  --btn-font-size: 0.8125rem;
  --btn-radius: 8px;
  --btn-icon-size: 1em;
  gap: 6px;
}

.btn--md {
  --btn-height: 42px;
  --btn-px: 20px;
  --btn-font-size: 0.875rem;
  --btn-radius: 10px;
}

.btn--lg {
  --btn-height: 50px;
  --btn-px: 28px;
  --btn-font-size: 0.95rem;
  --btn-radius: 12px;
  --btn-icon-size: 1.1em;
  gap: 10px;
}

.btn--block {
  width: 100%;
}

.btn--icon-only {
  width: var(--btn-height, 42px);
  padding: 0;
}

/* Inside Bootstrap input groups, stretch to the input's height and let
   Bootstrap join the corners */
.input-group > :is(.btn--primary, .btn--secondary, .btn--outline, .btn--ghost, .btn--destructive) {
  height: auto;
  transform: none;
}

/* ==================== STATES ==================== */
/* Disabled: native :disabled on <button>, .disabled / aria-disabled on <a> */
:is(.btn--primary, .btn--secondary, .btn--outline, .btn--ghost, .btn--destructive):is(:disabled, .disabled, [aria-disabled="true"]) {
  opacity: 0.5;
  box-shadow: none;
  transform: none;
  pointer-events: none;
  cursor: not-allowed;
}

/* Loading: label kept in place (stable width) but hidden behind a spinner */
.btn.is-loading {
  color: transparent !important;
  pointer-events: none;
  cursor: progress;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 1.15em;
  height: 1.15em;
  margin: auto;
  border: 2px solid var(--btn-spinner-color, currentColor);
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Touch screens: comfortable minimum target */
@media (hover: none) and (pointer: coarse) {
  /* min-height wins over the size's fixed height, so sm grows to 44px and lg keeps 50px */
  :is(.btn--primary, .btn--secondary, .btn--outline, .btn--ghost, .btn--destructive):not(.btn--icon-only) {
    min-height: 44px;
  }

  :is(.btn--primary, .btn--secondary, .btn--outline, .btn--ghost, .btn--destructive):hover {
    transform: none;
  }
}