/* =========================================
   BASE BUTTON OVERRIDES
========================================= */

.btn {
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.btn-primary {
  --bs-btn-focus-shadow-rgb: 79, 70, 229;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);

  --bs-btn-active-bg: var(--color-primary-hover);
  --bs-btn-active-border-color: var(--color-primary-hover);
}
.btn-info {
  --bs-btn-focus-shadow-rgb: 34, 197, 94;
  --bs-btn-color: #000;
  --bs-btn-bg: var(--color-secondary);
  --bs-btn-border-color: var(--color-black);

  --bs-btn-hover-color: var(--color-secondary);
  --bs-btn-hover-bg: var(--color-secondary-hover);
  --bs-btn-hover-border-color: var(--color-secondary);

  --bs-btn-active-bg: var(--color-secondary-hover);
  --bs-btn-active-border-color: var(--color-black-hover);
}

.btn-success {
  --bs-btn-focus-shadow-rgb: 34, 197, 94;
  --bs-btn-color: #000;
  --bs-btn-bg: var(--color-success);
  --bs-btn-border-color: var(--color-success);

  --bs-btn-hover-bg: var(--color-success-hover);
  --bs-btn-hover-border-color: var(--color-success-hover);

  --bs-btn-active-bg: var(--color-success-hover);
  --bs-btn-active-border-color: var(--color-success-hover);
}

.btn-danger {
  --bs-btn-focus-shadow-rgb: 239, 68, 68;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-danger);
  --bs-btn-border-color: var(--color-danger);

  --bs-btn-hover-bg: var(--color-danger-hover);
  --bs-btn-hover-border-color: var(--color-danger-hover);

  --bs-btn-active-bg: var(--color-danger-hover);
  --bs-btn-active-border-color: var(--color-danger-hover);
}
.btn-warning {
  --bs-btn-focus-shadow-rgb: 181, 159, 59;
  --bs-btn-color: #111;
  --bs-btn-bg: var(--color-warning);
  --bs-btn-border-color: var(--color-warning);

  --bs-btn-hover-bg: var(--color-warning-hover);
  --bs-btn-hover-border-color: var(--color-warning-hover);

  --bs-btn-active-bg: var(--color-warning-hover);
  --bs-btn-active-border-color: var(--color-warning-hover);
}
.btn-outline-primary {
  --bs-btn-focus-shadow-rgb: 79, 70, 229;
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);

  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-hover-color: #fff;
}
/* =========================================
   TOGGLE BUTTON (Collapse Arrow)
========================================= */

.btn-toggle {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--color-primary);

  padding: 2px 6px;
  font-size: 0.9rem;
  font-weight: 700;

  transition: transform 0.2s ease, color 0.2s ease;
}

.btn-toggle:hover {
  --bs-btn-color: var(--color-primary-hover);
  transform: scale(1.15);
}

.btn-close {
  width: 32px;
  height: 32px;

  border-radius: 8px;
  border: 1px solid #ccc;

  background-color: #fff;
  background-size: 14px;

  opacity: 1;
  transition: all 0.2s ease;
}

.btn-close:hover {
  background-color: #f8f9fa;
  transform: scale(1.05);
}