/* Chart View Controls Styling */

/* Default width constraint for charts */
.chart-container {
  max-width: 70%;
  margin: 0 auto;
  position: relative;
}

.chart-view-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 4px 4px 0px 0px;
}

/* Full width mode when expanded */
.chart-container.expanded {
  max-width: 100%;
  transition: max-width 0.3s ease-out;
}

.chart-container.fullscreen-mode {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  z-index: 9999 !important;
  padding: 1rem !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Make sure canvas is centered and properly sized in fullscreen mode */
.chart-container.fullscreen-mode canvas {
  display: block !important;
  margin: auto !important;
  max-height: 85vh !important;
  max-width: 95vw !important;
  height: auto !important;
  width: auto !important;
}

/* Hide chart export controls in fullscreen mode (corrected version) */
.chart-container.fullscreen-mode .chart-controls {
  display: none !important;
}

.chart-container.fullscreen-mode + .chart-data-table-container,
.chart-container.fullscreen-mode + .chart-description {
  display: none !important;
}

/* Ensure chart view controls remain visible in fullscreen mode */
.chart-container.fullscreen-mode .chart-view-controls {
  display: flex !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 10000 !important;
  border-radius: 4px !important;
  padding: 8px !important;
}

/* Button styling for view controls */
.chart-view-button {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
}

/* Icon within buttons */
.chart-view-button svg {
  width: 14px !important;
  height: 14px !important;
}

.chart-container.fullscreen-mode .fullscreen-close {
  display: block;
}

/* Hide width toggle button in fullscreen mode */
.chart-container.fullscreen-mode .chart-view-button[id^="toggle-width-"] {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .chart-container {
    max-width: 100%;
  }
  button[aria-label="Toggle chart width"] {
    display: none;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .chart-container {
    transition: none;
  }
}