/* Chart Styles for Proper Sizing */
/* ================================ */

/* Global chart container styles */
.chart-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* Specific chart size controls */
.chart-small {
  height: 180px !important;
}

.chart-medium {
  height: 220px !important;
}

.chart-large {
  height: 280px !important;
}

/* Dashboard chart containers */
#performanceChart {
  max-height: 250px !important;
}

#enrollmentChart,
#pipelineChart {
  max-height: 200px !important;
}

#monthlyChart,
#departmentChart {
  max-height: 220px !important;
}

/* Responsive chart sizing */
@media (max-width: 768px) {
  .chart-wrapper {
    height: 150px !important;
  }
  
  #performanceChart,
  #enrollmentChart,
  #pipelineChart,
  #monthlyChart,
  #departmentChart {
    max-height: 150px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .chart-wrapper {
    height: 180px !important;
  }
}

/* Chart legend adjustments */
.chart-legend {
  margin-top: 10px;
  font-size: 0.875rem;
}

/* Prevent chart overflow */
.chart-container-responsive {
  overflow: hidden;
  position: relative;
}

/* Animation for chart loading */
@keyframes chartFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.chart-animated {
  animation: chartFadeIn 0.5s ease-out;
}

/* Grid layout for charts */
.charts-grid {
  display: grid;
  gap: 1.5rem;
}

.charts-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.charts-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Chart card styling */
.chart-card {
  background: white;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chart-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Chart title styling */
.chart-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1rem;
}

/* Chart subtitle */
.chart-subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 0.75rem;
}

/* Loading skeleton for charts */
.chart-skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 0.5rem;
  height: 200px;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Chart error state */
.chart-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  color: #991b1b;
  font-size: 0.875rem;
}

/* Chart empty state */
.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: #f9fafb;
  border: 2px dashed #e5e7eb;
  border-radius: 0.5rem;
  color: #6b7280;
}

.chart-empty-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

.chart-empty-text {
  font-size: 0.875rem;
}