.text-slate-500 {
  color: #64748b;
}

.text-slate-400 {
  color: #94a3b8;
}

.fw-extra-bold {
  font-weight: 800;
}

.rounded-4 {
  border-radius: 1rem !important;
}

.progress-bar-animated {
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-scroll::-webkit-scrollbar {
  width: 6px;
}

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

.custom-scroll::-webkit-scrollbar-track {
  background-color: transparent;
}

@media (min-width: 992px) {
  .h-lg-fixed {
    height: 580px;
  }

  .h-half {
    height: 48%;
  }
}

.bg-blue-soft {
  background-color: #eff6ff;
  color: #2563eb;
  border: 1px solid #dbeafe;
}

.bg-slate-soft {
  background-color: #f8fafc;
  color: #1e293b;
  border: 1px solid #e2e8f0;
}

.bg-emerald-soft {
  background-color: #ecfdf5;
  color: #059669;
  border: 1px solid #d1fae5;
}

/* Card Hover Effect */
.hover-card {
  transition: all 0.3s;
}

.hover-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

/* Background Icon Overlay */
.bg-icon-overlay {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1.5rem;
  opacity: 0.1;
  z-index: 0;
  transition: opacity 0.3s;
}

.hover-card:hover .bg-icon-overlay {
  opacity: 0.2;
}

.card-content {
  position: relative;
  z-index: 1;
}

/* Custom Scrollbar */
.custom-scroll::-webkit-scrollbar {
  width: 5px;
}

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

.custom-scroll::-webkit-scrollbar-track {
  background-color: transparent;
}

.bg-blue-soft {
  background-color: #eff6ff;
  color: #2563eb;
}

.bg-slate-soft {
  background-color: #f8fafc;
  color: #1e293b;
  border: 1px solid #e2e8f0;
}

.bg-emerald-soft {
  background-color: #ecfdf5;
  color: #059669;
}

.bg-icon-overlay {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.2rem;
  opacity: 0.1;
  z-index: 0;
  transition: opacity 0.3s;
}

.hover-card:hover .bg-icon-overlay {
  opacity: 0.2;
}

.card-content {
  position: relative;
  z-index: 1;
}

/* Tab Styling Base */
.custom-tabs .nav-link {
  border-radius: 50rem;
  color: #64748b;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.5rem 1.5rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Center content */
}

.custom-tabs .nav-link.active-blue.active {
  background-color: #eff6ff;
  color: #2563eb;
  border: 1px solid #2563eb;
}

.custom-tabs .nav-link.active-green.active {
  background-color: #ecfdf5;
  color: #059669;
  border: 1px solid #059669;
}

.tab-content {
  animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === RESPONSIVE LOGIC === */

/* 1. Desktop Layout (Layar Besar) */
@media (min-width: 992px) {
  .dashboard-row-fixed {
    height: 600px;
  }

  .header-responsive {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .tabs-responsive {
    width: auto;
  }
}

/* 2. Mobile Layout (Layar Kecil) */
@media (max-width: 991.98px) {
  .dashboard-row-fixed {
    height: auto;
  }

  /* Tinggi bebas di mobile */

  /* Header jadi tumpuk vertikal tapi rapi */
  .header-responsive {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /* Tab memenuhi lebar (Full Width) seperti aplikasi native */
  .tabs-responsive {
    width: 100%;
    display: flex;
  }

  .tabs-responsive .nav-item {
    flex: 1;
    /* Bagi rata 50:50 */
  }

  .tabs-responsive .nav-link {
    width: 100%;
  }
}

.is-updating {
  opacity: 0.5;
  /* Membuat agak transparan */
  pointer-events: none;
  /* Mencegah user klik list saat loading */
  filter: blur(1px);
  /* Opsional: Efek buram sedikit agar makin jelas lagi loading */
  transition: all 0.3s ease;
  /* Transisi halus */
}