/* Komponen: Tombol.
   Varian menimpa VARIABEL --bs-btn-* Bootstrap (bukan sekadar properti)
   supaya semua state — hover, :active, .show (dropdown terbuka), disabled —
   ikut tema kita dan tidak jatuh ke warna default Bootstrap. */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  border-radius: var(--radius-sm);
  padding: 9px 16px; line-height: 1.2;
  transition: background-color .12s, border-color .12s, color .12s;
}
.btn svg { width: 15px; height: 15px; }

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-strong);
  --bs-btn-hover-border-color: var(--primary-strong);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-strong);
  --bs-btn-active-border-color: var(--primary-strong);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
}

.btn-secondary {
  --bs-btn-color: var(--text);
  --bs-btn-bg: var(--card-bg);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: var(--hover);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: var(--hover);
  --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-disabled-color: var(--muted);
  --bs-btn-disabled-bg: var(--card-bg);
  --bs-btn-disabled-border-color: var(--border);
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--tile-red-fg);
  --bs-btn-border-color: var(--tile-red-fg);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--danger-fg);
  --bs-btn-hover-border-color: var(--danger-fg);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--danger-fg);
  --bs-btn-active-border-color: var(--danger-fg);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--tile-red-fg);
  --bs-btn-disabled-border-color: var(--tile-red-fg);
}

/* Varian khas kita (bukan varian Bootstrap) — tetap lewat variabel
   yang sama supaya state-nya lengkap. */
.btn-soft {
  --bs-btn-color: var(--primary);
  --bs-btn-bg: var(--primary-tint);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-soft);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--primary);
  --bs-btn-active-bg: var(--primary-soft);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--muted);
  --bs-btn-disabled-bg: var(--primary-tint);
  --bs-btn-disabled-border-color: transparent;
}

.btn-ghost {
  --bs-btn-color: var(--text-2);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: var(--hover);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: var(--hover);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--muted);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
}

.btn-sm { padding: 5px 11px; font-size: 12.5px; }
.btn-lg { padding: 12px 22px; font-size: 14.5px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }