#player-sim-container,
#admin-info-container,
#admin-rcm-container {
  width: 100% !important;
  height: calc(100% - 50px) !important; /* Match parent's content area */
  overflow: auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* REGIONAL INDICATORS CARD - Fixed layout */
#epidemic-intelligence {
  display: flex !important;
  flex-direction: column !important;
}

#epidemic-intelligence > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
  margin-bottom: 15px !important;
  width: 100% !important;
}

#epidemic-intelligence > div > div {
  flex: 1 !important;
  min-width: 280px !important;
  min-height: 250px !important;
}

/* Top row with charts - Proper flexbox */
#epidemic-intelligence > div:first-of-type,
#epidemic-intelligence > div:last-of-type {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
  margin-bottom: 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Fixed left and right columns ratio */
#epidemic-intelligence > div > div:first-child {
  flex: 3 !important;
  min-width: 280px !important;
  box-sizing: border-box !important;
}

#epidemic-intelligence > div > div:last-child {
  flex: 2 !important;
  min-width: 280px !important;
  box-sizing: border-box !important;
}

/* Bottom row with charts - Proper flexbox */
#epidemic-intelligence > div:last-of-type {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  width: 100% !important;
}

/* Individual chart containers */
#epidemic-intelligence > div:last-of-type > div {
  flex: 1 !important;
  min-width: 0 !important; /* Allow flex to work properly */
  width: auto !important;
  height: 280px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Chart containers - Properly bounded */
.graph-container {
  height: 250px !important;
  width: 100% !important;
  overflow: hidden !important;
  margin-bottom: 15px !important;
  box-sizing: border-box !important;
}

/* FIX: Specific fix for bubble chart container */
#regional-outcomes-bubble {
  position: relative !important;
  width: 100% !important;
  height: 280px !important;
  background-color: #0d1117 !important;
  border: 1px solid #30363d !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  overflow: hidden !important; /* NOT visible */
  padding: 0 !important;
  margin: 0 !important;
}

/* FIX: Ensure bubble chart fits inside container properly */
#regional-outcomes-bubble #bubble {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* FIX: Specific fix for heatmap container */
#regional-outcomes-heatmap {
  position: relative !important;
  width: 100% !important;
  height: 280px !important;
  background-color: #0d1117 !important;
  border: 1px solid #30363d !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  overflow: hidden !important; /* NOT visible */
  padding: 0 !important;
  margin: 0 !important;
}

/* FIX: Ensure heatmap fits inside container properly */
#regional-outcomes-heatmap #heatmap {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* FIX: Ensure sunburst container is properly centered and not cut off on left */
#sunburst-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important; /* NOT visible */
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* FIX: Center and properly size the sunburst chart */
#sunburst {
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 auto !important;
  display: block !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  padding-left: 20px !important; /* Add padding to prevent left side cutoff */
}

/* Ensure plots stay within containers */
#plot-epidemic,
#bubble, 
#heatmap {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Population overview sunburst chart */
#sunburst {
  width: 100% !important;
  height: 220px !important;
  max-width: 350px !important;
  margin: 0 auto !important;
}

/* REGIONAL INDICATORS CARD - Full height */
#regional-indicators-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.indicators-wrapper {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  height: calc(100% - 50px) !important;
  box-sizing: border-box !important;
}

/* SIMULATOR CARD - Better layout */
#player-sim-container,
#admin-info-container,
#admin-rcm-container {
  width: 100% !important;
  height: calc(100% - 50px) !important; /* Match parent's content area */
  overflow: auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

#simulator-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.player-simulator-interface {
  padding: 15px;
  height: auto;
  overflow: auto;
}

.btn-action {
  background: #1f6feb !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  margin-right: 8px;
  margin-bottom: 8px;
  transition: background-color 0.2s;
}

.btn-action:hover {
  background: #388bfd !important;
}

/* CONTROL CENTER CARD - Better layout */
#poll-viewer-card {
  min-height: calc(100vh - 140px) !important;
  height: calc(100vh - 140px) !important;
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 30px !important;
  overflow: hidden !important;
}

.poll-viewer-container {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  height: calc(100% - 50px) !important; /* Subtract header height */
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Fix for poll viewer content */
#poll-viewer-content {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px !important;
}

/* Improved mobile responsive layouts */
@media (max-width: 768px) {
  
  /* Force flexbox columns on smaller screens */
  #epidemic-intelligence > div {
    flex-direction: column !important;
    gap: 15px !important;
  }
  
  #epidemic-intelligence > div > div,
  #epidemic-intelligence > div:first-of-type > div:first-child,
  #epidemic-intelligence > div:first-of-type > div:last-child,
  #epidemic-intelligence > div:last-of-type > div.graph-container {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 100% !important;
  }
  
  /* Fix chart heights on mobile */
  .graph-container {
    height: 250px !important;
    margin-bottom: 15px !important;
  }
  
  /* Make plot containers more compact */
  #plot-epidemic,
  #bubble, 
  #heatmap,
  #sunburst {
    height: 230px !important;
  }
}

/* FIXED Regional indicators layout */
#epidemic-intelligence > div {
  display: flex !important;
  gap: 15px !important;
  margin-bottom: 15px !important;
  width: 100% !important;
}

#epidemic-intelligence > div > div {
  min-height: 280px !important;
}

/* FIXED plot containers - Proper dimensions and overflow handling */
#plot-epidemic {
  width: 100% !important;
  height: 280px !important;
  min-height: 280px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.graph-container {
  overflow: hidden !important;
  height: 280px !important;
  position: relative !important;
  border: 1px solid #30363d !important;
  border-radius: 6px !important;
  background-color: #0d1117 !important;
}

#bubble, #heatmap, #health-outcomes-plot, #cost-outcomes-plot {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

#sunburst {
  margin: 0 auto !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  max-width: 350px !important;
}

/* Map and scene viewer containers */
#map-viewer-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

#scene-viewer-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 15px !important;
}

/* Scene navigation buttons */
.scene-navigator-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  bottom: 32px !important;
  cursor: pointer !important;
  z-index: 2999 !important;
  background: #21262d !important;
  border: 1px solid #30363d !important;
  color: #c9d1d9 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  pointer-events: auto !important;
}

.prev-btn {
  left: 32px !important;
}

.next-btn {
  left: 92px !important;
}

#scene-nav-btns {
  position: fixed !important;
  left: 32px !important;
  bottom: 32px !important;
  z-index: 2999 !important;
  pointer-events: none !important;
}
/* FIXED PLOT OVERFLOW ISSUES - Force charts to stay within bounds */

/* Force Plotly charts to stay within containers */
.js-plotly-plot {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Fix SVG containers in Plotly plots */
.js-plotly-plot .plotly .svg-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}

/* Fix main SVG elements that may overflow */
.js-plotly-plot .main-svg {
  width: 100% !important; 
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Fix plot containers to prevent overflow */
#regional-outcomes-bubble,
#regional-outcomes-heatmap {
  position: relative !important;
  width: 100% !important; 
  height: 280px !important;
  background-color: #0d1117 !important;
  border: 1px solid #30363d !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  overflow: hidden !important; /* Critical to let the plot render */
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure bubble and heatmap stay in bounds */
#bubble, 
#heatmap {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important; /* Allow plot to render */
  max-width: none !important; /* Remove max-width constraints */
}

/* Reset any conflicting styles for Plotly containers */
.js-plotly-plot,
.plotly, 
.plot-container {
  width: 100% !important;
  height: 100% !important;
  min-width: unset !important;
  min-height: unset !important;
  max-width: none !important;
  max-height: none !important;
}

@keyframes thinking {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}