/* ==========================================
   BUTTONS
   Стилі для кнопок та їх варіантів
   ========================================== */

/* ==========================================
   BASE BUTTON
   ========================================== */
.btn {
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(var(--rgb-brand-primary), 0.25);
}

/* ==========================================
   PRIMARY BUTTON (Green)
   ========================================== */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--color-white);
}

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

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--primary);
  border-color: var(--primary);
  opacity: 0.65;
}

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

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: rgba(var(--rgb-brand-primary), 0.15);
}

/* ==========================================
   INFO BUTTON (Teal)
   ========================================== */
.btn-info {
  color: var(--color-white);
  background-color: var(--info);
  border-color: var(--info);
}

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

.btn-info.disabled,
.btn-info:disabled {
  background-color: var(--info);
  border-color: var(--info);
  opacity: 0.65;
}

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

.btn-outline-info:hover,
.btn-outline-info:focus {
  background-color: rgba(var(--rgb-brand-info), 0.15);
}

/* ==========================================
   WARNING BUTTON (Orange)
   ========================================== */
.btn-warning {
  background-color: var(--warning);
  border-color: var(--warning);
  color: var(--color-neutral-900);
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--warning-hover);
  border-color: var(--warning-dark);
}

.btn-warning.disabled,
.btn-warning:disabled {
  background-color: var(--warning);
  border-color: var(--warning);
  opacity: 0.65;
}

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

.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background-color: rgba(var(--rgb-brand-warning), 0.15);
}

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

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--danger-hover);
  border-color: var(--danger-hover);
}

.btn-danger.disabled,
.btn-danger:disabled {
  background-color: var(--danger);
  border-color: var(--danger);
  opacity: 0.65;
}

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

.btn-success:hover,
.btn-success:focus {
  background-color: var(--success-hover);
  border-color: var(--success-hover);
}

.btn-success.disabled,
.btn-success:disabled {
  background-color: var(--success);
  border-color: var(--success);
  opacity: 0.65;
}

/* ==========================================
   SECONDARY BUTTON - Soft Gray-Green
   ========================================== */
.btn-secondary {
  background-color: var(--color-sage-400);
  border-color: var(--color-sage-400);
  color: var(--color-white);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-sage-500);
  border-color: var(--color-sage-600);
}

.btn-outline-secondary {
  color: var(--color-sage-400);
  border-color: var(--color-sage-400);
  background-color: transparent;
}

.btn-outline-secondary:hover {
  background-color: rgba(var(--rgb-sage-400), 0.15);
  color: var(--color-sage-600);
}

/* ==========================================
   LIGHT BUTTON
   ========================================== */
.btn-light {
  background-color: var(--light);
  border-color: var(--light);
  color: var(--text);
}

.btn-light:hover {
  background-color: var(--color-sage-100);
  border-color: var(--color-sage-200);
}

/* ==========================================
   DARK BUTTON
   ========================================== */
.btn-dark {
  background-color: var(--dark);
  border-color: var(--dark);
  color: var(--color-white);
}

.btn-dark:hover {
  background-color: var(--color-ink-900);
  border-color: var(--color-ink-900);
}

/* ==========================================
   BUTTON SIZES
   ========================================== */
.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 0.8rem 1.6rem;
  font-size: 1.125rem;
}

/* ==========================================
   BADGES
   ========================================== */
.badge-primary,
.progress-bar.bg-primary,
.list-group-item.active {
  background-color: var(--primary);
  border-color: var(--primary);
}

.border-primary {
  border-color: var(--primary) !important;
}

.badge-info,
.progress-bar.bg-info,
.list-group-item.info,
.list-group-item.active.list-group-item-info {
  background-color: var(--info);
  border-color: var(--info);
}

.badge-warning,
.badge-admin,
.progress-bar.bg-warning,
.list-group-item.warning,
.list-group-item.active.list-group-item-warning {
  background-color: var(--warning);
  border-color: var(--warning);
}

.border-info {
  border-color: var(--info) !important;
}

.border-warning {
  border-color: var(--warning) !important;
}

/* ==========================================
   DARK MODE - BUTTONS
   ========================================== */
body.dark-mode .btn-primary,
body.dark-mode .btn-primary:disabled {
  background-color: var(--dm-primary);
  border-color: var(--dm-primary);
  color: var(--dm-text-light);
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus {
  background-color: var(--color-green-600);
  border-color: var(--color-green-600);
}

body.dark-mode .btn-info,
body.dark-mode .btn-info:disabled {
  background-color: var(--dm-info);
  border-color: var(--dm-info);
  color: var(--dm-text-light);
}

body.dark-mode .btn-info:hover,
body.dark-mode .btn-info:focus {
  background-color: var(--color-teal-600);
  border-color: var(--color-teal-600);
}

body.dark-mode .btn-warning,
body.dark-mode .btn-warning:disabled {
  background-color: var(--dm-warning);
  border-color: var(--dm-warning);
  color: var(--dm-text-dark);
}

body.dark-mode .btn-warning:hover,
body.dark-mode .btn-warning:focus {
  background-color: var(--color-amber-700);
  border-color: var(--color-amber-700);
}

body.dark-mode .btn-secondary,
body.dark-mode .btn-secondary:disabled {
  background-color: var(--dm-secondary);
  border-color: var(--dm-secondary);
  color: var(--dm-text-light);
}

body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-secondary:focus {
  background-color: var(--color-slate-600);
  border-color: var(--color-slate-600);
}

body.dark-mode .btn-success,
body.dark-mode .btn-success:disabled {
  background-color: var(--dm-success);
  border-color: var(--dm-success);
  color: var(--dm-text-light);
}

body.dark-mode .btn-success:hover,
body.dark-mode .btn-success:focus {
  background-color: var(--color-green-550);
  border-color: var(--color-green-550);
}

body.dark-mode .btn-danger,
body.dark-mode .btn-danger:disabled {
  background-color: var(--dm-danger);
  border-color: var(--dm-danger);
  color: var(--dm-text-light);
}

body.dark-mode .btn-danger:hover,
body.dark-mode .btn-danger:focus {
  background-color: var(--color-red-650);
  border-color: var(--color-red-650);
}

body.dark-mode .btn-light,
body.dark-mode .btn-light:disabled {
  background-color: var(--dm-light);
  border-color: var(--dm-light);
  color: var(--dm-text-dark);
}

body.dark-mode .btn-light:hover,
body.dark-mode .btn-light:focus {
  background-color: var(--color-slate-300);
  border-color: var(--color-slate-300);
}

body.dark-mode .btn-dark,
body.dark-mode .btn-dark:disabled {
  background-color: var(--dm-dark);
  border-color: var(--dm-dark);
  color: var(--dm-text-dark);
}

body.dark-mode .btn-dark:hover,
body.dark-mode .btn-dark:focus {
  background-color: var(--color-slate-400);
  border-color: var(--color-slate-400);
}