/* Pesanku Design System Styles */

body {
  font-family: 'Rubik', sans-serif;
  background-color: #f4f5f8;
  color: #2c323f;
}

.card-pesanku {
  background: #ffffff;
  border: 1px solid #e6edf5;
  box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
  border-radius: 12px;
}

.btn-pesanku-primary {
  background-color: #7366ff;
  color: #ffffff;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-pesanku-primary:hover {
  background-color: #5c4dff;
  box-shadow: 0 4px 12px rgba(115, 102, 255, 0.3);
}

.badge-pesanku-success {
  background-color: rgba(81, 187, 37, 0.1);
  color: #51bb25;
  border: 1px solid rgba(81, 187, 37, 0.3);
}

.badge-pesanku-warning {
  background-color: rgba(248, 214, 43, 0.15);
  color: #d9a406;
  border: 1px solid rgba(248, 214, 43, 0.4);
}

.badge-pesanku-danger {
  background-color: rgba(247, 49, 100, 0.1);
  color: #f73164;
  border: 1px solid rgba(247, 49, 100, 0.3);
}

.badge-pesanku-info {
  background-color: rgba(169, 39, 249, 0.1);
  color: #a927f9;
  border: 1px solid rgba(169, 39, 249, 0.3);
}

.sidebar-item-active {
  background-color: #7366ff;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(115, 102, 255, 0.35);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f4f5f8;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}