/* Pareto Dashboard Tab Styles */
[data-controller="pareto-dashboard"] .tab-button {
  transition: all 0.15s ease-in-out;
  position: relative;
}

[data-controller="pareto-dashboard"] .tab-button.active-tab {
  border-bottom-color: #ef4444 !important;
  color: #ffffff !important;
}

/* Ensure the border shows properly */
[data-controller="pareto-dashboard"] .tab-button.border-b-2 {
  border-bottom-width: 2px;
}

/* Loading states */
.loading-indicator {
  z-index: 10;
}

/* Chart container positioning */
.chart-container {
  position: relative;
}

/* Skeleton animations */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Error state styling */
.chart-error {
  background-color: rgba(31, 41, 55, 0.9);
}

/* Ensure tab panels maintain their height */
.tab-panel {
  min-height: 400px;
}

/* Tooltip positioning */
[data-controller="tooltip"] {
  position: relative;
}

/* Ensure metric cards have consistent height */
.metric-card {
  min-height: 100px;
}