/* 
 * Fixed Analytics Layout CSS
 * This corrects the overlapping charts and makes them properly resizable
 */

/* Reset problematic layout styling */
#analytics-container .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

#analytics-container .col-md-6,
#analytics-container .col-md-3 {
  padding: 15px;
  box-sizing: border-box;
}

/* Fix for col-md-3 to prevent overlap and equal sizing */
#analytics-container .col-md-3 {
  width: 25%; /* Enforce width */
  flex: 0 0 25%; /* Prevent flex resizing */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  min-width: 280px; /* Ensure minimum width for proper chart size */
}

/* Make each chart container have proper boundaries */
#analytics-container .col-md-6 {
  width: 50%; /* Enforce width */
  flex: 0 0 50%; /* Prevent flex resizing */
}

/* Make the charts responsive and maintain aspect ratio */
#activity-radar-chart {
  aspect-ratio: 1 / 0.8; /* Maintain reasonable aspect ratio */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto;
  display: block;
}

/* Pie charts with fixed equal sizing - bigger size */
#modality-chart,
#grouping-chart {
  width: 300px !important;
  height: 300px !important;
  max-width: 300px !important;
  max-height: 300px !important;
}

/* Add spacing between the charts and the total duration text */
.mt-3.text-center {
  margin-top: 1.5rem !important;
  padding-top: 1rem;
  border-top: 1px solid #eee;
  clear: both; /* Force below all charts */
  width: 100%;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
  #analytics-container .col-md-6,
  #analytics-container .col-md-3 {
    width: 100%;
    flex: 0 0 100%;
    margin-bottom: 20px;
  }

  .pie-chart-container {
    height: 260px !important;
  }

  #activity-radar-chart {
    max-height: 300px !important;
  }
}

/* Medium screens - transition layout */
@media (min-width: 768px) and (max-width: 991px) {
  #analytics-container .col-md-3 {
    width: 50%;
    flex: 0 0 50%;
  }

  #analytics-container .col-md-6 {
    width: 100%;
    flex: 0 0 100%;
    margin-bottom: 20px;
  }

  .pie-chart-container {
    height: 260px !important;
  }
}

/* Analytics View Toggle */
.analytics-view-toggle {
  margin-bottom: 1rem;
}

.analytics-view-toggle .btn-group {
  border-radius: 4px;
  overflow: hidden;
}

.analytics-view-toggle .btn {
  font-size: 0.85rem;
  padding: 0.35rem 0.85rem;
  font-weight: 500;
  border-radius: 0;
  transition: all 0.2s ease;
}

.analytics-view-toggle .btn:first-child {
  border-radius: 4px 0 0 4px;
}

.analytics-view-toggle .btn:last-child {
  border-radius: 0 4px 4px 0;
}

.analytics-view-toggle .btn-primary {
  background-color: #1B2A4A;
  border-color: #1B2A4A;
}

.analytics-view-toggle .btn-outline-primary {
  color: #1B2A4A;
  border-color: #1B2A4A;
}

.analytics-view-toggle .btn-outline-primary:hover {
  background-color: rgba(27, 42, 74, 0.1);
  color: #1B2A4A;
}