/* debug-fixes.css */
/* Additional CSS fixes to ensure panels are visible and properly styled */

/* Ensure panels are visible */
.side-panel {
  display: flex !important;
  flex-direction: column !important;
  background-color: #f8f9fa !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  height: auto !important;
  min-height: 200px !important;
  overflow: visible !important;
}

.panel-header {
  background-color: #2D3142 !important;
  color: white !important;
  padding: 12px 16px !important;
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}

.panel-content {
  padding: 16px !important;
  overflow-y: auto !important;
  flex: 1 !important;
  max-height: calc(100vh - 250px) !important;
  display: block !important;
  position: relative !important;
}

/* Force visibility for white point panel */
#white-point-explanation-panel {
  display: flex !important;
}

#white-point-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force visibility for intent explanation panel */
#intent-explanation-panel {
  display: flex !important;
}

#explanation-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Make sure animation is visible */
.svg-container svg {
  max-width: 100% !important;
  height: auto !important;
}

/* Make sure four column layout is displayed properly */
.four-column-layout {
  display: grid !important;
  grid-template-columns: 0.8fr 1.2fr 0.8fr 0.8fr !important;
  gap: 16px !important;
  height: auto !important;
  min-height: 400px !important;
  width: 100% !important;
}

/* Ensure debug info is visible */
#debug-info {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  max-width: 600px !important;
  max-height: 300px !important;
  overflow: auto !important;
  z-index: 9999 !important;
  padding: 15px !important;
  background-color: #f5f5f5 !important;
  border: 1px solid #ddd !important;
  box-shadow: 0 0 10px rgba(0,0,0,0.2) !important;
}

/* Make sure controls are visible */
.controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

/* Fix for mobile display */
@media (max-width: 767px) {
  .four-column-layout {
    grid-template-columns: 1fr !important;
  }
  
  .side-panel {
    min-height: 150px !important;
  }
  
  .side-panel.mobile-active {
    transform: translateX(0) !important;
  }
}