/* =========================================================
   BUTTONS.CSS
   Bootstrap Button Override Layer
   Load this AFTER bootstrap.min.css
========================================================= */

/* =========================================================
   BASE BUTTON
========================================================= */
.btn {
  --bs-btn-font-family: var(--font-family-base);
  --bs-btn-font-size: var(--font-size-md);
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1;
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: var(--space-lg);
  --bs-btn-border-width: 1px;
  --bs-btn-border-radius: var(--radius-md);
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: var(--focus-ring-brand);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--button-height);
  padding-inline: var(--space-lg);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  box-shadow: none;
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active,
.btn.active {
  transform: translateY(0);
}

.btn:focus,
.btn:focus-visible {
  box-shadow: var(--focus-ring-brand);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* =========================================================
   PRIMARY
========================================================= */
.btn.btn-primary {
  color: var(--color-text-inverse);
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

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

.btn.btn-primary:focus,
.btn.btn-primary:focus-visible {
  box-shadow: var(--focus-ring-brand);
}

.btn.btn-primary:disabled,
.btn.btn-primary.disabled {
  color: var(--color-text-inverse);
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

/* =========================================================
   SECONDARY
========================================================= */
.btn.btn-secondary {
  color: var(--color-text-primary);
  background-color: var(--color-brand-soft);
  border-color: var(--color-line-strong);
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn-check:checked + .btn.btn-secondary,
.btn.btn-secondary.active,
.btn.btn-secondary:active,
.show > .btn.btn-secondary.dropdown-toggle {
  color: var(--color-text-primary);
  background-color: #f7e89a;
  border-color: var(--color-brand-accent);
}

.btn.btn-secondary:focus,
.btn.btn-secondary:focus-visible {
  box-shadow: var(--focus-ring-brand);
}

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

.btn.btn-success:hover,
.btn.btn-success:focus,
.btn-check:checked + .btn.btn-success,
.btn.btn-success.active,
.btn.btn-success:active,
.show > .btn.btn-success.dropdown-toggle {
  color: var(--color-text-inverse);
  background-color: #17693a;
  border-color: #17693a;
}

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

.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn-check:checked + .btn.btn-danger,
.btn.btn-danger.active,
.btn.btn-danger:active,
.show > .btn.btn-danger.dropdown-toggle {
  color: var(--color-text-inverse);
  background-color: var(--color-brand-secondary);
  border-color: var(--color-brand-secondary);
}

/* =========================================================
   WARNING
========================================================= */
.btn.btn-warning {
  color: var(--color-text-primary);
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}

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

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

.btn.btn-info:hover,
.btn.btn-info:focus,
.btn-check:checked + .btn.btn-info,
.btn.btn-info.active,
.btn.btn-info:active,
.show > .btn.btn-info.dropdown-toggle {
  color: var(--color-text-inverse);
  background-color: #21166f;
  border-color: #21166f;
}

/* =========================================================
   LIGHT
========================================================= */
.btn.btn-light {
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border-color: var(--color-line-strong);
}

.btn.btn-light:hover,
.btn.btn-light:focus,
.btn-check:checked + .btn.btn-light,
.btn.btn-light.active,
.btn.btn-light:active,
.show > .btn.btn-light.dropdown-toggle {
  color: var(--color-text-primary);
  background-color: var(--color-surface-soft);
  border-color: var(--color-line-strong);
}

/* =========================================================
   DARK
========================================================= */
.btn.btn-dark {
  color: var(--color-text-inverse);
  background-color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.btn.btn-dark:hover,
.btn.btn-dark:focus,
.btn-check:checked + .btn.btn-dark,
.btn.btn-dark.active,
.btn.btn-dark:active,
.show > .btn.btn-dark.dropdown-toggle {
  color: var(--color-text-inverse);
  background-color: #171010;
  border-color: #171010;
}

/* =========================================================
   OUTLINE PRIMARY
========================================================= */
.btn.btn-outline-primary {
  color: var(--color-brand-primary);
  background-color: transparent;
  border-color: var(--color-brand-primary);
}

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

/* =========================================================
   OUTLINE SECONDARY
========================================================= */
.btn.btn-outline-secondary {
  color: var(--color-text-primary);
  background-color: transparent;
  border-color: var(--color-line-strong);
}

.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:focus,
.btn-check:checked + .btn.btn-outline-secondary,
.btn.btn-outline-secondary.active,
.btn.btn-outline-secondary:active,
.show > .btn.btn-outline-secondary.dropdown-toggle {
  color: var(--color-text-primary);
  background-color: var(--color-brand-soft);
  border-color: var(--color-brand-accent);
}

/* =========================================================
   OUTLINE SUCCESS
========================================================= */
.btn.btn-outline-success {
  color: var(--color-success);
  background-color: transparent;
  border-color: var(--color-success);
}

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

/* =========================================================
   OUTLINE DANGER
========================================================= */
.btn.btn-outline-danger {
  color: var(--color-danger);
  background-color: transparent;
  border-color: var(--color-danger);
}

.btn.btn-outline-danger:hover,
.btn.btn-outline-danger:focus,
.btn-check:checked + .btn.btn-outline-danger,
.btn.btn-outline-danger.active,
.btn.btn-outline-danger:active,
.show > .btn.btn-outline-danger.dropdown-toggle {
  color: var(--color-text-inverse);
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

/* =========================================================
   OUTLINE WARNING
========================================================= */
.btn.btn-outline-warning {
  color: var(--color-warning);
  background-color: transparent;
  border-color: var(--color-warning);
}

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

/* =========================================================
   OUTLINE INFO
========================================================= */
.btn.btn-outline-info {
  color: var(--color-info);
  background-color: transparent;
  border-color: var(--color-info);
}

.btn.btn-outline-info:hover,
.btn.btn-outline-info:focus,
.btn-check:checked + .btn.btn-outline-info,
.btn.btn-outline-info.active,
.btn.btn-outline-info:active,
.show > .btn.btn-outline-info.dropdown-toggle {
  color: var(--color-text-inverse);
  background-color: var(--color-info);
  border-color: var(--color-info);
}

/* =========================================================
   LINK BUTTON
========================================================= */
.btn.btn-link {
  color: var(--color-brand-primary);
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
}

.btn.btn-link:hover,
.btn.btn-link:focus {
  color: var(--color-brand-secondary);
  text-decoration: underline;
}

/* =========================================================
   BUTTON SIZES
========================================================= */
.btn.btn-sm {
  min-height: 40px;
  padding-inline: var(--space-md);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn.btn-lg {
  min-height: 58px;
  padding-inline: var(--space-xl);
  font-size: var(--font-size-base);
  border-radius: var(--radius-lg);
}

/* =========================================================
   FULL WIDTH HELPER
========================================================= */
.btn.w-100 {
  width: 100%;
}

/* =========================================================
   SOFT / CUSTOM UTILITY BUTTONS
   Optional project-level helpers
========================================================= */
.btn-soft-primary {
  color: var(--color-brand-primary);
  background-color: rgba(var(--color-brand-primary-rgb), 0.08);
  border: 1px solid rgba(var(--color-brand-primary-rgb), 0.14);
}

.btn-soft-primary:hover,
.btn-soft-primary:focus {
  color: var(--color-text-inverse);
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

.btn-soft-accent {
  color: var(--color-text-primary);
  background-color: rgba(var(--color-brand-accent-rgb), 0.20);
  border: 1px solid rgba(var(--color-brand-accent-rgb), 0.35);
}

.btn-soft-accent:hover,
.btn-soft-accent:focus {
  color: var(--color-text-primary);
  background-color: var(--color-brand-accent);
  border-color: var(--color-brand-accent);
}

/* =========================================================
   ICON BUTTON SUPPORT
========================================================= */
.btn .fa,
.btn .fas,
.btn .far,
.btn .fab,
.btn i {
  font-size: 0.95em;
  line-height: 1;
}

/* =========================================================
   MOBILE REFINEMENT
========================================================= */
@media (max-width: 767.98px) {
  .btn {
    min-height: var(--button-height);
    padding-inline: var(--space-md);
    font-size: var(--font-size-sm);
  }

  .btn.btn-lg {
    min-height: 52px;
    padding-inline: var(--space-lg);
    font-size: var(--font-size-md);
  }
}